/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'Factor A';
  src: url('fonts/Factor A-Regular-Desktop.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Factor A';
  src: url('fonts/Factor A-Medium-Desktop.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spoof Trial';
  src: url('fonts/SpoofTrial-LightSlanted.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  /* Hero bg image — переопределяется в медиа-запросах */
  --hero-img: url('img/Placeholder-Lightbox-1024.jpg');
  /* Colors — точно по Figma */
  --color-green:          #60f392;   /* secondary */
  --color-green-hover:    #4fd47e;
  --color-green-disabled: #c7ffda;
  --color-primary:        #8f70ff;   /* primary purple */
  --color-purple-dark:    #5B3DC8;
  --color-purple:         #7B5FD4;
  --color-purple-light:   #A98AEA;
  --color-purple-result:  #e8e2ff;   /* result screen bg */
  --color-promo-border:   #cbb7f9;   /* result promo block border */
  --color-promo-link:     #6d4ad3;   /* link in result promo */
  --color-white:          #FFFFFF;
  --color-black:          #141414;   /* neutral-darkest */
  --color-gray-text:      #6B6B6B;
  --color-gray-hint:      #b3b3b3;   /* neutral */
  --color-gray-border:    #b3b3b3;   /* quiz answer borders */
  --color-gray-border-input: #dedede; /* form input borders (neutral-light) */
  --color-gray-footer:    #f2f2f2;   /* footer box bg on main screen */
  --color-error:          #e70000;
  --color-error-bg:       #FFF0EF;

  /* Typography */
  --font-body:    'Factor A', sans-serif;
  --font-display: 'Spoof Trial', sans-serif;

  /* Layout */
  --container-max: 90em;       /* 1440px */
  --container-pad: 2.5em;      /* 40px */

  /* Radius */
  --radius-card:   2em;        /* 32px */
  --radius-input:  0.75em;     /* 12px */
  --radius-btn:    0.75em;     /* 12px — rounded rect, не pill! */

  /* Transitions */
  --transition: 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh; /* адаптируется к скрытию/показу браузерного chrome на мобилке */
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* предотвращает горизонтальный скролл от декоративных элементов */
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

section{
  max-width: 100vw;
}

/* ============================================================
   SCREEN VISIBILITY (JS-управление)
   ============================================================ */
.screen {
  display: none;
  flex: 1;
}

.screen.is-active {
  display: flex;
  flex-direction: column;
}

#screen-start { display: flex; flex-direction: column; flex: 1; }

/* ============================================================
   АНИМАЦИИ ПЕРЕХОДОВ МЕЖДУ ЭКРАНАМИ
   ============================================================ */
@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Только start (при переходе обратно) и form анимируются */
#screen-start.animate-in,
#screen-form.is-active {
  animation: screenIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Квиз, флип, результат — бесшовно, без анимации экрана */
#screen-quiz.is-active,
#screen-flip.is-active,
#screen-result.is-active {
  animation: none;
}


/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--color-white);
  width: 100%;
  z-index: 10;
  flex-shrink: 0;
}

/* На форме, квизе, флипе и результате — прозрачный (фон у body) */
body[data-screen="form"] .header,
body[data-screen="quiz"] .header,
body[data-screen="flip"] .header,
body[data-screen="result"] .header {
  background: transparent;
}

.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.25em var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo-img {
  height: 2em;    /* ~24px — как в Figma */
  width: auto;
  display: block;
}

/* По умолчанию (старт / результат): светлый фон → тёмное лого */
.header__logo--light { display: block; }
.header__logo--dark  { display: none;  }

/* Форма / квиз / флип: тёмный фиолетовый фон → светлое лого */
body[data-screen="form"] .header__logo--light,
body[data-screen="quiz"] .header__logo--light,
body[data-screen="flip"] .header__logo--light { display: none;  }
body[data-screen="form"] .header__logo--dark,
body[data-screen="quiz"] .header__logo--dark,
body[data-screen="flip"] .header__logo--dark  { display: block; }

/* На форме/квизе/результате — текст хедера всегда тёмный (#141414) */

.header__link {
  font-size: 0.75rem; /* 12px text-tiny */
  color: var(--color-black);
  opacity: 0.8;
  transition: opacity var(--transition);
}

.header__link:hover {
  opacity: 1;
}

/* ============================================================
   BODY — фоновая подложка меняется вместе с экраном
   ============================================================ */

/* Анимация конического градиента для экранов формы и квиза */
@property --a {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: false;
}

@keyframes cone-spin {
  from { --a: 90deg; }
  to   { --a: 450deg; }
}

/* Форма, квиз и флип: весь body получает анимированный фиолетовый фон */
body[data-screen="form"],
body[data-screen="quiz"],
body[data-screen="flip"] {
  animation: cone-spin 120s linear infinite;
  background: conic-gradient(
    from var(--a) at 50% 50%,
    rgba(144, 107, 255, 0.50) 0%,
    rgba(185, 166, 255, 0.50) 1.6945%,
    rgba(220, 211, 255, 0.50) 3.8214%,
    rgba(255, 255, 255, 0.50) 5.9483%,
    rgba(255, 255, 255, 0.50) 7.5162%,
    rgba(255, 255, 255, 0.455) 9.0626%,
    rgba(255, 255, 255, 0.50) 10.474%,
    rgba(220, 211, 255, 0.461) 11.83%,
    rgba(185, 166, 255, 0.422) 13.186%,
    rgba(240, 236, 255, 0.399) 15.566%,
    rgba(253, 253, 255, 0.399) 20.716%,
    rgba(255, 255, 255, 0.50) 27.335%,
    rgba(247, 245, 255, 0.50) 30.542%,
    rgba(240, 235, 255, 0.40) 32.257%,
    rgba(255, 255, 255, 0.40) 34.389%,
    rgba(255, 255, 255, 0.50) 35.626%,
    rgba(236, 231, 255, 0.45) 36.293%,
    rgba(217, 207, 255, 0.40) 36.96%,
    rgba(185, 166, 255, 0.50) 37.349%,
    rgba(185, 166, 255, 0.40) 38.672%,
    rgba(220, 211, 255, 0.45) 39.793%,
    rgba(255, 255, 255, 0.50) 40.914%,
    rgba(255, 255, 255, 0.40) 42.124%,
    rgba(220, 211, 255, 0.40) 44.489%,
    rgba(185, 166, 255, 0.40) 46.855%,
    rgba(220, 211, 255, 0.402) 48.869%,
    rgba(255, 255, 255, 0.404) 50.883%,
    rgba(255, 255, 255, 0.411) 54.26%,
    rgba(199, 184, 255, 0.422) 57.048%,
    rgba(171, 148, 255, 0.428) 58.442%,
    rgba(143, 112, 255, 0.434) 59.836%,
    rgba(143, 112, 255, 0.50) 65.586%,
    rgba(114, 84, 233, 0.50) 67.48%,
    rgba(86, 56, 211, 0.50) 69.373%,
    rgba(57, 28, 189, 0.50) 71.267%,
    rgba(43, 14, 179, 0.50) 72.214%,
    rgba(28, 0, 168, 0.50) 73.161%,
    rgba(43, 14, 179, 0.50) 73.919%,
    rgba(57, 28, 189, 0.50) 74.678%,
    rgba(86, 56, 211, 0.50) 76.196%,
    rgba(114, 84, 233, 0.50) 77.713%,
    rgba(143, 112, 255, 0.50) 79.231%,
    rgba(188, 170, 255, 0.45) 85.451%,
    rgba(233, 227, 255, 0.40) 91.67%,
    rgba(185, 166, 255, 0.40) 93.904%,
    rgba(220, 211, 255, 0.436) 94.999%,
    rgba(255, 255, 255, 0.471) 96.094%,
    rgba(232, 226, 255, 0.50) 97%,
    rgba(188, 166, 255, 0.50) 98.5%,
    rgba(144, 107, 255, 0.50) 100%
  ), #8F70FF;
}

/* Результат: светло-фиолетовый */
body[data-screen="result"] {
  background: var(--color-purple-result);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  flex-shrink: 0;
  background: transparent; /* наследует фон body */
}

.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1em 1em 1.25em 1em;
}

/* Внутренний блок с border-radius */
.footer__box {
  background: var(--color-gray-footer); /* #f2f2f2 по умолчанию (главный) */
  border-radius: var(--radius-input);   /* 12px */
  padding: 1.25em 2.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75em;
}

/* Тёмные экраны (форма, квиз) — полупрозрачный белый */
/* Форма/квиз/флип — полупрозрачный белый на фиолетовом фоне */
body[data-screen="form"] .footer__box,
body[data-screen="quiz"] .footer__box,
body[data-screen="flip"] .footer__box {
  background: rgba(255, 255, 255, 0.3);
}

/* Результат — белый блок на светло-фиолетовом фоне */
body[data-screen="result"] .footer__box {
  background: var(--color-white);
}

/* Форма/квиз/флип — текст футера белый */
body[data-screen="form"] .footer__copy,
body[data-screen="quiz"] .footer__copy,
body[data-screen="flip"] .footer__copy,
body[data-screen="form"] .footer__nav-link,
body[data-screen="quiz"] .footer__nav-link,
body[data-screen="flip"] .footer__nav-link {
  color: var(--color-white);
}

.footer__copy {
  font-size: 0.75rem;
  color: var(--color-black);
}


.footer__nav {
  display: flex;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
}

.footer__nav-link {
  font-size: 0.75rem;
  color: var(--color-black);
  transition: opacity var(--transition);
}

.footer__nav-link:hover {
  opacity: 0.7;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity var(--transition);
}

.footer__social:hover {
  opacity: 1;
}

/* Иконки: по умолчанию (старт, результат) — тёмные */
.footer__social-icon--dark  { display: block; }
.footer__social-icon--light { display: none;  }

/* Форма / квиз / флип — фиолетовый фон → светлые иконки */
body[data-screen="form"] .footer__social-icon--dark,
body[data-screen="quiz"] .footer__social-icon--dark,
body[data-screen="flip"] .footer__social-icon--dark  { display: none;  }
body[data-screen="form"] .footer__social-icon--light,
body[data-screen="quiz"] .footer__social-icon--light,
body[data-screen="flip"] .footer__social-icon--light { display: block; }

/* Mobile-only footer link: hidden by default, shown at mobile breakpoint */
.footer__link--mobile {
  display: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 3em;             /* 12px 48px */
  border-radius: var(--radius-btn); /* 12px */
  font-family: var(--font-body);
  font-size: 1rem;                  /* 16px text-regular */
  font-weight: 400;
  line-height: 1.4;
  transition: background 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.btn--green {
  background: var(--color-green);
  color: var(--color-black);
}

.btn--green:hover {
  background: var(--color-green-hover);
}

.btn--green:disabled,
.btn--green.is-disabled {
  background: var(--color-green-disabled);
  color: var(--color-white);
  pointer-events: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.btn--outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

.btn--full {
  width: 100%;
}

/* ============================================================
   ЭКРАН 1: СТАРТ
   (белая страница + тёмная hero-карточка внутри)
   ============================================================ */
.screen--start {
  background: var(--color-white);
  align-items: stretch;
}

.screen--start__wrapper {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0em 1em;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hero — фоновое изображение */
.screen--start__hero {
  border-radius: var(--radius-card);
  min-height: 24em;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex: 1;
  background:
    linear-gradient(to bottom right, rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) bottom right / 50% 50% no-repeat,
    linear-gradient(to bottom left,  rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) bottom left  / 50% 50% no-repeat,
    linear-gradient(to top left,     rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) top left    / 50% 50% no-repeat,
    linear-gradient(to top right,    rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) top right   / 50% 50% no-repeat,
    linear-gradient(148deg, rgba(109, 74, 211, 0.80) 22.9%, rgba(109, 74, 211, 0.00) 46.3%),
    radial-gradient(75.18% 82.29% at 19.67% 9.87%, #29168B 0.67%, rgba(232, 226, 255, 0.00) 100%),
    radial-gradient(391.49% 134.9% at 91.56% 111.19%, rgba(255, 255, 255, 0.00) 74.11%, rgba(199, 183, 255, 0.50) 86.92%, #B9A6FF 100%),
    url('img/hero-bg.svg') center center / cover no-repeat;
}

/* Персонаж: прибит к правой стороне, всегда влазит по высоте */
.screen--start__hero-img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.screen--start__content {
  position: relative;
  z-index: 2;
  padding: 2.5em;
  max-width: 39em; /* 640px */
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
  align-items: flex-start;
}

.screen--start__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.89vw, 3.5rem); /* h1: 56px */
  line-height: 1;
  color: var(--color-white);
  font-feature-settings: 'ss06' 1;
}

.screen--start__subtitle {
  font-size: clamp(1rem, 1.39vw, 1.25rem); /* text-large: 20px */
  color: var(--color-white);
  line-height: 1.3;
  max-width: 28em;
}


/* ============================================================
   ОБЩАЯ КАРТОЧКА (форма + вопросы)
   ============================================================ */
.screen--form,
.screen--quiz {
  /* Фон у body — здесь прозрачно */
  background: transparent;
  align-items: center;
  justify-content: center;
  padding: 1.25em var(--container-pad);
}

.quiz-card {
  background: var(--color-white);
  border-radius: var(--radius-card); /* 32px */
  padding: 2em;                      /* 32px */
  width: 100%;
  max-width: 50em;                   /* ~800px */
  display: flex;
  flex-direction: column;
  gap: 1.5em;                        /* 24px */
}

.quiz-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.quiz-card__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;    /* 24px — h5 */
  line-height: 1;
  color: var(--color-black);
  flex: 1;
}

.quiz-card__counter {
  font-size: 0.875rem;  /* 14px — text-small */
  font-weight: 500;     /* medium */
  color: var(--color-black);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.quiz-card__subtitle {
  font-size: 0.75rem;   /* 12px — text-tiny */
  color: var(--color-black);
  line-height: 1.4;
}

/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ВОПРОСА И ОТВЕТОВ
   Белая подложка (.quiz-card) остаётся статичной.
   ============================================================ */
@keyframes questionIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes answerIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Вопрос и счётчик — появляются первыми */
.quiz-card.is-animating .quiz-card__header {
  animation: questionIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Каждый ответ — с нарастающей задержкой через CSS-переменную --i */
.quiz-card.is-animating .quiz-answer {
  opacity: 0;
  animation: answerIn 0.40s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.10s + var(--i, 0) * 0.08s);
}

/* Кнопка «Следующий вопрос» — появляется последней (после 4 ответов) */
.quiz-card.is-animating .quiz-btn-wrap {
  opacity: 0;
  animation: answerIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.10s + 4 * 0.08s); /* после 4-го ответа */
}

/* ============================================================
   ФОРМА
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.form__label {
  font-size: 0.75rem;    /* 12px text-tiny */
  font-weight: 500;      /* medium — по Figma */
  color: var(--color-black);
  line-height: 1.4;
}

.form__input {
  font-family: var(--font-body);
  font-size: 1rem;       /* 16px text-regular */
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-gray-border-input); /* #dedede */
  border-radius: var(--radius-input);               /* 12px */
  padding: 0.75em 1.5em;                            /* 12px 24px */
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
  line-height: 1.4;
}

.form__input::placeholder {
  color: var(--color-gray-hint);
}

.form__input:focus {
  border-color: var(--color-green); /* активное поле — зелёная обводка */
}

.form__hint {
  font-size: 0.75rem;
  color: var(--color-gray-hint);
  line-height: 1.4;
}

.form__error-msg {
  display: none;
  font-size: 0.75rem;
  color: var(--color-error);
  line-height: 1.4;
}

/* Error state */
.form__field.has-error .form__label {
  color: var(--color-error);
}

.form__field.has-error .form__input {
  border-color: var(--color-error);
  background: var(--color-white);
  color: var(--color-error);
}

.form__field.has-error .form__input::placeholder {
  color: var(--color-error);
}

.form__field.has-error .form__error-msg {
  display: block;
}

/* Checkbox */
.form__checkbox-wrap {
  margin-top: 0.25em;
}

.form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

.form__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form__checkbox-custom {
  width: 1.125em;          /* 18px */
  height: 1.125em;
  border: 1px solid var(--color-primary); /* #8f70ff */
  border-radius: 0.25em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}

.form__checkbox:checked + .form__checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form__checkbox:checked + .form__checkbox-custom::after {
  content: '';
  display: block;
  width: 0.35em;
  height: 0.6em;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-0.05em);
}

.form__checkbox-text {
  font-size: 0.75rem;
  color: var(--color-black);
  line-height: 1.4;
}

.form__checkbox-link {
  text-decoration: underline;
  color: var(--color-black);
}

/* Форма — кнопка по центру */
.form__btn-wrap {
  display: flex;
  justify-content: center;
  padding-top: 0.5em;
}

/* ============================================================
   ОТВЕТЫ КВИЗА
   ============================================================ */
.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}

.quiz-answer {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5em 1em 0.5em 0.5em;    /* 8px 16px 8px 8px */
  border: 1px solid var(--color-gray-border); /* #b3b3b3 */
  border-radius: var(--radius-input);          /* 12px */
  background: var(--color-white);
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;                             /* 16px text-regular */
  color: var(--color-black);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease;
  width: 100%;
}

.quiz-answer:hover {
  border-color: var(--color-green); /* ховер — как у выбранного */
}

.quiz-answer:hover .quiz-answer__letter {
  color: var(--color-green);
}

.quiz-answer.is-selected {
  border-color: var(--color-green);
  background: var(--color-white);
}

/* Бокс с буквой — 60×60px с border-radius 4px */
.quiz-answer__letter-box {
  width: 3.75em;          /* 60px */
  height: 3.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25em;  /* 4px */
  border: 1px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  margin-right: 0.75em;
}

.quiz-answer.is-selected .quiz-answer__letter-box {
  border-color: transparent;
}

.quiz-answer__letter {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;      /* 24px — h5 */
  line-height: 1;
  color: var(--color-black);
  transition: color 0.22s ease;
}

.quiz-answer.is-selected .quiz-answer__letter {
  color: var(--color-green);
}

.quiz-answer__text {
  line-height: 1.4;
  flex: 1;
}

/* Кнопка квиза — по центру */
.quiz-btn-wrap {
  display: flex;
  justify-content: center;
}

/* ============================================================
   ЭКРАН 4: РЕЗУЛЬТАТЫ
   ============================================================ */
.screen--result {
  background: var(--color-purple-result); /* #e8e2ff */
  flex: 1;
  align-items: stretch;
  max-width: 100vw;
}

.result__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.25em 6.875em 2.5em; /* 20px 110px 40px — Figma desktop */
  display: flex;
  align-items: flex-start;
  gap: 5em; /* 80px */
}

/* ── Левая колонка ─────────────────────────────────────── */
.result__left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em; /* 12px между стеком и кнопками */
}

/* Стек карточек — контейнер для position:absolute детей */
.result-card-stack {
  position: relative;
  width: 25.125rem;  /* 402px */
  height: 33.75rem;  /* 540px */
  overflow: visible; /* тени могут выступать за край */
  flex-shrink: 0;
  left: -3em;
}

/* ── Декоративные карточки-подложки (PNG, анимируются веером) ── */
.decor-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateX(0) rotate(0deg);
  transform-origin: center;
  transition:
    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.4s ease;
  z-index: 1;
  overflow: visible;
}

/* PNG ~881×814px — отображаем при ~160% ширины стека,
   чтобы совпасть с натуральным размером с учётом прозрачных отступов */
.decor-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 185%;
  height: auto;
  max-width: none;
}

/* State 1: backs-visible — веерное раскрытие */
/* A — уходит влево за основную карточку */
.result-card-stack.backs-visible .decor-wrap--a {
  opacity: 1;
  transform: translateX(-11%) rotate(-3deg);
  transition-delay: 0s;
}
/* B — правая ближняя, почти прямо */
.result-card-stack.backs-visible .decor-wrap--b {
  opacity: 1;
  transform: translateX(13%) rotate(4.84deg);
  transition-delay: 0.08s;
}
/* C — правая средняя */
.result-card-stack.backs-visible .decor-wrap--c {
  opacity: 1;
  transform: translateX(24%) rotate(16deg);
  transition-delay: 0.16s;
}
/* D — правая дальняя */
.result-card-stack.backs-visible .decor-wrap--d {
  opacity: 1;
  transform: translateX(32%) rotate(21deg);
  transition-delay: 0.24s;
}

/* Основная карточка роли */
.result-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /* background: radial-gradient(ellipse 80% 70% at 50% 30%, #A98AEA 0%, #7B5FD4 50%, #5B3DC8 100%);
  border-radius: 1.678em;*/
  overflow: visible;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.result-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Кнопки под стеком */
.result__actions {
  display: flex;
  align-items: stretch;
  gap: 0.75em; /* 12px */
  width: 25.125rem; /* 402px — совпадает с шириной стека */
  left: -3em;
  flex-shrink: 0;
  z-index: 30;
}

.result__actions .btn {
  flex: 1;
  white-space: nowrap;
}

/* ── Правая колонка ────────────────────────────────────── */
.result__right {
  flex: 1 0 0;
  min-width: 0;
  max-width: 29.75em; /* 476px */
  display: flex;
  flex-direction: column;
  gap: 2.3125em; /* 37px */
}

/* Заголовок + описание */
.result__header {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
}

.result__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3rem; /* 48px */
  line-height: 1;
  color: var(--color-black);
}

.result__description {
  font-size: 1.25rem; /* 20px */
  line-height: 1.3;
  color: var(--color-black);
}

/* ── Промо-блок ────────────────────────────────────────── */
.result__promo-block {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
  border: 1px solid var(--color-promo-border); /* #cbb7f9 */
  border-radius: 1em;   /* 16px */
  padding: 1.25em;      /* 20px */
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 12.4px 0 #ffffff;
}

/* Glassmorphism-фон */
.result__promo-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(49.33deg, rgba(174, 138, 255, 0.4) 2.77%, rgba(255, 255, 255, 0.4) 96.67%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Контент поверх glassmorphism */
.result__promo-block > * {
  position: relative;
  z-index: 1;
}

.result__promo-text {
  font-size: 1.25rem; /* 20px */
  line-height: 1.3;
  color: var(--color-black);
}

.result__promo-link {
  color: var(--color-promo-link); /* #6d4ad3 */
  text-decoration: underline;
}

/* Группа: метка + пилюля (gap 16px по Figma) */
.result__promo-code-group {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
}

.result__promo-label {
  font-size: 1rem;   /* 16px */
  font-weight: 500;
  color: var(--color-black);
}

/* ── Promo Pill ─────────────────────────────────────────── */
.promo-pill {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 62.5em;  /* 1000px */
  height: 6.25em;         /* 100px */
  overflow: hidden;
  width: 100%;
}

/* Левая половина — промокод, dashed border */
.promo-pill__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  border: 1px dashed var(--color-primary); /* #8f70ff */
  min-width: 77%;
  border-radius: 62.5em;
}

/* Правая половина — скидка, фиолетовый фон */
.promo-pill__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25em;
  color: var(--color-primary); /* #8f70ff */
  border-radius: 62.5em;
  padding-left: 0.625em;
}

.promo-pill__caption {
  font-size: 0.9575rem; /* ~15.32px */
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.promo-pill__right .promo-pill__caption {
  color: var(--color-primary);
}

.promo-pill__code {
  font-family: var(--font-display);
  font-size: 2rem;   /* 32px */
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: opacity 0.15s;
}
.promo-pill__code:hover {
  opacity: 0.75;
}
.promo-pill__code::after {
  content: 'Скопировано!';
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.3em 0.75em;
  border-radius: 0.5em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.promo-pill__code.is-copied::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.promo-pill__discount {
  font-family: var(--font-display);
  font-size: 2rem;   /* 32px */
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
}

.result__promo-fine {
  font-size: 0.75rem; /* 12px */
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}

#btn-download{
  width: 12.188em;
}

#btn-restart{
    width: 12.188em;
}

/* ============================================================
   ЭКРАН ПЕРЕВОРОТА КАРТОЧКИ (screen-flip)
   ============================================================ */
.screen--flip {
  background: transparent; /* наследует анимированный фон body (как квиз) */
  align-items: center;
  justify-content: center;
  flex: 1;
}

.screen--flip__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1.25em 2.5em 2.5em;
}

/* 3D-карточка */
.flip-card {
  perspective: 1200px;
  width: clamp(16rem, 27.92vw, 25.125rem); /* 402px at 1440 */
  aspect-ratio: 402 / 540;
  flex-shrink: 0;
}

.flip-card__inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 2 полных оборота + финальный флип: быстрый старт, плавное замедление в конце */
  transition: transform 2.4s cubic-bezier(0.12, 0, 0.08, 1);
}

/* Класс добавляется JS-ом → запускает переворот */
/* 900° = 2.5 оборота, финально показывает лицевую сторону */
.flip-card.is-flipping .flip-card__inner {
  transform: rotateY(900deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: visible;
}

/* Тыльная сторона (видна первой) */
.flip-card__back {
  /*background: var(--color-primary);  фолбэк пока грузится картинка */
}

.flip-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Лицевая сторона (повёрнута на 180deg, открывается при флипе) */
.flip-card__front {
  transform: rotateY(180deg);
}

/* Карточка роли на лицевой стороне — убираем ширину (задаёт .flip-card) */
.result-card--flip {
  width: 100%;
  height: 100%;
  border-radius: 0; /* радиус задаёт .flip-card__face */
}


/* ============================================================
   TABLET — 1024px
   ============================================================ */
@media (max-width: 64em) {
  :root {
    --container-pad: 1.875em; /* 30px */
  }

  /* Header: hide link, center logo */
  .header__link {
    display: none;
  }

  .header__inner {
    justify-content: center;
  }

  /* Start hero: horizontal, vw-based proportions from Figma (944×640 at 1024) */
  .screen--start__hero {
    flex: none;
    width: 100%;
    min-height: unset;
    aspect-ratio: 944 / 640;
    background:
      linear-gradient(to bottom right, rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) bottom right / 50% 50% no-repeat,
      linear-gradient(to bottom left,  rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) bottom left  / 50% 50% no-repeat,
      linear-gradient(to top left,     rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) top left    / 50% 50% no-repeat,
      linear-gradient(to top right,    rgba(109, 74, 211, 0.10) 0%, rgba(109, 74, 211, 0.00) 50%) top right   / 50% 50% no-repeat,
      linear-gradient(148deg, rgba(109, 74, 211, 0.80) 22.9%, rgba(109, 74, 211, 0.00) 46.3%),
      radial-gradient(75.18% 82.29% at 19.67% 9.87%, #29168B 0.67%, rgba(232, 226, 255, 0.00) 100%),
      radial-gradient(391.49% 134.9% at 91.56% 111.19%, rgba(255, 255, 255, 0.00) 74.11%, rgba(199, 183, 255, 0.50) 86.92%, #B9A6FF 100%),
      url('img/Placeholder-Lightbox-1024.jpg') center center / cover no-repeat;
  }

  .screen--start__hero-img {
    display: none;
  }

  .screen--start__content {
    max-width: 40vw; /* 400px at 1024 */
  }

  .screen--start__title {
    font-size: 3.91vw; /* 40px at 1024 */
  }

  .screen--start__subtitle {
    font-size: 1.95vw; /* 20px at 1024 */
  }

  /* Result — 1024px: padding 40px, gap 80px, card 301×403px */
  .result__inner {
    padding-left: 2.5em;  /* 40px */
    padding-right: 2.5em;
    gap: 5em;             /* 80px */
  }

  .result-card-stack {
    width: 18.8125rem;  /* 301px */
    height: 25.1875rem; /* 403px */
  }

  .result__actions {
    width: 18.8125rem;  /* 301px */
    flex-direction: column;
  }

  #btn-download,
  #btn-restart {
    width: auto;
  }

  .result__right {
    max-width: 29.75em;
  }

  .result__title {
    font-size: 2.5rem; /* 40px */
  }

  .promo-pill__code,
  .promo-pill__discount {
    font-size: 1.5rem; /* 24px */
  }
}

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (max-width: 48em) {
  :root {
    --container-pad: 1.5em; /* 24px */
    --hero-img: url('img/Placeholder-Lightbox-768.png');
  }

  /* Header */
  .header__inner {
    padding-top: 2.6vw;    /* ~20px at 768 */
    padding-bottom: 2.6vw;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  /* Персонаж — только desktop */
  .screen--start__hero-img {
    display: none;
  }

  /* Start hero: PORTRAIT orientation (688×881 at 768) */
  .screen--start__hero {
    flex: none;
    width: 100%;
    min-height: unset;
    aspect-ratio: 688 / 881;
    border-radius: 2.08vw;       /* ~16px at 768 */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    /* Фото поверх базового градиента; ::after-оверлей идёт ещё выше */
    background:
      var(--hero-img) center top / cover no-repeat,
      linear-gradient(-21.4deg, rgb(65, 38, 143) 29.146%, rgb(109, 74, 211) 58.194%);
  }

  /* Наложение поверх фото — точно по Figma (688×881) */
  .screen--start__hero::after {
    content: '';
    position: absolute;
    inset: 0;                    /* покрываем весь блок */
    /* linear: solid purple снизу → transparent; radial: виньет из правого нижнего угла */
    background:
      linear-gradient(-6.91deg,
        rgb(109, 74, 211)          34.353%,
        rgba(108, 60, 180, 0.5)    44.528%,
        rgba(109, 74, 211, 0)      53.437%),
      radial-gradient(89% 72% at 100% 97%,
        rgba(41,  22,  139, 1)     0.67%,
        rgba(65,  48,  154, 0.875) 13.09%,
        rgba(89,  73,  168, 0.75)  25.51%,
        rgba(137, 124, 197, 0.5)   50.34%,
        rgba(232, 226, 255, 0)     100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Content at bottom, full-width */
  .screen--start__content {
    max-width: 100%;
    padding: 3.125vw 5.21vw 5.21vw; /* ~24px 40px 40px at 768 */
    gap: 3.125vw;                    /* ~24px at 768 */
    z-index: 2;
  }

  .screen--start__title {
    font-size: 4.17vw; /* 32px at 768 */
  }

  .screen--start__subtitle {
    font-size: 2.34vw; /* 18px at 768 */
    max-width: 100%;
  }

  /* Full-width CTA button on hero */
  .screen--start__content .btn {
    width: 100%;
  }

  /* Form & Quiz */
  .screen--form,
  .screen--quiz {
    padding: 0em 1em;
  }

  .quiz-card {
    max-width: 100%;
    border-radius: 1.25em;
  }

  /* Result — 768px: column layout, card 402×540px */
  .result__inner {
    flex-direction: column;
    align-items: center;
    padding: 1.25em 1em 2em;
    gap: 2em; /* 32px */
  }

  .result__left {
    align-items: center;
    width: 100%;
    flex: none;
  }

  .result-card-stack {
    width: 25.125rem;  /* 402px */
    height: 33.75rem;  /* 540px */
    left: 0;
  }

  .result__actions {
    width: 25.125rem;  /* 402px */
    flex-direction: row;
    left: 0;
  }

  .result__right {
    width: 100%;
    max-width: none;
    gap: 2em; /* 32px */
  }

  .result__title {
    font-size: 3rem; /* 48px */
  }

  .result__description {
    font-size: 1.25rem; /* 20px */
  }

  .promo-pill__code,
  .promo-pill__discount {
    font-size: 2rem; /* 32px */
  }

  /* Footer stays HORIZONTAL at 768 — vertical only at mobile */
}

/* ============================================================
   MOBILE — ≤480px (375px target)
   ============================================================ */
@media (max-width: 30em) {
  :root {
    --container-pad: 1.25em; /* 20px */
    --hero-img: url('img/Placeholder-Lightbox-375.png');
  }

  /* Header padding */
  .header__inner {
    padding-top: 4.27vw;    /* 16px at 375 */
    padding-bottom: 4.27vw;
  }

  /* Start hero: portrait mobile (343×582 at 375) */
  .screen--start__hero {
    aspect-ratio: 343 / 582;
    border-radius: 5.33vw; /* 20px at 375 = border-radius-md */
    /* Фото поверх базового градиента; ::after-оверлей идёт ещё выше */
    background:
      var(--hero-img) center top / cover no-repeat,
      linear-gradient(-27.44deg, rgb(65, 38, 143) 29.146%, rgb(109, 74, 211) 58.194%);
  }

  /* Переопределяем оверлей для 375px (343×582 по Figma) */
  .screen--start__hero::after {
    background:
      linear-gradient(4.12deg,
        rgb(109, 74, 211)          23.396%,
        rgb(108, 60, 180)          50.68%,
        rgba(109, 74, 211, 0)      54.504%),
      radial-gradient(101% 56% at 100% 97%,
        rgba(41,  22,  139, 1)     0.67%,
        rgba(65,  48,  154, 0.875) 13.09%,
        rgba(89,  73,  168, 0.75)  25.51%,
        rgba(137, 124, 197, 0.5)   50.34%,
        rgba(232, 226, 255, 0)     100%);
    /* inset: 0 и z-index: 1 унаследованы от 768px-правила */
  }

  .screen--start__content {
    padding: 6.4vw 5.33vw 6.4vw; /* ~24px 20px 24px at 375 */
    gap: 4.27vw;                  /* ~16px at 375 */
  }

  .screen--start__title {
    font-size: 8.53vw; /* 32px at 375 */
  }

  .screen--start__subtitle {
    font-size: 4.8vw; /* 18px at 375 */
  }

  /* Кнопки формы и квиза — full-width на мобильных */
  .form__btn-wrap,
  .quiz-btn-wrap {
    display: block; /* убираем flex-centering, кнопка растянется сама */
  }

  .form__btn-wrap .btn,
  .quiz-btn-wrap .btn {
    width: 100%;
  }

  /* Quiz */
  .quiz-card {
    padding: 1.25em;
    border-radius: 1em;
  }

  .quiz-card__title {
    font-size: 1.125rem;
  }

  .quiz-answer__letter-box {
    width: 3em;
    height: 3em;
  }

  .quiz-answer__letter {
    font-size: 1.125rem;
  }

  /* Result — 375px mobile */
  .result__inner {
    gap: 2.75em; /* 44px */
    padding: 1.25em 1em 2em;
  }

  .result-card-stack {
    width: 18.75rem;   /* 300px */
    height: 25.1875rem; /* 403px */
    left: 0;
  }

  .result__actions {
    width: 18.75rem;   /* 300px */
    flex-direction: column; /* кнопки стопкой */
    left: 0;
  }

  .result__actions .btn {
    flex: none;
    width: 100%;
  }

  #btn-download,
  #btn-restart {
    width: 100%;
  }

  .result__title {
    font-size: 2rem; /* 32px */
  }

  .result__description,
  .result__promo-text {
    font-size: 1.125rem; /* 18px */
  }

  .promo-pill__code,
  .promo-pill__discount {
    font-size: 1.5rem; /* 24px */
  }

  .promo-pill {
    height: auto;
    min-height: 5em;
  }

  .promo-pill__left {
    min-width: 75%;
  }

  .result__promo-block {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .result__promo-block::before {
    display: none;
  }

  /* Footer — vertical on mobile */
  .footer__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
    padding: 1.25em 1em;
  }

  .footer__nav {
    order: -1;              /* nav links above © copyright */
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
    width: 100%;
  }

  /* Show mobile-only "Перейти на Островок B2B" link */
  .footer__link--mobile {
    display: block;
  }

  /* На 375px декоративные карточки появляются одновременно */
  .result-card-stack.backs-visible .decor-wrap--a,
  .result-card-stack.backs-visible .decor-wrap--b,
  .result-card-stack.backs-visible .decor-wrap--c,
  .result-card-stack.backs-visible .decor-wrap--d {
    transition-delay: 0.3s;
  }
}