/* 메인 페이지 전용 — 대부분 components.css 공용 컴포넌트로 처리.
   여기서는 다크 섹션, Roles 칩 좌표 등 메인 고유 패턴만. */

/* By the Numbers (다크 네이비) */
.numbers { background: var(--color-navy-900); color: var(--color-white); }
.numbers .h2, .numbers .section-sub { color: var(--color-white); }
.numbers .section-sub { color: rgba(255, 255, 255, 0.65); }
.numbers__grid { display: flex; flex-direction: column; gap: var(--sp-6); }
.numbers__grid .stat-card--blue:first-child { min-height: 260px; }
@media (min-width: 768px) {
  .numbers__grid--sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

/* Pain Points 카드: 칩 + 일러스트 + 문장 */
.pain-card { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.pain-card__chip { align-self: flex-start; }
.pain-card__illu {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pain-card__illu img, .pain-card__illu svg { width: 100%; height: 100%; object-fit: cover; }
.pain-card__text { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; color: var(--color-ink); white-space: pre-line; }

/* Customer Success 그라디언트 H2 */
.success-title { font-size: var(--fs-h2-xl-m); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-align: center; white-space: pre-line; }
@media (min-width: 768px) { .success-title { font-size: var(--fs-h2-xl); } }

/* Reviews 하단 링크 */
.reviews-more { display: flex; justify-content: center; margin-top: var(--sp-10); }
.reviews-more a { font-size: var(--fs-body-sm); font-weight: 700; color: var(--color-primary-500); }

/* Roles 칩 좌표 (orbit 720x420 기준 %) */
.roles-chip--1 { top: 14%; left: 12%; }
.roles-chip--2 { top: 6%;  right: 16%; }
.roles-chip--3 { top: 46%; left: 2%; }
.roles-chip--4 { top: 52%; right: 4%; }
.roles-chip--5 { bottom: 18%; left: 18%; }
.roles-chip--6 { bottom: 4%; left: 50%; transform: translateX(-50%); }
.roles-orbit__ring--1 { width: 220px; height: 220px; }
.roles-orbit__ring--2 { width: 420px; height: 420px; }
.roles-orbit__ring--3 { width: 620px; height: 620px; }
@media (max-width: 767px) {
  .roles-orbit { height: 340px; max-width: 100%; }
  .roles-orbit__ring--1 { width: 160px; height: 160px; }
  .roles-orbit__ring--2 { width: 300px; height: 300px; }
  .roles-orbit__ring--3 { width: 440px; height: 440px; }
}