/* ---------- QR link: slider of real screenshots ---------- */
.svc-qr { padding-block: clamp(3rem, 6vw, 5.5rem); }
.qr-stage { width: 100%; max-width: 440px; margin-inline: auto; }
.qr-slides { display: grid; }
.qr-slide { grid-area: 1 / 1; margin: 0; display: grid; justify-items: center; gap: .9rem; opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; transition: opacity .55s ease, transform .55s ease; }
.qr-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.qr-slide figcaption { text-align: center; font-weight: 800; font-size: .92rem; line-height: 1.5; color: #e6e9ff; padding: .45rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .08); max-width: 100%; width: fit-content; }

.qr-frame { position: relative; width: 100%; background: #0b1226; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(124, 58, 237, .18); overflow: hidden; }
.qr-frame--desk { border-radius: 16px; }
.qr-frame--phone { max-width: 270px; border-radius: 34px; border: 8px solid #0b1226; outline: 1px solid rgba(255, 255, 255, .2); }
.qr-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.qr-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.qr-bar span { margin-inline-start: .6rem; font-size: .68rem; color: #aab1d6; direction: ltr; }
.qr-notch { position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: 74px; height: 16px; border-radius: 0 0 12px 12px; background: #0b1226; z-index: 3; }
.qr-shot { position: relative; line-height: 0; background: #fff; }
.qr-frame--desk .qr-shot { background: #111827; }
.qr-shot img { display: block; width: 100%; height: auto; }
.qr-frame--phone .qr-shot img { border-radius: 26px; }

/* scanning animation over the lawyer's QR */
.qr-brackets { position: absolute; left: 26%; right: 26%; top: 36%; bottom: 14%; pointer-events: none; opacity: 0; }
.qr-brackets::before, .qr-brackets::after { content: ""; position: absolute; inset: 0; border: 3px solid #fcd34d; border-radius: 10px;
  -webkit-mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat;
  mask: linear-gradient(#000 0 0) top left / 22px 22px no-repeat, linear-gradient(#000 0 0) top right / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom left / 22px 22px no-repeat, linear-gradient(#000 0 0) bottom right / 22px 22px no-repeat; }
.qr-brackets::after { display: none; }
.qr-scan { position: absolute; left: 27%; right: 27%; top: 37%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fcd34d, transparent); box-shadow: 0 0 18px 4px rgba(252, 211, 77, .55); opacity: 0; pointer-events: none; }
.qr-slide.is-on .qr-brackets { animation: qrPulse 2.2s ease-in-out infinite; }
.qr-slide.is-on .qr-scan { animation: qrSweep 2.2s ease-in-out infinite; }
@keyframes qrSweep { 0% { top: 37%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 84%; opacity: 0; } }
@keyframes qrPulse { 0%, 100% { opacity: .35; transform: scale(1.04); } 50% { opacity: 1; transform: scale(1); } }

.qr-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.qr-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .28); transition: width .3s, background .3s; cursor: pointer; }
.qr-dot.is-on { width: 28px; background: linear-gradient(90deg, #fcd34d, #f59e0b); }
@media (prefers-reduced-motion: reduce) { .qr-slide { transition: none; } .qr-slide.is-on .qr-scan, .qr-slide.is-on .qr-brackets { animation: none; opacity: 1; } }
@media (max-width: 575px) { .qr-stage { max-width: 100%; } .qr-frame--phone { max-width: 240px; } }