@charset "UTF-8";

.service-hero{position:relative;height:400px;background:var(--dark-bg);overflow:hidden;display:flex;align-items:center}
.service-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.35}
.service-hero-content{position:relative;z-index:2;text-align:center;width:100%;padding:0 20px}
.service-hero h1{font-size:38px;font-weight:800;color:var(--primary);margin-bottom:10px}
.service-hero p{font-size:16px;color:rgba(245,245,245,0.85)}

.service-detail{padding:60px 0;background:var(--white)}
.service-detail-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:start}
.service-detail-img{border-radius:8px;overflow:hidden;box-shadow:0 8px 30px var(--shadow)}
.service-detail-img img{width:100%;height:auto}
.service-detail-content h2{font-size:26px;font-weight:800;color:var(--dark-bg);margin-bottom:20px}
.service-detail-content > p{font-size:15px;color:var(--gray);line-height:1.8;margin-bottom:25px}

.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}
.feature-item{display:flex;align-items:flex-start;gap:10px;padding:12px;background:var(--light-gray);border-radius:6px}
.feature-item::before{content:'\2713';color:var(--secondary);font-weight:800;font-size:16px;flex-shrink:0}
.feature-item span{font-size:13px;color:var(--dark-bg);font-weight:500}

.service-flow{padding:60px 0;background:var(--light-gray)}
.flow-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.flow-item{background:var(--white);padding:25px 15px;text-align:center;border-radius:8px;border:1px solid #e8e8e8;position:relative;transition:all 0.3s}
.flow-item:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 25px var(--shadow)}
.flow-num{width:50px;height:50px;border-radius:50%;background:var(--secondary);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin:0 auto 15px}
.flow-item h4{font-size:14px;font-weight:700;color:var(--dark-bg);margin-bottom:8px}
.flow-item p{font-size:12px;color:var(--gray);line-height:1.5}

.related-services{padding:60px 0;background:var(--white)}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:35px}
.related-card{background:var(--light-gray);padding:20px;text-align:center;border-radius:8px;transition:all 0.3s;border:1px solid transparent}
.related-card:hover{background:var(--white);border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 25px var(--shadow)}
.related-num{font-size:28px;font-weight:800;color:var(--primary);margin-bottom:8px}
.related-card h4{font-size:14px;font-weight:600;color:var(--dark-bg);margin-bottom:6px}
.related-card a{font-size:12px;color:var(--secondary);font-weight:600}

@media (max-width:768px) {
  .service-hero{height:300px}
  .service-hero h1{font-size:28px}
  .service-detail-inner{grid-template-columns:1fr;gap:30px}
  .feature-list{grid-template-columns:1fr}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px) {
  .flow-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
}