/* Заставка страницы /login (auth.html): слева — QRme.su и живые ролики шаблонов, справа — карточка входа.
   Только для этой страницы: в окне на сайте партнёра карточка входа без заставки (там auth.css и embed.js).
   Ролики — те же превью шаблонов, что на шаге «Шаблон» (static/templates/*.mp4, по 140–190 КБ). */
.login { width: 100%; max-width: 1140px; min-height: calc(100vh - 48px); display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; }
.login .auth { justify-self: end; }

.splash { position: relative; display: grid; gap: 14px; justify-items: start; }
.splash-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.splash-brand .logo-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); box-shadow: var(--glow); }
.splash-brand .logo-mark svg { width: 19px; height: 19px; fill: #fff; }
.splash-brand b { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.splash-brand b span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.splash-eyebrow { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.splash-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.14;
  letter-spacing: -.03em; max-width: 17ch; text-wrap: balance; }
.splash-lead { margin: 0; max-width: 46ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* три «телефона» веером: в центре крупнее, по бокам меньше и повёрнуты */
.reels { --w: clamp(130px, 12vw, 172px); display: flex; justify-content: center; align-items: center; width: 100%;
  padding: 14px 0 6px; isolation: isolate; }
.reel { position: relative; margin: 0; width: var(--w); aspect-ratio: 9 / 16; flex: none; border-radius: 24px; overflow: hidden;
  background: var(--panel-2) center / cover no-repeat; border: 1px solid var(--line-2);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 6px rgba(9, 12, 32, .55), 0 18px 50px -18px rgba(124, 58, 237, .55);
  animation: reel-float 7s var(--ease) infinite alternate; }
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 7px 10px; border-radius: 12px;
  background: rgba(9, 12, 32, .62); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 600; line-height: 1.25; color: #fff; }
.reel.back { width: calc(var(--w) * .8); z-index: 0; opacity: .92; }
.reel.tilt-l { margin-right: calc(var(--w) * -.16); --tilt: -7deg; animation-delay: -2.5s; }
.reel.tilt-r { margin-left: calc(var(--w) * -.16); --tilt: 7deg; animation-delay: -5s; }
.reel.front { z-index: 1; --tilt: 0deg; }
/* подписи боковых роликов — у внешнего края: внутренний край закрыт центральным роликом */
.reel.tilt-l figcaption { right: calc(var(--w) * .2); }
.reel.tilt-r figcaption { left: calc(var(--w) * .2); }
.reel.front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@keyframes reel-float { from { transform: translateY(-6px) rotate(var(--tilt, 0deg)); } to { transform: translateY(8px) rotate(var(--tilt, 0deg)); } }

.splash-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; counter-reset: step; }
.splash-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px;
  background: var(--grad-soft); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text); }
.splash-steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700; }

/* узкий экран: заставка над карточкой, компактнее */
@media (max-width: 960px) {
  .login { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; justify-items: center; }
  .login .auth { justify-self: center; }
  .splash { justify-items: center; text-align: center; max-width: 560px; }
  .splash-title { max-width: 18ch; }
  .reels { --w: clamp(112px, 30vw, 168px); padding-top: 8px; }
  .splash-steps { justify-content: center; }
}
@media (max-width: 420px) {
  .splash { gap: 14px; }
  .splash-lead { font-size: 14.5px; }
  .reel figcaption { font-size: 10.5px; padding: 5px 7px; left: 6px; right: 6px; bottom: 6px; }
  .splash-steps { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reel { animation: none; transform: rotate(var(--tilt, 0deg)); }
}