Field Deployment Section with Dual CTAs

<section class="bg-[#f4f6f3] text-[#2d322f] py-28 px-6 antialiased" style="font-family: 'Inter', sans-serif;">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&family=Playfair+Display:ital@0;1&display=swap"
    rel="stylesheet" />

  <style>
    .font-display {
      font-family: "Oswald", sans-serif;
    }

    .font-accent {
      font-family: "Playfair Display", serif;
    }
  </style>

  <div class="max-w-3xl mx-auto text-center">
    <!-- Micro Divider -->
    <div class="w-16 h-px bg-[#3F556B]/40 mx-auto mb-10"></div>

    <!-- Eyebrow -->
    <p class="text-[11px] font-semibold uppercase tracking-[0.35em] text-[#2d322f]/60 mb-6">
      Field Deployment
    </p>

    <!-- Headline -->
    <h2 class="text-4xl md:text-5xl font-display leading-tight mb-8 uppercase tracking-tight">
      Built for movement beyond
      <br class="hidden md:block" />
      maintained ground.
    </h2>

    <!-- Body -->
    <p class="text-lg text-[#2d322f]/70 leading-relaxed mb-12 max-w-[55ch] mx-auto">
      AEX designs modular outdoor systems engineered for field athletes
      operating in variable terrain. Every element exists to reduce
      friction, manage load, and extend endurance.
    </p>

    <!-- System Categories -->
    <div class="text-[11px] font-semibold uppercase tracking-[0.3em] text-[#3F556B] mb-12">
      Footwear / Shell Systems / Load Architecture / Thermal Layers
    </div>

    <!-- CTAs -->
    <div class="flex flex-col md:flex-row items-center justify-center gap-6">
      <!-- Primary -->
      <a href="#inventory"
        class="bg-[#2d322f] text-white px-10 py-4 text-xs font-semibold uppercase tracking-widest hover:bg-[#3F556B] transition-colors duration-300"
        style="text-decoration: none;">
        Enter the Armory
      </a>

      <!-- Secondary -->
      <a href="#inventory"
        class="text-xs font-semibold uppercase tracking-widest text-[#2d322f]/70 hover:text-[#3F556B] transition-colors"
        style="text-decoration: none;">
        View Inventory →
      </a>
    </div>
  </div>
</section>