/* ==========================================================================
   page-pinpai.css — 品牌官网设计（指纹 F12 角标层叠）
   角标折角卡片 / 横排编号流程 / 衬线问 FAQ / 朱砂斜带 CTA
   ========================================================================== */

/* ===== ① hero ===== */
.pp-hero{
  position:relative;padding-block:clamp(64px,9vw,120px);overflow:hidden;
  background:var(--ink-900);color:var(--moon-100);
}
.pp-hero h1{color:var(--moon-100);font-size:clamp(38px,5.2vw,64px);margin-top:16px;letter-spacing:.08em;}
.pp-hero .lead{color:rgba(247,245,238,.7);max-width:520px;margin-top:18px;}
.pp-hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.pp-hero-img{
  position:absolute;right:0;top:0;bottom:0;width:44%;
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
}
.pp-hero-img img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.pp-hero .kicker{color:var(--cinnabar-400);}
.pp-hero .kicker::before{background:var(--cinnabar-400);}

/* ===== ② 定义 ===== */
.pp-define{max-width:780px;}
.pp-define .section-desc{margin-top:14px;}

/* ===== ③ 角标层叠卡片 ===== */
.pp-cards{
  margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:32px;
}
.pp-card{
  position:relative;background:var(--moon-50);padding:36px 30px 30px;
  box-shadow:var(--shadow-soft);border-radius:2px;
}
.pp-card:nth-child(even){transform:translateY(24px);}
.pp-corner{
  position:absolute;top:0;right:0;width:64px;height:64px;
  background:var(--cinnabar-500);color:#fff;font-family:var(--serif);
  font-size:15px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(100% 0,0 0,100% 100%);
}
.pp-card h3{font-size:19px;color:var(--ink-900);}
.pp-card p{font-size:14.5px;color:var(--ink-500);margin-top:10px;line-height:1.9;}

/* ===== ④ 适合谁 ===== */
.pp-who-bg{background:var(--moon-50);border-block:1px solid var(--line-soft);}
.pp-who-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pp-who-grid > div{
  padding:24px 20px;background:#fff;border-radius:var(--radius);
  border-top:3px solid var(--bamboo-500);box-shadow:var(--shadow-soft);
}
.pp-who-grid h3{font-size:16px;color:var(--bamboo-700);}
.pp-who-grid p{font-size:13.5px;color:var(--ink-500);margin-top:8px;line-height:1.8;}

/* ===== ⑤ 横排编号流程 ===== */
.pp-flow{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pp-flow > div{
  text-align:center;padding:32px 18px 26px;background:var(--moon-100);
  border-radius:var(--radius);border:1px solid var(--line-soft);position:relative;
}
.pp-flow > div::after{
  content:"";position:absolute;right:-14px;top:50%;width:0;height:0;
  border:7px solid transparent;border-left-color:var(--moon-300);
}
.pp-flow > div:last-child::after{display:none;}
.pp-flow span{
  width:52px;height:52px;margin:0 auto;border-radius:50%;
  background:var(--bamboo-500);color:#fff;font-family:var(--serif);
  font-size:20px;display:flex;align-items:center;justify-content:center;
}
.pp-flow h3{font-size:16px;margin-top:14px;}
.pp-flow p{font-size:13px;color:var(--ink-500);margin-top:6px;line-height:1.8;}

/* ===== ⑥ 交付 ===== */
.pp-deliver-bg{background:var(--bamboo-900);}
.pp-deliver-bg .kicker{color:var(--cinnabar-400);}
.pp-deliver-bg .kicker::before{background:var(--cinnabar-400);}
.pp-deliver-bg .section-title{color:var(--moon-100);}
.pp-deliver{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;}
.pp-deliver-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pp-deliver-list > div{background:rgba(247,245,238,.07);border-radius:var(--radius);padding:20px;}
.pp-deliver-list strong{color:var(--moon-100);font-family:var(--serif);font-size:15px;}
.pp-deliver-list p{color:rgba(247,245,238,.7);font-size:13.5px;margin-top:6px;line-height:1.8;}

/* ===== ⑦ 案例 ===== */
.pp-cases{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pp-case{display:block;}
.pp-case img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;box-shadow:var(--shadow-soft);}
.pp-case h3{font-size:16.5px;margin-top:14px;}
.pp-case p{font-size:13.5px;color:var(--ink-500);margin-top:4px;}

/* ===== ⑧ 相关服务 ===== */
.pp-relate-bg{background:var(--moon-50);border-top:1px solid var(--line-soft);}
.pp-relate{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.pp-relate a{
  padding:10px 26px;background:#fff;border:1px solid var(--line-soft);
  border-radius:999px;color:var(--ink-700);font-size:14.5px;box-shadow:var(--shadow-soft);
}
.pp-relate a:hover{background:var(--bamboo-500);color:#fff;border-color:var(--bamboo-500);}

/* ===== ⑨ FAQ 衬线问 + 缩进答 ===== */
.pp-faq{margin-top:32px;max-width:820px;}
.pp-faq-item{padding:22px 0;border-bottom:1px solid var(--line);}
.pp-faq-item h3{
  font-family:var(--serif);font-size:19px;color:var(--ink-900);
  display:flex;gap:12px;align-items:baseline;
}
.pp-faq-item h3::before{
  content:"问";font-size:12px;background:var(--ink-900);color:var(--moon-100);
  padding:2px 8px;border-radius:3px;font-family:var(--sans);flex-shrink:0;
}
.pp-faq-item p{margin-top:12px;padding-left:44px;color:var(--ink-700);font-size:15px;line-height:2;}

/* ===== ⑩ CTA 朱砂斜带 ===== */
.pp-cta{
  background:linear-gradient(115deg,var(--cinnabar-600) 0%,var(--cinnabar-500) 55%,var(--cinnabar-400) 100%);
  color:#FFF3EC;transform:skewY(-1.5deg);margin-top:20px;
}
.pp-cta-inner{
  transform:skewY(1.5deg);text-align:center;padding-block:clamp(48px,7vw,84px);
}
.pp-cta h2{color:#FFF8F2;font-size:clamp(22px,3vw,34px);}
.pp-cta p{color:rgba(255,243,236,.85);margin-top:10px;}
.pp-cta-btns{margin-top:24px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.pp-cta .btn{background:#fff;color:var(--cinnabar-600);font-weight:700;}
.pp-cta .btn-line-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.pp-cta .btn-line-light:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .pp-hero-img{position:relative;width:100%;height:280px;clip-path:none;margin-top:24px;}
  .pp-cards{grid-template-columns:1fr;}
  .pp-card:nth-child(even){transform:none;}
  .pp-who-grid,.pp-flow{grid-template-columns:1fr 1fr;}
  .pp-flow > div::after{display:none;}
  .pp-deliver{grid-template-columns:1fr;}
  .pp-cases{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pp-who-grid,.pp-flow,.pp-deliver-list{grid-template-columns:1fr;}
}