/* about-team-salesfision — team + FAQ + CTA sections.
 * These styles previously lived in the about page's carrier block
 * (about-stats-salesfision/style.css, migrated to sf-stats). Re-homed here so
 * the kept about-team block stays styled. Global class names match the markup;
 * reveal-hiding rules are intentionally omitted (no scoped reveal JS here). */

/* shared */
.about-team-section .section-inner,
.team-section .section-inner,
.faq-section .section-inner,
.cta-section .section-inner { max-width: 1200px; margin: 0 auto; padding: 120px 40px; }
.section-title { text-align: center; margin-bottom: 64px; }
.section-title h2 { font-size: 48px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.section-title p { color: #888; font-size: 16px; }
.section-badge { display: inline-block; background: #e63946; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 16px; border-radius: 20px; margin-bottom: 20px; }

/* team */
.team-section { background: #111; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.team-card { flex: 0 1 200px; background: #161616; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 32px 24px; text-align: center; transition: border-color 0.3s, transform 0.3s; }
.team-card:hover { border-color: #e63946; transform: translateY(-4px); }
.team-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; border: 3px solid rgba(230,57,70,0.4); }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.team-card h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.team-card p { font-size: 12px; color: #888; }

/* faq */
.faq-section { background: #0d0d0d; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq-question { width: 100%; background: none; border: none; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; padding: 24px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color 0.2s; }
.faq-question:hover { color: #e63946; }
.faq-icon { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ccc; flex-shrink: 0; transition: transform 0.3s ease, background 0.2s, border-color 0.2s, color 0.2s; }
.faq-question:hover .faq-icon { background: rgba(230,57,70,0.12); border-color: rgba(230,57,70,0.3); color: #e63946; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: #e63946; border-color: #e63946; color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer-inner { padding: 0 0 24px; font-size: 14px; color: #888; line-height: 1.7; }
.faq-item.open .faq-answer { max-height: 300px; }

/* cta */
.cta-section { background: #111; padding: 120px 90px; text-align: center; }
.cta-card { max-width: 1200px; margin: 0 auto; background: #161616; border: 1px solid rgba(230,57,70,0.35); border-radius: 24px; padding: 80px 60px; box-shadow: 0 0 48px rgba(230,57,70,0.12), 0 0 120px rgba(230,57,70,0.06); transition: border-color 0.3s, box-shadow 0.3s; }
.cta-card:hover { border-color: rgba(230,57,70,0.65); box-shadow: 0 0 64px rgba(230,57,70,0.22), 0 0 140px rgba(230,57,70,0.1); }
.cta-section h2 { font-size: 52px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cta-section h2 span { color: #e63946; }
.cta-section p { font-size: 18px; color: #888; margin-bottom: 40px; }