.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step-item{background:#fff;border-radius:18px;padding:30px 26px 28px;border:1px solid rgba(26,92,68,.08);box-shadow:0 4px 18px rgba(15,58,44,.04);transition:all .35s ease;position:relative}
.step-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,58,44,.12);border-color:var(--primary-light)}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step-no{font-size:46px;font-weight:900;color:var(--primary-light);font-family:Arial,Helvetica,sans-serif;line-height:1;opacity:.75}
.step-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--primary-light),var(--primary));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px rgba(26,92,68,.22)}
.step-item h3{font-size:20px;color:var(--dark);font-weight:700;margin-bottom:10px}
.step-item p{font-size:14px;color:var(--text-muted);line-height:1.85;margin:0}

.after-sale{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.after-media{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 56px rgba(15,58,44,.2)}
.after-media img{width:100%;height:100%;object-fit:cover;display:block}
.after-text h2{font-size:30px;color:var(--dark);font-weight:700;margin:10px 0 8px}
.after-sub{color:var(--primary-dark);font-size:16px;font-weight:600;margin-bottom:24px}
.after-list{list-style:none;padding:0;margin:0 0 10px}
.after-list li{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:18px 0;border-bottom:1px dashed #dfe9e3}
.after-list li:last-child{border-bottom:0}
.after-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#f4faf6,#eaf7ee);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.after-list h4{font-size:16px;color:var(--dark);font-weight:700;margin:0 0 6px}
.after-list p{font-size:14px;color:var(--text-muted);line-height:1.8;margin:0}

@media(max-width:1199px){
  .step-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .step-grid{grid-template-columns:1fr;gap:18px}
  .step-item{padding:24px 20px}
  .step-no{font-size:36px}
  .step-icon{width:48px;height:48px}
  .after-sale{grid-template-columns:1fr;gap:32px}
  .after-text h2{font-size:22px}
  .after-list li{grid-template-columns:44px 1fr;gap:14px;padding:14px 0}
  .after-ico{width:42px;height:42px;border-radius:12px}
}