/* ============================================================
     DESKTOP / DEFAULT
     Organic multi-source background: each "zone" is built from
     2–3 overlapping blobs of different size/opacity rather than
     one perfect ellipse, which is what avoids the "lantern" look.
     ============================================================ */
  html, body, #allrecords {
    background-color: #08090C !important;
    background-image:
      /* Warm cluster, top-right */
      radial-gradient(ellipse 850px 600px at 94% 2%,  #8A5C2A 0%, transparent 55%),
      radial-gradient(ellipse 500px 750px at 78% 14%, #6B4420 0%, transparent 62%),
      radial-gradient(ellipse 400px 400px at 87% 26%, #4A3016 0%, transparent 68%),

      /* Secondary warm, left side — dimmer, offset, asymmetric to top-right cluster */
      radial-gradient(ellipse 600px 500px at -2% 12%, #503A1E 0%, transparent 58%),
      radial-gradient(ellipse 350px 550px at 10% 32%,  #38280F 0%, transparent 65%),

      /* Cool cluster, lower-left */
      radial-gradient(ellipse 700px 550px at 2% 88%,  #1C3450 0%, transparent 56%),
      radial-gradient(ellipse 450px 650px at 16% 72%, #16283E 0%, transparent 64%),

      /* Cool/violet accent, right side, mid-height — off-grid, not a mirrored corner */
      radial-gradient(ellipse 550px 700px at 100% 58%, #3A2246 0%, transparent 60%),
      radial-gradient(ellipse 380px 380px at 92% 46%,  #2A1834 0%, transparent 66%),

      /* Broad soft warm pool at the very bottom — grounds the composition */
      radial-gradient(ellipse 1300px 500px at 46% 98%, #2A1C0E 0%, transparent 70%),

      linear-gradient(180deg, #08090C 0%, #0D0B0E 50%, #08090C 100%) !important;

    background-blend-mode:
      screen, screen, screen,
      screen, screen,
      normal, normal,
      screen, screen,
      normal,
      normal !important;

    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
    position: relative;
  }

  /* Subtle grain overlay to break up the flatness of the CSS gradient */
  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* All Tilda block layers stay transparent so the gradient shows through as one continuous background */
  .t-body,
  .t-records,
  .t-rec,
  .t396,
  .t396__artboard,
  .t396__carrier {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
  }

  /* ============================================================
     MOBILE ADAPTATION (≤ 768px)
     Two changes matter most here:
     1. background-attachment: fixed is unreliable on iOS Safari
        (it can jump, fail to stay fixed, or tank scroll performance) —
        switch to `scroll` on mobile.
     2. Fewer, larger, simpler blobs — narrow viewports don't have room
        for multiple overlapping clusters without them merging into mud;
        fewer well-placed blobs read more clearly on a small screen, and
        it's lighter on low-end device GPUs.
     ============================================================ */
  @media (max-width: 768px) {
    html, body, #allrecords {
      background-image:
        radial-gradient(ellipse 500px 420px at 90% 2%,  #8A5C2A 0%, transparent 60%),
        radial-gradient(ellipse 420px 380px at 5% 14%,  #503A1E 0%, transparent 62%),
        radial-gradient(ellipse 460px 420px at 4% 82%,  #1C3450 0%, transparent 60%),
        radial-gradient(ellipse 400px 460px at 96% 62%, #3A2246 0%, transparent 62%),
        radial-gradient(ellipse 700px 350px at 50% 98%, #2A1C0E 0%, transparent 70%),
        linear-gradient(180deg, #08090C 0%, #0D0B0E 50%, #08090C 100%) !important;

      background-blend-mode: screen, screen, normal, screen, normal, normal !important;
      background-attachment: scroll, scroll, scroll, scroll, scroll, scroll !important;
    }

    /* Grain is a fixed full-viewport layer; on mobile it can cost more relative
       to screen size and battery, so it's dialed down rather than removed. */
    html::before {
      opacity: 0.035;
      position: absolute; /* fixed can also misbehave on iOS for pseudo-elements */
    }
  }

  /* Small phones: simplify further, drop one blob, keep the essentials */
  @media (max-width: 420px) {
    html, body, #allrecords {
      background-image:
        radial-gradient(ellipse 420px 360px at 92% 2%, #8A5C2A 0%, transparent 60%),
        radial-gradient(ellipse 380px 360px at 2% 80%, #1C3450 0%, transparent 60%),
        radial-gradient(ellipse 600px 300px at 50% 98%, #2A1C0E 0%, transparent 72%),
        linear-gradient(180deg, #08090C 0%, #0D0B0E 50%, #08090C 100%) !important;

      background-blend-mode: screen, normal, normal, normal !important;
    }
  }
</style>


.t-form-success-popup { display: none !important; }