/* Jompom Security: dark section, big stat + spring-up bars, four info cards. */
.jp-security{background:var(--ink);color:#fff;padding:110px 0 120px}
.jp-security .se-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-security .se-head p{color:#c9d3da;font-size:17px;max-width:30em}
.jp-security .se-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px}
.jp-security .se-chart{background:var(--ink2);border:3px solid #3a3d40;border-radius:32px;padding:32px;margin:0}
.jp-security .se-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.jp-security .se-big b{font:800 clamp(64px,8vw,110px)/.9 var(--jp-display);color:var(--sun);letter-spacing:-.05em}
.jp-security .se-big > span{font-weight:600;color:#e3eaef;max-width:12em}
.jp-security .se-bars{display:flex;align-items:flex-end;gap:20px;height:290px;padding-top:10px}
.jp-security .se-bars li{--c:var(--blue);flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;text-align:center}
.jp-security .se-bars li:nth-child(3n+2){--c:#fff}
.jp-security .se-bars li:nth-child(3n){--c:var(--sun)}
.jp-security .se-pct{font:800 clamp(28px,3vw,40px)/1 var(--jp-display);margin-bottom:10px}
.jp-security .se-fill{display:block;height:calc(var(--v) * 1.6%);border:3px solid var(--ink);border-radius:18px 18px 8px 8px;box-shadow:6px 6px 0 #000;transform-origin:50% 100%;background:var(--c)}
.jp-security .se-cat{margin-top:14px;min-height:2.6em;line-height:1.3;font-weight:600;font-size:15px;color:#c9d3da}
.js-motion .jp-security .se-bars .se-fill{transform:scaleY(0)}
.js-motion .jp-security .se-bars.go .se-fill{transform:scaleY(1);transition:transform 1.3s var(--spring);transition-delay:calc(var(--i,0) * .15s)}
.jp-security .se-chart figcaption{margin-top:22px;font-size:15px;color:#c9d3da}
.jp-security .se-chart small{display:block;margin-top:8px;color:#8d979e;font-size:13px}
.jp-security .se-perks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.jp-security .se-perk{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:24px;padding:22px;box-shadow:6px 6px 0 var(--blue);display:flex;flex-direction:column;gap:12px;transition:transform .6s var(--spring)}
.jp-security .se-perk:hover{transform:translateY(-5px) rotate(-1.5deg)}
.jp-security .se-perk:hover .ic-box{animation:jp-wiggle .7s var(--out)}
.jp-security .se-perk:nth-child(4n+2){background:var(--sun)}
.jp-security .se-perk:nth-child(4n+3){background:var(--blue)}
.jp-security .se-perk:nth-child(4n+3) .ic-box{background:#fff}
.jp-security .se-perk h3{font-size:21px}
.jp-security .se-perk p{font-size:15px;color:#2b3238}

@media (max-width:980px){
  .jp-security .se-head,.jp-security .se-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .jp-security .se-perks{grid-template-columns:minmax(0,1fr)}
  .jp-security .se-bars{height:240px;gap:12px}
  .jp-security .se-chart{padding:22px}
}