/*
 * Section Background Enhancements
 * Pure CSS — no JS, no performance cost.
 * Pattern: dot grid + alternating radial-gradient colour blobs.
 */

/* ─────────────────────────────────────────
   Shared: dot-grid helper
   (applied via background-image layering on each section)
   ───────────────────────────────────────── */
:root {
  --dot: rgba(101, 118, 255, 0.08);
  --dot-size: 36px;
  --blob-purple: rgba(168, 85, 247, 0.07);
  --blob-teal:   rgba(20, 184, 166, 0.06);
  --blob-indigo: rgba(101, 118, 255, 0.05);
}

/* ─────────────────────────────────────────
   TrustedBy  (#trusted)  — subtle top-centre glow
   ───────────────────────────────────────── */
#trusted {
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%,   var(--blob-purple) 0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   Services  (#services)  — purple blob top-left, teal bottom-right
   ───────────────────────────────────────── */
#services {
  background-image:
    radial-gradient(ellipse 55% 60% at -5% 20%,  var(--blob-purple) 0%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 105% 80%, var(--blob-teal)   0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   About  (#about)  — teal top-right, indigo bottom-left
   ───────────────────────────────────────── */
#about {
  background-image:
    radial-gradient(ellipse 50% 55% at 105% 10%,  var(--blob-teal)   0%, transparent 100%),
    radial-gradient(ellipse 45% 50% at -5%  90%,  var(--blob-indigo) 0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   Portfolio  (#portfolio)  — purple centre-left
   ───────────────────────────────────────── */
#portfolio {
  background-image:
    radial-gradient(ellipse 60% 50% at 0%   50%, var(--blob-purple) 0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 100% 30%, var(--blob-teal)   0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   Testimonials  (#testimonials)  — centre radial glow
   ───────────────────────────────────────── */
#testimonials {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 100%, var(--blob-purple) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 0%,   var(--blob-indigo) 0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   FAQ  (#faq)
   Layers (top → bottom):
   1. teal glow — top-left
   2. purple glow — bottom-right
   3. dot grid
   4. dark overlay  (keeps text readable)
   5. cta-bg.jpg    (base image)
   ───────────────────────────────────────── */
#faq {
  background-color: #0C0F14 !important;
  background-image:
    radial-gradient(ellipse 55% 60% at -5%   0%,   rgba(20,  184, 166, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 105% 100%,  rgba(168,  85, 247, 0.12) 0%, transparent 100%),
    radial-gradient(circle, rgba(101, 118, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(12, 15, 20, 0.55), rgba(12, 15, 20, 0.55)),
    url('/assets/img/shape/banner-bg.png') !important;
  background-size:
    auto,
    auto,
    var(--dot-size) var(--dot-size),
    auto,
    cover !important;
  background-position: center, center, center, center, center right !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat !important;
}

/* ─────────────────────────────────────────
   FunFacts / Stats  (.fun-facts-section)  — #161A23 base
   ───────────────────────────────────────── */
.fun-facts-section {
  background-image:
    radial-gradient(ellipse 60% 70% at 100% 50%, var(--blob-teal)   0%, transparent 100%),
    radial-gradient(ellipse 50% 60% at 0%   50%, var(--blob-purple) 0%, transparent 100%),
    radial-gradient(circle, rgba(101, 118, 255, 0.06) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #161A23 !important;
}

/* ─────────────────────────────────────────
   CTA  (#cta)  — strong purple centre glow
   ───────────────────────────────────────── */
#cta {
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 10%, var(--blob-teal)        0%, transparent 100%),
    radial-gradient(ellipse 35% 30% at 90% 90%, var(--blob-indigo)      0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   Blog  (#blog)  — teal right, purple left
   ───────────────────────────────────────── */
#blog {
  background-image:
    radial-gradient(ellipse 45% 50% at -5%  40%, var(--blob-purple) 0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 105% 60%, var(--blob-teal)   0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}

/* ─────────────────────────────────────────
   Footer  (#contact)  — subtle top glow only
   ───────────────────────────────────────── */
#contact {
  background-image:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(101, 118, 255, 0.06) 0%, transparent 100%),
    radial-gradient(circle, var(--dot) 1px, transparent 1px) !important;
  background-size: auto, var(--dot-size) var(--dot-size) !important;
  background-color: #0C0F14 !important;
}