:root {
  --pink: #db6285;
  --pink-stroke: #efa6b7;
  --bg: #fffefc;
  --white: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--pink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

/* Figma canvas: Мобилка_1 = 360 × 852. Сцена растягивается на всю
   высоту вьюпорта, ширина — до 360px (ширина канвы). Дети
   используют проценты от канвы 360×852. */
.page {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 462px;
  overflow: hidden;
  background: var(--bg);
  container-type: inline-size;
}

/* image 125 — композиция в нативной пропорции 360:852 (width=100%,
   height=auto). Привязана к ширине контейнера, поэтому все оверлеи,
   заданные в cqw, остаются точно на своих местах относительно
   картинки независимо от высоты вьюпорта. */
.composition {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* KIKI — X=32, Y=410, W=208.87 in Figma (H from SVG aspect). */
.logo-kiki {
  position: absolute;
  left: 1.889cqw;
  top: 112.889cqw;
  width: 58.019cqw;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* AGENCY — X=68, Y=493, W=224.13 */
.logo-agency {
  position: absolute;
  left: 9.889cqw;
  top: 129.944cqw;
  width: 62.258cqw;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Frame 338 — X=53, Y=576, W=280, H=52.63, radius=21.05,
   fill #DB6285, inside stroke 1px #EFA6B7. */
.cta {
  position: absolute;
  left: 9.722cqw;
  bottom: 54px;
  width: 77.778cqw;
  height: 14.619cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 21.05cqw; /* will exceed half-height → pill */
  background: var(--pink);
  box-shadow: inset 0 0 0 1px var(--pink-stroke);
  color: var(--white);
  text-decoration: none;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  will-change: transform, filter, box-shadow;
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: ctaPulse 2.6s ease-out infinite;
}

/* Ненавязчивая «капля» вокруг кнопки. Расходится наружу полупрозрачной
   pink halo и растворяется. Inset stroke сохраняется, чтобы граница
   кнопки не моргала. */
@keyframes ctaPulse {
  0% {
    box-shadow:
      inset 0 0 0 1px var(--pink-stroke),
      0 0 0 0 rgba(219, 98, 133, 0.45);
  }
  70% {
    box-shadow:
      inset 0 0 0 1px var(--pink-stroke),
      0 0 0 14px rgba(219, 98, 133, 0);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px var(--pink-stroke),
      0 0 0 0 rgba(219, 98, 133, 0);
  }
}

/* Декоративные вензели сверху и снизу страницы. SVG из Figma —
   ширина 360, рендерятся на полный контейнер. Лежат на заднем плане
   (z-index: 0): фон composition.png теперь прозрачный, поэтому
   вензеля проступают там, где нет бокала/каблука. */
.ornament {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ornament-top {
  top: 0;
}

.ornament-bottom {
  bottom: 0;
}

/* Плашка с описанием агентства. Параметры из Figma:
   W=253.57, H=60 (hug), padding 10, radius 8,
   fill #FFEFF0, stroke 1px inside #F7A5B8, поворот 2.84°,
   шрифт Montserrat SemiBold 12px, цвет #232323. */
.agency-card {
  position: absolute;
  left: 7.776cqw;
  top: 83cqw;
  width: 70.436cqw;       /* 253.57 / 360 */
  padding: 2.778cqw;      /* 10 / 360 */
  border-radius: 2.222cqw; /* 8 / 360 */
  background: #ffeff0;
  box-shadow: inset 0 0 0 1px #f7a5b8;
  color: #232323;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 3.333cqw;    /* 12 / 360 */
  line-height: 1.2;
  letter-spacing: 0;
  transform: rotate(-2.84deg);
  transform-origin: center;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.cta-label {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 6.1cqw; /* ~22px on a 360-wide stage */
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
  user-select: none;
  pointer-events: none;
}

.cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  animation-play-state: paused;
}

.cta:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.cta:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

/* Отключаем пульсацию для пользователей, попросивших меньше анимации. */
@media (prefers-reduced-motion: reduce) {
  .cta {
    animation: none;
  }
}