:root {
  --font-family: "Roboto", sans-serif;
  --second-family: "GT Eesti Pro Display", sans-serif;
  --primal: #ee4b40;
  --white: #fff;
  --black---text: #1e2936;
  --grey---light: #fafafa;
  --grey---normal: #a5a9b4;
  --grey---dark: #929292;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-Light.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-Bold.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-Medium.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-UltraBold.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-UltraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-Regular.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Eesti Pro Display';
  src: url('fonts/GTEestiProDisplay/GTEestiProDisplay-Thin.woff2') format('woff2'), url('fonts/GTEestiProDisplay/GTEestiProDisplay-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-MediumItalic.eot');
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('fonts/roboto/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-MediumItalic.woff') format('woff'), url('fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Italic.eot');
  src: local('Roboto Italic'), local('Roboto-Italic'), url('fonts/roboto/Roboto-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Italic.woff') format('woff'), url('fonts/roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Bold.eot');
  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Bold.woff') format('woff'), url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Regular.eot');
  src: local('Roboto'), local('Roboto-Regular'), url('fonts/roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Regular.woff') format('woff'), url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Medium.eot');
  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Medium.woff') format('woff'), url('fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-BoldItalic.eot');
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('fonts/roboto/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-BoldItalic.woff') format('woff'), url('fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-ThinItalic.eot');
  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url('fonts/roboto/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-ThinItalic.woff') format('woff'), url('fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Black.eot');
  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Black.woff') format('woff'), url('fonts/roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Light.eot');
  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Light.woff') format('woff'), url('fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-LightItalic.eot');
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('fonts/roboto/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-LightItalic.woff') format('woff'), url('fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-BlackItalic.eot');
  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url('fonts/roboto/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-BlackItalic.woff') format('woff'), url('fonts/roboto/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/roboto/Roboto-Thin.eot');
  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('fonts/roboto/Roboto-Thin.woff') format('woff'), url('fonts/roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  color: var(--black---text);
  background: #f6f6f9;
  min-height: 100%;
}
html {
  min-height: 100%;
  background: #f6f6f9;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
.container {
  max-width: 600px;
  margin: 0 auto;
}
/************************** Head */
.wb-head {
  height: 48px;
  background-image: url('img/head-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: var(--white);
  line-height: 1;
}
.wb-title {
  border-radius: 0 0 24px 24px;
  padding: 12px 16px;
  background: #fff;
}
.wb-title--finish h1 {
  font-weight: 700;
  font-size: 24px;
}
h3 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
  color: var(--black---text);
  margin: 0 0 6px 0;
  padding: 0;
}
h1 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
  color: var(--black---text);
  margin: 0;
  padding: 0;
}
h1 span {
  font-weight: 900;
  background: linear-gradient(120deg, #9333ea 0%, #ff41d5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wb-card {
  padding: 6px 16px 0;
  height: 180px;
}
.wb-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wb-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.wb-content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 0;
  padding-left: 16px;
}
.wb-content ul li {
  text-align: left;
}
.wb-content__attention {
  margin-top: auto;
  padding-top: 62px;
}
.wb-content__attention__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
  color: var(--black---text);
  padding-bottom: 4px;
}
.wb-content__attention__info {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--black---text);
}
.wb-content--accent {
  padding-top: 32px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
  color: var(--black---text);
}
.wb-content p {
  margin: 0;
}
.wb-content p:not(:last-child) {
  margin-bottom: 10px;
}
.wb-action {
  padding: 6px 16px;
}
.wb-action + .wb-action {
  margin-top: 12px;
  padding-top: 0;
  padding-bottom: 0;
}
.wb-action p {
  margin: 0 0 10px 0;
}
.wb-action p strong {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  color: #242429;
}
.button {
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 0 12px;
  min-height: 52px;
  background: linear-gradient(120deg, #9333ea 0%, #ff41d5 100%);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}
.button.button-blue {
  background: #005bff;
  border-radius: 12px;
  padding: 0 16px;
  height: 64px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--white);
}
.button.button-transparent {
  background: transparent;
  border-radius: 12px;
  padding: 0 24px;
  height: 42px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--grey---normal);
}
.button.button-telegram {
  background: #0088cc;
}
.button.button-gray {
  border-radius: 12px;
  padding: 0 24px;
  height: 51px;
  background: #ebebeb;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--black---text);
}
.button.button-gray:active,
.button.button-gray:focus {
  background: linear-gradient(120deg, #9333ea 0%, #ff41d5 100%);
  color: #fff;
}
.button--full {
  width: 100%;
}
.button--icon-telegram:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4922_83954)'%3E%3Cpath d='M19.7 4.40021L3.39997 10.7002C2.29997 11.1002 2.29997 11.8002 3.19997 12.0002L7.29997 13.3002L8.89997 18.1002C9.09997 18.6002 8.99997 18.8002 9.49997 18.8002C9.89997 18.8002 10.1 18.6002 10.3 18.4002C10.4 18.3002 11.3 17.4002 12.3 16.4002L16.5 19.5002C17.3 19.9002 17.8 19.7002 18 18.8002L20.8 5.70021C21.1 4.60021 20.4 4.00021 19.7 4.40021ZM17.6 7.40021L9.79997 14.5002L9.49997 17.8002L7.89997 13.0002L17.1 7.20021C17.5 6.90021 17.9 7.10021 17.6 7.40021Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4922_83954'%3E%3Crect width='24' height='24' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  width: 25px;
  min-width: 25px;
  height: 24px;
  min-height: 24px;
}
.button--icon-web:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.3382 18.4467C10.5103 18.7692 10.6826 19.0598 10.8473 19.3173C9.09745 18.9238 7.57906 17.9187 6.52838 16.5383C7.22181 16.1478 8.10995 15.743 9.17766 15.4468C9.48112 16.637 9.90924 17.6423 10.3382 18.4467ZM11.6618 17.7408C11.2891 17.0421 10.9156 16.1695 10.6465 15.1356C11.2258 15.0496 11.8442 15 12.5001 15C13.1559 15 13.7743 15.0496 14.3535 15.1355C14.0844 16.1695 13.7109 17.0421 13.3382 17.7408C13.0394 18.3011 12.7417 18.7484 12.5 19.0757C12.2583 18.7484 11.9606 18.3011 11.6618 17.7408ZM10.25 12C10.25 12.5841 10.2893 13.1385 10.3586 13.6619C11.0269 13.5594 11.7414 13.5 12.5001 13.5C13.2587 13.5 13.9732 13.5593 14.6414 13.6619C14.7107 13.1384 14.75 12.5841 14.75 12C14.75 11.4159 14.7107 10.8616 14.6414 10.3381C13.9732 10.4406 13.2587 10.5 12.5001 10.5C11.7414 10.5 11.0269 10.4406 10.3586 10.3381C10.2893 10.8615 10.25 11.4159 10.25 12ZM8.88688 10.0288C8.79977 10.6478 8.75 11.3054 8.75 12C8.75 12.6946 8.79977 13.3522 8.88688 13.9712C7.61338 14.3131 6.55882 14.7952 5.74324 15.2591C5.26698 14.2736 5 13.168 5 12C5 10.832 5.26698 9.72644 5.74323 8.74088C6.55872 9.20472 7.6133 9.68686 8.88688 10.0288ZM10.6465 8.86445C11.2258 8.95042 11.8442 9 12.5001 9C13.1559 9 13.7743 8.95043 14.3535 8.86447C14.0844 7.83055 13.7109 6.95793 13.3382 6.2592C13.0394 5.69894 12.7417 5.25156 12.5 4.92432C12.2583 5.25156 11.9606 5.69894 11.6618 6.25918C11.2891 6.95791 10.9156 7.83053 10.6465 8.86445ZM16.1131 10.0289C16.2002 10.6479 16.25 11.3055 16.25 12C16.25 12.6946 16.2002 13.3521 16.1131 13.9711C17.3866 14.3131 18.4412 14.7952 19.2568 15.2591C19.733 14.2735 20 13.1679 20 12C20 10.8321 19.733 9.72647 19.2568 8.74093C18.4413 9.20477 17.3867 9.6869 16.1131 10.0289ZM18.4716 7.46178C17.7781 7.85231 16.89 8.25705 15.8224 8.55328C15.5189 7.36304 15.0908 6.35769 14.6618 5.55332C14.4897 5.23077 14.3174 4.94025 14.1527 4.6827C15.9026 5.07623 17.421 6.08136 18.4716 7.46178ZM9.17765 8.55325C8.11001 8.25701 7.2219 7.85227 6.52839 7.46173C7.57906 6.08134 9.09745 5.07623 10.8472 4.6827C10.6826 4.94025 10.5103 5.23076 10.3382 5.5533C9.90924 6.35767 9.48112 7.36301 9.17765 8.55325ZM15.8224 15.4467C15.5189 16.637 15.0908 17.6423 14.6618 18.4467C14.4897 18.7692 14.3174 19.0598 14.1527 19.3173C15.9026 18.9238 17.421 17.9186 18.4717 16.5382C17.7782 16.1477 16.8901 15.743 15.8224 15.4467ZM12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21Z' fill='%23FAFAFA'/%3E%3C/svg%3E%0A");
  width: 25px;
  min-width: 25px;
  height: 24px;
  min-height: 24px;
}
.wb-steps {
  opacity: 0;
  transition: all 0.3s ease;
}
.wb-steps:not(.is-active) {
  display: none;
}
.wb-steps.is-active {
  animation: showStep 0.3s ease forwards;
}
.wb-steps.is-active[data-step="final"] {
  animation: showFinal 0.3s ease forwards;
}
@keyframes showStep {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes showFinal {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/************************** Question */
.wb-question {
  border-radius: 0 0 24px 24px;
  padding: 24px 16px;
  background: #fff;
}
.wb-question img {
  border-radius: 12px;
  height: 148px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 16px;
}
.wb-question__step {
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--black---text);
  text-align: left;
  padding-bottom: 16px;
}
.wb-question__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--black---text);
  text-align: left;
}
.wb-answers {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/************************** Progress bar */
/* Progress Bar Styles */
.wb-progress-bar {
  width: calc(70% - 32px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  height: 24px;
  background: #2c1947;
  border: 1px solid #d23ade;
}
.wb-progress-bar__inner {
  width: 0;
  height: 100%;
  box-shadow: 0 0 15px 0 rgba(255, 54, 252, 0.88);
  background: linear-gradient(120deg, #9333ea 0%, #ff41d5 100%);
  border-radius: 8px;
  transition: width 5s ease;
  animation: progressAnimation 5s forwards;
}
@keyframes progressAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* Countdown Timer Styles */
.js-countdown {
  font-weight: bold;
  color: #ff5722;
}
/************************** Final */
.wb-final {
  border-radius: 0 0 24px 24px;
  padding: 16px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wb-final img {
  height: 200px;
  width: 100%;
  object-fit: contain;
}
.wb-final .wb-title {
  background-color: transparent;
  padding: 0;
}
.wb-final .wb-title h1 {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 24px;
}
.countdown {
  font-weight: 700;
  color: #ea135e;
  white-space: nowrap;
}
/************************** Confeti */
/* Стили для конфетти */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti {
  position: absolute;
  top: -20px;
  /* Начальная позиция за пределами экрана */
  border-radius: 0;
  animation: confettiFall linear forwards;
  opacity: 0.9;
}
/* Разные формы конфетти */
.confetti:nth-child(3n) {
  border-radius: 50%;
  /* Круглые */
}
.confetti:nth-child(3n+1) {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* Треугольные */
}
.confetti:nth-child(3n+2) {
  /* Квадратные (по умолчанию) */
}
@keyframes confettiFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(25vh) translateX(calc(var(--x-movement) * 0.25)) rotate(45deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) translateX(calc(var(--x-movement) * 0.5)) rotate(90deg);
    opacity: 0.8;
  }
  75% {
    transform: translateY(75vh) translateX(calc(var(--x-movement) * 0.75)) rotate(180deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) translateX(var(--x-movement)) rotate(360deg);
    opacity: 0;
  }
}
/*# sourceMappingURL=styles.css.map */