/* =========================================
   PARALLAX DOODLES — background SVG shapes
   ========================================= */

/* Doodle base */
.doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  opacity: 0.10;
  z-index: 0;
}

/* Hero section doodles */
.hero { position: relative; overflow: hidden; }

.doodle--circle {
  border-radius: 50%;
  border: 3px solid var(--clr-primary);
}
.doodle--ring {
  border-radius: 50%;
  border: 2px dashed var(--clr-primary-light);
}
.doodle--plus::before,
.doodle--plus::after {
  content: '';
  position: absolute;
  background: var(--clr-primary);
  border-radius: 2px;
}
.doodle--plus::before { width: 100%; height: 20%; top: 40%; left: 0; }
.doodle--plus::after  { width: 20%; height: 100%; top: 0; left: 40%; }

.doodle--dot-grid {
  background-image: radial-gradient(circle, var(--clr-primary) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

.doodle--zigzag {
  background: none;
  overflow: visible;
}

/* ── Hero doodle positions ── */
.hero .doodle-1 {
  width: 120px; height: 120px;
  top: 12%; right: 6%;
  opacity: 0.08;
}
.hero .doodle-2 {
  width: 80px; height: 80px;
  top: 60%; left: 3%;
  opacity: 0.07;
}
.hero .doodle-3 {
  width: 200px; height: 200px;
  top: 5%; left: 12%;
  opacity: 0.05;
}
.hero .doodle-4 {
  width: 40px; height: 40px;
  top: 75%; right: 18%;
  opacity: 0.09;
}
.hero .doodle-5 {
  width: 140px; height: 140px;
  bottom: 5%; right: 30%;
  opacity: 0.06;
}
.hero .doodle-6 {
  width: 60px; height: 60px;
  top: 40%; left: 44%;
  opacity: 0.06;
}

/* ── Stats section doodles ── */
.stats { position: relative; overflow: hidden; }
.stats .doodle-1 {
  width: 160px; height: 160px;
  top: -20px; right: -20px;
  opacity: 0.07;
}
.stats .doodle-2 {
  width: 90px; height: 90px;
  bottom: 10%; left: 4%;
  opacity: 0.06;
}

/* ── Features section doodles ── */
.features { position: relative; overflow: hidden; }
.features .doodle-1 {
  width: 180px; height: 180px;
  top: 8%; right: -40px;
  opacity: 0.05;
}
.features .doodle-2 {
  width: 100px; height: 100px;
  top: 50%; left: -30px;
  opacity: 0.06;
}
.features .doodle-3 {
  width: 60px; height: 60px;
  top: 80%; right: 10%;
  opacity: 0.07;
}

/* ── CTA banner doodles ── */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner .doodle-1 {
  width: 220px; height: 220px;
  top: -60px; left: -60px;
  opacity: 0.06;
  border-color: rgba(255,255,255,0.4);
}
.cta-banner .doodle-2 {
  width: 120px; height: 120px;
  bottom: -30px; right: 8%;
  opacity: 0.07;
  border-color: rgba(255,255,255,0.3);
}
.cta-banner .doodle-3 {
  width: 50px; height: 50px;
  top: 20%; right: 22%;
  opacity: 0.08;
  border-color: rgba(255,255,255,0.35);
}

/* Ensure content sits above doodles */
.hero__inner,
.stats .container,
.features .container,
.cta-banner .container { position: relative; z-index: 1; }