:root {
  --violet: #beb0dd;
  --violet-deep: #a89acb;
  --yellow: #f3e59a;
  --ink: #241a33;
  --ink-soft: #3b2b54;
  --field-bg: rgba(247, 243, 253, 0.92);
  --field-border: rgba(95, 77, 136, 0.24);
  --success: #1e5c33;
  --error: #8e204b;
  --ease-fluid: cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-glide: cubic-bezier(0.24, 0.78, 0.2, 1);
  --ease-soft: cubic-bezier(0.3, 0.62, 0.25, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Montserrat", sans-serif;
  background: radial-gradient(circle at 20% 10%, #cec1ec 0, var(--violet) 46%, var(--violet-deep) 100%);
  color: var(--ink);
}

body {
  overflow-x: hidden;
}

.signup-page {
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding: max(18px, env(safe-area-inset-top)) clamp(14px, 5vw, 38px)
    max(24px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 2vh, 20px);
  isolation: isolate;
  overflow: hidden;
}

.signup-page::before,
.signup-page::after {
  content: "";
  position: absolute;
  width: clamp(220px, 42vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  animation: auraDrift 16s var(--ease-fluid) infinite alternate;
}

.signup-page::before {
  background: radial-gradient(circle, rgba(246, 233, 168, 0.65), transparent 62%);
  left: -14%;
  top: 8%;
}

.signup-page::after {
  background: radial-gradient(circle, rgba(221, 204, 248, 0.72), transparent 62%);
  right: -16%;
  bottom: 4%;
  animation-delay: 1.2s;
}

.loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
  background: radial-gradient(circle at 50% 15%, #cfc0ec 0, #b29fd8 55%, #a28ccf 100%);
  transition: opacity 520ms var(--ease-soft), visibility 520ms var(--ease-soft);
}

.loader-logo {
  width: min(60vw, 220px);
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0.9;
  animation: loaderLogo 1200ms ease-in-out infinite alternate;
}

.loader-line {
  width: min(46vw, 180px);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
}

.loader-line span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--yellow);
  filter: saturate(1.06);
  animation: loaderRun 1100ms ease-in-out infinite;
}

.signup-page.stage-title .loader,
.signup-page.stage-details .loader,
.signup-page.form-open .loader {
  opacity: 0;
  visibility: hidden;
}

.signup-head {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transition: opacity 520ms var(--ease-soft), transform 660ms var(--ease-glide);
}

.signup-page.stage-title .signup-head,
.signup-page.stage-details .signup-head,
.signup-page.form-open .signup-head {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.apm-logo {
  width: min(58vw, 220px);
  height: auto;
  object-fit: contain;
  display: block;
}

.decor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.decor-layer picture {
  display: contents;
}

.signup-head picture,
.loader picture {
  display: block;
}

.flower {
  position: absolute;
  width: var(--size, 180px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: translateY(20px) scale(0.82) rotate(0deg);
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.14));
  transition: opacity 640ms var(--ease-soft), transform 900ms var(--ease-glide);
  animation: float var(--drift, 8s) var(--ease-fluid) infinite alternate,
    pulse var(--pulse, 6.1s) ease-in-out infinite,
    spin var(--spin, 28s) linear infinite,
    driftXY var(--wander, 12s) var(--ease-fluid) infinite;
  animation-play-state: paused;
}

.f1 { --size: clamp(92px, 22vw, 180px); left: -8%; top: 16%; --drift: 8.7s; --pulse: 5.7s; --spin: 30s; --wander: 12.8s; }
.f2 { --size: clamp(128px, 31vw, 300px); left: -14%; top: 37%; --drift: 7.4s; --pulse: 6.5s; --spin: 23s; --wander: 11.3s; }
.f3 { --size: clamp(98px, 24vw, 200px); right: -10%; top: 21%; --drift: 8.1s; --pulse: 5.9s; --spin: 28s; --wander: 12.1s; }
.f4 { --size: clamp(138px, 33vw, 320px); right: -18%; bottom: 22%; --drift: 7.2s; --pulse: 6.7s; --spin: 25s; --wander: 10.9s; }
.f5 { --size: clamp(70px, 14vw, 116px); left: 24%; bottom: 26%; --drift: 8.3s; --pulse: 5.9s; --spin: 27s; --wander: 13.2s; }
.f6 { --size: clamp(118px, 28vw, 250px); left: 62%; bottom: -6%; --drift: 9s; --pulse: 6.8s; --spin: 31s; --wander: 12.4s; }

.signup-page.stage-title .flower,
.signup-page.stage-details .flower {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  animation-play-state: running;
}

.signup-page.form-open .flower {
  opacity: 0;
  transform: translateY(18px) scale(0.86);
  transition-duration: 360ms;
}

.signup-page.stage-title .f1 { transition-delay: 120ms; }
.signup-page.stage-title .f2 { transition-delay: 220ms; }
.signup-page.stage-title .f3 { transition-delay: 320ms; }
.signup-page.stage-title .f4 { transition-delay: 420ms; }
.signup-page.stage-title .f5 { transition-delay: 520ms; }
.signup-page.stage-title .f6 { transition-delay: 620ms; }

.intro-stage {
  position: relative;
  z-index: 3;
  min-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr auto auto;
  align-items: stretch;
}

.hero-title {
  margin: 0;
  width: min(92vw, 900px);
  justify-self: center;
  align-self: center;
  max-width: 100%;
  color: var(--yellow);
  text-transform: uppercase;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: 0;
  transform: rotate(-8.4deg) translateY(28px) scale(0.9);
  opacity: 0;
  transition: transform 820ms var(--ease-glide), opacity 660ms var(--ease-soft);
}

.hero-title .line {
  display: block;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(44px, 13.1vw, 94px);
  font-weight: 900;
  letter-spacing: -0.07em;
}

.hero-title .line.alt {
  font-size: clamp(34px, 10vw, 70px);
  font-weight: 500;
  letter-spacing: -0.1em;
}

.hero-title .space {
  display: inline-block;
  width: 0.18em;
}

.letter {
  display: inline-block;
  opacity: 0;
  animation: none;
}

.signup-page.stage-title .hero-title,
.signup-page.stage-details .hero-title {
  opacity: 1;
  transform: rotate(-8.4deg) translateY(0) scale(1);
}

.signup-page.stage-title .letter,
.signup-page.stage-details .letter {
  animation: titleLetterRise 760ms var(--ease-glide) both, floatLetter 4.4s var(--ease-fluid) infinite;
  animation-delay: calc(var(--i, 0) * 56ms), calc(940ms + var(--i, 0) * 78ms);
}

.hero-copy {
  margin: 0;
  width: min(100%, 760px);
  max-width: 760px;
  grid-row: 4;
  justify-self: start;
  align-self: end;
  text-align: left;
  color: rgba(34, 24, 48, 0.92);
  font-size: clamp(15px, 3.2vw, 21px);
  line-height: 1.4;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms var(--ease-soft), transform 700ms var(--ease-glide);
  overflow-wrap: anywhere;
}

.hero-copy strong {
  font-weight: 800;
}

.intro-cta-wrap {
  grid-row: 5;
  width: 100%;
  align-self: end;
  padding-top: 12px;
  padding-bottom: 4px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms var(--ease-soft), transform 650ms var(--ease-glide);
}

.open-form-btn {
  appearance: none;
  border: 0;
  border-radius: 24px;
  width: 100%;
  min-height: clamp(52px, 12.8vw, 64px);
  padding: 0.78em 1.1em;
  background: #f0e6ad;
  color: #1f162a;
  font-size: clamp(18px, 3.4vw, 24px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(30, 20, 44, 0.11);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
  position: relative;
  overflow: hidden;
}

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

.open-form-btn::after {
  content: "";
  position: absolute;
  inset: 0 -130%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.52) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: ctaSheen 3800ms ease-in-out infinite 1.2s;
}

.signup-page.stage-details .hero-title {
  transform: rotate(-8.4deg) translateY(-7.5vh) scale(0.84);
}

.signup-page.stage-details .hero-copy,
.signup-page.stage-details .intro-cta-wrap {
  opacity: 1;
  transform: translateY(0);
}

.form-panel {
  position: absolute;
  left: clamp(14px, 5vw, 38px);
  right: clamp(14px, 5vw, 38px);
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: calc(100% - (2 * clamp(14px, 5vw, 38px)));
  z-index: 6;
  opacity: 0;
  transform: translateY(34px) scale(0.96);
  pointer-events: none;
  transition: opacity 500ms var(--ease-soft), transform 620ms var(--ease-glide);
}

.signup-page.form-open .intro-stage {
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
  transition: opacity 360ms var(--ease-soft), transform 520ms var(--ease-glide);
  pointer-events: none;
}

.signup-page.form-open .signup-head {
  opacity: 0;
  transform: translateY(-20px);
}

.signup-page.form-open .form-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.signup-page.form-open .signup-form .field,
.signup-page.form-open .signup-form .check-row,
.signup-page.form-open .signup-form .submit-btn,
.signup-page.form-open .signup-form .status {
  opacity: 0;
  transform: translateY(10px);
  animation: formFieldIn 540ms var(--ease-glide) forwards;
}

.signup-page.form-open .signup-form .field:nth-of-type(1) { animation-delay: 60ms; }
.signup-page.form-open .signup-form .field:nth-of-type(2) { animation-delay: 140ms; }
.signup-page.form-open .signup-form .field:nth-of-type(3) { animation-delay: 220ms; }
.signup-page.form-open .signup-form .check-row { animation-delay: 300ms; }
.signup-page.form-open .signup-form .submit-btn { animation-delay: 380ms; }
.signup-page.form-open .signup-form .status { animation-delay: 440ms; }

.success-panel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 30px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 420ms var(--ease-soft), transform 520ms var(--ease-glide);
}

.success-card {
  width: min(680px, 100%);
  border-radius: 20px;
  padding: clamp(20px, 6vw, 34px);
  background: linear-gradient(180deg, rgba(232, 224, 245, 0.97), rgba(208, 194, 234, 0.96));
  border: 1px solid rgba(89, 72, 126, 0.2);
  box-shadow: 0 20px 44px rgba(35, 26, 56, 0.2);
  display: grid;
  gap: 10px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.success-card::before {
  content: "";
  position: absolute;
  inset: -30% -120%;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, 0.36) 50%, transparent 57%);
  transform: translateX(-100%);
  opacity: 0;
}

.success-burst {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 72px;
  height: 72px;
  pointer-events: none;
}

.success-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: #f8ecb3;
  opacity: 0;
  transform: translate(0, 0) scale(0.6);
}

.success-burst span:nth-child(1) { --tx: -28px; --ty: -20px; animation-delay: 120ms; }
.success-burst span:nth-child(2) { --tx: 6px; --ty: -30px; animation-delay: 190ms; }
.success-burst span:nth-child(3) { --tx: 28px; --ty: -8px; animation-delay: 260ms; }
.success-burst span:nth-child(4) { --tx: 22px; --ty: 24px; animation-delay: 330ms; }
.success-burst span:nth-child(5) { --tx: -8px; --ty: 30px; animation-delay: 400ms; }
.success-burst span:nth-child(6) { --tx: -30px; --ty: 8px; animation-delay: 470ms; }

.success-kicker {
  margin: 0;
  color: #3b2b54;
  font-size: clamp(13px, 3.3vw, 15px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.success-title {
  margin: 0;
  color: #221835;
  font-size: clamp(24px, 7vw, 36px);
  line-height: 1.15;
  font-style: italic;
  font-weight: 900;
}

.success-copy {
  margin: 0;
  color: rgba(35, 25, 54, 0.95);
  font-size: clamp(15px, 4.2vw, 21px);
  line-height: 1.45;
}

.success-btn {
  margin-top: 8px;
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: clamp(48px, 12.4vw, 58px);
  background: #f0e6ad;
  color: #1f162a;
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 700;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
}

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

.signup-page.success-open .success-panel {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.signup-page.success-open .success-card {
  animation: successCardIn 540ms var(--ease-glide) both;
}

.signup-page.success-open .success-card::before {
  opacity: 1;
  animation: successSheen 1600ms var(--ease-glide) 160ms both;
}

.signup-page.success-open .success-burst span {
  animation: burstDot 620ms var(--ease-glide) both;
}

.signup-page.success-open .intro-stage,
.signup-page.success-open .form-panel,
.signup-page.success-open .signup-head {
  opacity: 0;
  pointer-events: none;
}

.signup-form {
  display: grid;
  gap: clamp(12px, 2.4vw, 16px);
  padding: clamp(16px, 4.2vw, 24px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(215, 205, 236, 0.95), rgba(197, 183, 227, 0.95));
  border: 1px solid rgba(89, 72, 126, 0.18);
  box-shadow: 0 18px 36px rgba(35, 26, 56, 0.15);
  backdrop-filter: blur(4px);
}

.field { display: grid; gap: 7px; }

.field-label {
  font-size: clamp(13px, 3.3vw, 15px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(41, 31, 60, 0.94);
}

.field input {
  appearance: none;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: var(--field-bg);
  min-height: clamp(46px, 11.8vw, 52px);
  padding: 0 14px;
  font-size: clamp(15px, 4vw, 18px);
  color: var(--ink-soft);
  transition: border-color 180ms ease, box-shadow 220ms ease, background 190ms ease;
}

.field input::placeholder { color: rgba(71, 55, 102, 0.52); }

.field input:focus {
  outline: none;
  border-color: rgba(79, 58, 121, 0.72);
  box-shadow: 0 0 0 3px rgba(79, 58, 121, 0.13);
  background: rgba(250, 247, 255, 0.97);
  transform: translateY(-1px);
}

.check-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}

.check-row input {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--field-border);
  border-radius: 6px;
  background: var(--field-bg);
  margin: 0;
  cursor: pointer;
  position: relative;
}

.check-row input:checked {
  border-color: rgba(79, 58, 121, 0.72);
  background: rgba(241, 232, 173, 0.94);
}

.check-row input:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(38deg);
}

.check-row span {
  font-size: clamp(12px, 3.5vw, 14px);
  line-height: 1.42;
  color: rgba(32, 23, 48, 0.95);
}

.submit-btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: clamp(48px, 12.4vw, 56px);
  background: #fff1a6;
  color: #1c1426;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(31, 22, 48, 0.14);
  transition: filter 180ms ease, transform 180ms ease;
}

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

.status {
  min-height: 1.35em;
  margin: 0;
  font-size: clamp(12px, 3.3vw, 14px);
  font-weight: 700;
  color: rgba(44, 33, 66, 0.95);
}

.status.is-error { color: var(--error); }
.status.is-success { color: var(--success); }

.open-form-btn:focus-visible,
.submit-btn:focus-visible,
.field input:focus-visible,
.check-row input:focus-visible {
  outline: 3px solid rgba(79, 58, 121, 0.24);
  outline-offset: 2px;
}

.open-form-btn:disabled,
.submit-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

@keyframes loaderLogo {
  from { transform: translateY(0); filter: brightness(1); }
  to { transform: translateY(-4px); filter: brightness(1.08); }
}

@keyframes loaderRun {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(310%); }
}

@keyframes titleLetterRise {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.84);
    filter: blur(2px);
  }
  68% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes floatLetter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  22% { transform: translateY(-0.06em) rotate(-0.8deg); }
  50% { transform: translateY(-0.1em) rotate(-1.25deg); }
  78% { transform: translateY(0.045em) rotate(0.8deg); }
}

@keyframes float {
  0% { transform: translateY(-2%) rotate(0deg); }
  100% { transform: translateY(3%) rotate(5deg); }
}

@keyframes pulse {
  0%, 100% { scale: 0.95; }
  50% { scale: 1.07; }
}

@keyframes spin {
  0% { rotate: -3deg; }
  100% { rotate: 3deg; }
}

@keyframes driftXY {
  0%, 100% { translate: 0 0; }
  30% { translate: 0.45vw -0.8vh; }
  60% { translate: -0.6vw 0.7vh; }
}

@keyframes auraDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(16px, -14px) scale(1.08);
  }
}

@keyframes ctaSheen {
  0%,
  72% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(150%);
  }
}

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

@keyframes successCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes successSheen {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(120%);
  }
}

@keyframes burstDot {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.55);
  }
  35% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) scale(0.8);
  }
}

@media (max-width: 520px) {
  .signup-page {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .hero-title .line {
    font-size: clamp(40px, 12.2vw, 68px);
    letter-spacing: -0.06em;
  }

  .hero-title .line.alt {
    font-size: clamp(32px, 9.3vw, 54px);
    letter-spacing: -0.085em;
  }

  .hero-title .space {
    width: 0.14em;
  }

  .signup-page.stage-details .hero-title {
    transform: rotate(-8.4deg) translateY(-6.5vh) scale(0.86);
  }

  .form-panel {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}