<template>
  <section class="bg-card">

    <div class="container py-24">

      <div class="max-w-3xl mx-auto text-center mb-16">

        <h2 class="text-3xl md:text-4xl font-bold mb-6">
          Built on Peer-to-Peer Infrastructure
        </h2>

        <p class="text-xl text-muted-foreground leading-relaxed">
          NoSys combines distributed networking, cryptographic identity,
          modular runtimes, and decentralized coordination systems.
        </p>

      </div>

      <div
        class="max-w-5xl mx-auto rounded-3xl border bg-background
               p-8 md:p-12"
      >

        <div class="space-y-6 text-center">

          <div class="p-5 rounded-2xl border bg-card">
            Applications & Modules
          </div>

          <div class="text-muted-foreground">↓</div>

          <div class="p-5 rounded-2xl border bg-card">
            NoSys Runtime
          </div>

          <div class="text-muted-foreground">↓</div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

            <div class="p-4 rounded-xl border bg-card">
              Networking
            </div>

            <div class="p-4 rounded-xl border bg-card">
              Identity
            </div>

            <div class="p-4 rounded-xl border bg-card">
              Rendezvous
            </div>

          </div>

          <div class="text-muted-foreground">↓</div>

          <div class="p-5 rounded-2xl border bg-card">
            Peer-to-Peer Network
          </div>

        </div>

      </div>

    </div>

  </section>
</template>