.benefits-section { padding: 20px 20px 60px; text-align: center; background: var(--bg-primary); }
.benefits-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 32px; color: var(--text-primary); margin-bottom: 32px; }
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 600px) { .benefits-grid { grid-template-columns: 1fr; } }

.benefit-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 24px; text-align: left; display: flex; flex-direction: column; }
.benefit-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.benefit-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit-icon svg { width: 24px; height: 24px; }
.student-icon-bg { background: linear-gradient(135deg, rgba(74, 124, 219, 0.15), rgba(74, 124, 219, 0.05)); color: var(--secondary); }
.teacher-icon-bg { background: linear-gradient(135deg, rgba(232, 101, 74, 0.15), rgba(232, 101, 74, 0.05)); color: var(--accent); }
.benefit-role-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; }
.student-title { color: var(--secondary); }
.teacher-title { color: var(--accent); }
.benefit-text { color: var(--text-secondary); font-size: 16px; line-height: 1.6; }

.benefit-link { display: inline-block; margin-top: auto; padding-top: 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--accent); text-decoration: none; transition: color 0.2s, transform 0.2s; }
.benefit-link:hover { color: var(--accent-hover); transform: translateX(4px); }