/**
 * BloomAiVoipPage - Background & Layer Styles
 *
 * The hero renders its own full-bleed cinematic video background; the rest of
 * the page uses the flat dark base below. Content is layered at z-index 10.
 */

/* ==========================================================================
   Page Background Base
   ========================================================================== */

body.bloom-ai-page,
body.bloom-page {
  background: rgba(9, 5, 24, 1) !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Content Layering
   Ensures content is above background layers for proper stacking context.
   Required for backdrop-filter effects on cards to work correctly.
   ========================================================================== */

body.bloom-ai-page #app,
body.bloom-page #app,
body.bloom-ai-page #main-content,
body.bloom-page #main-content {
  position: relative;
}

body.bloom-ai-page #main-content > *:not(#header-container),
body.bloom-page #main-content > *:not(#header-container) {
  position: relative;
  z-index: 10;
}

/* Keep the opening edge identical to StorySection, then let the page field
   pick up a restrained violet tone as visitors move through the FAQ. */
.bloom-faq.shared-faq-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, #090518 0%, #090518 12%, #110820 52%, #1b0c31 100%);
}

/* Continue the FAQ's terminal colour behind the footer shell. The footer keeps
   its own background and rounded corners; this only removes the dark wedges
   that would otherwise show through around those corners. */
body.bloom-ai-page #footer-container,
body.bloom-page #footer-container {
  background-color: #1b0c31;
}

/* Section content should also be above background */
body.bloom-ai-page .section-content,
body.bloom-page .section-content,
body.bloom-ai-page .hero-text-content,
body.bloom-page .hero-text-content,
body.bloom-ai-page .hero-image-container,
body.bloom-page .hero-image-container {
  position: relative;
  z-index: 10;
}