:root {
  --green: #44ffa1;
  --white: #fff;
  --purple-900: #24053e;
  --purple-500: #584d62;
  --purple-100: #f4e5ff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fraunces", Georgia, "Times New Roman", Times, serif;
  /* text-wrap: balance; */
}

@font-face {
  font-display: swap;
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  src: url("assets/fonts/fraunces/fraunces-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/manrope/manrope-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  src: url("assets/fonts/manrope/manrope-600.woff2") format("woff2");
}

html {
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.container {
  width: calc(100% - 40px);
  max-width: 70rem; /* 1120px */
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .container {
    width: calc(100% - 88px);
  }
}

@media screen and (min-width: 1200px) {
  .container {
    width: calc(100% - 320px);
  }
}

.header {
  background-color: var(--purple-900);
  padding-block-start: 32px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .header {
    position: relative;
    overflow: hidden;
  }

  .header::before,
  .header::after {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .header::before {
    top: 0;
    left: 0;
    translate: -45% 35%;
    width: 360px;
    height: 250px;
    background-image: url("assets/images/bg-pattern-1.svg");
  }

  .header::after {
    top: 0;
    right: 0;
    translate: 75% 145%;
    width: 300px;
    height: 150px;
    background-image: url("assets/images/bg-pattern-2.svg");
  }
}

@media screen and (min-width: 1200px) {
  .header {
    padding-block-start: 56px;
  }

  .header::before {
    translate: -22% 40%;
    width: 360px;
    height: 250px;
  }

  .header::after {
    translate: 65% 145%;
    width: 300px;
    height: 150px;
  }
}

.header__navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__link {
  text-decoration: none;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}

.navbar__link::after {
  content: "";
  display: block;
  background-color: var(--green);
  height: 3px;
}

.header__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  padding-block: 56px 64px;
}

@media screen and (min-width: 768px) {
  .header__hero {
    padding-block: 56px 40px;
  }
}

.hero__title {
  color: var(--white);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  max-width: 12ch;

  span {
    display: inline-block;
    &::after {
      content: "";
      display: block;
      height: 4px;
      background-color: var(--green);
    }
  }
}

.button {
  display: block;
  text-decoration: none;
  color: var(--purple-900);
  background-color: var(--green);
  border: solid 2px var(--green);
  padding: 12px 32px;
  font-weight: 600;
  line-height: 1.8;
}

.button:hover,
.button:focus {
  background-color: var(--purple-900);
  color: var(--green);
}

.header__img-container {
  position: relative;
  background-image: linear-gradient(var(--purple-900) 50%, var(--purple-100) 50%);
}

.features__curved-bottom {
  position: relative;
  background-image: linear-gradient(var(--purple-100) 50%, var(--white) 50%);
}

.illustration {
  width: clamp(20rem, 7.416107382550335rem + 53.691275167785236vw, 45rem);
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.header__img-container::after {
  content: "";
  position: absolute;
  inset: 49% 0 0 0;
  width: 100%;
  height: 8vw;
  background-image: url("assets/images/curved-hero-bottom.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.features__curved-bottom::after {
  content: "";
  position: absolute;
  inset: 49% 0 0 0;
  width: 100%;
  height: 8vw;
  background-image: url("assets/images/curved-hero-bottom-light.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.features {
  background-color: var(--purple-100);
}

.features__content {
  display: grid;
  text-align: center;
  gap: 32px;
  padding-block: 64px;
}

.feature__item {
  display: grid;
  place-items: center;
  line-height: 1.8;
  color: var(--purple-900);
}

.feature__number {
  width: 48px;
  height: 48px;
  border: solid 1px var(--purple-500);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.feature__number p {
  color: var(--purple-900);
  font-family: "Fraunces", Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  font-weight: 600;
}

.feature__title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .feature__item {
    grid-template-columns: 48px auto;
    justify-items: start;
    align-content: center;
    gap: 56px;
  }

  .feature__description {
    text-align: left;
  }

  .feature__title {
    margin-bottom: 28px;
  }

  .feature__number {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1200px) {
  .features__content {
    grid-template-columns: 1fr 1fr 1fr;
    padding-block: 88px 144px;
  }

  .feature__item {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .feature__description {
    text-align: center;
  }
}

.cta__content {
  display: grid;
  grid-template-rows: auto 48px auto;
  grid-template-columns: 1fr;
  padding-block-start: 112px;
  justify-items: center;
}

.cta__headshot {
  max-width: 280px;
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.cta__about {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  background-color: var(--purple-900);
  color: var(--white);
  padding: 32px;
  line-height: 1.8;
  text-align: center;
  display: grid;
  gap: 32px;
  justify-items: center;
}

.cta__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .cta__content {
    position: relative;
    grid-template-columns: auto 102px auto;
    grid-template-rows: auto 112px auto;
    padding-block-start: 164px;
  }

  .cta__content::after {
    content: "";
    position: absolute;
    display: block;
    width: 280px;
    height: 220px;
    bottom: 0;
    right: 0;
    translate: 10% 50%;
    background-image: url("assets/images/bg-pattern-3.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .cta__headshot {
    max-width: 280px;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .cta__about {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    text-align: left;
    justify-items: start;
  }
}

@media screen and (min-width: 1200px) {
  .cta__content {
    position: relative;
    grid-template-columns: auto 87px auto;
    grid-template-rows: auto 309px auto;
    padding-block-start: 224px;
  }

  .cta__content::after {
    translate: -10% 33%;
  }

  .cta__headshot {
    max-width: 477px;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .cta__about {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    text-align: left;
    justify-items: start;
    padding: 64px;
  }
}

.footer__content {
  display: grid;
  place-items: center;
  gap: 56px;
  padding-block: 80px;
}

.footer__social-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

@media screen and (min-width: 768px) {
  .footer__content {
    padding-block: 112px;
  }
}