.launch-stage::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 190, 93, .11), transparent 28%),
    linear-gradient(115deg, transparent 16%, rgba(255, 255, 255, .025) 46%, transparent 72%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.launch-intro {
  display: grid;
  height: 100%;
  max-width: none;
  padding: 38px 28px;
  place-items: center;
  width: 100%;
}

.launch-portal {
  align-items: center;
  animation: portal-arrive .95s cubic-bezier(.18, .8, .2, 1) both;
  background:
    radial-gradient(circle at 50% 34%, rgba(35, 108, 87, .34), transparent 44%),
    linear-gradient(180deg, rgba(9, 54, 45, .76), rgba(3, 25, 21, .62));
  border: 1px solid rgba(226, 196, 107, .48);
  border-radius: 390px 390px 30px 30px;
  box-shadow:
    0 42px 120px rgba(0, 0, 0, .28),
    inset 0 0 0 8px rgba(255, 255, 255, .014),
    inset 0 0 80px rgba(211, 174, 70, .045);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 900px;
  min-height: min(82svh, 830px);
  overflow: visible;
  padding: clamp(48px, 6vh, 72px) 70px 34px;
  position: relative;
  width: min(760px, 82vw);
}

.launch-portal::before,
.launch-portal::after {
  border: 1px solid rgba(228, 197, 104, .16);
  border-bottom: 0;
  border-radius: 350px 350px 0 0;
  content: "";
  inset: 17px 17px auto;
  height: 58%;
  pointer-events: none;
  position: absolute;
}

.launch-portal::after {
  border-color: rgba(255, 255, 255, .06);
  inset: 26px 26px auto;
  height: 55%;
}

.portal-orbit {
  border: 1px solid rgba(222, 190, 96, .14);
  border-radius: 50%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 43%;
  translate: -50% -50%;
}

.portal-orbit--one { height: 410px; width: 410px; }
.portal-orbit--two { height: 520px; width: 520px; }

.portal-seal {
  align-items: center;
  background: linear-gradient(145deg, rgba(242, 217, 143, .13), rgba(215, 182, 91, .035));
  border: 1px solid rgba(233, 207, 132, .54);
  border-radius: 50%;
  color: #ebd083;
  display: flex;
  flex-direction: column;
  height: 58px;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  width: 58px;
  z-index: 2;
}

.portal-seal::after {
  border: 1px solid rgba(233, 207, 132, .18);
  border-radius: 50%;
  content: "";
  inset: -8px;
  position: absolute;
}

.portal-seal span { font-size: 13px; line-height: 1; }
.portal-seal small { color: rgba(255, 255, 255, .58); font-size: 8px; margin-top: 5px; }

.launch-portal .launch-kicker {
  font-size: 11px;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.launch-portal .launch-kicker i { width: 92px; }

.launch-portal h1 {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin: 16px 0 12px;
  position: relative;
  z-index: 2;
}

.launch-portal h1 span {
  color: rgba(255, 255, 255, .96);
  font-size: clamp(58px, 5.2vw, 82px);
  font-weight: 500;
  line-height: 1.2;
}

.launch-portal h1 b {
  background: linear-gradient(105deg, #b78626 4%, #f4dfa3 48%, #c08f2e 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(82px, 7.2vw, 116px);
  font-weight: 900;
  line-height: 1.18;
  padding: 0 .06em .08em;
}

.launch-portal > p {
  color: rgba(255, 255, 255, .62);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.9;
  margin: 0 0 26px;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.launch-portal .launch-button {
  height: 82px;
  margin: 0;
  position: relative;
  width: min(390px, 74vw);
  z-index: 4;
}

.launch-portal .launch-button-ring {
  border-color: rgba(231, 201, 116, .3);
  border-radius: 999px;
  inset: -9px;
}

.launch-portal .launch-button-ring--two {
  animation-delay: -1.5s;
  inset: -22px;
}

.launch-portal .launch-button-core {
  align-items: center;
  background:
    linear-gradient(100deg, rgba(12, 66, 54, .98), rgba(7, 43, 36, .98)),
    #0a3e33;
  border: 1px solid #e2c268;
  border-radius: 999px;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .32),
    0 0 38px rgba(216, 181, 83, .13),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  color: white;
  display: grid;
  grid-template-columns: 54px 1fr 42px;
  inset: 0;
  overflow: hidden;
  padding: 9px 13px 9px 16px;
}

.launch-portal .launch-button-core::before {
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .11) 50%, transparent 85%);
  border: 0;
  border-radius: 0;
  content: "";
  inset: -60% auto -60% -38%;
  position: absolute;
  transform: rotate(10deg);
  transition: left .8s ease;
  width: 28%;
}

.launch-portal .launch-button-core::after { display: none; }
.launch-portal .launch-button:hover .launch-button-core::before { left: 112%; }

.launch-button-icon {
  align-items: center;
  background: linear-gradient(145deg, #f3d98d, #b88224);
  border: 1px solid #f6e5ad;
  border-radius: 50%;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .2);
  color: #103b31;
  display: flex;
  font-size: 14px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.launch-button-copy {
  display: flex;
  flex-direction: column;
  padding: 0 13px;
  text-align: right;
}

.launch-portal .launch-button-copy small {
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 2px;
}

.launch-portal .launch-button-copy b {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  padding: 0;
}

.launch-button-arrow {
  color: #e7c970;
  font-size: 22px;
  opacity: .9;
  transition: transform .3s ease;
}

.launch-button:hover .launch-button-arrow { transform: translateX(-5px); }

.launch-sequence {
  align-items: center;
  color: rgba(255, 255, 255, .58);
  display: flex;
  font-size: 9px;
  gap: 9px;
  justify-content: center;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.launch-sequence i {
  background: linear-gradient(90deg, transparent, rgba(220, 190, 100, .52), transparent);
  height: 1px;
  width: 34px;
}

.launch-portal .launch-hint {
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  line-height: 1.6;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

@keyframes portal-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-height: 820px) and (min-width: 761px) {
  .launch-intro { padding: 22px 26px; }
  .launch-portal {
    min-height: calc(100svh - 44px);
    padding: 34px 58px 22px;
  }
  .portal-seal { height: 46px; margin-bottom: 8px; width: 46px; }
  .portal-seal::after { inset: -6px; }
  .launch-portal h1 { margin: 8px 0 5px; }
  .launch-portal h1 span { font-size: 50px; }
  .launch-portal h1 b { font-size: 72px; }
  .launch-portal > p { margin-bottom: 17px; }
  .launch-portal .launch-button { height: 72px; width: 350px; }
  .launch-button-icon { height: 42px; width: 42px; }
  .launch-portal .launch-button-core { grid-template-columns: 48px 1fr 36px; }
  .launch-portal .launch-button-copy b { font-size: 22px; }
  .launch-sequence { margin-top: 20px; }
  .launch-portal .launch-hint { margin-top: 8px; }
}

@media (max-width: 760px) {
  .launch-intro { padding: 16px; }
  .launch-portal {
    border-radius: 190px 190px 24px 24px;
    min-height: calc(100svh - 32px);
    padding: 68px 22px 24px;
    width: 100%;
  }
  .launch-portal::before { border-radius: 180px 180px 0 0; inset: 12px 12px auto; }
  .launch-portal::after { border-radius: 170px 170px 0 0; inset: 19px 19px auto; }
  .portal-seal { height: 46px; margin-bottom: 10px; width: 46px; }
  .launch-portal .launch-kicker { font-size: 9px; gap: 8px; }
  .launch-portal .launch-kicker i { width: 38px; }
  .launch-portal h1 { margin: 12px 0 8px; }
  .launch-portal h1 span { font-size: 48px; }
  .launch-portal h1 b { font-size: 66px; }
  .launch-portal > p { font-size: 12px; margin-bottom: 20px; max-width: 310px; }
  .launch-portal .launch-button { height: 72px; width: min(310px, 82vw); }
  .launch-portal .launch-button-core {
    grid-template-columns: 46px 1fr 31px;
    padding: 8px 10px;
  }
  .launch-button-icon { height: 42px; width: 42px; }
  .launch-portal .launch-button-copy b { font-size: 21px; }
  .launch-sequence { margin-top: 24px; }
  .portal-orbit--one { height: 280px; width: 280px; }
  .portal-orbit--two { height: 360px; width: 360px; }
}

@media (max-height: 680px) and (min-width: 761px) {
  .portal-seal { display: none; }
  .launch-portal h1 span { font-size: 42px; }
  .launch-portal h1 b { font-size: 62px; }
  .launch-sequence { display: none; }
}