/* =====================================================================
   服务流程 · 页面独立样式 liucheng.css
   模块原创设计：六边形徽标阶梯卡 / 字母阶段详解 / 交付周期表 / 质量清单 / FAQ手风琴
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-service{background-image:url('../images/banner-service.jpg')}

/* ---------- 六步流程 ---------- */
.steps-sec{background:var(--c-ice-2);background-image:radial-gradient(circle at 8% 6%,rgba(37,99,235,.08),transparent 34%)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative}
.steps-grid::before{
  content:"";position:absolute;left:8%;right:8%;top:56px;height:2px;
  background:repeating-linear-gradient(90deg,#BBD2F5 0 10px,transparent 10px 18px);
  z-index:0;
}
.step-card{
  position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);padding:30px 26px 26px;
  box-shadow:var(--shadow);text-align:center;transition:transform var(--trans),box-shadow var(--trans);
}
.step-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--shadow-lg)}
.hex{
  width:74px;height:74px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  color:#fff;font-size:20px;font-weight:800;letter-spacing:1px;
}
.hex1{background:linear-gradient(135deg,#2563EB,#1D4ED8)}
.hex2{background:linear-gradient(135deg,#0EA5E9,#0369A1)}
.hex3{background:linear-gradient(135deg,#10B981,#047857)}
.hex4{background:linear-gradient(135deg,#F59E0B,#D97706)}
.hex5{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.hex6{background:linear-gradient(135deg,#EF4444,#B91C1C)}
.step-card h3{font-size:19px;margin-bottom:10px}
.step-card p{color:var(--c-text-2);font-size:14.5px;min-height:66px}
.step-card em{display:inline-block;font-style:normal;font-size:13px;font-weight:700;color:var(--c-accent);background:var(--c-ice);border-radius:999px;padding:4px 16px;margin-top:6px}

/* ---------- 阶段详解 ---------- */
.phase-sec{background:#fff}
.phase-list{display:grid;gap:18px}
.phase-row{
  display:flex;gap:24px;align-items:flex-start;background:var(--c-ice-2);
  border-radius:14px;padding:26px 30px;transition:transform var(--trans),background var(--trans);
  border:1px solid transparent;
}
.phase-row:hover{transform:translateX(8px);background:#fff;border-color:var(--c-line);box-shadow:var(--shadow)}
.phase-no{
  width:58px;height:58px;border-radius:50%;background:var(--c-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;flex-shrink:0;
  box-shadow:0 8px 18px rgba(37,99,235,.3);
}
.phase-body h3{font-size:18px;margin-bottom:6px}
.phase-body p{color:var(--c-text-2);font-size:14.5px;margin-bottom:10px}
.phase-body ul{display:flex;gap:10px;flex-wrap:wrap}
.phase-body ul li{font-size:12.5px;color:var(--c-accent);background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:4px 14px}

/* ---------- 交付周期 ---------- */
.cycle-sec{background:var(--c-dark);background-image:radial-gradient(circle at 90% 20%,rgba(37,99,235,.25),transparent 42%)}
.cycle-card{max-width:980px;margin:0 auto}
.cycle-card h2{color:#fff;text-align:center;font-size:clamp(22px,2.6vw,32px);margin-bottom:34px}
.cycle-table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.05)}
.cycle-table th,.cycle-table td{padding:16px 20px;text-align:left;font-size:14.5px}
.cycle-table thead th{background:var(--c-grad);color:#fff;font-weight:700}
.cycle-table tbody tr{border-top:1px solid rgba(255,255,255,.1)}
.cycle-table tbody tr:nth-child(even){background:rgba(255,255,255,.04)}
.cycle-table tbody td{color:#C7D6F2}
.cycle-table tbody td:first-child{color:#fff;font-weight:700}
.cycle-note{text-align:center;color:#8FA4C8;font-size:13.5px;margin-top:22px}

/* ---------- 质量保障 ---------- */
.quality-sec{background:var(--c-ice-2)}
.quality-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.quality-list h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:24px}
.quality-list ul{display:grid;gap:16px}
.quality-list ul li{
  display:flex;align-items:center;gap:14px;background:#fff;border-radius:12px;
  padding:16px 20px;font-weight:600;font-size:15px;box-shadow:0 6px 16px rgba(27,58,107,.06);
  border-left:4px solid var(--c-accent);
}
.quality-list ul li svg{width:22px;height:22px;fill:var(--c-accent);flex-shrink:0}
.quality-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg)}

/* ---------- 常见问题 ---------- */
.faq-sec{background:#fff}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--c-ice-2);border-radius:12px;overflow:hidden;border:1px solid var(--c-line)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 26px;font-weight:700;font-size:16px;color:var(--c-primary);
  display:flex;align-items:center;gap:14px;position:relative;padding-right:56px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"";width:12px;height:12px;flex-shrink:0;border-right:2.5px solid var(--c-accent);border-bottom:2.5px solid var(--c-accent);
  transform:rotate(-45deg);transition:transform var(--trans);
}
.faq-item summary::after{
  content:"?";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--c-ice);color:var(--c-accent);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
}
.faq-item[open] summary::before{transform:rotate(45deg)}
.faq-item[open] summary{background:#fff}
.faq-item p{padding:0 26px 22px 52px;color:var(--c-text-2);font-size:14.5px;margin:0}

/* ---------- 联系区 ---------- */
.contact-sec{padding-top:20px;background:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .steps-grid{grid-template-columns:1fr 1fr}
  .steps-grid::before{display:none}
  .quality-wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .steps-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .phase-row{flex-direction:column;gap:14px;padding:22px}
  .cycle-table th,.cycle-table td{padding:12px 12px;font-size:13px}
}