---
layout: page
title: Safing
---

<header class="h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url({{ site.img_url }}header.png)">
  <div class="flex items-center h-full">
    <div class="container mx-auto px-8 sm:px-0">
      <div class="text-center">
        <h2 class="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl md:mx-auto md:w-2/3">
          We <span style="color: #6188ff;">fight surveillance</span> because we <span style="color: #6188ff;">love freedom</span>.
        </h2>
        <p class="pt-10 sm:pt-5 text-base text-black opacity-50 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-8 md:text-xl">
          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="pt-12 sm:mt-8 sm:flex sm:justify-center sm:pt-5">
          <div class="shake-horizontal">
            <a href="#tools" class="transform hover:scale-95 w-full flex justify-center px-8 py-4 border border-transparent leading-5 rounded-full text-white bg-black transition duration-150 ease-in-out md:text-sm md:px-10 uppercase">
              discover our tools
            </a>
          </div>
        </div>
        <div class="justify-end pt-16 max-w-3xl mx-auto">
          <span class="opacity-25">Supported by</span>
          <div class="flex grid grid-flow-col justify-between my-3 opacity-75 items-center">
            <a href="">
              <img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/esa_dark.png" alt="">
            </a>
            <a href="">
              <img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/excellence_dark.png" alt="">
            </a>
            <a href="">
              <img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/ffg_dark.png" alt="">
            </a>
            <a href="">
              <img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/netidee_small_dark.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
</header>
<section style="margin-top: 4rem;" id="tools">
  <div class="flex 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:px-0 lg:flex">
        <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
          <div class="inline-block max-w-3xl text-center md:text-left">
            <h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">What are the tools we make?</h2>
            <p class="text-md opacity-50">
              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>
        <div class="mt-10 self-center md:ml-0 lg:ml-16">
          <ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
            <li class="pt-8 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
              <div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
                <svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <g fill="none">
                    <path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 11.182c0 4.541-3.413 8.787-8 9.818-4.587-1.031-8-5.277-8-9.818V7.615c0-.812.491-1.544 1.243-1.851l5-2.046c1.126-.461 2.388-.461 3.514 0l5 2.046C19.509 6.072 20 6.803 20 7.615v3.567z" />
                    <path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.25 10.125l-3.75 3.75-2.25-2.25" />
                  </g>
                </svg>
              </div>
              <div class="mt-4 ml-4">
                <h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
                <p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
                  Stay private while surfing the
                  Web with you are in charge of
                  where.
                </p>
              </div>
            </li>
            <li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
              <div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto ">
                <svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <g stroke-linecap="round" stroke-width="1.8" stroke="#446eed" fill="none" stroke-linejoin="round">
                    <path d="M13.7678 10.9822c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M19.2538 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M18 12.25c1.533 0 3 .533 4 1.333M8.28177 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M2 13.583c1-.8 2.467-1.333 4-1.333M16.591 19.75c-1.165-.901-2.839-1.5-4.591-1.5-1.752 0-3.426.599-4.591 1.5" />
                  </g>
                </svg>
              </div>
              <div class="mt-4 ml-4">
                <h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
                <p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
                  Stay private while surfing the
                  Web with you are in charge of
                  where.
                </p>
              </div>
            </li>
            <li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
              <div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
                <svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
                    stroke-linejoin="round" />
                </svg>
              </div>
              <div class="mt-4 ml-4">
                <h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
                <p class="mt-4 mt-2 text-base leading-6 opacity-50  max-w-sm m-auto">
                  Stay private while surfing the
                  Web with you are in charge of
                  where.
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 20rem;">
  <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-48 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">
          <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">01</span>
          <h2 class="text-5xl  tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</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 class="py-10 lg:flex text-center sm:text-left inline-block">
            <button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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">
              <a href="/spn.html">Discover the spn</a>
            </button>
            <a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
          </div>
        </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 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">
          <div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
            <img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">02</span>
            <h2 class="text-5xl  tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All Around System Privacy</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 class="py-10 md:flex text-center md:text-left inline-block">
              <button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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">
                <a href="/portmaster.html">Discover the Portmaster</a>
              </button>
              <a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center  uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 17rem;">
  <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 text-center lg:text-left">
        <div class="lg:w-2/3">
          <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10">You be the judge</h2>
        </div>
        <div class="self-center">
          <p class="text-md opacity-50 w-auto mx-auto md:w-2/3">
            Review and inspect everything we do and say: every page, every
            podcast, every line of code, every strategic decision. If you do like
            what we do, please consider helping us by contributing to the
            Safing community.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 20rem;">
  <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">
        <div class="py-12 bg-white">
          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
              <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">Follow Us</span>
              <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">Blogs & Podcasts</h2>
            </div>
            <div class="mt-32">
              <ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10">
                <li>
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <a href="">
                      <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                      <div class="pt-6">
                        <span class="opacity-25">4 FEB 2020</span>
                        <p>The Two Steps it takes</p>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="mt-10 md:mt-0">
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <a href="">
                      <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                      <span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
                        <button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold  text-white">
                          <svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
                            <path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
                        </button>
                      </span>
                      <div class="pt-6">
                        <span class="opacity-25">4 FEB 2020</span>
                        <p>The Two Steps it takes</p>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="mt-10 md:mt-0">
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <a href="">
                      <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                      <div class="pt-6">
                        <span class="opacity-25">4 FEB 2020</span>
                        <p>The Two Steps it takes</p>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="mt-10 md:mt-0">
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <a href="">
                      <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                      <span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
                        <button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold  text-white">
                          <svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
                            <path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
                        </button>
                      </span>
                      <div class="pt-6">
                        <span class="opacity-25">4 FEB 2020</span>
                        <p>The Two Steps it takes</p>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="mt-10 md:mt-0">
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <a href="">
                      <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                      <span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
                        <button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold  text-white">
                          <svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
                            <path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
                        </button>
                      </span>
                      <div class="pt-6">
                        <span class="opacity-25">4 FEB 2020</span>
                        <p>The Two Steps it takes</p>
                      </div>
                    </a>
                  </div>
                </li>
                <li class="mt-10 md:mt-0">
                  <div class="block transform hover:scale-95 duration-150 ease-in-out">
                    <img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
                    <div class="pt-6">
                      <span class="opacity-25">4 FEB 2020</span>
                      <p>The Two Steps it takes</p>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="py-20 text-center">
                <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">
                  <a href="/blogpod.html">Show me more!</a>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .shake-horizontal {
    -webkit-animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both;
    animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
  }

  @-webkit-keyframes shake-horizontal {

    0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px)
    }

    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px)
    }

    80% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px)
    }

    90% {
      -webkit-transform: translateX(-8px);
      transform: translateX(-8px)
    }
  }

  @keyframes shake-horizontal {

    0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px)
    }

    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px)
    }

    80% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px)
    }

    90% {
      -webkit-transform: translateX(-8px);
      transform: translateX(-8px)
    }
  }

  .spin {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .heart {
    animation: 1.8s infinite beatHeart;
  }

  @keyframes beatHeart {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.1);
    }

    40% {
      transform: scale(1);
    }

    60% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  #menu-toggle:checked+#menu {
    display: block;
  }
</style>