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

   body {
     min-height: 100vh;
     font-family: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(180deg, #005bff 0%, #8300e9 100%);
     background-size: 320% 320%;
     animation: bgFloat 28s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
     color: #0f172a;
     overflow: hidden;
   }

   @keyframes bgFloat {
     0% { background-position: 0% 0%; }
     50% { background-position: 100% 100%; }
     100% { background-position: 0% 0%; }
   }

   .circles {
     position: fixed;
     inset: 0;
     overflow: hidden;
     z-index: -1;
     pointer-events: none;
   }

   .circles span {
     position: absolute;
     top: -10%;
     display: block;
     color: rgba(255,255,255,0.9);
     user-select: none;
     pointer-events: none;
     animation: fall linear infinite;
     opacity: 0.6;
   }

   /* 30 падающих рублей с разным размером, скоростью и задержкой (десктоп) */
   .circles span:nth-child(1)  { left: 2%;  font-size: 14px; animation-duration: 28s; animation-delay: -1s; }
   .circles span:nth-child(2)  { left: 6%;  font-size: 22px; animation-duration: 30s; animation-delay: -3s; }
   .circles span:nth-child(3)  { left: 10%; font-size: 18px; animation-duration: 28s; animation-delay: -2s; }
   .circles span:nth-child(4)  { left: 14%; font-size: 26px; animation-duration: 30s; animation-delay: -4s; }
   .circles span:nth-child(5)  { left: 18%; font-size: 16px; animation-duration: 28s; animation-delay: -1s; }
   .circles span:nth-child(6)  { left: 22%; font-size: 28px; animation-duration: 32s; animation-delay: -5s; }
   .circles span:nth-child(7)  { left: 26%; font-size: 20px; animation-duration: 32s; animation-delay: -2s; }
   .circles span:nth-child(8)  { left: 30%; font-size: 32px; animation-duration: 28s; animation-delay: -6s; }
   .circles span:nth-child(9)  { left: 34%; font-size: 18px; animation-duration: 28s; animation-delay: -1s; }
   .circles span:nth-child(10) { left: 38%; font-size: 30px; animation-duration: 28s; animation-delay: -3s; }
   .circles span:nth-child(11) { left: 42%; font-size: 24px; animation-duration: 30s; animation-delay: -2s; }
   .circles span:nth-child(12) { left: 46%; font-size: 28px; animation-duration: 32s; animation-delay: -5s; }
   .circles span:nth-child(13) { left: 50%; font-size: 20px; animation-duration: 28s; animation-delay: -3s; }
   .circles span:nth-child(14) { left: 54%; font-size: 34px; animation-duration: 28s; animation-delay: -7s; }
   .circles span:nth-child(15) { left: 58%; font-size: 16px; animation-duration: 28s; animation-delay: -2s; }
   .circles span:nth-child(16) { left: 62%; font-size: 28px; animation-duration: 30s; animation-delay: -4s; }
   .circles span:nth-child(17) { left: 66%; font-size: 22px; animation-duration: 30s; animation-delay: -1s; }
   .circles span:nth-child(18) { left: 70%; font-size: 26px; animation-duration: 28s; animation-delay: -6s; }
   .circles span:nth-child(19) { left: 74%; font-size: 18px; animation-duration: 28s; animation-delay: -1s; }
   .circles span:nth-child(20) { left: 78%; font-size: 30px; animation-duration: 28s; animation-delay: -3s; }
   .circles span:nth-child(21) { left: 82%; font-size: 24px; animation-duration: 30s; animation-delay: -2s; }
   .circles span:nth-child(22) { left: 86%; font-size: 28px; animation-duration: 32s; animation-delay: -5s; }
   .circles span:nth-child(23) { left: 90%; font-size: 20px; animation-duration: 28s; animation-delay: -3s; }
   .circles span:nth-child(24) { left: 94%; font-size: 34px; animation-duration: 28s; animation-delay: -7s; }
   .circles span:nth-child(25) { left: 4%;  font-size: 16px; animation-duration: 28s; animation-delay: -2s; }
   .circles span:nth-child(26) { left: 8%;  font-size: 22px; animation-duration: 32s; animation-delay: -4s; }
   .circles span:nth-child(27) { left: 16%; font-size: 26px; animation-duration: 28s; animation-delay: -6s; }
   .circles span:nth-child(28) { left: 24%; font-size: 20px; animation-duration: 28s; animation-delay: -2s; }
   .circles span:nth-child(29) { left: 32%; font-size: 32px; animation-duration: 30s; animation-delay: -8s; }
   .circles span:nth-child(30) { left: 40%; font-size: 18px; animation-duration: 28s; animation-delay: -1s; }

   @keyframes fall {
     0%   { transform: translateY(-20vh); opacity: 0; }
     10%  { opacity: 0.9; }
     100% { transform: translateY(120vh); opacity: 0; }
   }

  @media (max-width: 600px) {

 .circles {
   display: block; /* снова включаем символы */
 }

 .circles span {
   opacity: 0.1;       /* слабые, чтобы не мешали */
   font-size: 16px !important;
   animation-duration: 38s !important;
 }

 /* Новое распределение: аккуратно по ширине */
 .circles span:nth-child(1)  { left: 5%; }
 .circles span:nth-child(2)  { left: 17%; }
 .circles span:nth-child(3)  { left: 29%; }
 .circles span:nth-child(4)  { left: 41%; }
 .circles span:nth-child(5)  { left: 53%; }
 .circles span:nth-child(6)  { left: 65%; }
 .circles span:nth-child(7)  { left: 75%; }
 .circles span:nth-child(8)  { left: 82%; }
 .circles span:nth-child(9)  { left: 89%; }
 .circles span:nth-child(10) { left: 95%; }

 /* Всё остальные ₽ отключаем */
 .circles span:nth-child(n+11) {
   display: none;
 }
}

   .wrapper {
     width: 100%;
     max-width: 390px;
     padding: 24px;
     z-index: 1;
   }

   .card {
     background: transparent;
     border: none;
     box-shadow: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     padding: 0;
     border-radius: 0;
     color: #ffffff;
   }

   .title {
     font-size: 1.3rem;
     font-weight: 500;
     color: #f9fafb;
     margin-bottom: 8px;
     text-align: center;
   }

   .subtitle {
     font-size: 0.8rem;
     color: #ffffff;
     margin-bottom: 20px;
     text-align: center;
   }

   form {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }

   input {
     width: 100%;
     border-radius: 10px;
     border: none;
     padding: 12px 14px;
     background: rgba(255,255,255,0.05);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     color: #ffffff;
     font-size: 0.95rem;
     outline: none;
     transition: 0.18s;
     box-shadow: 0 8px 24px rgba(0,0,0,0.25);

   }

   input::placeholder {
     color: rgba(255,255,255,0.5);
   }

   .btn {
     margin-top: 8px;
     border: none;
     border-radius: 14px;
     padding: 10px 20px;
     font-weight: 550;
     font-size: 1rem;
     cursor: pointer;
     text-align: center;
     background: transparent;
     color: #ffffff;
     text-transform: uppercase;
     letter-spacing: 0.10em;
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     box-shadow: 0 8px 24px rgba(0,0,0,0.25);
     transition: background 0.3s ease, box-shadow 0.2s ease, transform 0.15s ease;
     opacity: 0.9;
   }

   .btn:hover {
     box-shadow: 0 10px 28px rgba(0,0,0,0.35);
     transform: translateY(-2px);
     color: #ffffff;
   }

   .note {
     text-align: center;
     font-size: 0.7rem;
     font-weight: 300;
     color: #ffffff;
   }

   .note--soft {
     opacity: 0.3;
   }

   .footer-consent {
     position: fixed;
     bottom: 10px;
     width: 100%;
     text-align: center;
     font-size: 0.75rem;
     color: #ffffff;
     font-weight: 300;
   }

   .footer-consent span {
     opacity: 0.4;
   }

form button[type="submit"]{
  display:flex; flex-direction:column; align-items:center; line-height:1.1; margin-top:8px; margin-bottom:20px;
}
form.disabled{
  pointer-events: none;
}

form.disabled button[type="submit"]
{
  display: none !important;
}

.hide{
  display: none !important;
}

.results{
  text-align: center;
}