@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Geist", system-ui, sans-serif;
  background: #061216;
  color: #f3fbfa;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 18rem;
  background:
    radial-gradient(circle at 50% 35%, rgb(25 107 112 / 32%) 0, rgb(6 18 22 / 0%) 31rem),
    linear-gradient(145deg, #071a1e 0%, #030b0e 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: min(42rem, 70vw);
  aspect-ratio: 1;
  border: 1px solid rgb(97 235 222 / 10%);
  border-radius: 50%;
  content: "";
  filter: blur(0.2px);
}

body::before {
  top: -32rem;
  left: -20rem;
  box-shadow: 0 0 8rem rgb(37 210 195 / 8%);
}

body::after {
  right: -24rem;
  bottom: -34rem;
  box-shadow: 0 0 8rem rgb(37 210 195 / 6%);
}

.closing {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  gap: clamp(4.5rem, 13vh, 8.5rem);
  width: min(100% - 3rem, 68rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 6rem);
  text-align: center;
}

@media (min-width: 34.01rem) {
  body {
    background:
      radial-gradient(ellipse 72vw 68vh at 50% 44%, rgb(25 107 112 / 30%) 0%, rgb(18 83 88 / 17%) 38%, rgb(6 18 22 / 0%) 78%),
      linear-gradient(145deg, #071a1e 0%, #030b0e 100%);
  }
}

.brand-lockup {
  display: grid;
  justify-items: center;
}

.brand {
  display: block;
  width: clamp(15rem, 42vw, 26rem);
  height: auto;
}

.campaign {
  margin: 0 0 1.15rem;
  color: #63d6cc;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.65rem, 7vw, 6rem);
  font-weight: 530;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

@media (max-width: 34rem) {
  .closing {
    gap: 4.25rem;
    width: min(100% - 2rem, 68rem);
  }

  .brand {
    width: min(17rem, 82vw);
  }

  h1 {
    font-size: clamp(2.6rem, 14vw, 4.25rem);
  }
}