Animated Approach Feature Section with Node Grid

<section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate lg:mx-auto bg-gradient-to-br from-white/10 via-white/0 to-white/10 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-10 pb-10 pl-10 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 24px">
      <!-- Header -->

      <!-- Main Grid -->
      <div class="flex flex-col rounded-none mt-0 mb-0 pt-0 pr-0 pb-0 pl-0 relative">
        <!-- Header Section -->
        <div class="flex flex-col gap-10 w-full gap-x-10 gap-y-10">
  <div class="flex items-center gap-6">
    <span class="text-xs font-mono text-blue-400 tracking-widest font-sans">
      02
    </span>
    <div class="h-px flex-1 bg-white/10"></div>
    <span class="uppercase text-xs tracking-widest text-gray-500 font-sans">
      Our Approach
    </span>
  </div>

  <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-10">
    <div class="max-w-3xl flex flex-col gap-6">
      <h2 class="text-4xl md:text-5xl lg:text-6xl leading-[1.05] text-white font-oswald font-light">
        Built for deep focus.
        <span class="block text-gray-500 font-oswald font-light">
          Designed for real progress.
        </span>
      </h2>

      <p class="text-lg text-gray-400 font-light max-w-xl leading-relaxed font-sans">
        A calm and structured productivity system that helps teams stay focused,
        move faster, and track meaningful results over time.
      </p>
    </div>

    <button class="group flex items-center gap-2 px-6 py-3 border border-white/15 text-white text-sm font-medium rounded-full hover:bg-white/5 transition font-sans whitespace-nowrap">
      <span>Explore Features</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transition-transform group-hover:translate-x-1">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </button>
  </div>
</div>

        <!-- Features Grid -->
        <div class="min-h-[560px] flex md:mt-0 w-full max-w-6xl mt-16 mr-auto ml-auto pr-4 pl-4 relative items-center justify-center">
        <!-- SVG Connections with Noodles -->
        <svg class="absolute inset-0 hidden h-full w-full pointer-events-none md:block" viewBox="0 0 1000 560" preserveAspectRatio="xMidYMid meet">
          <defs class="">
            <!-- Original Wire Gradient -->
            <linearGradient id="wire" x1="0%" y1="0%" x2="100%" y2="0%" class="">
              <stop offset="0%" stop-color="#ffffff" stop-opacity="0.00" class=""></stop>
              <stop offset="25%" stop-color="#ffffff" stop-opacity="0.15" class=""></stop>
              <stop offset="50%" stop-color="#ffffff" stop-opacity="0.25" class=""></stop>
              <stop offset="75%" stop-color="#ffffff" stop-opacity="0.15" class=""></stop>
              <stop offset="100%" stop-color="#ffffff" stop-opacity="0.00" class=""></stop>
            </linearGradient>

            <!-- Noodle/Beam Gradient -->
            <linearGradient id="noodleGradient" x1="0%" y1="0%" x2="100%" y2="0%" class="">
              <stop offset="0%" stop-color="#6366f1" stop-opacity="0" class=""></stop>
              <stop offset="50%" stop-color="#a5b4fc" stop-opacity="1" class=""></stop>
              <stop offset="100%" stop-color="#6366f1" stop-opacity="0" class=""></stop>
            </linearGradient>

            <filter id="wireGlow" x="-30%" y="-30%" width="160%" height="160%" class="">
              <feGaussianBlur stdDeviation="2" result="blur" class=""></feGaussianBlur>
              <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="glow" class="">
              </feColorMatrix>
              <feMerge class="">
                <feMergeNode in="glow" class=""></feMergeNode>
                <feMergeNode in="SourceGraphic" class=""></feMergeNode>
              </feMerge>
            </filter>

            <filter id="dotGlow" x="-50%" y="-50%" width="200%" height="200%" class="">
              <feGaussianBlur stdDeviation="1.5" result="blur" class=""></feGaussianBlur>
              <feMerge class="">
                <feMergeNode in="blur" class=""></feMergeNode>
                <feMergeNode in="SourceGraphic" class=""></feMergeNode>
              </feMerge>
            </filter>
          </defs>

          <!-- Static Wires (Background Layer) -->
          <path d="M 165 130 L 290 130 Q 360 130 360 200 V 255 Q 360 280 390 280 L 440 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>
          <path d="M 165 430 L 290 430 Q 360 430 360 360 V 305 Q 360 280 390 280 L 440 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>
          <path d="M 229 280 L 440 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>
          <path d="M 440 280 L 560 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.3" class=""></path>
          <path d="M 560 280 L 771 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>
          <path d="M 835 130 L 710 130 Q 640 130 640 200 V 255 Q 640 280 610 280 L 560 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>
          <path d="M 835 430 L 710 430 Q 640 430 640 360 V 305 Q 640 280 610 280 L 560 280" stroke="url(#wire)" stroke-width="1.5" fill="none" filter="url(#wireGlow)" opacity="0.5" class=""></path>

          <!-- Animated Noodles (Foreground Layer) -->
          <!-- Left paths flowing IN -->
          <path d="M 165 130 L 290 130 Q 360 130 360 200 V 255 Q 360 280 390 280 L 440 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle">
          </path>
          <path d="M 165 430 L 290 430 Q 360 430 360 360 V 305 Q 360 280 390 280 L 440 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle">
          </path>
          <path d="M 229 280 L 440 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle-delayed"></path>

          <!-- Right paths flowing IN -->
          <path d="M 835 130 L 710 130 Q 640 130 640 200 V 255 Q 640 280 610 280 L 560 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle">
          </path>
          <path d="M 835 430 L 710 430 Q 640 430 640 360 V 305 Q 640 280 610 280 L 560 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle">
          </path>

          <!-- Center Hub Connection flowing ACROSS -->
          <path d="M 440 280 L 560 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle-delayed"></path>

          <!-- Hub Edge to Right Middle flowing OUT -->
          <path d="M 560 280 L 771 280" stroke="url(#noodleGradient)" stroke-width="2" fill="none" filter="url(#wireGlow)" class="animate-noodle-delayed"></path>

          <!-- Junction Dots -->
          <circle cx="440" cy="280" r="3" fill="#818cf8" filter="url(#dotGlow)" class="animate-pulse"></circle>
          <circle cx="560" cy="280" r="3" fill="#818cf8" filter="url(#dotGlow)" class="animate-pulse"></circle>
        </svg>

        <!-- Nodes Grid -->
        <div class="relative z-10 grid h-full w-full grid-cols-1 gap-14 md:grid-cols-3 md:gap-0">
          <!-- Left Column -->
          <div class="flex h-full flex-row items-center justify-center gap-6 px-4 md:flex-col md:gap-14 md:px-12">
            <!-- Node 1 (Ban/Prohibited) -->
            <div class="group relative">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(249,115,22,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-orange-400 drop-shadow-[0_0_12px_rgba(249,115,22,0.4)]">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <path d="m4.9 4.9 14.2 14.2" class=""></path>
                </svg>
              </div>
            </div>

            <!-- Node 2 (Middle - Offset Right) -->
            <div class="group relative md:translate-x-16">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(234,88,12,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-orange-500 drop-shadow-[0_0_12px_rgba(234,88,12,0.4)]">
                  <path d="M12 6v12" class=""></path>
                  <path d="M17.196 9 6.804 15" class=""></path>
                  <path d="m6.804 9 10.392 6" class=""></path>
                </svg>
              </div>
            </div>

            <!-- Node 3 (Grid/Diamond) -->
            <div class="group relative">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(59,130,246,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <div class="grid grid-cols-2 gap-1.5 rotate-45">
                  <div class="h-2.5 w-2.5 rounded-[1px] bg-blue-500"></div>
                  <div class="h-2.5 w-2.5 rounded-[1px] bg-blue-500/50"></div>
                  <div class="h-2.5 w-2.5 rounded-[1px] bg-blue-500/50"></div>
                  <div class="h-2.5 w-2.5 rounded-[1px] bg-blue-500"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- Center Hub with Beam Animation -->
          <div class="flex items-center justify-center py-10 md:py-0">
            <div class="relative">
              <!-- Ambient Background Blur -->
              <div class="absolute -inset-10 rounded-full blur-3xl bg-[radial-gradient(circle,_rgba(99,102,241,0.3),_transparent_65%)]">
              </div>

              <!-- Rotating Beam Effect -->
              <div class="absolute -inset-[20%] rounded-full opacity-40 animate-beam-spin pointer-events-none" style="background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 240deg, rgba(129, 140, 248, 0.4) 360deg); mask-image: radial-gradient(transparent 55%, black 60%); -webkit-mask-image: radial-gradient(transparent 55%, black 60%);">
              </div>

              <!-- Counter-rotating Beam -->
              <div class="absolute -inset-[15%] rounded-full opacity-20 animate-beam-spin pointer-events-none" style="background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, transparent 240deg, rgba(99, 102, 241, 0.6) 360deg); animation-direction: reverse; animation-duration: 12s; mask-image: radial-gradient(transparent 55%, black 60%); -webkit-mask-image: radial-gradient(transparent 55%, black 60%);">
              </div>

              <!-- Hub Core -->
              <div class="relative flex h-[110px] w-[110px] items-center justify-center rounded-full border border-white/[0.10] bg-white/[0.04] backdrop-blur-2xl shadow-[0_40px_100px_-40px_rgba(99,102,241,0.7)] md:h-[132px] md:w-[132px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.12),_transparent_55%)]">
                </div>
                <div class="absolute inset-[10px] rounded-full border border-white/[0.10]"></div>
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400 drop-shadow-[0_0_24px_rgba(129,140,248,0.6)]">
                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
                </svg>
              </div>
            </div>
          </div>

          <!-- Right Column -->
          <div class="flex h-full flex-row items-center justify-center gap-6 px-4 md:flex-col md:gap-14 md:px-12">
            <!-- Node 4 (Command/Green) -->
            <div class="group relative">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(52,211,153,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400 drop-shadow-[0_0_12px_rgba(52,211,153,0.4)]">
                  <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" class=""></path>
                </svg>
              </div>
            </div>

            <!-- Node 5 (Middle - Offset Left) -->
            <div class="group relative md:-translate-x-16">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(236,72,153,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-pink-400 drop-shadow-[0_0_12px_rgba(236,72,153,0.4)]">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <circle cx="12" cy="12" r="6" class=""></circle>
                  <circle cx="12" cy="12" r="2" class="fill-current"></circle>
                </svg>
              </div>
            </div>

            <!-- Node 6 (Flower/Purple) -->
            <div class="group relative">
              <div class="absolute inset-0 rounded-full blur-2xl opacity-0 transition-opacity group-hover:opacity-100 bg-[radial-gradient(circle,_rgba(168,85,247,0.25),_transparent_60%)]">
              </div>
              <div class="relative flex h-[76px] w-[76px] items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] shadow-[0_20px_40px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl transition-transform duration-300 group-hover:scale-[1.06] md:h-[92px] md:w-[92px]">
                <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.08),_transparent_55%)]">
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400 drop-shadow-[0_0_12px_rgba(168,85,247,0.4)]">
                  <circle cx="12" cy="12" r="3" class=""></circle>
                  <path d="M12 16.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 1 1 4.5 4.5 4.5 4.5 0 1 1-4.5 4.5z" class="">
                  </path>
                  <path d="M12 7.5V9" class=""></path>
                  <path d="M7.5 12H9" class=""></path>
                  <path d="M16.5 12H15" class=""></path>
                  <path d="M12 16.5V15" class=""></path>
                  <path d="m8 8 1.88 1.88" class=""></path>
                  <path d="M14.12 9.88 16 8" class=""></path>
                  <path d="m8 16 1.88-1.88" class=""></path>
                  <path d="M14.12 14.12 16 16" class=""></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

      <!-- Bottom Features -->
    </section>