/* ============================================================
   gradients.css — One continuous page background
   ------------------------------------------------------------
   The "mesh / blob gradient" (purple -> magenta -> red -> orange,
   plus a soft pink glow and a warm burnt-orange wash) lives on
   the PAGE itself. It is concentrated at the top and fades into
   the dark base color further down.

   Every content section is transparent, so this one gradient
   flows behind all of them and is never "cut off" by a section
   edge. (Cards and form fields keep their own solid fills.)

   To fine-tune: nudge each radial's position ("at X% Y%") and
   size. They resolve against the gradient band whose height is
   set by `background-size` below — raise that height to let the
   color bleed further down the page.
   ============================================================ */

body {
  background-color: var(--color-bg);   /* dark base for the whole page */
  background-image:
    /* soft pink glow, low-center of the hero */
    radial-gradient(42% 30% at 47% 60%, rgba(255, 240, 245, 0.60) 0%, transparent 62%),
    /* purple — top-left */
    radial-gradient(62% 54% at 3% 6%,   var(--color-blob-purple)  0%, transparent 60%),
    /* magenta — left of center */
    radial-gradient(56% 52% at 27% 34%, var(--color-blob-magenta) 0%, transparent 62%),
    /* red — center-top */
    radial-gradient(68% 48% at 52% 12%, var(--color-blob-red)     0%, transparent 62%),
    /* coral — mid-right */
    radial-gradient(52% 50% at 75% 26%, var(--color-blob-coral)   0%, transparent 60%),
    /* orange — right edge */
    radial-gradient(60% 56% at 95% 20%, var(--color-blob-orange)  0%, transparent 60%),
    /* warm burnt-orange wash that grounds the whole hero band */
    radial-gradient(150% 90% at 50% 18%, var(--color-hero-base)   0%, transparent 74%);
  background-repeat: no-repeat;
  background-size: 100% 1650px;   /* colored band fills the hero and bleeds below before fading */
  background-position: center top;
  background-attachment: scroll;  /* scrolls with the page (not fixed) */
}

/* The hero no longer paints its own background — it floats on the
   page gradient above. */
.hero-bg {
  position: relative;
  background: transparent;
}

/* All content sections are transparent so the page gradient (and the
   dark base lower down) show through continuously, with no seams. */
.bg-dark-soft,
.bg-dark-glow {
  background: transparent;
}

/* ------------------------------------------------------------
   "BRIDGING THE GAP" SECTION  (#about) — brand gradient SHAPE
   ------------------------------------------------------------
   NOT a full-width section background. Instead, a single contained,
   organic shape (the recolored Figma "body gradient" vector) sits
   BEHIND the content as an ambient glow — red -> magenta, softened
   with a heavy blur so its edges fade into the dark page.

   The shape is the `.about__glow` <div> in the markup. We do NOT
   clip it — the heavy blur already fades every edge softly into the
   dark page, so it melts away on its own. (Clipping it with
   overflow:hidden would chop the soft blur into a hard straight
   line at the section edge — the exact "cut gradient" we're avoiding.)
   It's stacked behind the text + dashboard image with z-index.

   NOTE: we deliberately do NOT use `isolation: isolate` here. That
   would turn #about into its own atomic layer that paints on top of
   the NEXT section — so the glow (which now hangs below #about) would
   cover the "Leveraging AI" heading. Without it, the glow's z-index:-1
   drops it behind ALL page content (but above the page background),
   which is exactly what we want.
   ------------------------------------------------------------ */
#about {
  position: relative;   /* anchor the glow shape to this section */
}
.about__glow {
  position: absolute;
  z-index: -1;                 /* behind the heading, text, and image */
  pointer-events: none;        /* purely decorative — never catches clicks */

  /* Size & placement: a wide shape sitting low, behind the dashboard */
  width: min(960px, 86%);
  aspect-ratio: 16 / 11;
  left: 50%;
  bottom: -40%;
  transform: translateX(-50%);

  /* Brand gradient: holds red to 55%, then ramps to magenta */
  background: linear-gradient(105deg,
    #E52636 0%,
    #E52636 55%,
    #D946EF 100%);

  /* Organic "blob" silhouette (uneven corner radii) + heavy blur
     so it reads as a soft glowing shape rather than a hard rectangle */
  border-radius: 48% 52% 44% 56% / 60% 56% 44% 40%;
  filter: blur(90px);
  opacity: 0.45;
}