/* ============================================================
   process.css — 开发流程页
   模块：六步图文时间线（左右交替） / 深色对比表 / 工期承诺条
   ============================================================ */

/* ---------- Hero ---------- */
.pf-hero{background:
  linear-gradient(160deg,rgba(42,46,53,.93),rgba(28,31,37,.96)),
  url("../images/banner-process.jpg") center/cover no-repeat;
}

/* ---------- 六步时间线 ---------- */
.pf-steps{background:var(--mist);position:relative}
.pf-tl{position:relative;max-width:1080px;margin:0 auto}
.pf-tl::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 8%,var(--line-2) 92%,transparent);
}
.pf-item{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  margin-bottom:56px;align-items:center;position:relative;
}
.pf-item:last-child{margin-bottom:0}
.pf-item-media{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.pf-item-media img{width:100%;height:280px;object-fit:cover}
.pf-item-tag{
  display:inline-block;font-size:12px;letter-spacing:3px;
  color:var(--gold-3);background:var(--gold-soft);
  border:1px solid rgba(195,164,104,.35);
  padding:4px 14px;border-radius:30px;margin-bottom:12px;
}
.pf-item-body h3{font-size:24px;margin-bottom:12px;letter-spacing:1px}
.pf-item-body>p{font-size:14.5px;color:var(--ink-2);line-height:2;margin-bottom:16px}
.pf-item-body a{color:var(--gold-3);border-bottom:1px solid var(--gold)}
.pf-deliver{
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:8px;padding:14px 18px;
}
.pf-deliver-label{
  display:block;font-size:12px;letter-spacing:2px;color:var(--gold-3);
  font-weight:600;margin-bottom:8px;
}
.pf-deliver li{font-size:13.5px;color:var(--ink-2);padding-left:16px;position:relative;margin-bottom:5px}
.pf-deliver li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--gold-2);transform:rotate(45deg);
}
.pf-item-flip .pf-item-media{order:2}
.pf-item-flip .pf-item-body{order:1}

/* ---------- 对比表 ---------- */
.pf-vs{position:relative}
.pf-vs-table{
  border:1px solid rgba(217,190,133,.25);border-radius:14px;overflow:hidden;
}
.pf-vs-row{
  display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr;
  border-bottom:1px solid rgba(217,190,133,.14);
}
.pf-vs-row:last-child{border-bottom:0}
.pf-vs-row:nth-child(even){background:rgba(255,255,255,.03)}
.pf-vs-col{padding:18px 24px;font-size:14.5px;color:#C9C6BC}
.pf-vs-dim{color:var(--gold-2);font-weight:600;letter-spacing:1px}
.pf-vs-head{background:rgba(217,190,133,.1)}
.pf-vs-head .pf-vs-col{color:#fff;font-size:15.5px;font-weight:600}
.pf-vs-us{color:#EDE7D6}

/* ---------- 工期承诺 ---------- */
.pf-promise{background:var(--white)}
.pf-promise-inner{
  border:1px solid var(--line);border-radius:18px;
  padding:50px 56px;background:
    linear-gradient(135deg,var(--mist) 0%,var(--white) 70%);
}
.pf-promise-inner>h2{font-size:28px;margin-bottom:32px;letter-spacing:2px}
.pf-promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:36px}
.pf-promise-item b{
  display:block;font-family:var(--font-serif);font-size:19px;
  color:var(--gold-3);margin-bottom:10px;
}
.pf-promise-item p{font-size:14px;color:var(--gray);line-height:1.9}
.pf-promise-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pf-promise-cta span{font-size:14px;color:var(--gray)}
.pf-promise-cta a{color:var(--gold-3);border-bottom:1px solid var(--gold)}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .pf-tl::before{display:none}
  .pf-item,.pf-item-flip{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .pf-item-flip .pf-item-media{order:0}
  .pf-item-flip .pf-item-body{order:1}
  .pf-item-media img{height:220px}
  .pf-vs-row{grid-template-columns:1fr}
  .pf-vs-col{padding:12px 20px;border-bottom:1px dashed rgba(217,190,133,.12)}
  .pf-vs-head{display:none}
  .pf-promise-inner{padding:36px 28px}
  .pf-promise-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .pf-item-media img{height:200px}
}