#sonte-usps { background: #eaf2f7; padding: 24px 0 clamp(64px, 6vw, 110px); color: #053146; }
#sonte-usps > div { width: 80vw; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 40px); }
#sonte-usps article { min-width: 0; background: #ffffff; border-radius: 18px; padding: clamp(24px, 2.2vw, 44px); text-align: center; transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease; }
#sonte-usps article.scroll-entering { transition: background-color .28s ease, color .28s ease; }
#sonte-usps svg { display: block; margin: 0 auto 22px; --puro-icon-preview-stroke: 1; transition: transform .28s ease, color .28s ease; transform-origin: center; }
#sonte-usps h3 { text-align: center; font-size: clamp(24px, 1.8vw, 32px); font-weight: 500; line-height: 1.2; color: #53a8db; margin: 0 0 14px; transition: color .28s ease; }
#sonte-usps p { text-align: center; font-size: clamp(18px, 1.2vw, 24px); line-height: 1.5; margin: 0; }
@media (max-width: 1100px) { #sonte-usps > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 600px) { #sonte-usps > div { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 24px; } }
@media (hover: hover) and (pointer: fine) {
  #sonte-usps article:hover { background: #53a8db; color: #ffffff; box-shadow: 0 16px 36px #05314610; }
  #sonte-usps article:not(.scroll-entering):hover { transform: translateY(-8px); }
  #sonte-usps article:hover :is(h3, p, svg) { color: #ffffff; }
  #sonte-usps article:hover svg { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  #sonte-usps article, #sonte-usps svg { transition: none; }
}