/* ============================================================
   faq-process.html 流程与工期问答样式
   布局：Hero → 横向时间轴 → 工期数字条 → 居中手风琴 → CTA
   ============================================================ */

.pr-hero{position:relative;min-height:64vh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden}
.pr-hero-bg{z-index:0}
.pr-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(20,20,20,.78) 0%,rgba(20,20,20,.5) 70%,rgba(20,20,20,.42))}
.pr-hero-inner{position:relative;z-index:2;color:#fff;max-width:720px}
.pr-hero .crumb{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:22px;color:#E9E2D6}
.pr-hero .crumb a{color:#E9E2D6}
.pr-hero .crumb a:hover{color:var(--coffee-bright)}
.pr-hero .crumb em{font-style:normal;color:var(--coffee-bright)}
.pr-hero-title{font-size:clamp(32px,4.8vw,54px);font-weight:900;color:#fff;line-height:1.18;margin-bottom:18px}
.ht-gold{background:linear-gradient(120deg,#E9D3A8,#C9A87C);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-hero-sub{font-size:16px;color:#EDE6DA;line-height:1.9;margin-bottom:30px}
.pr-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* 横向时间轴 */
.pr-tl{padding-bottom:30px}
.tl-line{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:52px;position:relative;
}
.tl-line::before{
  content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,var(--coffee-bright),var(--coffee),var(--coffee-deep));
  border-radius:2px;
}
.tl-item{position:relative;padding:0 16px;text-align:center}
.tl-day{
  position:relative;z-index:1;display:inline-block;min-width:96px;
  background:var(--grad-coffee);color:#fff;font-weight:900;font-size:14px;
  padding:10px 16px;border-radius:100px;box-shadow:0 8px 20px rgba(169,136,89,.35);
  margin-bottom:18px;
}
.tl-item h3{font-size:17px;margin-bottom:8px}
.tl-item p{font-size:13px;color:var(--text-2);line-height:1.8}

/* 工期数字条 */
.pr-nums{background:var(--grad-ink);padding:64px 0}
.pr-nums-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.num-cell b{display:block;font-size:clamp(34px,4vw,52px);font-weight:900;color:var(--coffee-bright);line-height:1.1}
.num-cell span{font-size:13px;color:#B7AE9E;letter-spacing:.08em}

/* 居中手风琴 */
.pr-acc-wrap{max-width:820px;margin:0 auto}
.acc-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;
  overflow:hidden;transition:box-shadow .3s;
}
.acc-item.open{box-shadow:var(--shadow-md);border-color:var(--coffee-bright)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:19px 24px;font-size:16px;font-weight:700;color:var(--ink);background:transparent;
}
.acc-ic{position:relative;width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--coffee-bg);transition:all .35s}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--coffee-deep);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-ic::before{width:10px;height:2px}
.acc-ic::after{width:2px;height:10px}
.acc-item.open .acc-ic{background:var(--grad-coffee)}
.acc-item.open .acc-ic::before,.acc-item.open .acc-ic::after{background:#fff}
.acc-item.open .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.68,.4,1)}
.acc-panel p{padding:0 24px 22px;font-size:14.5px;color:var(--text-2);line-height:1.95}

/* CTA */
.cta{position:relative;overflow:hidden}
.cta-bg{z-index:0}
.cta-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.78),rgba(20,20,20,.88));z-index:1}
.cta-inner{position:relative;z-index:2;text-align:center}
.cta-title{font-size:clamp(28px,4vw,44px);font-weight:900;color:#fff;margin-bottom:14px}
.cta-sub{color:#CFC7B8;margin-bottom:30px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:900px){
  .tl-line{grid-template-columns:1fr 1fr;gap:28px 0}
  .tl-line::before{display:none}
  .pr-nums-inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .tl-line{grid-template-columns:1fr}
}