/* Телефон с настоящими скриншотами и заголовок экрана «Мини-приложение для гостей» */
.ph {
  position: relative; margin: 0;
  aspect-ratio: 921 / 1720;
  padding: 1.6%;
  border-radius: 13% / 7%;
  background: linear-gradient(145deg, #2A1E16, #0D0907 40%, #1A120C);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 247, 222, .1),
    0 0 0 1px rgba(8, 5, 3, .9),
    0 50px 90px -30px rgba(0, 0, 0, .9);
}
.ph__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 11.5% / 6.2%; background: #F3EBD9; }
.ph__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.screen-title {
  margin: 0;
  font: 800 clamp(2.2rem, 4.6vw, 5.4rem)/.98 var(--font-display);
  letter-spacing: -.02em; color: var(--text); text-wrap: balance;
}
.screen-title em { font-style: normal; color: var(--accent-text); }

.ring-btn {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--accent); background: none; color: var(--accent-text);
  transition: background .4s var(--ease-out), color .4s, transform .5s var(--ease-out);
}
.ring-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ring-btn:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.next-screen { text-decoration: none; }
.next-screen .ring-btn { animation: nudge 2.6s var(--ease-out) 3; }   /* подпрыгивает 3 раза и замирает (разбор 31.10) */
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } }
@media (max-width: 760px) { .ring-btn { width: 52px; height: 52px; } }