.hero { text-align: center; }
.hero h1 { max-width: 1050px; margin: 22px auto 12px; font-size: clamp(2.6rem, 6.2vw, 6.6rem); line-height: .92; }
.hero h1 span { display: inline-block; max-width: 980px; }
.hero > p { margin-left: auto; margin-right: auto; }
.hero .stats { max-width: 1080px; margin-left: auto; margin-right: auto; }

.countries { padding: 72px clamp(20px, 5vw, 72px); background: #f5f2f7; }
.countries-head { align-items: end; }
.country-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.country-grid article { min-height: 174px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 18px 12px; border: 1px solid #ded8e5; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(22, 12, 54, .05); }
.country-grid img { width: 100%; max-width: 118px; height: 96px; object-fit: contain; }
.country-grid strong { font-size: .84rem; text-align: center; }

.mascot { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); align-items: center; min-height: 520px; padding: 50px clamp(24px, 7vw, 100px); background: linear-gradient(125deg, #170d45 0%, #7022c5 55%, #e61591 100%); color: #fff; }
.mascot::after { content: "CAPI"; position: absolute; right: -22px; bottom: -65px; color: rgba(255,255,255,.07); font-size: clamp(9rem, 22vw, 22rem); font-weight: 950; line-height: .8; }
.mascot-visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: 400px; }
.mascot-visual img { position: relative; z-index: 2; display: block; width: min(100%, 410px); max-height: 450px; object-fit: contain; filter: drop-shadow(0 24px 22px rgba(6, 0, 35, .35)); }
.mascot-orbit { position: absolute; width: 330px; height: 330px; border: 3px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.06), 0 0 0 58px rgba(255,255,255,.03); }
.mascot-copy { position: relative; z-index: 2; max-width: 720px; }
.mascot-copy h2 { margin: 12px 0 20px; font-size: clamp(2.5rem, 5vw, 5.8rem); line-height: .92; letter-spacing: -.055em; }
.mascot-copy p { max-width: 660px; font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,.88); }
.mascot-copy .mascot-signoff { margin-top: 20px; color: #ffdf28; font-weight: 900; }

@media (max-width: 850px) {
  .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mascot { grid-template-columns: 1fr; padding-top: 30px; text-align: center; }
  .mascot-visual { min-height: 340px; }
  .mascot-visual img { max-height: 370px; }
  .mascot-copy { margin: 0 auto; }
  .mascot-copy p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 570px) {
  .hero h1 { font-size: clamp(2.35rem, 12vw, 4.2rem); line-height: .94; }
  .hero h1 span { margin-top: 7px; font-size: .7em; line-height: 1; }
  .countries { padding: 50px 14px; }
  .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .country-grid article { min-height: 145px; padding: 13px 8px; }
  .country-grid img { height: 78px; max-width: 100px; }
  .country-grid article:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
  .mascot { padding: 30px 20px 54px; }
  .mascot-visual { min-height: 310px; }
  .mascot-visual img { max-height: 330px; }
  .mascot-orbit { width: 245px; height: 245px; }
  .mascot-copy h2 { font-size: 2.7rem; }
  .mascot-copy p { font-size: 1rem; }
}