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

/* Detail card (expanded service) */
.service-detail {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:64px 0; border-bottom:1px solid var(--gray-border);
}
.service-detail:last-child { border-bottom:none; }
.service-detail.reverse .sd-visual { order:-1; }
.sd-visual {
  aspect-ratio:4/3; border-radius:var(--radius-lg); display:flex;
  align-items:center; justify-content:center; font-size:100px;
  position:relative; overflow:hidden;
}
.sd-visual.green  { background:linear-gradient(135deg,#D1FAE5,#F0FDF4); }
.sd-visual.dark   { background:var(--grad-forest); }
.sd-visual.lime   { background:linear-gradient(135deg,#ecfccb,#f7fee7); }
.sd-features { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.sd-feature { display:flex; align-items:flex-start; gap:12px; }
.sd-feature-dot { width:20px; height:20px; border-radius:50%; background:var(--green-mint); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:2px; }
.sd-feature p { font-size:14px; color:var(--gray-dark); line-height:1.6; }
.sd-feature p strong { color:var(--charcoal); }

.process-mini { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.pm-step { display:flex; align-items:center; gap:12px; }
.pm-num { width:28px; height:28px; border-radius:50%; background:var(--grad-main); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pm-text { font-size:14px; color:var(--gray-dark); }

/* Why cards row */
.why-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-mini { background:var(--gray-light); border:1px solid var(--gray-border); border-radius:var(--radius); padding:28px 20px; text-align:center; transition:all .3s; }
.why-mini:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:rgba(5,150,105,.25); }
.why-mini-icon { font-size:36px; margin-bottom:14px; display:block; }
.why-mini h4 { font-size:14px; font-weight:700; color:var(--charcoal); margin-bottom:6px; }
.why-mini p  { font-size:13px; color:var(--gray-dark); line-height:1.6; }

@media (max-width:1024px) {
  .services-grid { grid-template-columns:1fr 1fr; }
  .why-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .services-grid { grid-template-columns:1fr; }
  .service-detail { grid-template-columns:1fr; gap:32px; }
  .service-detail.reverse .sd-visual { order:0; }
  .why-row { grid-template-columns:1fr 1fr; }
}
