/* =============================================================
   拓野网络 themesanyar.com —— auto 页面样式
   拓野网络-汽车行业网站建设_4S店车型展示预约试驾汽贸官网
   ============================================================= */
.phero{position:relative;padding:calc(var(--header-h) + var(--topbar-h) + 48px) 0 80px;overflow:hidden}
.px-inner{display:grid;align-items:center;gap:48px}
.px-kicker{font-size:12.5px;letter-spacing:.34em;color:var(--earth-deep);text-transform:uppercase;margin-bottom:18px}
.px-title{font-size:clamp(30px,4.6vw,52px);line-height:1.28;letter-spacing:.02em}
.px-sub{margin-top:20px;color:var(--ink-soft);font-size:16px;line-height:1.9;max-width:620px}
.px-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.px-contact{margin-top:22px;font-size:13.5px;color:var(--ink-faint)}
.px-contact a{color:var(--ink-soft);border-bottom:1px dashed var(--line-strong)}
.px-contact a:hover{color:var(--earth-deep)}
.px-media img{width:100%;height:100%;object-fit:cover;box-shadow:var(--shadow)}
.px-media figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-faint);letter-spacing:.1em}

/* ---------- 痛点卡片 ---------- */
.px-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.px-card{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--earth);padding:26px 22px;transition:all .35s ease}
.px-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.px-card-idx{font-family:var(--font-serif);font-size:30px;color:var(--brown-pale)}
.px-card h3{font-size:16.5px;margin:12px 0 8px}
.px-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 方案左右交错 ---------- */
.px-sol-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.px-sol--reverse{direction:rtl}
.px-sol--reverse>*{direction:ltr}
.px-sol-media img{box-shadow:var(--shadow)}
.px-sol-list{margin:26px 0 30px;display:grid;gap:18px}
.px-sol-list li{display:flex;gap:12px}
.px-sol-list svg{width:18px;height:18px;flex:none;margin-top:5px;fill:var(--earth)}
.px-sol-list h3{font-size:16px;margin-bottom:4px}
.px-sol-list p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 策略三栏 ---------- */
.px-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.px-mini{border-left:2px solid var(--earth);padding:18px 22px;background:var(--paper-deep)}
.px-mini h3{font-size:16px;margin-bottom:8px}
.px-mini p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 场景模块 ---------- */
.px-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.px-scene{background:var(--paper);border:1px solid var(--line);padding:30px 24px;transition:all .35s ease}
.px-scene:hover{border-color:var(--earth);transform:translateY(-4px)}
.px-scene-no{font-family:var(--font-serif);font-size:34px;color:var(--earth-light)}
.px-scene h3{font-size:17px;margin:10px 0 8px}
.px-scene p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}
.px-scene-rows{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.px-scene-rows .px-scene{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.px-scene-wide{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px}
.px-scene-wide .px-scene:first-child{grid-row:span 1}

/* ---------- 网站类型 ---------- */
.px-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.px-type{background:var(--paper);border:1px solid var(--line);padding:32px 28px;box-shadow:var(--shadow-soft)}
.px-type h3{font-size:19px;margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.px-type-desc{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.px-type .tags{gap:9px}

/* ---------- 案例入口 ---------- */
.px-case-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.px-case-media img{width:100%;box-shadow:var(--shadow)}
.px-case-copy h3{font-size:19px;margin:16px 0 10px}
.px-case-copy p{color:var(--ink-soft);line-height:1.9}
.px-case-actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.px-faq-wrap{max-width:860px;margin:0 auto}
.px-faq .section-head{margin-bottom:30px}

/* ---------- 数据带 ---------- */
.px-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.px-stat .num{color:var(--earth-light)}
.px-stat p:last-child{color:#A49C8C;font-size:13.5px;margin-top:8px;letter-spacing:.08em}
.px-herostats{margin-top:36px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.px-herostats span{display:flex;flex-direction:column;font-size:13px;color:#B8B0A1}
.px-herostats b{font-family:var(--font-serif);font-size:26px;color:var(--earth-light);margin-bottom:2px}

/* ---------- 联系转化区 ---------- */
.px-cta{background:var(--dark);color:#D8D2C6}
.px-cta-wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:center}
.px-cta-title{color:#EFE9DC;font-size:clamp(24px,3vw,34px);margin:14px 0 12px}
.px-cta-sub{color:#A49C8C;font-size:14.5px}
.px-cta-contacts{margin-top:26px;display:flex;gap:16px;flex-wrap:wrap}
.px-cta-item{display:flex;align-items:center;gap:10px;border:1px solid rgba(201,193,178,.25);padding:12px 20px;border-radius:2px}
.px-cta-item svg{width:18px;height:18px;fill:var(--earth-light)}
.px-cta-item span{display:flex;flex-direction:column;font-size:15px}
.px-cta-item small{font-size:11px;color:#8F8677;letter-spacing:.1em}
.px-cta-btn{justify-self:end}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .px-card-grid{grid-template-columns:1fr 1fr}
  .px-sol-wrap,.px-case-wrap{grid-template-columns:1fr;gap:34px}
  .px-mini-grid,.px-type-grid,.px-scene-grid{grid-template-columns:1fr}
  .px-scene-rows,.px-scene-wide{grid-template-columns:1fr}
  .px-cta-wrap{grid-template-columns:1fr}
  .px-cta-btn{justify-self:start}
  .px-inner{grid-template-columns:1fr !important}
}
@media (max-width:560px){
  .px-card-grid{grid-template-columns:1fr}
  .px-stat-grid{grid-template-columns:1fr;gap:18px}
}


.phero--full{background:linear-gradient(rgba(38,32,24,.62),rgba(38,32,24,.62)),url("../images/industry-auto.jpg") center/cover no-repeat fixed;min-height:600px;display:flex;align-items:center;color:#F3EFE7}
.phero--full .px-kicker{color:var(--earth-light)}
.phero--full .px-title{color:#FBF6EC}
.phero--full .px-sub{color:#D8D2C6}
.phero--full .px-contact{color:#B8B0A1}
.phero--full .px-contact a{color:#EDE7DA;border-color:rgba(237,231,218,.4)}
.px-inner--center{text-align:center;display:block}
.px-inner--center .px-sub{margin-left:auto;margin-right:auto}
.px-inner--center .px-actions{justify-content:center}