@charset "utf-8";
/* ================================================================
   IVD 整体解决方案页样式 (solution.css)
   仅作用于 .sp-wrap 内，不影响 header / footer / 其它内页
   主色: #c1216a  辅色: #e8347f  浅底: #fdeef4  （沿用站点主题）
   ================================================================ */

.sp-wrap{
  --sp-main:#c1216a;
  --sp-main2:#e8347f;
  --sp-dark:#8f164e;
  --sp-ink:#222;
  --sp-text:#555;
  --sp-sub:#6b6b72;
  --sp-soft:#fdeef4;
  --sp-soft2:#fbe3ee;
  --sp-line:#f0d6e2;
  --sp-grad:linear-gradient(135deg,#8f164e 0%,#c1216a 52%,#e8347f 100%);
  --sp-radius:14px;
  --sp-shadow:0 10px 30px rgba(120,30,70,.10);
  --sp-shadow-lg:0 22px 50px rgba(120,30,70,.18);
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  color:var(--sp-ink);
  overflow:hidden;
  line-height:1.8;
}
.sp-wrap *{box-sizing:border-box}
.sp-inner{width:1200px;max-width:92%;margin:0 auto}
.sp-sec{padding:70px 0}
.sp-sec.alt{background:var(--sp-soft)}
.sp-sec.white{background:#fff}

/* 区块标题 */
.sp-head{text-align:center;max-width:760px;margin:0 auto 46px}
.sp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--sp-main);background:var(--sp-soft);padding:7px 18px;border-radius:30px;margin-bottom:16px}
.sp-eyebrow.light{color:#ffe3ef;background:rgba(255,255,255,.14)}
.sp-head h2{font-size:32px;font-weight:700;color:var(--sp-ink);line-height:1.3}
.sp-head h2 em{font-style:normal;color:var(--sp-main)}
.sp-head p{margin-top:14px;font-size:16px;color:var(--sp-sub)}

/* 通用按钮 */
.sp-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;border-radius:30px;padding:13px 30px;transition:all .25s;cursor:pointer;border:none}
.sp-btn i{font-style:normal}
.sp-btn-main{background:var(--sp-main);color:#fff}
.sp-btn-main:hover{background:var(--sp-main2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(193,33,106,.3)}
.sp-btn-ghost{background:transparent;color:var(--sp-main);border:1.5px solid var(--sp-line)}
.sp-btn-ghost:hover{border-color:var(--sp-main);background:var(--sp-soft)}
.sp-btn-white{background:#fff;color:var(--sp-main)}
.sp-btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.sp-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.sp-btn-outline:hover{background:rgba(255,255,255,.14)}

/* ============ 价值主张 intro ============ */
.sp-intro{background:#fff;padding:56px 0}
.sp-intro .sp-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.sp-intro h2{font-size:30px;font-weight:700;color:var(--sp-ink);line-height:1.35;margin-bottom:18px}
.sp-intro h2 em{font-style:normal;color:var(--sp-main)}
.sp-intro p{font-size:16px;color:var(--sp-text);margin-bottom:26px}
.sp-intro .sp-actions{display:flex;gap:14px;flex-wrap:wrap}
.sp-intro-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-stat{background:var(--sp-soft);border-radius:var(--sp-radius);padding:24px;text-align:center;border:1px solid var(--sp-line)}
.sp-stat .num{font-size:38px;font-weight:800;color:var(--sp-main);line-height:1}
.sp-stat .num span{font-size:20px}
.sp-stat .lab{margin-top:8px;font-size:14px;color:var(--sp-sub)}

/* ============ 痛点 ============ */
.sp-pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sp-pain-card{background:#fff;border-radius:var(--sp-radius);padding:28px 24px;box-shadow:var(--sp-shadow);border-top:4px solid var(--sp-main);transition:all .3s}
.sp-pain-card:hover{transform:translateY(-6px);box-shadow:var(--sp-shadow-lg)}
.sp-pain-card .ic{width:52px;height:52px;color:var(--sp-main);margin-bottom:16px}
.sp-pain-card .ic svg{width:100%;height:100%}
.sp-pain-card h4{font-size:18px;color:var(--sp-ink);margin-bottom:10px}
.sp-pain-card p{font-size:14.5px;color:var(--sp-sub)}
.sp-pain-card .solve{margin-top:14px;padding-top:13px;border-top:1px dashed var(--sp-line);font-size:13.5px;color:var(--sp-main);font-weight:600}

/* ============ 核心方案 Tab ============ */
.sp-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.sp-tab{padding:11px 26px;border-radius:30px;background:#fff;color:var(--sp-main);font-weight:700;font-size:15px;cursor:pointer;border:1.5px solid var(--sp-line);transition:all .25s}
.sp-tab:hover{background:var(--sp-soft)}
.sp-tab.active{background:var(--sp-main);color:#fff;border-color:var(--sp-main);box-shadow:0 8px 20px rgba(193,33,106,.3)}
.sp-panel{display:none}
.sp-panel.active{display:block;animation:spFade .45s ease}
@keyframes spFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-card{position:relative;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:28px;transition:all .3s;display:flex;flex-direction:column;overflow:hidden}
.sp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sp-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.sp-card:hover{transform:translateY(-6px);box-shadow:var(--sp-shadow-lg);border-color:transparent}
.sp-card:hover::before{transform:scaleX(1)}
.sp-card .ic{width:56px;height:56px;border-radius:13px;background:var(--sp-soft);color:var(--sp-main);display:grid;place-items:center;margin-bottom:16px;transition:all .3s}
.sp-card .ic svg{width:30px;height:30px}
.sp-card:hover .ic{background:var(--sp-grad);color:#fff}
.sp-card h3{font-size:20px;color:var(--sp-ink);margin-bottom:8px}
.sp-card .pp{font-size:13.5px;color:var(--sp-sub);font-style:italic;border-left:3px solid var(--sp-main2);padding-left:12px;margin-bottom:13px}
.sp-card .desc{font-size:14.5px;color:var(--sp-text);margin-bottom:16px;flex-grow:1}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sp-tag{background:var(--sp-soft);color:var(--sp-main);padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:600}
.sp-tag b{font-weight:400;color:#a3376b}
.sp-link{display:inline-flex;align-items:center;gap:6px;color:var(--sp-main);font-weight:700;font-size:15px;margin-top:auto}
.sp-link i{font-style:normal;transition:transform .2s}
.sp-link:hover i{transform:translateX(5px)}

/* ============ 原料矩阵表 ============ */
.sp-table-wrap{background:#fff;border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);overflow:hidden;border:1px solid var(--sp-line)}
.sp-table-scroll{overflow-x:auto}
.sp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
.sp-table thead th{background:var(--sp-main);color:#fff;text-align:left;padding:16px 20px;font-weight:700;font-size:14px}
.sp-table tbody td{padding:15px 20px;border-bottom:1px solid var(--sp-line);color:var(--sp-text);vertical-align:top}
.sp-table tbody tr:nth-child(even){background:#fffafc}
.sp-table tbody tr:hover{background:var(--sp-soft)}
.sp-table .prod{font-weight:700;color:var(--sp-main)}
.sp-mini-tags{display:flex;flex-wrap:wrap;gap:6px}
.sp-mini{background:var(--sp-soft2);color:var(--sp-main);padding:3px 9px;border-radius:5px;font-size:12px;font-weight:600}
.sp-badge{display:inline-block;background:#fdeef4;color:var(--sp-main);padding:3px 10px;border-radius:5px;font-size:12px;font-weight:700;border:1px solid var(--sp-line)}
.sp-table-note{margin-top:16px;font-size:13px;color:var(--sp-sub);text-align:center}
.sp-table-note a{color:var(--sp-main);font-weight:700}

/* ============ 平台适配 ============ */
.sp-plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sp-plat-card{background:linear-gradient(160deg,#fff,#fff8fb);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:28px;transition:all .3s}
.sp-plat-card:hover{box-shadow:var(--sp-shadow-lg);transform:translateY(-4px)}
.sp-plat-card .ph{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sp-plat-card .ph .ic{width:50px;height:50px;border-radius:12px;background:var(--sp-grad);color:#fff;display:grid;place-items:center;flex-shrink:0}
.sp-plat-card .ph .ic svg{width:26px;height:26px}
.sp-plat-card .ph h4{font-size:18px;color:var(--sp-ink)}
.sp-plat-card .ph small{color:var(--sp-sub);font-size:12.5px;font-weight:600;letter-spacing:.5px}
.sp-plat-card ul{list-style:none;margin:0;padding:0}
.sp-plat-card ul li{font-size:14.5px;color:var(--sp-text);padding:8px 0 8px 26px;position:relative;border-bottom:1px dashed var(--sp-line)}
.sp-plat-card ul li:last-child{border-bottom:none}
.sp-plat-card ul li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:var(--sp-soft);border:2px solid var(--sp-main)}
.sp-plat-card ul li::after{content:"";position:absolute;left:5px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--sp-main)}

/* ============ 服务流程 ============ */
.sp-process{background:var(--sp-grad);color:#fff}
.sp-process .sp-head h2{color:#fff}
.sp-process .sp-head h2 em{color:#ffd9e8}
.sp-process .sp-head p{color:#ffdcec}
.sp-steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:26px}
.sp-steps::before{content:"";position:absolute;top:34px;left:10%;right:10%;height:2px;background:rgba(255,255,255,.4)}
.sp-step{text-align:center;padding:0 12px;position:relative}
.sp-step .circle{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;background:var(--sp-dark);border:2px solid #fff;display:grid;place-items:center;position:relative;z-index:2;box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.sp-step .circle svg{width:30px;height:30px}
.sp-step h4{font-size:17px;margin:0 0 8px}
.sp-step p{font-size:13.5px;color:#ffdcec;margin:0}
.sp-step .no{position:absolute;top:-4px;right:calc(50% - 46px);width:24px;height:24px;border-radius:50%;background:#fff;color:var(--sp-main);font-size:12px;font-weight:800;display:grid;place-items:center;z-index:3}

/* ============ 质量体系 ============ */
.sp-q-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.sp-q-visual{background:var(--sp-grad);border-radius:20px;padding:44px;color:#fff;position:relative;overflow:hidden;text-align:center}
.sp-q-visual::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);top:-60px;right:-60px}
.sp-q-visual .big{font-size:62px;font-weight:800;line-height:1;position:relative;z-index:2}
.sp-q-visual .big span{font-size:28px}
.sp-q-visual .cap{color:#ffdcec;margin-top:8px;position:relative;z-index:2}
.sp-q-certs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px;position:relative;z-index:2}
.sp-q-certs span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700}
.sp-q-list{display:grid;gap:16px}
.sp-q-item{display:flex;gap:16px;align-items:flex-start}
.sp-q-item .ic{width:46px;height:46px;border-radius:11px;background:#fff;box-shadow:var(--sp-shadow);color:var(--sp-main);display:grid;place-items:center;flex-shrink:0}
.sp-q-item .ic svg{width:24px;height:24px}
.sp-q-item h4{font-size:17px;color:var(--sp-ink);margin:0 0 4px}
.sp-q-item p{font-size:14.5px;color:var(--sp-sub);margin:0}

/* ============ 定制开发 ============ */
.sp-custom-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.sp-custom-wrap h2{font-size:30px;color:var(--sp-ink);font-weight:700;line-height:1.3;margin-bottom:16px}
.sp-custom-wrap h2 em{font-style:normal;color:var(--sp-main)}
.sp-custom-wrap .lead{font-size:16px;color:var(--sp-sub);margin-bottom:24px}
.sp-feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.sp-feat div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--sp-text);font-weight:600}
.sp-feat .ck{color:var(--sp-main);font-weight:800}
.sp-custom-visual{background:linear-gradient(160deg,var(--sp-soft),var(--sp-soft2));border-radius:20px;padding:36px;border:1px solid var(--sp-line)}
.sp-dna{background:#fff;border-radius:14px;padding:22px;box-shadow:var(--sp-shadow);margin-bottom:16px;display:flex;gap:16px;align-items:center}
.sp-dna:last-child{margin-bottom:0}
.sp-dna .n{width:44px;height:44px;border-radius:11px;background:var(--sp-grad);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.sp-dna h5{font-size:15.5px;color:var(--sp-ink);margin:0 0 4px}
.sp-dna p{font-size:13px;color:var(--sp-sub);margin:0}

/* ============ 核心优势 ============ */
.sp-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sp-why-card{background:#fff;border-radius:var(--sp-radius);padding:32px 24px;text-align:center;box-shadow:var(--sp-shadow);transition:all .3s;border-bottom:3px solid transparent}
.sp-why-card:hover{transform:translateY(-6px);box-shadow:var(--sp-shadow-lg);border-bottom-color:var(--sp-main)}
.sp-why-card .ic{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;background:var(--sp-soft);color:var(--sp-main);display:grid;place-items:center;transition:all .3s}
.sp-why-card .ic svg{width:32px;height:32px}
.sp-why-card:hover .ic{background:var(--sp-grad);color:#fff}
.sp-why-card h4{font-size:18px;color:var(--sp-ink);margin:0 0 10px}
.sp-why-card p{font-size:14px;color:var(--sp-sub);margin:0}

/* ============ 客户成效 ============ */
.sp-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-case{position:relative;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:30px;transition:all .3s;background:#fff}
.sp-case:hover{box-shadow:var(--sp-shadow-lg);transform:translateY(-4px)}
.sp-case .quote{font-size:48px;color:var(--sp-soft2);line-height:.6;font-family:Georgia,serif}
.sp-case .txt{font-size:15px;color:var(--sp-text);margin:10px 0 22px;font-style:italic}
.sp-case-meta{display:flex;align-items:center;gap:12px;border-top:1px solid var(--sp-line);padding-top:18px}
.sp-case-meta .av{width:44px;height:44px;border-radius:50%;background:var(--sp-grad);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.sp-case-meta h5{font-size:15px;color:var(--sp-ink);margin:0}
.sp-case-meta small{color:var(--sp-sub);font-size:13px}
.sp-case-metric{position:absolute;top:22px;right:22px;background:var(--sp-soft);color:var(--sp-main);font-weight:800;font-size:13px;padding:5px 11px;border-radius:7px}

/* ============ FAQ ============ */
.sp-faq-wrap{max-width:860px;margin:0 auto}
.sp-faq{background:#fff;border:1px solid var(--sp-line);border-radius:12px;margin-bottom:14px;overflow:hidden;transition:all .3s}
.sp-faq[open]{box-shadow:var(--sp-shadow);border-color:var(--sp-main2)}
.sp-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:16.5px;font-weight:700;color:var(--sp-ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";font-size:24px;color:var(--sp-main);transition:transform .3s;flex-shrink:0}
.sp-faq[open] summary::after{content:"\2212";transform:rotate(180deg)}
.sp-faq .body{padding:0 24px 22px;font-size:15px;color:var(--sp-text)}
.sp-faq .body::before{content:"";display:block;height:1px;background:var(--sp-line);margin-bottom:16px}

/* ============ 底部 CTA ============ */
.sp-cta{background:var(--sp-grad);color:#fff;text-align:center;position:relative;overflow:hidden}
.sp-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 20% 20%,rgba(255,255,255,.18),transparent 60%),radial-gradient(500px 300px at 85% 90%,rgba(255,255,255,.14),transparent 60%)}
.sp-cta .sp-inner{position:relative;z-index:2}
.sp-cta h2{font-size:34px;font-weight:800;margin-bottom:16px}
.sp-cta p{font-size:17px;color:#ffe3ef;max-width:620px;margin:0 auto 30px}
.sp-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.sp-cta-row{margin-top:30px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;font-size:15px;color:#ffe3ef}
.sp-cta-row span{display:flex;align-items:center;gap:8px}

/* ============ 滚动渐入 ============ */
.sp-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.sp-reveal.in{opacity:1;transform:none}

/* ============ 响应式 ============ */
@media screen and (max-width:1000px){
  .sp-pain-grid{grid-template-columns:1fr 1fr}
  .sp-cards{grid-template-columns:1fr 1fr}
  .sp-plat-grid{grid-template-columns:1fr 1fr}
  .sp-why-grid{grid-template-columns:1fr 1fr}
  .sp-case-grid{grid-template-columns:1fr}
  .sp-intro .sp-inner,.sp-q-wrap,.sp-custom-wrap{grid-template-columns:1fr;gap:34px}
  .sp-steps{grid-template-columns:1fr;gap:26px}
  .sp-steps::before{display:none}
  .sp-step{display:flex;gap:18px;text-align:left}
  .sp-step .circle{margin:0;flex-shrink:0}
  .sp-step .no{right:auto;left:46px;top:-4px}
}
@media screen and (max-width:767px){
  .sp-sec{padding:50px 0}
  .sp-head h2{font-size:25px}
  .sp-pain-grid,.sp-cards,.sp-plat-grid,.sp-why-grid,.sp-feat{grid-template-columns:1fr}
  .sp-intro h2,.sp-custom-wrap h2{font-size:24px}
  .sp-cta h2{font-size:26px}
}