/* ============================================
   MK体育在线官网 - 服务栏目页样式
   service.css
   ============================================ */

/* Service Hero */
.service-hero{background:linear-gradient(135deg,#1C2833 0%,#111 100%);padding:160px 0 80px;text-align:center}
.service-hero h1{font-size:42px;margin-bottom:16px}
.service-hero p{color:#A0A0A0;font-size:16px;max-width:600px;margin:0 auto}

/* Service Detail */
.service-detail{padding:80px 0}
.service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.service-detail-img{border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.service-detail-img img{width:100%;height:auto}
.service-detail-content h2{font-size:32px;margin-bottom:20px}
.service-detail-content p{color:#A0A0A0;line-height:1.8;margin-bottom:20px}
.service-detail-content ul{list-style:none;padding:0}
.service-detail-content ul li{padding:10px 0;padding-left:28px;position:relative;color:#D5D8DC;border-bottom:1px solid rgba(255,255,255,.05)}
.service-detail-content ul li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6600' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;background-size:contain}

/* Service Features */
.service-features{background:#111;padding:100px 0}
.service-features h2{text-align:center;font-size:32px;margin-bottom:48px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:#141414;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:32px;text-align:center;transition:all .3s}
.feature-card:hover{border-color:rgba(255,102,0,.2);transform:translateY(-4px)}
.feature-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(255,102,0,.1);border-radius:16px;margin:0 auto 20px;color:#FF6600}
.feature-card h3{font-size:18px;color:#FFF;margin-bottom:12px}
.feature-card p{font-size:14px;color:#808080;line-height:1.7}

/* Service Process */
.service-process{background:#000;padding:100px 0}
.service-process h2{text-align:center;font-size:32px;margin-bottom:48px}
.sp-steps{display:flex;gap:0;position:relative;justify-content:space-between}
.sp-step{flex:1;text-align:center;padding:0 16px;position:relative}
.sp-step::after{content:'';position:absolute;top:32px;right:-20px;width:40px;height:2px;background:linear-gradient(90deg,#FF6600,#5D6D7E)}
.sp-step:last-child::after{display:none}
.sp-step-num{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#141414;border:2px solid #FF6600;border-radius:50%;font-size:22px;font-weight:900;color:#FF6600;margin:0 auto 20px}
.sp-step h4{font-size:16px;color:#FFF;margin-bottom:8px}
.sp-step p{font-size:13px;color:#808080;line-height:1.6}

/* Service CTA */
.service-cta{background:linear-gradient(135deg,#1C2833,#000);padding:80px 0;text-align:center}
.service-cta h2{font-size:28px;margin-bottom:16px}
.service-cta p{color:#A0A0A0;margin-bottom:24px}

@media(max-width:768px){
.service-detail-grid{grid-template-columns:1fr;gap:40px}
.features-grid{grid-template-columns:1fr}
.sp-steps{flex-direction:column;gap:32px}
.sp-step::after{display:none}
}