:root {
  --felt: #3a0ca3;
  --felt-deep: #24046c;
  --ink: #241b35;
  --paper: #faf8ff;
  --gold: #4cc9f0;
  --red: #f72585;
  --shadow: 0 22px 46px color-mix(in srgb, #3a0ca3 32%, transparent);
}
body {
  background:
    radial-gradient(circle at 70% 14%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 22%),
    linear-gradient(138deg, color-mix(in srgb, var(--paper) 94%, white), color-mix(in srgb, var(--felt) 8%, var(--paper)));
}
.site-header {
  background: color-mix(in srgb, var(--felt-deep) 89%, black);
  border-bottom-color: color-mix(in srgb, var(--gold) 24%, transparent);
}
.brand-mark {
  border-radius: 7px;
  background: linear-gradient(171deg, var(--gold), var(--red));
}
.hero {
  min-height: 82vh;
  grid-template-columns: minmax(0,12/10fr) minmax(300px,13/10fr);
  background:
    linear-gradient(159deg, color-mix(in srgb, var(--felt) 94%, black), color-mix(in srgb, var(--red) 20%, var(--felt))),
    url("../img/felt-pattern.svg");
}
.hero h1 {
  font-size: clamp(38px, 5vw, 64px);
}
.hero-art {
  transform: rotate(3deg) scale(0.97);
}
.quick-panel a:nth-child(odd),
.info-card:nth-child(odd),
.download-card {
  border-radius: 7px;
}
.quick-panel a:nth-child(even),
.info-card:nth-child(even) {
  border-radius: 5px;
}
.band {
  background: color-mix(in srgb, var(--felt) 11%, var(--paper));
}
.band.compact,
.service-links-section,
.home-faq {
  background: color-mix(in srgb, var(--gold) 16%, var(--paper));
}
.info-card::before {
  background: linear-gradient(90deg, var(--red), var(--gold), var(--felt));
}
.service-link:hover,
.info-card:hover,
.download-card:hover {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line));
}
.footer-grid h2::after {
  content: "nvunwt4.cn";
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 400;
}
@media (min-width: 981px) {
  body.variant-orbit .cards.four {
    grid-template-columns: 8/10fr 10/10fr 12/10fr 14/10fr;
  }
}
@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body,
  .site-header,
  main,
  .hero,
  .page-hero,
  .section-pad,
  .band,
  .site-footer {
    max-width: 100%;
    overflow-x: clip;
  }
  .hero,
  .two-col,
  .content-split,
  .article-layout,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero,
  .page-hero {
    min-height: auto !important;
  }
  .hero-copy,
  .hero-art,
  .section-heading,
  .longform,
  .side-index,
  .download-card,
  .info-card,
  .service-link,
  .faq,
  .footer-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 620px) {
  .section-pad,
  .band,
  .page-hero,
  .site-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero {
    padding: 40px 16px !important;
    gap: 26px !important;
  }
  .hero h1,
  .page-hero h1,
  h2 {
    max-width: 100%;
    font-size: clamp(28px, 8.8vw, 36px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .hero-text,
  .page-hero p:last-child,
  p,
  li,
  a,
  small,
  strong,
  summary {
    overflow-wrap: anywhere;
  }
  .hero-actions,
  .trust-row,
  .keyword-cloud {
    width: 100%;
  }
  .hero-actions .btn,
  .btn.full {
    width: 100%;
    justify-content: center;
  }
  .hero-art {
    justify-self: center;
    width: 100%;
  }
  .hero-art img {
    display: block;
    width: min(100%, 360px) !important;
    margin: 0 auto;
  }
  .service-link {
    align-items: flex-start;
  }
  .service-link b {
    margin-top: 2px;
  }
}