@font-face {
  font-family: Inter;
  src: url(../fonts/Inter-Bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: Inter;
  src: url(../fonts/Inter-Medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: Inter;
  src: url(../fonts/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
html {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: 62.5%;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body,
html {
  height: 100%;
}
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
pre {
  font-family: monospace;
  font-size: 1em;
}
a {
  text-decoration: none;
}
img {
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
button {
  border: none;
  text-align: left;
  background-color: transparent;
  cursor: pointer;
}
ol,
ul {
  list-style: none;
}
input {
  appearance: none;
  border: none;
  border-radius: 0;
  background-color: #fff;
}
input::-webkit-search-cancel-button,
input::-webkit-search-decoration,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}
.js-focus-visible :focus:not(.focus-visible) {
  outline: 0;
}
.focus-visible {
  outline: auto 1px;
}
.ios .lock {
  position: relative;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px;
}
:root {
  --font-family: "Inter", sans-serif;
  --font-weight: 400;
  --content-width: 120rem;
  --container-offset: 1rem;
  --container-width: calc(var(--content-width) + (var(--container-offset) * 2));
  --transition: 0.3s;
  --clr-default-100: #fff;
  --clr-default-400: #181818;
  --clr-default-900: #000;
}
body {
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 1.6rem;
  color: var(--clr-default-400);
}
body.lock {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overscroll-behavior: none;
}
.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-width: 32rem;
  min-height: 100%;
}
.wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}
.wrapper[data-overlay="true"]::before {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}
main {
  flex-grow: 1;
}
.container {
  margin-inline: auto;
  padding-inline: var(--container-offset);
  width: 100%;
  max-width: var(--container-width);
}
.visually-hidden {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}
label {
  display: flex;
  cursor: pointer;
  gap: 0.5rem;
}
.radio-input {
  appearance: none;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  min-width: clamp(1.5rem, 1.3222222222rem + 0.5555555556vw, 2rem);
  min-height: clamp(1.5rem, 1.3222222222rem + 0.5555555556vw, 2rem);
  max-width: clamp(1.5rem, 1.3222222222rem + 0.5555555556vw, 2rem);
  max-height: clamp(1.5rem, 1.3222222222rem + 0.5555555556vw, 2rem);
  background-color: #fff;
  transform: translateY(
    clamp(0.3rem, 0.2111111111rem + 0.2777777778vw, 0.55rem)
  );
  transition:
    color var(--transition) ease-in-out,
    background-color var(--transition) ease-in-out;
  cursor: pointer;
}
.radio-input:checked {
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0d6efd;
}
.radio-input:disabled,
.radio-input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}
.header {
  padding-block: 3rem;
}
.header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .logo {
  max-width: clamp(14.5rem, 10.8733333333rem + 11.3333333333vw, 24.7rem);
}
.header__info {
  display: flex;
  align-items: center;
  border-radius: 10rem;
  padding: 0.7rem 1.4rem 0.7rem 1.3rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1222222222rem + 0.5555555556vw, 1.8rem);
  line-height: 150%;
  color: #000;
  background: #f2f5fe;
  gap: 1rem;
}
.header__info::before {
  content: "";
  display: flex;
  border-radius: 100%;
  width: 0.9rem;
  height: 0.9rem;
  background-color: #73bc2d;
  transform: translateY(-0.1rem);
}
.footer__wrapper {
  display: flex;
}
.hero {
  position: relative;
  padding-block: clamp(0rem, -0.7111111111rem + 2.2222222222vw, 2rem) 3rem;
}
.hero__man {
  position: absolute;
  right: 0;
  top: 0;
}
.hero__wrapper {
  position: relative;
  z-index: 1;
}
.hero__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(2.8rem, 2.0177777778rem + 2.4444444444vw, 5rem);
  line-height: 130%;
  text-transform: uppercase;
  color: #000;
}
.hero__title-blue {
  position: relative;
  display: flex;
  width: max-content;
  color: #005be7;
}
.hero__title-blue::after {
  content: "";
  position: absolute;
  right: 0;
  top: 90%;
  width: clamp(7rem, 4.5111111111rem + 7.7777777778vw, 14rem);
  height: 1.7rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="134" height="20" viewBox="0 0 134 20" fill="none"><path d="M1.25 5.91737C33.8391 2.78882 100.101 -1.45136 131.285 3.56491C133.24 3.87937 132.954 5.901 130.974 5.89355C89.9442 5.739 43.0886 5.25623 27.6651 18.2444" stroke="%23005BE7" stroke-width="2.5" stroke-linecap="round"/></svg>')
    center/contain no-repeat;
  pointer-events: none;
}
.hero__title span {
  font-weight: 500;
}
.hero__title-after {
  position: relative;
  display: inline-block;
}
.hero__title-after::after {
  content: "";
  position: absolute;
  left: clamp(0rem, -0.3555555556rem + 1.1111111111vw, 1rem);
  top: 90%;
  width: clamp(12rem, 10.1511111111rem + 5.7777777778vw, 17.2rem);
  height: 1rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="172" height="10" viewBox="0 0 172 10" fill="none"><path d="M1.25 8.39282C16.75 6.89282 145.05 0.192826 170.25 1.39283" stroke="%23F4EFC9" stroke-width="2.5" stroke-linecap="round"/></svg>')
    center no-repeat;
  pointer-events: none;
}
.hero__subtitle {
  margin-top: 1.5rem;
  width: 100%;
  max-width: 48.2rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3511111111rem + 0.7777777778vw, 2.3rem);
  line-height: 150%;
  color: #000;
}
.hero__subtitle span {
  display: inline-block;
  font-weight: 700;
}
.hero__subtitle-yellow {
  padding-inline: 0.5rem;
  background-color: #f4efc9;
}
.hero-quiz {
  margin-top: 3rem;
  border-radius: 1.5rem;
  padding: clamp(1.5rem, 1.1444444444rem + 1.1111111111vw, 2.5rem);
  width: 100%;
  max-width: clamp(23rem, 10.0222222222rem + 40.5555555556vw, 59.5rem);
  box-shadow: 0 11px 24px 0 rgba(0, 0, 0, 0.11);
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}
.hero-quiz__step {
  display: none;
}
.hero-quiz__step.show {
  display: block;
}
.hero-quiz__caption {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3511111111rem + 0.7777777778vw, 2.3rem);
  line-height: 150%;
  color: #000;
}
.hero-quiz__text {
  font-size: clamp(1.6rem, 1.4577777778rem + 0.4444444444vw, 2rem);
}
.hero-quiz__block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.5rem, 1.3222222222rem + 0.5555555556vw, 2rem);
  gap: 1rem;
}
.hero-quiz__block-flex {
  display: flex;
  flex-direction: column;
}
.hero-quiz__block input[type="tel"],
.hero-quiz__block input[type="text"] {
  outline: 0;
  border: 1px solid #e1e1e3;
  border-radius: 5px;
  padding: clamp(1rem, 0.8222222222rem + 0.5555555556vw, 1.5rem);
  width: 100%;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.4577777778rem + 0.4444444444vw, 2rem);
  line-height: 150%;
  color: #000;
}
.hero-quiz__block input[type="tel"]::placeholder,
.hero-quiz__block input[type="text"]::placeholder {
  color: #000;
  opacity: 0.5;
}
.hero-quiz__column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hero-quiz__radio {
  border: 1px solid #e1e1e3;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1866666667rem + 0.6666666667vw, 2rem);
  line-height: 150%;
  color: #000;
  transition: background-color var(--transition);
}
.hero-quiz__radio:has(.radio-input:checked) {
  background-color: #e7f0ff;
}
.hero-quiz__radio span {
  font-weight: 700;
}
.hero-quiz__info {
  margin-top: 2.5rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.4577777778rem + 0.4444444444vw, 2rem);
  line-height: 150%;
  color: #000;
}
.hero-quiz-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.5rem;
  width: 100%;
  gap: 1rem;
}
.hero-quiz-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 1.2rem 5rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4577777778rem + 0.4444444444vw, 2rem);
  line-height: 150%;
  cursor: pointer;
}
.hero-quiz-nav__btn_prev {
  border: 1px solid #e1e1e3;
  color: #000;
}
.hero-quiz-nav__btn_prev.hide {
  display: none;
}
.hero-quiz-nav__btn_next {
  display: flex;
  align-items: center;
  border: 1px solid #005be7;
  color: #fff;
  background-color: #005be7;
  transition:
    background-color var(--transition),
    border-color var(--transition);
  gap: 1rem;
}
.hero-quiz-error {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #e70000;
}
.hero-quiz-num {
  display: flex;
  align-items: center;
  margin-top: clamp(1.5rem, 1.1444444444rem + 1.1111111111vw, 2.5rem);
  gap: 1rem;
}
.hero-quiz-num__text {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.2577777778rem + 0.4444444444vw, 1.8rem);
  line-height: 150%;
  color: #000;
}
.hero-quiz-num__text span {
  font-weight: 700;
}
.hero-quiz-num__progress {
  position: relative;
  border-radius: 10rem;
  width: 100%;
  height: 0.3rem;
  max-width: 14rem;
  background-color: #efefef;
}
.hero-quiz-num__bar {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10rem;
  width: 10%;
  height: 0.3rem;
  background-color: #005be7;
}
.hero-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: clamp(1.5rem, 0.9666666667rem + 1.6666666667vw, 3rem);
  border-radius: 10rem;
  padding: 1rem 2rem 1rem 1.6rem;
  width: 100%;
  max-width: max-content;
  background: #f2f5fe;
  gap: clamp(0.6rem, 0.1022222222rem + 1.5555555556vw, 2rem);
}
.hero-features__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 65.625em) {
  .hero__man {
    top: clamp(20rem, 33.5555555556rem + -11.1111111111vw, 30rem);
    max-width: clamp(28rem, 16.6222222222rem + 35.5555555556vw, 60rem);
    transform: translateX(13rem);
  }
}
@media (max-width: 56.25em) {
  .hero-quiz__block {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 43.75em) {
  .hero-quiz-nav {
    grid-template-columns: repeat(1, 1fr);
  }
}

.thank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

.thank__title {
  margin-top: 3rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(2.8rem, 2.0263736264rem + 2.4175824176vw, 5rem);
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  color: #000;
}

.thank__text {
  margin-top: 1rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.5296703297rem + 0.2197802198vw, 1.8rem);
  line-height: 120%;
  text-align: center;
  color: #000;
}

.thank__btn {
  border-radius: 0.5rem;
  padding: 1.2rem 5rem;
  font-family: var(--font-family);
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: clamp(1.8rem, 1.7296703297rem + 0.2197802198vw, 2rem);
  line-height: 150%;
  color: #fff;
  gap: 1rem;
  border: 1px solid #005be7;
  background: #005be7;
}

.thank__btn::after {
  content: "";
  display: inline-block;
  width: 1.7rem;
  height: 1.5rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='15' viewBox='0 0 17 15' fill='none'><path d='M1 6.36377C0.447715 6.36377 0 6.81148 0 7.36377C0 7.91605 0.447715 8.36377 1 8.36377V7.36377V6.36377ZM16.7071 8.07088C17.0976 7.68035 17.0976 7.04719 16.7071 6.65666L10.3431 0.292702C9.95262 -0.0978227 9.31946 -0.0978227 8.92893 0.292702C8.53841 0.683226 8.53841 1.31639 8.92893 1.70692L14.5858 7.36377L8.92893 13.0206C8.53841 13.4111 8.53841 14.0443 8.92893 14.4348C9.31946 14.8254 9.95262 14.8254 10.3431 14.4348L16.7071 8.07088ZM1 7.36377V8.36377H16V7.36377V6.36377H1V7.36377Z' fill='white'/></svg>") no-repeat center;
  background-size: contain;
}

.quiz-loader {
  display: none; /* по умолчанию скрыт */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* полупрозрачный фон */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: #005be7;
  font-size: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #cce0ff;
  border-top: 4px solid #005be7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.thank__flex {
	display: flex;
	gap: 1rem; 
	margin-top: 3rem;
}

@media (max-width: 650px) {
  .thank__flex {
	flex-direction: column;
  }
}

.thank__download {
    border-radius: 0.5rem;
    padding: 1.2rem 5rem;
    font-family: var(--font-family);
    font-weight: 700;
    display: flex;
    align-items: center;
    font-size: clamp(1.8rem, 1.7296703297rem + 0.2197802198vw, 2rem);
    line-height: 150%;
    color: #005be7;
    gap: 1rem;
	border: 1px solid #005be7;
}