/* Motion layer for WERTY VPN: selection, price tween, pay and success */
.term{transition:border-color .2s ease,background-color .2s ease,transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .3s ease}
.term:hover{border-color:var(--line2);transform:translateY(-1px)}
.term.on{transform:translateY(-2px);box-shadow:0 12px 32px -14px rgba(200,242,90,.5)}
.term.on:hover{border-color:var(--lime)}
.term.on .radio::after{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.term .price{transition:color .2s ease}
.term.on .price{color:var(--lime)}
.term .badge{animation:badgein .4s cubic-bezier(.3,1.4,.5,1) both}
.dev button{transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .15s ease}
.dev button:hover{border-color:var(--line2)}
.dev button:active{transform:scale(.94)}
.dev button.on{animation:pop2 .35s cubic-bezier(.3,1.6,.5,1)}
.btn{transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.btn:active{transform:scale(.97)}
.btn-p:hover{background:#D6F77A}
.btn svg{transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}

.bump-0{animation:bumpA .5s cubic-bezier(.2,.9,.3,1)}
.bump-1{animation:bumpB .5s cubic-bezier(.2,.9,.3,1)}
@keyframes bumpA{0%{transform:translateY(10px);opacity:.25}60%{transform:translateY(-2px);opacity:1}100%{transform:none}}
@keyframes bumpB{0%{transform:translateY(10px);opacity:.25}60%{transform:translateY(-2px);opacity:1}100%{transform:none}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes pop2{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes badgein{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.dvrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;min-height:44px}
.dv{position:relative;width:30px;height:42px;border-radius:9px;border:2px solid var(--lime);animation:dvin .45s cubic-bezier(.3,1.5,.5,1) both}
.dv::after{content:"";position:absolute;left:50%;bottom:5px;width:8px;height:3px;margin-left:-4px;border-radius:2px;background:var(--lime)}
.dv:nth-child(2){animation-delay:.06s}
.dv:nth-child(3){animation-delay:.12s}
.dv:nth-child(4){animation-delay:.18s}
.dv:nth-child(5){animation-delay:.24s}
.dvinf{font-family:var(--display);font-size:26px;color:var(--lime);margin-left:6px;animation:dvin .45s .3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes dvin{from{transform:translateY(14px) scale(.6);opacity:0}to{transform:none;opacity:1}}

.spin{width:20px;height:20px;border-radius:50%;border:3px solid rgba(10,13,11,.25);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prog{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:14px}
.prog i{display:block;height:100%;width:0;background:var(--lime);animation:fill 1.8s ease-in-out forwards}
@keyframes fill{to{width:100%}}

.burst{position:relative;width:120px;height:120px;display:grid;place-items:center}
.burst .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ring .9s ease-out forwards}
@keyframes ring{from{transform:scale(.4);opacity:.9}to{transform:scale(1.55);opacity:0}}
.burst .disc{width:84px;height:84px;border-radius:50%;background:var(--limebg);border:2px solid var(--lime);display:grid;place-items:center;color:var(--lime);animation:disc .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes disc{from{transform:scale(0)}to{transform:scale(1)}}
.burst .chk{stroke-dasharray:32;stroke-dashoffset:32;animation:draw .5s .3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pts{position:absolute;inset:0;pointer-events:none}
.pt{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--lime);animation:fly .95s .15s cubic-bezier(.2,.8,.2,1) both}
.pt:nth-child(even){background:var(--text);width:6px;height:6px;margin:-3px 0 0 -3px}
.pt:nth-child(1){--a:0deg}
.pt:nth-child(2){--a:30deg}
.pt:nth-child(3){--a:60deg}
.pt:nth-child(4){--a:90deg}
.pt:nth-child(5){--a:120deg}
.pt:nth-child(6){--a:150deg}
.pt:nth-child(7){--a:180deg}
.pt:nth-child(8){--a:210deg}
.pt:nth-child(9){--a:240deg}
.pt:nth-child(10){--a:270deg}
.pt:nth-child(11){--a:300deg}
.pt:nth-child(12){--a:330deg}
@keyframes fly{0%{transform:rotate(var(--a)) translateY(-42px) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-112px) scale(.3);opacity:0}}
.rise{animation:rise .6s .5s cubic-bezier(.2,.9,.3,1) both}
.rise2{animation-delay:.7s}
.rise3{animation-delay:.9s}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.fadein{animation:fadein .35s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
}

/* payment method + consent */
.pm{transition:border-color .2s ease,background-color .2s ease,transform .25s cubic-bezier(.3,1.4,.5,1)}
.pm:hover{transform:translateY(-1px)}
.pm.on{animation:pop2 .35s cubic-bezier(.3,1.6,.5,1)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:14px;line-height:1.5}
.cbx{flex:none;width:22px;height:22px;margin-top:1px;padding:0;border-radius:6px;border:2px solid var(--line2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .15s ease}
.cbx:active{transform:scale(.9)}
.cbx svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .25s ease .05s}
.cbx.on{background:var(--lime);border-color:var(--lime);animation:pop2 .3s cubic-bezier(.3,1.6,.5,1)}
.cbx.on svg path{stroke-dashoffset:0}

/* payment methods: stagger-in, selected glow, shine, check badge, icon bounce */
.pay .pm{position:relative;overflow:hidden;animation:pmin .5s cubic-bezier(.2,.9,.3,1) both}
.pay .pm:nth-child(2){animation-delay:.07s}
.pay .pm:nth-child(3){animation-delay:.14s}
.pay .pm:nth-child(4){animation-delay:.21s}
@keyframes pmin{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.pm .ic{transition:transform .25s cubic-bezier(.3,1.6,.5,1),background-color .2s ease,color .2s ease}
.pm:hover .ic{transform:rotate(-6deg) scale(1.06)}
.pm.on{box-shadow:0 14px 34px -16px rgba(200,242,90,.55),0 0 0 1px var(--lime)}
.pm.on .ic{animation:icpop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes icpop{0%{transform:scale(.7) rotate(-18deg)}60%{transform:scale(1.18) rotate(6deg)}100%{transform:none}}
.pm.on::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(200,242,90,.22),transparent);transform:skewX(-18deg);animation:shine .8s .05s ease-out forwards;pointer-events:none}
@keyframes shine{to{left:130%}}
.pm.on::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;line-height:20px;text-align:center;animation:pop .4s .1s cubic-bezier(.3,1.7,.5,1) both}
.pm .badge{animation:badgepulse 2.2s ease-in-out infinite}
@keyframes badgepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.info-0{animation:infoA .45s ease both}
.info-1{animation:infoB .45s ease both}
@keyframes infoA{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes infoB{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.devn button{transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .15s ease}
.devn button:hover{border-color:var(--line2)}
.devn button:active{transform:scale(.94)}
.devn button.on{animation:pop2 .35s cubic-bezier(.3,1.6,.5,1)}
@media (min-width:900px){.devn{grid-template-columns:repeat(10,1fr)}}

/* device icons by type */
.dvx{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;color:var(--lime);animation:dvin .45s cubic-bezier(.3,1.5,.5,1) both}
.dvx small{font-size:12px;color:var(--muted)}
.dvx:nth-child(2){animation-delay:.06s}.dvx:nth-child(3){animation-delay:.12s}.dvx:nth-child(4){animation-delay:.18s}.dvx:nth-child(5){animation-delay:.24s}.dvx:nth-child(6){animation-delay:.3s}.dvx:nth-child(7){animation-delay:.36s}.dvx:nth-child(8){animation-delay:.42s}.dvx:nth-child(9){animation-delay:.48s}
.dvrow{min-height:76px}
.dvx{width:48px}.dvrow{min-height:56px}

/* cabinet concept */
.ktabs{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.ktab{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:15px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .15s ease}
.ktab:hover{border-color:var(--line2);color:var(--text)}
.ktab:active{transform:scale(.96)}
.ktab.on{border-color:rgba(200,242,90,.45);background:var(--limebg);color:var(--text)}
.kdot{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.kdot.off{background:var(--amber)}
.hero{display:flex;align-items:center;gap:32px;margin-top:20px;flex-wrap:wrap;overflow:hidden;position:relative}
.hero-0{animation:heroA .5s cubic-bezier(.2,.9,.3,1)}
.hero-1{animation:heroB .5s cubic-bezier(.2,.9,.3,1)}
@keyframes heroA{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes heroB{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
.kring{position:relative;width:176px;height:176px;flex:none}
.ringfg{transition:stroke-dashoffset .8s cubic-bezier(.2,.9,.3,1),stroke .3s ease;animation:ringin 1.1s cubic-bezier(.2,.9,.3,1) both}
.ringfg.off{stroke:var(--amber)}
@keyframes ringin{from{stroke-dashoffset:276.5}}
.rnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rnum b{font-family:var(--display);font-weight:700;font-size:34px;line-height:1}
.rnum span{color:var(--muted);font-size:13px;margin-top:4px}
.hinfo{flex:1 1 320px;min-width:0}
.hinfo .actions{margin-top:20px}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,242,90,.45)}50%{box-shadow:0 0 0 10px rgba(200,242,90,0)}}
.addp{margin-top:20px}
.stepper{display:flex;align-items:center;gap:14px;margin-top:16px}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--text);font:inherit;font-size:22px;cursor:pointer;transition:transform .15s ease,border-color .2s ease}
.stepper button:hover{border-color:var(--lime)}
.stepper button:active{transform:scale(.9)}
.stepper b{min-width:36px;text-align:center;font-family:var(--display);font-size:28px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:20px}
.slot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;border-radius:14px;border:1px solid var(--line);text-align:center;animation:dvin .45s cubic-bezier(.3,1.5,.5,1) both;transition:transform .2s ease,border-color .2s ease}
.slot:nth-child(2){animation-delay:.07s}.slot:nth-child(3){animation-delay:.14s}.slot:nth-child(4){animation-delay:.21s}
.slot.full{color:var(--lime);border-color:rgba(200,242,90,.35);background:var(--limebg)}
.slot.full:hover{transform:translateY(-2px)}
.slot.free{border-style:dashed;border-color:var(--line2);color:var(--muted)}
.slot.lock{opacity:.5}
.sico{position:relative;display:grid;place-items:center;height:30px}
.sico .plus{font-size:28px;line-height:1}
.sname{color:var(--text);font-size:14px}
.slot.free .sname{color:var(--muted)}

/* cabinet sections */
.flow{list-style:none;margin:18px 0 0;padding:0}
.flow li{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
.flow li:last-child{border:0}
.flow li:nth-child(2){animation-delay:.1s}.flow li:nth-child(3){animation-delay:.2s}
.flow i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--limebg);color:var(--lime);display:grid;place-items:center;font-family:var(--mono);font-size:13px;flex:none}
.flow b{display:block;font-weight:600}
.flow span{color:var(--muted);font-size:15px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.arow:last-of-type{border:0}
.aname{display:flex;align-items:center;gap:14px;font-weight:500}
.arow .btn{height:40px;font-size:14px;transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.arow .btn.bound{border-color:rgba(200,242,90,.45);color:var(--lime);animation:pop2 .35s cubic-bezier(.3,1.6,.5,1)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chip{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:15px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .15s ease}
.chip:hover{border-color:var(--line2);color:var(--text)}
.chip:active{transform:scale(.95)}
.chip.on{border-color:rgba(200,242,90,.45);background:var(--limebg);color:var(--text);animation:pop2 .3s cubic-bezier(.3,1.6,.5,1)}
.area{height:130px;padding:14px 16px;resize:vertical}
.ring2{position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ring .9s ease-out forwards}