.onboarding-page {
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 69% 48%, rgba(139,92,246,0.24), transparent 34%),
    radial-gradient(circle at 28% 44%, rgba(124,58,237,0.18), transparent 36%),
    radial-gradient(circle at 78% 24%, rgba(96,165,250,0.10), transparent 30%),
    linear-gradient(180deg, #090812 0%, #050609 58%, #070712 100%);
}

html,
body.onboarding-page {
  background-color: #070712;
}

body::before,
body::after,
body.onboarding-page::before,
body.onboarding-page::after {
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  mask-image: none !important;
}

.onboarding-loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(139,92,246,0.13), transparent 30%),
    radial-gradient(circle at 64% 40%, rgba(96,165,250,0.055), transparent 28%),
    linear-gradient(180deg, #090812 0%, #050609 68%, #070712 100%);
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.onboarding-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-card {
  display: grid;
  justify-items: center;
  gap: 13px;
  width: min(210px, calc(100vw - 44px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    none;
  box-shadow: none;
}

.loader-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.loader-mark::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  background: rgba(139,92,246,0.16);
  filter: blur(14px);
  opacity: 0.46;
}

.loader-mark img {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  filter: drop-shadow(0 12px 24px rgba(139,92,246,0.18));
}

.loader-card > span {
  display: block;
  color: rgba(247,244,255,0.68);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.onboarding-loader i,
.loader-card > i {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.085);
}

.onboarding-loader b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c4b5fd 72%, #f5f3ff);
  transform-origin: left center;
  animation: loader-fill 1.45s ease both;
}

.loader-card > i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.46), transparent);
  animation: loader-sheen 1.2s ease-in-out 0.16s both;
}

.onboarding-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  padding: clamp(16px, 3vw, 38px);
}

.onboarding-shell::before,
.onboarding-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.onboarding-shell::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 53% 46%, rgba(0,0,0,0.72), transparent 68%);
  opacity: 0.38;
}

.onboarding-shell::after {
  background:
    radial-gradient(ellipse at 50% 104%, rgba(139,92,246,0.22), transparent 46%),
    linear-gradient(90deg, rgba(5,6,9,0.32), transparent 18%, transparent 82%, rgba(5,6,9,0.36));
}

.onboarding-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(460px, 540px) minmax(260px, 350px);
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 5vw, 72px);
  width: min(100%, 1040px);
  height: min(760px, calc(100svh - 76px));
  padding: 0 !important;
  border-top: 0 !important;
}

.motion-video-frame,
.onboarding-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(167,139,250,0.18);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(14,15,25,0.80);
  box-shadow: 0 24px 90px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.025);
  overflow: hidden;
}

.motion-preview {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 14px;
  align-content: center;
  justify-self: center;
  width: min(100%, 350px);
  max-height: 100%;
}

.motion-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  box-shadow: 0 28px 110px rgba(139,92,246,0.24), 0 24px 90px rgba(0,0,0,0.36);
}

.motion-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
}

.motion-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,10,0.04), transparent 34%, rgba(5,6,10,0.34)),
    radial-gradient(circle at 50% 84%, rgba(139,92,246,0.18), transparent 36%);
  pointer-events: none;
}

.preview-loader {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 0 2px;
}

.preview-loader button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: rgba(247,244,255,0.42);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.preview-loader span {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.preview-loader i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.preview-loader small {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-loader button.is-active {
  color: #fff;
}

.preview-loader button.is-active i {
  animation: preview-progress 4.2s linear both;
}

.onboarding-card {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: min(620px, 100%);
  padding: clamp(24px, 2.7vw, 32px);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.024)),
    radial-gradient(circle at 86% 84%, rgba(139,92,246,0.20), transparent 36%),
    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.055), transparent 25%),
    rgba(14,15,24,0.86);
  box-shadow: 0 34px 110px rgba(139,92,246,0.22), 0 24px 90px rgba(0,0,0,0.36);
}

.setup-top {
  grid-area: 1 / 1 / 2 / 2;
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
}

.setup-brand {
  width: fit-content;
}

.setup-progress {
  display: grid;
  gap: 8px;
}

body.is-intro .setup-progress {
  visibility: hidden;
}

.setup-progress div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: rgba(247,244,255,0.46);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-progress strong {
  color: rgba(247,244,255,0.7);
  font: inherit;
}

.setup-progress i {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.11);
}

.setup-progress b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #d8b4fe);
  box-shadow: 0 0 24px rgba(139,92,246,0.5);
  transition: width 0.28s ease;
}

.slide {
  grid-area: 2 / 1 / 3 / 2;
  align-content: center;
  display: none;
  gap: 13px;
  min-height: 0;
}

.slide.is-active {
  display: grid;
  animation: slide-in 0.24s ease both;
}

.slide > span {
  width: fit-content;
  color: rgba(216,204,255,0.72);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.slide h1 {
  max-width: 470px;
  margin: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(42px, 3.6vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.07em;
  text-transform: none;
}

.slide p {
  max-width: 360px;
  margin: 0;
  color: rgba(247,244,255,0.6);
  font-size: 15px;
  line-height: 1.48;
  font-weight: 700;
}

.setup-stack,
.ready-list {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.setup-stack.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-stack div,
.ready-list div {
  display: grid;
  gap: 12px;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.02);
}

.setup-stack strong {
  color: rgba(255,255,255,0.88);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-stack span,
.ready-list span {
  color: rgba(247,244,255,0.54);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

.ready-list div {
  display: grid;
  gap: 4px;
}

.ready-list strong {
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.ready-list span {
  color: rgba(247,244,255,0.5);
  font-size: 12px;
  line-height: 1.25;
}

.terms-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.terms-list label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 16px;
  color: rgba(247,244,255,0.76);
  font-size: 14px;
  font-weight: 850;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(3,4,8,0.2);
}

.terms-list input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #8b5cf6;
}

.terms-list a {
  color: #d8b4fe;
  text-decoration: none;
}

.terms-list a:hover {
  color: #fff;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.choice-grid button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 13px 42px 13px 16px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 16px;
  color: rgba(247,244,255,0.76);
  font: 900 14px/1.15 var(--sans);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(3,4,8,0.2);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.choice-grid button > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: rgba(216,204,255,0.78);
}

.choice-icon::before,
.choice-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.icon-phone::before,
.icon-lock::before,
.screen-vertical::before,
.screen-lock::before {
  width: 13px;
  height: 21px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.icon-phone::after,
.screen-vertical::after,
.screen-lock::after {
  bottom: 4px;
  width: 4px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

.icon-lock::after {
  top: 5px;
  width: 7px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.screen-square::before,
.icon-image::before {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.screen-portrait::before {
  width: 15px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.screen-wide::before,
.icon-wide::before,
.icon-video::before {
  width: 22px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.icon-video::after,
.icon-play::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.icon-bag::before {
  width: 17px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 4px;
  bottom: 3px;
}

.icon-bag::after {
  top: 4px;
  width: 8px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.icon-text::before {
  top: 6px;
  left: 4px;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

.icon-grid::before {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 8px 0 0 currentColor, 0 8px 0 currentColor, 8px 8px 0 currentColor;
}

.icon-star::before,
.icon-spark::before {
  width: 17px;
  height: 17px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 80% 92%, 50% 70%, 20% 92%, 32% 56%, 2% 35%, 39% 35%);
}

.icon-smile::before {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.icon-smile::after {
  top: 12px;
  width: 8px;
  height: 4px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.icon-help::before {
  content: "?";
  position: static;
  color: currentColor;
  font: 900 17px/1 var(--sans);
}

.icon-bolt::before {
  width: 13px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(56% 0, 12% 54%, 45% 54%, 32% 100%, 88% 39%, 54% 39%);
}

.icon-balance::before,
.icon-compare::before {
  width: 20px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 8px 0 currentColor;
}

.icon-balance::after,
.icon-compare::after {
  width: 2px;
  height: 20px;
  background: currentColor;
  transform: rotate(90deg);
}

.choice-grid button::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(247,244,255,0.24);
  border-radius: 999px;
  transform: translateY(-50%);
}

.choice-grid button:hover {
  color: #fff;
  border-color: rgba(196,181,253,0.32);
  transform: translateY(-1px);
}

.choice-grid button.is-selected {
  color: #fff;
  border-color: rgba(196,181,253,0.72);
  background:
    radial-gradient(circle at 88% 20%, rgba(196,181,253,0.28), transparent 34%),
    linear-gradient(145deg, rgba(139,92,246,0.28), rgba(139,92,246,0.08)),
    rgba(26,18,48,0.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 14px 38px rgba(139,92,246,0.16);
}

.choice-grid button.is-selected .choice-icon {
  color: #fff;
}

.choice-grid button.is-selected::after {
  border-color: #c4b5fd;
  background: #c4b5fd;
  box-shadow: 0 0 18px rgba(196,181,253,0.76);
}

.onboarding-actions {
  grid-area: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.onboarding-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.onboarding-actions .btn.primary:disabled,
.onboarding-actions .btn.primary.is-muted {
  color: rgba(247,244,255,0.42);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.04);
  box-shadow: none;
}

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

@keyframes preview-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes loader-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes loader-pulse {
  from {
    opacity: 0.46;
    transform: scale(0.88);
  }
  to {
    opacity: 0.82;
    transform: scale(1.08);
  }
}

@keyframes loader-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(245%);
  }
}


@media (max-width: 860px) {
  .onboarding-shell {
    place-items: start;
    padding: 14px;
  }

  .onboarding-frame {
    grid-template-columns: 1fr;
    grid-template-rows: 194px minmax(0, 1fr);
    justify-self: start;
    gap: 12px;
    width: min(320px, calc(100vw - 28px));
    max-width: min(320px, calc(100vw - 28px));
    height: 100%;
  }

  .motion-preview {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    max-height: none;
    gap: 9px;
  }

  .motion-video-frame {
    height: 156px;
    aspect-ratio: auto;
  }

  .motion-video-frame video {
    object-position: center 35%;
  }

  .onboarding-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: 100%;
    padding: 18px;
    border-radius: 24px;
  }

  .setup-brand {
    display: none;
  }

  .slide {
    align-content: center;
  }

  .slide h1 {
    font-size: clamp(39px, 11vw, 52px);
    overflow-wrap: anywhere;
  }

  .slide p {
    font-size: 14px;
  }

  .onboarding-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .onboarding-actions .btn {
    width: 100%;
  }
}

@media (max-width: 430px), (max-height: 690px) {
  .onboarding-frame {
    grid-template-rows: 156px minmax(0, 1fr);
  }

  .motion-video-frame {
    height: 122px;
  }

  .slide h1 {
    font-size: clamp(34px, 10vw, 42px);
  }

  .slide p {
    font-size: 13px;
  }
}