:root {
  --text: #f8fafc;
  --muted: #d1d5db;

  --purple: #8b5cf6;
  --violet: #a855f7;
  --pink: #ec4899;
  --gold: #facc15;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family:
    Inter,
    system-ui,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(168, 85, 247, 0.20),
      transparent 26%
    ),

    radial-gradient(
      circle at 85% 14%,
      rgba(236, 72, 153, 0.14),
      transparent 24%
    ),

    radial-gradient(
      circle at 78% 82%,
      rgba(192, 132, 252, 0.10),
      transparent 22%
    ),

    radial-gradient(
      circle at 20% 80%,
      rgba(139, 92, 246, 0.12),
      transparent 24%
    ),

    linear-gradient(
      180deg,
      #180028 0%,
      #12001d 42%,
      #090011 100%
    );

  background-attachment: fixed;
}

.page {
  width:
    min(
      1000px,
      calc(100% - 32px)
    );

  margin: 0 auto;

  padding:
    40px
    0
    80px;
}

.card {
  background:
    linear-gradient(
      180deg,
      rgba(35, 14, 56, 0.92),
      rgba(16, 5, 28, 0.94)
    );

  border:
    1px solid
    rgba(255,255,255,0.06);

  border-radius: 32px;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 90px rgba(168,85,247,0.06);

  backdrop-filter: blur(16px);
}

.hero-card {
  position: relative;

  overflow: hidden;

  min-height: 280px;

  padding:
    42px
    44px;

  margin-bottom: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(28, 8, 48, 0.96),
      rgba(10, 2, 20, 0.98)
    );
}

.hero-orb {
  position: absolute;

  width: 440px;
  height: 440px;

  right: -120px;
  top: -120px;

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.22) 0%,
      rgba(236,72,153,0.20) 18%,
      rgba(168,85,247,0.18) 38%,
      rgba(168,85,247,0.04) 62%,
      transparent 76%
    );

  filter: blur(20px);

  opacity: 0.95;

  pointer-events: none;
}

.brand-wrap {
  position: relative;
  z-index: 2;

  max-width: 760px;
}

.brand {
  margin: 0;

  font-size:
    clamp(
      4rem,
      11vw,
      8rem
    );

  line-height: 0.88;
  letter-spacing: -0.08em;

  font-weight: 700;

  color: white;

  text-transform: lowercase;

  text-shadow:
    0 0 30px rgba(255,255,255,0.10),
    0 0 60px rgba(168,85,247,0.18);
}

.brand span {
  color:
    rgba(255,255,255,0.52);

  font-weight: 400;
}

.opening-line {
  margin:
    22px
    0
    12px;

  font-size:
    clamp(
      1.4rem,
      2vw,
      2rem
    );

  line-height: 1.3;

  color:
    rgba(255,255,255,0.96);

  letter-spacing: -0.02em;
}

.opening-copy {
  margin: 0;

  max-width: 620px;

  font-size: 1.08rem;
  line-height: 1.8;

  color:
    rgba(255,255,255,0.72);
}

.question-stack {
  display: grid;
  gap: 24px;
}

.hidden {
  display: none;
}

.progress-card {
  position: sticky;
  top: 14px;
  z-index: 10;
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 18px;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}

.progress-row p {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: white;
  color: #180028;
  font-weight: 800;
  text-decoration: none;
}

.question-card {
  padding:
    30px
    32px;

  border-radius: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(40, 18, 60, 0.9),
      rgba(18, 6, 32, 0.94)
    );

  border:
    1px solid
    rgba(255,255,255,0.06);
}

.question-number {
  margin:
    0
    0
    18px;

  font-size: 0.85rem;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--gold);
}

.question-title {
  margin:
    0
    0
    28px;

  font-size:
    clamp(
      2rem,
      3vw,
      3rem
    );

  line-height: 1.08;
  letter-spacing: -0.03em;

  color: white;
}

.answers-grid,
.answer-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.answer-btn,
.answer-choice {
  width: 100%;

  padding:
    22px
    22px;

  border-radius: 22px;

  border:
    1px solid
    rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.04);

  color: white;

  font:
    inherit;

  font-size: 1.05rem;
  line-height: 1.5;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.answer-btn:hover,
.answer-choice:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(168,85,247,0.35);

  background:
    rgba(255,255,255,0.07);

  box-shadow:
    0 0 28px rgba(168,85,247,0.10);
}

.answer-btn.selected,
.answer-choice.selected {
  border-color:
    rgba(250,204,21,0.55);

  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,0.18),
      rgba(236,72,153,0.12)
    );

  box-shadow:
    0 0 32px rgba(236,72,153,0.14);
}

.answer-choice:disabled {
  cursor: wait;
  opacity: 0.72;
}

.finish-status {
  padding: 28px 32px;
  border-radius: 28px;
}

.finish-status[data-type="success"] {
  border-color: rgba(34, 197, 94, 0.34);
}

.finish-status[data-type="warning"] {
  border-color: rgba(250, 204, 21, 0.36);
}

.finish-title {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.12;
}

.finish-message {
  margin: 0;
  max-width: 720px;
  color: rgba(255,255,255,0.74);
  font-size: 1.05rem;
  line-height: 1.7;
}

@media (max-width: 760px) {

  .page {
    width:
      min(
        100% - 18px,
        1000px
      );

    padding-top: 20px;
  }

  .hero-card,
  .question-card,
  .finish-status {
    padding:
      24px
      20px;
  }

  .answers-grid,
  .answer-list {
    grid-template-columns: 1fr;
  }

  .brand {
    font-size: 4rem;
  }

  .opening-line {
    font-size: 1.3rem;
  }

  .question-title {
    font-size: 2rem;
  }
}