/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Breakpoints
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* html:focus-within {scroll-behavior: smooth;} */
body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

input, button, textarea, select {
  font: inherit;
}

ul[role=list], ol[role=list] {
  list-style: none;
  padding: 0;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture, figure, video, canvas, svg {
  display: block;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.hide {
  display: none !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Typography
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gradient-text {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Layout
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hide {
  display: none !important;
}

/* sRGB color. */
:root {
  --bright-white: rgb(255, 255, 255);
  --bright-white: lab(400% 0 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-white: lab(400% 0 0);
  }
}
:root {
  --background: hsl(48, 26%, 96%);
  --text-color: hsla(0, 0%, 16%, 1);
  --link-color: hsla(208, 92%, 28%, 1);
  --overscroll-top: hsl(51, 5%, 90%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(48, 26%, 96%);
  }
}
body {
  text-rendering: geometricPrecision;
}

html, body, body > div.wrapper {
  background: hsl(190, 3%, 58%);
  color: var(--text-color);
}

body > div.page-wrapper {
  min-height: 100vh;
  padding-bottom: 20vh;
}

nav {
  position: fixed;
  top: 1.8rem;
  z-index: 20;
  height: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav > div {
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 10rem;
  background: hsla(0, 0%, 9%, 0.3);
  backdrop-filter: blur(0.2rem);
  -webkit-backdrop-filter: blur(0.2rem);
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.2);
  display: flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
  mix-blend-mode: soft-light;
  cursor: pointer;
  transition: all 200ms;
}
nav > div *:nth-of-type(1) {
  margin-right: -0.07rem;
}
nav > div:hover {
  gap: 0.4rem;
  padding: 0 1.3rem;
}

#splash {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 65rem;
  height: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12rem;
}
#splash div.splash-sky-box {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 51rem;
  bottom: 2.5rem;
  margin: auto;
  filter: blur(0.82rem);
  background: linear-gradient(to bottom, #1E5CFF 0%, #94B5FF 100%);
  border-radius: 3.8rem;
  filter: blur(0.8rem);
  height: 10rem;
  animation: splash-build-in forwards ease-in 700ms 1200ms;
}
@keyframes splash-build-in {
  0% {
    height: 10rem;
    filter: blur(0.8rem);
  }
  100% {
    height: 51rem;
    filter: blur(0.82rem);
  }
}
#splash div.showcase {
  position: absolute;
  z-index: 10;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  top: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#splash div.showcase img {
  border-radius: 0.85rem;
  aspect-ratio: 1.4;
  object-fit: cover;
  object-position: top;
}
#splash div.showcase div > div.i {
  aspect-ratio: 1.4;
  position: relative;
  pointer-events: all;
  transition: all 300ms;
}
#splash div.showcase div > div.i:nth-of-type(even):hover {
  transform: scale(1.1) rotate(-1deg) !important;
  z-index: 10;
}
#splash div.showcase div > div.i:nth-of-type(odd):hover {
  transform: scale(1.1) rotate(1deg) !important;
  z-index: 10;
}
#splash div.showcase div:nth-of-type(1) {
  z-index: 2;
  flex-shrink: 1;
}
#splash div.showcase div:nth-of-type(1) * {
  margin-left: auto;
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(1) {
  height: 9.7rem;
  transform: rotate(9deg);
  z-index: 1;
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(1) img {
  opacity: 0;
  animation: pop-in forwards 300ms 250ms ease-in-out;
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(2) {
  height: 12rem;
  transform: rotate(-3deg);
  margin-top: -20%;
  margin-right: 30%;
  z-index: 2;
  animation: showcase-b forwards 450ms 1400ms ease-in-out;
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(2) img {
  opacity: 0;
  animation: pop-in forwards 300ms 300ms ease-in-out;
}
@keyframes showcase-b {
  from {
    margin-top: -20%;
    margin-right: 30%;
  }
  to {
    margin-top: -10%;
    margin-right: -10%;
  }
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(3) {
  height: 14rem;
  transform: rotate(3deg);
  margin-top: -35%;
  margin-left: 16%;
  z-index: 3;
  animation: showcase-c forwards 450ms 1400ms ease-in-out;
}
#splash div.showcase div:nth-of-type(1) div.i:nth-of-type(3) img {
  opacity: 0;
  animation: pop-in forwards 300ms 350ms ease-in-out;
}
@keyframes showcase-c {
  from {
    margin-top: -35%;
    margin-left: 16%;
  }
  to {
    margin-top: -10%;
    margin-left: 5%;
  }
}
#splash div.showcase div:nth-of-type(3) {
  z-index: 1;
  flex-shrink: 1;
}
#splash div.showcase div:nth-of-type(3) * {
  margin-right: auto;
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(1) {
  margin-top: -15%;
  margin-left: 0%;
  height: 12rem;
  transform: rotate(-4deg);
  animation: showcase-d forwards 450ms 1400ms ease-in-out;
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(1) img {
  opacity: 0;
  animation: pop-in forwards 300ms 500ms ease-in-out;
}
@keyframes showcase-d {
  from {
    height: 12rem;
    margin-top: -15%;
  }
  to {
    height: 9rem;
    margin-top: 0%;
  }
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(2) {
  height: 12.5rem;
  transform: rotate(4deg);
  margin-top: -27%;
  margin-left: 35%;
  z-index: 2;
  animation: showcase-e forwards 450ms 1400ms ease-in-out;
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(2) img {
  opacity: 0;
  animation: pop-in forwards 300ms 450ms ease-in-out;
}
@keyframes showcase-e {
  from {
    margin-top: -27%;
    margin-left: 35%;
  }
  to {
    margin-top: -5%;
    margin-left: -15%;
  }
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(3) {
  height: 13rem;
  transform: rotate(-4deg);
  margin-top: -35%;
  margin-left: 10%;
  z-index: 3;
  animation: showcase-f forwards 450ms 1400ms ease-in-out;
}
#splash div.showcase div:nth-of-type(3) div.i:nth-of-type(3) img {
  opacity: 0;
  animation: pop-in forwards 300ms 400ms ease-in-out;
}
@keyframes showcase-f {
  from {
    height: 13rem;
    margin-top: -35%;
    margin-left: 10%;
  }
  to {
    height: 14rem;
    margin-top: -13%;
    margin-left: -5%;
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  75% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#splash div.showcase div.spacer {
  flex-shrink: 0;
  width: 0;
  pointer-events: none;
  animation: spacer-grow forwards 800ms 1300ms cubic-bezier(0.35, 0.1, 0.29, 0.85);
}
@keyframes spacer-grow {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% - 15rem);
  }
}
@keyframes t {}
#splash a {
  position: relative;
  z-index: 5;
  font-family: "Pressura Var";
  font-weight: 500;
  font-variation-settings: "wght" 480, "wdth" 130;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 2.5rem;
  text-decoration: none;
  background: hsla(210, 59%, 76%, 0.25);
  padding: 0.3rem 0.7rem;
  border-radius: 0.9rem;
  transition: all 300ms;
  color: hsla(0, 0%, 100%, 0.8);
  opacity: 0;
  animation: slide-in forwards 500ms 2.1s ease-out;
}
#splash a:hover, #splash a:visited, #splash a:active {
  color: hsla(0, 0%, 100%, 0.8);
}
#splash a:hover {
  background: hsla(210, 100%, 79%, 0.362);
  padding: 0.3rem 1.1rem;
}
#splash div.logotype {
  position: relative;
  z-index: 5;
  width: clamp(15rem, 77vw, 27.25rem);
  padding-top: clamp(2.8rem, 9vw, 3.7rem);
  opacity: 0;
  animation: slide-in forwards 500ms 2s ease-out;
}
#splash div.logotype svg {
  width: 100%;
  height: auto;
}
#splash h2 {
  position: relative;
  z-index: 5;
  margin-top: 10rem;
  font-family: "Pressura Var";
  font-size: 1.9rem;
  font-variation-settings: "wght" 500, "wdth" 140;
  letter-spacing: -0.015em;
  color: hsl(200, 29%, 94%);
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

article {
  padding-top: 3rem;
  padding-bottom: 4rem;
  font-family: "Pressura Var";
  color: hsl(0, 0%, 12%);
  color: var(--bright-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
article *::selection {
  background: hsl(214, 97%, 53%);
  color: hsl(214, 35%, 94%);
  text-fill-color: hsl(214, 35%, 94%);
  -webkit-text-fill-color: hsl(214, 35%, 94%);
}
article h1 {
  text-align: center;
  font-size: 3.5rem;
  font-weight: 650;
  font-variation-settings: "wght" 650, "wdth" 140;
  letter-spacing: -0.04em;
}
article h2 {
  margin-top: 4rem;
  margin-bottom: 5rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 150;
  letter-spacing: -0.02em;
}
article p {
  margin: auto;
  font-size: 2.5rem;
  font-weight: 400;
  font-variation-settings: "wght" 400, "wdth" 140;
  letter-spacing: -0.015em;
  width: 33rem;
  padding: 3rem 0;
}
article p strong {
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 140;
  letter-spacing: -0.02em;
}
article ol {
  margin: auto;
  font-size: 2.5rem;
  font-weight: 400;
  font-variation-settings: "wght" 450, "wdth" 130, "ital" 0.3;
  letter-spacing: -0.015em;
  width: 20ch;
  padding-left: 0.3rem;
  list-style: none;
  counter-reset: basic-counter;
}
article ol li {
  counter-increment: basic-counter;
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
}
article ol li::before {
  content: counter(basic-counter);
  font-size: 2rem;
  font-variation-settings: "wght" 500, "wdth" 100, "ital" 0.4;
  padding: 0.3rem 0.7rem;
  height: fit-content;
  background: hsl(214, 97%, 53%);
  color: hsl(218, 70%, 88%);
  border-radius: 10rem;
}

.atc {
  max-width: 33rem;
  margin: auto;
}
.atc h1 {
  font-family: "Petrona Var";
  font-weight: 440;
  font-size: 8.4rem;
  letter-spacing: -0.03em;
  text-align: center;
  padding-bottom: 0.08em;
  margin-bottom: -1.5rem;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  text-fill-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(to bottom, hsl(0, 0%, 100%) 32%, hsl(221, 72%, 86%) 100%);
}
.atc div.stage {
  position: relative;
  padding: 4rem 0;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: hsla(0, 0%, 100%, 0.9);
}
.atc div.stage > * {
  z-index: 3;
}
.atc div.stage p {
  font-family: "Inter V", "Inter";
  font-weight: 600;
  font-size: 2rem;
  line-height: 0;
  color: hsla(0, 0%, 100%, 0.8);
}
.atc div.stage h2 {
  font-size: 5.2rem;
}
.atc div.stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: aliceblue;
  border-radius: 5.5rem;
  filter: blur(0.6rem);
}
.atc p {
  padding: 1.1rem 1rem 1.2rem;
  color: hsl(0, 0%, 98%);
  font-family: "Inter V", "Inter Var", "Inter";
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.22;
}
.atc p::selection {
  background: hsl(224, 2%, 36%);
  color: hsl(0, 0%, 98%);
  text-fill-color: hsl(0, 0%, 98%);
  -webkit-text-fill-color: hsl(0, 0%, 98%);
}

#pricing div.stage::before {
  background: linear-gradient(to bottom, hsl(245, 65%, 81%) 0%, hsl(225, 53%, 86%) 100%);
}
#pricing h1::selection, #pricing div.stage p::selection, #pricing div.stage h2::selection {
  background: hsl(243, 76%, 61%);
  color: hsl(280, 100%, 97%);
  text-fill-color: hsl(280, 100%, 97%);
  -webkit-text-fill-color: hsl(280, 100%, 97%);
}