.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; } }