/* ============================================================
   开发周期模块专属样式（process 组 6 页共用）
   视觉母题：时间轴 / 阶段流水
   分节：
   P1 页头 Hero（六页各自装饰母题）
   P2 总览页 process.html —— 纵向五阶段时间轴 + 工期表
   P3 调研页 process-research.html —— 编号墙
   P4 设计页 process-design.html —— 横向流水线
   P5 开发页 process-dev.html —— 里程碑卡 + 甘特条
   P6 测试页 process-test.html —— 测试轮次甘特 + 验收清单
   P7 上线页 process-launch.html —— 印章式检查单
   P8 通用：交付物卡 / 中段CTA / 章节图框
   P9 响应式
   ============================================================ */

/* ---------- P1 页头 Hero ---------- */
.page-hero{overflow:hidden}
.ph-process{background-image:url("../images/banner-process.jpg")}
.ph-research{background-image:url("../images/team-client.jpg")}
.ph-design{background-image:url("../images/sketch-note.jpg")}
.ph-dev{background-image:url("../images/keyboard-close.jpg")}
.ph-test{background-image:url("../images/team-meet.jpg")}
.ph-launch{background-image:url("../images/banner-tech.jpg")}

/* 总览页 Hero：右侧竖排时间刻度装饰 */
.ph-process .hero-in::after{
  content:"调研 · 设计 · 开发 · 测试 · 上线";
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;letter-spacing:14px;font-family:var(--font-h);
  font-size:15px;color:rgba(244,233,211,.55);z-index:2;
}
/* 调研页 Hero：左侧回纹角饰 */
.ph-research .hero-in::before{
  content:"";position:absolute;left:0;top:38px;width:64px;height:64px;
  border-left:3px solid var(--gold);border-top:3px solid var(--gold);opacity:.7;z-index:2;
}
/* 设计页 Hero：印章式方印 */
.ph-design .hero-in::after{
  content:"原创";position:absolute;right:5%;bottom:30px;width:72px;height:72px;
  border:2px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:20px;letter-spacing:4px;writing-mode:vertical-rl;
  background:rgba(78,24,28,.45);z-index:2;
}
/* 开发页 Hero：细网格底纹 */
.ph-dev .hero-in::after{
  content:"";position:absolute;right:6%;top:34px;width:120px;height:120px;
  background:repeating-linear-gradient(0deg,rgba(176,141,87,.35) 0 1px,transparent 1px 14px),
             repeating-linear-gradient(90deg,rgba(176,141,87,.35) 0 1px,transparent 1px 14px);
  z-index:2;opacity:.55;
}
/* 测试页 Hero：十字准星装饰 */
.ph-test .hero-in::after{
  content:"";position:absolute;right:6%;top:44px;width:90px;height:90px;z-index:2;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/2px 100% no-repeat;
  border:1px solid rgba(176,141,87,.6);border-radius:50%;opacity:.6;
}
/* 上线页 Hero：射线光芒 */
.ph-launch .hero-in::after{
  content:"";position:absolute;right:8%;top:30px;width:140px;height:140px;z-index:2;opacity:.5;
  background:conic-gradient(from 0deg, rgba(176,141,87,.5) 0 8deg, transparent 8deg 30deg,
    rgba(176,141,87,.5) 30deg 38deg, transparent 38deg 60deg,
    rgba(176,141,87,.5) 60deg 68deg, transparent 68deg 90deg,
    rgba(176,141,87,.5) 90deg 98deg, transparent 98deg 120deg,
    rgba(176,141,87,.5) 120deg 128deg, transparent 128deg 150deg,
    rgba(176,141,87,.5) 150deg 158deg, transparent 158deg 180deg,
    rgba(176,141,87,.5) 180deg 188deg, transparent 188deg 210deg,
    rgba(176,141,87,.5) 210deg 218deg, transparent 218deg 240deg,
    rgba(176,141,87,.5) 240deg 248deg, transparent 248deg 270deg,
    rgba(176,141,87,.5) 270deg 278deg, transparent 278deg 300deg,
    rgba(176,141,87,.5) 300deg 308deg, transparent 308deg 330deg,
    rgba(176,141,87,.5) 330deg 338deg, transparent 338deg 360deg);
  border-radius:50%;
}

/* ---------- P2 总览页：纵向时间轴 ---------- */
.tl{position:relative;margin:20px 0 10px;padding-left:0}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--rosewood),var(--gold),var(--rosewood-deep));transform:translateX(-50%)}
.tl-item{position:relative;width:50%;padding:0 44px 54px 0}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 54px 44px}
.tl-dot{position:absolute;top:6px;right:-13px;width:26px;height:26px;background:var(--cream-light);
  border:2px solid var(--rosewood);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:12px;color:var(--rosewood);z-index:2}
.tl-item:nth-child(even) .tl-dot{right:auto;left:-13px}
.tl-card{background:var(--cream-light);border:1px solid var(--cream-deep);border-top:3px solid var(--rosewood);
  padding:26px 26px 22px;transition:var(--t-mid)}
.tl-card:hover{box-shadow:var(--shadow-2);transform:translateY(-4px)}
.tl-tag{font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.tl-card h3{font-size:21px;letter-spacing:2px;margin:6px 0 8px}
.tl-card .tl-days{display:inline-block;background:var(--rosewood);color:var(--cream-light);
  font-size:12px;letter-spacing:2px;padding:3px 12px;margin-bottom:12px}
.tl-card p{font-size:14px;color:var(--ink-soft);line-height:1.9}
.tl-card .tl-deliv{margin-top:12px;font-size:13px;color:var(--ink-mute)}
.tl-card .tl-deliv strong{color:var(--rosewood)}

/* ---------- P3 调研页：编号墙 ---------- */
.nwall{border-top:2px solid var(--ink);counter-reset:nw}
.nw-row{display:grid;grid-template-columns:120px 220px 1fr;gap:30px;align-items:start;
  padding:30px 6px;border-bottom:1px solid var(--cream-deep);transition:var(--t-fast)}
.nw-row:hover{background:rgba(244,233,211,.6)}
.nw-no{font-family:var(--font-h);font-size:52px;color:transparent;-webkit-text-stroke:1.5px var(--rosewood);line-height:1}
.nw-row:nth-child(even) .nw-no{color:var(--rosewood);-webkit-text-stroke:0}
.nw-h{font-family:var(--font-h);font-size:19px;letter-spacing:2px;padding-top:6px}
.nw-h small{display:block;font-size:11px;letter-spacing:3px;color:var(--ink-mute);margin-top:4px;text-transform:uppercase}
.nw-b p{font-size:14px;color:var(--ink-soft);line-height:1.95}

/* ---------- P4 设计页：横向流水线 ---------- */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin:30px 0 10px}
.pipe::before{content:"";position:absolute;top:27px;left:10%;right:10%;height:2px;
  background:repeating-linear-gradient(90deg,var(--rosewood) 0 10px,transparent 10px 20px)}
.pipe-step{position:relative;text-align:center;padding:0 10px}
.pipe-ic{position:relative;z-index:2;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:var(--cream-light);border:2px solid var(--rosewood);color:var(--rosewood);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:15px}
.pipe-step h3{font-size:16px;letter-spacing:1px;margin-bottom:6px}
.pipe-step p{font-size:12.5px;color:var(--ink-mute);line-height:1.8}

/* ---------- P5 开发页：里程碑卡 + 甘特条 ---------- */
.ms{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--cream-deep)}
.ms-cell{padding:22px 20px;border-right:1px solid var(--cream-deep);background:var(--cream-light);position:relative}
.ms-cell:last-child{border-right:0}
.ms-cell::after{content:"";position:absolute;top:50%;right:-9px;transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;background:var(--cream-light);border-top:1px solid var(--cream-deep);border-right:1px solid var(--cream-deep);z-index:2}
.ms-cell:last-child::after{display:none}
.ms-date{font-size:11px;letter-spacing:2px;color:var(--gold);font-family:var(--font-h)}
.ms-cell h3{font-size:17px;margin:6px 0 8px;letter-spacing:1px}
.ms-cell p{font-size:13px;color:var(--ink-soft);line-height:1.8}

.gantt{margin-top:10px}
.g-row{display:grid;grid-template-columns:130px 1fr 90px;gap:14px;align-items:center;margin:14px 0}
.g-name{font-size:14px;color:var(--ink);letter-spacing:1px}
.g-track{position:relative;height:22px;background:rgba(138,46,46,.08)}
.g-bar{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,var(--rosewood-deep),var(--rosewood));
  color:var(--cream-light);font-size:11px;display:flex;align-items:center;padding:0 10px;letter-spacing:1px;white-space:nowrap}
.g-bar--alt{background:linear-gradient(90deg,var(--gold),var(--rosewood-soft))}
.g-dur{font-size:12px;color:var(--ink-mute);text-align:right}

/* ---------- P6 测试页：测试轮次甘特 + 验收清单 ---------- */
.round-tbl{counter-reset:rd}
.rd-row{display:grid;grid-template-columns:70px 200px 1fr;gap:20px;align-items:center;
  padding:18px 10px;border-bottom:1px dashed var(--cream-deep)}
.rd-no{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:16px}
.rd-row h3{font-size:16px;letter-spacing:1px}
.rd-row p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}
.rd-bar{height:8px;background:linear-gradient(90deg,var(--rosewood),var(--gold));margin-top:8px;width:var(--w,60%)}

.chk{background:var(--cream);border:1px solid var(--cream-deep);padding:8px 0}
.chk li{position:relative;padding:12px 22px 12px 58px;font-size:14px;color:var(--ink-soft);border-bottom:1px dashed var(--cream-deep)}
.chk li:last-child{border-bottom:0}
.chk li::before{content:"";position:absolute;left:22px;top:14px;width:18px;height:18px;
  border:2px solid var(--rosewood);background:var(--cream-light)}
.chk li::after{content:"";position:absolute;left:26px;top:15px;width:11px;height:6px;border-left:2px solid var(--rosewood);
  border-bottom:2px solid var(--rosewood);transform:rotate(-45deg) translateY(2px)}
.chk li strong{color:var(--ink)}

/* ---------- P7 上线页：印章式检查单 ---------- */
.stamp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.stamp-cell{position:relative;background:var(--cream-light);border:1px solid var(--cream-deep);padding:26px 26px 22px 96px;transition:var(--t-mid)}
.stamp-cell:hover{box-shadow:var(--shadow-2)}
.stamp-seal{position:absolute;left:22px;top:24px;width:56px;height:56px;border:2px solid var(--rosewood);
  color:var(--rosewood);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);
  font-size:15px;letter-spacing:2px;transform:rotate(-8deg);opacity:.85}
.stamp-cell h3{font-size:17px;letter-spacing:1px;margin-bottom:8px}
.stamp-cell p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- P8 通用：交付物卡 / 中段CTA / 章节图框 ---------- */
.dlv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dlv{background:var(--cream-light);border:1px solid var(--cream-deep);padding:24px;position:relative;transition:var(--t-mid)}
.dlv:hover{border-color:rgba(138,46,46,.4);transform:translateY(-4px);box-shadow:var(--shadow-1)}
.dlv::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.dlv h3{font-size:17px;letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.dlv h3 .dot{width:8px;height:8px;background:var(--rosewood);transform:rotate(45deg);flex:none}
.dlv p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

.midcta{background:linear-gradient(100deg,var(--ink) 0%,var(--rosewood-dark) 100%);color:var(--cream-light);
  padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.midcta::after{content:"";position:absolute;right:-40px;bottom:-50px;width:180px;height:180px;
  border:20px solid rgba(244,233,211,.07);border-radius:50%}
.midcta h3{font-size:22px;letter-spacing:3px;margin-bottom:6px}
.midcta p{font-size:13.5px;color:rgba(244,233,211,.75)}
.midcta .mc-tel{font-family:var(--font-h);font-size:28px;color:var(--gold);letter-spacing:2px}

.fig{margin:26px 0}
.fig img{width:100%;border:1px solid var(--cream-deep);box-shadow:var(--shadow-1)}
.fig figcaption{font-size:12.5px;color:var(--ink-mute);letter-spacing:1px;margin-top:10px;padding-left:14px;border-left:3px solid var(--gold)}

/* 工时数字条 */
.workstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--ink);color:var(--cream-light)}
.ws-cell{padding:26px 22px;border-right:1px solid rgba(244,233,211,.14)}
.ws-cell:last-child{border-right:0}
.ws-num{font-family:var(--font-h);font-size:38px;color:var(--gold);line-height:1}
.ws-num small{font-size:15px;color:rgba(244,233,211,.7)}
.ws-lab{font-size:12.5px;color:rgba(244,233,211,.7);letter-spacing:2px;margin-top:8px}

/* ---------- P9 响应式 ---------- */
@media (max-width:1024px){
  .tl::before{left:13px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 40px 46px}
  .tl-dot,.tl-item:nth-child(even) .tl-dot{left:0;right:auto}
  .nw-row{grid-template-columns:80px 1fr;gap:16px}
  .nw-b{grid-column:2}
  .pipe{grid-template-columns:repeat(2,1fr);gap:26px 10px}
  .pipe::before{display:none}
  .ms{grid-template-columns:repeat(2,1fr)}
  .ms-cell:nth-child(2n){border-right:0}
  .ms-cell:nth-child(even)::after{display:none}
  .ms-cell:nth-child(-n+2){border-bottom:1px solid var(--cream-deep)}
  .stamp-grid,.dlv-grid{grid-template-columns:1fr}
  .workstrip{grid-template-columns:repeat(2,1fr)}
  .ws-cell:nth-child(2n){border-right:0}
  .ws-cell:nth-child(-n+2){border-bottom:1px solid rgba(244,233,211,.14)}
  .g-row{grid-template-columns:96px 1fr 70px}
  .rd-row{grid-template-columns:50px 1fr}
}
@media (max-width:640px){
  .nw-no{font-size:38px}
  .pipe{grid-template-columns:1fr}
  .ms{grid-template-columns:1fr}
  .ms-cell{border-right:0;border-bottom:1px solid var(--cream-deep)}
  .ms-cell::after{display:none}
  .workstrip{grid-template-columns:1fr}
  .ws-cell{border-right:0;border-bottom:1px solid rgba(244,233,211,.14)}
  .stamp-cell{padding:20px 18px 18px 84px}
  .g-row{grid-template-columns:84px 1fr;gap:8px}
  .g-dur{grid-column:2;text-align:left}
  .midcta{padding:32px 22px}
  .midcta .mc-tel{font-size:23px}
}

/* ===== 生成式工具类：inline style 外置迁移（勿手改声明） ===== */
.ss42 { font-size:17px;margin-bottom:10px }
.ss15 { font-size:14.5px;line-height:2;color:var(--ink-soft) }
.ss25 { font-size:17px;color:var(--rosewood);margin-bottom:10px }
.ss21 { color:rgba(244,233,211,.85) }
.ss7 { margin-top:36px }
.ss34 { background:var(--rosewood);color:var(--cream-light) }
.ss38 { --w:55% }
.ss24 { background:var(--cream-light);padding:26px;border:1px solid var(--cream-deep) }
.ss11 { color:rgba(244,233,211,.75) }
.ss47 { background:var(--cream);padding:26px;border:1px solid var(--cream-deep) }
.ss36 { --w:90% }
.ss43 { font-size:14px;color:var(--ink-soft);line-height:1.9 }
.ss22 { margin:0 }
.ss32 { margin-top:12px }
.ss29 { left:36%;width:30% }
.ss45 { font-size:14.5px;line-height:2;color:rgba(244,233,211,.85);margin-top:14px }
.ss35 { color:rgba(244,233,211,.8) }
.ss1 { font-size:15px;line-height:2;color:var(--ink-soft) }
.ss48 { font-size:14px;color:var(--ink-soft);line-height:1.95 }
.ss40 { --w:80% }
.ss16 { font-size:14.5px;line-height:2;color:var(--ink-soft);margin-top:14px }
.ss13 { text-align:right }
.ss17 { color:var(--gold) }
.ss18 { margin-top:26px }
.ss3 { font-size:15px;line-height:2;color:var(--ink-soft);margin-top:14px }
.ss28 { left:20%;width:26% }
.ss23 { margin-top:18px;font-size:14px;color:rgba(244,233,211,.8);line-height:2 }
.ss33 { margin-top:24px }
.ss41 { background:var(--cream);padding:26px;border-left:4px solid var(--rosewood) }
.ss37 { --w:70% }
.ss26 { font-size:13.5px;color:var(--ink-soft);line-height:1.9 }
.ss6 { text-decoration:underline }
.ss39 { --w:40% }
.ss31 { left:72%;width:22% }
.ss27 { left:0;width:34% }
.ss4 { margin-top:14px }
.ss5 { color:var(--rosewood) }
.ss9 { background:var(--rosewood-dark);border-color:rgba(244,233,211,.15) }
.ss14 { margin-top:6px }
.ss44 { font-size:14.5px;line-height:2;color:rgba(244,233,211,.85) }
.ss20 { background:var(--gold) }
.ss46 { grid-template-columns:repeat(3,1fr) }
.ss2 { color:var(--ink) }
.ss19 { background:rgba(251,244,230,.06);border-color:rgba(244,233,211,.18) }
.ss30 { left:52%;width:24% }
.ss10 { color:var(--cream-light) }
.ss12 { padding:40px 0 }
.ss8 { font-size:14.5px;color:var(--ink-soft);line-height:2 }