: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: 360px;
  overflow: hidden;
  background: var(--bg);
  container-type: inline-size;
}

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

/* Mask group — розовая «жидкость» в бокале (Figma Мобилка_1 > Group 15).
   Бокс: X=130.5, Y=80.96, W=101, H=60.54 на канве 360×852.
   Две Figma-слойки из Mask group объединены в один .bowl-fill:
     • Vector 2 — DB6285, opacity 53% → rgba(DB6285, 0.53);
     • Vector 1 — линейный градиент → linear-gradient сверху;
     • blend mode: darken у обоих → mix-blend-mode: darken.
   Параметры подкручиваются прямо в DevTools. */
.bowl-fill {
  position: absolute;
  left: 35.25cqw;
  top: 22.59cqw;
  width: 34.056cqw;
  height: 19.18cqw;
  background: linear-gradient(341deg, rgb(242 235 237 / 0%) 38%, rgba(317, 121, 133, 6.8) 51%), #e83a6c;
  opacity: 0.53;
  mix-blend-mode: darken;
  clip-path: polygon(5% 20%, 85% 3%, 49% 96%);
  z-index: 2;
  pointer-events: none;
}

/* KIKI — X=32, Y=410, W=208.87 in Figma (H from SVG aspect). */
.logo-kiki {
  position: absolute;
  left: 1.889cqw;
  top: 96.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: 115.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: 4.722cqw;
  top: 149cqw;
  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;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.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);
}

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

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