:root {
  --cream: #f7f3ec;
  --charcoal: #3f4347;
  --sage: #7fb686;
  --blue: #6faedb;
  --lilac: #c0afe3;
  --coral: #d9755b;
  --mustard: #d8b63a;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", Arial, sans-serif;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 48px 24px;
}

.content {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.logo {
  width: min(380px, 80vw);
  height: auto;
  margin-bottom: 42px;
}

.eyebrow {
  color: #817397;
  font-size: clamp(.68rem, 1.4vw, .82rem);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.6;
}

h1 {
  margin: 15px 0 18px;
  font-size: clamp(2.35rem, 7vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .94;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 22px;
}

.divider span { width: 54px; height: 3px; border-radius: 3px; }
.divider span:first-child { background: var(--sage); }
.divider span:last-child { background: var(--mustard); }
.divider i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

p {
  max-width: 520px;
  margin: 0 0 28px;
  color: #64676a;
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.65;
}

a {
  display: inline-flex;
  gap: .35em;
  padding: 14px 24px;
  border: 1px solid rgba(63, 67, 71, .2);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: var(--charcoal);
  font-size: .88rem;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

a:hover, a:focus-visible { transform: translateY(-2px); background: white; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.shape { position: absolute; z-index: 0; border-radius: 999px; opacity: .9; }
.shape-green { width: 270px; height: 270px; left: -145px; top: 12%; background: var(--sage); }
.shape-lilac { width: 150px; height: 150px; right: -64px; top: 9%; background: var(--lilac); }
.shape-coral { width: 210px; height: 210px; right: -100px; bottom: -70px; background: var(--coral); }
.shape-blue { width: 70px; height: 70px; left: 10%; bottom: 10%; background: var(--blue); }

@media (max-width: 600px) {
  .hero { padding: 36px 20px; }
  .logo { margin-bottom: 34px; }
  .shape-green { width: 190px; height: 190px; left: -130px; }
  .shape-lilac { width: 100px; height: 100px; right: -55px; }
  .shape-coral { width: 150px; height: 150px; right: -90px; }
  .shape-blue { width: 42px; height: 42px; left: 5%; bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}