@layer reset;
@import url(./reset.css) layer(reset);

:root {
  /* Color */
  /* Neutral */
  --neutral-900: #062630;
  --neutral-700: #385159;
  --neutral-200: #e6e1df;
  --neutral-100: #faf5f3;
  --neutral-0: #ffffff;

  /* Light Salmon */
  --light-salmon-500: #fea36f;
  --light-salmon-100: #ffe2d1;
  --light-salmon-50: #fff5ef;

  /* Gradient */
  --text-gradient: linear-gradient(107deg, #ff9a60 -11.37%, #062630 61.84%);
  --gradient: linear-gradient(90deg, #ffe2d1 0%, #fff5ef 100%);

  /* Spacing */
  --size-0: 0;
  --size-025: 0.125rem; /* 2px */
  --size-050: 0.25rem; /* 4px */
  --size-075: 0.375rem; /* 6px */
  --size-100: 0.5rem; /* 8px */
  --size-10: 0.625rem; /* 10px */
  --size-150: 0.75rem; /* 12px */
  --size-200: 1rem; /* 16px */
  --size-250: 1.25rem; /* 20px */
  --size-300: 1.5rem; /* 24px */
  --size-400: 2rem; /* 32px */
  --size-500: 2.5rem; /* 40px */
  --size-600: 3rem; /* 48px */
  --size-800: 4rem; /* 64px */
  --size-1000: 5rem; /* 80px */
  --size-full: 62.4375rem; /* 24px */
}

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono/MartianMono-VariableFont_wdth\,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: Inter;
  src: url("../fonts/inter/Inter-VariableFont_opsz\,wght.ttf") format(truetype);
  font-weight: 100 900;
  font-style: normal;
}

.martian-mono-bold {
  font-family: "Martian Mono", monospace;
  font-weight: 700;
  font-style: normal;
}
.martian-mono-semiBold {
  font-family: "Martian Mono", monospace;
  font-weight: 600;
  font-style: normal;
}
.martian-mono-regular {
  font-family: "Martian Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.inter-regular {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.inter-semiBold {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-style: normal;
}

.text-preset-1 {
  font-size: 62px;
  line-height: 120%; /* 74.4px */
  letter-spacing: -2px;
}
.text-preset-2 {
  font-size: 50px;
  line-height: 130%; /* 65px */
  letter-spacing: -2px;
}
.text-preset-3 {
  font-size: 34px;
  line-height: 130%; /* 44.2px */
  letter-spacing: -1px;
}
.text-preset-4 {
  font-size: 24px;
  line-height: 110%; /* 26.4px */
  letter-spacing: -1px;
}
.text-preset-4-regular {
  font-size: 24px;
  line-height: 120%; /* 28.8px */
  letter-spacing: -1px;
}
.text-preset-5 {
  font-size: 20px;
  line-height: 140%; /* 28px */
  letter-spacing: -0.5px;
}
.text-preset-6 {
  font-size: 18px;
  line-height: 130%; /* 23.4px */
  letter-spacing: -1px;
}
.text-preset-7 {
  font-size: 14px;
  line-height: 120%; /* 16.8px */
  letter-spacing: -1px;
}
html {
  scroll-behavior: smooth;
}

.call-to-action {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-250);
  a {
    width: clamp(
      343px,
      calc(343px + ((380 - 343) / (768 - 375)) * (100vw - 375px)),
      380px
    );
    height: var(--size-800);
    cursor: pointer;
    padding-inline: var(--size-300);
    padding-block: var(--size-250);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neutral-900);
    border-radius: var(--size-100);
    border: var(--size-025) solid var(--neutral-900);
    background-color: var(--light-salmon-50);
    display: flex;
    justify-content: space-between;
    outline: none;
    img {
      width: var(--size-300);
      height: var(--size-300);
    }
    &:hover {
      background: linear-gradient(
        90deg,
        var(--light-salmon-100) 0%,
        var(--light-salmon-50) 100%
      );
    }
    &:focus {
      outline: 2px solid var(--neutral-700);
      outline-offset: 3px;
    }
  }
  .component-total-testimonial {
    display: flex;
    column-gap: var(--size-150);
    min-height: calc(2rem + 13px);
    background-image: url(../images/icon-star.svg), url(../images/icon-star.svg),
      url(../images/icon-star.svg), url(../images/icon-star.svg),
      url(../images/icon-star.svg);
    background-repeat: no-repeat;
    background-size: var(--size-300) var(--size-300);
    background-position: left calc(7rem + 10px) top,
      left calc(8.5rem + 10px) top, left calc(10rem + 10px) top,
      left calc(11.5rem + 10px) top, left calc(13rem + 10px) top;
    img {
      align-self: center;
      width: calc(6rem + 14px);
    }
    small {
      align-self: flex-end;
      color: var(--neutral-700);
    }
  }
}

body {
  header {
    min-height: 100vh;
    padding-block-start: clamp(
      var(--size-300),
      calc(1rem + 2.1vw),
      var(--size-400)
    );
    padding-block-end: var(--size-1000);
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(var(--size-600), calc(32.7px + 4.07vw), var(--size-1000));
    background-color: var(--neutral-100);
    background-image: url(../images/pattern-light-bg.svg),
      url(../images/pattern-glow.svg);
    background-repeat: no-repeat;
    background-size: cover, 42.75rem;
    background-position: left top, right -30% bottom -80%;
    & > div {
      width: 100%;
      max-width: clamp(343px, calc(0.52px + 91.859vw - 2px), 1174px);
    }
    .content-container {
      display: flex;
      column-gap: var(--size-800);
      row-gap: var(--size-800);
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      & > div {
        width: calc(35rem + 10px);
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        row-gap: var(--size-400);
        hgroup {
          display: flex;
          flex-direction: column;
          row-gap: var(--size-300);
          h1 {
            background: linear-gradient(
              107deg,
              var(--light-salmon-500) -11.37%,
              var(--neutral-900) 61.84%
            );
            background-clip: text;
            color: transparent;
          }
          p {
            color: var(--neutral-700);
          }
        }
      }
      .hero {
        width: 33.75rem;
        flex: 1 1 auto;
        border-radius: var(--size-100);
      }
    }
  }
  main {
    padding-block: clamp(var(--size-500), calc(2.83px + 10.18vw - 1px), 7.5rem);
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(var(--size-500), calc(2.83px + 10.18vw - 1px), 7.5rem);
    .main-container {
      display: flex;
      justify-content: center;
      column-gap: var(--size-1000);
      row-gap: var(--size-500);
      flex-wrap: wrap;
      width: 100%;
      max-width: clamp(
        calc(21rem + 7px),
        calc(0.52px + 91.859vw - 2px),
        calc(73rem + 2px)
      );
      & > div {
        width: calc(33rem + 2px);
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: var(--size-300);
        h2 {
          color: var(--neutral-900);
        }
        p,
        ul li {
          color: var(--neutral-700);
          width: 96%;
        }
      }
      .read-together-img {
        width: 35rem;
        flex: 1 1 auto;
        border-radius: var(--size-250);
      }
      .read-together {
        order: 2;
        row-gap: clamp(24px, calc(14.46px + 2.544vw), 34px);
        ul {
          width: calc(26rem + 15px);
          flex: 1 1 auto;
          list-style-type: none;
          padding: 0;
          li {
            padding-inline-start: calc(2rem + 6px);
            position: relative;
            &::before {
              content: "";
              width: 1.75rem;
              height: 1.75rem;
              position: absolute;
              background-image: url(../images/icon-check.svg);
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
            &:not(:last-of-type) {
              margin-block-end: var(--size-300);
            }
          }
        }
      }
      .read-together-img {
        order: 1;
      }
      h2 span {
        position: relative;
        &::before {
          content: "";
          width: 10rem;
          height: 4.125rem;
          position: absolute;
          background-image: url(../images/pattern-circle.png);
          background-repeat: no-repeat;
          background-size: contain;
          left: 0;
          bottom: 0;
          transform: translateX(-6%);
        }
      }

      .not-average-img {
        width: 35rem;
        height: auto;
        flex: 1 1 auto;
        position: relative;
        &::before {
          content: "";
          width: 7.5rem;
          height: 8.625rem;
          position: absolute;
          background-image: url(../images/logos-tech.svg);
          bottom: 2rem;
          left: -15%;
        }
        & > img {
          width: 100%;
          border-radius: var(--size-250);
        }
      }
    }
    .reading-journey {
      max-width: clamp(
        calc(21rem + 7px),
        calc(0.52px + 91.859vw - 2px),
        calc(73rem + 2px)
      );
      width: 100%;
      padding-block: var(--size-1000);
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: var(--size-800);
      background-color: var(--neutral-100);
      border-radius: var(--size-150);
      background-image: url(../images/pattern-light-bg.svg),
        url(../images/pattern-glow.svg);
      background-repeat: no-repeat;
      background-size: cover, 42.75rem;
      background-position: 0 0, right -50% bottom 110%;
      h2 {
        width: 32rem;
        color: var(--neutral-900);
        text-align: center;
        font-size: 50px;
        line-height: 120%;
        letter-spacing: -2px;
      }
      ul {
        max-width: 65.625rem;
        width: 100%;
        padding: 0;
        list-style-type: none;
        display: flex;
        column-gap: var(--size-600);
        li {
          display: flex;
          flex-direction: column;
          row-gap: var(--size-300);
          color: var(--neutral-900);
          font-size: 18px;
          line-height: 130%; /* 23.4px */
          letter-spacing: -0.18px;
          span {
            display: block;
            width: var(--size-500);
            height: var(--size-500);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--neutral-900);
            font-size: 24px;
            line-height: 24px;
            letter-spacing: -0.24px;
            border-radius: 4px;
            border: 2px solid var(--neutral-900);
          }
        }
      }
    }
    .membership-options {
      max-width: 970px;
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: clamp(24px, calc(3.736vw + 10.5px), 64px);
      h2 {
        width: 100%;
        text-align: center;
        color: var(--neutral-900);
      }
      & > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        column-gap: var(--size-300);
        row-gap: var(--size-300);
        max-width: clamp(343px, calc(0.52px + 91.67vw + 1px), 970px);
        width: 100% 880px;
        & > div {
          width: calc(17rem + 14px);
          height: calc(22rem + 6px);
          margin-inline-start: 0;
          padding: var(--size-300);
          display: flex;
          flex-direction: column;
          row-gap: var(--size-400);
          border-radius: var(--size-100);
          border: 1px solid var(--neutral-200);
          & > div {
            display: flex;
            flex-direction: column;
            row-gap: var(--size-300);
            h3 {
              color: var(--neutral-900);
            }
            p {
              color: var(--neutral-900);
              display: flex;
              align-items: center;
              span {
                padding-inline-start: var(--size-100);
                color: var(--neutral-700);
              }
            }
            hr {
              border-color: var(--neutral-200);
            }
            ul {
              list-style-type: none;
              padding: 0;
              color: var(--neutral-700);
              font-size: 20px;
              line-height: 140%;
              letter-spacing: -0.4px;
              li {
                padding-inline-start: calc(2rem + 4px);
                position: relative;
                &::before {
                  content: "";
                  width: var(--size-300);
                  height: var(--size-300);
                  position: absolute;
                  background-image: url(../images/icon-check.svg);
                  background-size: contain;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                }
                &:not(:last-of-type) {
                  margin-block-end: var(--size-200);
                }
              }
            }
          }
          button {
            width: 100%;
            padding-block: var(--size-250);
            border-radius: var(--size-100);
            border: 2px solid var(--neutral-900);
            background: var(--light-salmon-50);
            text-transform: uppercase;
            color: var(--neutral-900);
            height: calc(3rem + 15px);
            cursor: pointer;
            &:hover {
              background: linear-gradient(
                90deg,
                var(--light-salmon-100) 0%,
                var(--light-salmon-50) 100%
              );
            }
            &:focus {
              outline: 2px solid var(--neutral-700);
              outline-offset: 3px;
            }
          }
        }
        & > .pro {
          width: calc(21rem + 14px);
          height: 100%;
          padding-inline: var(--size-300);
          padding-block: var(--size-500);
          background-color: var(--neutral-100);
          background-image: url(../images/pattern-glow.svg);
          background-repeat: no-repeat;
          background-size: 42.75rem;
          background-position: right 70% bottom 135%;
        }
      }
    }
    .testimonial {
      max-width: calc(60rem + 10px);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: var(--size-400);
      .stars {
        display: flex;
        column-gap: var(--size-075);
        img {
          width: 28px;
          height: 28px;
        }
      }
      blockquote {
        text-align: center;
        color: var(--neutral-900);
        & + p {
          color: var(--neutral-700);
        }
      }
    }
  }
  footer {
    padding-block-start: clamp(48px, calc(2.9375vw + 38.7082px), 80px);
    padding-inline: clamp(16px, calc(11.62vw - 49.06px), 135px);
    border-radius: var(--size-200) var(--size-200) 0 0;
    background: var(--neutral-900);
    background-image: url(../images/pattern-dark-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--size-800);
    .main-contant-container {
      max-width: calc(47rem + 1px);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: var(--size-500);
      h2 {
        color: var(--neutral-100);
        text-align: center;
      }
      .call-to-action {
        row-gap: var(--size-300);
        a {
          color: #ffffff;
          border: var(--size-025) solid #ffffff;
          background-color: transparent;
          &:hover {
            background: linear-gradient(
              90deg,
              var(--neutral-700) 0%,
              var(--neutral-900) 100%
            );
          }
          &:focus {
            outline: 2px solid #ffffff;
          }
        }
        .component-total-testimonial {
          min-height: calc(3rem + 1px);
          background-size: 28px 28px;
          small {
            color: var(--neutral-100);
          }
        }
      }
    }
    .footer-contant {
      max-width: calc(73rem + 2px);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: var(--size-300);
      border-block-start: 1px solid var(--neutral-700);
      p {
        color: #ffffff;
      }
      .social-media {
        display: flex;
        column-gap: var(--size-300);
        a:hover img{
          opacity: 0.6;
        }
      }
    }
  }
}