/* ============================================================
   云瑶国际 · 关于我们页样式 about.css
   ============================================================ */

/* 双理念卡：云 / 瑶 */
.val-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.val-card{
  position:relative;border-radius:20px;padding:40px 34px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--panel);transition:.35s;
}
.val-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.val-card::after{
  content:attr(data-word);position:absolute;right:14px;bottom:-26px;font-size:110px;font-weight:800;
  color:transparent;-webkit-text-stroke:1px rgba(84,150,255,.18);line-height:1;pointer-events:none;
}
.val-card.cloud{background:linear-gradient(150deg,rgba(63,140,255,.16),rgba(13,27,52,.5))}
.val-card.jade{background:linear-gradient(150deg,rgba(255,139,45,.14),rgba(13,27,52,.5))}
.val-card .v-tag{
  display:inline-block;padding:5px 16px;border-radius:99px;font-size:12.5px;letter-spacing:3px;margin-bottom:18px;
  background:rgba(63,140,255,.15);border:1px solid var(--line-2);color:var(--cyan);
}
.val-card.jade .v-tag{background:rgba(255,139,45,.15);border-color:rgba(255,139,45,.4);color:var(--orange)}
.val-card h3{font-size:22px;color:var(--hd);margin-bottom:12px;letter-spacing:1px}
.val-card p{font-size:14.5px}

/* 资质徽章 */
.qual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.qual-card{display:flex;gap:20px;align-items:flex-start}
.qual-card .ico{margin-bottom:0}

/* 服务部门 */
.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dept-card{
  text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);transition:.3s;position:relative;overflow:hidden;
}
.dept-card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.dept-card .d-ico{
  width:64px;height:64px;margin:0 auto 16px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(63,140,255,.2),rgba(37,217,255,.06));border:1px solid var(--line-2);
}
.dept-card .d-ico svg{width:30px;height:30px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dept-card h3{font-size:17px;color:var(--hd);margin-bottom:6px}
.dept-card p{font-size:13px}
.dept-card .d-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transition:.35s}
.dept-card:hover .d-line{transform:scaleX(1)}

/* 合作矩阵图 */
.matrix-card{
  border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:#000;
  box-shadow:var(--shadow);position:relative;transition:.4s;
}
.matrix-card img{display:block;width:100%;height:auto}
.matrix-card:hover{transform:translateY(-6px);box-shadow:var(--shadow),var(--glow-o)}
.matrix-card .img-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.88),transparent);color:#eaf4ff;font-size:13.5px;letter-spacing:1px;
  display:flex;align-items:center;gap:9px}
.matrix-card .img-cap i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}

@media (max-width:900px){
  .val-grid,.qual-grid{grid-template-columns:1fr}
  .dept-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .dept-grid{grid-template-columns:1fr}
}