/* Jompom Features: draggable feature stickers. */
.jp-features{position:relative;background:var(--navy);color:#fff;padding:110px 0 120px;overflow:hidden}
.jp-features::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 15% 20%,rgba(67,186,255,.55),transparent 70%),radial-gradient(40% 50% at 90% 90%,rgba(29,139,202,.9),transparent 70%);pointer-events:none}
.jp-features .ft-head{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-features .ft-head p{color:#d6ecfa;font-size:17px;max-width:30em}
.jp-features .ft-board{position:relative;display:flex;flex-wrap:wrap;gap:16px 14px;justify-content:center;padding:10px 0;margin:0;list-style:none}
.jp-features .sticker{--r:0deg;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:var(--hard);border-radius:18px;padding:13px 20px 13px 14px;font:700 clamp(15px,1.5vw,19px)/1.1 var(--jp-display);transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r));transition:transform .6s var(--spring),box-shadow .3s;user-select:none;cursor:grab;touch-action:pan-y;position:relative}
.jp-features .sticker:hover,.jp-features .sticker:focus-visible{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(calc(var(--r) * -1.6)) scale(1.07);box-shadow:7px 7px 0 var(--ink);z-index:2}
.jp-features .sticker.drag{transition:none;cursor:grabbing;z-index:5;box-shadow:10px 12px 0 var(--ink)}
.jp-features .sticker .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--blue);flex-shrink:0}
.jp-features .sticker .ic svg{width:17px;height:17px}
.jp-features .sticker.opt{background:var(--sky)}
.jp-features .sticker.opt small{font:500 13px Poppins,sans-serif;color:var(--grey)}
.jp-features .sticker:nth-child(5n+2){background:var(--sun)}
.jp-features .sticker:nth-child(5n+2) .ic{background:#fff}
.jp-features .sticker:nth-child(7n+4){background:var(--blue)}
.jp-features .sticker:nth-child(7n+4) .ic{background:var(--ink)}
.jp-features .sticker:nth-child(7n+4) .ic svg{stroke:var(--blue)}
.js-motion .jp-features .ft-board .sticker{scale:0}
.js-motion .jp-features .ft-board.go .sticker{animation:jp-popin .8s var(--spring) both;animation-delay:calc(var(--i) * 55ms)}
.jp-features .ft-hint{position:relative;text-align:center;color:#bfe3fa;font-size:14px;margin-top:26px}

@media (max-width:980px){
  .jp-features .ft-head{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .jp-features .sticker{transition:none}
  .js-motion .jp-features .ft-board .sticker{scale:1}
}