*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body.page-2 {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  font-family: "Paperlogy", system-ui, sans-serif;
  font-weight: 500;
}

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

.page-2__inner {
  flex: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 36px) 16px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.page-2__form {
  display: flex;
  flex-direction: column;
}

.page-2__hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-shrink: 0;
  max-height: clamp(260px, 56vh, 520px);
  min-height: 0;
}

.page-2__hero img {
  width: 100%;
  max-width: 100%;
  max-height: clamp(260px, 56vh, 520px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 55%,
    rgba(0, 0, 0, 0.92) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 55%,
    rgba(0, 0, 0, 0.92) 78%,
    transparent 100%
  );
}

.page-2__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-2__title {
  margin: 0;
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #ffe96a;
  text-shadow: 0 0 8px rgba(255, 224, 90, 0.22);
}

.page-2__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.page-2__choice {
  appearance: none;
  margin: 0;
  padding: 12px 6px;
  min-height: 48px;
  border: none;
  border-radius: 4px;
  background: #1b1b1b;
  color: #ffe96a;
  font-family: inherit;
  font-size: clamp(0.72rem, 3.1vw, 0.85rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.page-2__choice:hover {
  filter: brightness(0.96);
}

.page-2__choice:active {
  transform: scale(0.98);
  background: #cf1026;
  color: #ffe96a;
}

.page-2__choice.is-selected {
  background: #cf1026;
  color: #ffe96a;
  box-shadow: inset 0 0 0 2px #ff6a7a, 0 0 10px rgba(220, 22, 50, 0.35);
}

.page-2__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: #1b1b1b;
  color: #ffe96a;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
}

.page-2__input::placeholder {
  color: #b7ab66;
}

.page-2__input:focus {
  outline: 2px solid rgba(255, 200, 80, 0.9);
  outline-offset: 2px;
}

.page-2__submit {
  margin-top: 20px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 130, 150, 0.95);
  background: radial-gradient(circle at 50% 30%, rgba(255, 64, 96, 0.45), rgba(20, 5, 10, 0.88));
  color: #ffe96a;
  font-family: inherit;
  font-size: clamp(0.95rem, 3.5vw, 1.05rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(255, 80, 110, 0.85),
    0 0 24px rgba(255, 50, 90, 0.65),
    0 0 40px rgba(255, 30, 75, 0.45),
    inset 0 0 10px rgba(255, 110, 140, 0.22);
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.1s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  animation: submit-neon-pulse 1.8s ease-in-out infinite;
}

.page-2__submit:hover {
  box-shadow:
    0 0 14px rgba(255, 95, 125, 0.95),
    0 0 30px rgba(255, 70, 110, 0.8),
    0 0 46px rgba(255, 40, 85, 0.55),
    inset 0 0 12px rgba(255, 120, 150, 0.28);
  background: radial-gradient(circle at 50% 30%, rgba(255, 78, 112, 0.55), rgba(28, 6, 12, 0.92));
  filter: brightness(1.05);
}

.page-2__submit:active {
  transform: scale(0.99);
}

.page-2__submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.15);
  box-shadow:
    0 0 4px rgba(255, 90, 120, 0.45),
    inset 0 0 8px rgba(255, 110, 140, 0.18);
  animation: none;
}

.page-2__submit:focus-visible {
  outline: 2px solid rgba(255, 200, 80, 0.9);
  outline-offset: 4px;
}

@keyframes submit-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 80, 110, 0.85),
      0 0 24px rgba(255, 50, 90, 0.65),
      0 0 40px rgba(255, 30, 75, 0.45),
      inset 0 0 10px rgba(255, 110, 140, 0.22);
  }
  50% {
    box-shadow:
      0 0 16px rgba(255, 95, 125, 0.95),
      0 0 34px rgba(255, 70, 110, 0.85),
      0 0 54px rgba(255, 40, 85, 0.62),
      inset 0 0 14px rgba(255, 120, 150, 0.32);
  }
}