/* ============================================================
   DIGITAL DIVA — FULL-PAGE BACKGROUND SYSTEM v2
   Strategy: body = #0C013A, ALL sections transparent.
   The body color bleeds through everywhere, no patchwork.
   ============================================================ */

/* ── 1. THE ONE TRUE BACKGROUND ── */
html,
body,
body.elementor-page,
#page,
.site,
.site-content {
  background-color: #0C013A !important;
  background-image: none;
}

/* ── 2. EVERY SECTION / COLUMN / WRAP → TRANSPARENT ──────── */
/* This overrides ALL inline style="background-color: #FFFFFF"
   and any other colour Elementor sets on sections.            */
.elementor-section,
.elementor-top-section,
.e-con,
.e-con-full,
.elementor-column,
.elementor-col-100,
.elementor-col-50,
.elementor-col-33,
.elementor-col-25,
.elementor-widget-wrap,
.elementor-element-populated,
.elementor-container,
.elementor-section-wrap,
.elementor-inner-section,
section.elementor-section {
  background-color: transparent !important;
}

/* ── 3. PRESERVE the hero's own background image ────────── */
/* The hero section keeps whatever BG image Elementor set;    */
/* only the colour is transparent so image shows if present.  */
.elementor-element-ccb554b {
  background-color: rgba(12, 1, 58, 0.96) !important;
}

/* ── 4. CARD SURFACES — subtle lift above body colour ─────── */
.elementor-icon-box-wrapper,
.elementor-widget-icon-box .elementor-widget-container,
.elementor-post__card,
.elementor-widget-image-box .elementor-image-box-wrapper {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 168, 67, 0.13) !important;
  border-radius: 14px !important;
}

/* ── 5. HEADER / NAV ────────────────────────────────────── */
.elementor-location-header,
header,
.site-header {
  background-color: rgba(12, 1, 58, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(212, 168, 67, 0.12) !important;
}

/* ── 6. FOOTER ───────────────────────────────────────────── */
.elementor-location-footer,
footer {
  background-color: rgba(6, 7, 22, 0.98) !important;
  border-top: 1px solid rgba(212, 168, 67, 0.14) !important;
}

/* ── 7. ALL TEXT → WHITE on dark background ──────────────── */
body,
p,
li,
span,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-icon-box-description,
.elementor-icon-box-content p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Headings white by default (gold ones stay gold via dd-gold-system) */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: #ffffff !important;
}

/* NAV links white */
.elementor-nav-menu a,
.elementor-nav-menu li a {
  color: rgba(255, 255, 255, 0.88) !important;
}
.elementor-nav-menu a:hover {
  color: #D4A843 !important;
}

/* ── 8. ATMOSPHERIC LAYERS (fixed, decorative) ───────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 40% at 5% 0%,
      rgba(212, 168, 67, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 95% 100%,
      rgba(90, 30, 180, 0.06) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Drifting gold orb */
body::after {
  content: '';
  position: fixed;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212, 168, 67, 0.05) 0%, transparent 65%);
  top: -180px;
  left: -120px;
  pointer-events: none;
  z-index: 0;
  filter: blur(55px);
  animation: ddOrbDrift 22s ease-in-out infinite;
}

@keyframes ddOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(70px, 55px) scale(1.08); }
  70%      { transform: translate(-35px, 90px) scale(0.94); }
}

/* Second orb — purple, bottom right */
.dd-orb-2 {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(100, 30, 180, 0.05) 0%, transparent 65%);
  bottom: -130px;
  right: -90px;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  animation: ddOrbDrift2 26s ease-in-out infinite;
}

@keyframes ddOrbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-70px, -55px) scale(1.12); }
}

/* ── 9. ALL CONTENT ABOVE ORBS ───────────────────────────── */
.elementor-section,
.e-con,
header,
footer,
nav,
.elementor-location-header,
.elementor-location-footer {
  position: relative;
  z-index: 1;
}

/* ── 10. MOBILE — strip heavy fixed decorations ─────────── */
@media (max-width: 768px) {
  body::before,
  body::after,
  .dd-orb-2 {
    display: none !important;
  }
}

/* ── 11. REDUCE MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after, .dd-orb-2 { animation: none !important; }
}