/* Independent conversion layer displayed immediately above the existing footer. */
.footer-conversion-bar {
  width: min(1240px, calc(100% - 80px));
  min-height: 286px;
  margin: 96px auto -48px;
  padding: 40px 46px;
  border: 1px solid rgba(129, 118, 255, 0.28);
  border-radius: 8px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  align-items: center;
  gap: 64px;
  color: #f4f6ff;
  background-color: #080a14;
  background-image:
    linear-gradient(rgba(128, 112, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 112, 255, 0.075) 1px, transparent 1px),
    linear-gradient(118deg, rgba(62, 211, 255, 0.09), transparent 34%, transparent 70%, rgba(191, 235, 94, 0.08));
  background-size: 52px 52px, 52px 52px, auto;
  box-shadow: 0 32px 90px rgba(28, 33, 66, 0.16), inset 0 0 90px rgba(93, 75, 224, 0.08);
}

.footer-conversion-bar + .product-site-footer {
  margin-top: 0;
}

.footer-conversion-bar::before {
  content: "";
  height: 2px;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(90deg, transparent 2%, #4edbff 28%, #8875ff 56%, #c7ef62 79%, transparent 98%);
  background-size: 180% 100%;
  box-shadow: 0 0 22px rgba(99, 187, 255, 0.4);
  animation: footer-conversion-spectrum 7s linear infinite;
}

.footer-conversion-bar::after {
  content: "";
  width: 46%;
  height: 1px;
  position: absolute;
  z-index: -1;
  right: 11%;
  bottom: 28px;
  background: linear-gradient(90deg, transparent, rgba(78, 219, 255, 0.44), rgba(137, 117, 255, 0.48), transparent);
  box-shadow: 0 0 22px rgba(95, 160, 255, 0.25);
}

.footer-conversion-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.footer-conversion-grid::before,
.footer-conversion-grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.footer-conversion-grid::before {
  width: 340px;
  height: 340px;
  border: 1px solid rgba(116, 102, 255, 0.16);
  border-radius: 50%;
  top: 50%;
  right: 118px;
  transform: translateY(-50%);
  box-shadow:
    0 0 0 50px rgba(114, 96, 255, 0.025),
    0 0 0 100px rgba(62, 202, 255, 0.018);
}

.footer-conversion-grid::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 34px;
  right: 34px;
  background: #c9ef64;
  box-shadow: 0 0 16px rgba(201, 239, 100, 0.7);
}

.footer-conversion-copy {
  position: relative;
  z-index: 2;
}

.footer-conversion-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(174, 165, 255, 0.76);
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
}

.footer-conversion-copy > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55dfff;
  box-shadow: 0 0 12px rgba(85, 223, 255, 0.82);
}

.footer-conversion-copy h2 {
  margin: 18px 0 0;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 590;
}

.footer-conversion-copy p {
  max-width: 650px;
  margin: 18px 0 0;
  color: rgba(224, 229, 247, 0.62);
  font-size: 13px;
  line-height: 1.75;
}

.footer-conversion-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-conversion-actions a {
  min-height: 43px;
  padding: 0 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 650;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.footer-conversion-actions a:hover,
.footer-conversion-actions a:focus-visible {
  transform: translateY(-2px);
}

.footer-conversion-primary {
  color: #071018;
  background: #61dcf4;
  box-shadow: 0 12px 30px rgba(73, 207, 239, 0.2);
}

.footer-conversion-primary:hover,
.footer-conversion-primary:focus-visible {
  color: #071018;
  background: #fff;
}

.footer-conversion-secondary {
  border: 1px solid rgba(181, 171, 255, 0.4);
  color: #f2f0ff;
  background: rgba(126, 105, 255, 0.1);
}

.footer-conversion-secondary:hover,
.footer-conversion-secondary:focus-visible {
  color: #fff;
  border-color: rgba(201, 239, 100, 0.68);
  background: rgba(201, 239, 100, 0.08);
}

.footer-conversion-qr {
  width: 244px;
  padding: 14px;
  border: 1px solid rgba(143, 130, 255, 0.28);
  border-radius: 8px;
  position: relative;
  z-index: 2;
  justify-self: end;
  color: #eef2ff;
  background: rgba(10, 13, 28, 0.82);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28), inset 0 0 32px rgba(102, 86, 221, 0.08);
  backdrop-filter: blur(14px);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.footer-conversion-qr:target {
  border-color: rgba(97, 220, 244, 0.74);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(97, 220, 244, 0.11), 0 0 35px rgba(97, 220, 244, 0.18);
}

.footer-conversion-qr-head {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-conversion-qr-head > svg {
  color: #61dcf4;
}

.footer-conversion-qr-head > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-conversion-qr-head small {
  color: rgba(165, 156, 241, 0.64);
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
}

.footer-conversion-qr-head strong {
  font-size: 13px;
  font-weight: 620;
}

.footer-conversion-qr-image {
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.footer-conversion-qr-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.footer-conversion-wechat-id {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
  color: rgba(217, 223, 242, 0.58);
  font-size: 9px;
}

.footer-conversion-wechat-id > svg {
  color: #1fc56a;
}

.footer-conversion-wechat-id code {
  justify-self: end;
  color: #c9ef64;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  user-select: all;
}

@keyframes footer-conversion-spectrum {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1120px) {
  .footer-conversion-bar {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr) 218px;
    gap: 42px;
  }

  .footer-conversion-qr {
    width: 218px;
  }
}

@media (max-width: 820px) {
  .footer-conversion-bar {
    min-height: 0;
    padding: 38px;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 28px;
  }

  .footer-conversion-copy h2 {
    font-size: 38px;
  }

  .footer-conversion-qr {
    width: 190px;
  }
}

@media (max-width: 640px) {
  .footer-conversion-bar {
    width: calc(100% - 32px);
    margin-top: 72px;
    margin-bottom: -28px;
    padding: 30px 22px 22px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-conversion-copy h2 {
    font-size: 34px;
  }

  .footer-conversion-copy p {
    font-size: 12px;
  }

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

  .footer-conversion-actions a {
    min-width: 0;
    padding: 0 12px;
  }

  .footer-conversion-qr {
    width: 100%;
    padding: 13px;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .footer-conversion-qr-head {
    margin: 0;
    align-self: end;
  }

  .footer-conversion-qr-image {
    grid-row: 1 / 3;
  }

  .footer-conversion-wechat-id {
    grid-column: 2;
    align-self: start;
    grid-template-columns: auto 1fr;
  }

  .footer-conversion-wechat-id span {
    display: none;
  }

  .footer-conversion-wechat-id code {
    justify-self: start;
  }
}

@media (max-width: 390px) {
  .footer-conversion-actions {
    grid-template-columns: 1fr;
  }

  .footer-conversion-qr {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-conversion-bar::before {
    animation: none;
  }

  .footer-conversion-actions a {
    transition: none;
  }
}