/* Jompom About: blue dotted band, tilted stat stickers, corner gear. */
.jp-about{position:relative;background:var(--blue);color:var(--ink);padding:110px 0;overflow:hidden}
.jp-about::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(28,29,30,.12) 1.6px,transparent 1.8px);background-size:28px 28px;pointer-events:none}
.jp-about .ab-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.jp-about .ab-kicker{font:700 14px/1.2 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.jp-about .ab-h{margin-bottom:26px}
.jp-about .ab-text{font-size:clamp(17px,1.6vw,20px);max-width:32em;font-weight:500}
.jp-about .ab-toy{position:absolute;right:-30px;bottom:-50px;width:190px;aspect-ratio:1;perspective:700px;pointer-events:none}
.jp-about .ab-stats{position:relative;display:flex;flex-direction:column;gap:22px}
.jp-about .ab-stat{--r:-3deg;align-self:flex-start;background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:20px 28px;transform:rotate(var(--r));transition:transform .6s var(--spring)}
.jp-about .ab-stat:hover{transform:rotate(calc(var(--r) * -1.5)) scale(1.05)}
.jp-about .ab-stat:nth-child(3n+2){--r:3deg;margin-left:16%;background:var(--sun)}
.jp-about .ab-stat:nth-child(3n){--r:-1.5deg;margin-left:5%;background:var(--ink);color:#fff;border-color:var(--ink)}
.jp-about .ab-num{display:block;font:800 clamp(56px,6vw,84px)/1 var(--jp-display);letter-spacing:-.04em}
.jp-about .ab-stat:nth-child(3n) .ab-num{color:var(--blue)}
.jp-about .ab-label{font-weight:600;font-size:16px}

@media (max-width:980px){
  .jp-about .ab-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .jp-about .ab-stat:nth-child(3n+2){margin-left:8%}
  .jp-about .ab-toy{width:120px;right:-20px;bottom:-30px}
}