@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.pcard,.stat,.step{position:relative;transition:transform .25s,border-color .3s,box-shadow .3s;background-image:radial-gradient(230px circle at var(--mx,-999px) var(--my,-999px),rgba(255,70,55,.22),transparent 65%)}
.pcard{animation:pcin .7s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes pcin{from{opacity:0;transform:perspective(800px) rotateX(-40deg) translateY(50px) scale(.88)}}
.pcard:hover{border-color:#ff3b3b;box-shadow:0 18px 50px rgba(255,42,42,.28),0 0 0 1px rgba(255,59,59,.5)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.25) 50%,transparent 62%);transform:translateX(-130%);transition:transform .8s}
.pcard:hover::after{transform:translateX(130%)}
.pth{overflow:hidden}.pth img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.pcard:hover .pth img{transform:scale(1.14) rotate(-1deg);filter:saturate(1.25) contrast(1.05)}
.abadge{animation:bdg 2.4s ease-in-out infinite}
@keyframes bdg{50%{box-shadow:0 0 16px rgba(255,42,42,.9)}}
.pprice{text-shadow:0 0 16px rgba(255,42,42,.55);font-variant-numeric:tabular-nums}
.pbtn{position:relative;overflow:hidden;transition:transform .15s,box-shadow .25s}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,42,42,.45)}
.pbtn:active{transform:scale(.95)}
.stat{transition:transform .3s,box-shadow .3s}.stat:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 14px 40px rgba(255,42,42,.3);border-color:#ff3b3b}
.stat b{text-shadow:0 0 22px rgba(255,42,42,.7)}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:37px;top:40px;bottom:40px;width:2px;background:linear-gradient(#ff2a2a,#ff8a7a,transparent);transform-origin:top;transform:scaleY(0);transition:transform 1.4s .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px #ff2a2a}
.steps.on3::before{transform:scaleY(1)}
.step{opacity:0;transform:translateX(-40px)}
.steps.on3 .step{opacity:1;transform:none;transition:opacity .6s calc(var(--k)*.25s),transform .6s calc(var(--k)*.25s),border-color .3s,box-shadow .3s}
.steps.on3 .step:hover{transform:translateX(8px);border-color:#ff3b3b;box-shadow:0 10px 30px rgba(255,42,42,.25)}
.step em{position:relative;z-index:1;animation:emp 2.2s ease-in-out infinite}
@keyframes emp{50%{box-shadow:0 0 0 8px rgba(255,42,42,.18),0 0 22px #ff2a2a}}
.dlbox{position:relative}
.dlbox::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 65%,#ff2a2a 85%,#fff 95%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 3.5s linear infinite}
@keyframes ang{to{--ang:360deg}}
.spec li{opacity:0;transform:translateX(-24px)}
.dlbox.on3 .spec li{opacity:1;transform:none;transition:.6s calc(var(--k)*.18s + .2s)}
.warn{animation:wrn 2.8s ease-in-out infinite}
@keyframes wrn{50%{box-shadow:0 0 26px rgba(255,170,40,.35)}}
.sh-info{transition:opacity .4s}
@media(prefers-reduced-motion:reduce){.pcard,.abadge,.step em,.dlbox::after,.warn{animation:none}.step,.spec li{opacity:1;transform:none}.steps::before{transform:none}}