/* ===== FDE 培训页（fde.html） =====
   复用 styles.css 的 .cases-hero / .section / .compare-table / .contact，
   本页独有样式集中在此，类名统一 .fde- 前缀，避免影响其它页面。 */

/* Hero 主标题里的强调词（深底上用浅蓝，与 .compare-head .hl 一致） */
.cases-hero h1 em{font-style:normal;color:#8FB2F2}
/* 强调词整体不断行，避免「自己的」和「FDE」被拆到两行 */
.fde-hero h1 em{white-space:nowrap}
/* 深色 hero 上的描边按钮：.btn-line 默认是深色描边+深色字，在深底上看不见 */
.fde-hero .btn-line{color:var(--paper);border-color:rgba(246,243,236,.5)}
.fde-hero .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:4px 4px 0 rgba(246,243,236,.28)}
/* 深色 hero 上的实心按钮：.btn-solid 底色(#16130E)与 hero(#171410)几乎同色，
   只剩白字没有按钮形状，因此反色为浅底深字 */
.fde-hero .btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.fde-hero .btn-solid:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:4px 4px 0 rgba(246,243,236,.28)}
/* 窄屏不再用主动断行，交给自动换行 */
@media (max-width:820px){
  .fde-hero h1 br{display:none}
}

/* Hero 下方的状态条 */
.fde-status{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:34px;
}
.fde-status span{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:#cfc7b6;border:1px solid var(--dark-line);
  padding:7px 14px;background:rgba(255,255,255,.03);
}

/* 痛点：编号列表 */
.fde-pains{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1.5px solid var(--ink);
}
.fde-pain{
  display:flex;gap:20px;align-items:flex-start;
  padding:28px 24px 28px 0;
  border-bottom:1px solid var(--line);
}
.fde-pain:nth-child(odd){padding-right:40px;border-right:1px solid var(--line)}
.fde-pain:nth-child(even){padding-left:40px}
.fde-pain-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--accent);padding-top:4px;flex-shrink:0;
}
.fde-pain p{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.fde-pain b{color:var(--ink);font-weight:700}

/* 案例卡 */
.fde-case{
  display:grid;grid-template-columns:1.35fr .65fr;gap:0;
  border:1.5px solid var(--ink);background:#fff;
}
.fde-case-main{padding:40px 44px}
.fde-case-cat{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--ink-3);margin-bottom:16px;
}
.fde-case-main h3{
  font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.4vw,30px);
  line-height:1.35;margin-bottom:16px;
}
.fde-case-main p{font-size:15px;line-height:1.85;color:var(--ink-2)}
.fde-case-note{
  margin-top:20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--ink-3);
}
.fde-case-metric{
  border-left:1.5px solid var(--ink);background:var(--paper-2);
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:8px;padding:40px 24px;text-align:center;
}
.fde-case-metric b{
  font-family:var(--serif);font-weight:900;font-size:clamp(48px,6vw,76px);
  line-height:1;color:var(--accent);
}
.fde-case-metric small{
  font-size:13px;line-height:1.6;color:var(--ink-2);max-width:150px;
}

/* 谁该来学 */
.fde-roles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.fde-role{
  background:#fff;border:1.5px solid var(--line);
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.fde-role:hover{
  border-color:var(--ink);transform:translateY(-3px);
  box-shadow:8px 8px 0 var(--accent-soft);
}
.fde-role-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);
}
.fde-role h3{
  font-family:var(--serif);font-weight:900;font-size:20px;line-height:1.3;
}
.fde-role p{font-size:14px;line-height:1.8;color:var(--ink-2)}

/* 前置条件 */
.fde-prereq{
  margin-top:28px;padding:22px 26px;
  border-left:3px solid var(--accent);background:var(--paper-2);
}
.fde-prereq-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-3);margin-bottom:12px;
}
.fde-prereq ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fde-prereq li{
  font-size:14px;line-height:1.7;color:var(--ink-2);padding-left:18px;position:relative;
}
.fde-prereq li::before{
  content:"·";position:absolute;left:4px;top:-1px;
  color:var(--accent);font-weight:900;font-size:18px;
}

/* 课程阶段 P1-P4 */
.fde-stages{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1.5px solid var(--ink);
}
.fde-stage{
  padding:32px 34px 32px 0;border-bottom:1px solid var(--line);
  display:flex;gap:22px;align-items:flex-start;
}
.fde-stage:nth-child(odd){border-right:1px solid var(--line);padding-right:44px}
.fde-stage:nth-child(even){padding-left:44px}
.fde-stage-tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--accent);flex-shrink:0;padding-top:3px;
}
.fde-stage h3{
  font-family:var(--serif);font-weight:900;font-size:20px;
  line-height:1.35;margin-bottom:10px;
}
.fde-stage p{font-size:14.5px;line-height:1.8;color:var(--ink-2);margin-bottom:12px}
.fde-stage-out{
  font-family:var(--mono);font-size:11.5px;line-height:1.7;
  color:var(--ink-3);letter-spacing:.03em;
}
.fde-stage-out b{color:var(--accent);font-weight:600}

/* 交付团队 */
.fde-team{
  display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:start;
  border:1.5px solid var(--ink);background:#fff;padding:38px 42px;
}
.fde-team-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--ink-3);writing-mode:horizontal-tb;
}
.fde-team h3{
  font-family:var(--serif);font-weight:900;font-size:24px;margin-bottom:14px;
}
.fde-team p{font-size:15px;line-height:1.9;color:var(--ink-2);max-width:640px}
.fde-team p+p{margin-top:12px}

/* FAQ */
.fde-faq{border-top:1.5px solid var(--ink)}
.fde-faq details{border-bottom:1px solid var(--line)}
.fde-faq summary{
  cursor:pointer;list-style:none;
  padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.5;
  color:var(--ink);
}
.fde-faq summary::-webkit-details-marker{display:none}
.fde-faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;font-weight:400;
  color:var(--accent);transition:transform .2s;
}
.fde-faq details[open] summary::after{content:"−"}
.fde-faq .fde-faq-a{
  padding:0 60px 24px 0;font-size:14.5px;line-height:1.9;color:var(--ink-2);
}

/* 报价方式条 */
.fde-quote{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1.5px solid var(--ink);background:#fff;margin-top:32px;
}
.fde-quote>div{padding:24px 26px;border-left:1px solid var(--line)}
.fde-quote>div:first-child{border-left:none}
.fde-quote b{
  display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--accent);margin-bottom:8px;
}
.fde-quote p{font-size:14px;line-height:1.7;color:var(--ink-2)}

/* 对比表：窄屏改为逐行卡片，用 ::before 标出「集中式 / 分散式」，
   否则三格竖排后看不出哪格属于哪种方式 */
@media (max-width:760px){
  .fde-cmp .compare-row.compare-head{display:none}
  .fde-cmp .compare-row{
    display:block;border-top:none;
    border-bottom:1px solid var(--line);padding:16px 0;
  }
  .fde-cmp .compare-row:last-child{border-bottom:none}
  .fde-cmp .compare-row>div{
    padding:4px 0;border:none!important;font-size:14.5px;line-height:1.6;
  }
  .fde-cmp .compare-row>div:first-child{
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    color:var(--ink-3);padding-bottom:6px;
  }
  .fde-cmp .compare-row>div:nth-child(2)::before,
  .fde-cmp .compare-row>div:nth-child(3)::before{
    display:inline-block;font-family:var(--mono);font-size:11px;
    letter-spacing:.08em;color:var(--accent);margin-right:10px;
    padding:1px 8px;border:1px solid var(--accent-soft);background:#fff;
  }
  .fde-cmp .compare-row>div:nth-child(2)::before{content:"集中式"}
  .fde-cmp .compare-row>div:nth-child(3)::before{content:"分散式"}
  html[lang="en"] .fde-cmp .compare-row>div:nth-child(2)::before{content:"Intensive"}
  html[lang="en"] .fde-cmp .compare-row>div:nth-child(3)::before{content:"Distributed"}
}

@media (max-width:900px){
  .fde-pains,.fde-stages{grid-template-columns:1fr}
  .fde-pain:nth-child(odd),.fde-stage:nth-child(odd){
    border-right:none;padding-right:0;
  }
  .fde-pain:nth-child(even),.fde-stage:nth-child(even){padding-left:0}
  .fde-case{grid-template-columns:1fr}
  .fde-case-metric{border-left:none;border-top:1.5px solid var(--ink);padding:32px 24px}
  .fde-roles{grid-template-columns:1fr}
  .fde-team{grid-template-columns:1fr;gap:18px;padding:28px 24px}
  .fde-quote{grid-template-columns:1fr}
  .fde-quote>div{border-left:none;border-top:1px solid var(--line)}
  .fde-quote>div:first-child{border-top:none}
}
@media (max-width:600px){
  .fde-pain,.fde-stage{gap:14px;padding-top:22px;padding-bottom:22px}
  .fde-case-main{padding:28px 22px}
  .fde-faq summary{padding-right:32px;font-size:16px}
  .fde-faq .fde-faq-a{padding-right:24px}
}