---
title: Safing Privacy Network
layout: page
---

<header class="h-screen pt-32">
  <img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
  <div class="flex items-center h-full">
    <div class="container mx-auto sm:px-8 sm:px-0">
      <div class="container mx-auto px-8 sm:px-0 flex">
        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
          <div class="lg:pb-0 m0-0 lg:mr-40 self-center">
            <span style="font-size: 12rem; font-weight: 800; margin-top: -5rem; margin-left: 6rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
              <img src="{{ site.img_url }}shapes/circle-md.png" alt="">
            </span>
            <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md max-w-full max-h-auto transform scale-70" height="1220" width="1220" playsinline="" preload="auto" src="{{ site.assets_url }}video/interim.mp4"
              controls muted loop></video>
            <span style="font-size: 12rem; font-weight: 800; margin-top: -4.5rem; margin-left: -3rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
              <img src="{{ site.img_url }}shapes/circle-sm.png" alt="">
            </span>

          </div>
          <div class="inline-block text-center md:text-left">
            <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
              Privacy Network
            </h2>
            <p class="text-md opacity-50 max-w-4xl">
              it's the foundation we build our products on. We make sacrifices on
              all other fronts to protect your privacy and push the limits of
              technology to do so.
            </p>
            <div class="py-10 sm:py-10 md:flex text-center">
              <a href="#pricing">
                <button type="button" style="background-color: #6188ff;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
                  <span class="pr-3 text-2xl wiggle">🎉</span>Pre-order SPN
                </button>
              </a>
              <br>
              <a href="{{ site.portmaster_url }}" class="transition duration-150 ease-in-out hover:opacity-100 self-center md:pl-8 uppercase opacity-50 text-xs font-bold">Built on the Portmaster</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<section style="margin-top: 3rem;">
  <div class="text-center pb-48">
    <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
      SPN Features
    </h2>
    <p class="text-md opacity-50 w-auto mx-auto max-w-lg">
      Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
    </p>
  </div>
  <div class="items-center h-full">
    <div class="container mx-auto px-8 sm:px-0 flex">
      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
        <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
        </div>
        <div class="inline-block max-w-lg">
          <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold py-10 lg:w-auto">
            End-to-End Metadata Encryption
          </h2>
          <p class="text-md opacity-50 max-w-lg">
            Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
            and VPNs from collecting all your personal [meta] data. Secure
            your whole computer, not only your web-browser.
          </p>
        </div>
        <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
        </div>
      </div>
    </div>
    <div class="items-center h-full mt-64">
      <div class="container mx-auto px-8 sm:px-0 flex">
        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex  items-center">
          <div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
            <img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
              Onion Layer Encryption
            </h2>
            <p class="text-md opacity-50 max-w-lg">
              The Portmaster enables you to protect your data on your device.
              You are back in charge of your outgoing connections: you choose
              what data you share and what data stays private.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="items-center h-full mt-64">
      <div class="container mx-auto px-8 sm:px-0 flex">
        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto  items-center">
          <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
            <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl  tracking-tight font-extrabold leading-none py-10">
              Distributed Multi Identity Network
            </h2>
            <p class="text-md opacity-50 max-w-lg">
              Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
              and VPNs from collecting all your personal [meta] data. Secure
              your whole computer, not only your web-browser.
            </p>
          </div>
          <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
            <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="items-center h-full mt-64">
      <div class="container mx-auto px-8 sm:px-0 flex">
        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex  items-center">
          <div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
            <img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
              No Kill Switch Needed
            </h2>
            <p class="text-md opacity-50 max-w-lg">
              The Portmaster enables you to protect your data on your device.
              You are back in charge of your outgoing connections: you choose
              what data you share and what data stays private.
            </p>
            <div class="py-10 flex">
              <a href="{{ site.portmaster_url }}">
                <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
                  Discover the Portmaster
                </button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 13rem;">
  <div class="items-center h-full">
    <div id="Pricing">
      <div class="max-w-full mx-auto px-4 sm:px-6">
        <div class="py-12 bg-white">
          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8" id="pricing">
            <div class="text-center">
              <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
                Pre-order the SPN
              </h2>
              <p class="text-md opacity-50">
                Get your hands on thes pe-orders while you can.
              </p>
            </div>
            <div class="mt-32">
              <ul class="md:grid md:grid-cols-2 lg:grid-cols-2 md:col-gap-8 md:row-gap-10 max-w-4xl mr-auto ml-auto">
                <li class="text-center md:text-left">
                  <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
                    <span class="text-2xl">Early Adopter</span>
                    <div class="block pb-6">
                      <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 ">€9.90</h1>
                      <span class="text-xl pl-1 opacity-50 line-through">€11.90</span>
                    </div>
                    <span class="font-extrabold pt-10 text-md">Includes:</span>
                    <ul class="">
                      <li class="pt-4 opacity-50">Behind the scenes</li>
                      <li class="pt-4 opacity-50">1 month subscription</li>
                    </ul>
                    <div class="pt-32">
                      <a href="{{ site.account_server_url }}pricing">
                        <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
                          Buy
                        </button>
                      </a>
                    </div>
                  </div>
                </li>
                <li class="mt-10 md:mt-0 text-center md:text-left">
                  <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
                    <span class="text-2xl">Early Adopter</span>
                    <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 pb-6">€2,000</h1>
                    <span class="font-extrabold pt-10 text-md">Includes:</span>
                    <ul>
                      <li class="pt-4 opacity-50">Behind the scenes</li>
                      <li class="pt-4 opacity-50">Lifetime subscription</li>
                    </ul>
                    <div class="pt-40">
                      <a href="{{ site.account_server_url }}pricing">
                        <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
                          Buy
                        </button>
                      </a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 6rem;" class="pb-48 ">
  <div class="bg-white">
    <div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
      <div class="text-center pb-12">
        <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
          FAQ
        </h2>
        <p class="text-md opacity-50">
          Got a qustion? well, it might be in here already.
        </p>
      </div>
      <div class="mt-6 pt-10 text-center md:text-left">
        <dl class="md:grid md:grid-cols-2 md:gap-8">
          <div>
            <div>
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
            <div class="mt-12">
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
            <div class="mt-12">
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
          </div>
          <div class="mt-12 md:mt-0">
            <div>
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  Sign language. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
            <div class="mt-12">
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
            <div class="mt-12">
              <h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
              <dd class="mt-2">
                <p class="text-md opacity-50">
                  He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
                </p>
              </dd>
            </div>
          </div>
        </dl>
      </div>
    </div>
  </div>
</section>