@charset "utf-8";
/* ==========================================================================
   妙排网络 · 黑帽SEO培训页面样式（黑金课程风）
   仅作用于 hmseo.html，前缀 hm- 避免与其它页面冲突
   ========================================================================== */
:root{
  --brand:#B8860B;
  --brand-2:#D4AF37;
  --accent:#E11D48;
  --bg:#0C0C0F;
  --bg-soft:#141418;
  --ink:#FAF7F0;
  --text:#DEDAD0;
  --muted:#A79F8C;
  --surface:#141418;
  --surface-2:#181820;
  --border:rgba(212,175,55,.26);
  --border-strong:rgba(212,175,55,.52);
  --head-bg:rgba(12,12,15,.90);
  --head-text:#FAF7F0;
  --head-border:rgba(212,175,55,.20);
  --nav-hover-bg:rgba(212,175,55,.14);
  --foot-bg:#08080A;
  --foot-text:#A79F8C;
  --foot-head:#FAF7F0;
  --foot-border:rgba(212,175,55,.18);
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --shadow-sm:0 10px 30px rgba(0,0,0,.5);
}
body{background:var(--bg);color:var(--text)}
::selection{background:var(--brand-2);color:#0C0C0F}
.img-cap{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.7}

/* ---------- 深色下的公共组件适配 ---------- */
.dropdown{background:#181820;border-color:var(--border);box-shadow:0 24px 60px rgba(0,0,0,.66)}
.dropdown a{color:var(--text)}
.dropdown a:hover{background:var(--nav-hover-bg);color:var(--brand-2)}
.table-wrap{background:var(--surface)}
.note{background:var(--surface-2)}
.dock-item{background:#181820;color:var(--ink);border-color:var(--border)}
.dock-item:hover{color:var(--brand-2)}
.wx-pop{background:#181820;border-color:var(--border)}
.wx-pop p{color:var(--muted)}
.wx-pop p b{color:var(--ink)}
.btn-line{color:var(--ink);border-color:var(--border-strong)}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 10px 26px rgba(184,134,11,.30)}
.btn-primary:hover{box-shadow:0 16px 34px rgba(184,134,11,.36)}

/* ---------- 1. 首屏：居中堆叠 + 金色细边框 ---------- */
.hm-hero{position:relative;overflow:hidden;
  padding:clamp(36px,5vw,70px) 0 clamp(40px,5vw,72px);
  background:
    radial-gradient(760px 400px at 50% -6%,rgba(184,134,11,.20),transparent 64%),
    linear-gradient(180deg,#0C0C0F 0%,#101014 68%,#141418 100%)}
.hm-frame{position:relative;text-align:center;border:1px solid var(--border-strong);border-radius:26px;
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px);background:rgba(20,20,24,.74);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.10),0 30px 70px rgba(0,0,0,.55)}
.hm-frame::before{content:"";position:absolute;inset:9px;border:1px solid rgba(212,175,55,.18);
  border-radius:19px;pointer-events:none}
.hm-hero .eyebrow{background:rgba(212,175,55,.12);border-color:var(--border-strong)}
.hm-hero h1{margin:18px auto 20px;max-width:900px;text-shadow:0 0 34px rgba(212,175,55,.28)}
.hm-lead{max-width:830px;margin:0 auto;color:var(--muted);font-size:clamp(15px,1.5vw,17.5px);line-height:1.9}
.hm-points{justify-content:center;margin:24px 0 26px}
.hm-cta{justify-content:center;text-align:center;background:rgba(24,24,30,.92);border-color:var(--border-strong)}
.hm-cta .t{width:100%}
.hm-cta .t b{color:var(--ink)}
.hm-hero-visual{margin-top:clamp(26px,4vw,44px)}
.hm-hero-visual img{width:100%;border:1px solid var(--border);border-radius:20px;
  box-shadow:0 26px 60px rgba(0,0,0,.62)}
.hm-warn{margin-top:18px;font-size:13px;color:var(--muted)}

/* ---------- 2. 课程收获 ---------- */
.hm-get{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-get li{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand-2);
  border-radius:16px;padding:24px}
.hm-get b{font-size:12.5px;font-weight:800;color:var(--brand-2);letter-spacing:1.4px}
.hm-get h3{margin:8px 0;font-size:17px}
.hm-get p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- 3. 适合人群：左右两栏 ---------- */
.hm-fit{display:grid;grid-template-columns:1.08fr .92fr;gap:20px;align-items:start}
.hm-fit-col{border:1px solid var(--border);border-radius:20px;padding:28px 26px}
.hm-fit-col--yes{background:linear-gradient(180deg,rgba(184,134,11,.12),rgba(20,20,24,.75))}
.hm-fit-col--no{background:rgba(20,20,24,.76)}
.hm-fit-col h3{margin-bottom:16px;font-size:19px}
.hm-fit-col--yes h3{color:var(--brand-2)}
.hm-fit-col--no h3{color:var(--accent)}
.hm-no{display:grid;gap:11px}
.hm-no li{position:relative;padding-left:26px;color:var(--text);font-size:15px}
.hm-no li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:2.4px;
  background:var(--accent);border-radius:2px}
.hm-fit-note{margin-top:18px;padding-top:16px;border-top:1px dashed var(--border-strong);
  font-size:14px;color:var(--muted)}

/* ---------- 4. 课程大纲折叠面板（自有组件一） ---------- */
.hm-acc{display:grid;gap:14px}
.hm-acc details{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:0 24px;transition:border-color .25s,box-shadow .25s}
.hm-acc details[open]{border-color:var(--border-strong);box-shadow:0 0 30px rgba(184,134,11,.16)}
.hm-acc summary{cursor:pointer;list-style:none;position:relative;padding:20px 44px 20px 0;
  font-weight:800;font-size:16.5px;color:var(--ink)}
.hm-acc summary::-webkit-details-marker{display:none}
.hm-acc summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:17px;line-height:1;
  color:var(--brand-2);border:1px solid var(--border-strong);background:rgba(212,175,55,.10)}
.hm-acc details[open] summary::after{content:"–"}
.hm-acc-body{padding:0 0 22px;color:var(--muted);font-size:14.8px;line-height:1.9}
.hm-acc-body ul{display:grid;gap:9px;margin-bottom:14px}
.hm-acc-body li{position:relative;padding-left:20px}
.hm-acc-body li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.hm-acc-body p{color:var(--text)}

/* ---------- 5. 讲师与交付 ---------- */
.hm-teach{display:grid;grid-template-columns:.86fr 1.14fr;gap:22px;align-items:start}
.hm-teach-card{background:linear-gradient(180deg,rgba(184,134,11,.14),rgba(20,20,24,.78));
  border:1px solid var(--border-strong);border-radius:20px;padding:28px}
.hm-teach-card img{width:96px;height:96px;border-radius:50%;border:2px solid var(--brand-2);margin-bottom:16px}
.hm-teach-card h3{font-size:18px;margin-bottom:10px}
.hm-teach-card p{color:var(--muted);font-size:14.6px}
.hm-deliver{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px}
.hm-deliver h3{font-size:18px;margin-bottom:16px}
.hm-deliver-list{display:grid;gap:14px}
.hm-deliver-list li{display:grid;gap:4px;padding-bottom:14px;border-bottom:1px dashed var(--border)}
.hm-deliver-list li:last-child{border-bottom:0;padding-bottom:0}
.hm-deliver-list b{color:var(--brand-2);font-size:14.5px}
.hm-deliver-list span{color:var(--muted);font-size:14.4px;line-height:1.8}

/* ---------- 6. 学习流程（自有组件二） ---------- */
.hm-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hm-flow li{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px 20px;transition:border-color .25s}
.hm-flow li:hover{border-color:var(--border-strong)}
.hm-flow b{display:inline-block;padding:3px 10px;border-radius:8px;font-size:13px;font-weight:800;
  color:#0C0C0F;background:linear-gradient(135deg,var(--brand-2),#F0DC96)}
.hm-flow h3{margin:12px 0 8px;font-size:16.5px}
.hm-flow p{color:var(--muted);font-size:14px;margin:0}

/* ---------- 7. 优势 ---------- */
.hm-adv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-adv article{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;
  transition:transform .25s,border-color .25s}
.hm-adv article:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.hm-adv h3{margin-bottom:10px;font-size:17px}
.hm-adv p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- 8. 案例 ---------- */
.hm-case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px);align-items:center}
.hm-case img{width:100%;border:1px solid var(--border);border-radius:18px}
.hm-case-txt h3{font-size:18px;margin-bottom:12px}
.hm-case-txt p{color:var(--muted);font-size:14.6px}
.hm-case-note{border-top:1px dashed var(--border-strong);padding-top:12px;font-size:13px;color:var(--muted)}

/* ---------- 9. 课程版本 ---------- */
.hm-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hm-plan{background:linear-gradient(180deg,rgba(24,24,30,.96),rgba(20,20,24,.72));
  border:1px solid var(--border);border-radius:20px;padding:28px 24px;
  transition:transform .25s,border-color .25s}
.hm-plan:nth-child(2){border-color:var(--border-strong);box-shadow:0 0 34px rgba(184,134,11,.18)}
.hm-plan:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.hm-plan h3{font-size:19px;margin-bottom:16px;color:var(--brand-2)}
.hm-plan .checklist li{font-size:14.5px}
.hm-plan-for{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border-strong);
  color:var(--muted);font-size:14px}
.hm-note{margin-top:24px;flex-direction:column;gap:6px;background:rgba(225,29,72,.06);
  border-color:rgba(225,29,72,.35)}
.hm-note span{font-weight:800;color:var(--accent)}
.hm-note p{color:var(--text);font-size:14.3px}

/* ---------- 10. FAQ ---------- */
.hm-faq details{background:rgba(24,24,30,.82)}
.hm-faq details[open]{box-shadow:0 0 28px rgba(184,134,11,.20)}

/* ---------- 11. 响应式 ---------- */
@media (max-width:1080px){
  .main-nav{background:#101014}
  .hm-get,.hm-adv,.hm-plans{grid-template-columns:1fr 1fr}
  .hm-flow{grid-template-columns:1fr 1fr}
  .hm-fit,.hm-teach,.hm-case{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hm-frame{padding:26px 18px;border-radius:20px}
  .hm-get,.hm-adv,.hm-plans,.hm-flow{grid-template-columns:1fr}
  .hm-teach-card,.hm-deliver{padding:22px 20px}
  .hm-acc details{padding:0 18px}
  .hm-acc summary{font-size:15.5px}
  .hm-lead{font-size:15px}
}