/* Client Experiences page — "Darbar of Voices": night sky + coverflow of arch letter-cards */
@keyframes vdFloat{50%{translate:30px -24px}}
@keyframes vdSweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes vdHalo{to{rotate:360deg}}
@keyframes vdBar{from{stroke-dashoffset:176}to{stroke-dashoffset:0}}

.vd{position:relative;overflow:hidden;color:#fff;background:radial-gradient(90% 60% at 50% 0%,var(--m6),var(--m8) 55%,var(--m9));padding-bottom:70px}
.vd .stars{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none}
.vd-glow{position:absolute;left:50%;top:48%;width:min(880px,120%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(243,217,139,.2),rgba(224,179,79,.06) 45%,transparent 70%);animation:vdFloat 16s ease-in-out infinite;pointer-events:none}
.vd .wrap{position:relative;z-index:2}
.vd .head h2{color:#fff}.vd .head .eyebrow{color:var(--gold)}.vd .lead{color:rgba(255,246,228,.86)}
.vd .head{margin-bottom:1rem}

/* stage + coverflow */
.vd-stage{position:relative;margin-top:2.6rem;outline:0;perspective:1600px}
.vd-track{position:relative;height:var(--h,560px);transition:height .5s var(--ease)}
.vc{position:absolute;left:50%;top:0;width:min(440px,82vw);margin-left:calc(min(440px,82vw)/-2);padding:8.2rem 2rem 2rem;border-radius:220px 220px 30px 30px;text-align:center;color:#4a1620;
  background:linear-gradient(168deg,#fffdf7,#f8e9c6 70%,#f0d9a0);
  box-shadow:inset 0 0 0 1.5px rgba(184,134,43,.7),inset 0 0 0 7px #fff8e6,inset 0 0 0 8px rgba(184,134,43,.45),0 30px 60px rgba(8,1,3,.5);
  transform:translateX(calc(var(--o,0)*70%)) translateZ(calc(var(--a,0)*-120px)) rotateY(calc(var(--o,0)*-16deg)) scale(calc(1 - var(--a,0)*.1));
  filter:saturate(calc(1 - var(--a,0)*.3)) brightness(calc(1 - var(--a,0)*.2));
  z-index:calc(10 - var(--a,0));pointer-events:none;visibility:hidden;overflow:hidden;
  transition:transform .8s var(--ease),filter .6s,visibility 0s .8s;cursor:pointer}
.vc.vis{visibility:visible;pointer-events:auto;transition-delay:0s}
.vc.on{box-shadow:inset 0 0 0 1.5px var(--gold),inset 0 0 0 7px #fff8e6,inset 0 0 0 8px rgba(184,134,43,.6),0 0 0 1px rgba(243,217,139,.4),0 40px 90px rgba(224,179,79,.28),0 30px 60px rgba(8,1,3,.5);cursor:default}
.vc::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(243,217,139,.55) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none;z-index:3}
.vc.on::before{animation:vdSweep 1.3s var(--ease) .25s 1 both}
.vc-om{position:absolute;right:-20px;bottom:-26px;font-size:9rem;color:rgba(184,134,43,.1);pointer-events:none;rotate:-12deg}

/* avatar crowning the arch */
.vc-av{position:absolute;left:50%;top:1.4rem;translate:-50% 0;width:92px;height:92px}
.vc-av .av,.vc-av .ini{position:relative;width:92px;height:92px;font-size:2.2rem;box-shadow:0 0 0 3px #fff8e6,0 0 0 5px var(--gold),0 12px 26px rgba(138,90,22,.35)}
.vc-halo{position:absolute;left:50%;top:calc(1.4rem - 12px);translate:-50% 0;width:116px;height:116px;border-radius:50%;border:1px dashed rgba(184,134,43,.7);animation:vdHalo 26s linear infinite;pointer-events:none}
.vc-halo::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;rotate:45deg;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.vc-body{position:relative;z-index:1}
.vc-theme{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-right:.55rem;vertical-align:middle;color:#fff6e4;font-size:.8rem;background:linear-gradient(135deg,#8a2236,#4a1119);box-shadow:0 6px 14px rgba(74,17,25,.3)}
.vc-stars{vertical-align:middle;color:var(--gold3);letter-spacing:.16em;font-size:1rem}
.vc-qm{display:block;margin:.9rem auto .2rem;font-size:1.5rem;color:rgba(184,134,43,.55)}
.vc p{font:italic 500 1.16rem/1.75 var(--serif);color:#4a1620;margin:0}
.vc footer{margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed rgba(184,134,43,.55)}
.vc footer b{display:block;font:600 1.1rem var(--disp);letter-spacing:.06em;color:#7a1f2e}
.vc footer span{display:block;margin-top:.15rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8a5a16}
.vc footer span i{margin-right:.3rem}

/* arrows */
.vd-nav{position:absolute;top:44%;z-index:30;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;color:var(--gold2);font-size:1.05rem;background:linear-gradient(145deg,rgba(243,217,139,.18),rgba(224,179,79,.05));box-shadow:inset 0 0 0 1px rgba(224,179,79,.55),0 10px 26px rgba(8,1,3,.4);backdrop-filter:blur(6px);transition:transform .4s var(--ease),background .3s,color .3s}
.vd-nav.prev{left:max(0px,calc(50% - 560px))}.vd-nav.next{right:max(0px,calc(50% - 560px))}
.vd-nav:hover{background:linear-gradient(135deg,var(--gold2),var(--gold3));color:var(--m9);transform:scale(1.1)}

/* pagers: avatars with progress ring */
.vd-pagers{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:2.2rem}
.vp{position:relative;display:flex;align-items:center;gap:.7rem;padding:.4rem 1.1rem .4rem .4rem;border-radius:999px;border:0;cursor:pointer;text-align:left;color:rgba(255,246,228,.75);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(224,179,79,.25);transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
.vp .av,.vp .ini{width:46px;height:46px;font-size:1.1rem;box-shadow:0 0 0 2px rgba(224,179,79,.5)}
.vp-ring{position:absolute;left:.4rem;top:.4rem;width:46px;height:46px;pointer-events:none;border-radius:50%;opacity:0}
.vp-t b{display:block;font:600 .88rem/1.2 var(--sans);color:inherit}.vp-t small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.vp:hover{transform:translateY(-3px);color:#fff}
.vp[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,rgba(243,217,139,.22),rgba(224,179,79,.08));box-shadow:inset 0 0 0 1px var(--gold),0 10px 26px rgba(224,179,79,.16)}
.vp[aria-selected="true"] .vp-ring{opacity:1;background:conic-gradient(var(--gold2) var(--p,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 20px,#000 21px);mask:radial-gradient(circle,transparent 20px,#000 21px)}
.vd-note{text-align:center;margin:2.6rem auto 1.4rem;max-width:640px;font-size:.92rem;color:rgba(255,240,210,.78)}

@media(max-width:900px){
  .vc{transform:translateX(calc(var(--o,0)*104%)) translateZ(calc(var(--a,0)*-80px)) scale(calc(1 - var(--a,0)*.08));padding:7.6rem 1.4rem 1.6rem;border-radius:160px 160px 26px 26px}
  .vd-nav{top:auto;bottom:-4.4rem;width:48px;height:48px}.vd-nav.prev{left:calc(50% - 64px)}.vd-nav.next{right:calc(50% - 64px)}
  .vd-pagers{margin-top:6rem}.vp-t{display:none}.vp{padding:.4rem}
  .vc p{font-size:1.08rem}
}
@media(prefers-reduced-motion:reduce){.vc,.vd-track,.vd-nav,.vp{transition:none}.vc.on::before,.vc-halo,.vd-glow{animation:none}}