.card { border-radius: var(--card-radius); padding: clamp(24px, 3vw, 36px); transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.card--light { background: var(--c-white); color: var(--c-text-on-light); }
.card--glass { background: var(--c-card-dark); border: 1px solid var(--c-card-dark-border); color: var(--c-text-on-dark); }
.card--glass:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.card--subtle { background: var(--c-card-light); border: 1px solid var(--c-card-light-border); color: var(--c-text-on-light); }
.card__icon { width: 48px; height: 48px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(138,141,147,0.1); }
.card--glass .card__icon { background: rgba(255,255,255,0.06); }
.card__icon svg { width: 24px; height: 24px; stroke: var(--c-steel); stroke-width: 1.5; fill: none; }
.card__label { font-family: var(--font-en); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 8px; }
.card__title { font-size: clamp(16px, 1.6vw, 19px); font-weight: var(--fw-semi); line-height: 1.5; margin-bottom: 12px; }
.card__text { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.8; color: var(--c-text-on-light-sub); }
.card--glass .card__text { color: var(--c-text-on-dark-sub); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }