:root {
  --fs-dark-hero-bg-a: #16315f;
  --fs-dark-hero-bg-b: #1d3f76;
  --fs-dark-hero-bg-c: #274784;
  --fs-dark-hero-glow: rgba(191, 219, 254, 0.14);
  --fs-dark-hero-card-bg: rgba(9, 18, 35, 0.34);
  --fs-dark-hero-card-border: rgba(191, 219, 254, 0.18);
  --fs-dark-hero-chip-bg: rgba(148, 163, 184, 0.16);
  --fs-dark-hero-chip-border: rgba(191, 219, 254, 0.2);
  --fs-dark-hero-text-soft: rgba(241, 245, 249, 0.9);
}

[data-theme="dark"] :is(
  .tp-hero,
  .fs-ba-hero,
  .fs-pillar-hero,
  .blog-hero,
  .direct-hero,
  .about-hero,
  .hero,
  .home-hero
).fs-hero-shell {
  background:
    radial-gradient(1200px 360px at 50% -10%, var(--fs-dark-hero-glow), transparent 60%),
    linear-gradient(135deg, var(--fs-dark-hero-bg-a), var(--fs-dark-hero-bg-b) 52%, var(--fs-dark-hero-bg-c)) !important;
}

[data-theme="dark"] .fs-hero-card,
[data-theme="dark"] .fs-hero-shell > .fs-hero-card,
[data-theme="dark"] .fs-hero-shell > .fs-pillar-container.fs-hero-card,
[data-theme="dark"] .fs-hero-shell > .fs-ba-container.fs-hero-card,
[data-theme="dark"] .fs-hero-shell > .res-container.fs-hero-card {
  background: var(--fs-dark-hero-card-bg) !important;
  border-color: var(--fs-dark-hero-card-border) !important;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  h1,
  .section-title,
  .about-title,
  .hero-top h1,
  .acc-title
) {
  color: #f8fbff !important;
  text-shadow: none;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  .tp-subtitle,
  .section-subtitle,
  .top-lead,
  .top10-lead,
  .pred-lead,
  .faq-lead,
  .fs-pillar-lead,
  .direct-lead,
  .about-lead,
  .hero-subtitle,
  .res-lead,
  .hero-lead,
  .blog-subtitle,
  .page-context,
  .fs-ba-kicker,
  .fs-ba-meta,
  .blog-kicker,
  p
) {
  color: var(--fs-dark-hero-text-soft) !important;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  .tp-badge,
  .fs-hero-badge,
  .about-badge,
  .hero-badge,
  .quick-chip,
  .faq-hero-link,
  .top-chip,
  .about-hero-link,
  .blog-chip,
  .fs-pillar-badge,
  .fs-ba-badge
) {
  background: var(--fs-dark-hero-chip-bg) !important;
  border-color: var(--fs-dark-hero-chip-border) !important;
  color: #f8fbff !important;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  .tp-badge,
  .fs-hero-badge,
  .about-badge,
  .hero-badge
) svg {
  color: currentColor;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  .tp-hero-actions .cta-button,
  .blog-hero-cta .cta-button,
  .pred-hero-actions .pred-link,
  .top10-hero-actions .top10-link,
  .res-hero-actions .res-link,
  .tf-hero-actions .tf-hero-link,
  .hero-ctas .btn,
  .fs-ba-hero-actions .fs-ba-backlink,
  .tp-hero-links .cta-button,
  .direct-cta
) {
  border-color: rgba(191, 219, 254, 0.22) !important;
}

[data-theme="dark"] .fs-hero-shell .fs-hero-card :is(
  .tp-hero-actions .cta-button:hover,
  .blog-hero-cta .cta-button:hover,
  .pred-hero-actions .pred-link:hover,
  .top10-hero-actions .top10-link:hover,
  .res-hero-actions .res-link:hover,
  .tf-hero-actions .tf-hero-link:hover,
  .hero-ctas .btn:hover,
  .fs-ba-hero-actions .fs-ba-backlink:hover,
  .tp-hero-links .cta-button:hover,
  .direct-cta:hover
) {
  border-color: rgba(191, 219, 254, 0.3) !important;
}