/* QualiVeil v8 Dynamic Accent Patch
   Adds soft gradients, role-based tints, and light glows to bring depth and motion
   without reintroducing disjointed color blocks.
*/

/* =====================
   Role-tinted band accents
   ===================== */
.band--manufacturer::before,
.band--supplier::before,
.band--platform::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(1200px 600px at 20% -10%,
    transparent 0, rgba(46,124,246,.10) 35%, transparent 70%);
}
.band--supplier::before{
  background: radial-gradient(1200px 600px at 80% -10%,
    transparent 0, rgba(49,209,124,.12) 35%, transparent 70%);
}
.band--platform::before{
  background: radial-gradient(1200px 600px at 50% -10%,
    transparent 0, rgba(139,124,255,.12) 35%, transparent 70%);
}

/* =====================
   Screenshot halos
   ===================== */
.figure-glow{ position:relative; z-index:1; }
.figure-glow::before{
  content:""; position:absolute; inset:-40px -32px -32px -32px; z-index:-1;
  filter: blur(42px);
  background: radial-gradient(60% 50% at 50% 0%,
    rgba(46,124,246,.18), rgba(49,209,124,.08) 55%, transparent 70%);
  border-radius:24px;
}

/* =====================
   Section dividers
   ===================== */
.section-divider{
  height:1px; width:100%; margin:56px 0; opacity:.9;
  background: linear-gradient(90deg,
    rgba(46,124,246,.0), rgba(46,124,246,.35), rgba(49,209,124,.0));
}

/* =====================
   Title underline accent
   ===================== */
.section-title{ position:relative; z-index:1; }
.section-title::after{
  content:""; position:absolute; left:0; bottom:-14px; height:3px; width:120px; opacity:.9;
  background: linear-gradient(90deg,#3B82F6, #31D17C);
  border-radius:999px;
}

/* =====================
   Page vignette + optional grid
   ===================== */
.page-vignette::before{
  content:""; position:fixed; inset:-10vh; pointer-events:none; z-index:0;
  background: radial-gradient(90% 60% at 50% -10%, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 65%, rgba(0,0,0,.45) 100%);
}

.bg-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(60% 60% at 50% 20%, black 60%, transparent 100%);
}