/* ============================================================
   技术保障模块专属样式（tech 组 4 页共用）
   视觉母题：盾牌 / 防护矩阵
   分节：
   T1 页头 Hero
   T2 总览页 tech.html —— 保障盾牌矩阵 + 同心层级环
   T3 安全页 tech-security.html —— 雷达扫描式 + 分层防御环
   T4 性能页 tech-perf.html —— 优化前后对比卡 + 指标条
   T5 数据页 tech-data.html —— 三级备份流水线 + RTO/RPO
   T6 通用：盾牌卡 / 中段CTA / 指标网格
   T7 响应式
   ============================================================ */

/* ---------- T1 页头 Hero ---------- */
.ph-tech{background-image:url("../images/banner-tech.jpg")}
.ph-security{background-image:url("../images/security-scan.jpg")}
.ph-perf{background-image:url("../images/data-analytics.jpg")}
.ph-data{background-image:url("../images/server-room.jpg")}

/* 总览 Hero：右上盾牌线描 */
.ph-tech .hero-in::after{
  content:"";position:absolute;right:6%;top:34px;width:110px;height:130px;z-index:2;opacity:.5;
  background:linear-gradient(var(--gold),var(--gold)) center bottom/70px 2px no-repeat,
    conic-gradient(from 202deg at 50% 34%, transparent 0 136deg, rgba(176,141,87,.55) 136deg 180deg, transparent 180deg 324deg, rgba(176,141,87,.55) 324deg 360deg);
  clip-path:polygon(50% 0,100% 18%,100% 58%,50% 100%,0 58%,0 18%);
  border:1px solid rgba(176,141,87,.55);
}
/* 安全 Hero：同心扫描环 */
.ph-security .hero-in::before{
  content:"";position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:2;width:180px;height:180px;opacity:.6;
  background:
    radial-gradient(circle, transparent 26%, rgba(176,141,87,.5) 27% 28%, transparent 29%),
    radial-gradient(circle, transparent 46%, rgba(176,141,87,.4) 47% 48%, transparent 49%),
    radial-gradient(circle, transparent 66%, rgba(176,141,87,.3) 67% 68%, transparent 69%);
}
/* 性能 Hero：上扬折线 */
.ph-perf .hero-in::after{
  content:"";position:absolute;right:6%;bottom:34px;width:160px;height:90px;z-index:2;opacity:.6;
  background:linear-gradient(var(--gold),var(--gold));
  background-size:100% 2px;background-repeat:no-repeat;background-position:
    0 70px,30px 52px,70px 34px,110px 14px;
  clip-path:polygon(0 100%, 18% 100%, 18% 62%, 38% 62%, 38% 40%, 62% 40%, 62% 16%, 100% 16%, 100% 100%);
}
/* 数据 Hero：三层堆叠块 */
.ph-data .hero-in::after{
  content:"";position:absolute;right:6%;top:44px;width:110px;height:96px;z-index:2;opacity:.6;
  background:
    linear-gradient(rgba(176,141,87,.5),rgba(176,141,87,.5)) 0 0/110px 26px no-repeat,
    linear-gradient(rgba(176,141,87,.35),rgba(176,141,87,.35)) 0 35px/96px 26px no-repeat,
    linear-gradient(rgba(176,141,87,.2),rgba(176,141,87,.2)) 0 70px/80px 26px no-repeat;
}

/* ---------- T2 总览：盾牌矩阵 ---------- */
.shield-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shield{position:relative;background:var(--cream-light);border:1px solid var(--cream-deep);padding:34px 28px 28px;transition:var(--t-mid)}
.shield::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none;transition:var(--t-mid)}
.shield:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:rgba(138,46,46,.4)}
.shield:hover::before{border-color:var(--gold)}
.shield-ic{width:58px;height:64px;margin-bottom:18px;color:var(--rosewood);position:relative}
.shield-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.shield h3{font-size:19px;letter-spacing:2px;margin-bottom:10px}
.shield p{font-size:13.5px;color:var(--ink-soft);line-height:1.95}
.shield .sh-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--rosewood);letter-spacing:1px}
.shield .sh-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--t-fast)}
.shield:hover .sh-more svg{transform:translateX(5px)}

/* 同心层级环（总览页） */
.ringwrap{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}
.rings{position:relative;width:300px;height:300px;margin:0 auto}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--cream-deep)}
.ring--1{inset:0;background:radial-gradient(circle,transparent 58%,rgba(138,46,46,.08))}
.ring--2{inset:52px;border-color:rgba(138,46,46,.35)}
.ring--3{inset:104px;border-color:var(--gold);background:rgba(244,233,211,.7)}
.ring-core{position:absolute;inset:130px;border-radius:50%;background:var(--rosewood);color:var(--cream-light);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-h);letter-spacing:2px;text-align:center}
.ring-core b{font-size:16px}
.ring-core small{font-size:11px;opacity:.8}
.ring-dot{position:absolute;width:12px;height:12px;background:var(--rosewood);border-radius:50%;box-shadow:0 0 0 4px rgba(138,46,46,.15)}
.ring-legend{display:flex;flex-direction:column;gap:18px}
.rl-item{display:flex;gap:16px;align-items:flex-start;padding:14px 18px;border-left:3px solid var(--rosewood);background:var(--cream-light)}
.rl-item:nth-child(2){border-left-color:var(--gold)}
.rl-item:nth-child(3){border-left-color:var(--ink)}
.rl-item b{font-family:var(--font-h);font-size:16px;letter-spacing:1px;display:block;margin-bottom:4px}
.rl-item span{font-size:13px;color:var(--ink-soft);line-height:1.8}

/* ---------- T3 安全页：雷达扫描 + 防御层 ---------- */
.radar{position:relative;width:320px;height:320px;margin:0 auto;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 24%, rgba(138,46,46,.06) 24% 25%, transparent 25% 49%, rgba(138,46,46,.06) 49% 50%, transparent 50% 74%, rgba(138,46,46,.06) 74% 75%, transparent 75%),
    linear-gradient(rgba(138,46,46,.12),rgba(138,46,46,.12)) center/100% 1px no-repeat,
    linear-gradient(rgba(138,46,46,.12),rgba(138,46,46,.12)) center/1px 100% no-repeat;
  border:1px solid var(--cream-deep)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(138,46,46,.22), transparent 22%);animation:radarSpin 6s linear infinite}
@keyframes radarSpin{to{transform:rotate(360deg)}}
.radar-blip{position:absolute;width:10px;height:10px;background:var(--rosewood);border-radius:50%;box-shadow:0 0 0 4px rgba(138,46,46,.15)}

.deflayer{display:flex;align-items:stretch;gap:0;margin:22px 0}
.dl{flex:1;padding:22px 20px;color:var(--cream-light);position:relative}
.dl:nth-child(1){background:var(--rosewood-dark)}
.dl:nth-child(2){background:var(--rosewood-deep);margin:0 8px}
.dl:nth-child(3){background:var(--rosewood)}
.dl small{font-size:11px;letter-spacing:3px;color:rgba(244,233,211,.65)}
.dl h3{font-family:var(--font-h);font-size:18px;letter-spacing:2px;margin:6px 0 8px}
.dl p{font-size:12.5px;line-height:1.8;color:rgba(244,233,211,.85)}

/* ---------- T4 性能页：前后对比 ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--cream-deep);position:relative}
.cmp-before{background:#EFE6D2;padding:34px 30px}
.cmp-after{background:var(--ink);color:var(--cream-light);padding:34px 30px}
.cmp-tag{display:inline-block;font-size:12px;letter-spacing:3px;padding:4px 14px;margin-bottom:16px}
.cmp-before .cmp-tag{background:var(--ink);color:var(--cream)}
.cmp-after .cmp-tag{background:var(--gold);color:var(--ink)}
.cmp h3{font-size:20px;letter-spacing:2px;margin-bottom:16px}
.cmp-meter{margin:14px 0}
.cmp-meter .cm-lab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.cmp-meter .cm-track{height:10px;background:rgba(33,26,21,.12)}
.cmp-after .cm-track{background:rgba(244,233,211,.15)}
.cmp-meter .cm-fill{height:100%;background:var(--ink)}
.cmp-after .cm-fill{background:linear-gradient(90deg,var(--gold),var(--rosewood-soft))}

/* ---------- T5 数据页：备份三级流水线 ---------- */
.tierflow{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch;margin:26px 0}
.tier{background:var(--cream-light);border:1px solid var(--cream-deep);border-top:4px solid var(--rosewood);padding:26px 22px;transition:var(--t-mid)}
.tier:nth-child(3){border-top-color:var(--gold)}
.tier:nth-child(5){border-top-color:var(--ink)}
.tier:hover{box-shadow:var(--shadow-2)}
.tier h3{font-size:17px;letter-spacing:1px;margin:8px 0 10px}
.tier p{font-size:13px;color:var(--ink-soft);line-height:1.85}
.tier small{font-size:11px;letter-spacing:3px;color:var(--rosewood);text-transform:uppercase}
.tier-arrow{display:flex;align-items:center;justify-content:center;color:var(--rosewood);font-size:22px}

/* ---------- T6 通用 ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.kpi{background:var(--cream);border:1px solid var(--cream-deep);padding:24px 22px;text-align:center}
.kpi .stat-num{font-size:40px}
.kpi .stat-label{margin-top:6px}

.midcta{background:linear-gradient(100deg,var(--rosewood-dark) 0%,var(--ink) 100%);color:var(--cream-light);
  padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.midcta::before{content:"";position:absolute;left:-50px;top:-50px;width:180px;height:180px;border:20px solid rgba(244,233,211,.07);border-radius:50%}
.midcta h3{font-size:22px;letter-spacing:3px;margin-bottom:6px}
.midcta p{font-size:13.5px;color:rgba(244,233,211,.75)}
.midcta .mc-tel{font-family:var(--font-h);font-size:28px;color:var(--gold);letter-spacing:2px}

.notelist{counter-reset:nt}
.notelist .nl{display:flex;gap:18px;padding:16px 0;border-bottom:1px dashed var(--cream-deep)}
.notelist .nl-no{flex:none;width:34px;height:34px;border:1px solid var(--rosewood);color:var(--rosewood);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:14px}
.notelist .nl p{font-size:14px;color:var(--ink-soft);line-height:1.9}
.notelist .nl p strong{color:var(--ink)}

/* ---------- T7 响应式 ---------- */
@media (max-width:1024px){
  .shield-grid{grid-template-columns:repeat(2,1fr)}
  .ringwrap{grid-template-columns:1fr;gap:34px}
  .tierflow{grid-template-columns:1fr;gap:16px}
  .tier-arrow{transform:rotate(90deg);height:20px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .deflayer{flex-direction:column;gap:10px}
  .deflayer .dl:nth-child(2){margin:0}
  .cmp{grid-template-columns:1fr}
}
@media (max-width:640px){
  .shield-grid,.kpi-grid{grid-template-columns:1fr}
  .rings{width:240px;height:240px}
  .ring-core{inset:104px}
  .radar{width:260px;height:260px}
  .midcta{padding:32px 22px}
  .midcta .mc-tel{font-size:23px}
}

/* ===== 生成式工具类：inline style 外置迁移（勿手改声明） ===== */
.ss11 { color:rgba(244,233,211,.7) }
.ss17 { font-size:14.5px;line-height:2;color:var(--ink-soft) }
.ss31 { width:21% }
.ss35 { background:var(--cream-light);border:1px solid var(--cream-deep);padding:24px }
.ss41 { color:rgba(244,233,211,.8) }
.ss25 { background:var(--cream);padding:26px;border:1px solid var(--cream-deep) }
.ss32 { width:28% }
.ss33 { width:96% }
.ss44 { font-size:14.5px;line-height:2;color:rgba(244,233,211,.85);margin-top:14px }
.ss30 { font-size:13px;color:var(--ink-mute);margin-top:14px }
.ss36 { font-size:16px;color:var(--rosewood);margin-bottom:8px }
.ss46 { color:rgba(244,233,211,.85) }
.ss19 { font-size:14.5px;line-height:2;color:var(--ink-soft);margin-top:14px }
.ss24 { left:47%;top:14% }
.ss26 { font-size:14px;color:var(--ink-soft);line-height:2 }
.ss10 { color:var(--gold) }
.ss27 { width:92% }
.ss6 { right:10%;top:22% }
.ss15 { text-align:right }
.ss21 { right:20%;top:38% }
.ss1 { background:var(--cream-light);border:1px solid var(--cream-deep);padding:28px }
.ss20 { left:22%;top:30% }
.ss37 { font-size:13px;color:var(--ink-soft);line-height:1.85 }
.ss2 { font-size:18px;color:var(--rosewood);margin-bottom:10px }
.ss3 { font-size:13.5px;color:var(--ink-soft);line-height:1.9 }
.ss13 { text-decoration:underline }
.ss12 { margin-top:22px;font-size:14px;color:rgba(244,233,211,.8);line-height:2 }
.ss22 { left:30%;bottom:20% }
.ss5 { left:8%;top:30% }
.ss42 { margin-top:14px }
.ss45 { --dot:var(--gold) }
.ss23 { right:28%;bottom:26% }
.ss4 { color:var(--rosewood) }
.ss39 { background:var(--rosewood-dark);border-color:rgba(244,233,211,.15) }
.ss40 { color:var(--cream-light) }
.ss16 { margin-top:6px }
.ss43 { font-size:14.5px;line-height:2;color:rgba(244,233,211,.85) }
.ss34 { font-size:13px;color:rgba(244,233,211,.7);margin-top:14px }
.ss18 { color:var(--ink) }
.ss9 { background:rgba(251,244,230,.06);border-color:rgba(244,233,211,.18) }
.ss29 { width:61% }
.ss7 { left:16%;bottom:14% }
.ss28 { width:88% }
.ss14 { padding:40px 0 }
.ss38 { font-size:14.5px;color:var(--ink-soft);line-height:2 }
.ss8 { right:18%;bottom:18% }