:root {
     --bg: #141414;
     --card: rgba(9, 8, 10, 0.92);
     --card-border: rgba(255, 255, 255, 0.14);
     --text: #ffffff;
     --muted: rgba(255, 255, 255, 0.72);
     --muted-2: rgba(255, 255, 255, 0.48);
     --accent: #ff995d;
     --accent-2: #f22935;
     --accent-gradient: linear-gradient(90deg, #f39a62 0%, #f22935 100%);
     --page-gradient:
         radial-gradient(circle at 10% 12%, rgba(171, 41, 18, 0.65) 0%, rgba(171, 41, 18, 0.2) 18%, rgba(20, 20, 20, 0) 42%),
         radial-gradient(circle at 84% 80%, rgba(182, 41, 22, 0.5) 0%, rgba(182, 41, 22, 0.16) 20%, rgba(20, 20, 20, 0) 42%),
         linear-gradient(90deg, #1b1b1d 0%, #111214 100%);
     --radius-xl: 32px;
     --radius-lg: 24px;
     --radius-md: 18px;
     --radius-sm: 14px;
     --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
     --content-width: 1380px;
     --progress-bg: rgba(255, 255, 255, 0.2);
     --transition: 0.28s ease;
     --font: Inter, Arial, Helvetica, sans-serif;
 }

 * {
     box-sizing: border-box;
     font-family: "Onest", sans-serif;
 }

 html,
 body {
     margin: 0;
     min-height: 100%;
     background: #141414;
     color: var(--text);
     font-family: var(--font);
 }

 body {
     background: var(--page-gradient);
 }

 .quiz-shell {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 36px 20px;
 }

 .quiz {
     width: 100%;
     max-width: var(--content-width);
     position: relative;
 }

 .screen {
     display: none;
     animation: fadeIn 0.35s ease;
 }

 .screen.active {
     display: block;
 }

 .gradient-text {
     background: linear-gradient(90deg, #E97F4F 0%, #D01D20 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(460px, 680px);
     gap: 18px;
     align-items: stretch;
     min-height: 680px;
     border-radius: 0;
 }

 .hero__left,
 .hero__right {
     min-width: 0;
 }

 .hero__left {
     padding: 74px 34px 34px 34px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .logo {
     display: inline-flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 48px;
     user-select: none;
 }

 .logo__mark {
     width: 48px;
     height: 48px;
     position: relative;
     flex: 0 0 auto;
 }

 .logo__mark::before,
 .logo__mark::after,
 .logo__mark span::before {
     content: "";
     position: absolute;
     border-radius: 4px;
 }

 .logo__mark::before {
     width: 12px;
     height: 46px;
     left: 2px;
     top: 5px;
     background: #ff995d;
     transform: rotate(45deg);
 }

 .logo__mark::after {
     width: 12px;
     height: 46px;
     left: 20px;
     top: -2px;
     background: #ffffff;
     transform: rotate(45deg);
 }

 .logo__mark span::before {
     width: 16px;
     height: 16px;
     right: -4px;
     top: 0;
     border-top: 6px solid #ffffff;
     border-right: 6px solid #ffffff;
     transform: rotate(0deg);
 }

 .logo__text {
     font-weight: 800;
     line-height: 0.94;
     letter-spacing: -0.03em;
     font-size: 32px;
 }

 .logo__text span {
     color: var(--accent);
     display: block;
 }

 .hero__title {
     margin: 0 0 34px;
     text-transform: uppercase;
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 0.98;
     font-size: clamp(26px, 4.1vw, 37px);
     max-width: 760px;
 }

 .hero__title .accent {
     color: var(--accent);
 }

 .stats {
     width: 100%;
     max-width: 760px;
     background: linear-gradient(180deg, rgba(20, 3, 3, 0.58), rgba(12, 10, 12, 0.95));
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 26px;
     padding: 28px 30px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     box-shadow: var(--shadow);
     margin-bottom: 86px;
 }

 .stats__item {
     position: relative;
     padding-right: 18px;
     min-width: 0;
 }

 .stats__item:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 6px;
     right: -10px;
     bottom: 6px;
     width: 1px;
     background: rgba(255, 255, 255, 0.18);
 }

 .stats__label {
     font-size: 21px;
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 8px;
     color: rgba(255, 255, 255, 0.95);
 }

 .stats__value {
     color: var(--accent);
     font-size: 20px;
     font-weight: 700;
     line-height: 1.3;
 }

 .hero__bonus {
     display: flex;
     align-items: center;
     gap: 18px;
     font-size: 24px;
     line-height: 1.2;
     color: rgba(255, 255, 255, 0.92);
     max-width: 860px;
 }

 .coin {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 35%, #ffe89a 0, #f8b51e 55%, #e78c00 100%);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: rgba(0, 0, 0, 0.4);
     font-size: 18px;
     font-weight: 900;
     box-shadow: 0 8px 18px rgba(231, 140, 0, 0.32);
     flex: 0 0 auto;
 }

 .hero__right {
     padding: 92px 34px 34px 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .hero-slider-wrap {
     max-width: 760px;
     margin-left: auto;
     width: 100%;
 }

 .hero-slider {
     width: 100%;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: var(--shadow);

     background: rgba(10, 10, 12, 0.4);
     margin-bottom: 28px;
 }

 .hero-slide {
     position: relative;
     min-height: 440px;
     background: linear-gradient(180deg, rgba(0, 18, 54, 0.56), rgba(7, 7, 9, 0.4));
     overflow: hidden;
 }

 .hero-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     position: absolute;
     inset: 0;
 }

 .hero-slide__overlay {
     position: absolute;
     left: 50%;
     top: 54%;
     transform: translate(-50%, -50%);
     width: min(72%, 470px);
     padding: 28px 26px;
     border-radius: 26px;
     background: rgba(8, 8, 12, 0.78);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.18);
     text-align: center;
     font-size: clamp(20px, 1.7vw, 26px);
     font-weight: 600;
     line-height: 1.28;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
 }

 .hero-slide__overlay .accent {
     color: var(--accent);
     font-weight: 800;
 }

 .hero-slider .swiper-pagination {
     bottom: 16px !important;
 }

 .hero-slider .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: rgba(255, 255, 255, 0.35);
     opacity: 1;
 }

 .hero-slider .swiper-pagination-bullet-active {
     background: var(--accent);
 }

 .hero__note {
     margin: 20px 0 26px;
     font-size: clamp(21px, 1.6vw, 22px);
     line-height: 1.28;
     color: rgba(255, 255, 255, 0.94);
     max-width: 760px;
 }

 .hero__note .accent {
     color: var(--accent);
     font-weight: 800;
 }

 .coin-t {
     width: 25px !important;
 }

 .btn {
     border: 0;
     outline: none;
     cursor: pointer;
     font-family: inherit;
     /* font-weight: 800; */
     color: #fff;
     background: var(--accent-gradient);
     transition: transform var(--transition), opacity var(--transition), filter var(--transition);
     box-shadow: 0 16px 34px rgba(242, 41, 53, 0.22);
 }

 .btn:hover {
     transform: translateY(-1px);
     filter: brightness(1.03);
 }

 .btn:active {
     transform: translateY(1px);
 }

 .hero__cta {
     width: 100%;
     min-height: 88px;
     border-radius: 24px;
     font-size: clamp(24px, 1.9vw, 36px);
 }

 .quiz-card {
     width: 100%;
     max-width: 1140px;
     margin: 0 auto;
     padding-top: 30px;
 }

 .quiz-card__logo {
     display: flex;
     justify-content: center;
     margin-bottom: 20px;
 }

 .quiz-box {
     background: linear-gradient(180deg, rgba(15, 6, 6, 0.56), rgba(7, 8, 10, 0.9));
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 32px;
     padding: 0;
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 .progress {
     position: relative;
     height: 8px;
     background: rgba(255, 255, 255, 0.18);
     width: 100%;
 }

 .progress__value {
     height: 100%;
     width: 0;
     background: linear-gradient(90deg, #f39a62 0%, #ff7e49 60%, #ff7341 100%);
     transition: width 0.35s ease;
 }

 .quiz-body {
     display: grid;
     grid-template-columns: minmax(0, 1.03fr) minmax(300px, 470px);
     gap: 44px;
     padding: 44px 36px 28px;
     align-items: start;
 }

 .question {
     margin: 0 0 28px;
     font-size: clamp(18px, 2.15vw, 26px);
     line-height: 1.25;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: rgba(255, 255, 255, 0.98);
 }

 .question strong,
 .question .accent {
     font-weight: 800;
 }

 .answers {
     display: grid;
     gap: 16px;
     margin-bottom: 26px;
 }

 .answer {
     position: relative;
     display: flex;
     align-items: center;
     gap: 16px;
     /* min-height: 82px; */
     padding: 12px 15px;
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: rgba(0, 0, 0, 0.28);
     cursor: pointer;
     transition: border-color var(--transition), background var(--transition), transform var(--transition);
 }

 .answer:hover {
     transform: translateY(-1px);
     border-color: rgba(255, 255, 255, 0.34);
 }

 .answer input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
 }

 .answer__check {
     width: 32px;
     height: 32px;
     border-radius: 9px;
     border: 2px solid rgba(255, 255, 255, 0.55);
     flex: 0 0 auto;
     position: relative;
     transition: all var(--transition);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .answer__check::after {
     content: "✓";
     font-size: 18px;
     font-weight: 900;
     color: #fff;
     transform: scale(0.2);
     opacity: 0;
     transition: all var(--transition);
 }

 .answer__text {
     font-size: clamp(16px, 1.42vw, 18px);
     font-weight: 500;
     line-height: 1.22;
     color: rgba(255, 255, 255, 0.96);
 }

 .answer.is-selected {
     border-color: rgba(255, 153, 93, 0.75);
     background: rgba(16, 10, 8, 0.82);
 }

 .answer.is-selected .answer__check {
     border-color: #f39a62;
     background: #f39a62;
 }

 .answer.is-selected .answer__check::after {
     transform: scale(1);
     opacity: 1;
 }

 .consent {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
     color: var(--muted-2);
     font-size: 15px;
     line-height: 1.2;
     user-select: none;
     margin-top: 10px;
 }

 .consent input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
 }

 .consent__mark {
     width: 26px;
     height: 26px;
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.36);
     position: relative;
     flex: 0 0 auto;
     background: rgba(0, 0, 0, 0.22);
 }

 .consent__mark::after {
     content: "✓";
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     font-weight: 900;
     color: #fff;
     opacity: 0;
     transform: scale(0.5);
     transition: all var(--transition);
     font-size: 14px;
 }

 .consent input:checked+.consent__mark {
     background: #f39a62;
     border-color: #f39a62;
 }

 .consent input:checked+.consent__mark::after {
     opacity: 1;
     transform: scale(1);
 }

 .side-card {
     min-width: 0;
 }

 .visual {
     position: relative;
     border-radius: 28px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: rgba(255, 255, 255, 0.04);
     /* min-height: 355px; */
 }

 .visual img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
 }

 .reward {
     position: absolute;
     top: 18px;
     right: 18px;
     min-width: 148px;
     min-height: 62px;
     border-radius: 20px;
     padding: 12px 18px;
     background: rgba(22, 25, 33, 0.86);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.12);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: clamp(22px, 1.5vw, 34px);
     font-weight: 800;
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
 }

 .reward small {
     font-size: 0.68em;
 }

 .quiz-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 18px;
     padding: 0 36px 28px;
 }

 .icon-btn {
     width: 62px;
     height: 62px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.3);
     background: transparent;
     color: rgba(255, 255, 255, 0.82);
     font-size: 30px;
     line-height: 1;
     cursor: pointer;
     transition: all var(--transition);
 }

 .icon-btn:hover {
     border-color: rgba(255, 255, 255, 0.55);
     color: #fff;
 }

 .next-btn {
     min-width: 220px;
     min-height: 60px;
     padding: 14px 34px;
     border-radius: 22px;
     font-size: clamp(24px, 1.5vw, 22px);
 }

 .next-btn[disabled] {
     opacity: 0.45;
     cursor: not-allowed;
     transform: none;
     filter: none;
 }

 .form-screen {
     width: 100%;
     max-width: 1180px;
     margin: 0 auto;
     padding-top: 16px;
 }

 .form-card {
     background: linear-gradient(180deg, rgba(15, 6, 6, 0.56), rgba(7, 8, 10, 0.9));
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 32px;
     padding: 40px 44px;
     box-shadow: var(--shadow);
     display: grid;
     grid-template-columns: minmax(0, 1fr) 1px minmax(360px, 480px);
     gap: 42px;
     align-items: stretch;
 }

 .divider {
     background: rgba(255, 255, 255, 0.22);
     width: 1px;
     height: 100%;
 }

 .gift-side {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     min-width: 0;
 }

 .gift-side .logo {
     margin-bottom: 34px;
 }

 .gift-title {
     margin: 0 0 30px;
     font-size: clamp(28px, 2.8vw, 28px);
     line-height: 1.12;
     font-weight: 700;
     letter-spacing: -0.03em;
 }

 .gift-title .accent {
     color: var(--accent);
     display: block;
     /* font-weight: 800; */
 }

 .gift-box {
     width: 100%;
     max-width: 520px;
     border-radius: 26px;
     border: 1px solid rgba(242, 41, 53, 0.9);
     padding: 38px 28px 30px;
     position: relative;
     background: rgba(0, 0, 0, 0.2);
 }

 .gift-icon {
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: var(--accent-gradient);
     display: grid;
     place-items: center;
     box-shadow: 0 16px 34px rgba(242, 41, 53, 0.24);
     font-size: 32px;
 }

 .gift-box p {
     margin: 0;
     font-size: clamp(22px, 1.45vw, 30px);
     line-height: 1.35;
     color: rgba(255, 255, 255, 0.96);
 }

 .gift-box strong {
     color: var(--accent);
     font-weight: 800;
 }

 .form-side {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .form-grid {
     display: grid;
     gap: 16px;
 }

 .input,
 .phone-wrap {
     width: 100%;
     min-height: 74px;
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     background: rgba(0, 0, 0, 0.28);
     color: #fff;
     font-family: inherit;
     font-size: 24px;
     padding: 0 22px;
     outline: none;
     transition: border-color var(--transition), background var(--transition);
 }

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

 .input:focus,
 .phone-wrap:focus-within {
     border-color: rgba(255, 255, 255, 0.34);
     background: rgba(255, 255, 255, 0.03);
 }

 .phone-wrap {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-right: 18px;
 }

 .phone-flag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     white-space: nowrap;
     color: rgba(255, 255, 255, 0.9);
     font-size: 22px;
     flex: 0 0 auto;
 }

 .phone-wrap input {
     border: 0;
     outline: 0;
     background: transparent;
     color: #fff;
     min-width: 0;
     width: 100%;
     font-size: 24px;
     font-family: inherit;
 }

 .submit-btn {
     width: 100%;
     min-height: 86px;
     border-radius: 24px;
     margin-top: 18px;
     font-size: clamp(28px, 2vw, 38px);
 }

 .visually-hidden {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important;
 }

 @media (max-width: 1240px) {
     .hero {
         grid-template-columns: 1fr;
         min-height: auto;
         gap: 0;
     }

     .hero__left,
     .hero__right {
         padding: 30px 24px;
     }

     .hero-slider-wrap {
         margin-left: 0;
     }

     .stats {
         max-width: none;
         margin-bottom: 34px;
     }

     .hero__bonus {
         margin-bottom: 12px;
     }

     .quiz-body {
         grid-template-columns: 1fr;
     }

     .side-card {
         max-width: 520px;
     }

     .form-card {
         grid-template-columns: 1fr;
     }

     .divider {
         display: none;
     }
 }

 @media (max-width: 767px) {
     :root {
         --radius-xl: 28px;
     }

     .quiz-shell {
         padding: 0;
         min-height: 100dvh;
         display: block;
     }

     .quiz {
         min-height: 100dvh;
     }

     .hero {
         border: 0;
     }

     .hero__left,
     .hero__right {
         padding: 18px 16px;
     }

     .logo {
         justify-content: center;
         margin-bottom: 28px;
         gap: 10px;
     }

     .logo__mark {
         width: 28px;
         height: 28px;
     }

     .logo__mark::before,
     .logo__mark::after {
         height: 28px;
         width: 7px;
     }

     .logo__mark::before {
         left: 1px;
         top: 3px;
     }

     .logo__mark::after {
         left: 12px;
         top: -1px;
     }

     .logo__mark span::before {
         width: 9px;
         height: 9px;
         right: -1px;
         top: 0;
         border-top-width: 4px;
         border-right-width: 4px;
     }

     .logo__text {
         font-size: 18px;
     }

     .hero__title {
         text-align: center;
         font-size: 27px;
         max-width: 320px;
         margin: 0 auto 18px;
     }

     .stats {
         grid-template-columns: 1fr 1fr;
         padding: 18px 16px;
         gap: 14px 8px;
         border-radius: 22px;
         margin-bottom: 24px;
     }

     .stats__item {
         padding-right: 10px;
     }

     .stats__item:nth-child(2)::after,
     .stats__item:last-child::after {
         display: none;
     }

     .stats__item:last-child {
         grid-column: 1 / -1;
         padding-top: 12px;
         border-top: 1px solid rgba(255, 255, 255, 0.14);
     }

     .stats__label {
         font-size: 13px;
     }

     .stats__value {
         font-size: 14px;
     }

     .hero__bonus {
         justify-content: center;
         text-align: center;
         gap: 10px;
         font-size: 15px;
         margin-bottom: 20px;
     }

     .coin {
         width: 24px;
         height: 24px;
         font-size: 13px;
     }

     .hero-slide {
         min-height: 235px;
     }

     .hero-slide__overlay {
         width: calc(100% - 34px);
         padding: 14px 14px;
         border-radius: 18px;
         font-size: 16px;
     }

     .hero__note {
         font-size: 16px;
         text-align: center;
         margin-bottom: 18px;
     }

     .hero__cta {
         min-height: 58px;
         border-radius: 16px;
         font-size: 16px;
     }

     .quiz-card {
         padding: 14px 10px;
     }

     .quiz-card__logo {
         margin-bottom: 12px;
     }

     .quiz-box {
         border-radius: 26px;
     }

     .progress {
         height: 6px;
     }

     .quiz-body {
         padding: 18px 14px 16px;
         gap: 16px;
     }

     .question {
         font-size: 17px;
         margin-bottom: 16px;
     }

     .answers {
         gap: 10px;
         margin-bottom: 14px;
     }

     .answer {
         min-height: 50px;
         padding: 10px 12px;
         border-radius: 12px;
         gap: 10px;
     }

     .answer__check {
         width: 20px;
         height: 20px;
         border-radius: 6px;
     }

     .answer__check::after {
         font-size: 12px;
     }

     .answer__text {
         font-size: 13px;
     }

     .side-card {
         order: -1;
     }

     .visual {
         
         border-radius: 20px;
     }

     .reward {
         min-width: 92px;
         min-height: 40px;
         padding: 8px 10px;
         top: 10px;
         right: 10px;
         border-radius: 14px;
         font-size: 14px;
     }

     .consent {
         font-size: 11px;
         gap: 8px;
     }

     .consent__mark {
         width: 16px;
         height: 16px;
         border-radius: 4px;
     }

     .consent__mark::after {
         font-size: 10px;
     }

     .quiz-footer {
         padding: 0 14px 16px;
         gap: 12px;
     }

     .icon-btn {
         width: 34px;
         height: 34px;
         font-size: 18px;
     }

     .next-btn {
         min-width: 120px;
         min-height: 42px;
         border-radius: 12px;
         font-size: 15px;
         padding: 10px 16px;
     }

     .form-screen {
         padding: 14px 10px;
     }

     .form-card {
         padding: 18px 14px;
         border-radius: 24px;
         gap: 18px;
     }

     .gift-title {
         font-size: 17px;
         margin-bottom: 18px;
     }

     .gift-box {
         border-radius: 18px;
         padding: 28px 14px 18px;
     }

     .gift-icon {
         width: 48px;
         height: 48px;
         top: -22px;
         font-size: 22px;
     }

     .gift-box p {
         font-size: 13px;
     }

     .form-grid {
         gap: 10px;
     }

     .input,
     .phone-wrap {
         min-height: 46px;
         border-radius: 12px;
         font-size: 14px;
         padding: 0 14px;
     }

     .phone-flag,
     .phone-wrap input {
         font-size: 14px;
     }

     .submit-btn {
         min-height: 50px;
         border-radius: 14px;
         font-size: 16px;
         margin-top: 6px;
     }
 }