/* Security layers: dark band, outlined numbers, icon cards that lift and wiggle on hover. */
.jp-sec-layers{background:var(--ink);color:#fff;padding:120px 0}
.jp-sec-layers .sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:end;margin-bottom:54px}
.jp-sec-layers .sec-head h2{color:#fff}
.jp-sec-layers .sec-head p{font-size:17px;max-width:32em;color:#c9d3da}
.jp-sec-layers .layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.jp-sec-layers .layer{position:relative;background:var(--ink2);border:3px solid #3a3d40;border-radius:28px;padding:28px 24px 26px;display:flex;flex-direction:column;gap:14px;transition:transform .6s var(--spring),border-color .3s}
.jp-sec-layers .layer:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--blue)}
.jp-sec-layers .layer:hover .ic-box{animation:jp-wiggle .7s var(--out)}
.jp-sec-layers .layer .no{position:absolute;right:20px;top:18px;font:800 52px/1 var(--jp-display);color:transparent;-webkit-text-stroke:2px #8a9096}
.jp-sec-layers .layer:nth-child(4n+2) .ic-box{background:var(--sun)}
.jp-sec-layers .layer:nth-child(4n+3) .ic-box{background:#fff}
.jp-sec-layers .layer:nth-child(4n) .ic-box{background:var(--deep)}
.jp-sec-layers .layer h3{color:#fff;font-size:24px}
.jp-sec-layers .layer p{color:#c9d3da;font-size:15px}
@media (max-width:1020px){
  .jp-sec-layers .sec-head{grid-template-columns:minmax(0,1fr)}
  .jp-sec-layers .layers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .jp-sec-layers .layers{grid-template-columns:minmax(0,1fr)}
}