:root, .light, .light-theme {
  --green-1: #f7fcf9;
  --green-2: #f0f8f3;
  --green-3: #dff5e8;
  --green-4: #cdefdc;
  --green-5: #b8e8cd;
  --green-6: #9eddba;
  --green-7: #78cea2;
  --green-8: #32ba80;
  --green-9: #2ab57b;
  --green-10: #11a970;
  --green-11: #007f4a;
  --green-12: #123d29;
  --green-a1: #30cb6305;
  --green-a2: #12933d0c;
  --green-a3: #05b74d1d;
  --green-a4: #02b24e2f;
  --green-a5: #04af4f45;
  --green-a6: #02a74b5f;
  --green-a7: #02a45086;
  --green-a8: #01a962cd;
  --green-a9: #01a761d5;
  --green-a10: #00a366ee;
  --green-a11: #007f4a;
  --green-a12: #002e19ed;
  --green-contrast: #fff;
  --green-surface: #eef6f1cc;
  --green-indicator: #2ab57b;
  --green-track: #2ab57b;
  --slate-1: #fcfcfd;
  --slate-2: #f9f9fb;
  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;
  --slate-5: #e0e1e6;
  --slate-6: #d9d9e0;
  --slate-7: #cdced6;
  --slate-8: #b9bbc6;
  --slate-9: #8b8d98;
  --slate-10: #80838d;
  --slate-11: #60646c;
  --slate-12: #1c2024;
  --slate-dark-1: #111113;
  --slate-dark-2: #18191b;
  --slate-dark-3: #212225;
  --slate-dark-4: #272a2d;
  --slate-dark-5: #2e3135;
  --slate-dark-6: #363a3f;
  --slate-dark-7: #43484e;
  --slate-dark-8: #5a6169;
  --slate-dark-9: #696e77;
  --slate-dark-10: #777b84;
  --slate-dark-11: #b0b4ba;
  --slate-dark-12: #edeef0;
  --indigo-1: #fdfdfe;
  --indigo-2: #f7f9ff;
  --indigo-3: #edf2fe;
  --indigo-4: #e1e9ff;
  --indigo-5: #d2deff;
  --indigo-6: #c1d0ff;
  --indigo-7: #abbdf9;
  --indigo-8: #8da4ef;
  --indigo-9: #3e63dd;
  --indigo-10: #3358d4;
  --indigo-11: #3a5bc7;
  --indigo-12: #1f2d5c;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --green-1: oklch(98.6% 0.0057 160);
      --green-2: oklch(97.3% 0.011 160);
      --green-3: oklch(95% 0.0277 160);
      --green-4: oklch(92.3% 0.0441 160);
      --green-5: oklch(88.9% 0.0614 160);
      --green-6: oklch(84.6% 0.081 160);
      --green-7: oklch(78.6% 0.1064 160);
      --green-8: oklch(70.3% 0.1439 160);
      --green-9: oklch(68.7% 0.1439 160);
      --green-10: oklch(64.9% 0.1439 160);
      --green-11: oklch(51.6% 0.1439 160);
      --green-12: oklch(32.4% 0.0597 160);
      --green-a1: color(display-p3 0.0078 0.6667 0.0118 / 0.012);
      --green-a2: color(display-p3 0.0078 0.5059 0.1098 / 0.04);
      --green-a3: color(display-p3 0.0078 0.6275 0.2157 / 0.096);
      --green-a4: color(display-p3 0.0078 0.6157 0.2118 / 0.156);
      --green-a5: color(display-p3 0.0078 0.6157 0.2118 / 0.228);
      --green-a6: color(display-p3 0.0039 0.5765 0.2 / 0.319);
      --green-a7: color(display-p3 0.0039 0.5608 0.2196 / 0.443);
      --green-a8: color(display-p3 0 0.549 0.2353 / 0.622);
      --green-a9: color(display-p3 0 0.5333 0.2314 / 0.642);
      --green-a10: color(display-p3 0 0.502 0.2275 / 0.694);
      --green-a11: color(display-p3 0 0.3529 0.1216 / 0.781);
      --green-a12: color(display-p3 0 0.1333 0.0588 / 0.881);
      --green-contrast: #fff;
      --green-surface: color(display-p3 0.9412 0.9647 0.9529 / 0.8);
      --green-indicator: oklch(68.7% 0.1439 160);
      --green-track: oklch(68.7% 0.1439 160);
    }
  }
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/poppins-v24-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/poppins-v24-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/poppins-v24-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/poppins-v24-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
html {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  color: var(--slate-11);
  font-size: 1rem;
  line-height: 1.5em;
}

body {
  background: #E1E9FF;
  background: linear-gradient(180deg, rgb(225, 233, 255) 0%, rgb(253, 253, 254) 100%);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--indigo-11);
}
@media (min-width: 768px) {
  h1 {
    font-size: 4rem;
  }
}

main {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 120px);
}

.bg-img {
  display: none;
}
@media (min-width: 768px) {
  .bg-img {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: url(coming-soon.webp);
    background-size: cover;
    background-position: bottom center;
  }
}
@media (min-width: 1024px) {
  .bg-img {
    background-position: bottom left;
  }
}

.container {
  margin: 0 auto;
  width: min(100% - 2rem, 624px);
  padding: 2rem 1.5rem;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  background-color: var(--indigo-1);
  border: 1px solid var(--indigo-7);
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(63, 100, 222, 0.08);
  z-index: 10;
}
.container img {
  width: 228px;
  max-width: 100%;
}
@media (min-width: 768px) {
  .container img {
    width: 268px;
  }
}
.container p {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5em;
  color: var(--slate-12);
}
@media (min-width: 768px) {
  .container p {
    font-size: 1.5rem;
  }
}

footer {
  padding: 3rem 1rem;
  background-color: var(--slate-dark-1);
}
footer p {
  font-size: 14px;
  color: var(--slate-dark-9);
  text-align: center;
}