/* ── Why it works ── */
.why { padding: 5rem 0; border-bottom: 1px solid var(--border); }
.why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.why__headline { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 1.25rem; }
.why__sub { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 2rem; }
.quote-card {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; position: relative;
}
.quote-card::before { content: '"'; font-size: 4rem; color: var(--primary); opacity: 0.15; position: absolute; top: -0.75rem; left: 1rem; font-family: Georgia, serif; line-height: 1; }
.quote-text { font-size: 0.9375rem; color: var(--text); line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.quote-author { display: flex; align-items: center; gap: 0.625rem; }
.quote-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; }
.quote-name { font-size: 0.875rem; font-weight: 600; }
.quote-role { font-size: 0.75rem; color: var(--text-muted); }

.why__items { display: flex; flex-direction: column; gap: 0.875rem; }
.why__item {
  display: flex; gap: 0.875rem; align-items: flex-start;
  padding: 1rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.why__item:hover { border-color: rgba(79,70,229,0.25); box-shadow: 0 2px 10px rgba(79,70,229,0.07); }
.why__item-icon {
  width: 2rem; height: 2rem; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.wi-primary { background: var(--primary-light); }
.wi-success { background: var(--success-light); }
.wi-warning { background: var(--warning-light); }
.wi-purple { background: var(--purple-light); }
.why__item h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.2rem; }
.why__item p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; }