/* ============================================================
   pinpai-dingzhi.css 品牌官网定制
   Hero 变体：H3 斜切背景（斜向色块切割版面）
   ============================================================ */

/* ---------- H3 斜切 Hero ---------- */
.pp-hero{position:relative;overflow:hidden;padding:70px 0 80px;background:var(--cream)}
.pp-slash{
  position:absolute;top:-10%;right:-6%;width:60%;height:120%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);
  transform:skewX(-12deg);opacity:.55;
}
.pp-h-vline{left:42%;opacity:.3}
.pp-h-blob{width:180px;height:180px;background:var(--yellow);left:4%;bottom:-50px}
.pp-h-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.pp-h-text h1{margin:18px 0 16px;font-size:clamp(30px,4vw,48px)}
.pp-h-text h1 em{font-style:normal;color:var(--blue-ink)}
.pp-h-text>p{color:var(--muted);max-width:560px}
.pp-h-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.pp-h-media .photo{aspect-ratio:4/3;transform:rotate(1.5deg)}

/* ---------- 斜排悬浮卡 ---------- */
.pp-value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px}
.pp-vcard{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--shadow-sm);transform:rotate(-1.5deg);
  transition:transform .3s ease,box-shadow .3s ease;
}
.pp-vcard-m{transform:translateY(24px) rotate(1.2deg);border-color:var(--green-deep)}
.pp-vcard-y{transform:rotate(-1deg);border-color:var(--yellow-deep)}
.pp-vcard:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--shadow)}
.pp-vtag{
  display:inline-block;background:var(--blue);padding:5px 14px;border-radius:999px;
  font-size:13px;font-weight:700;margin-bottom:12px;
}
.pp-vtag-g{background:var(--green)}
.pp-vcard h3{margin-bottom:8px}
.pp-vcard p{color:var(--muted);font-size:14.5px}

/* ---------- 大字编号服务内容 ---------- */
.pp-services{background:var(--bg);overflow:hidden}
.pp-s-xline{bottom:24%;opacity:.35}
.pp-svc-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 44px}
.pp-svc{display:flex;gap:20px;align-items:flex-start;padding:18px 0;border-bottom:1px dashed var(--line)}
.pp-svc-no{font-size:44px;font-weight:800;color:var(--blue);line-height:1;flex:none;-webkit-text-stroke:1.5px var(--blue-deep);color:transparent}
.pp-svc:nth-child(even) .pp-svc-no{-webkit-text-stroke-color:var(--green-deep)}
.pp-svc h3{margin-bottom:6px}
.pp-svc p{color:var(--muted);font-size:14.5px}

/* ---------- 箭头流程 ---------- */
.pp-flow-row{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:center}
.pp-fstep{
  flex:1;min-width:150px;background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:20px;text-align:center;box-shadow:var(--shadow-sm);
}
.pp-fstep b{display:block;font-size:17px;margin-bottom:6px}
.pp-fstep i{font-style:normal;color:var(--muted);font-size:13.5px}
.pp-farrow{align-self:center;font-size:24px;color:var(--yellow-deep);font-weight:800}

/* ---------- 案例大图+侧栏 ---------- */
.pp-case{background:#fff}
.pp-case-in{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.pp-case-main{position:relative}
.pp-case-cap{
  position:absolute;left:20px;bottom:-16px;background:var(--yellow);
  padding:8px 18px;border-radius:999px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-sm);
}
.pp-case-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 22px}
.pp-case-mini a{
  position:relative;border-radius:var(--r-md);overflow:hidden;display:block;border:2px solid var(--line);
}
.pp-case-mini img{aspect-ratio:16/10;width:100%;object-fit:cover}
.pp-case-mini b{
  position:absolute;left:0;right:0;bottom:0;display:block;font-size:13px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(39,66,79,.85));padding:20px 12px 10px;
}
.pp-case-mini a:last-child{grid-column:1/-1}

/* ---------- 价格带 ---------- */
.pp-price-band{
  background:var(--blue-ink);color:#fff;border-radius:var(--r-lg);padding:46px 44px;
  box-shadow:var(--shadow);
}
.pp-price-band h2{color:#fff;margin-bottom:12px}
.pp-price-band p{color:#D7ECF6;max-width:720px}
.pp-price-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

/* ---------- FAQ 双列 ---------- */
.pp-faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pp-faq-item{
  background:#fff;border:2px solid var(--line);border-radius:var(--r-md);
  padding:0 20px;margin-bottom:14px;
}
.pp-faq-item summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.pp-faq-item summary::-webkit-details-marker{display:none}
.pp-faq-item summary::after{content:"+";font-size:20px;color:var(--blue-deep);flex:none}
.pp-faq-item[open] summary::after{transform:rotate(45deg)}
.pp-faq-item p{padding:0 0 15px;color:var(--muted);font-size:14px}

/* ---------- CTA ---------- */
.pp-cta-band{text-align:center;background:var(--cream);border:2px solid var(--blue);border-radius:var(--r-lg);padding:56px 30px}
.pp-cta-band h2{margin-bottom:14px;font-size:clamp(26px,3.4vw,40px)}
.pp-cta-band p{color:var(--muted);max-width:600px;margin:0 auto}
.pp-cta-actions{display:flex;justify-content:center;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.pp-cta-meta{font-size:14px;color:var(--muted)}

@media (max-width:960px){
  .pp-h-in,.pp-case-in,.pp-faq-cols,.pp-svc-list{grid-template-columns:1fr}
  .pp-value-row{grid-template-columns:1fr}
  .pp-vcard,.pp-vcard-m,.pp-vcard-y{transform:none}
  .pp-farrow{display:none}
}