/* Full-site animated background — purple FloatingLines (Studioflows shader)
 * fixed behind the entire page. OFF by default: every rule here is scoped
 * under body.bgfx-on, so without the toggle the original light site is
 * untouched. Turning it on flips the theme's global color variables to a
 * dark scheme so all sections stay readable over the lines. */

.bgfx-canvas {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: #000;
}
body.bgfx-on > .bgfx-canvas { display: block; }

/* No WebGL: static purple-tinted dark gradient instead of the shader. */
body.bgfx-on.bgfx-fallback {
  background: radial-gradient(120% 90% at 50% 0%, #2a1b57 0%, #120b26 55%, #000 100%) fixed !important;
}

/* ---- Dark theme via the kit's global color variables ---- */
body.bgfx-on.elementor-kit-7 {
  --e-global-color-uicore_headline: #ffffff;
  --e-global-color-uicore_dark: #ffffff;
  --e-global-color-uicore_body: rgba(255, 255, 255, 0.74);
  --e-global-color-uicore_light: rgba(19, 12, 38, 0.72);
  --e-global-color-uicore_accent: rgba(131, 91, 255, 0.2);
  --uicore-headline-color: #ffffff;
  --uicore-dark-color: #ffffff;
  --uicore-body-color: rgba(255, 255, 255, 0.74);
  --uicore-light-color: rgba(19, 12, 38, 0.72);
  --uicore-accent-color: rgba(131, 91, 255, 0.2);
  --ui-border-color: rgba(255, 255, 255, 0.14);
}

/* Expose the canvas: the theme paints the page white on these wrappers. */
body.bgfx-on .uicore-body-content,
body.bgfx-on .content-area,
body.bgfx-on .uicore-main-background,
body.bgfx-on .uicore-body-content > footer {
  background: transparent !important;
}

/* Hero card: drop its light bg + webp texture so the lines flow through. */
body.bgfx-on .elementor-55 .elementor-element.elementor-element-96c72ee {
  background-color: transparent !important;
  background-image: none !important;
}

/* Literal-white surfaces that don't follow the variables → dark glass. */
body.bgfx-on .elementor-55 .elementor-element.elementor-element-a5f53c3 {
  background-color: rgba(19, 12, 38, 0.72) !important;
}
body.bgfx-on .elementor-55 .ui-e-tab-title[aria-selected="false"] {
  background: rgba(12, 8, 26, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.bgfx-on .elementor-55 .ui-e-carousel-button {
  background: rgba(19, 12, 38, 0.8) !important;
  color: #fff !important;
}

/* Header: its background layer is a white ::before overlay → dark glass. */
body.bgfx-on .uicore-header-wrapper::before {
  background: rgba(8, 5, 18, 0.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* White logo + readable nav over the lines. */
body.bgfx-on .uicore-navbar img,
body.bgfx-on .uicore-footer-wrapper img {
  filter: brightness(0) invert(1);
}

/* Mobile nav panel would be white with now-white links — darken it. */
@media (max-width: 1024px) {
  body.bgfx-on .uicore-navigation-content,
  body.bgfx-on .uicore-mobile-menu-wrapper,
  body.bgfx-on .uicore-navbar .uicore-menu-container {
    background-color: rgba(10, 7, 22, 0.96) !important;
  }
}

/* Hero copy on dark (explicit, in case widget CSS hardcodes colors). */
body.bgfx-on .elementor-55 .elementor-element.elementor-element-1215d83 .elementor-heading-title {
  color: #ffffff;
}
body.bgfx-on .elementor-55 .elementor-element.elementor-element-ec6d6ad,
body.bgfx-on .elementor-55 .elementor-element.elementor-element-ec6d6ad p {
  color: rgba(255, 255, 255, 0.78);
}

/* "Talk to sales" — outline style on dark */
body.bgfx-on .elementor-55 .elementor-element.elementor-element-b6a6162 .elementor-button {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
body.bgfx-on .elementor-55 .elementor-element.elementor-element-b6a6162 .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

/* Floating toggle button */
#bgfx-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  padding: 10px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(131, 91, 255, 0.5);
  background: rgba(255, 255, 255, 0.9);
  color: #2b2350;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(43, 35, 80, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#bgfx-toggle:hover { border-color: #835bff; }
body.bgfx-on #bgfx-toggle {
  background: rgba(20, 12, 40, 0.85);
  color: #ffffff;
  border-color: rgba(131, 91, 255, 0.7);
}