:root{
  --accent:#4cbd9a;
  --ink:#353433;
  --line:#e5e7eb;
  --bg:#ffffff;
  --muted:#64748b;
}

.ServicesContainer{
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 40px;
}
.ServicesWrap{
  width:100%;
  max-width:1100px;
}

.ServicesHero{
  text-align:center;
  margin-bottom:24px;
}
.ServicesHero h1{
  margin:0 0 6px 0;
  font-size:28px;
  color:var(--ink);
}
.ServicesLead{
  font-size:1.1rem;
  color:var(--muted);
}

.SectionHead{
  margin:28px 0 12px;
  font-size:20px;
  color:var(--ink);
}

.ServicesGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}

.ServiceCard{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  transition: box-shadow .2s ease, transform .08s ease;
}
.ServiceCard:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.CardHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.IconCircle {
  width:36px; height:36px;
  border-radius:50%;
  display:inline-grid; place-items:center;
  border:1px solid var(--accent);
  font-size:16px;
}

.IconCircle i{
  color:var(--accent);
}

.ServiceCard h3{
  margin:0; font-size:18px; color:var(--ink);
}
.ServiceCard p{
  margin:0; color:var(--muted);
}

.FeatureList{
  margin:10px 0 0 0;
  padding-left:18px;
}
.FeatureList li{ margin:6px 0; }

.KVList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.KVList .kv{
  border:1px dashed var(--line);
  border-radius:8px;
  padding:10px 12px;
}

.Process{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}
.Step{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  background:#fff;
}
.StepBadge{
  width:28px; height:28px;
  border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--accent);
  color:#fff; font-weight:700; margin-bottom:8px;
}

.ServicesCTA{
  text-align:center;
  border:1px dashed var(--accent);
  border-radius:10px;
  padding:18px;
  margin-top:24px;
}
.BtnPrimary{
  display:inline-block;
  margin-top:10px;
  padding:10px 14px;
  background:var(--accent);
  color:#fff; text-decoration:none;
  border-radius:8px;
}

@media (max-width: 992px){
  .ServicesGrid{ grid-template-columns: repeat(2,1fr); }
  .Process{ grid-template-columns: repeat(2,1fr); }
  .KVList{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .ServicesGrid, .Process{ grid-template-columns: 1fr; }
  .ServicesHero h1{ font-size:24px; }
}