/* ════════════════════════════════════════════════════════════════
   TBD — Gradient Panel motif
   The signature blue→teal panel with thin white line-rings and a soft
   white radial glow (from the website CTA banners). Size-agnostic:
   decorative elements are positioned in % so the motif holds on any
   canvas — web banner, 1080² post, story, or 16:9 slide.

   Markup:
     <div class="tbd-grad-panel">
       <div class="gp-decor" aria-hidden="true">
         <span class="gp-glow"></span>
         <span class="gp-ring"></span>
         <span class="gp-rr gp-rr1"></span>
         <span class="gp-rr gp-rr2"></span>
       </div>
       … your content (position relative, z-index 2) …
     </div>
   ════════════════════════════════════════════════════════════════ */

.tbd-grad-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, #4C62FF 6%, #17D1C6 92%);
}
.tbd-grad-panel > *:not(.gp-decor) { position: relative; z-index: 2; }

.gp-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Soft white glow — the panel's light source, upper-right of centre */
.gp-glow {
  position: absolute;
  right: 6%; top: 18%;
  width: 42%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 64%);
}

/* Large thin circle, anchored bottom-right and partly cropped */
.gp-ring {
  position: absolute;
  left: 60%; top: 52%;
  width: 56%; aspect-ratio: 1;
  border: 1.5px solid rgba(255,255,255,0.40);
  border-radius: 50%;
}

/* Sweeping thin "S-curve" lines — two big rounded rectangles, rotated */
.gp-rr {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.42);
  border-radius: 9999px;
}
.gp-rr1 { left: 58%; top: 6%; width: 52%; height: 34%; transform: rotate(-6deg); }
.gp-rr2 { left: 68%; top: 38%; width: 58%; height: 30%; transform: rotate(4deg); }

/* Optional glass shade — a soft white wash sweeping in from one edge */
.gp-glass {
  position: absolute; right: 0; top: 8%;
  width: 30%; height: 60%;
  border-radius: 9999px 0 0 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0));
}

/* Dark institutional variant — the navy band with blue/teal glow blobs */
.tbd-navy-panel {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% -10%, #0A2E6E 0%, #021C4F 42%, #02153A 100%);
}
/* NOTE: direct children are forced position:relative/z-index:2 below, so any
   decorative absolutely-positioned element (background image, giant numeral,
   cut-out portrait) MUST live inside .np-decor — not as a bare frame child. */
.tbd-navy-panel > *:not(.np-decor) { position: relative; z-index: 2; }
.np-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.np-blob { position: absolute; border-radius: 50%; }
.np-blob.blue { width: 46%; aspect-ratio: 1; right: -12%; top: -22%;
  background: radial-gradient(circle, rgba(76,98,255,0.45), transparent 70%); }
.np-blob.teal { width: 40%; aspect-ratio: 1; left: -16%; bottom: -24%;
  background: radial-gradient(circle, rgba(23,209,198,0.32), transparent 70%); }