/* ==========================================================
   Floating particles overlay (ported from the CompKit
   marketing site — assets/css/styles.css).
   z-index is positive (not -1 like the source site) because
   this page's Elementor/WooCommerce markup wraps nearly
   everything in position:relative boxes with solid card
   backgrounds — those paint above a negative z-index sibling
   regardless of DOM order, which hid the layer completely.
   pointer-events:none keeps clicks/scroll passing through.
   ========================================================== */
.particles { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.particles span {
  position: absolute;
  bottom: -10vh;
  width: 7px; height: 7px;
  border-radius: 50%;
  opacity: 0.0;
  animation: float-up linear infinite;
}
.particles span:nth-child(8n+1) { background: radial-gradient(circle at 30% 30%, #8b5cf6, #6d28d9 70%); box-shadow: 0 0 12px rgba(139,92,246,0.55); }
.particles span:nth-child(8n+2) { background: radial-gradient(circle at 30% 30%, #3b82f6, #1d4ed8 70%); box-shadow: 0 0 12px rgba(59,130,246,0.55); }
.particles span:nth-child(8n+3) { background: radial-gradient(circle at 30% 30%, #f97316, #c2410c 70%); box-shadow: 0 0 12px rgba(249,115,22,0.55); }
.particles span:nth-child(8n+4) { background: radial-gradient(circle at 30% 30%, #22c55e, #15803d 70%); box-shadow: 0 0 12px rgba(34,197,94,0.55); }
.particles span:nth-child(8n+5) { background: radial-gradient(circle at 30% 30%, #ef4444, #b91c1c 70%); box-shadow: 0 0 12px rgba(239,68,68,0.55); }
.particles span:nth-child(8n+6) { background: radial-gradient(circle at 30% 30%, #d97706, #92400e 70%); box-shadow: 0 0 12px rgba(217,119,6,0.55); }
.particles span:nth-child(8n+7) { background: radial-gradient(circle at 30% 30%, #8b7cf0, #6c5ce7 70%); box-shadow: 0 0 12px rgba(139,124,240,0.55); }
.particles span:nth-child(8n)   { background: radial-gradient(circle at 30% 30%, #f0937a, #e17055 70%); box-shadow: 0 0 12px rgba(240,147,122,0.55); }
@keyframes float-up {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-118vh) scale(1.1); opacity: 0; }
}
.particles span { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
}
@media print {
  .particles { display: none; }
}