| .features { | |
| padding: 100px 0; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 64px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .section-title { | |
| font-size: clamp(28px, 4vw, 44px); | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| color: var(--text); | |
| max-width: 600px; | |
| } | |
| .section-sub { | |
| font-size: 17px; | |
| color: var(--text-muted); | |
| max-width: 520px; | |
| line-height: 1.7; | |
| } | |
| .features__grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; | |
| cursor: default; | |
| } | |
| .feature-card:hover { | |
| border-color: var(--border-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(249,115,22,0.08); | |
| } | |
| .feature-card__icon { | |
| width: 44px; height: 44px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .feature-card__badge { | |
| display: inline-flex; | |
| align-self: flex-start; | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| border: 1px solid; | |
| } | |
| .feature-card__title { | |
| font-size: 17px; | |
| font-weight: 700; | |
| color: var(--text); | |
| letter-spacing: -0.01em; | |
| } | |
| .feature-card__desc { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| } | |
| @media (max-width: 1024px) { .features__grid { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 640px) { .features__grid { grid-template-columns: 1fr; } } | |