/* =====================================================================
   机械制造行业页 · jixie.css
   布局：痛点图文左图右文 + 横向四步栏目带 + 三列功能卡 + 案例叠图卡 + 报价横条 + FAQ手风琴
   点缀色：钢蓝 #2563EB + 橙 #F59E0B（工业感）
   ===================================================================== */

/* 横幅 */
.banner-jx{background-image:url('../images/banner-service.jpg')}

/* ---------- 痛点 ---------- */
.jx-pain-sec{background:#fff}
.jx-pain-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.jx-pain-media{position:relative}
.jx-pain-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-lg)}
.jx-pain-media::after{content:"";position:absolute;left:-22px;top:-22px;width:88px;height:88px;border-top:5px solid #F59E0B;border-left:5px solid #F59E0B;border-radius:12px 0 0 0}
.jx-pain-badge{position:absolute;right:-18px;bottom:-24px;background:var(--c-dark);color:#fff;border-radius:14px;padding:18px 24px;text-align:center;box-shadow:var(--shadow-lg)}
.jx-pain-badge b{display:block;font-size:28px;font-weight:800;color:#F59E0B;line-height:1.1}
.jx-pain-badge span{font-size:12.5px;opacity:.85}
.jx-pain-text h2{font-size:clamp(24px,2.8vw,34px);margin:0 0 16px;line-height:1.35}
.jx-pain-text>p{color:var(--c-text-2);margin-bottom:20px}
.jx-pain-list{display:grid;gap:16px}
.jx-pain-list li{background:var(--c-ice-2);border-radius:14px;padding:18px 22px 18px 56px;position:relative;transition:transform var(--trans),box-shadow var(--trans)}
.jx-pain-list li:hover{transform:translateX(8px);box-shadow:var(--shadow)}
.jx-pain-list li::before{
  content:"";position:absolute;left:20px;top:22px;width:22px;height:22px;border-radius:50%;
  background:#FDEADA;border:2px solid #F59E0B;
}
.jx-pain-list li::after{
  content:"";position:absolute;left:26px;top:27px;width:10px;height:5px;
  border-left:2.5px solid #F59E0B;border-bottom:2.5px solid #F59E0B;transform:rotate(-45deg);
}
.jx-pain-list b{display:block;color:var(--c-primary);font-size:15.5px;margin-bottom:4px}
.jx-pain-list span{color:var(--c-text-2);font-size:14px;line-height:1.7}

/* ---------- 栏目规划：横向四步 ---------- */
.jx-plan-sec{background:var(--c-ice-2);position:relative;overflow:hidden}
.jx-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.jx-plan::before{content:"";position:absolute;top:44px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--c-line) 0 10px,transparent 10px 20px);z-index:0}
.jx-plan-item{position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);padding:30px 24px 28px;box-shadow:var(--shadow);transition:transform var(--trans)}
.jx-plan-item:hover{transform:translateY(-8px)}
.jx-plan-no{position:absolute;right:18px;top:14px;font-size:15px;font-weight:800;color:var(--c-line);letter-spacing:1px}
.jx-plan-ico{
  width:64px;height:64px;border-radius:18px;background:var(--c-grad);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;box-shadow:0 10px 22px rgba(37,99,235,.3);
}
.jx-plan-ico svg{width:30px;height:30px;fill:#fff}
.jx-plan-item:nth-child(2) .jx-plan-ico{background:linear-gradient(135deg,#0EA5E9,#2563EB)}
.jx-plan-item:nth-child(3) .jx-plan-ico{background:linear-gradient(135deg,#F59E0B,#F97316)}
.jx-plan-item:nth-child(4) .jx-plan-ico{background:linear-gradient(135deg,#10B981,#0EA5E9)}
.jx-plan-item h3{font-size:18px;margin-bottom:8px}
.jx-plan-item p{color:var(--c-text-2);font-size:14px;margin:0}

/* ---------- 定制功能：3×2 色块卡 ---------- */
.jx-feat-sec{background:#fff}
.jx-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jx-feat{
  position:relative;background:var(--c-ice-2);border-radius:var(--radius-lg);padding:32px 28px;overflow:hidden;
  border:1px solid var(--c-line);transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.jx-feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c-grad)}
.jx-feat:nth-child(3n+2)::before{background:linear-gradient(#0EA5E9,#2563EB)}
.jx-feat:nth-child(3n)::before{background:linear-gradient(#F59E0B,#F97316)}
.jx-feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.jx-feat i{
  width:54px;height:54px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;box-shadow:var(--shadow);
}
.jx-feat i svg{width:26px;height:26px;fill:var(--c-accent)}
.jx-feat h3{font-size:17.5px;margin-bottom:8px}
.jx-feat p{color:var(--c-text-2);font-size:14px;margin:0}

/* ---------- 案例叠图卡 ---------- */
.jx-case-sec{background:var(--c-dark);background-image:radial-gradient(circle at 15% 10%,rgba(37,99,235,.28),transparent 45%)}
.jx-case-sec .sec-head h2{color:#fff}
.jx-case-sec .sec-head p{color:#9FB2D4}
.jx-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.jx-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;display:block;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.jx-card img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .6s ease}
.jx-card:hover img{transform:scale(1.07)}
.jx-card-mask{
  position:absolute;inset:auto 0 0 0;padding:46px 22px 20px;color:#fff;
  background:linear-gradient(transparent,rgba(10,22,45,.94));
}
.jx-card-tag{display:inline-block;font-size:12px;font-weight:700;color:#0B1B36;background:#F59E0B;border-radius:999px;padding:3px 12px;margin-bottom:8px;letter-spacing:1px}
.jx-card-mask h3{color:#fff;font-size:17.5px;margin-bottom:6px}
.jx-card-mask p{font-size:13.5px;color:#B9CBEA;margin:0}
.jx-case-sec .btn-line{border-color:#7DA6E8;color:#CFE0FB}
.jx-case-sec .btn-line:hover{background:#7DA6E8;color:var(--c-primary)}

/* ---------- 报价横条 ---------- */
.jx-quote-sec{background:#fff;padding:40px 0 96px}
.jx-quote{
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  background:linear-gradient(120deg,#EAF2FF,#F6F9FE);border:1px solid var(--c-line);
  border-radius:var(--radius-lg);padding:44px 48px;position:relative;overflow:hidden;
}
.jx-quote::before{content:"";position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:rgba(37,99,235,.08)}
.jx-quote-left{max-width:720px}
.jx-quote-left .sec-eyebrow{margin-bottom:12px}
.jx-quote-left h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.jx-quote-left p{color:var(--c-text-2);margin:0}
.jx-quote-left a{color:var(--c-accent);font-weight:700;border-bottom:1px dashed var(--c-accent)}
.jx-quote-right{display:flex;flex-direction:column;gap:10px;align-items:flex-start;position:relative;z-index:1}
.jx-quote-right span{font-size:13px;color:var(--c-muted)}

/* ---------- FAQ 手风琴 ---------- */
.jx-faq-sec{background:var(--c-ice-2)}
.jx-faq{max-width:860px;margin:0 auto;display:grid;gap:14px}
.jx-faq-item{
  background:#fff;border-radius:14px;padding:20px 26px;box-shadow:var(--shadow);
  transition:box-shadow var(--trans);
}
.jx-faq-item[open]{box-shadow:var(--shadow-lg)}
.jx-faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;font-weight:700;color:var(--c-primary);font-size:16.5px;
}
.jx-faq-item summary::-webkit-details-marker{display:none}
.jx-faq-item summary i{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--c-ice);position:relative;transition:transform .3s;
}
.jx-faq-item summary i::before{content:"";position:absolute;left:7px;right:7px;top:13px;height:2px;background:var(--c-accent)}
.jx-faq-item summary i::after{content:"";position:absolute;top:7px;bottom:7px;left:13px;width:2px;background:var(--c-accent);transition:opacity .3s}
.jx-faq-item[open] summary i::after{opacity:0}
.jx-faq-item p{margin:14px 0 2px;color:var(--c-text-2);font-size:14.5px;line-height:1.8}

/* 移动端当前行业高亮 */
.mnav-sub a.cur{color:var(--c-accent)!important;font-weight:700!important}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .jx-pain-wrap{grid-template-columns:1fr;gap:48px}
  .jx-pain-media{max-width:640px}
  .jx-pain-badge{right:10px}
  .jx-plan{grid-template-columns:1fr 1fr;gap:30px 20px}
  .jx-plan::before{display:none}
  .jx-feat-grid{grid-template-columns:1fr 1fr}
  .jx-case-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .jx-quote{padding:32px 26px}
}
@media (max-width:640px){
  .jx-feat-grid{grid-template-columns:1fr}
  .jx-pain-badge{padding:12px 16px}
  .jx-pain-badge b{font-size:22px}
}
