@charset "UTF-8";
:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #112122;
  background: #f6faf8;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f6faf8 62%);
}
.wash { position: absolute; border-radius: 50%; }
.wash-one {
  width: 78vw;
  height: 78vw;
  min-width: 650px;
  min-height: 650px;
  left: -45vw;
  bottom: -57vw;
  background: linear-gradient(145deg, #c3f8e1, #2de3ad55 48%, #dff9ee33 80%);
  box-shadow: 0 0 100px #bbf5dc33;
}
.wash-two {
  width: 62vw;
  height: 62vw;
  min-width: 520px;
  min-height: 520px;
  right: -36vw;
  top: -41vw;
  background: linear-gradient(145deg, #e4fcf1, #9aefcf77);
}
.orbit { position: absolute; border: 1px solid #b9daca66; border-radius: 50%; }
.orbit-one {
  width: min(82vw, 1150px);
  height: min(82vw, 1150px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.orbit-two {
  width: min(105vw, 1460px);
  height: min(105vw, 1460px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: #c6e3d544;
}
.dot { position: absolute; border-radius: 50%; }
.dot-one { width: 16px; height: 16px; top: 25%; left: 18%; background: #2de3ad; }
.dot-two { width: 8px; height: 8px; right: 18%; bottom: 25%; background: #153d31; }
.dot-three { width: 58px; height: 58px; right: 13%; top: 15%; background: #b2f6db66; }
.hero {
  position: relative;
  min-height: 100svh;
  padding: 70px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}
.logo-card {
  width: 168px;
  height: 182px;
  margin-bottom: 58px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #eff5f1;
  border-radius: 26px;
  transform: rotate(-8deg);
  box-shadow: 0 24px 65px -30px #1b755447, 0 2px 2px #11212206;
}
.logo-window { position: relative; width: 116px; height: 128px; overflow: hidden; }
.logo-window img {
  position: absolute;
  width: 240px;
  height: 240px;
  max-width: none;
  left: -62px;
  top: -60px;
}
h1 {
  margin: 0;
  font-size: clamp(48px, 7.6vw, 112px);
  line-height: 1.08;
  letter-spacing: -.065em;
  font-weight: 800;
}
h1 span { position: relative; display: inline-block; }
h1 span::after {
  content: "";
  position: absolute;
  left: 1%;
  right: -1%;
  bottom: .015em;
  height: .18em;
  background: #2de3ad;
  transform: rotate(-2deg);
  z-index: -1;
}
.hero p {
  margin: 33px 0 0;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.5;
  letter-spacing: -.025em;
  color: #657571;
}
@media (max-width: 600px) {
  .hero { padding: 60px 24px; }
  .logo-card { margin-bottom: 48px; width: 145px; height: 158px; border-radius: 23px; }
  .logo-window { transform: scale(.88); }
  h1 { max-width: 440px; font-size: clamp(48px, 11.5vw, 68px); }
  .hero p { margin-top: 26px; }
  .orbit-one { width: 115vw; height: 115vw; }
  .orbit-two { width: 165vw; height: 165vw; }
  .wash-one { left: -480px; bottom: -460px; }
  .wash-two { right: -410px; top: -340px; }
  .dot-one { left: 9%; top: 20%; width: 11px; height: 11px; }
  .dot-two { right: 11%; bottom: 18%; }
  .dot-three { right: 9%; top: 10%; width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .logo-card { animation: arrive .8s ease-out both; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px) rotate(-4deg); }
    to { opacity: 1; transform: translateY(0) rotate(-8deg); }
  }
}