Logic of Operation Principles Section

<section id="logic-operation"
  style="background-color: #0c0a09; color: #f2f0eb; padding: 5rem 1.5rem; position: relative; overflow: hidden; font-family: 'Inter', sans-serif;">
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Inter:wght@300;400;500&display=swap"
    rel="stylesheet">

  <style>
    @keyframes revealFlow {
      0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .logic-reveal {
      opacity: 0;
    }

    .logic-reveal.active {
      animation: revealFlow 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    }

    .delay-1 {
      animation-delay: 100ms;
    }

    .delay-2 {
      animation-delay: 200ms;
    }

    .delay-3 {
      animation-delay: 300ms;
    }

    .delay-4 {
      animation-delay: 400ms;
    }

    .delay-5 {
      animation-delay: 500ms;
    }
  </style>

  <div style="max-width: 80rem; margin: 0 auto;">
    <div class="logic-reveal" style="max-width: 42rem; margin-bottom: 6rem;">
      <h2
        style="font-family: 'DM Sans', sans-serif; font-size: 2.25rem; font-weight: 300; letter-spacing: -0.05em; color: #ffffff; margin-bottom: 2rem; line-height: 1.2;">
        The Logic of Operation
      </h2>
      <p style="font-size: 1.125rem; line-height: 1.6; color: #a8a29e; letter-spacing: -0.02em;">
        True capability is not merely a tool; it is a discipline. To bring artificial intelligence to its highest
        potential, we adhere to a set of immutable laws that govern our engineering and deployment.
      </p>
    </div>

    <div style="display: flex; flex-direction: column; width: 100%;">
      <!-- Principle 01 -->
      <div class="logic-reveal delay-1"
        style="display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid #292524; padding: 2rem 0; transition: background-color 0.3s;"
        onmouseover="this.style.backgroundColor='rgba(41,37,36,0.3)'"
        onmouseout="this.style.backgroundColor='transparent'">
        <div style="flex: 0 0 33.333%; display: flex; align-items: baseline; gap: 2rem;">
          <span style="font-family: monospace; color: #57534e; font-size: 0.875rem;">01</span>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Precision First</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #78716c; line-height: 1.6; font-size: 1rem;">
            In the realm of data, accuracy is the only currency. We prioritize exactitude over speed, ensuring that
            every inference is grounded in verifiable reality.
          </p>
        </div>
      </div>

      <!-- Principle 02 -->
      <div class="logic-reveal delay-2"
        style="display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid #292524; padding: 2rem 0; transition: background-color 0.3s;"
        onmouseover="this.style.backgroundColor='rgba(41,37,36,0.3)'"
        onmouseout="this.style.backgroundColor='transparent'">
        <div style="flex: 0 0 33.333%; display: flex; align-items: baseline; gap: 2rem;">
          <span style="font-family: monospace; color: #57534e; font-size: 0.875rem;">02</span>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Transparency by Design</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #78716c; line-height: 1.6; font-size: 1rem;">
            Black boxes have no place in critical infrastructure. We architect systems that are explainable, traceable,
            and accountable to their human operators.
          </p>
        </div>
      </div>

      <!-- Principle 03 -->
      <div class="logic-reveal delay-3"
        style="display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid #292524; padding: 2rem 0; transition: background-color 0.3s;"
        onmouseover="this.style.backgroundColor='rgba(41,37,36,0.3)'"
        onmouseout="this.style.backgroundColor='transparent'">
        <div style="flex: 0 0 33.333%; display: flex; align-items: baseline; gap: 2rem;">
          <span style="font-family: monospace; color: #57534e; font-size: 0.875rem;">03</span>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Human Amplification</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #78716c; line-height: 1.6; font-size: 1rem;">
            Our intelligence is designed to extend human capability, not replace it. We build tools that handle the
            computation so you can handle the vision.
          </p>
        </div>
      </div>

      <!-- Principle 04 -->
      <div class="logic-reveal delay-4"
        style="display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid #292524; padding: 2rem 0; transition: background-color 0.3s;"
        onmouseover="this.style.backgroundColor='rgba(41,37,36,0.3)'"
        onmouseout="this.style.backgroundColor='transparent'">
        <div style="flex: 0 0 33.333%; display: flex; align-items: baseline; gap: 2rem;">
          <span style="font-family: monospace; color: #57534e; font-size: 0.875rem;">04</span>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Security as Axiom</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #78716c; line-height: 1.6; font-size: 1rem;">
            The fortress must be impregnable. We integrate security at the neural level, protecting your proprietary
            data with the rigor of a nation-state.
          </p>
        </div>
      </div>

      <!-- Principle 05 -->
      <div class="logic-reveal delay-5"
        style="display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid #292524; padding: 2rem 0; transition: background-color 0.3s;"
        onmouseover="this.style.backgroundColor='rgba(41,37,36,0.3)'"
        onmouseout="this.style.backgroundColor='transparent'">
        <div style="flex: 0 0 33.333%; display: flex; align-items: baseline; gap: 2rem;">
          <span style="font-family: monospace; color: #57534e; font-size: 0.875rem;">05</span>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Iterative Evolution</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #78716c; line-height: 1.6; font-size: 1rem;">
            Static models decay. We build adaptive systems that learn from new inputs, ensuring your intelligence grows
            sharper with every interaction.
          </p>
        </div>
      </div>

      <!-- Highlighted Feature -->
      <div class="logic-reveal delay-5"
        style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; background-color: rgba(41,37,36,0.5); border-radius: 0.5rem; padding: 1.5rem 1rem; transition: all 0.3s;">
        <div style="flex: 0 0 33.333%; display: flex; align-items: center; gap: 2rem;">
          <div
            style="height: 1.5rem; width: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: #44403c; color: #d6d3d1;">
            <iconify-icon icon="solar:global-linear" style="font-size: 0.875rem;"></iconify-icon>
          </div>
          <span style="font-weight: 500; letter-spacing: -0.02em; color: #ffffff;">Intelligence Network</span>
        </div>
        <div style="flex: 1 1 0%;">
          <p style="color: #a8a29e; line-height: 1.6; font-size: 1rem;">
            Access to a decentralized network of insights, allowing your enterprise to operate with the collective
            wisdom of the global market.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.logic-reveal').forEach(el => observer.observe(el));
        })();
  </script>
</section>