body {
  font-family: var(--ff-base);
}

:focus-visible {
  outline: none;
}

/* ========== HEADER SECTION ========== */
.header {
  display: grid;
  place-items: center;
  gap: var(--spacing-300);
  overflow: hidden;
}

.header__nav {
  --margin-top: var(--spacing-500);
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-block-start: var(--margin-top);
  width: 87.5%;
  max-width: 69.5rem;
}

.header__toggle {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.header__nav-list {
  position: absolute;
  left: 0;
  top: var(--spacing-600);

  list-style-type: none;
  font-size: var(--fs-preset-6);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-none);
  font-weight: var(--fw-bold);

  background-color: var(--clr-primary-purple-950);

  width: 100%;
  border-radius: 0.6rem;

  gap: calc(var(--spacing-200) + 0.36rem);
  text-align: center;

  padding: var(--spacing-400) var(--spacing-200);
  display: none;
}

.header__nav-list.is-open {
  display: grid;
}

.header__link {
  color: var(--clr-basic-white);
  text-decoration: none;
  display: block;
  outline: none;
  padding: var(--spacing-100);
}

.header__link:hover,
.header__link:focus-visible {
  border-radius: 1.75rem;
  background-color: var(--clr-primary-blue-400);
}

.header__nav-divider {
  background-color: var(--clr-neutral-grey-500);
  height: 1px;
  width: 100%;
  opacity: 25%;

  outline: 0;
}

.header__hero {
  text-align: center;
}

.header__hero-img {
  margin-inline-start: 5%;
  max-width: 135%;
  width: 140%;
  height: auto;
}

.header__title {
  color: var(--clr-neutral-grey-900);
  max-inline-size: 85%;
  margin: 0 auto;

  font-size: var(--fs-preset-2);
  line-height: var(--lh-115);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);

  margin-block-start: var(--spacing-500);
  margin-block-end: var(--spacing-200);
}

.header__description {
  color: var(--clr-neutral-grey-500);
  margin: 0 auto;
  max-inline-size: 85%;
  font-size: var(--fs-preset-6);
  line-height: var(--lh-175);
  letter-spacing: var(--ls-none);
  font-weight: var(--fw-medium);
}

.header__cta {
  font-size: var(--fs-preset-5);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-none);
  font-weight: var(--fw-bold);

  color: var(--clr-basic-white);
  background-color: var(--clr-primary-blue-400);

  padding: var(--spacing-200) var(--spacing-500);
  border: 0;
  outline: none;
  border-radius: 6.25rem;
  margin-block-start: var(--spacing-400);
}

.header__cta:hover,
.header__cta:focus-within {
  cursor: pointer;
  background-color: var(--clr-secondary-blue-300);
}
@media (min-width: 48rem) {
  .header__link,
  .header__nav-divider {
    margin: 0 auto;
    width: 85%;
  }

  .header__hero-img {
    margin-inline-start: 17%;
    margin-block: 5%;

    width: 95.5%;
  }
  .header__title {
    margin-block-start: 0;

    font-size: var(--fs-preset-1);
    line-height: var(--lh-115);
    letter-spacing: var(--ls-tightest);
  }
  .header__description {
    width: 70%;
    font-size: var(--fs-preset-4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-165);
    letter-spacing: var(--ls-none);
  }
}

@media (min-width: 90rem) {
  .header {
    display: grid;
    justify-content: center;
    justify-items: start;
    margin-inline-start: -2.5%;
  }
  .header__nav {
    --margin-top: var(--spacing-600);
    width: 103%;
    justify-self: start;
    grid-template-columns: max-content 1fr;
    gap: 2.5%;
  }

  .header__toggle,
  .header__nav-divider {
    display: none;
  }
  .header__nav-list {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, max-content) 1fr repeat(2, max-content);
    justify-content: start;
    padding: 0;
    font-size: var(--fs-preset-7);
    background-color: transparent;

    width: 100%;
  }
  .header__list-item:nth-child(5),
  .header__list-item:nth-child(6) {
    justify-self: end;
  }
  .header__list-item:nth-child(5) {
    grid-column: -2;
  }
  .header__list-item:nth-child(6) {
    grid-column: -1;

    background-color: var(--clr-primary-blue-400);
    color: var(--clr-basic-white);
    border-radius: 6.25rem;
  }
  .header__list-item:nth-child(6) .header__link:hover,
  .header__list-item:nth-child(6) .header__link:focus-visible {
    background-color: var(--clr-secondary-blue-300);
  }
  .header__list-item:nth-child(6) .header__link {
    color: var(--clr-basic-white);
  }
  .header__link {
    color: var(--clr-neutral-grey-500);
    width: max-content;
    padding: var(--spacing-100) var(--spacing-300);
  }
  .header__link:hover,
  .header__link:focus-visible {
    color: var(--clr-basic-white);
  }
  .header__hero {
    position: relative;
    display: grid;
    align-content: center;
    justify-content: start;
    height: 32rem;
    width: 70%;
    text-align: start;
  }

  .header__hero-img {
    left: 0;
    position: absolute;
    transform: translateX(73%);
  }
  .header__description,
  .header__title {
    margin-inline: 0;
  }
  .header__cta {
    width: max-content;
  }
}

/* ========== END HEADER SECTION ========== */

/* ========== START SHORTENER SECTION ========== */
.shortener {
  position: relative;
  margin-block-start: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.shortener__form {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  width: 87.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--spacing-200);
  padding: var(--spacing-300);
  border-radius: 12px;
  background-color: var(--clr-primary-purple-950);
  overflow: hidden;
  max-width: 69.5rem;
}

@media (min-width: 48rem) {
  .shortener__form {
    flex-direction: row;
    gap: var(--spacing-300);
    padding: var(--spacing-650) var(--spacing-800);
  }
}

.shortener__picture {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

@media (min-width: 48rem) {
  .shortener__picture {
    height: 100%;
    width: 100%;
  }

  .shortener__background {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.shortener__form-input {
  width: 100%;
  border-radius: 8px;
  border: none;
  padding: var(--spacing-150) var(--spacing-200);
  font-weight: var(--fw-medium);
}

@media (min-width: 48rem) {
  .shortener__form-input {
    font-size: var(--fs-preset-5);
    padding: var(--spacing-200) var(--spacing-400);
  }
}

.shortener__form-input::placeholder {
  font-weight: var(--fw-medium);
  color: var(--clr-neutral-grey-500);
}

.shortener__form-input:focus-visible {
  outline: 3px solid var(--clr-primary-blue-400);
}

.shortener__form-input:focus-visible:invalid {
  outline: 3px solid var(--clr-secondary-red-400);
}

.shortener__form-input.invalid {
  outline: 3px solid var(--clr-secondary-red-400);
}

.shortener__form-input.invalid::placeholder {
  color: var(--clr-secondary-red-200);
}

.shortener__message {
  align-self: flex-start;
  font-style: italic;
  position: relative;
  top: -0.5em;
  color: var(--clr-secondary-red-400);
  font-weight: var(--fw-light);
}

@media (min-width: 48rem) {
  .shortener__message {
    position: absolute;
    top: auto;
    bottom: var(--spacing-300);
    left: var(--spacing-800);
  }
}

.shortener__form-btn {
  width: 100%;
  border-radius: 8px;
  padding: var(--spacing-150) var(--spacing-200);
  background-color: var(--clr-primary-blue-400);
  font-weight: var(--fw-bold);
  color: var(--clr-basic-white);
  font-size: var(--fs-preset-6);
  border: none;
  user-select: none;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .shortener__form-btn {
    max-width: 11.75rem;
    font-size: var(--fs-preset-5);
    padding: var(--spacing-200);
  }
}

.shortener__form-btn:hover,
.shortener__form-btn:focus-visible {
  background-color: var(--clr-secondary-blue-300);
}
/* ========== END SHORTENER SECTION ========== */

/* ========== START CARDS SECTION ========== */
.cards {
  width: 100%;
  background-color: var(--clr-neutral-purple-50);
}

.cards__ul {
  list-style-type: none;
  transform: translateY(var(--spacing-1300));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-300);
  padding: var(--spacing-none);
  margin-inline: auto;
  width: 87.5%;
  max-width: 69.5rem;
}

@media (min-width: 48rem) {
  .cards__ul {
    transform: translateY(var(--spacing-1400));
    gap: var(--spacing-200);
  }
}

.cards__list {
  background-color: var(--clr-basic-white);
  border-radius: 6px;
  width: 100%;
}

@media (min-width: 64rem) {
  .cards__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-200) var(--spacing-300) var(--spacing-200)
      var(--spacing-400);
    gap: var(--spacing-300);
  }

  .cards__link-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

.cards__input-link {
  position: relative;
  padding: var(--spacing-200) var(--spacing-200) var(--spacing-150);
  font-weight: var(--fw-medium);
  font-size: var(--fs-preset-10);
  letter-spacing: var(--ls-wide);
}

@media (min-width: 48rem) {
  .cards__input-link {
    padding: var(--spacing-200) var(--spacing-400) var(--spacing-150);
  }
}

@media (min-width: 64rem) {
  .cards__input-link {
    padding: 0;
    font-size: var(--fs-preset-11);
  }
}

.cards__divider {
  border: none;
  height: 0.5px;
  background-color: var(--clr-neutral-grey-400);
}

@media (min-width: 64rem) {
  .cards__divider {
    display: none;
  }
}

.cards__shortened-link {
  padding: var(--spacing-150) var(--spacing-200) var(--spacing-200);
  font-weight: var(--fw-medium);
  font-size: var(--fs-preset-10);
  color: var(--clr-primary-blue-400);
}

@media (min-width: 48rem) {
  .cards__shortened-link {
    padding: var(--spacing-150) var(--spacing-400) var(--spacing-200);
  }
}

@media (min-width: 64rem) {
  .cards__shortened-link {
    padding: var(--spacing-none);
    font-size: var(--fs-preset-11);
  }
}

.cards__copy {
  padding: var(--spacing-100) var(--spacing-200);
  width: calc(100% - 2em);
  display: block;
  margin-inline: auto;
  margin-block-end: var(--spacing-200);
  border: none;
  border-radius: 8px;
  background-color: var(--clr-primary-blue-400);
  font-weight: var(--fw-bold);
  color: var(--clr-basic-white);
  font-size: var(--fs-preset-10);
  user-select: none;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .cards__copy {
    width: calc(100% - 4rem);
  }
}

@media (min-width: 64rem) {
  .cards__copy {
    margin-inline: var(--spacing-none);
    margin-block-end: var(--spacing-none);
    width: 100%;
    max-width: 6.5rem;
  }
}

.cards__copy:hover {
  background-color: var(--clr-secondary-blue-300);
}

.cards__copy.active {
  background-color: var(--clr-primary-purple-950);
}

/* ========== END CARDS SECTION ========== */

/* ==========  STATISTICS SECTION ========== */
.statistics {
  background-color: var(--clr-neutral-purple-50);
  display: grid;
  place-content: center;
  padding-block: var(--spacing-2000) var(--spacing-1000);
}

.statistics__header {
  --margin-bottom: var(--spacing-700);
  max-width: 21.8rem;
  text-align: center;
  margin-block-end: calc(var(--margin-bottom) + 44px);
}

.statistics__title {
  font-size: var(--fs-preset-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-170);
  letter-spacing: var(--ls-none);

  color: var(--clr-neutral-grey-900);
  margin-block-end: var(--spacing-300);
}

.statistics__description {
  font-size: var(--fs-preset-7);
  font-weight: var(--fw-medium);
  line-height: var(--lh-175);
  letter-spacing: var(--ls-none);

  color: var(--clr-neutral-grey-500);
}

.statistics__features {
  padding: 0;
  display: grid;
  justify-content: center;
  align-content: end;
  gap: calc(44px + 72px);

  list-style-type: none;
  list-style-position: inside;
  max-width: 69.4rem;
  position: relative;
  z-index: 1;
}

.statistics__features::after {
  position: absolute;
  content: "";
  bottom: 0;
  z-index: -1;
  left: 50%;
  width: 8px;
  height: 100%;
  transform: translateX(-50%);
  background-color: var(--clr-primary-blue-400);
}

.statistics__list {
  max-width: 21.8rem;
  max-height: max-content;
  padding: var(--spacing-500) var(--spacing-400);
  background-color: var(--clr-basic-white);
  text-align: center;
  border-radius: 5px;

  position: relative;
}

.statistics__list::before {
  position: absolute;
  content: "";
  height: 88px;
  width: 88px;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);

  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--clr-primary-purple-950);
}

.statistics__list.icon-brand::before {
  background-image: url("../icons/icon-brand-recognition.svg");
}

.statistics__list.icon-detail::before {
  background-image: url("../icons/icon-detailed-records.svg");
}

.statistics__list.icon-custom::before {
  background-image: url("../icons/icon-fully-customizable.svg");
}

.statistics__feature {
  font-size: var(--fs-preset-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-150);
  letter-spacing: var(--ls-none);

  color: var(--clr-neutral-grey-900);

  margin-block-start: var(--spacing-400);
  margin-block-end: var(--spacing-200);
}

.statistics__feature-description {
  /* preset 7 medium */
  font-size: var(--fs-preset-7);
  font-weight: var(--fw-medium);
  line-height: var(--lh-175);
  letter-spacing: var(--ls-none);
  color: var(--clr-neutral-grey-500);
}

@media (min-width: 48rem) {
  .statistics {
    padding-block: var(--spacing-2600) var(--spacing-1000);
  }
  .statistics__header {
    max-width: 33.75rem;
  }
  .statistics__title {
    font-size: var(--fs-preset-2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-115);
    letter-spacing: var(--ls-tight);
  }
  .statistics__description {
    font-size: var(--fs-preset-6);
    font-weight: var(--fw-medium);
    line-height: var(--lh-175);
    letter-spacing: var(--ls-none);
  }
}
@media (min-width: 90rem) {
  .statistics__header {
    --margin-bottom: var(--spacing-500); /*40px*/
    justify-self: center;
  }
  .statistics__features {
    height: 399px;
    width: 1110px;
    position: relative;
  }

  .statistics__features::after {
    transform: rotate(180deg);
    left: 0;
    bottom: 50%;
    height: 8px;
    width: 100%;
  }
  .statistics__list {
    text-align: start;
  }
  .statistics__list:first-child {
    position: absolute;
    left: 0;
    top: 10.5%;
  }
  .statistics__list:nth-child(2) {
    position: absolute;
    left: calc(50% - calc(350px / 2));
    top: 21%;
  }
  .statistics__list:last-child {
    position: absolute;
    right: 0;
    top: 33.5%;
  }
  .statistics__list::before {
    left: 25%;
  }
}
/* ==========  END STATISTICS SECTION ========== */

/* ==========  FOOTER SECTION ========== */
.footer {
  background-color: var(--clr-neutral-grey-950);
}

.footer__boost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-200);
  position: relative;
  z-index: 0;
  background-color: var(--clr-primary-purple-950);
  padding-block: var(--spacing-1200);
}

@media (min-width: 64rem) {
  .footer__boost {
    gap: var(--spacing-300);
    padding-block: var(--spacing-700);
  }
}

.footer__picture {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__title {
  color: var(--clr-basic-white);
  font-size: var(--fs-preset-8);
}

@media (min-width: 64rem) {
  .footer__title {
    font-size: var(--fs-preset-9);
  }
}

.footer__cta {
  color: var(--clr-basic-white);
  background-color: var(--clr-primary-blue-400);
  font-weight: var(--fw-bold);
  font-size: var(--fs-preset-5);
  padding: var(--spacing-150) var(--spacing-500);
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  border: none;
}

.footer__cta:hover,
.footer__cta:focus-visible {
  background-color: var(--clr-secondary-blue-300);
}

.footer__links {
  padding-block: var(--spacing-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-480);
}

@media (min-width: 64rem) {
  .footer__links {
    padding-block: var(--spacing-900);
    padding-inline: var(--spacing-100);
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-480);
    max-width: 70.5rem;
    margin-inline: auto;
  }
}

.footer__logo {
  margin-block-end: var(--spacing-150);
}

@media (min-width: 64rem) {
  .footer__logo {
    margin-block-end: 0;
    margin-inline-end: clamp(
      var(--spacing-400),
      -7.1429rem + 19.0476vw,
      var(--spacing-2000)
    );
  }
}

.footer__category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 64rem) {
  .footer__category {
    flex-direction: column;
    align-items: flex-start;
    padding-block-start: var(--spacing-50);
  }

  .footer__category:nth-of-type(1) {
    position: relative;
    left: var(--spacing-50);
  }

  .footer__category:nth-of-type(2) {
    position: relative;
    right: var(--spacing-150);
  }

  .footer__category:nth-of-type(3) {
    position: relative;
    right: var(--spacing-50);
  }
}

.footer__category-title {
  font-size: var(--fs-preset-7);
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--spacing-300);
  color: var(--clr-basic-white);
}

.footer__ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-150);
}

@media (min-width: 64rem) {
  .footer__ul {
    align-items: flex-start;
    gap: var(--spacing-150);
  }
}

.footer__ul,
.footer__socials-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer__list {
  font-size: var(--fs-preset-7);
}

.footer__link {
  color: var(--clr-neutral-grey-400);
  text-decoration: none;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--clr-primary-blue-400);
}

.footer__socials {
  padding-block-start: var(--spacing-100);
}

@media (min-width: 64rem) {
  .footer__socials {
    padding-block-start: var(--spacing-50);
  }
}

.footer__socials-ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-300);
}

.footer__socials-link {
  color: var(--clr-basic-white);
  transition: color 0.15s ease-in-out;
}

.footer__socials-link:hover,
.footer__socials-link:focus-visible {
  color: var(--clr-primary-blue-400);
}
/* ========== END FOOTER SECTION ========== */