#hero-row {
  background: transparent url('/images/bg-hh-library.jpg') no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  padding: 2rem 0;
  color: #fff;
  text-shadow: 1px 1px 10px rgb(0, 0, 0);

  .hero-buttons, .hero-buttons .btn {
    font-size: 1.5rem;
  }

  .hero-buttons .btn {
    font-size: 1.15rem;
  }

  @media (min-width: 768px) {
    padding: 2.5rem 0;
  }

  h1 span {
    font-weight: 400;
  }

  #lappy-container {
    padding: 0;
  }
}

#hero-text {
  margin-left: 0;

  @media (min-width: 992px) {
    margin-left: -6rem;
  }

  @media (max-width: 768px) {
    text-align: center;
  }

  .lead {
    font-size: 1.33rem;
  }

  #hero-platforms {
    color: white;
  }
}

#anti-ai-icon {
  padding: 0 !important;
}

// Responsive font utilities
.display-6 {
  @media (min-width: 768px) {
    &.display-md-4 {
      font-size: var(--bs-display4-font-size);
    }
    &.display-md-5 {
      font-size: var(--bs-display5-font-size);
    }
  }
}

.h5 {
  @media (min-width: 768px) {
    &.h4-md {
      font-size: var(--bs-h4-font-size);
    }
  }
}

.h4 {
  @media (min-width: 768px) {
    &.h3-md {
      font-size: var(--bs-h3-font-size);
    }
  }
}

.fa-lg {
  @media (min-width: 768px) {
    &.fa-md-2x {
      font-size: 2em;
    }
  }
}

// Mobile specific styles
@media (max-width: 991px) {
  #hero-text {
    text-align: center;
  }
}

// Only apply negative margins on larger mobile screens
@media (min-width: 768px) and (max-width: 991px) {
  #hero-row {
    margin: -5px -1.75rem 0;
  }
}

// Small mobile screens - no negative margins
@media (max-width: 767px) {
  #hero-row.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    min-height: 350px;
    display: flex;
    align-items: center;
  }

  .hero-section {
    overflow-x: hidden;

    .container-fluid {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}


#core-benefits {
  .lead {
    font-size: 1.15rem;
  }

  p {
    font-size: 0.95rem;
    line-height: 1.6;

    @media (min-width: 768px) {
      font-size: 1rem;
      line-height: 1.7;
    }
  }
}

// Mobile typography improvements
@media (max-width: 576px) {
  #hero-text h1 {
    font-size: 1.75rem !important;
    line-height: 1.3;
  }

  #core-benefits h2,
  #features h2 {
    font-size: 1.5rem !important;
  }

  .card-body p {
    line-height: 1.6;
  }

  // Trust indicators on very small screens
  .bg-primary.text-white .display-6 {
    font-size: 2rem !important;
  }
}



#features h3 {
  color: #2D353E;
  font-size: 1.25rem;
  font-weight: 600;

  @media (min-width: 768px) {
    font-size: 1.33rem;
  }
}

#features .lead {
  line-height: 2.33rem;
}

#features p {
  font-size: 1rem;
  line-height: 1.7;
  color: #495057 !important;
  margin-bottom: 0;
  text-wrap: pretty;

  @media (min-width: 768px) {
    font-size: 1rem;
    line-height: 1.8;
  }
}

.rounded-circle {
  height: 3rem;
  width:  3rem;
  font-size: 0.8rem;
  align-content: center;
  text-align: center;
  line-height: 1;
  padding: .25rem 0 0 0 !important;
}