@charset "UTF-8";
/*-------------Import fonts ---------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

:root {
  color-scheme: dark;
  --text: #f5f7f7;
  --muted: #aabcc4;
  --bs-teal: #5ae3e2;
  --bs-teal-inverse: #c14302;
  --bs-cyan: #5ae3e2;
  --bs-card-bg: #292B32;
  --bs-body-bg: #1F2026;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bs-card-bg);
  color: var(--text);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 73% 40%, #112932, #0b1823 40%, var(--bs-card-bg) 75%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(#0009, transparent 80%);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.brand img {
  width: 40%;
  object-fit: contain;
}
.top-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #bdd2d7;
  font-size: .9375rem;
  text-decoration-color: var(--bs-teal);
  text-underline-offset: 8px;
}
main {
  position: relative;
  display: grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  max-width: 100rem;
  min-height: calc(100svh - 100px);
  margin: auto;
  padding: 1rem var(--gutter) 2rem;
}
.copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 2rem 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--bs-teal);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1 {
  font-family: "Alex Brush", cursive;
  font-size: clamp(2.7rem, 3.7vw, 5.7rem);
  font-weight: 400;
  font-style: normal;
  margin: 0.5rem 0 0 0;
  overflow-wrap: anywhere;
}
h1 em {
  font-style: normal;
  color: var(--bs-teal);
}
p {
  color: var(--muted);
  text-align: justify;
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 45rem;
  margin: 0 0 2rem;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.button {
  max-width: 100%;
  min-height: 48px;
  padding: 1rem 1.4rem;
  border: 1px solid var(--bs-teal);
  border-radius: 3px;
  background: var(--bs-teal);
  color: var(--bs-card-bg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.button:hover {
  border: 1px solid var(--bs-teal);
  background: transparent;
  color: var(--bs-teal);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}
.art {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  height: clamp(24rem, 65vw, 48rem);
  max-height: 80svh;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 45%;
}
.art::before {
  content: '';
  position: absolute;
  inset: 4rem 4rem;
  border: 1px solid #5ad8dc22;
  border-radius: 50%;
  box-shadow: 0 0 0 45px #5ad8dc07, 0 0 0 90px #5ad8dc04;
  pointer-events: none;
}
.art::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 22%;
  border-radius: 50%;
  background: #58d7da18;
  filter: blur(65px);
  pointer-events: none;
}
.art #particles {
  position: absolute;
  inset: 2.2rem 2.2rem;
  display: block;
  width: 90%;
  height: 90%;
  padding: 0;
  border: 0;
  touch-action: pan-y;
  visibility: hidden;
}
.fallback {
  position: absolute;
  width: 80%;
  height: 82%;
  top: 9%;
  left: 10%;
  object-fit: contain;
}
.art.ready #particles {
  visibility: visible;
}
.art.ready .fallback {
  display: none;
}
.index {
  grid-column: 1 / -1;
  color: #91a9b4;
  font-size: .75rem;
  letter-spacing: .14em;
  line-height: 1.7;
  text-align: center;
  margin-top: 4rem;
}
.index strong {
  color: var(--bs-teal);
  font-weight: 500;
}

@media (max-width: 60rem) {
  main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: auto;
  }
  .copy {
    padding: 1.5rem 0 .75rem;
  }
  .brand img {
    width: 35%;
	margin: 0 auto;
  }
  h1 {
    font-size: clamp(1.8rem, 6.7vw, 5rem);
	text-align: center;
  }
  p {
    max-width: 45rem;
	text-align: center;
  }
  .art {
    max-width: 35rem;
    height: auto;
    aspect-ratio: .95;
    min-height: 0;
    max-height: none;
    justify-self: center;
  }
  .art::before {
    inset: 7rem 6rem;
  }
  .art #particles {
    inset: 7.2rem 6.2rem;
	width: 65%;
	height: 65%;
  }
  .button {
    margin: 0 auto;
  }
  .index {
    margin-top: 1rem;
  }
}
@media (max-width: 30rem) {
  .brand {
    font-size: 1rem;
    letter-spacing: .1em;
  }
  .brand img {
    width: 45%;
  }
  .top-link {
    font-size: .875rem;
  }
  .eyebrow {
    letter-spacing: .12em;
  }
  p {
    font-size: 1rem;
	text-align: justify;
	margin: 0 0 1.5rem;
  }
  .button {
    font-size: 0.8rem;
	margin: 0 auto 1rem auto;
  }
  .art {
    aspect-ratio: 1;
  }
  .art::before {
    inset: 4rem 4rem;
  }
  .art #particles {
    inset: 4rem 3.8rem;
  }
  .actions {
    gap: .9rem;
  }
  .hint {
    flex-basis: 100%;
  }
  .art-label {
    letter-spacing: .09em;
  }
  .index {
    font-size: .60rem;
  }
}

@media (min-width: 60.01rem) and (max-height: 38rem) {
  .art {
    height: 32rem;
    max-height: none;
  }
  .copy {
    padding: 1rem 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button {
    transition: none;
  }
}