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

 html,
 body {
   height: 100%;
 }

 body {
   font-family:
     Montserrat Alternates,
     sans-serif;
   color: #fff;
   background:
     linear-gradient(rgba(24, 9, 52, 0.62), rgba(18, 7, 43, 0.82)) center / cover fixed no-repeat;
 }

 .container-wrapper {
   display: flex;
   flex-direction: column;
   min-width: 320px;
   min-height: 100%;
   height: 100%;
   padding-bottom: 30px;
   overflow-x: hidden;
 }

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   max-width: 1040px;
   height: 100%;
   min-height: 100%;
   padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px) 48px;
   margin: 0 auto;
   overflow-y: scroll;
 }

 .container::-webkit-scrollbar {
   display: none;
 }

 .footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 550px;
   width: 100%;
   padding: 0 16px;
   padding-top: 4px;
   margin: 0 auto;
   font-size: 11px;
   line-height: normal;
 }

 .footer p {
   padding: 0;
   margin: 0;
   text-align: center;
 }

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

 :root {
   --bg-start: #312e81;
   --bg-end: #0f766e;
   --surface: rgba(255, 255, 255, 0.12);
   --surface-border: rgba(255, 255, 255, 0.2);
   --accent: #fbbf24;
   --accent-dark: #ea580c;
   --navy: #172554;
   --text: #ffffff;
   --muted: rgba(255, 255, 255, 0.86);
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   min-height: 100%;
 }

 body {
   margin: 0;
   color: var(--text);
   font-family: Arial, Helvetica, sans-serif;
   background:
     radial-gradient(circle at 20% 15%, rgba(251, 191, 36, 0.18), transparent 28%),
     radial-gradient(circle at 82% 72%, rgba(45, 212, 191, 0.2), transparent 34%),
     linear-gradient(145deg, var(--bg-start), var(--bg-end));
 }

 body::before,
 body::after {
   position: fixed;
   z-index: 0;
   width: 280px;
   height: 280px;
   content: "";
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 50%;
   pointer-events: none;
 }

 body::before {
   top: -120px;
   left: -90px;
 }

 body::after {
   right: -120px;
   bottom: -130px;
 }

 .page {
   position: relative;
   z-index: 1;
   display: flex;
   min-height: 100vh;
   align-items: flex-start;
   justify-content: center;
   padding: 30px 18px 50px;
 }

 .quiz-card {
   width: min(100%, 720px);
   padding: 30px 28px 34px;
   text-align: center;
   background: var(--surface);
   border: 1px solid var(--surface-border);
   border-radius: 30px;
   box-shadow: 0 24px 70px rgba(3, 7, 18, 0.28);
   backdrop-filter: blur(8px);
 }

 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 14px;
   padding: 8px 16px;
   color: #422006;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   background: var(--accent);
   border-radius: 999px;
 }

 .eyebrow::before,
 .eyebrow::after {
   width: 5px;
   height: 5px;
   content: "";
   background: currentColor;
   border-radius: 50%;
 }

 h1 {
   max-width: 560px;
   margin: 0 auto 12px;
   font-size: clamp(32px, 7vw, 54px);
   line-height: 0.98;
   letter-spacing: -0.04em;
 }

 .subtitle {
   max-width: 560px;
   margin: 0 auto;
   color: var(--muted);
   font-size: clamp(16px, 3vw, 20px);
   line-height: 1.5;
 }

 .duration {
   display: inline-block;
   margin-top: 18px;
   padding: 10px 18px;
   color: #ffffff;
   font-size: 15px;
   font-weight: 700;
   background: rgba(15, 23, 42, 0.36);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 12px;
 }

 .section-title {
   margin: 28px 0 20px;
   font-size: clamp(20px, 4vw, 28px);
   font-weight: 900;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }

 .choices {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
   gap: 22px;
   align-items: end;
 }

 .gender-card {
   display: block;
   min-width: 0;
   overflow: hidden;
   color: var(--text);
   text-decoration: none;
   cursor: pointer;
   background: rgba(255, 255, 255, 0.96);
   border: 0;
   border-radius: 24px;
   box-shadow: 0 15px 35px rgba(2, 6, 23, 0.24);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .gender-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 42px rgba(2, 6, 23, 0.32);
 }

 .gender-card:focus-visible {
   outline: 4px solid var(--accent);
   outline-offset: 4px;
 }

 .gender-card img {
   display: block;
   width: 100%;
   height: 190px;
   object-fit: contain;
   object-position: center bottom;
   padding: 14px 12px 0;
 }

 .card-label {
   padding: 14px 10px 16px;
   font-size: 20px;
   font-weight: 900;
   background: linear-gradient(135deg, var(--navy), #312e81);
 }

 .brain-wrap {
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   min-height: 230px;
 }

 .brain-wrap::before {
   position: absolute;
   bottom: 5px;
   width: 155px;
   height: 26px;
   content: "";
   background: rgba(15, 23, 42, 0.24);
   filter: blur(2px);
   border-radius: 50%;
 }

 .brain-img {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   max-width: 185px;
   max-height: 230px;
   object-fit: contain;
   animation: float 3.2s ease-in-out infinite;
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-8px);
   }
 }

 @media (max-width: 650px) {
   .page {
     padding: 16px 12px 30px;
   }

   .quiz-card {
     padding: 24px 16px 28px;
     border-radius: 24px;
   }

   .choices {
     grid-template-columns: 1fr 1fr;
     gap: 14px;
   }

   .brain-wrap {
     grid-column: 1 / -1;
     grid-row: 1;
     min-height: 150px;
   }

   .brain-img {
     max-width: 150px;
     max-height: 150px;
   }

   .gender-card img {
     height: 155px;
   }

   .card-label {
     font-size: 18px;
   }
 }

 @media (max-width: 390px) {
   .choices {
     gap: 10px;
   }

   .gender-card img {
     height: 135px;
     padding-inline: 4px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .brain-img {
     animation: none;
   }

   .gender-card {
     transition: none;
   }
 }

 @media (max-height: 660px) {
   .brain-wrap {
     display: none;
   }
 }