.services-flow{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#10131a 0%,#14171f 55%,#10131a 100%);padding:54px 0 50px}.sf-container{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}.sf-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.sf-grid{position:absolute;inset:-60px;background-image:linear-gradient(rgba(127,161,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(127,161,255,.14) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 42%,#000 40%,transparent 82%);mask-image:radial-gradient(ellipse 70% 65% at 50% 42%,#000 40%,transparent 82%);animation:sfGridDrift 18s linear infinite;will-change:background-position}@keyframes sfGridDrift{from{background-position:0 0,0 0}to{background-position:42px 42px,42px 42px}}.sf-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.4;will-change:transform}.sf-orb-1{width:240px;height:240px;left:-60px;top:-50px;background:#0d42ff;animation:sfOrb1 12s ease-in-out infinite}.sf-orb-2{width:200px;height:200px;right:-40px;bottom:-60px;background:#2fd0e8;animation:sfOrb2 10s ease-in-out infinite}@keyframes sfOrb1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,22px)}}@keyframes sfOrb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,-20px)}}.sf-copy{flex:0 1 260px}.sf-live-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(127,161,255,.35);color:#7fa1ff;font-family:var(--font-secondary);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}.sf-live-dot{width:7px;height:7px;border-radius:50%;background:#3bff6a;box-shadow:0 0 8px #3bff6a;animation:sfLivePulse 1.6s ease-in-out infinite}@keyframes sfLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}.services-flow h2{margin:0;color:#fff;font-family:var(--font-secondary);font-size:40px;font-weight:700;line-height:1.15}.sf-radar-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.sf-radar{overflow:hidden;position:relative;width:clamp(150px,18vw,210px);height:clamp(150px,18vw,210px);border-radius:50%;background:radial-gradient(circle,rgba(13,66,255,.14),rgba(13,66,255,0) 72%)}.sf-radar-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(127,161,255,.28)}.sf-radar-ring-2{inset:18%}.sf-radar-ring-3{inset:36%}.sf-radar-cross{position:absolute;inset:0}.sf-radar-cross::before,.sf-radar-cross::after{content:"";position:absolute;background:rgba(127,161,255,.2)}.sf-radar-cross::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}.sf-radar-cross::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}.sf-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(47,208,232,.8),rgba(47,208,232,.15) 25%,transparent 50%,transparent 100%);animation:sfSweepSpin 3s linear infinite;transform-origin:center;will-change:transform;z-index:1;pointer-events:none;}@keyframes sfSweepSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sf-radar-core{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#2fd0e8;box-shadow:0 0 14px #2fd0e8,0 0 0 5px rgba(47,208,232,.12);z-index:2}.sf-blip{position:absolute;left:var(--bx);top:var(--by);width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--bcolor,#fff);z-index:2;opacity:0;transform:scale(.4);animation:sfBlipLife var(--blife,4s) ease-in-out infinite;animation-delay:var(--bdelay,0s);will-change:opacity,transform}.sf-blip::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--bcolor,#3bd4ff);opacity:.95;box-shadow:0 0 9px var(--bcolor,#3bd4ff)}.sf-blip::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--bcolor,#3bd4ff);opacity:0;animation:sfBlipPing var(--blife,3.6s) ease-out infinite;animation-delay:var(--bdelay,0s);will-change:transform,opacity}@keyframes sfBlipLife{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scale(1)}75%{opacity:0;transform:scale(.5)}100%{opacity:0;transform:scale(.4)}}@keyframes sfBlipPing{0%{transform:scale(.5);opacity:0}12%{opacity:.9}55%{opacity:.25}75%{opacity:0}100%{transform:scale(2.8);opacity:0}}.sf-gallery{position:relative;flex:1 1 420px;max-width:640px;height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto}.sf-gallery-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(120,140,255,.16),transparent 70%);pointer-events:none;animation:sfGalleryGlowPulse 4.5s ease-in-out infinite}@keyframes sfGalleryGlowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.sf-photo{position:absolute;left:50%;top:50%;width:min(560px,92%);display:flex;flex-direction:column;gap:14px;cursor:pointer;opacity:0;will-change:opacity,transform;animation:sfPhotoSlide 18s linear infinite;animation-fill-mode:both;z-index:1}@keyframes sfPhotoSlide{0%{opacity:0;transform:translate(calc(-50% + 90px),-50%);z-index:1}2%{opacity:1;transform:translate(-50%,-50%);z-index:5}7.5%{opacity:1;transform:translate(-50%,-50%);z-index:5}9.5%{opacity:0;transform:translate(calc(-50% - 90px),-50%);z-index:1}100%{opacity:0;transform:translate(calc(-50% - 90px),-50%);z-index:1}}@media (hover:hover) and (pointer:fine){.sf-gallery:hover .sf-photo{animation-play-state:paused;opacity:0!important}.sf-gallery:hover .sf-gallery-glow{animation-play-state:paused}.sf-gallery:hover .sf-photo:hover{opacity:1!important;transform:translate(-50%,-50%)!important;z-index:6!important;outline:none}.sf-gallery:hover .sf-photo:hover .sf-photo-frame{transform:translateY(-4px);border-color:rgba(127,161,255,0.55);box-shadow:0 32px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(127,161,255,.25),inset 0 1px 0 rgba(255,255,255,.18)}.sf-gallery:hover .sf-photo:hover .sf-photo-frame img{transform:scale(1.06)}}.sf-gallery:focus-within .sf-photo{animation-play-state:paused;opacity:0!important}.sf-gallery:focus-within .sf-gallery-glow{animation-play-state:paused}.sf-gallery:focus-within .sf-photo:focus-visible{opacity:1!important;transform:translate(-50%,-50%)!important;z-index:6!important;outline:none}.sf-photo-label{display:flex;align-items:center;gap:10px;font-family:var(--font-secondary);font-size:21px;font-weight:800;letter-spacing:.01em;color:#fff}.sf-photo-label::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#2fd0e8;box-shadow:0 0 9px #2fd0e8}.sf-photo-frame{position:relative;width:100%;height:380px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,0.18);box-shadow:0 26px 54px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.14);background:#14161c;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.sf-photo-frame picture,.sf-photo-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.sf-gallery:focus-within .sf-photo:focus-visible .sf-photo-frame{transform:translateY(-4px);border-color:rgba(127,161,255,0.55);box-shadow:0 32px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(127,161,255,.25),inset 0 1px 0 rgba(255,255,255,.18)}.sf-gallery:focus-within .sf-photo:focus-visible .sf-photo-frame img{transform:scale(1.06)}
/* ============================================================
   RANDOM ZIG-ZAG BUBBLE FLOAT (LEFT & RIGHT OF CENTER PHOTO)
   ============================================================ */
.sf-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sf-bubble {
  --hue: 190;
  position: absolute;
  left: var(--bx, 20%);
  bottom: calc(-35px - var(--bstart, 0px));
  transform: translate(-50%, 0) scale(0.6);
  padding: 6px 14px;
  border-radius: 30px;
  white-space: nowrap;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  background: linear-gradient(135deg, hsla(var(--hue), 90%, 58%, 0.88), hsla(calc(var(--hue) + 42), 90%, 50%, 0.88));
  border: 1px solid hsla(var(--hue), 100%, 80%, 0.65);
  box-shadow: 0 0 18px hsla(var(--hue), 90%, 55%, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.25);
  opacity: 0;
  animation: sfBubbleZigZag var(--bdur, 10s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
  will-change: transform, opacity;
}

/* Organic Zig-Zag Wave Animation (Dodging middle content) */
@keyframes sfBubbleZigZag {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  12% {
    opacity: 0.95;
    transform: translate(calc(-50% + var(--sw1, 15px)), -50px) scale(0.85);
  }
  35% {
    opacity: 1;
    transform: translate(calc(-50% - var(--sw2, 22px)), -150px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translate(calc(-50% + var(--sw3, 20px)), -260px) scale(1);
  }
  82% {
    opacity: 0.85;
    transform: translate(calc(-50% - var(--sw4, 16px)), -360px) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sw1, 15px)), -460px) scale(0.7);
  }
}

/* LEFT SIDE BUBBLE POSITIONS (0% to 22% width - Away from central photo) */
.sf-bubble-l1 { --bx: 2%;  --hue: 0;   --bdur: 11.5s; --bdelay: -0.8s; --sw1: 15px;  --sw2: 20px;  --sw3: 12px;  --sw4: 18px;  --bstart: 10px; }
.sf-bubble-l2 { --bx: 18%; --hue: 35;  --bdur: 13.8s; --bdelay: -4.5s; --sw1: -18px; --sw2: -14px; --sw3: -20px; --sw4: -12px; --bstart: 35px; }
.sf-bubble-l3 { --bx: 8%;  --hue: 60;  --bdur: 10.2s; --bdelay: -8.1s; --sw1: 20px;  --sw2: 16px;  --sw3: 22px;  --sw4: 15px;  --bstart: 0px;  }
.sf-bubble-l4 { --bx: 22%; --hue: 95;  --bdur: 12.6s; --bdelay: -2.3s; --sw1: -15px; --sw2: -22px; --sw3: -16px; --sw4: -20px; --bstart: 50px; }
.sf-bubble-l5 { --bx: 12%; --hue: 140; --bdur: 11.2s; --bdelay: -6.4s; --sw1: 18px;  --sw2: 14px;  --sw3: 20px;  --sw4: 16px;  --bstart: 20px; }
.sf-bubble-l6 { --bx: 4%;  --hue: 170; --bdur: 14.2s; --bdelay: -9.8s; --sw1: -16px; --sw2: -20px; --sw3: -14px; --sw4: -18px; --bstart: 60px; }

/* RIGHT SIDE BUBBLE POSITIONS (78% to 98% width - Away from central photo) */
.sf-bubble-r1 { --bx: 78%; --hue: 195; --bdur: 12.2s; --bdelay: -1.5s; --sw1: -16px; --sw2: -22px; --sw3: -14px; --sw4: -18px; --bstart: 15px; }
.sf-bubble-r2 { --bx: 88%; --hue: 220; --bdur: 10.8s; --bdelay: -5.8s; --sw1: 18px;  --sw2: 14px;  --sw3: 20px;  --sw4: 12px;  --bstart: 45px; }
.sf-bubble-r3 { --bx: 80%; --hue: 260; --bdur: 13.5s; --bdelay: -9.2s; --sw1: -20px; --sw2: -16px; --sw3: -22px; --sw4: -15px; --bstart: 5px;  }
.sf-bubble-r4 { --bx: 94%; --hue: 290; --bdur: 11.4s; --bdelay: -3.7s; --sw1: 15px;  --sw2: 22px;  --sw3: 16px;  --sw4: 20px;  --bstart: 55px; }
.sf-bubble-r5 { --bx: 84%; --hue: 320; --bdur: 12.9s; --bdelay: -7.3s; --sw1: -18px; --sw2: -14px; --sw3: -20px; --sw4: -16px; --bstart: 25px; }
.sf-bubble-r6 { --bx: 97%; --hue: 345; --bdur: 10.9s; --bdelay: -10.5s;--sw1: 16px;  --sw2: 20px;  --sw3: 14px;  --sw4: 18px;  --bstart: 40px; }

/* Mobile Adjustments for side gutters */
@media (max-width: 767px) {
  .sf-bubble {
    font-size: 8.5px;
    padding: 4px 8px;
  }
  .sf-bubble-l1 { --bx: 1%;  --sw1: 5px;  --sw2: 8px;  --sw3: 4px;  --sw4: 6px;  }
  .sf-bubble-l2 { --bx: 10%; --sw1: -6px; --sw2: -5px; --sw3: -7px; --sw4: -4px; }
  .sf-bubble-l3 { --bx: 3%;  --sw1: 6px;  --sw2: 5px;  --sw3: 8px;  --sw4: 5px;  }
  .sf-bubble-l4 { --bx: 12%; --sw1: -5px; --sw2: -7px; --sw3: -6px; --sw4: -7px; }
  .sf-bubble-l5 { --bx: 5%;  --sw1: 6px;  --sw2: 4px;  --sw3: 7px;  --sw4: 5px;  }
  .sf-bubble-l6 { --bx: 2%;  --sw1: -4px; --sw2: -6px; --sw3: -5px; --sw4: -6px; }

  .sf-bubble-r1 { --bx: 88%; --sw1: -5px; --sw2: -7px; --sw3: -4px; --sw4: -6px; }
  .sf-bubble-r2 { --bx: 96%; --sw1: 6px;  --sw2: 4px;  --sw3: 7px;  --sw4: 5px;  }
  .sf-bubble-r3 { --bx: 90%; --sw1: -6px; --sw2: -5px; --sw3: -8px; --sw4: -6px; }
  .sf-bubble-r4 { --bx: 98%; --sw1: 5px;  --sw2: 7px;  --sw3: 6px;  --sw4: 7px;  }
  .sf-bubble-r5 { --bx: 86%; --sw1: -6px; --sw2: -4px; --sw3: -7px; --sw4: -5px; }
  .sf-bubble-r6 { --bx: 95%; --sw1: 4px;  --sw2: 6px;  --sw3: 5px;  --sw4: 6px;  }
}



/* ============================================================
   MOBILE & TABLET CENTER ALIGNMENT FIX FOR SERVICES-FLOW SECTION
   ============================================================ */
@media screen and (max-width: 991px) {
  .services-flow .sf-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  .services-flow .sf-copy {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .services-flow .sf-live-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .services-flow h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  .services-flow .sf-gallery {
    width: 100% !important;
    margin: 15px auto !important;
  }

  .services-flow .sf-radar-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 15px auto 0 auto !important;
  }
}


/* PERFORMANCE & GPU ACCELERATION TWEAKS FOR 95+ LIGHTHOUSE SCORE */
.services-flow, .sf-photo, .sf-bubble, .sf-radar, .sf-radar-sweep, .sf-blip, .egs-service-node, .egs-orbit-ring {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}