/* Xaflo — layout enhancements: static orbs, section numbers, product mock v2 */

/* ============================================================
   FLOATING GRADIENT ORBS — STATIC positioning, no animation
   ============================================================ */
.xaflo-orbs {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.xaflo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: auto;
}
.xaflo-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #00d9ff, transparent 70%);
  top: 12%; left: -8%;
  opacity: 0.22;
}
.xaflo-orb-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  top: 42%; right: -6%;
  opacity: 0.22;
}
.xaflo-orb-3 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #d946ef, transparent 70%);
  bottom: -8%; left: 28%;
  opacity: 0.18;
}
.xaflo-orb-4 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #3a8dff, transparent 70%);
  top: 70%; left: 8%;
  opacity: 0.15;
}
@media (max-width: 820px) {
  .xaflo-orb-1, .xaflo-orb-2 { width: 320px; height: 320px; opacity: 0.18; filter: blur(60px); }
  .xaflo-orb-3 { width: 400px; height: 400px; opacity: 0.14; }
  .xaflo-orb-4 { display: none; }
}

/* ============================================================
   SECTION NUMBERS (editorial big number in corner)
   ============================================================ */
.xaflo-section { position: relative; }
.xaflo-section[data-sn]::before {
  content: attr(data-sn);
  position: absolute;
  top: 2.5rem; right: 2.5rem;
  font-family: var(--x-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--x-muted);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 820px) {
  .xaflo-section[data-sn]::before {
    top: 1.5rem; right: 1.5rem;
    font-size: 0.62rem;
  }
}

/* ============================================================
   PRODUCT MOCK v2 (mini dashboard)
   ============================================================ */
.xaflo-product-row .x-mock {
  background: linear-gradient(180deg, #0c1024, #06080f);
  box-shadow: 0 30px 80px rgba(0,217,255,0.12), inset 0 0 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.xaflo-product-row .x-mock::before {
  content: "";
  display: block;
  height: 28px;
  background-image:
    radial-gradient(circle at 14px 14px, #ff5f57 0 4px, transparent 4px),
    radial-gradient(circle at 30px 14px, #febc2e 0 4px, transparent 4px),
    radial-gradient(circle at 46px 14px, #28c840 0 4px, transparent 4px),
    linear-gradient(180deg, #161b30, #11162a);
  background-repeat: no-repeat;
  border-bottom: 1px solid #1a2140;
}
.xaflo-product-row .x-mock::after {
  content: "";
  flex: 1;
  background:
    linear-gradient(90deg, rgba(0,217,255,0.06) 0, rgba(0,217,255,0.06) 22%, transparent 22%),
    linear-gradient(180deg, transparent 60%, #00d9ff 60% 100%) 30% 100%/4% 32% no-repeat,
    linear-gradient(180deg, transparent 45%, #7c3aed 45% 100%) 38% 100%/4% 48% no-repeat,
    linear-gradient(180deg, transparent 30%, #d946ef 30% 100%) 46% 100%/4% 62% no-repeat,
    linear-gradient(180deg, transparent 50%, #3a8dff 50% 100%) 54% 100%/4% 42% no-repeat,
    linear-gradient(180deg, transparent 22%, #00d9ff 22% 100%) 62% 100%/4% 72% no-repeat,
    linear-gradient(180deg, transparent 38%, #7c3aed 38% 100%) 70% 100%/4% 56% no-repeat,
    linear-gradient(180deg, transparent 55%, #d946ef 55% 100%) 78% 100%/4% 38% no-repeat,
    linear-gradient(180deg, transparent 28%, #3a8dff 28% 100%) 86% 100%/4% 66% no-repeat,
    linear-gradient(transparent 14%, #2a335a 14% 16%, transparent 16% 28%, #2a335a 28% 30%, transparent 30% 42%, #1a2140 42% 44%, transparent 44%) 0 0/22% 100% no-repeat,
    linear-gradient(180deg, #0a0e1a, #06080f);
  position: relative;
}