:root {
  --color-gray-50: oklch(0.984 0.003 247.858);
  --color-gray-100: oklch(0.968 0.007 247.896);
  --color-gray-200: oklch(0.929 0.013 255.508);
  --color-gray-300: oklch(0.869 0.022 252.894);
  --color-gray-400: oklch(0.704 0.04 256.788);
  --color-gray-500: oklch(0.554 0.046 257.417);
  --color-gray-600: oklch(0.446 0.043 257.281);
  --color-gray-700: oklch(0.372 0.044 257.287);
  --color-gray-800: oklch(0.279 0.041 260.031);
  --color-gray-900: oklch(0.208 0.042 265.755);
  --color-gray-950: oklch(0.129 0.042 264.695);

  --color-amber-50: oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-300: oklch(0.879 0.169 91.605);
  --color-amber-400: oklch(0.828 0.189 84.429);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-700: oklch(0.555 0.163 48.998);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-900: oklch(0.414 0.112 45.904);
  --color-amber-950: oklch(0.279 0.077 45.635);

  --color-border-default: rgb(from var(--color-gray-950) r g b / 5%);
  --color-border-input: rgb(from var(--color-gray-950) r g b / 25%);
  --color-border-accent: rgb(from var(--color-amber-500) r g b / 10%);
  --color-border-input-accent: var(--color-amber-500);

  --shadow-lg: 0 10px 15px -3px var(--color-border-default), 0 4px 6px -4px var(--color-border-default);
  --shadow-xl: 0 20px 25px -5px var(--color-border-default), 0 8px 10px -6px var(--color-border-default);
  --shadow-2xl: 0 25px 50px -12px rgb(from var(--color-gray-950) r g b / 25%);

  --shadow-amber-xl: 0 20px 25px -5px var(--color-border-accent), 0 8px 10px -6px var(--color-border-accent);
  --shadow-amber-2xl: 0 25px 50px -12px rgb(from var(--color-amber-500) r g b / 25%);
}

body {
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  background: linear-gradient(180deg, var(--color-gray-50) 0%,var(--color-gray-100) 100%);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: white;
  background-color: var(--color-amber-500);
  cursor: pointer;
  transition: all 300ms ease;

  &:hover {
    background-color: var(--color-amber-700);
  }

  &:focus {
    outline-color: var(--color-amber-700);
  }

  &.secondary {
    color: var(--color-gray-900);
    border: 1px solid var(--color-border-input);
    background-color: transparent;
    transition: border 200ms ease;

    &:hover {
      border: 1px solid var(--color-border-input-accent);
    }
  }

  @media (min-width: 1024px) {
    height: 48px;
    font-size: 20px;
    line-height: 32px;
    padding: 8px 24px;
  }
}

.accent {
  color: var(--color-amber-500);
}

.dialog {
  min-width: 450px;
  border-radius: 16px;
  padding: 32px;

  &::backdrop {
    background-color: rgb(from var(--color-gray-950) r g b / 80%);
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  h2 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .dialog-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
  }

  .email-input {
    flex-grow: 1;
    height: 32px;
    padding: 12px 24px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    border-radius: 16px;
    background-color: transparent;
    border: 1px solid var(--color-border-input);
    color: var(--color-gray-900);
    outline-color: vaR(--color-amber-500);

    &::placeholder {
      color: var(--color-gray-500);
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  padding-top: 48px;
  color: var(--color-gray-900);

  @media (min-width: 1024px) {
    padding-top: 80px;
    gap: 180px;
  }
}

.section {
  max-width: 1440px;
  padding: 0 24px;
  margin: 0 auto;

  h1, h2, h3 {
    color: var(--color-gray-900);
    font-family: 'Crimson Pro', serif;
  }

  h1 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
  }

  h2 {
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 24px;
  }

  em {
    font-style: italic;
  }

  strong {
    font-weight: 700;
  }

  @media (min-width: 1024px) {
    padding: 0 80px;

    h1 {
      font-size: 48px;
      line-height: 60px;
    }

    h2 {
      font-size: 40px;
      line-height: 54px;
      margin-bottom: 54px;
    }
  }
}

.section-hero {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;

  .hero-image-container {
    width: 100%;
    max-width: 1024px;
    aspect-ratio: 16/9;
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-lg);
  }

  .hero-image {
    max-width: 100%;
    object-fit: cover;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;

    .subtitle {
      font-size: 16px;
      line-height: 28px;
      color: var(--color-gray-700);
    }
  }

  .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .addendum {
    font-size: 12px;
    line-height: 14px;
    color: var(--color-gray-500);
  }

  @media (min-width: 1024px) {
    .subtitle {
      font-size: 20px;
      line-height: 32px;
    }

    .addendum {
      font-size: 14px;
      line-height: 16px;
    }
  }
}

.section-what-is-a-rag {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px;
  justify-content: center;
  padding: 64px 24px 80px;
  font-size: 16px;
  line-height: 28px;
  background-color: var(--color-gray-800);
  color: var(--color-gray-50);

  h2 {
    color: var(--color-gray-50);
    margin-bottom: 0;
  }

  .rag-description {
    text-align: center;
    padding-left: 16px;
  }

  .rag-description-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 16px 0 16px 32px;
  }

  @media (min-width: 1024px) {
    padding: 96px 24px 120px;
    font-size: 20px;
    line-height: 32px;
  }
}

.section-why-quick-rag {
  .why-features-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;

    li {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      align-items: center;
      text-align: center;
      padding: 32px;
      border-radius: 16px;

      &:nth-child(odd) {
        border: 1px solid var(--color-border-default);
        background-color: var(--color-gray-50);
      }

      &:nth-child(even) {
        border: 1px solid var(--color-border-accent);
        background-color: var(--color-amber-50);
      }

      .icon {
        font-size: 32px;
        margin-bottom: 8px;
      }

      .feature {
        font-size: 16px;
        line-height: 28px;
        font-weight: 500;
      }

      .feature-description {
        font-size: 14px;
        line-height: 16px;
        color: var(--color-gray-700);
      }
    }
  }

  @media (min-width: 1024px) {
    .why-features-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      li {
        .feature {
          font-size: 20px;
          line-height: 32px;
        }

        .feature-description {
          font-size: 16px;
          line-height: 20px;
        }
      }
    }
  }
}

.section-what-you-can-build {
  @media (max-width: 1024px) {
    display: none;
  }

  max-width: 100%;
  margin: 0;
  padding: 32px 0;

  .build-title {
    margin-bottom: 8px;
  }

  .build-subtitle {
    margin-bottom: 54px;
    text-align: center;
    font-size: 20px;
    line-height: 32px;
    color: var(--color-gray-700);
  }


  .build-features-list-container {
    position: relative;
    overflow: clip;
    width: 100%;

    .before-gradient {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 240px;
      background: linear-gradient(90deg, var(--color-gray-100) 0%, transparent 100%);
    }

    .after-gradient {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 240px;
      background: linear-gradient(270deg, var(--color-gray-100) 0%, transparent 100%);
    }
  }

  .build-features-list {
    --gap: 16px;

    display: flex;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    animation-name: marquee-animation;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-color: transparent;
    padding-left: var(--gap);

    li {
      padding: 16px 32px;
      border-radius: 32px;
      color: var(--color-gray-50);
      background-color: var(--color-gray-950);
      flex-shrink: 0;
      font-size: 20px;
      line-height: 32px;
    }

    &:nth-child(even) {
      animation-direction: normal;
      animation-duration: 50s;

      li:nth-child(odd) {
        color: var(--color-amber-950);
        background-color: var(--color-amber-100);
      }
    }

    &:nth-child(odd) {
      animation-direction: reverse;
      animation-duration: 30s;

      li:nth-child(even) {
        color: var(--color-amber-950);
        background-color: var(--color-amber-100);
      }
    }

    + .build-features-list {
      margin-top: 16px;
    }
  }
}

.section-how-it-works {
  .steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    font-size: 16px;
    line-height: 28px;
  }

  .step-number {
    color: var(--color-gray-500);
  }

  .step-label {
    margin-top: 16px;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
  }

  .step-label-addendum {
    display: inline-flex;
    margin-top: 8px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: var(--color-gray-700);
  }

  @media (min-width: 1024px) {
    .steps {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      gap: 64px;
    }

    .step {
      font-size: 20px;
      line-height: 32px;
    }

    .step-label {
      font-size: 20px;
      line-height: 32px;
    }

    .step-label-addendum {
      font-size: 16px;
      line-height: 20px;
    }
  }
}

.section-pricing {
  .pricing-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pricing-card-title {
    font-family: "Crimson Pro", serif;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    color: var(--color-gray-900);
  }

  .pricing-card-amount {
    font-size: 28px;
    font-weight: 700;

    .amount-per-month {
      font-size: 16px;
      line-height: 20px;
      font-weight: 500;
      color: var(--color-gray-500);
    }
  }

  .pricing-card-addendum {
    color: var(--color-gray-600);
  }

  .pricing-card-features {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    color: var(--color-gray-700);
  }

  .pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 32px 24px;
    border: 1px solid var(--color-border-default);
    border-radius: 16px;

    .button {
      margin-top: 24px;
      width: 100%;
    }

    .button-disabled {
      background-color: var(--color-gray-400);
      color: var(--color-gray-100);
      cursor: not-allowed;
    }

    &.free {
      box-shadow: var(--shadow-xl);
      transition: box-shadow 200ms ease-in;

      &:hover {
        box-shadow: var(--shadow-2xl);
      }
    }

    &.solo {
      background-color: var(--color-gray-200);

      .pricing-card-title {
        color: var(--color-gray-600);
      }

      .pricing-card-amount {
        color: var(--color-gray-500);

        .amount-per-month {
          color: var(--color-gray-400);
        }
      }

      .pricing-card-addendum {
        color: var(--color-gray-500);
      }

      .pricing-card-features {
        color: var(--color-gray-400);
      }
    }
  }

  @media (min-width: 1024px) {
    .pricing-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
    }

    .pricing-card {
      gap: 32px;
      width: 450px;
      padding: 32px 64px 48px;
    }

    .pricing-card-title {
      font-size: 32px;
    }

    .pricing-card-amount {
      font-size: 36px;
    }

    .pricing-card-features {
      margin-top: 24px;
    }
  }
}

.section-for-who {
  .profiles-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .profile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    text-align: center;
  }

  .profile-image {
    border-radius: 50%;
    object-fit: cover;

    &.client {
      box-shadow: var(--shadow-amber-xl);
      transition: all 300ms ease;

      &:hover {
        box-shadow: var(--shadow-amber-2xl);
      }
    }
  }

  @media (min-width: 1024px) {
    .profiles-list {
      display: grid;
      align-items: center;
      grid-template-columns: repeat(3, 1fr);
      gap: 64px 96px;
    }

    .profile {
      gap: 16px;
      font-size: 20px;
      line-height: 32px;
    }
  }
}

.section-call-to-action {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  font-size: 16px;
  line-height: 28px;
  background-color: var(--color-gray-800);
  color: var(--color-gray-50);

  h2 {
    color: var(--color-gray-50);
    margin-bottom: 0;
  }

  .description {
    text-align: center;
    color: var(--color-gray-200);
  }

  .button {
    margin-top: 16px;
  }

  @media (min-width: 1024px) {
    gap: 54px;
    padding: 96px 24px;
    font-size: 20px;
    line-height: 32px;
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-800);
  color: var(--color-gray-50);
  margin: 0;
  padding: 0 24px 80px;
  font-size: 18px;
}

@keyframes marquee-animation {
  100% {
    transform: translateX(-50%);
  }
}