@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  font-family: "YS Text", -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

@font-face {
  font-family: "YS Text";
  src: url("../assets/fonts/text-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "YS Text";
  src: url("../assets/fonts/text-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "YS Text";
  src: url("../assets/fonts/text-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
/* ==================== СНЕГ — CANVAS НА ФОНЕ ==================== */
#snow-canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Под элементами, на фоне */
}

/* ==================== ЭКРАН 2: ОТПРАВКА ПОЖЕЛАНИЯ ==================== */
.screen-send {
  background: #243e9b;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  grid-template-columns: 1fr minmax(0, 800px) 1fr;
}

/* Контент — занимает всё пространство выше персонажей */
.send-content {
  grid-column: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(16px, -52.9473684211px + 0.1754385965 * 100vw, 26px) 16px;
  padding-bottom: 0;
  z-index: 10;
  min-height: 100dvh;
  position: relative;
  padding-bottom: 252px;
}
@media screen and (min-width: 450px) {
  .send-content {
    padding-bottom: 289px;
  }
}

.send-logo {
  margin-bottom: clamp(19px, -1.6842105263px + 0.0526315789 * 100vw, 22px);
}

.send-title {
  font-size: clamp(32px, -2.4736842105px + 0.0877192982 * 100vw, 37px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 110%;
  margin-bottom: clamp(20px, -7.5789473684px + 0.0701754386 * 100vw, 24px);
}

.send-subtitle {
  font-size: clamp(18px, -2.6842105263px + 0.0526315789 * 100vw, 21px);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 120%;
  margin-bottom: clamp(22px, 1.3157894737px + 0.0526315789 * 100vw, 25px);
}

/* Забор — привязан к низу карточки */
.screen-send .fence {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-42%);
  z-index: 1;
  pointer-events: none;
  position: absolute;
  height: auto;
}
@media screen and (min-width: 1200px) {
  .screen-send .fence {
    width: 808px;
    transform: translateX(-43%);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .screen-send .fence {
    width: 808px;
    transform: translateX(-43%);
  }
}
@media screen and (max-width: 681px) {
  .screen-send .fence {
    width: 808px;
    transform: translateX(-43%);
  }
}
@media screen and (max-width: 450px) {
  .screen-send .fence {
    width: 760px;
    transform: translateX(-43%);
  }
}

/* Конькобежец — привязан к забору, смещён вправо */
.screen-send .person-skater {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: auto;
  left: 52%;
  top: 96%;
}
@media screen and (min-width: 1200px) {
  .screen-send .person-skater {
    top: 101%;
    left: 52%;
    transform: scale(1.1);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .screen-send .person-skater {
    top: 101%;
    left: 56%;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 681px) {
  .screen-send .person-skater {
    top: 101%;
    left: 56%;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 450px) {
  .screen-send .person-skater {
    top: 103%;
    left: 55%;
    transform: scale(1.2);
  }
}
@media screen and (max-width: 393px) {
  .screen-send .person-skater {
    top: 97%;
    transform: scale(1);
  }
}

/* Рука с телефоном — полная настройка позиции */
.screen-send .hand-phone {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transform: scale(1);
}
@media screen and (min-width: 1200px) {
  .screen-send .hand-phone {
    left: 10%;
    transform: scale(1.2);
    bottom: -54px;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .screen-send .hand-phone {
    left: 10%;
    transform: scale(1.2);
    bottom: -53px;
  }
}
@media screen and (max-width: 681px) {
  .screen-send .hand-phone {
    bottom: 60px;
    left: -35px;
    transform: scale(1.2);
  }
}
@media screen and (max-width: 450px) {
  .screen-send .hand-phone {
    bottom: 41px;
    left: -30px;
    transform: scale(1.2);
  }
}
@media screen and (max-width: 393px) {
  .screen-send .hand-phone {
    bottom: 41px;
    left: -36px;
    transform: scale(1);
  }
}
@media screen and (width: 772px) {
  .screen-send .hand-phone {
    left: 77.1875px;
    position: fixed;
  }
}

/* ==================== ЭКРАН 3: БИНГО ==================== */
.screen-bingo {
  background-color: #243E9B;
  background-image: url("../assets/bg.jpg");
}
@media (min-resolution: 2dppx) and (min-resolution: 2dppx) {
  .screen-bingo {
    background-image: url("../assets/bg@2x.jpg");
    background-size: cover;
    background-position: center bottom;
  }
}
@media (min-resolution: 2dppx) {
  .screen-bingo {
    background-image: url("../assets/bg@2x.jpg");
    background-size: cover;
  }
}
.screen-bingo {
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-bottom: 252px;
}

.bingo-wrapper {
  padding: 0 17px;
  padding-top: 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
  z-index: 2;
}

.screen-bingo .bingo-logo {
  margin-bottom: clamp(24px, 3.3157894737px + 0.0526315789 * 100vw, 27px);
}

.screen-bingo .bingo-logo img {
  height: clamp(50px, 1.7368421053px + 0.1228070175 * 100vw, 57px);
  width: clamp(200px, 0.0526315789px + 0.5087719298 * 100vw, 229px);
}

.bingo-title {
  font-weight: 500;
  font-size: clamp(32px, 4.4210526316px + 0.0701754386 * 100vw, 36px);
  line-height: 110%;
  text-align: center;
  color: #ffffff;
  margin-bottom: clamp(46px, 4.6315789474px + 0.1052631579 * 100vw, 52px);
}

.bingo-card {
  width: 100%;
  max-width: 417px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px clamp(21px, -13.4736842105px + 0.0877192982 * 100vw, 26px) 21px;
  background: linear-gradient(103.98deg, rgba(255, 255, 255, 0.24) 18.97%, rgba(179, 206, 255, 0.4) 76.96%);
  border-radius: 41px;
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 80px 0px rgba(255, 122, 40, 0.3019607843);
  border: 1px solid;
  border-image-source: linear-gradient(92.46deg, rgba(255, 255, 255, 0.4) 3.65%, rgba(255, 255, 255, 0) 99.38%);
}

.bingo-card-content {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bingo-character img {
  margin-bottom: clamp(0px, -96.5263157895px + 0.2456140351 * 100vw, 14px);
  width: clamp(298px, 1.5263157895px + 0.7543859649 * 100vw, 341px);
  height: auto;
}

.bingo-subtitle {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 27px;
  font-weight: 400;
  font-size: clamp(18px, 4.2105263158px + 0.0350877193 * 100vw, 20px);
  line-height: 120%;
  letter-spacing: 0px;
  text-align: center;
}

.btn-bingo {
  width: 100%;
  padding: 21px 18px;
  border: none;
  border-radius: 50px;
  color: white;
  font-size: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px);
  font-weight: 600;
  line-height: 130%;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background: linear-gradient(0deg, #F86025, #F86025), linear-gradient(314.65deg, rgba(255, 183, 67, 0.4) -2.22%, rgba(255, 183, 67, 0) 29.26%);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-bingo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 107, 53, 0.5);
}

.btn-bingo:active {
  transform: scale(0.98);
}

/* ==================== ЭКРАН 4: ДИСПЛЕЙ (для показа на большом экране) ==================== */
.screen-display {
  background-image: url("../assets/display-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100dvh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Письмо — когда есть сообщение */
.display-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  padding: 78px 80px 370px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.display-message.show {
  opacity: 1;
  pointer-events: auto;
  animation: messageSlideIn 0.6s ease-out forwards;
}
.display-message.hiding {
  animation: messageSlideOut 0.5s ease-out forwards;
}

/* ==================== ЭКРАН 1: ОБЛАЧКА ==================== */
.screen-clouds {
  min-height: 100vh;
  padding-bottom: 252px;
  position: relative;
  overflow-x: hidden;
}

/* ↓↓↓ ФОН ЭКРАНА 1 — ПРИВЯЗАН К СТРАНИЦЕ ↓↓↓ */
.bg-fixed {
  background-color: #243E9B;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-image: url("../assets/bg.jpg");
  background-position: left -604px bottom;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .bg-fixed {
    background-position: left -474px bottom;
  }
}
@media screen and (min-width: 900px) {
  .bg-fixed {
    background-position: left -374px bottom;
  }
}
@media screen and (min-width: 1200px) {
  .bg-fixed {
    background-position: left -48px bottom;
  }
}
@media screen and (min-width: 1800px) {
  .bg-fixed {
    background-position: center bottom;
  }
}
@media screen and (min-width: 1940px) {
  .bg-fixed {
    background-size: cover;
  }
}
@media (min-resolution: 2dppx) {
  .bg-fixed {
    background-image: url("../assets/bg@2x.jpg");
    background-size: 1920px 1546px;
    background-position: left -614px bottom;
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 682px) and (max-width: 1199px) {
  .bg-fixed {
    background-position: left -474px bottom;
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 900px) {
  .bg-fixed {
    background-position: left -384px bottom;
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 1200px) {
  .bg-fixed {
    background-position: left -48px bottom;
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 1800px) {
  .bg-fixed {
    background-position: center bottom;
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 1940px) {
  .bg-fixed {
    background-size: cover;
  }
}

/* ↑↑↑ ФОН ЭКРАНА 1 — ПРИВЯЗАН К СТРАНИЦЕ ↑↑↑ */
/* Grid-обёртка для облаков и персонажей */
.clouds-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 100% 1fr;
  width: 100%;
  margin-bottom: clamp(60px, -2.0526315789px + 0.1578947368 * 100vw, 69px);
}
@media screen and (min-width: 1200px) {
  .clouds-wrapper {
    grid-template-columns: 1fr minmax(900px, 1200px) 1fr;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .clouds-wrapper {
    grid-template-columns: 1fr 682px 1fr;
  }
}
@media screen and (max-width: 681px) {
  .clouds-wrapper {
    grid-template-columns: 1fr 447px 1fr;
  }
}
@media screen and (max-width: 450px) {
  .clouds-wrapper {
    grid-template-columns: 1fr minmax(100%, 447px) 1fr;
  }
}
@media screen and (max-width: 393px) {
  .clouds-wrapper {
    grid-template-columns: 1fr 100% 1fr;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .clouds-wrapper {
    grid-template-columns: 1fr 320px 1fr;
    height: 1180px;
  }
}

/* Контейнер облачков */
.clouds-container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 10px;
  height: clamp(1470px, -67.5263157895px + 3.9122807018 * 100vw, 1693px);
  grid-column: 2;
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .clouds-container {
    grid-column: 2;
    height: 1384px;
  }
}
@media screen and (min-width: 1200px) {
  .clouds-container {
    grid-column: 2;
    height: calc(1674px + -534 * (100vw - 900px) / 700);
  }
}
@media screen and (min-width: 1200px) {
  .clouds-container {
    grid-column: 2;
    height: 1140px;
  }
}

/* Тост */
.toast {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 200;
  cursor: pointer;
  width: 100%;
  padding: 0 14px;
}

.toast.show {
  display: block;
}

.toast img {
  height: 120px;
  width: auto;
}

/* Новый тост-кнопка для выбора облачка */
.toast-select {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 200;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  padding: 0 10px 10px;
}

.toast-select.show {
  display: block;
  animation: toastSlideUp 0.3s ease;
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.toast-select-inner {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.toast-select-inner svg {
  width: 100%;
  height: auto;
}

.toast-select-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* ==================== АДАПТИВНОСТЬ ==================== */
/*
         * Формат облачков: .cloud[data-id="N"] { left: X%; top: Ypx; --w: Wpx; --h: Hpx; }
         * Формат персонажей: .character-xxx { top: Ypx; left/right: Xpx; --w: Wpx; --h: Hpx; }
         */
/* Экраны */
.screen {
  display: none !important;
  min-height: 100vh;
}

.screen.active {
  display: block !important;
}

.screen-send.active {
  display: grid !important;
}

.screen-bingo.active {
  display: flex !important;
}

.screen-display.active {
  display: flex !important;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.stars path {
  will-change: opacity;
  animation: twinkle ease-in-out infinite;
}
.stars path:nth-child(1) {
  animation-duration: 1.5s;
  animation-delay: 0s;
}
.stars path:nth-child(2) {
  animation-duration: 1.8s;
  animation-delay: 0.1s;
}
.stars path:nth-child(3) {
  animation-duration: 1.6s;
  animation-delay: 0.2s;
}
.stars path:nth-child(4) {
  animation-duration: 2s;
  animation-delay: 0.15s;
}
.stars path:nth-child(5) {
  animation-duration: 1.7s;
  animation-delay: 0.25s;
}

/* Облачко */
.cloud {
  position: absolute;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Дефолтные размеры */
  width: var(--cloud-width);
  height: var(--cloud-height);
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud {
    transform: scale(0.85);
  }
}

.cloud:active {
  transform: scale(0.95);
}

/* Свечение — картинка под облачком */
.cloud-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud-glow {
    transform: scale(0.85);
  }
}

.cloud-glow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: none;
}

.cloud.selected .cloud-glow {
  opacity: 1;
  animation: breatheGlow 2s ease-in-out infinite;
}

.cloud.selected .cloud-glow img {
  animation: rotateGlow 8s linear infinite;
}

@keyframes rotateGlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes breatheGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.7;
  }
}
/* Контейнер для Lottie-взрыва */
.cloud-boom {
  position: absolute;
  width: 265%;
  height: 265%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  display: none;
  filter: brightness(1.2) saturate(0);
}

.cloud-boom.active {
  display: block;
}

/* Фон облачка */
.cloud-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.cloud-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cloud-bg .white {
  display: block;
}

.cloud-bg .blue {
  display: none;
}

.cloud.selected .cloud-bg .white {
  display: none;
}

.cloud.selected .cloud-bg .blue {
  display: block;
}

.cloud-bg .cloud-stars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 105%;
  height: 105%;
  display: none;
}

.cloud.selected .cloud-bg .stars {
  display: block;
}

/* Текст на облачке */
.cloud-text {
  position: relative;
  z-index: 2;
  font-weight: 400;
  color: #243e9b;
  line-height: 110%;
  padding: 8px 15px;
  transition: color 0.3s ease;
}
@media screen and (max-width: 681px) {
  .cloud-text {
    font-size: clamp(16px, 0.1421052632px + 0.0403508772 * 100vw, 18.3px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud-text {
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud-text {
    font-size: 18px;
  }
}

/* Выбранное облачко = белый текст */
.cloud.selected .cloud-text {
  color: #ffffff;
}

/* ================================
   CSS Custom Properties (Variables)
   ================================ */
:root {
  /* Button Colors */
  --button-gradient-start: rgba(254, 118, 65, 1);
  --button-gradient-middle: rgba(254, 104, 45, 1);
  --button-gradient-end: rgba(255, 89, 25, 1);
  --button-border-color: rgba(255, 255, 255, 0.5);
  --button-text-color: rgba(255, 255, 255, 1);
  --button-glow-color: rgba(255, 161, 101, 1);
  /* Background Colors */
  --bg-overlay-color: rgba(54, 86, 201, 0.1);
  --bg-border-color: rgba(255, 255, 255, 1);
  /* Dimensions */
  --button-width: 344px;
  --button-height: 60px;
  --button-border-radius: 52px;
  --button-border-width: 1px;
  --bg-width: 365px;
  --bg-height: 80px;
  --bg-border-radius: 98px;
  --bg-border-width: 1px;
  --bg-blur: 20px;
  /* Typography */
  --button-font-size: 16px;
  --button-line-height: 1.3;
}

/* ================================
   Button Wrapper (Container Block)
   ================================ */
.button-wrapper {
  position: relative;
  width: 100%;
  max-width: 365px;
  padding: 10px;
  height: var(--bg-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Element */
.button-wrapper__background {
  will-change: backdrop-filter;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Visual Styles */
  border: var(--bg-border-width) solid var(--bg-border-color);
  border-radius: var(--bg-border-radius);
  backdrop-filter: blur(var(--bg-blur));
  -webkit-backdrop-filter: blur(var(--bg-blur));
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.35);
}

/* ================================
   Button Mobile (Main Button Block)
   ================================ */
.button-mobile {
  will-change: transform, box-shadow, filter;
  /* Positioning */
  position: absolute;
  position: relative;
  /* Dimensions */
  width: 100%;
  max-width: 344px;
  height: var(--button-height);
  /* Reset button styles */
  padding: 0;
  border: var(--button-border-width) solid var(--button-border-color);
  background: none;
  cursor: pointer;
  outline: none;
  /* Visual Styles */
  border-radius: var(--button-border-radius);
  background-image: radial-gradient(ellipse 180.36px 31.458px at center, var(--button-gradient-start) 0%, var(--button-gradient-middle) 50%, var(--button-gradient-end) 100%);
  overflow: hidden;
  /* Transitions */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

/* ================================
   Button Mobile Elements
   ================================ */
/* Glow Effect Container */
.button-mobile__glow {
  /* Positioning */
  position: absolute;
  top: 37.5px;
  left: 50%;
  transform: translateX(-50%);
  /* Dimensions */
  width: 184.5px;
  height: 96.75px;
  /* Prevent pointer events */
  pointer-events: none;
}

/* Glow SVG */
.button-mobile__glow-svg {
  /* Positioning */
  position: absolute;
  top: -20.93%;
  left: -10.98%;
  /* Dimensions */
  width: 122%;
  height: 142%;
  /* Display */
  display: block;
  /* Blend mode for glow effect */
  mix-blend-mode: plus-lighter;
}

/* Button Text */
.button-mobile__text {
  /* Positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Typography */
  font-family: "YS Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  color: var(--button-text-color);
  text-align: center;
  white-space: nowrap;
  /* Prevent text selection for better UX */
  user-select: none;
  -webkit-user-select: none;
  /* Ensure text is above other elements */
  z-index: 2;
  /* Prevent pointer events on text */
  pointer-events: none;
}

/* Inner Shadow Overlay */
.button-mobile__shadow-overlay {
  /* Positioning */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Shadow Effects */
  box-shadow: inset 0px 0px 11.25px 0px rgba(255, 255, 255, 0.7), inset 0px -14.25px 24px 0px rgba(255, 255, 255, 0.22), inset 0px 6px 18px -12px rgba(255, 255, 255, 0.24);
  /* Border radius to match button */
  border-radius: inherit;
  /* Prevent pointer events */
  pointer-events: none;
  /* Ensure overlay is above glow but below text */
  z-index: 1;
}

.button-wrapper__background {
  position: absolute;
  inset: 0;
  /* Move blur here */
}

.button-wrapper__background::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--bg-blur));
  -webkit-backdrop-filter: blur(var(--bg-blur));
  border-radius: inherit;
  z-index: -1;
}

.intro {
  padding: 27px 24px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  max-width: 395px;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 450px) {
  .intro {
    padding-top: 38px;
    gap: clamp(24px, -3.5789473684px + 0.0701754386 * 100vw, 28px);
  }
}
@media screen and (max-width: 681px) {
  .intro {
    gap: 28px;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .intro {
    padding-top: 27px;
    gap: 28px;
  }
}
@media screen and (min-width: 1200px) {
  .intro {
    padding-top: 27px;
    max-width: clamp(524px, 426.2857142857px + 0.1085714286 * 100vw, 600px);
    gap: 28px;
  }
}
@media screen and (min-width: 1200px) {
  .intro {
    max-width: 600px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .intro {
    padding-top: clamp(14px, -47.3698630137px + 0.1917808219 * 100vw, 28px);
    gap: clamp(16px, -36.602739726px + 0.1643835616 * 100vw, 28px);
  }
}
.intro__logo {
  text-align: center;
  position: relative;
}
.intro__heading {
  font-weight: 500;
  line-height: 110%;
  color: #ffffff;
  letter-spacing: 0px;
  text-align: center;
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .intro__heading {
    font-size: 36px;
  }
}
@media screen and (min-width: 1200px) {
  .intro__heading {
    font-size: 36px;
  }
}
@media screen and (max-width: 681px) {
  .intro__heading {
    font-size: 36px;
  }
}
@media screen and (max-width: 450px) {
  .intro__heading {
    font-size: clamp(32px, 4.4210526316px + 0.0701754386 * 100vw, 36px);
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .intro__heading {
    font-size: clamp(25px, -50.8421052632px + 0.1929824561 * 100vw, 36px);
  }
}
.intro__subheading {
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(18px, 4.2105263158px + 0.0350877193 * 100vw, 20px);
  line-height: 120%;
  letter-spacing: 0px;
  text-align: center;
}
@media screen and (max-width: 450px) {
  .intro__subheading {
    padding: 0 21px;
  }
}
@media screen and (min-width: 1200px) {
  .intro__subheading {
    padding: 0 78px;
  }
}
@media screen and (min-width: 1200px) {
  .intro__subheading {
    padding: 0 10px;
  }
}
@media screen and (max-width: 393px) {
  .intro__subheading {
    font-size: clamp(14px, -3.5342465753px + 0.0547945205 * 100vw, 18px);
  }
}

:root {
  --cloud-width: 130px;
  --cloud-height: 80px;
}

.cloud[data-id="1"] {
  width: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
  height: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
  top: 20px;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="1"] {
    left: clamp(16px, -4.6842105263px + 0.0526315789 * 100vw, 19px);
    top: clamp(27px, 7.4347826087px + 0.0434782609 * 100vw, 37px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="1"] {
    left: clamp(16px, -4.6842105263px + 0.0526315789 * 100vw, 19px);
    top: clamp(27px, -62.6315789474px + 0.2280701754 * 100vw, 40px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="1"] {
    left: 37px;
    top: 35px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="1"] {
    left: clamp(145px, 1px + 0.16 * 100vw, 257px);
    top: clamp(37px, 26.7142857143px + 0.0114285714 * 100vw, 45px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="1"] {
    left: 257px;
    top: 45px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="1"] {
    left: -3px;
    top: 2px;
    width: 180px;
  }
}

.cloud[data-id="2"] {
  top: 0px;
  right: 10px;
  width: clamp(165px, 6.4210526316px + 0.4035087719 * 100vw, 188px);
  height: clamp(165px, 6.4210526316px + 0.4035087719 * 100vw, 188px);
}
@media screen and (max-width: 450px) {
  .cloud[data-id="2"] {
    top: clamp(0px, -82.7368421053px + 0.2105263158 * 100vw, 12px);
    right: clamp(0, -89.6315789474px + 0.2280701754 * 100vw, 13px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="2"] {
    right: 223px;
    top: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="2"] {
    right: clamp(331px, 176.7142857143px + 0.1714285714 * 100vw, 451px);
    top: clamp(9px, -19.2857142857px + 0.0314285714 * 100vw, 31px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="2"] {
    right: 451px;
    top: 31px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="2"] {
    right: 0px;
    top: -15px;
    width: 150px;
  }
}

.cloud[data-id="3"] {
  width: clamp(187px, -40.5263157895px + 0.5789473684 * 100vw, 220px);
  height: clamp(187px, -40.5263157895px + 0.5789473684 * 100vw, 220px);
  top: 180px;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="3"] {
    top: clamp(218px, 247.347826087px + -0.0652173913 * 100vw, 203px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="3"] {
    left: 11px;
    top: clamp(184px, -50.4210526316px + 0.5964912281 * 100vw, 218px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="3"] {
    left: 441px;
    top: 79px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="3"] {
    left: clamp(549px, 108px + 0.49 * 100vw, 892px);
    top: clamp(81px, 75.8571428571px + 0.0057142857 * 100vw, 85px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="3"] {
    left: 892px;
    top: 85px;
    width: 210px;
    height: 210px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="3"] {
    top: 130px;
    left: -10px;
  }
}

.cloud[data-id="4"] {
  right: 10px;
  top: 120px;
  width: clamp(186px, 6.7368421053px + 0.4561403509 * 100vw, 212px);
  height: clamp(186px, 6.7368421053px + 0.4561403509 * 100vw, 212px);
}
@media screen and (max-width: 681px) {
  .cloud[data-id="4"] {
    top: clamp(121px, -23.7894736842px + 0.3684210526 * 100vw, 142px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="4"] {
    left: 206px;
    top: clamp(121px, -51.3684210526px + 0.4385964912 * 100vw, 146px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="4"] {
    left: 35px;
    top: 206px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="4"] {
    left: 149px;
    top: clamp(210px, 239.5714285714px + -0.0328571429 * 100vw, 187px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="4"] {
    left: 60px;
    top: 187px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="4"] {
    left: 143px;
    top: 80px;
  }
}

.cloud[data-id="5"] {
  right: 45px;
  top: 270px;
  width: clamp(149px, 4.2105263158px + 0.3684210526 * 100vw, 170px);
  height: clamp(149px, 4.2105263158px + 0.3684210526 * 100vw, 170px);
}
@media screen and (max-width: 681px) {
  .cloud[data-id="5"] {
    top: clamp(311px, 305.1304347826px + 0.0130434783 * 100vw, 314px);
    left: clamp(225px, 225px + 0 * 100vw, 225px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="5"] {
    left: 52%;
    top: clamp(272px, -79.6315789474px + 0.8947368421 * 100vw, 323px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="5"] {
    left: 290px;
    top: 173px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="5"] {
    left: 395px;
    top: clamp(174px, 148.2857142857px + 0.0285714286 * 100vw, 194px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="5"] {
    left: 480px;
    top: 194px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="5"] {
    left: 145px;
    top: 208px;
  }
}

.cloud[data-id="6"] {
  top: 25%;
  left: 6%;
}
@media screen and (max-width: 450px) {
  .cloud[data-id="6"] {
    left: 27px;
    top: clamp(364px, -70.3684210526px + 1.1052631579 * 100vw, 427px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="6"] {
    left: 327px;
    top: 290px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="6"] {
    left: clamp(440px, 109.5714285714px + 0.3671428571 * 100vw, 697px);
    top: clamp(296px, 432.2857142857px + -0.1514285714 * 100vw, 190px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="6"] {
    left: 697px;
    top: 190px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="6"] {
    left: 3px;
    top: 278px;
  }
}
.cloud[data-id="6"] {
  width: clamp(182px, 2.7368421053px + 0.4561403509 * 100vw, 208px);
  height: clamp(182px, 2.7368421053px + 0.4561403509 * 100vw, 208px);
}

@media screen and (max-width: 681px) {
  .cloud[data-id="7"] {
    left: calc(236px + -6 * (100vw - 450px) / 230);
    top: calc(580px + -35 * (100vw - 450px) / 230);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="7"] {
    left: clamp(206px, -0.8421052632px + 0.5263157895 * 100vw, 236px);
    top: clamp(492px, -114.7368421053px + 1.5438596491 * 100vw, 580px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="7"] {
    left: 112px;
    top: 380px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="7"] {
    left: clamp(217px, 133.4285714286px + 0.0928571429 * 100vw, 282px);
    top: clamp(382px, 509.2857142857px + -0.1414285714 * 100vw, 283px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="7"] {
    left: 282px;
    top: 283px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="7"] {
    left: 153px;
    top: 380px;
  }
}
.cloud[data-id="7"] {
  width: clamp(169px, 3.5263157895px + 0.4210526316 * 100vw, 193px);
  height: clamp(169px, 3.5263157895px + 0.4210526316 * 100vw, 193px);
}

.cloud[data-id="8"] {
  top: 520px;
  left: 10px;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="8"] {
    left: 7px;
    top: calc(607px + -7 * (100vw - 450px) / 230);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="8"] {
    left: 7px;
    top: clamp(520px, -79.8421052632px + 1.5263157895 * 100vw, 607px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="8"] {
    left: 271px;
    top: 517px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="8"] {
    left: clamp(381px, 216.4285714286px + 0.1828571429 * 100vw, 509px);
    top: clamp(519px, 750.4285714286px + -0.2571428571 * 100vw, 339px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="8"] {
    left: 509px;
    top: 339px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="8"] {
    left: -11px;
    top: 403px;
  }
}
.cloud[data-id="8"] {
  width: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
  height: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
}

.cloud[data-id="9"] {
  top: 660px;
  left: auto;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="9"] {
    left: 8px;
    top: clamp(777px, 790.6956521739px + -0.0304347826 * 100vw, 770px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="9"] {
    left: 8px;
    top: clamp(668px, -83.5263157895px + 1.9122807018 * 100vw, 777px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="9"] {
    left: 444px;
    top: 636px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="9"] {
    left: clamp(550px, 211.8571428571px + 0.3757142857 * 100vw, 813px);
    top: clamp(637px, 998.2857142857px + -0.4014285714 * 100vw, 356px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="9"] {
    left: 813px;
    top: 356px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="9"] {
    left: -11px;
    top: 523px;
  }
}
.cloud[data-id="9"] {
  width: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
  height: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
}

.cloud[data-id="10"] {
  right: 2%;
  top: 43%;
}
@media screen and (max-width: 450px) {
  .cloud[data-id="10"] {
    left: 50%;
    top: clamp(630px, -52.5789473684px + 1.7368421053 * 100vw, 729px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="10"] {
    left: 20px;
    top: 529px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="10"] {
    left: 125px;
    top: clamp(536px, 660.7142857143px + -0.1385714286 * 100vw, 439px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="10"] {
    left: 85px;
    top: 439px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="10"] {
    left: 139px;
    top: 488px;
  }
}
.cloud[data-id="10"] {
  width: clamp(189px, 2.8421052632px + 0.4736842105 * 100vw, 216px);
  height: clamp(189px, 2.8421052632px + 0.4736842105 * 100vw, 216px);
}

.cloud[data-id="11"] {
  top: 140px;
  left: 780px;
  width: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
  height: clamp(188px, 1.8421052632px + 0.4736842105 * 100vw, 215px);
}
@media screen and (max-width: 681px) {
  .cloud[data-id="11"] {
    left: calc(160px + -55 * (100vw - 450px) / 230);
    top: calc(900px + 20 * (100vw - 450px) / 230);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="11"] {
    left: clamp(140px, 2.1052631579px + 0.350877193 * 100vw, 160px);
    top: clamp(780px, -47.3684210526px + 2.1052631579 * 100vw, 900px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="11"] {
    left: 209px;
    top: 697px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="11"] {
    left: clamp(319px, 293.2857142857px + 0.0285714286 * 100vw, 339px);
    top: clamp(697px, 979.8571428571px + -0.3142857143 * 100vw, 477px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="11"] {
    left: 339px;
    top: 477px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="11"] {
    left: 99px;
    top: 615px;
  }
}

.cloud[data-id="12"] {
  top: 62%;
  right: 0;
}
@media screen and (max-width: 450px) {
  .cloud[data-id="12"] {
    left: clamp(196px, 2.9473684211px + 0.4912280702 * 100vw, 224px);
    top: clamp(911px, -68.0526315789px + 2.4912280702 * 100vw, 1053px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="12"] {
    left: 424px;
    top: 813px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="12"] {
    left: clamp(534px, 418.2857142857px + 0.1285714286 * 100vw, 624px);
    top: clamp(823px, 1249.8571428571px + -0.4742857143 * 100vw, 491px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="12"] {
    left: 624px;
    top: 491px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="12"] {
    left: 139px;
    top: 719px;
  }
}
.cloud[data-id="12"] {
  width: clamp(202px, 2.0526315789px + 0.5087719298 * 100vw, 231px);
  height: clamp(202px, 2.0526315789px + 0.5087719298 * 100vw, 231px);
}

.cloud[data-id="13"] {
  top: 67%;
  left: 2%;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="13"] {
    top: calc(1130px + -20 * (100vw - 450px) / 230);
    left: clamp(8px, 6.0434782609px + 0.0043478261 * 100vw, 9px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="13"] {
    left: clamp(8px, 1.1052631579px + 0.0175438596 * 100vw, 9px);
    top: clamp(987px, -67.8947368421px + 2.6842105263 * 100vw, 1140px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="13"] {
    left: 135px;
    top: 876px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="13"] {
    left: clamp(245px, 454.5714285714px + -0.2328571429 * 100vw, 82px);
    top: clamp(880px, 1206.5714285714px + -0.3628571429 * 100vw, 626px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="13"] {
    left: 82px;
    top: 626px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="13"] {
    left: -11px;
    top: 780px;
  }
}
.cloud[data-id="13"] {
  width: clamp(190px, 3.8421052632px + 0.4736842105 * 100vw, 217px);
  height: clamp(190px, 3.8421052632px + 0.4736842105 * 100vw, 217px);
}

.cloud[data-id="14"] {
  top: 73%;
  right: 3%;
}
@media screen and (max-width: 450px) {
  .cloud[data-id="14"] {
    left: clamp(194px, -12.8421052632px + 0.5263157895 * 100vw, 224px);
    top: clamp(1070px, -102.1052631579px + 2.9824561404 * 100vw, 1240px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="14"] {
    left: 304px;
    top: 1017px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="14"] {
    left: clamp(404px, 391.1428571429px + 0.0142857143 * 100vw, 414px);
    top: clamp(1017px, 1503px + -0.54 * 100vw, 639px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="14"] {
    left: 414px;
    top: 639px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="14"] {
    left: 139px;
    top: 850px;
  }
}
.cloud[data-id="14"] {
  width: clamp(190px, 3.8421052632px + 0.4736842105 * 100vw, 217px);
  height: clamp(190px, 3.8421052632px + 0.4736842105 * 100vw, 217px);
}

.cloud[data-id="15"] {
  width: clamp(186px, 6.7368421053px + 0.4561403509 * 100vw, 212px);
  height: clamp(186px, 6.7368421053px + 0.4561403509 * 100vw, 212px);
  left: 0;
  top: 1146px;
}
@media screen and (max-width: 681px) {
  .cloud[data-id="15"] {
    left: clamp(3px, -52.1578947368px + 0.1403508772 * 100vw, 11px);
    top: clamp(1316px, 1310.5226480836px + 0.0139372822 * 100vw, 1320px);
  }
}
@media screen and (max-width: 450px) {
  .cloud[data-id="15"] {
    left: clamp(3px, -52.1578947368px + 0.1403508772 * 100vw, 11px);
    top: clamp(1150px, 5.4736842105px + 2.9122807018 * 100vw, 1316px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="15"] {
    left: 17px;
    top: 1051px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="15"] {
    left: clamp(128px, -770.7142857143px + 0.9985714286 * 100vw, 827px);
    top: clamp(1051px, 1575.5714285714px + -0.5828571429 * 100vw, 643px);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="15"] {
    left: 817px;
    top: 633px;
    width: 222px;
    height: 242px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="15"] {
    left: -11px;
    top: 914px;
  }
}

.cloud[data-id="16"] {
  bottom: 0;
  left: 50px;
}
@media screen and (max-width: 450px) {
  .cloud[data-id="16"] {
    bottom: clamp(0px, -137.8947368421px + 0.350877193 * 100vw, 20px);
    left: clamp(50px, -363.6842105263px + 1.0526315789 * 100vw, 110px);
  }
}
@media screen and (max-width: 681px) {
  .cloud[data-id="16"] {
    bottom: clamp(0px, -39.1304347826px + 0.0869565217 * 100vw, 20px);
    left: clamp(50px, -67.3913043478px + 0.2608695652 * 100vw, 110px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .cloud[data-id="16"] {
    left: 190px;
    top: 1188px;
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="16"] {
    left: clamp(300px, -593.5714285714px + 0.9928571429 * 100vw, 995px);
    top: calc(1188px + -705 * (100vw - 900px) / 700);
  }
}
@media screen and (min-width: 1200px) {
  .cloud[data-id="16"] {
    left: 995px;
    top: 483px;
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .cloud[data-id="16"] {
    left: 20px;
    top: 1038px;
  }
}
.cloud[data-id="16"] {
  width: clamp(173px, 48.8947368421px + 0.3157894737 * 100vw, 191px);
  height: clamp(173px, 48.8947368421px + 0.3157894737 * 100vw, 191px);
}

/* Персонажи */
.character {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-box {
  grid-column: 1;
  grid-row: 1;
  position: absolute;
}
@media screen and (min-width: 1200px) {
  .character-box {
    top: 662px;
    left: -175px;
    width: 371px;
    height: 356px;
  }
}
@media screen and (min-width: 1200px) {
  .character-box {
    top: 434px;
    left: calc(-130px + 5 * (100vw - 1200px) / 720);
    width: clamp(392px, 177px + 0.1791666667 * 100vw, 521px);
    height: clamp(300px, 73.3333333333px + 0.1888888889 * 100vw, 436px);
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .character-box {
    top: 662px;
    left: -90px;
    width: 371px;
    height: 356px;
  }
}
@media screen and (max-width: 681px) {
  .character-box {
    top: calc(895px + -13 * (100vw - 450px) / 230);
    left: calc(-46px + -29 * (100vw - 450px) / 230);
    width: clamp(290px, 192.1739130435px + 0.2173913043 * 100vw, 340px);
    height: clamp(314px, 263.1304347826px + 0.1130434783 * 100vw, 340px);
  }
}
@media screen and (max-width: 450px) {
  .character-box {
    top: clamp(778px, -28.6842105263px + 2.0526315789 * 100vw, 895px);
    left: calc(-52px + 6 * (100vw - 393px) / 57);
    width: clamp(274px, 163.6842105263px + 0.2807017544 * 100vw, 290px);
    height: clamp(274px, -1.7894736842px + 0.701754386 * 100vw, 314px);
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .character-box {
    left: 0px;
    top: 600px;
    width: 150px;
  }
}

.character-tree {
  position: absolute;
  grid-column: 3;
  grid-row: 1;
}
@media screen and (min-width: 1200px) {
  .character-tree {
    top: 928px;
    right: -30px;
    width: 613px;
    height: 469px;
  }
}
@media screen and (min-width: 1200px) {
  .character-tree {
    top: 521px;
    right: -86px;
    width: 523px;
    height: 459px;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .character-tree {
    top: 928px;
    right: -110px;
    width: 523px;
    height: 459px;
  }
}
@media screen and (max-width: 681px) {
  .character-tree {
    top: calc(1316px + -38 * (100vw - 450px) / 230);
    right: calc(-50px + 30 * (100vw - 450px) / 230);
    width: calc(399px + -30 * (100vw - 450px) / 230);
    height: calc(370px + 90 * (100vw - 450px) / 230);
  }
}
@media screen and (max-width: 450px) {
  .character-tree {
    top: clamp(1136px, -105.0526315789px + 3.1578947368 * 100vw, 1316px);
    right: clamp(-52px, -65.7894736842px + 0.0350877193 * 100vw, -50px);
    width: clamp(379px, 241.1052631579px + 0.350877193 * 100vw, 399px);
    height: clamp(340px, 133.1578947368px + 0.5263157895 * 100vw, 370px);
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .character-tree {
    right: -4px;
    top: 887px;
    width: 231px;
  }
}

.character-ship {
  position: absolute;
}
@media screen and (min-width: 1200px) {
  .character-ship {
    top: 220px;
    right: -220px;
    width: 444px;
    height: 255px;
  }
}
@media screen and (min-width: 1200px) {
  .character-ship {
    top: 220px;
    right: -190px;
    width: 384px;
    height: 235px;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .character-ship {
    top: 415px;
    right: -139px;
    width: 384px;
    height: 235px;
  }
}
@media screen and (max-width: 681px) {
  .character-ship {
    top: clamp(414px, 437.4782608696px + -0.052173913 * 100vw, 402px);
    left: clamp(212px, 32px + 0.4 * 100vw, 304px);
    width: clamp(329px, 289.8695652174px + 0.0869565217 * 100vw, 349px);
    height: clamp(229px, 225.0869565217px + 0.0086956522 * 100vw, 231px);
  }
}
@media screen and (max-width: 450px) {
  .character-ship {
    top: clamp(360px, -12.3157894737px + 0.9473684211 * 100vw, 414px);
    left: clamp(189px, 30.4210526316px + 0.4035087719 * 100vw, 212px);
    width: clamp(279px, -65.7368421053px + 0.8771929825 * 100vw, 329px);
    height: clamp(179px, -165.7368421053px + 0.8771929825 * 100vw, 229px);
  }
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .character-ship {
    top: 264px;
    left: 157px;
    width: 220px;
    height: 200px;
  }
}

/* Форма */
.form-section {
  position: relative;
  z-index: 20;
  margin: 0 auto;
}
@media screen and (max-width: 681px) {
  .form-section {
    width: 430px;
  }
}
@media screen and (min-width: 682px) and (max-width: 1199px) {
  .form-section {
    width: 430px;
  }
}
@media screen and (min-width: 1200px) {
  .form-section {
    width: 430px;
    padding: 0;
    bottom: 252px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 450px) {
  .form-section {
    padding: 0 14px;
    width: 100%;
  }
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 0.2105263158px + 0.0350877193 * 100vw, 16px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 204, 179, 0.5) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.6px solid rgba(255, 255, 255, 0.4);
  border-radius: 36px;
  padding: clamp(20px, -0.6842105263px + 0.0526315789 * 100vw, 23px);
  max-width: 422px;
  margin: 0 auto;
}

.custom-select {
  position: relative;
  width: 100%;
}

.select-trigger {
  width: 100%;
  padding: clamp(16px, -39.1578947368px + 0.1403508772 * 100vw, 24px) clamp(50px, -87.8947368421px + 0.350877193 * 100vw, 70px) clamp(16px, -32.2631578947px + 0.1228070175 * 100vw, 23px) clamp(20px, -7.5789473684px + 0.0701754386 * 100vw, 24px);
  border: 1px solid #ff6b35;
  border-radius: 50px;
  background: white;
  font-family: inherit;
  font-size: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px);
  font-weight: 500;
  color: #333;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.select-trigger.placeholder {
  color: #333;
}

.select-trigger.error {
  border-color: #e53935;
  color: #e53935;
}

.select-trigger.error.placeholder {
  color: #e53935;
}

.custom-select::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.select-dropdown {
  padding-top: 16px;
  padding-bottom: 16px;
  display: none;
  position: absolute;
  /* Открываётся ВВЕРХ */
  bottom: calc(100% + 5px);
  top: auto;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  /* Скрываем нативный скроллбар */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}
.select-dropdown::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* Градиент внизу дропдауна - sticky элемент */
.select-dropdown-gradient {
  position: sticky;
  bottom: -16px;
  /* Компенсируем padding-bottom родителя */
  left: 0;
  right: 0;
  height: 50px;
  margin-top: -41px;
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

/* Кастомный скроллбар */
.custom-scrollbar-track {
  position: absolute;
  right: 24px;
  width: 2px;
  height: 252px;
  background: #D3D3D3;
  border-radius: 2px;
  z-index: 101;
  display: none;
  pointer-events: auto;
}
.custom-scrollbar-track.visible {
  display: block;
}

.custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 57px;
  background: #ff6b35;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.custom-scrollbar-thumb:hover {
  background: #ff8a50;
}
.custom-scrollbar-thumb:active {
  background: #e55a2b;
}

.select-dropdown.open {
  display: block;
}

.select-option {
  padding: 14px 20px;
  cursor: pointer;
  font-size: 16px;
  width: calc(100% - 26px);
}

.select-option:last-child {
  border-bottom: none;
}

.select-option:hover {
  background: #f8f8f8;
}

.form-group.hidden {
  display: none;
}

.btn-next {
  font-style: "YS Text";
  width: 100%;
  padding: clamp(18px, -23.3684210526px + 0.1052631579 * 100vw, 24px);
  background: #F86025;
  border: none;
  border-radius: 50px;
  color: white;
  font-size: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px);
  font-weight: 500;
  line-height: 130%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-next:active {
  transform: scale(0.98);
}

.logo {
  height: clamp(50px, 1.7368421053px + 0.1228070175 * 100vw, 57px);
  width: clamp(200px, 0.0526315789px + 0.5087719298 * 100vw, 229px);
  margin: 0 auto;
}
@media screen and (min-width: 320px) and (max-width: 392px) {
  .logo {
    width: clamp(160px, -315.7368421053px + 1.2105263158 * 100vw, 229px);
    height: clamp(53px, 25.4210526316px + 0.0701754386 * 100vw, 57px);
  }
}

/* Карточка пожелания */
.wish-card-wrapper {
  width: 100%;
  position: relative;
}

/* Контейнер карточки — двухцветная рамка */
.wish-card {
  width: 100%;
  max-width: 412px;
  margin: 0 auto;
  position: relative;
  border-radius: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px);
  background: transparent;
}

/* Жёлтая рамка — бока и низ */
.wish-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: clamp(3px, 0.4vw, 5px) solid #ffc550;
  border-top: none;
  pointer-events: none;
  z-index: 1;
}

/* Оранжевая рамка — верх */
.wish-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(50px, 10vh, 80px);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: clamp(3px, 0.4vw, 5px) solid #ff5b10;
  border-bottom: none;
  pointer-events: none;
  z-index: 1;
}

.wish-card-content {
  background: transparent;
  padding: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px) clamp(21px, 0.3157894737px + 0.0526315789 * 100vw, 24px) clamp(18px, -9.5789473684px + 0.0701754386 * 100vw, 22px);
  position: relative;
  z-index: 1;
}

/* Логотип почты */
.wish-card-icon {
  margin-bottom: clamp(10px, -3.7894736842px + 0.0350877193 * 100vw, 12px);
}

.wish-card-icon img {
  height: clamp(29px, -5.4736842105px + 0.0877192982 * 100vw, 34px);
  width: clamp(104px, -6.3157894737px + 0.2807017544 * 100vw, 120px);
}

/* Внутренний белый блок */
.wish-card-inner {
  background: #ffffff;
  border-radius: clamp(8px, 1.1052631579px + 0.0175438596 * 100vw, 9px);
  padding: clamp(12px, -1.7894736842px + 0.0350877193 * 100vw, 14px);
  min-height: 207px;
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(14px, 0.2105263158px + 0.0350877193 * 100vw, 16px);
}

.wish-card-label {
  font-size: clamp(14px, 0.2105263158px + 0.0350877193 * 100vw, 16px);
  font-weight: 500;
  color: rgba(51, 51, 51, 0.5);
  text-transform: uppercase;
  letter-spacing: 0px;
  line-height: 100%;
  margin-bottom: clamp(5px, -1.8947368421px + 0.0175438596 * 100vw, 6px);
}

.wish-card-text {
  font-size: clamp(28px, 0.4210526316px + 0.0701754386 * 100vw, 32px);
  font-weight: 500;
  letter-spacing: 0px;
  color: #333333;
  line-height: 100%;
  padding-bottom: clamp(24px, -113.8947368421px + 0.350877193 * 100vw, 44px);
}

.wish-card-recipients {
  margin-bottom: 0;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wish-card-recipient {
  flex: 1;
}

.wish-card-recipient-label {
  font-size: clamp(14px, 0.2105263158px + 0.0350877193 * 100vw, 16px);
  font-weight: 500;
  color: rgba(51, 51, 51, 0.5);
  text-transform: uppercase;
  letter-spacing: 0px;
  line-height: 100%;
  margin-bottom: clamp(6px, 12.8947368421px + -0.0175438596 * 100vw, 5px);
}

.wish-card-recipient-value {
  font-size: clamp(19px, 5.2105263158px + 0.0350877193 * 100vw, 21px);
  font-weight: 500;
  color: #FF6427;
  letter-spacing: 0px;
  line-height: 120%;
}
.wish-card-recipient-value--blue {
  text-transform: capitalize;
  color: #5071F6;
}

/* Кнопка */
.btn-send {
  width: 100%;
  padding: clamp(18px, 4.2105263158px + 0.0350877193 * 100vw, 20px) 20px clamp(20px, -7.5789473684px + 0.0701754386 * 100vw, 24px);
  background: linear-gradient(0deg, #F86025, #F86025), linear-gradient(314.65deg, rgba(255, 183, 67, 0.4) -2.22%, rgba(255, 183, 67, 0) 29.26%);
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: clamp(16px, 2.2105263158px + 0.0350877193 * 100vw, 18px);
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
}

.btn-send:active {
  transform: translateY(0);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(-30px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  animation: fadeInDown 1s ease-in-out;
}

.fade-out-down {
  animation: fadeOutDown 1s ease-in-out;
}

/* Анимации для смены контента сообщений */
@keyframes contentFadeIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes contentFadeOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}
.content-fade-in {
  animation: contentFadeIn 1s ease-in-out forwards;
}

.content-fade-out {
  animation: contentFadeOut 1s ease-in-out forwards;
}

/* Анимации для display-message блока */
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: scale(0.25), translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(0.25), translateY(0);
  }
}
@keyframes messageSlideOut {
  from {
    opacity: 1;
    transform: scale(0.25), translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.25), translateY(50px);
  }
}
@keyframes breathQr {
  0%, 100% {
    transform: translate(-50%, 0) scale(0.95);
  }
  50% {
    transform: translate(-50%, 0) scale(1.05);
  }
}
/* Карточка письма */
.message-card {
  padding: 90px;
  width: 2340px;
  height: 1552px;
  background: white;
  border-radius: 150px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.message-card__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  gap: 160px;
  justify-content: space-between;
}
.message-card {
  /* Шапка письма */
}
.message-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message-card__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.message-card__header-left span {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
}
.message-card__header-actions img {
  transform: translateY(-20px);
}
.message-card {
  /* Контейнер для двух блоков контента */
}
.message-card__wrapper {
  flex-grow: 1;
  position: relative;
}
.message-card {
  /* Контент письма */
}
.message-card__content {
  display: flex;
  gap: 160px;
  height: 100%;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
.message-card__content--active {
  opacity: 1;
  pointer-events: auto;
}
.message-card__wish-text {
  flex-grow: 1;
  font-weight: 500;
  font-size: 190px;
  line-height: 110%;
  color: #222222;
}
.message-card__recipients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
}
.message-card__recipient-label {
  font-weight: 500;
  font-size: 70px;
  line-height: 100%;
  letter-spacing: 0px;
  vertical-align: middle;
  text-transform: uppercase;
  color: rgba(51, 51, 51, 0.5);
  margin-bottom: 27px;
}
.message-card__recipient-value {
  font-weight: 500;
  font-size: 130px;
  line-height: 110%;
  letter-spacing: 0px;
  color: #FF6427;
}
.message-card__recipient-value--blue {
  color: #5071F6;
}
.message-card {
  /* Футер с пейзажем */
}
.message-card__footer {
  width: 100%;
}

/* Заглушка — когда нет письма */
@media screen and (width: 640px) {
  .display-idle__box {
    transform: scale(0.55);
  }
  .display-idle__tree {
    transform: scale(0.55);
  }
}
.display-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 1s ease-out;
}
.display-idle.hidden {
  opacity: 0;
  pointer-events: none;
}
.display-idle.visible .display-idle__phone,
.display-idle.visible .display-idle__phone-cloud-wrapper,
.display-idle.visible .display-idle__phone-text,
.display-idle.visible .display-idle__box,
.display-idle.visible .display-idle__tree,
.display-idle.visible .display-idle__cloud-boom {
  opacity: 1;
}
.display-idle.entering .display-idle__phone {
  animation: idle-enter-phone 0.6s ease-out forwards;
  animation-delay: 0.6s;
}
.display-idle.entering .display-idle__phone-cloud-wrapper {
  animation: idle-enter-phone-cloud 0.6s ease-out forwards;
  animation-delay: 1.2s;
}
.display-idle.entering .display-idle__phone-text {
  animation: idle-enter-phone-text 0.6s ease-out forwards;
  animation-delay: 1.4s;
}
.display-idle.entering .display-idle__box {
  animation: idle-enter-box 0.6s ease-out forwards;
  animation-delay: 0s;
}
.display-idle.entering .display-idle__tree {
  animation: idle-enter-tree 0.6s ease-out forwards;
  animation-delay: 0s;
}
.display-idle.entering .display-idle__cloud-boom {
  animation: idle-enter-cloud-boom 0.6s ease-out forwards;
  animation-delay: 1.5s;
}
.display-idle.leaving .display-idle__phone,
.display-idle.leaving .display-idle__phone-cloud-wrapper,
.display-idle.leaving .display-idle__phone-text,
.display-idle.leaving .display-idle__box,
.display-idle.leaving .display-idle__tree,
.display-idle.leaving .display-idle__cloud-boom {
  opacity: 1;
}
.display-idle.leaving .display-idle__phone {
  animation: idle-leave-phone 0.6s ease-in forwards;
  animation-delay: 0.8s;
}
.display-idle.leaving .display-idle__phone-cloud-wrapper {
  animation: idle-leave-phone-cloud 0.6s ease-in forwards;
  animation-delay: 0.2s;
}
.display-idle.leaving .display-idle__phone-text {
  animation: idle-leave-phone-text 0.6s ease-in forwards;
  animation-delay: 0s;
}
.display-idle.leaving .display-idle__box {
  animation: idle-leave-box 0.6s ease-in forwards;
  animation-delay: 1.4s;
}
.display-idle.leaving .display-idle__tree {
  animation: idle-leave-tree 0.6s ease-in forwards;
  animation-delay: 1.4s;
}
.display-idle.leaving .display-idle__cloud-boom {
  animation: idle-leave-cloud-boom 0.6s ease-in forwards;
  animation-delay: 0.3s;
}
.display-idle__text {
  font-size: 52px;
  font-weight: 700;
  color: #1a1a4e;
  line-height: 1.3;
  text-align: center;
}
.display-idle__phone {
  transform: translateX(40px);
  top: 156px;
  width: 1365px;
  height: 2009px;
  position: absolute;
  opacity: 0;
}
.display-idle__phone-cloud {
  position: absolute;
  z-index: 1;
  width: 1280px;
  height: auto;
  transform: translate(-50%);
}
.display-idle__phone-qr {
  position: absolute;
  top: 345px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 541px;
  height: 541px;
  animation: breathQr 10s ease-in-out infinite;
  transform-origin: center center;
}
.display-idle__phone-cloud-wrapper {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.display-idle__cloud-boom {
  left: -540px;
  z-index: 20;
  position: absolute;
  opacity: 0;
  width: 180%;
  height: 180%;
  top: -1190px;
}
.display-idle__phone-img {
  backdrop-filter: blur(15px);
  position: absolute;
  top: 0;
  left: 0;
}
.display-idle__box {
  position: absolute;
  bottom: -310px;
  left: -278px;
  transform: rotate(29deg) scale(0.9);
  z-index: 1;
  opacity: 0;
}
.display-idle__tree {
  position: absolute;
  right: -389px;
  transform: rotate(28deg) scale(0.9);
  bottom: -436px;
  z-index: -1;
  opacity: 0;
}
.display-idle__phone-text {
  font-weight: 500;
  font-size: 120px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  position: absolute;
  z-index: 2;
  color: #102994;
  width: 1135px;
  transform: translate(-50%);
  bottom: 475px;
  opacity: 0;
}

@keyframes idle-enter-phone {
  0% {
    transform: translateX(40px) translateY(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(40px) translateY(0);
    opacity: 1;
  }
}
@keyframes idle-enter-phone-cloud {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes idle-enter-phone-text {
  0% {
    transform: translate(-50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%) scale(1);
    opacity: 1;
  }
}
@keyframes idle-enter-box {
  0% {
    left: -1500px;
    transform: rotate(0deg) scale(0.9);
    opacity: 0;
  }
  100% {
    left: -278px;
    transform: rotate(29deg) scale(0.9);
    opacity: 1;
  }
}
@keyframes idle-enter-tree {
  0% {
    right: -1500px;
    transform: rotate(0deg) scale(0.9);
    opacity: 0;
  }
  100% {
    right: -389px;
    transform: rotate(28deg) scale(0.9);
    opacity: 1;
  }
}
@keyframes idle-enter-cloud-boom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes idle-leave-phone {
  0% {
    transform: translateX(40px) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(40px) translateY(300px);
    opacity: 0;
  }
}
@keyframes idle-leave-phone-cloud {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes idle-leave-phone-text {
  0% {
    transform: translate(-50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes idle-leave-box {
  0% {
    left: -278px;
    transform: rotate(29deg) scale(0.9);
    opacity: 1;
  }
  100% {
    left: -1500px;
    transform: rotate(0deg) scale(0.9);
    opacity: 0;
  }
}
@keyframes idle-leave-tree {
  0% {
    right: -389px;
    transform: rotate(28deg) scale(0.9);
    opacity: 1;
  }
  100% {
    right: -1500px;
    transform: rotate(0deg) scale(0.9);
    opacity: 0;
  }
}
@keyframes idle-leave-cloud-boom {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.card {
  position: relative;
  width: 365px;
  height: 74px;
  margin: 0 auto;
}

/* Фон карточки */
.card-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 365px;
  height: 74px;
  background: linear-gradient(269.337deg, rgba(255, 255, 255, 0.6) 32.597%, rgb(179, 206, 255) 100.03%);
  border: 0.6px solid rgb(255, 255, 255);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15), 0px 0px 37.4px 0px rgba(40, 180, 255, 0.2);
  transform: rotate(180deg);
}

/* Контент карточки */
.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 50px 0 20px;
}

.card-text {
  color: #243f9b;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  white-space: normal;
}

/* Кнопка закрытия */
.close-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.close-button:hover {
  opacity: 0.8;
}

.close-button:active {
  opacity: 0.6;
}

.close-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Адаптивность */
@media (max-width: 393px) {
  .card {
    width: 100%;
    max-width: 365px;
  }
  .card-background {
    width: 100%;
  }
  .card-content {
    padding: 0 45px 0 15px;
  }
  .card-text {
    font-size: clamp(12px, -4px + 0.05 * 100vw, 16px);
  }
  .close-button {
    right: 15px;
  }
}

/*# sourceMappingURL=styles.css.map */