---
layout: page
redirect_from:
- /technology/
---

<header class="h-screen">
  <div class="flex items-center h-screen">
    <div class="container mx-auto px-8 sm:px-0 pt-64 lg:mt-64">
      <div class="text-center">
        <h2 class="text-5xl sm:text-6xl tracking-tight font-extrabold leading-none py-10">
          The Foundation.
        </h2>
        <div class="self-center">
          <p class="text-md opacity-50 max-w-lg mx-auto">
            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 block mx-auto">
            <a href="#downloads">
              <button type="button" style="background-color: #000;" class="mb-5 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">
                download the pre-alpha
              </button>
            </a>
          </div>
        </div>
      </div>
      <div class="pt-24 lg:pt-0">
        <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 lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" autoplay controls muted loop></video>
      </div>
      <span style="margin-top: -45rem; margin-left: -8rem; z-index: -1;" class="absolute transform scale-50 lg:scale-105 xl:scale-150 bg-cover opacity-75 hidden lg:block">
        <img src="{{ site.img_url }}page-specific/portmaster/wave.png" alt="">
      </span>
    </div>
  </div>
</header>
<section style="margin-top: 13rem;" class="lg:pt-56">
  <div class="text-center pb-40 lg: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/portmaster/monitor.gif" alt="">
        </div>
        <div class="inline-block max-w-lg">
          <h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
            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>
        <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
          <img src="{{ site.img_url }}page-specific/portmaster/monitor.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-40 self-center">
            <img src="{{ site.img_url }}page-specific/portmaster/filter.png" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
              Auto Filter Systems Traffic
            </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/portmaster/tls.png" alt="">
          </div>
          <div class="inline-block max-w-lg">
            <h2 style="line-height: 60px;" class="text-5xl  tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
              System Wide DNS-over-TLS
            </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 flex">
              <a href="#">
                <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">
                  TLS vs Https comparison
                </button>
              </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/portmaster/tls.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/portmaster/modular.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 ">
              Modular Design From The Start
            </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.spn_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 SPN
                </button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="margin-top: 13rem;" class="pb-40">
  <div class="items-center h-full">
    <div class="">
      <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">
            <div class="text-center">
              <h2 id="downloads" class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
                Downloads
              </h2>
              <p class="text-md opacity-50">
                Here you can download the latest stable builds of the portmaster.
              </p>
            </div>
            <div>
              <div class="text-center lg:text-left lg:inline-flex items-center mt-16 mb-16 spn-shadow p-10 rounded-lg">
                <div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto mr-auto ml-auto">
                  <svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M0 0h24v24H0z" />
                      <path stroke="#ddae7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 21v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9z" />
                      <path stroke="#ddae7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 17v-5h-1M11.749 8c-.138 0-.25.112-.249.25 0 .138.112.25.25.25s.25-.112.25-.25-.112-.25-.251-.25" />
                    </g>
                  </svg>
                </div>
                <p class="pt-5 lg:pt-0 md:pl-10 md:pr-10 text-sm opacity-75">
                  Please note that the Portmaster is still in an <span class="font-extrabold">early development stage.</span> It is functional, but has not yet been
                  tested widely. Thus, we currently expect you to have the technical knowledge to troubleshoot and <span class="font-extrabold">fix
                    issues on your end by yourself.</span>
                </p>
              </div>
              <div class="py-10 block grid lg:flex lg:grid-cols-3 gap-10 justify-center">
                <a href="#" class="flex items-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">
                    <svg class="h-4 w-4 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88">
                      <path fill="#fff" d="m0 12.402 35.687-4.8602.0156 34.423-35.67.20313zm35.67 33.529.0277 34.453-35.67-4.9041-.002-29.78zm4.3261-39.025 47.318-6.906v41.527l-47.318.37565zm47.329 39.349-.0111 41.34-47.318-6.6784-.0663-34.739z" />
                    </svg>
                    Install portmaster
                  </button>
                </a>
                <a href="#" class="flex items-center">
                  <button type="button" style="background-color: #000;" class="lg:ml-3 lg:mr-3 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">
                    <svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
                      <circle fill="#fff" cy="50" cx="50" r="45" />
                      <circle fill="none" stroke="#000" stroke-width="8.55" cx="50" cy="50" r="21.825" />
                      <g id="friend">
                        <circle fill="#fff" cx="19.4" cy="50" r="8.4376" />
                        <path stroke="#fff" stroke-width="3.2378" d="M67,50H77" />
                        <circle fill="#000" cx="19.4" cy="50" r="6.00745" />
                      </g>
                      <use xlink:href="#friend" transform="rotate(120,50,50)" />
                      <use xlink:href="#friend" transform="rotate(240,50,50)" />
                    </svg>
                    Install portmaster
                  </button>
                </a>
                <button type="button" style="background-color: #000;" class="not-allowed opacity-50 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 class="not-allowed flex items-center">
                    <svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1187.198">
                      <path fill="#fff" d="M979.04184 925.18785c-17.95397 41.47737-39.20563 79.65705-63.82824 114.75895-33.56298 47.8528-61.04356 80.9761-82.22194 99.3698-32.83013 30.192-68.00529 45.6544-105.67203 46.5338-27.04089 0-59.6512-7.6946-97.61105-23.3035-38.08442-15.5358-73.08371-23.2303-105.08578-23.2303-33.56296 0-69.55888 7.6945-108.06101 23.2303-38.5608 15.6089-69.62484 23.7432-93.37541 24.5493-36.12049 1.5389-72.1237-14.3632-108.06101-47.7796-22.93711-20.0059-51.62684-54.3017-85.99592-102.8874-36.875274-51.88328-67.191862-112.04745-90.942422-180.639C12.750995 781.70252 0 709.95986 0 640.50361c0-79.5618 17.191859-148.18267 51.626869-205.68673 27.062885-46.18935 63.066121-82.62496 108.126941-109.37275 45.06086-26.74775 93.74914-40.37812 146.18212-41.25019 28.68971 0 66.3125 8.8744 113.06613 26.31542 46.62174 17.49964 76.55727 26.37404 89.68198 26.37404 9.8124 0 43.06758-10.37669 99.4431-31.06405 53.31237-19.18512 98.30724-27.12887 135.16787-23.99975 99.8828 8.06098 174.92313 47.43518 224.82789 118.37174-89.33023 54.12578-133.51903 129.93556-132.63966 227.18753.8061 75.75115 28.28668 138.78795 82.2952 188.8393 24.47603 23.23022 51.81008 41.18421 82.22186 53.93522-6.59525 19.12648-13.557 37.44688-20.95846 55.03446zM749.96366 23.751237c0 59.37343-21.69138 114.810233-64.92748 166.121963-52.17652 60.99961-115.28658 96.24803-183.72426 90.68597-.87204-7.12298-1.37769-14.61967-1.37769-22.49743 0-56.99843 24.81315-117.99801 68.87738-167.873453 21.99909-25.25281 49.978-46.25018 83.90738-63.00018 33.85608-16.50008 65.88014-25.6249796 95.99884-27.18757966.87944 7.93730006 1.24583 15.87509966 1.24583 23.74993966z" />
                    </svg>
                    Install portmaster
                  </a>
                </button>
              </div>
              <div>
                <div class="text-center lg:text-left lg:inline-flex items-center mt-16 mb-16 spn-shadow p-10 rounded-lg ml-0 mr-0 md:ml-32 md:mr-32">
                  <div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto mr-auto ml-auto">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <g fill="none">
                        <path d="M0 0h24v24H0z" />
                        <path stroke="#e28d8d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 13.12V9.38M11.999 16.125c-.138 0-.25.112-.249.25 0 .138.112.25.25.25s.25-.112.25-.25-.112-.25-.251-.25" />
                        <path stroke="#e28d8d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M14.029 4.139l7.659 13.404c.89 1.558-.235 3.497-2.029 3.497H4.341c-1.795 0-2.92-1.939-2.029-3.497L9.971 4.139c.897-1.571 3.161-1.571 4.058 0z" />
                      </g>
                    </svg>
                  </div>
                  <p class="pt-5 lg:pt-0 md:pl-10 md:pr-10 text-sm opacity-75">
                    <span class="font-extrabold">If you don’t know what your doing dont download any of these.</span>
                    There are weird bugs and issues Support is only done by the community and not safing.
                  </p>
                </div>
                <div class="py-10 block grid lg:flex lg:grid-cols-3 gap-10 justify-center">
                  <a href="#" class="flex items-center">
                    <button type="button" style="background-color: #000;" class="opacity-50 hover:opacity-100 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">
                      <svg class="h-5 w-5 mr-3" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z" />
                      </svg>
                      Windows 7, 8
                    </button>
                  </a>
                  <a href="#" class="flex items-center">
                    <button type="button" style="background-color: #000;" class="opacity-50 hover:opacity-100 lg:ml-3 lg:mr-3 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">
                      <svg class="h-5 w-5 mr-3" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z" />
                      </svg>
                      Linux 2.4+
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>