@charset "UTF-8";
/* ============================================================
   advantage.html 独有样式 · 校园展板风
   骨架：标签式技术栈卡 → 三组反排大图技术图文(带计量条/勾选) →
        缩进编号规范清单 → 藏青测试卡 → 四角性能数据
============================================================ */

/* ---------- 技术栈标签卡 ---------- */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stack-card{
  position:relative;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.stack-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.stack-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--navy-900);background:var(--gold-200);
  padding:4px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
.stack-card h3{font-size:18px;margin-bottom:8px}
.stack-card p{font-size:14px;color:var(--ink-2);line-height:1.85}

/* ---------- 技术图文 ---------- */
.tech-split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.tech-split.flip .tech-photo{order:2}
.tech-photo img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm);box-shadow:var(--shadow-md)}
.tech-copy .sec-title{margin-bottom:16px}
.tech-check{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.tech-check li{
  font-size:14.5px;color:var(--ink-2);padding-left:26px;position:relative;line-height:1.7;
}
.tech-check li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-200) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23C9A96A" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/11px no-repeat;
}

/* ---------- 计量条 ---------- */
.meter-row{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap}
.meter{
  flex:1;min-width:140px;background:var(--white);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:20px;text-align:center;
}
.meter-num{display:block;font-family:var(--font-head);font-size:30px;font-weight:800;color:var(--gold-500)}
.meter-lab{font-size:12.5px;color:var(--muted)}

/* ---------- 规范清单 ---------- */
.std-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 44px}
.std-row{display:flex;gap:18px;padding:22px 26px;background:var(--paper);border-radius:var(--r-md);border-left:4px solid var(--gold-400)}
.std-no{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--navy-800);flex:none}
.std-row h3{font-size:16.5px;margin-bottom:6px}
.std-row p{font-size:14px;color:var(--ink-2);line-height:1.8}

/* ---------- 测试卡（藏青底） ---------- */
.test-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.test-card{
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);
  padding:26px 24px;background:rgba(255,255,255,.04);transition:background var(--t-fast);
}
.test-card:hover{background:rgba(201,169,106,.12)}
.test-card h3{color:var(--white);font-size:17px;margin-bottom:8px}
.test-card p{color:#B9C1D4;font-size:13.5px;line-height:1.8}

/* ---------- 性能数据 ---------- */
.perf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.perf-cell{text-align:center;padding:30px 10px;border:1.5px dashed var(--line);border-radius:var(--r-lg)}
.perf-num{display:block;font-family:var(--font-head);font-size:38px;font-weight:800;color:var(--navy-800);margin-bottom:8px}
.perf-cell p{font-size:13.5px;color:var(--muted)}

/* ---------- 错峰 ---------- */
.rv1{--d:.08s}.rv2{--d:.16s}.rv3{--d:.24s}.rv4{--d:.32s}.rv5{--d:.4s}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .test-grid{grid-template-columns:repeat(2,1fr)}
  .perf-row{grid-template-columns:repeat(2,1fr);row-gap:26px}
}
@media (max-width:920px){
  .tech-split,.tech-split.flip{grid-template-columns:1fr;gap:28px}
  .tech-split.flip .tech-photo{order:0}
  .std-list{grid-template-columns:1fr}
  .tech-check{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stack-grid,.test-grid{grid-template-columns:1fr}
  .perf-row{grid-template-columns:1fr}
  .tech-photo img{height:240px}
}