/* ===== Live layer: motion + interaction (all disabled for prefers-reduced-motion) ===== */

/* scroll progress under the header */
.top{position:fixed}
.sprog{position:absolute;inset-inline:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.sprog i{display:block;height:100%;width:100%;transform-origin:100% 50%;transform:scaleX(0);background:linear-gradient(270deg,var(--blue),var(--blue-2),var(--gold-2))}

/* headline: rotating word with shimmer */
h1 em{display:inline-block;background:linear-gradient(90deg,#FFD66E,#FFF4CF,#FFD66E);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gshift 4.5s linear infinite}
@keyframes gshift{to{background-position:-200% 0}}
h1 em .rw{display:inline-block;transition:opacity .35s ease,transform .35s ease}
h1 em .rw.out{opacity:0;transform:translateX(.3em)}
h1 em .rw.in{opacity:0;transform:translateX(-.3em)}

/* hero glow follows the pointer */
.hero::before{transition:transform .6s ease-out;transform:translate(calc(var(--hx,0) * 40px),calc(var(--hy,0) * 24px))}

/* live schedule rows in the hero app window */
.app .li{transition:background .4s,border-color .4s}
.app .li .chip{transition:color .3s,border-color .3s,background .3s}
.app .li .st{transition:background .3s,border-color .3s}
.app .li.flash{background:rgba(59,142,234,.1)}
.app .li.shake{animation:shk .5s ease}
@keyframes shk{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.app .li.new{animation:rowIn .5s ease}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}}
.app .li .chip.ok{color:var(--ok);border-color:rgba(70,194,142,.4)}
.app .li .chip.go{color:var(--warn);border-color:rgba(233,180,76,.45)}

/* cards: pointer spotlight + lift */
.card,.role,.pbox,.price-card,.form{position:relative}
.card::before,.role::before,.pbox::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(109,184,255,.13),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before,.role:hover::before,.pbox:hover::before{opacity:1}
.card,.role,.pbox{transition:border-color .2s,translate .3s ease}
.card:hover,.role:hover,.pbox:hover{translate:0 -4px;border-color:rgba(109,184,255,.32)}
.role .av{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.role:hover .av{transform:scale(1.12) rotate(-6deg)}

/* buttons: sheen + magnetic */
.btn{transition:background .2s,border-color .2s,translate .2s ease}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;inset-block:0;width:40%;inset-inline-start:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:inset-inline-start .6s ease}
.btn-gold:hover::after{inset-inline-start:130%}

/* bento mini-UIs come alive when on screen */
.stages span{transition:all .4s ease}
.stages .now{animation:nowPulse 1.6s ease-in-out infinite}
@keyframes nowPulse{50%{box-shadow:0 0 0 5px rgba(233,180,76,.12)}}
.live .slot.x{animation:slotShake 3.6s ease-in-out infinite}
@keyframes slotShake{0%,80%,100%{transform:none;box-shadow:none}84%{transform:translateX(-5px)}88%{transform:translateX(5px);box-shadow:0 0 0 4px rgba(229,112,92,.14)}92%{transform:translateX(-3px)}96%{transform:none}}
.tbl span{transition:color .3s}
.tbl span.tick{color:var(--blue-2);animation:tickPop .5s ease}
@keyframes tickPop{40%{transform:scale(1.35)}}
.live .page i{transform-origin:100% 50%;animation:lineIn 4.5s ease-in-out infinite}
.live .page i:nth-child(1){animation-delay:0s}.live .page i:nth-child(2){animation-delay:.25s}.live .page i:nth-child(3){animation-delay:.5s}.live .page i:nth-child(4){animation-delay:.75s}.live .page i:nth-child(5){animation-delay:1s}
@keyframes lineIn{0%{transform:scaleX(0);opacity:.2}18%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:.2}}
.live .wbadge{animation:wbPulse 2.4s ease-in-out infinite}
@keyframes wbPulse{50%{box-shadow:0 0 0 7px rgba(43,87,154,.25)}}
.live .ev{opacity:0;animation:evIn 7s ease-in-out infinite}
.live .ev:nth-child(1){animation-delay:0s}.live .ev:nth-child(2){animation-delay:1s}.live .ev:nth-child(3){animation-delay:2s}
@keyframes evIn{0%{opacity:0;transform:translateY(8px)}10%,82%{opacity:1;transform:none}94%,100%{opacity:0}}
.live .note-card{animation:ncFloat 5s ease-in-out infinite}
.live .note-card:nth-child(2){animation-delay:-1.6s}.live .note-card:nth-child(3){animation-delay:-3.2s}
@keyframes ncFloat{50%{transform:translateY(-4px)}}
.search kbd{animation:kbd 2.4s ease-in-out infinite}
@keyframes kbd{50%{border-color:var(--blue-2);color:var(--blue-2)}}

/* price card glow + live count */
.price-card{animation:priceGlow 5s ease-in-out infinite}
@keyframes priceGlow{50%{box-shadow:0 0 150px -40px rgba(59,142,234,.65)}}
.amount b{font-variant-numeric:tabular-nums}

/* section heads slide in a touch more */
.sec-head.rv .tag{transition:transform .6s ease .1s}
.sec-head.rv:not(.in) .tag{transform:translateX(14px)}

/* journey nodes pulse after being lit */
.flow.play .step .nd{animation-iteration-count:infinite}

@media (prefers-reduced-motion:reduce){
  .sprog,h1 em,.price-card,.stages .now,.live *{animation:none!important}
  .card:hover,.role:hover,.pbox:hover{translate:none}
}


/* hero headline on one line (wide screens) */
@media (min-width:760px){
  .hero h1{max-width:none;white-space:nowrap;text-wrap:nowrap;font-size:clamp(30px,4vw,52px)}
}


/* before/after v9: Sepehr card pattern, alive — no strike-through; the status line flips "قبل" -> "حالا" */
.trio4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trio4>div{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%),var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px 26px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.trio4>div::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(109,184,255,.7),transparent);opacity:.5;transition:opacity .25s}
.trio4>div::after{content:"";position:absolute;top:0;right:-40%;width:40%;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0}
.trio4>div.play::after{animation:sweep 5s ease-in-out infinite;animation-delay:calc(var(--d)*.7s)}
@keyframes sweep{0%{right:-40%;opacity:0}10%{opacity:.9}45%{right:100%;opacity:0}100%{right:100%;opacity:0}}
.trio4>div:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(59,142,234,.55)}
.trio4>div:hover::before{opacity:1}
.trio4 .fig{position:absolute;top:14px;left:20px;font-size:48px;font-weight:800;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(180deg,rgba(109,184,255,.5),rgba(109,184,255,0) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;pointer-events:none;user-select:none;opacity:.9}
.trio4 .ico{position:relative;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;color:var(--blue-2);background:radial-gradient(circle at 30% 20%,rgba(109,184,255,.22),rgba(59,142,234,.06));border:1px solid rgba(109,184,255,.28);box-shadow:0 8px 24px -10px rgba(59,142,234,.55)}
.trio4 .ico::after{content:"";position:absolute;inset:-1px;border-radius:15px;border:1px solid rgba(109,184,255,.5);opacity:0}
.trio4>div.play .ico::after{animation:ring 3.2s ease-out infinite;animation-delay:calc(var(--d)*.5s)}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.trio4 .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.trio4 h3{font-size:18px;font-weight:800;line-height:1.6}
.trio4 p{margin:8px 0 18px;color:var(--muted);font-size:14.5px;line-height:1.95}
/* icon life, per card (two-tone: blue stroke + gold accent) */
.trio4 .ico svg{width:34px;height:34px}
.trio4 .ico .g{stroke:var(--gold-2)}
.trio4 .ico .gf{fill:rgba(242,181,49,.16);stroke:var(--gold-2)}
.trio4>div.play .i1 .mg{transform-origin:19.5px 19.5px;animation:mgl 4s ease-in-out infinite}
@keyframes mgl{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(-9px,-7px) scale(1.08)}60%{transform:translate(-4px,-3px) scale(1)}}
.trio4>div.play .i2 .hm,.trio4>div.play .i2 .hh{transform-origin:13px 13px;animation:spn 6s linear infinite}
.trio4>div.play .i2 .hh{animation-duration:36s}
@keyframes spn{to{transform:rotate(360deg)}}
.trio4>div.play .i2 .bd{transform-box:fill-box;transform-origin:center;animation:pop 3.6s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes pop{0%,8%{transform:scale(0)}22%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
.trio4>div.play .i3 .br{transform-box:fill-box;transform-origin:bottom;animation:grw 3.6s ease-in-out infinite}
.trio4>div.play .i3 .b2{animation-delay:.2s}.trio4>div.play .i3 .b3{animation-delay:.4s}
@keyframes grw{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.trio4>div.play .i3 .tr{stroke-dasharray:40;animation:trd 3.6s ease-in-out infinite}
@keyframes trd{0%{stroke-dashoffset:40}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.trio4>div.play .i4 .bell{transform-origin:14px 3px;animation:bellr 3.6s ease-in-out infinite}
@keyframes bellr{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(14deg)}66%{transform:rotate(-12deg)}72%{transform:rotate(8deg)}78%{transform:rotate(-5deg)}84%{transform:rotate(0)}}
.trio4>div.play .i4 .dot{transform-box:fill-box;transform-origin:center;animation:dotp 1.8s ease-in-out infinite}
@keyframes dotp{50%{transform:scale(1.35)}}
.trio4>div.play .i4 .w{opacity:0;animation:wv 3.6s ease-in-out infinite}
.trio4>div.play .i4 .w2{animation-delay:.1s}
@keyframes wv{0%,52%{opacity:0}62%,80%{opacity:1}92%,100%{opacity:0}}
/* status line: flips between the old pain and the new state */
.swp{position:relative;margin-top:auto;height:44px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;overflow:hidden}
.swp span{position:absolute;inset-inline:0;top:14px;display:flex;align-items:center;gap:10px;color:var(--muted);opacity:0}
.swp i{font-style:normal;font-size:11px;font-weight:800;border-radius:99px;padding:2px 10px;flex:none}
.swp .bef i{color:#ff9a9a;background:rgba(240,90,90,.12);border:1px solid rgba(240,90,90,.3)}
.swp .aft i{color:var(--ok);background:rgba(61,214,140,.12);border:1px solid rgba(61,214,140,.35)}
.swp .aft{color:var(--text)}
.swp .bef{opacity:1}
.trio4>div.play .bef{animation:flipA 6s ease-in-out infinite;animation-delay:calc(var(--d)*.4s)}
.trio4>div.play .aft{animation:flipB 6s ease-in-out infinite;animation-delay:calc(var(--d)*.4s)}
@keyframes flipA{0%,38%{opacity:1;transform:none}46%,92%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}
@keyframes flipB{0%,38%{opacity:0;transform:translateY(14px)}46%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}
@media (max-width:1100px){.trio4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trio4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.trio4 *{animation:none!important}.swp{height:auto}.swp span{position:static;opacity:1;margin-bottom:6px}}
/* numbers: each card gets its own colour, stronger and larger */
.trio4>div:nth-child(1){--tc:109,184,255}
.trio4>div:nth-child(2){--tc:242,181,49}
.trio4>div:nth-child(3){--tc:61,214,140}
.trio4>div:nth-child(4){--tc:167,139,250}
.trio4 .fig{font-size:58px;opacity:1;background:linear-gradient(180deg,rgba(var(--tc),.95),rgba(var(--tc),.12) 90%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 14px rgba(var(--tc),.35))}
.trio4>div:hover .fig{filter:drop-shadow(0 4px 18px rgba(var(--tc),.6))}
.trio4>div:nth-child(n) .ico{color:rgb(var(--tc));border-color:rgba(var(--tc),.35);background:radial-gradient(circle at 30% 20%,rgba(var(--tc),.22),rgba(var(--tc),.05));box-shadow:0 8px 24px -10px rgba(var(--tc),.6)}
.trio4>div:nth-child(2) .ico .g,.trio4>div:nth-child(2) .ico .gf{stroke:#fff}

/* ===== colour palette layer: each section / card gets its own accent from one shared set ===== */
:root{--p-blue:109,184,255;--p-gold:242,181,49;--p-green:61,214,140;--p-violet:167,139,250;--p-coral:255,126,106}
/* section accents (tag pill + heading bar) */
#why{--tc:var(--p-gold)}#journey{--tc:var(--p-blue)}#roles{--tc:var(--p-violet)}#pricing{--tc:var(--p-gold)}#how{--tc:var(--p-green)}#faq{--tc:var(--p-blue)}#order{--tc:var(--p-coral)}
.sec-head .tag{color:rgb(var(--tc,var(--p-blue)));border-color:rgba(var(--tc,var(--p-blue)),.4);background:rgba(var(--tc,var(--p-blue)),.08)}
.sec-head h2::after{content:"";display:block;width:44px;height:3px;margin:16px 0 0;border-radius:3px;background:linear-gradient(90deg,rgb(var(--tc,var(--p-blue))),rgba(var(--tc,var(--p-blue)),.15))}
/* ambient colour behind sections */
#journey,#roles,#how,#order{position:relative;isolation:isolate}
#journey::before,#roles::before,#how::before,#order::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
#journey::before{background:radial-gradient(60% 50% at 15% 30%,rgba(var(--p-blue),.08),transparent 70%),radial-gradient(45% 45% at 90% 80%,rgba(var(--p-violet),.07),transparent 70%)}
#roles::before{background:radial-gradient(55% 55% at 85% 20%,rgba(var(--p-violet),.09),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(var(--p-blue),.06),transparent 70%)}
#how::before{background:radial-gradient(55% 55% at 20% 40%,rgba(var(--p-green),.08),transparent 70%),radial-gradient(40% 40% at 90% 90%,rgba(var(--p-gold),.06),transparent 70%)}
#order::before{background:radial-gradient(55% 60% at 80% 30%,rgba(var(--p-gold),.09),transparent 70%),radial-gradient(45% 50% at 10% 80%,rgba(var(--p-coral),.07),transparent 70%)}
/* journey: every step has its own colour */
.steps .step:nth-child(1){--tc:var(--p-blue)}.steps .step:nth-child(2){--tc:var(--p-violet)}.steps .step:nth-child(3){--tc:var(--p-gold)}.steps .step:nth-child(4){--tc:var(--p-coral)}.steps .step:nth-child(5){--tc:var(--p-green)}.steps .step:nth-child(6){--tc:var(--p-blue)}
.flow.play .nd{animation-name:ndOnC}
@keyframes ndOnC{0%,3%{border-color:var(--line-2);background:var(--bg-1);box-shadow:none}8%,60%{border-color:rgb(var(--tc));background:rgb(var(--tc));box-shadow:0 0 0 6px rgba(var(--tc),.18)}72%,100%{border-color:var(--line-2);background:var(--bg-1);box-shadow:none}}
.steps .step h3{color:rgb(var(--tc));filter:brightness(1.15)}
/* roles */
.roles .role{position:relative;overflow:hidden}
.roles .role::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--tc)),transparent);opacity:.7}
.roles .role:nth-child(1){--tc:var(--p-blue)}.roles .role:nth-child(2){--tc:var(--p-gold)}.roles .role:nth-child(3){--tc:var(--p-green)}.roles .role:nth-child(4){--tc:var(--p-violet)}
.roles .role .av{background:rgba(var(--tc),.14);color:rgb(var(--tc));border-color:rgba(var(--tc),.4)}
.roles .role:hover{border-color:rgba(var(--tc),.5)}
/* how to buy */
.buy .card{position:relative;overflow:hidden}
.buy .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--tc)),transparent);opacity:.7}
.buy .card:nth-child(1){--tc:var(--p-blue)}.buy .card:nth-child(2){--tc:var(--p-gold)}.buy .card:nth-child(3){--tc:var(--p-green)}.buy .card:nth-child(4){--tc:var(--p-violet)}
.buy .n{color:rgb(var(--tc));border-color:rgba(var(--tc),.5);background:rgba(var(--tc),.12)}
.buy .card:hover{border-color:rgba(var(--tc),.5)}
/* strip dots */
.strip li:nth-child(5n+1)::before{background:rgb(var(--p-blue))}.strip li:nth-child(5n+2)::before{background:rgb(var(--p-gold))}.strip li:nth-child(5n+3)::before{background:rgb(var(--p-green))}.strip li:nth-child(5n+4)::before{background:rgb(var(--p-violet))}.strip li:nth-child(5n)::before{background:rgb(var(--p-coral))}
.track li:nth-child(5n+1)::before{background:rgb(var(--p-blue))}.track li:nth-child(5n+2)::before{background:rgb(var(--p-gold))}.track li:nth-child(5n+3)::before{background:rgb(var(--p-green))}.track li:nth-child(5n+4)::before{background:rgb(var(--p-violet))}.track li:nth-child(5n)::before{background:rgb(var(--p-coral))}
/* FAQ: coloured marker per question */
#faq details:nth-of-type(5n+1){--tc:var(--p-blue)}#faq details:nth-of-type(5n+2){--tc:var(--p-gold)}#faq details:nth-of-type(5n+3){--tc:var(--p-green)}#faq details:nth-of-type(5n+4){--tc:var(--p-violet)}#faq details:nth-of-type(5n){--tc:var(--p-coral)}
#faq details summary::after{color:rgb(var(--tc))}
#faq details[open]{border-color:rgba(var(--tc),.45);box-shadow:inset 3px 0 0 rgb(var(--tc))}
/* pricing: warm gold/blue glow behind the card, coloured feature ticks */
.pricing{position:relative;isolation:isolate}
.pricing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 55% at 50% 40%,rgba(var(--p-gold),.1),transparent 70%),radial-gradient(40% 40% at 15% 80%,rgba(var(--p-blue),.08),transparent 70%)}
.price-card li svg,.ticks li svg{color:rgb(var(--p-green))}
/* hero: faint coloured halo */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(45% 45% at 80% 20%,rgba(var(--p-violet),.1),transparent 70%),radial-gradient(40% 45% at 15% 70%,rgba(var(--p-blue),.1),transparent 70%)}
/* inner pages: cards / feature icons cycle through the palette */
.bento .card:nth-child(5n+1) .ico{--tc:var(--p-gold)}.bento .card:nth-child(5n+2) .ico{--tc:var(--p-blue)}.bento .card:nth-child(5n+3) .ico{--tc:var(--p-green)}.bento .card:nth-child(5n+4) .ico{--tc:var(--p-violet)}.bento .card:nth-child(5n) .ico{--tc:var(--p-coral)}
.bento .card .ico{color:rgb(var(--tc,var(--p-gold)));background:rgba(var(--tc,var(--p-gold)),.13);border-color:rgba(var(--tc,var(--p-gold)),.35)}
.seeall{margin-top:32px}
.tag{color:rgb(var(--tc,var(--p-blue)));border-color:rgba(var(--tc,var(--p-blue)),.4);background:rgba(var(--tc,var(--p-blue)),.08)}
#journey::before,#roles::before,#how::before,#order::before,.pricing::before{-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}

/* ===== make the remaining sections alive ===== */
.sec-head h2::after{width:0;transition:width .9s cubic-bezier(.4,0,.2,1) .25s}
.sec-head.in h2::after{width:44px}
.tag{position:relative;overflow:hidden}
.tag::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:tagShine 6s ease-in-out infinite}
@keyframes tagShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.top{transition:height .3s ease,background .3s ease,box-shadow .3s ease}
.top.scrolled{height:56px;background:rgba(8,9,12,.88);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
/* roles */
.roles .role .av{position:relative}
.roles .role .av::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(var(--tc),.6);opacity:0;animation:avRing 3.4s ease-out infinite}
.roles .role:nth-child(2) .av::after{animation-delay:.5s}
.roles .role:nth-child(3) .av::after{animation-delay:1s}
.roles .role:nth-child(4) .av::after{animation-delay:1.5s}
@keyframes avRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.role .lvl{display:block;margin-top:16px}
.role .lvl small{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint,#7b8190);margin-bottom:6px}
.role .lvl i{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.role .lvl i::after{content:"";display:block;height:100%;width:0;margin-inline-start:auto;border-radius:5px;background:linear-gradient(270deg,rgb(var(--tc)),rgba(var(--tc),.35));transition:width 1.4s cubic-bezier(.3,.9,.3,1) .3s}
.roles.play .role .lvl i::after{width:var(--w)}
/* how to buy */
.buy .card{transition:border-color .4s,box-shadow .4s,transform .4s}
.buy.play .card{animation:buyGlow 9s ease-in-out infinite}
.buy.play .card:nth-child(2){animation-delay:1.8s}
.buy.play .card:nth-child(3){animation-delay:3.6s}
.buy.play .card:nth-child(4){animation-delay:5.4s}
@keyframes buyGlow{0%,4%{border-color:var(--line);box-shadow:none;transform:none}10%,24%{border-color:rgba(var(--tc),.7);box-shadow:0 18px 40px -22px rgba(var(--tc),.7);transform:translateY(-5px)}34%,100%{border-color:var(--line);box-shadow:none;transform:none}}
.buy.play .card .n{animation:buyN 9s ease-in-out infinite}
.buy.play .card:nth-child(2) .n{animation-delay:1.8s}
.buy.play .card:nth-child(3) .n{animation-delay:3.6s}
.buy.play .card:nth-child(4) .n{animation-delay:5.4s}
@keyframes buyN{0%,4%{background:rgba(var(--tc),.12);color:rgb(var(--tc));transform:none}10%,24%{background:rgb(var(--tc));color:#0a0c10;transform:scale(1.15)}34%,100%{background:rgba(var(--tc),.12);color:rgb(var(--tc));transform:none}}
/* pricing */
.price-card.play .inc li{animation:incIn .6s cubic-bezier(.3,1.2,.4,1) both}
.price-card.play .inc li:nth-child(2){animation-delay:.12s}
.price-card.play .inc li:nth-child(3){animation-delay:.24s}
.price-card.play .inc li:nth-child(4){animation-delay:.36s}
.price-card.play .inc li:nth-child(5){animation-delay:.48s}
@keyframes incIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.price-card .ribbon{overflow:hidden}
.price-card .ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:tagShine 5s ease-in-out infinite}
.price-card .amount b{background:linear-gradient(90deg,#fff,var(--gold-2),#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gshift 5s linear infinite}
.price-card{animation:cardGlow 6s ease-in-out infinite}
@keyframes cardGlow{50%{box-shadow:0 30px 80px -40px rgba(var(--p-gold),.45)}}
.price-card .btn-gold{position:relative;overflow:hidden}
.price-card .btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%);animation:tagShine 4.5s ease-in-out infinite}
.pbox{transition:transform .3s,border-color .3s}
.pbox:hover{transform:translateX(-4px);border-color:rgba(var(--p-gold),.4)}
/* FAQ */
#faq details[open] p{animation:faqIn .45s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#faq details summary{transition:padding .3s,color .3s}
#faq details summary:hover{padding-inline-start:6px}
#faq details[open] summary::after{transform:rotate(45deg)}
/* order */
.order input:focus,.order select:focus,.order textarea:focus{box-shadow:0 0 0 4px rgba(var(--p-coral),.16);border-color:rgba(var(--p-coral),.8)}
.order form .btn{position:relative;overflow:hidden}
.order form .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:tagShine 5s ease-in-out infinite}
/* footer */
footer img[src*="logo"]{animation:logoPulse 4s ease-in-out infinite}
@keyframes logoPulse{50%{filter:drop-shadow(0 0 10px rgba(var(--p-blue),.5))}}
footer a{transition:color .2s,transform .2s}
footer a:hover{color:var(--blue-2);transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){.tag::after,.price-card,.price-card .ribbon::after,.price-card .btn-gold::after,.order form .btn::after,.roles .role .av::after,.buy.play .card,.buy.play .card .n,footer img{animation:none!important}.sec-head h2::after{width:44px}.role .lvl i::after{width:var(--w)}}

/* faq player */
#faq .faq details{position:relative;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease,border-color .35s,box-shadow .35s,background .35s}
#faq .faq.inv details,#faq .faq details[open]{opacity:1;transform:none}
#faq .faq.inv details:nth-child(2){transition-delay:.08s}
#faq .faq.inv details:nth-child(3){transition-delay:.16s}
#faq .faq.inv details:nth-child(4){transition-delay:.24s}
#faq .faq.inv details:nth-child(5){transition-delay:.32s}
#faq .faq.inv details:nth-child(6){transition-delay:.4s}
#faq .faq.inv details:nth-child(7){transition-delay:.48s}
#faq .faq details:hover{border-color:rgba(var(--tc),.45)}
#faq .faq summary{display:flex;align-items:center;gap:14px}
#faq .qn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:rgb(var(--tc));background:rgba(var(--tc),.12);border:1px solid rgba(var(--tc),.35);transition:background .35s,color .35s,transform .35s}
#faq .faq details[open] .qn{background:rgb(var(--tc));color:#0a0c10;transform:scale(1.12)}
#faq .faq details[open]{background:linear-gradient(270deg,rgba(var(--tc),.1),transparent 65%),var(--bg-1);box-shadow:inset 3px 0 0 rgb(var(--tc)),0 18px 40px -28px rgba(var(--tc),.6)}
#faq .faq details p span{display:inline-block;opacity:1}
#faq .faq details[open] p span{animation:wordIn .45s ease both;animation-delay:calc(var(--w)*45ms + .15s)}
@keyframes wordIn{from{opacity:0;transform:translateY(7px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
#faq .qbar{position:absolute;inset-inline:0;bottom:0;height:2px;width:0;background:linear-gradient(270deg,rgb(var(--tc)),transparent);margin-inline-start:auto;display:none}
#faq .faq:not(.manual) details[open] .qbar{display:block}
@keyframes qprog{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){#faq .faq details{opacity:1;transform:none}#faq .qbar{display:none!important}#faq .faq details[open] p span{animation:none}}
#faq .faq summary{text-align:start;justify-content:flex-start}#faq .faq summary::after{margin-inline-start:auto}

/* ===== order section: colourful + alive ===== */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.order .form{position:relative;isolation:isolate;border-color:transparent;background:var(--bg-1)}
.order .form::before{content:"";position:absolute;inset:-1.5px;z-index:-2;border-radius:21px;background:conic-gradient(from var(--ang),rgba(var(--p-coral),.9),rgba(var(--p-gold),.9),rgba(var(--p-green),.8),rgba(var(--p-blue),.9),rgba(var(--p-violet),.9),rgba(var(--p-coral),.9));animation:ang 9s linear infinite;opacity:.75}
.order .form::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-1)}
@keyframes ang{to{--ang:360deg}}
.order .form{box-shadow:0 30px 90px -50px rgba(var(--p-coral),.5)}
/* progress */
.fprog{grid-column:1/-1;display:grid;gap:8px}
.fprog .ft{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.fprog .ft b{color:rgb(var(--p-green))}
.fprog i{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.fprog i b{display:block;height:100%;width:0;margin-inline-start:auto;border-radius:5px;background:linear-gradient(270deg,rgb(var(--p-coral)),rgb(var(--p-gold)),rgb(var(--p-green)));background-size:200% 100%;transition:width .5s cubic-bezier(.3,.9,.3,1);animation:gshift 4s linear infinite}
/* fields: own colour each */
.order .form>div:nth-of-type(1){--tc:var(--p-blue)}
.order .form>div:nth-of-type(2){--tc:var(--p-gold)}
.order .form>div:nth-of-type(3){--tc:var(--p-green)}
.order .form>div:nth-of-type(4){--tc:var(--p-violet)}
.order .form>div:nth-of-type(5){--tc:var(--p-coral)}
.order .form>div:nth-of-type(6){--tc:var(--p-blue)}
.order .form>div{position:relative}
.order .form label{display:flex;align-items:center;gap:8px;transition:color .25s}
.order .form label::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--tc));box-shadow:0 0 0 0 rgba(var(--tc),.5);animation:dotPing 3.6s ease-out infinite}
@keyframes dotPing{0%{box-shadow:0 0 0 0 rgba(var(--tc),.55)}70%,100%{box-shadow:0 0 0 7px rgba(var(--tc),0)}}
.order .form>div:focus-within label{color:rgb(var(--tc))}
.order .form input:focus,.order .form select:focus,.order .form textarea:focus{border-color:rgba(var(--tc),.9);box-shadow:0 0 0 4px rgba(var(--tc),.16)}
.order .form>div.ok input{border-color:rgba(var(--p-green),.6)}
.order .form>div.ok::after{content:"";position:absolute;left:14px;bottom:14px;width:20px;height:20px;border-radius:50%;background:rgb(var(--p-green)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c10' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;animation:okIn .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes okIn{from{transform:scale(0)}to{transform:scale(1)}}
/* submit button */
.order .form .btn-gold{background:linear-gradient(100deg,rgb(var(--p-gold)),rgb(var(--p-coral)) 55%,rgb(var(--p-gold)));background-size:200% 100%;color:#1a1204;border-color:transparent;animation:gshift 5s linear infinite;transition:transform .25s,box-shadow .25s}
.order .form .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(var(--p-coral),.8)}
.order .form.ready .btn-gold{animation:gshift 3s linear infinite,readyPulse 1.8s ease-in-out infinite}
@keyframes readyPulse{50%{box-shadow:0 0 0 8px rgba(var(--p-gold),.18)}}
/* request-type pills */
.opills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.opills button{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;border-radius:99px;padding:8px 18px;color:rgb(var(--tc));background:rgba(var(--tc),.1);border:1px solid rgba(var(--tc),.35);transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.opills button:nth-child(1){--tc:var(--p-gold)}
.opills button:nth-child(2){--tc:var(--p-green)}
.opills button:nth-child(3){--tc:var(--p-violet)}
.opills button:hover{transform:translateY(-2px)}
.opills button.on{background:rgb(var(--tc));color:#0a0c10;box-shadow:0 10px 26px -12px rgba(var(--tc),.9)}
/* contact list */
.contact-list li{--tc:var(--p-blue);transition:transform .3s;opacity:0;transform:translateX(24px)}
.contact-list li:nth-child(1){--tc:var(--p-green)}
.contact-list li:nth-child(2){--tc:var(--p-blue)}
.contact-list li:nth-child(3){--tc:var(--p-coral)}
.order-info.in .contact-list li{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.order-info.in .contact-list li:nth-child(2){transition-delay:.15s}
.order-info.in .contact-list li:nth-child(3){transition-delay:.3s}
.contact-list li:hover{transform:translateX(-6px)!important}
.contact-list .ic{position:relative;color:rgb(var(--tc));background:rgba(var(--tc),.12);border-color:rgba(var(--tc),.4)}
.contact-list .ic::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid rgba(var(--tc),.6);opacity:0;animation:avRing 3.4s ease-out infinite}
.contact-list li:nth-child(2) .ic::after{animation-delay:.6s}
.contact-list li:nth-child(3) .ic::after{animation-delay:1.2s}
.order-info h2{background:linear-gradient(90deg,#fff 30%,rgb(var(--p-gold)),rgb(var(--p-coral)),#fff 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gshift 7s linear infinite}
@media (prefers-reduced-motion:reduce){.order .form::before,.order .form label::before,.contact-list .ic::after,.order-info h2,.order .form .btn-gold,.fprog i b{animation:none!important}.contact-list li{opacity:1;transform:none}}

/* ---- خرید در چهار قدم: کارت‌های مسیر ---- */
.buy{gap:24px}
.buy .card{overflow:visible;padding:22px 22px 24px;min-height:0;gap:0;background:linear-gradient(180deg,rgba(var(--tc),.09),transparent 60%),var(--bg-1)}
.buy .card::before{border-radius:var(--r) var(--r) 0 0}
.buy .bn-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.buy .ico{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:rgb(var(--tc));background:rgba(var(--tc),.14);box-shadow:inset 0 0 0 1px rgba(var(--tc),.35),0 14px 26px -16px rgba(var(--tc),.9)}
.buy .ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.buy .n{width:auto;height:auto;border:0;background:none;margin:0;font-size:48px;font-weight:900;line-height:1;color:rgb(var(--tc));opacity:.25;display:block}
.buy .chip{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 11px;border-radius:99px;margin-bottom:12px;color:rgb(var(--tc));background:rgba(var(--tc),.1);border:1px solid rgba(var(--tc),.3)}
.buy .card h3{font-size:18px;margin-bottom:6px}.buy .card p{margin-bottom:0;font-size:14.5px;line-height:1.9}
.buy .card:not(:first-child)::after{content:"";position:absolute;top:47px;right:-24px;left:auto;width:24px;height:2px;background:repeating-linear-gradient(90deg,rgba(var(--tc),.8) 0 5px,transparent 5px 9px)}
@media (max-width:1100px){.buy .card:not(:first-child)::after{display:none}}
@media (max-width:700px){.buy{gap:26px}.buy .card:not(:first-child)::after{display:block;top:-26px;left:auto;right:46px;width:2px;height:26px;background:repeating-linear-gradient(180deg,rgba(var(--tc),.8) 0 5px,transparent 5px 9px)}}

/* buy steps: arrow badges between the cards (no dashed lines) */
.buy{gap:44px}
.buy .card.rv:first-child::after{content:none;display:none}
.buy .card.rv:nth-child(n+2)::after{content:"";position:absolute;top:calc(50% - 13px);right:-35px;left:auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(var(--tc),.6);background:rgba(var(--tc),.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5 9 12l5.5 5.5'/%3E%3C/svg%3E") center/14px no-repeat;opacity:1;animation:connPulse 9s ease-in-out infinite;box-shadow:0 0 0 0 rgba(var(--tc),.5)}
.buy .card.rv:nth-child(2)::after{animation-delay:.9s}
.buy .card.rv:nth-child(3)::after{animation-delay:2.7s}
.buy .card.rv:nth-child(4)::after{animation-delay:4.5s}
@keyframes connPulse{0%,4%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--tc),0)}10%,20%{transform:scale(1.22);background-color:rgba(var(--tc),.7);box-shadow:0 0 0 7px rgba(var(--tc),.18)}32%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--tc),0)}}
@media (max-width:1100px){.buy{gap:24px}.buy .card.rv:nth-child(n+2)::after{display:none}}
@media (max-width:700px){.buy{gap:44px}.buy .card.rv:nth-child(n+2)::after{display:block;top:-35px;right:calc(50% - 13px);transform:rotate(-90deg);animation:none}}
@media (prefers-reduced-motion:reduce){.buy .card.rv:nth-child(n+2)::after{animation:none}}

/* buy steps v2: no lifting, no shadows — the big number fills up with colour and the top line sweeps */
.buy .card .n{opacity:1;color:transparent;-webkit-text-stroke:1.5px rgba(var(--tc),.5);background:linear-gradient(0deg,rgb(var(--tc)),rgba(var(--tc),.75)) no-repeat 0 100%/100% 0%;-webkit-background-clip:text;background-clip:text;transform:none;filter:none}
.buy.play .card .n{animation:buyFill 9s ease-in-out infinite}
.buy.play .card:nth-child(2) .n{animation-delay:1.8s}
.buy.play .card:nth-child(3) .n{animation-delay:3.6s}
.buy.play .card:nth-child(4) .n{animation-delay:5.4s}
@keyframes buyFill{0%,4%{background-size:100% 0%;-webkit-text-stroke-color:rgba(var(--tc),.5)}16%,26%{background-size:100% 100%;-webkit-text-stroke-color:rgb(var(--tc))}38%,100%{background-size:100% 0%;-webkit-text-stroke-color:rgba(var(--tc),.5)}}
.buy.play .card{animation:buyBorder 9s ease-in-out infinite}
.buy.play .card:nth-child(2){animation-delay:1.8s}
.buy.play .card:nth-child(3){animation-delay:3.6s}
.buy.play .card:nth-child(4){animation-delay:5.4s}
@keyframes buyBorder{0%,4%{border-color:var(--line)}12%,26%{border-color:rgba(var(--tc),.65)}38%,100%{border-color:var(--line)}}
.buy .card::before{transform-origin:right;transform:scaleX(1);opacity:.5}
.buy.play .card::before{animation:buySweep 9s ease-in-out infinite}
.buy.play .card:nth-child(2)::before{animation-delay:1.8s}
.buy.play .card:nth-child(3)::before{animation-delay:3.6s}
.buy.play .card:nth-child(4)::before{animation-delay:5.4s}
@keyframes buySweep{0%,4%{transform:scaleX(0);opacity:.5}18%,26%{transform:scaleX(1);opacity:1}38%,100%{transform:scaleX(1);opacity:.5}}
@keyframes connPulse{0%,4%{transform:scale(1);background-color:rgba(var(--tc),.16)}10%,20%{transform:scale(1.18);background-color:rgba(var(--tc),.6)}32%,100%{transform:scale(1);background-color:rgba(var(--tc),.16)}}
.buy .card.rv:nth-child(n+2)::after{box-shadow:none}
@media (prefers-reduced-motion:reduce){.buy.play .card,.buy.play .card .n,.buy.play .card::before{animation:none!important}.buy .card .n{background-size:100% 100%}}

/* ===== pricing side boxes: colourful + alive, same height as the price card ===== */
.price-grid{align-items:stretch}
.price-side{display:grid;grid-auto-rows:1fr;gap:14px;align-content:stretch}
.price-side .pbox{position:relative;overflow:hidden;display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:18px;row-gap:2px;align-content:center;align-items:center;padding:20px 22px;border-radius:var(--r);background:linear-gradient(270deg,rgba(var(--tc),.1),transparent 55%),var(--bg-1);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.price-side .pbox:nth-child(1){--tc:var(--p-gold)}
.price-side .pbox:nth-child(2){--tc:var(--p-blue)}
.price-side .pbox:nth-child(3){--tc:var(--p-green)}
.price-side .pbox:nth-child(4){--tc:var(--p-violet)}
.price-side .pbox::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:linear-gradient(180deg,rgb(var(--tc)),rgba(var(--tc),.2))}
.price-side .pbox:hover{border-color:rgba(var(--tc),.5);transform:translateX(-4px)}
.price-side .pbox .pi{grid-row:1/4;position:relative;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:rgb(var(--tc));background:rgba(var(--tc),.14);border:1px solid rgba(var(--tc),.4)}
.price-side .pbox .pi::after{content:"";position:absolute;inset:-1px;border-radius:16px;border:1px solid rgba(var(--tc),.6);opacity:0;animation:avRing 3.4s ease-out infinite}
.price-side .pbox:nth-child(2) .pi::after{animation-delay:.6s}
.price-side .pbox:nth-child(3) .pi::after{animation-delay:1.2s}
.price-side .pbox:nth-child(4) .pi::after{animation-delay:1.8s}
.price-side .pbox .pi svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.price-side .pbox h4{margin:0;font-size:16.5px;font-weight:800}
.price-side .pbox p{margin:0;font-size:14px;line-height:1.85;color:var(--muted)}
/* tiny live details per icon */
.price-side .pbox .pup{transform-box:fill-box;transform-origin:center;animation:pupil 4s ease-in-out infinite}
@keyframes pupil{0%,40%,100%{transform:scale(1)}50%{transform:scale(.55)}60%{transform:scale(1)}}
.price-side .pbox .shk{transform-box:fill-box;transform-origin:left bottom;animation:shackle 5s ease-in-out infinite}
@keyframes shackle{0%,60%,100%{transform:rotate(0) translateY(0)}70%{transform:rotate(-24deg) translateY(-1.5px)}82%{transform:rotate(0)}}
.price-side .pbox .rot{transform-origin:12px 12px;animation:spn 6s linear infinite}
.price-side .pbox .d12{grid-column:2;display:flex;gap:5px;margin-top:8px}
.price-side .pbox .d12 i{flex:1;height:5px;border-radius:5px;background:rgba(var(--tc),.18);animation:dotFill 7.2s ease-in-out infinite;animation-delay:calc(var(--k)*.28s)}
@keyframes dotFill{0%,6%{background:rgba(var(--tc),.18)}14%,70%{background:rgb(var(--tc))}84%,100%{background:rgba(var(--tc),.18)}}
@media (max-width:900px){.price-side{grid-auto-rows:auto}}
@media (prefers-reduced-motion:reduce){.price-side .pbox .pi::after,.price-side .pbox .pup,.price-side .pbox .shk,.price-side .pbox .rot,.price-side .pbox .d12 i{animation:none}.price-side .pbox .d12 i{background:rgb(var(--tc))}}

/* order submit button: brand blue, matches the rest of the site */
.order .form .btn-gold{background:linear-gradient(90deg,#2f7fe0,var(--blue-2),#2f7fe0);background-size:200% 100%;color:#fff;border-color:rgba(109,184,255,.5);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.order .form .btn-gold:hover{box-shadow:0 14px 34px -14px rgba(59,142,234,.9);transform:translateY(-2px)}
.order .form.ready .btn-gold{animation:gshift 3s linear infinite,readyPulseB 1.8s ease-in-out infinite}
@keyframes readyPulseB{50%{box-shadow:0 0 0 8px rgba(59,142,234,.22)}}
#faq .faq{max-width:none;width:100%}

/* bars fill from the right (RTL start) */
.role .lvl i::after{margin-inline-start:0;margin-inline-end:auto}
.fprog i b{margin-inline-start:0;margin-inline-end:auto}
#faq .qbar{margin-inline-start:0;margin-inline-end:auto;inset-inline:0 auto}

/* role level bars: they keep filling, shine and glow */
.role .lvl i{position:relative;height:6px}
.role .lvl i::after{transition:none;width:0;box-shadow:0 0 12px rgba(var(--tc),.7)}
.roles.play .role .lvl i::after{width:0;animation:lvlFill 6s cubic-bezier(.3,.9,.3,1) infinite}
.roles.play .role:nth-child(2) .lvl i::after{animation-delay:.2s}
.roles.play .role:nth-child(3) .lvl i::after{animation-delay:.4s}
.roles.play .role:nth-child(4) .lvl i::after{animation-delay:.6s}
@keyframes lvlFill{0%{width:0}28%,84%{width:var(--w)}98%,100%{width:0}}
.role .lvl i::before{content:"";position:absolute;inset-block:0;right:0;width:35%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(130%);opacity:0}
.roles.play .role .lvl i::before{animation:lvlShine 6s ease-in-out infinite}
.roles.play .role:nth-child(2) .lvl i::before{animation-delay:.2s}
.roles.play .role:nth-child(3) .lvl i::before{animation-delay:.4s}
.roles.play .role:nth-child(4) .lvl i::before{animation-delay:.6s}
@keyframes lvlShine{0%,30%{transform:translateX(130%);opacity:0}38%{opacity:1}62%{transform:translateX(-380%);opacity:1}70%,100%{transform:translateX(-380%);opacity:0}}
.role .lvl small span:last-child{font-weight:800;color:rgb(var(--tc));font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.roles.play .role .lvl i::after{animation:none;width:var(--w)}.roles.play .role .lvl i::before{animation:none}}

/* roles ordered least -> most access (right to left); keep each role's own colour */
.roles .role:nth-child(1){--tc:var(--p-violet)}.roles .role:nth-child(2){--tc:var(--p-green)}.roles .role:nth-child(3){--tc:var(--p-gold)}.roles .role:nth-child(4){--tc:var(--p-blue)}
.seeall{text-align:center;display:flex;justify-content:center}