.elementor-4575 .elementor-element.elementor-element-8b130f9{--display:flex;--overflow:hidden;}.elementor-4575 .elementor-element.elementor-element-03ff6eb{width:100%;max-width:100%;z-index:2;}.elementor-4575 .elementor-element.elementor-element-03ff6eb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4575 .elementor-element.elementor-element-03ff6eb.elementor-element{--align-self:center;}.elementor-4575 .elementor-element.elementor-element-84a226f{width:100%;max-width:100%;z-index:2;}.elementor-4575 .elementor-element.elementor-element-84a226f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4575 .elementor-element.elementor-element-84a226f.elementor-element{--align-self:center;}/* Start custom CSS for html, class: .elementor-element-03ff6eb */<!-- ===================================================== -->
<!--  KAG INTERACTIVE ORB SECTION — UPGRADED FX LEVEL 3    -->
<!-- ===================================================== -->

<style>
/* ORB SECTION */
.kag-orb-section {
  padding: 140px 5vw;
  background: radial-gradient(circle at top, #070b16, #03040a 60%, #000 100%);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-align: center;
}

.kag-orb-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  color:#fff;
}
.kag-orb-title span { color: #DB1F41; }

.kag-orb-sub {
  max-width: 680px;
  margin: 0 auto 50px;
  opacity: .85;
  font-size: 1rem;
  line-height: 1.7;
  color:#fff;
}

/* LAYOUT */
.kag-orb-container {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ORB (no spin, deformable) */
.kag-orb {
  --tiltX: -18deg;
  --tiltY: 0deg;
  --squishX: 1;
  --squishY: 1;

  width: 380px;
  height: 380px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.14) 0, transparent 40%),
    radial-gradient(circle at 40% 30%, #111a33 0%, #050713 55%, #000 95%);
  box-shadow:
    0 0 80px rgba(31,107,255,.55),
    inset 0 0 120px rgba(0,0,0,.9),
    inset 0 0 50px rgba(219,31,65,.35);
  transform-style: preserve-3d;
  overflow: hidden;
  cursor: grab;
  transition: transform .18s ease-out, box-shadow .25s ease-out;
  transform:
    perspective(1200px)
    rotateX(var(--tiltX))
    rotateY(var(--tiltY))
    scaleX(var(--squishX))
    scaleY(var(--squishY));
}

/* subtle breathing, not spinning */
.kag-orb::before {
  content:"";
  position:absolute;
  inset:-15%;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(219,31,65,.35), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(31,107,255,.5), transparent 55%);
  opacity:.45;
  mix-blend-mode:screen;
  filter:blur(18px);
  animation:kagOrbPulse 7s ease-in-out infinite;
}
@keyframes kagOrbPulse {
  0%,100% { transform:scale(1); opacity:.4; }
  50% { transform:scale(1.05); opacity:.65; }
}

/* central logo – high-tech hologram */
.kag-orb-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px;
  transform: translate(-50%,-50%);
  opacity: .95;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.65))
    drop-shadow(0 0 26px rgba(31,107,255,.65));
  mix-blend-mode: screen;
  animation:kagLogoPulse 5s ease-in-out infinite;
}
@keyframes kagLogoPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50% { transform:translate(-50%,-50%) scale(1.06); }
}

/* HOTSPOTS */
.kag-node {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  background: #DB1F41;
  box-shadow: 0 0 16px #DB1F41, 0 0 40px rgba(219,31,65,.4);
  cursor: pointer;
  z-index: 10;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}

.kag-node:hover,
.kag-node.kag-active-node {
  transform: scale(1.4);
  box-shadow:
    0 0 20px #DB1F41,
    0 0 45px rgba(219,31,65,.65);
}

/* connector line from node to center */
.kag-node::after {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:1px;
  height:1px;
  transform-origin: center;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  opacity:0;
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.kag-node.kag-active-node::after,
.kag-node:hover::after {
  opacity:1;
  transform:scaleY(16);
}

/* FLOATING PARTICLES */
.kag-particle {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  opacity: .95;
  z-index: 2;
}

.kag-particle.red {
  background: #DB1F41;
  box-shadow: 0 0 10px #DB1F41;
  animation: swimRed 7s ease-in-out infinite;
}
.kag-particle.blue {
  background: #1f6bff;
  box-shadow: 0 0 10px #1f6bff;
  animation: swimBlue 8s ease-in-out infinite;
}

@keyframes swimRed {
  0% { top:40%; left:30%; }
  25% { top:18%; left:62%; }
  50% { top:52%; left:78%; }
  75% { top:78%; left:38%; }
  100% { top:40%; left:30%; }
}
@keyframes swimBlue {
  0% { top:62%; left:52%; }
  25% { top:34%; left:22%; }
  50% { top:56%; left:12%; }
  75% { top:82%; left:52%; }
  100% { top:62%; left:52%; }
}

/* OUTPUT CARD */
.kag-orb-output {
  max-width: 420px;
  padding: 24px;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  color:#fff;
  transition: background .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.kag-orb-output h3 {
  margin-bottom: 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color:#fff;
}
.kag-orb-output p {
  color:#fff;
  opacity:.9;
}
.kag-orb-output.kag-orb-output-active {
  background: rgba(7, 23, 60, 0.6);
  border-color: rgba(219,31,65,.65);
  box-shadow: 0 0 40px rgba(31,107,255,.45);
}

@media(max-width:768px){
  .kag-orb { width: 290px; height: 290px; }
  .kag-orb-output { text-align:center; }
}
</style>


<section class="kag-orb-section">
  <h2 class="kag-orb-title">How We Bring <span>Ideas</span> To Life</h2>

  <p class="kag-orb-sub">
    Every point on the orb represents a moment in our creation process.  
    Hover, drag, or tap the nodes to see how KAG fuses strategy, AI, design, and engineering into world-class digital products.
  </p>

  <div class="kag-orb-container">

    <!-- ORB -->
    <div class="kag-orb" id="kagOrb">

      <!-- Center logo (replaces your photo) -->
      <img class="kag-orb-logo"
        src="https://kreationavegroup.com/wp-content/uploads/2025/05/cropped-cropped-cropped-Concept-_2.pdf-1200-x-675-px-250-x-250-px-1200-x-1600-px-2501-x-2310-px-2501-x-2310-px-1000-x-300-px-400-x-400-px-512-x-512-px-1.png"
        alt="KAG Logo">

      <!-- HOTSPOTS -->
      <div class="kag-node" data-step="1" style="top:18%; left:45%;"></div>
      <div class="kag-node" data-step="2" style="top:55%; left:78%;"></div>
      <div class="kag-node" data-step="3" style="top:72%; left:30%;"></div>
      <div class="kag-node" data-step="4" style="top:35%; left:10%;"></div>

      <!-- FLOATING PARTICLES -->
      <div class="kag-particle red"></div>
      <div class="kag-particle blue"></div>
      <div class="kag-particle red"></div>
      <div class="kag-particle blue"></div>
    </div>

    <!-- TEXT OUTPUT -->
    <div class="kag-orb-output" id="kagOrbOutput">
      <h3 id="kagOrbOutputTitle">Start Exploring</h3>
      <p id="kagOrbOutputText">
        Hover or tap a node to explore the phases of our creative and technical process.
      </p>
    </div>

  </div>
</section>


<script>
(function(){

  const steps = {
    1:{ title:"Creative Discovery",
        text:"We extract your vision, define goals, map user behavior, and build a revenue-aligned roadmap." },
    2:{ title:"AI-Led Architecture",
        text:"We design intelligent systems — personalization engines, automation, AR layers, and predictive UX." },
    3:{ title:"High-Fidelity Build",
        text:"Our engineers craft cinematic, high-performance applications with world-class UI, motion, and polish." },
    4:{ title:"Scale & Optimization",
        text:"We refine your experience using analytics — boosting ROI, engagement, and long-term value." }
  };

  const orb      = document.getElementById("kagOrb");
  const outWrap  = document.getElementById("kagOrbOutput");
  const outTitle = document.getElementById("kagOrbOutputTitle");
  const outText  = document.getElementById("kagOrbOutputText");
  const nodes    = orb.querySelectorAll(".kag-node");

  // ------- Hotspot interactions (text + highlight) -------
  nodes.forEach(node=>{
    function activate(){
      const s = steps[node.dataset.step];
      outTitle.textContent = s.title;
      outText.textContent  = s.text;

      nodes.forEach(n=>n.classList.remove("kag-active-node"));
      node.classList.add("kag-active-node");

      outWrap.classList.add("kag-orb-output-active");
    }

    node.addEventListener("mouseover", activate);
    node.addEventListener("click", activate);
  });

  // ------- Deform / tilt based on cursor movement -------
  let dragging = false;
  let lastX = 0, lastY = 0;
  let rotX = -18, rotY = 0;
  let squishX = 1, squishY = 1;

  function applyTransform(){
    orb.style.setProperty("--tiltX", rotX + "deg");
    orb.style.setProperty("--tiltY", rotY + "deg");
    orb.style.setProperty("--squishX", squishX);
    orb.style.setProperty("--squishY", squishY);
  }

  // hover-only subtle tilt
  orb.addEventListener("mousemove", e=>{
    if (dragging) return;

    const rect = orb.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5..0.5
    const y = (e.clientY - rect.top) / rect.height - 0.5;

    rotY = x * 16;
    rotX = -18 - y * 10;

    squishX = 1 + x * 0.12;
    squishY = 1 - y * 0.12;

    applyTransform();
  });

  // drag = more aggressive shaping
  orb.addEventListener("mousedown", e=>{
    dragging = true;
    orb.style.cursor = "grabbing";
    lastX = e.clientX;
    lastY = e.clientY;
  });
  window.addEventListener("mouseup", ()=>{
    if (!dragging) return;
    dragging = false;
    orb.style.cursor = "grab";
    // ease back toward default shape
    rotX = -18; rotY = 0; squishX = 1; squishY = 1;
    applyTransform();
  });

  window.addEventListener("mousemove", e=>{
    if (!dragging) return;
    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;

    rotY += dx * 0.25;
    rotX -= dy * 0.25;

    squishX = 1 + (dx / 160);
    squishY = 1 - (dy / 160);

    squishX = Math.max(0.8, Math.min(1.2, squishX));
    squishY = Math.max(0.8, Math.min(1.2, squishY));

    applyTransform();
    lastX = e.clientX;
    lastY = e.clientY;
  });

})();
</script>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-84a226f */@media(max-width:768px){
  .kag-more-panel {
    display: none !important;
  }
}
@media(max-width:768px){
  .kag-more-panel {
    display: none !important;
  }
}
.kag-bg-text span {
  color: rgba(255,255,255,.2) !important;
}
.kag-bg-text span {
    color: #1F6BFF !important; /* Electric Blue */
    opacity: 0.92;
}
/* HERO BACKGROUND TEXT COLOR FIX */
.kag-bg-text span {
   color: #1D4CFF !important; /* deep electric blue */
}

/* WHAT YOU CAN BUILD – RED SECTION IMPROVEMENT */
.kag-more {
   background: linear-gradient(180deg, #7A0F20 0%, #DB1F41 100%) !important;
   box-shadow: 0 -80px 120px rgba(0, 102, 255, 0.25) inset !important;
}

/* CONNECT SECTION VISUALLY */
.kag-more h2, .kag-more h1 {
   color: #FFFFFF !important;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}
/* FORCE ALL TEXT IN COMPANION APP SECTION TO WHITE */
#kag-companion-hero,
#kag-companion-hero * {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* FIX DARK TEXT UNDER HERO */
.kag-orb-section,
.kag-orb-section * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Also fix any global section that appears dark */
section,
section * {
  color: #ffffff !important;
}/* End custom CSS */