@charset "utf-8";
/* ==========================================================================
   蜘蛛池搭建培训 zhizhuchidajian.html · 深紫到青 工程风深色主题
   仅本页使用，前缀 zzd-
   ========================================================================== */
:root{
  --brand:#6D28D9;
  --brand-2:#06B6D4;
  --accent:#FACC15;
  --bg:#0E0A24;
  --bg-soft:#161231;
  --ink:#F4F0FF;
  --text:#DAD3F5;
  --muted:#A79FC9;
  --surface:#191340;
  --surface-2:#120E2E;
  --border:rgba(160,140,255,.18);
  --border-strong:rgba(160,140,255,.34);
  --head-bg:rgba(14,10,36,.92);
  --head-text:#EFEAFF;
  --head-border:rgba(160,140,255,.16);
  --nav-hover-bg:rgba(109,40,217,.24);
  --foot-bg:#0A0720;
  --foot-text:#B6AEDA;
  --shadow:0 26px 70px rgba(4,2,20,.6);
  --shadow-sm:0 12px 30px rgba(4,2,20,.45);
}
body{background:var(--bg)}
.dropdown{background:var(--surface);border-color:var(--border)}
.dropdown a{color:var(--text)}
.dropdown a:hover{background:var(--surface-2);color:var(--brand-2)}
@media (min-width:1081px){.main-nav{background:transparent}}
@media (max-width:1080px){.main-nav{background:#141033}}
.crumb{background:var(--surface-2)}
.note{background:var(--surface-2);color:var(--muted)}
.field-label,.img-cap{color:var(--muted)}

/* ---------- 首屏：左文右图 + 霓虹描边 ---------- */
.zzd-hero{
  position:relative;overflow:hidden;
  padding:clamp(46px,6vw,84px) 0 clamp(38px,5vw,64px);
  background:
    radial-gradient(680px 360px at 12% 4%,rgba(109,40,217,.42),transparent 68%),
    radial-gradient(620px 320px at 92% 18%,rgba(6,182,212,.28),transparent 66%),
    linear-gradient(180deg,#0E0A24 0%,#151033 100%);
}
.zzd-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(160,140,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(160,140,255,.06) 1px,transparent 1px);
  background-size:52px 52px;
}
.zzd-hero .container{position:relative;z-index:1}
.zzd-hero h1{margin:18px 0 18px;color:#FBFAFF;text-shadow:0 0 34px rgba(109,40,217,.5)}
.zzd-hero h1 span{color:var(--brand-2)}
.zzd-hero .hero-lead{color:var(--text)}
.zzd-hero .hero-points{color:#EDE8FF}
.zzd-hero .hero-points li::before{background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.zzd-hero .hero-cta-box{
  background:rgba(25,19,64,.78);
  border:1px solid rgba(6,182,212,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.zzd-hero .hero-cta-box .t b{color:#FBFAFF}
.zzd-hero .btn-primary{box-shadow:0 12px 30px rgba(109,40,217,.55)}
.zzd-hero .hero-note{color:var(--muted)}
.zzd-hero .hero-visual img{
  border-radius:20px;
  border:1px solid rgba(6,182,212,.4);
  box-shadow:0 0 0 1px rgba(109,40,217,.35),0 24px 60px rgba(6,182,212,.22);
}
.eyebrow{color:var(--brand-2)}
.eyebrow::before{background:var(--brand-2)}

/* ---------- 首屏数据条 ---------- */
.hero-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,4vw,46px);
}
.hero-strip li{
  background:rgba(25,19,64,.72);border:1px solid var(--border);
  border-radius:14px;padding:18px 16px;text-align:left;
}
.hero-strip b{display:block;font-size:clamp(20px,2.3vw,28px);color:var(--accent);line-height:1.2}
.hero-strip span{font-size:13px;color:var(--muted)}

/* ---------- 模块卡（工程风） ---------- */
.zzd-mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.zzd-mod{
  position:relative;padding:26px 22px 22px;border-radius:16px;
  background:linear-gradient(160deg,rgba(109,40,217,.20),rgba(22,18,49,.9));
  border:1px solid var(--border);
}
.zzd-mod:hover{border-color:rgba(6,182,212,.5)}
.zzd-mod .zzd-no{
  display:inline-block;font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:12px;letter-spacing:1.6px;color:var(--brand-2);
  border:1px solid rgba(6,182,212,.4);border-radius:6px;padding:3px 9px;
}
.zzd-mod h3{margin:14px 0 10px;color:#F7F4FF}
.zzd-mod p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- 适合人群 / 卡点 双栏 ---------- */
.zzd-fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,46px);align-items:start}
.zzd-fit-col h2{margin:12px 0 22px}
.zzd-fit-col .checklist li{color:var(--text)}
.zzd-pain{display:grid;gap:12px}
.zzd-pain li{
  padding:15px 18px;border-radius:12px;background:var(--surface);
  border-left:3px solid var(--brand);color:var(--muted);font-size:14.5px;
}
.zzd-pain li b{display:block;color:#F5F1FF;font-size:15px}
.zzd-tip{
  margin-top:20px;font-size:14px;color:var(--muted);
  border-left:3px solid var(--accent);padding-left:14px;
}
.zzd-tip a{color:var(--brand-2);font-weight:700}
.zzd-tip--mid{max-width:900px;margin:28px auto 0}

/* ---------- 终端窗口样式章节块 ---------- */
.zzd-terms{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zzd-term{
  border-radius:14px;overflow:hidden;background:#0B0920;
  border:1px solid rgba(109,40,217,.45);
  box-shadow:0 18px 44px rgba(4,2,20,.55);
}
.zzd-term-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:linear-gradient(90deg,rgba(109,40,217,.4),rgba(6,182,212,.22));
  border-bottom:1px solid rgba(160,140,255,.2);
}
.zzd-term-bar span{width:10px;height:10px;border-radius:50%;background:#FF5F57}
.zzd-term-bar span:nth-child(2){background:#FEBC2E}
.zzd-term-bar span:nth-child(3){background:#28C840}
.zzd-term-bar b{
  margin-left:8px;font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:12.5px;letter-spacing:1.2px;color:#C9C2F0;font-weight:600;
}
.zzd-term-body{padding:20px 22px 22px}
.zzd-term-body h3{
  font-family:Consolas,Monaco,"Courier New",monospace;
  font-size:16px;color:#EDE9FF;margin-bottom:12px;letter-spacing:.3px;
}
.zzd-term-body p{color:var(--muted);font-size:14.5px}
.zzd-term-list{display:grid;gap:8px;margin-top:14px}
.zzd-term-list li{position:relative;padding-left:20px;font-size:14px;color:var(--text)}
.zzd-term-list li::before{
  content:"›";position:absolute;left:2px;top:0;color:var(--brand-2);font-weight:800;
}

/* ---------- 环境清单表格 ---------- */
.zzd-env{border-color:var(--border)}
.zzd-env table{min-width:640px}
.zzd-env th{background:var(--surface-2);color:#EDE9FF;font-size:13.5px}
.zzd-env td{color:var(--text);font-size:14px}
.zzd-cap{
  caption-side:top;text-align:left;padding:16px 18px 6px;
  font-size:13px;color:var(--muted);letter-spacing:.4px;
}
.zzd-note{margin-top:18px}

/* ---------- 流程双栏 ---------- */
.zzd-flow{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center}
.zzd-flow h2{margin:12px 0 22px}
.zzd-steps li b{display:block;color:#F6F3FF;font-size:15.5px;margin-bottom:4px}
.zzd-steps li::before{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.zzd-steps li p{margin:0;font-size:14.5px;color:var(--muted)}
.zzd-flow img{border-radius:16px;border:1px solid var(--border)}

/* ---------- 优势 ---------- */
.zzd-adv{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.zzd-adv article{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:24px 24px 22px;border-top:3px solid var(--brand-2);
}
.zzd-adv h3{margin-bottom:10px;color:#F7F4FF}
.zzd-adv p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- 案例 ---------- */
.zzd-case{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(24px,3vw,48px);align-items:center}
.zzd-case h2{margin:12px 0 16px}
.zzd-case-copy p{color:var(--text)}
.zzd-case-list{display:grid;gap:12px;margin:18px 0 0}
.zzd-case-list li{
  padding:14px 16px;border-radius:12px;background:var(--surface);
  border:1px dashed var(--border-strong);font-size:14.5px;color:var(--muted);
}
.zzd-case-list li b{display:block;color:var(--accent)}
.zzd-case-visual img{border-radius:16px;border:1px solid var(--border)}
.zzd-disclaim{margin-top:16px;font-size:12.8px;color:var(--muted)}

/* ---------- 班型 ---------- */
.zzd-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zzd-plan-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 24px;
}
.zzd-plan-card--hot{
  border-color:rgba(6,182,212,.5);
  background:linear-gradient(165deg,rgba(109,40,217,.28),var(--surface));
  box-shadow:0 20px 50px rgba(6,182,212,.16);
}
.zzd-plan-card h3{color:#F7F4FF}
.zzd-plan-desc{margin:10px 0 18px;color:var(--muted);font-size:14px}
.zzd-plan-card .checklist li{font-size:14.5px;color:var(--text)}

/* ---------- FAQ 单列 ---------- */
.zzd-faq{max-width:960px}
.zzd-faq details{background:var(--surface)}
.zzd-faq summary{color:#F4F1FF}
.zzd-faq .faq-body{color:var(--muted)}
.zzd-faq details[open]{border-color:var(--brand-2)}

/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(135deg,#4C1D95 0%,#6D28D9 45%,#06B6D4 100%);
  border:1px solid rgba(6,182,212,.4);
}
.cta-band .btn-light{color:var(--brand)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .zzd-mod-grid,.zzd-terms,.zzd-plan,.zzd-adv{grid-template-columns:1fr 1fr}
  .zzd-fit,.zzd-flow,.zzd-case{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:1fr 1fr}
  .zzd-terms .zzd-term:last-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .zzd-mod-grid,.zzd-terms,.zzd-plan,.zzd-adv{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:1fr}
  .zzd-mod{padding:22px 18px}
  .zzd-term-body{padding:18px 16px 20px}
  .zzd-adv article{padding:20px 18px}
}