/* ============================================================
   捷宝汇(8907) · 整站深黑工业风 · 宝马专修皮
   挂在 common.css 之后；版式按 E 盘设计稿、文案以 SEO-GEO TXT 为准
   ============================================================ */
:root{
  --jb-black:#1a1a1a; --jb-black-d:#0f0f0f; --jb-card:#242424; --jb-card2:#2a2a2a;
  --jb-orange:#ff6b1a; --jb-orange-d:#e85d10; --jb-line:#333333; --jb-line2:#3d3d3d;
  --jb-text:#e8e8e8; --jb-muted:#999999; --jb-white:#ffffff;
  --jb-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
body{font-family:var(--jb-sans);background:var(--jb-black);color:var(--jb-text);}
h1,h2,h3{font-family:var(--jb-sans);}
.jb-container{max-width:1200px;margin:0 auto;padding:0 clamp(22px,4vw,48px);}

/* ---------- 页头 ---------- */
.site-header{background:var(--jb-black);border-bottom:1px solid var(--jb-line);}
.site-header .nav-link{color:#ddd;font-size:15px;padding:8px 14px;position:relative;}
.site-header .nav-link:hover{color:#fff;}
.site-header .nav-link.active{color:var(--jb-orange);font-weight:600;}
.site-header .nav-link.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--jb-orange);}
.jb-logo{display:flex;align-items:center;gap:10px;}
.jb-logo-mark{width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,var(--jb-orange),#d14e00);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}
.jb-logo-cn{font-weight:700;font-size:19px;color:#fff;letter-spacing:1px;line-height:1.15;}
.jb-logo-sub{font-size:10.5px;color:var(--jb-muted);letter-spacing:2px;margin-top:1px;}
.jb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;padding:10px 24px;border-radius:4px;transition:.25s;cursor:pointer;border:none;letter-spacing:1px;font-weight:600;}
.jb-btn-orange{background:var(--jb-orange);color:#fff;}
.jb-btn-orange:hover{background:var(--jb-orange-d);}
.jb-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);}
.jb-btn-ghost:hover{background:#fff;color:var(--jb-black);}

/* ---------- Hero ---------- */
.jb-hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(120deg,#141414 0%,#242424 55%,#2e2e2e 100%);}
.jb-hero-bg{position:absolute;inset:0;}
.jb-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.9;}
.jb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.45) 55%,rgba(10,10,10,.15) 100%);}
.jb-hero-inner{position:relative;z-index:2;width:100%;}
.jb-hero h1{color:#fff;font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:3px;line-height:1.2;}
.jb-hero h1 em{color:var(--jb-orange);font-style:normal;}
.jb-hero p{color:rgba(255,255,255,.85);font-size:clamp(14px,1.5vw,18px);margin-top:16px;letter-spacing:1.5px;}
.jb-hero-cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- 叠压数据卡 ---------- */
.jb-stats{position:relative;z-index:3;margin-top:-56px;}
.jb-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--jb-card2);border:1px solid var(--jb-line2);border-radius:6px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.45);}
.jb-stat{padding:30px 16px;text-align:center;}
.jb-stat+.jb-stat{border-left:1px solid var(--jb-line2);}
.jb-stat b{display:block;font-size:32px;font-weight:800;color:var(--jb-orange);line-height:1;}
.jb-stat span{display:block;margin-top:9px;font-size:13px;color:#bbb;letter-spacing:1px;}

/* ---------- 区块标题 ---------- */
.jb-section{padding:76px 0;}
.jb-head{margin-bottom:48px;}
.jb-head h2{font-size:30px;font-weight:800;color:#fff;letter-spacing:3px;}
.jb-head h2::before{content:"";display:inline-block;width:6px;height:26px;background:var(--jb-orange);margin-right:14px;vertical-align:-3px;border-radius:1px;}
.jb-head p{margin-top:12px;font-size:14px;color:var(--jb-muted);letter-spacing:1px;}

/* ---------- 维修服务暗卡 ---------- */
.jb-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.jb-svc-card{background:var(--jb-card);border:1px solid var(--jb-line);border-radius:4px;padding:30px 26px;transition:.3s;position:relative;overflow:hidden;}
.jb-svc-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--jb-orange);transition:.35s;}
.jb-svc-card:hover{border-color:var(--jb-orange);background:var(--jb-card2);transform:translateY(-3px);}
.jb-svc-card:hover::before{height:100%;}
.jb-svc-ico{width:52px;height:52px;border-radius:4px;background:rgba(255,107,26,.12);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--jb-orange);margin-bottom:18px;}
.jb-svc-card h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:1px;}
.jb-svc-card p{font-size:13.5px;color:#9a9a9a;line-height:1.75;}
.jb-svc-card .jb-svc-more{display:inline-block;margin-top:14px;font-size:13px;color:var(--jb-orange);font-weight:600;}
.jb-svc-card .jb-svc-more:hover{text-decoration:underline;}
/* 服务卡实拍图(20261020素材填充) */
.jb-svc-img{margin:-30px -26px 18px;height:172px;overflow:hidden;background:#111;}
.jb-svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.jb-svc-card:hover .jb-svc-img img{transform:scale(1.06);}
.jb-svc-card h3{display:flex;align-items:center;gap:10px;}
.jb-svc-card .jb-svc-ico{width:34px;height:34px;border-radius:4px;background:rgba(255,107,26,.12);display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--jb-orange);margin:0;flex:0 0 auto;}
@media(max-width:768px){.jb-svc-img{height:150px;}}

/* ---------- 为什么选我们（橙圈编号） ---------- */
.jb-why{background:var(--jb-black-d);}
.jb-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.jb-why-item{background:var(--jb-card);border:1px solid var(--jb-line);border-radius:4px;padding:34px 24px;text-align:center;transition:.3s;}
.jb-why-item:hover{border-color:var(--jb-orange);}
.jb-why-num{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--jb-orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;}
.jb-why-item h4{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px;}
.jb-why-item p{font-size:12.5px;color:#8f8f8f;line-height:1.7;}

/* ---------- 车间环境图卡 ---------- */
.jb-works{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:stretch;}
.jb-work-real{display:flex;flex-direction:column;}
.jb-work-real .jb-work-img{flex:1;aspect-ratio:auto;min-height:300px;}
.jb-work-real figcaption{flex:0 0 auto;}
.jb-work-feat{display:grid;grid-template-rows:1fr 1fr;gap:20px;}
.jb-work-feat-item{display:flex;gap:16px;align-items:flex-start;background:var(--jb-card);border:1px solid var(--jb-line);border-radius:4px;padding:24px 22px;}
.jb-work-feat-item>i{font-size:26px;color:var(--jb-accent,#e8622d);flex:0 0 auto;margin-top:3px;}
.jb-work-feat-item h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:.5px;}
.jb-work-feat-item p{font-size:13.5px;line-height:1.75;color:#9a9a9a;}
.jb-work-card{border-radius:4px;overflow:hidden;background:var(--jb-card);border:1px solid var(--jb-line);}
.jb-work-img{aspect-ratio:4/3;background:linear-gradient(135deg,#2c2c2c,#1c1c1c);position:relative;overflow:hidden;}
.jb-work-img img{width:100%;height:100%;object-fit:cover;}
.jb-work-img .jb-work-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:52px;color:rgba(255,255,255,.14);}
.jb-work-card figcaption{background:var(--jb-card2);padding:14px 18px;font-size:14.5px;color:#ddd;font-weight:600;letter-spacing:1px;}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--jb-black-d);color:rgba(255,255,255,.66);border-top:1px solid var(--jb-line);}
.site-footer .footer-heading{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px;letter-spacing:2px;}
.site-footer .footer-contact p,.site-footer .footer-contact li,.site-footer .footer-link{font-size:13.5px;line-height:2.1;color:rgba(255,255,255,.6);}
.site-footer .footer-link{display:inline-block;}
.site-footer .footer-link:hover{color:var(--jb-orange);}
.site-footer .footer-contact i{color:var(--jb-orange);}
.jb-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:52px 0 36px;}
.jb-fform{background:var(--jb-card);border:1px solid var(--jb-line2);border-radius:6px;padding:24px;}
.jb-fform h4{color:#fff;font-size:17px;margin-bottom:14px;font-weight:700;letter-spacing:1px;}
.jb-fform input,.jb-fform textarea{width:100%;background:#151515;border:1px solid var(--jb-line2);border-radius:4px;padding:10px 13px;font-size:13.5px;color:#eee;margin-bottom:10px;outline:none;}
.jb-fform input::placeholder,.jb-fform textarea::placeholder{color:#666;}
.jb-foot-bar{border-top:1px solid var(--jb-line);}
.jb-foot-bar .jb-container{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;font-size:12px;color:rgba(255,255,255,.45);}

/* ---------- 移动端底部通栏 ---------- */
.mobile-fab{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;}
@media (max-width:1023px){.mobile-fab{display:block;}}
.mobile-fab-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--jb-orange);color:#fff;font-size:15px;font-weight:700;padding:14px 0;letter-spacing:1px;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .jb-svc,.jb-why-grid,.jb-works{grid-template-columns:1fr;}
  .jb-foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .jb-svc,.jb-why-grid,.jb-works{grid-template-columns:1fr;}
  .jb-stats-grid{grid-template-columns:repeat(2,1fr);}
  .jb-stat:nth-child(3){border-left:none;}
  .jb-stat:nth-child(n+3){border-top:1px solid var(--jb-line2);}
  .jb-foot-grid{grid-template-columns:1fr;}
  .jb-section{padding:48px 0;}
  .jb-head h2{font-size:24px;}
  .jb-stat b{font-size:26px;}
}

/* ===== 内页兼容层（旧葛骨类 → 深黑橙皮） ===== */
.category-banner{position:relative;height:300px;overflow:hidden;background:linear-gradient(120deg,#141414,#2a2a2a);}
.category-banner img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.category-banner-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,10,10,.5);text-align:center;}
.category-banner-title{font-size:38px;font-weight:800;color:#fff;letter-spacing:4px;}
.category-banner-title::after{content:"";display:block;width:40px;height:3px;background:var(--jb-orange);margin:14px auto 0;}
.category-banner-subtitle{margin-top:10px;font-size:14px;color:rgba(255,255,255,.8);letter-spacing:2px;}
.bg-white{background-color:#1a1a1a!important;}
.section{background:#1a1a1a;}
.section[class*="bg-["]{background:#212121!important;}
.section-header{margin-bottom:40px;}
.section-title{color:#fff;font-weight:800;letter-spacing:2px;}
.section-subtitle{color:var(--jb-muted);}
.gold-line{width:44px;height:3px;background:var(--jb-orange);margin-top:14px;border-radius:1px;}
.design-card,.case-card,.stat-card,.team-card{background:var(--jb-card);border:1px solid var(--jb-line);border-radius:4px;box-shadow:none;}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--jb-orange);color:var(--jb-orange);border-radius:4px;padding:10px 26px;background:transparent;transition:.25s;font-size:14.5px;font-weight:600;}
.btn-outline:hover{background:var(--jb-orange);color:#fff;}
.badge{display:inline-block;background:rgba(255,107,26,.12);color:var(--jb-orange);border:1px solid rgba(255,107,26,.35);border-radius:3px;padding:2px 10px;font-size:12px;}
.stats-banner{background:#0f0f0f!important;padding:56px 0;}
.stats-number{font-size:38px;font-weight:800;color:var(--jb-orange);}
.stats-label{color:#bbb;margin-top:6px;}
.link-arrow{color:var(--jb-orange);font-weight:600;}
.text-primary{color:var(--jb-orange)!important;}
.text-gray-900{color:#f0f0f0!important;}
.text-gray-600,.text-gray-500{color:#a3a3a3!important;}
.text-gray-400{color:#777!important;}
.border-gray-200{border-color:var(--jb-line)!important;}
.faq-item{border-color:var(--jb-line)!important;}

/* ===== 内页 .container 约束（锁 1200 居中 + 响应式侧距，防文字贴边） ===== */
.container{max-width:1200px!important;padding-left:clamp(22px,4vw,48px)!important;padding-right:clamp(22px,4vw,48px)!important;}

/* ===== 列表页图位（客户新素材挂上后显示；无图自动隐藏，不留空块） ===== */
.jb-list-img{margin:-24px -24px 20px;height:200px;overflow:hidden;background:var(--jb-dark,#111);border-radius:14px 14px 0 0;}
.jb-list-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.case-card:hover .jb-list-img img,
.practice-card:hover .jb-list-img img{transform:scale(1.06);}
.jb-list-img-side{margin:0;flex:0 0 200px;height:150px;border-radius:12px;align-self:flex-start;}
@media (max-width:640px){
  .jb-list-img-side{flex:0 0 100%;height:180px;margin-bottom:4px;}
}
/* 推荐资讯缩略图 */
.jb-thumb{flex:0 0 96px;width:96px;height:68px;overflow:hidden;border-radius:8px;margin-right:12px;background:var(--jb-dark,#111);}
.jb-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== 案例详情页 实拍图组(维修前后对比) ===== */
.jb-pshot{border-top:1px solid var(--jb-line,#e8e2dd);padding-top:28px;}
.jb-pshot-h{font-size:18px;font-weight:700;color:#fff;margin-bottom:6px;padding-left:12px;border-left:4px solid var(--jb-accent,#e8622d);line-height:1.4;}
.jb-pshot-item{margin-bottom:22px;}
.jb-pshot-img{border-radius:12px;overflow:hidden;background:var(--jb-dark,#111);line-height:0;aspect-ratio:4/3;}
.jb-pshot-img img{width:100%;height:100%;object-fit:cover;display:block;}
.jb-pshot-item:last-child .jb-pshot-img{aspect-ratio:3/2;}
/* 前/后单幅: 竖构图, 完整不裁 */
.jb-pshot-item:not(:last-child) .jb-pshot-img{aspect-ratio:3/4;}
.jb-pshot-item:not(:last-child) .jb-pshot-img img{object-fit:cover;object-position:center;}
/* 单幅完整显示 */
/* 前/后两幅并排, 全景图整行 */
.jb-pshot{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.jb-pshot-h{grid-column:1/-1;margin-bottom:2px;}
.jb-pshot-item{margin-bottom:0;}
.jb-pshot-item:last-child{grid-column:1/-1;}
@media (max-width:640px){.jb-pshot{grid-template-columns:1fr;}.jb-pshot-item:last-child{grid-column:auto;}}
.jb-pshot-cap{margin-top:10px;font-size:13px;color:#9a9a9a;display:flex;align-items:center;gap:8px;}
.jb-pshot-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--jb-accent,#e8622d);color:#fff;font-size:11px;font-weight:700;}

/* ===== 技师图放大 ===== */
.jb-team-img{width:176px!important;height:224px!important;border-radius:16px!important;object-fit:cover!important;object-position:center!important;}
@media (max-width:640px){.jb-team-img{width:150px!important;height:190px!important;}}

/* ===== 页脚预约表单 ===== */
.jb-form-tip{font-size:11px;color:#8a8a8a;margin-top:8px;line-height:1.5;text-align:center;}
.jb-fform input{display:block;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:8px;outline:none;transition:border-color .2s;}
.jb-fform input::placeholder{color:#888;}
.jb-fform input:focus{border-color:var(--jb-accent,#e8622d);}
.jb-fform input:required:invalid:not(:placeholder-shown){border-color:#c0392b;}