.features { padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }

.features-grid { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.features-grid li { padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid rgba(10, 10, 10, .07); display: flex; flex-direction: column; gap: 12px; color: var(--brand); transition: transform .2s, box-shadow .2s, border-color .2s; }
.features-grid li:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(10, 10, 10, .25); border-color: rgba(10, 10, 10, .12); }
.features-grid .ico { width: 28px; height: 28px; }
.features-grid h3 { margin-top: 8px; font: 600 20px/1.25 var(--sans); letter-spacing: -.3px; color: var(--title); }
.features-grid p { font: 400 15px/1.6 var(--sans); color: var(--text-2); }

@media (max-width: 479px) {
  .features { padding-top: 48px; padding-bottom: 72px; }
}