@keyframes landing-btn-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.landing-btn {
  --btn-fill: #111111;
  --btn-spin: conic-gradient(
    #fe90002e 0 22%,
    #fe9000 34%,
    #fff8f22e 48% 72%,
    #fff8f2 86%,
    #fe90002e
  );
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 10px;
  padding: 14px 28px;
  background: var(--btn-fill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  color: #fe9000;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition:
    background-color 600ms cubic-bezier(0, 0, 0.4, 1),
    color 600ms cubic-bezier(0, 0, 0.4, 1);
}

.has-running-ring {
  --btn-spin: conic-gradient(
    #fe900014 0 22%,
    #fe90008f 34%,
    #fff8f214 48% 72%,
    #fff8f2aa 86%,
    #fe900014
  );
  position: relative;
  isolation: isolate;
}

.landing-btn .landing-btn__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: transparent;
  opacity: 0.4;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}

.has-running-ring > .landing-btn__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: transparent;
  opacity: 0.16;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}

.landing-btn .landing-btn__spin,
.has-running-ring .landing-btn__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  aspect-ratio: 1 / 1;
  background-image: var(--btn-spin);
  transform: translate(-50%, -50%);
  animation: landing-btn-spin 6.5s linear infinite;
  will-change: transform;
}

.landing-btn .landing-btn__body {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.landing-btn:focus-visible {
  outline: 2px solid #fe9000;
  outline-offset: 3px;
}

.landing-btn--main {
  --btn-fill: #111111;
  color: #fe9000;
}

.landing-btn--main:hover,
.landing-btn--main:focus-visible {
  --btn-fill: #fe9000;
  --btn-spin: conic-gradient(
    #11111117 0 30%,
    #111111 40%,
    #fff8f217 50% 80%,
    #fff8f2 90%,
    #11111117
  );
  color: #111111;
}

.landing-btn--ghost {
  --btn-fill: transparent;
  background: transparent;
  color: #fe9000;
}

.landing-btn--ghost:hover,
.landing-btn--ghost:focus-visible {
  --btn-fill: #2001bc;
  background: #2001bc;
  color: #ffffff;
}

.landing-btn--blue {
  --btn-fill: #2001bc;
  --btn-spin: conic-gradient(
    #fff8f217 0 30%,
    #fe9000 40%,
    #fff8f217 50% 80%,
    #fff8f2 90%,
    #fff8f217
  );
  color: #ffffff;
}

.landing-btn--case {
  --btn-fill: #111111;
  color: #f2ece6;
}

.landing-btn--case:hover,
.landing-btn--case:focus-visible {
  --btn-fill: #2001bc;
  color: #ffffff;
}

.landing-btn .landing-btn__icons {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.landing-btn .landing-btn__icon-a,
.landing-btn .landing-btn__icon-b {
  position: absolute;
  inset: 0;
  display: block;
}

.landing-btn .landing-btn__icon-b {
  opacity: 0;
}

.landing-btn--case:hover .landing-btn__icon-a,
.landing-btn--case:focus-visible .landing-btn__icon-a {
  opacity: 0;
}

.landing-btn--case:hover .landing-btn__icon-b,
.landing-btn--case:focus-visible .landing-btn__icon-b {
  opacity: 1;
}

.landing-btn svg {
  display: block;
  flex-shrink: 0;
}

.landing-btn--view {
  --btn-fill: #090909;
  height: 44px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 400;
  color: #c4bfbb;
}

.landing-btn--view:hover,
.landing-btn--view:focus-visible {
  --btn-fill: #2001bc;
  color: #ffffff;
}

.landing-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  --btn-fill: #090909;
  color: #c4bfbb;
}

.landing-btn--icon:hover,
.landing-btn--icon:focus-visible {
  --btn-fill: #2001bc;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .landing-btn .landing-btn__spin,
  .has-running-ring .landing-btn__spin {
    animation: none;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}