@media screen and (min-width: 768px) {
  .hero__actions {
    flex-direction: row;
  }

  .hero__actions .button {
    width: auto;
  }

  .hero__benefits {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .hero__panel-image {
    display: none;
  }

  .segments__about {
    gap: 24px;
  }

  .segments__copy {
    padding: clamp(24px, calc(24px + (40 - 24) * ((100vw - 768px) / (992 - 768))), 40px);
  }

  .segments__copy,
  .segments__visual {
    width: clamp(40%, calc(61% - 1.5vw), 50%);
  }

  .segments__visual {
    display: block;
  }

  .segments__copy-title {
    font-size: clamp(32px, calc(32px + (40 - 32) * ((100vw - 768px) / (992 - 768))), 40px);
  }

  .differentials__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .differentials__card--sector,
  .differentials__card--technology {
    grid-column: span 4;
    min-height: 170px;
  }

  .differentials__card--support,
  .differentials__card--results {
    grid-column: span 2;
    min-height: 170px;
  }

  .differentials__card--support {
    max-height: 283px;
  }

  .differentials__card--custom,
  .differentials__card--integration {
    grid-column: span 3;
    min-height: 170px;
  }

  .differentials__card--support .differentials__graphic,
  .differentials__card--results .differentials__graphic {
    position: relative;
    top: clamp(10px, calc(22px - 1vw), 15px);
  }

  .differentials__card--integration .differentials__graphic {
    left: 0;
  }

  .differentials__card--custom .differentials__graphic {
    width: 100%;
    height: clamp(214px, calc(154px + 7.8vw), 248px);
  }

  .differentials__graphic {
    width: 100%;
    height: clamp(186px, calc(264px - 6.5vw), 214px);
  }

  .differentials__card--technology .differentials__graphic {
    height: clamp(214px, calc(150px + 8.3vw), 250px);
  }

  .differentials__card--results .differentials__graphic {
    height: clamp(200px, calc(239px - 3.25vw), 214px);
  }

  .cta__content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    min-height: 500px;
    padding: clamp(56px, calc(8vw + 0.5px), 100px) clamp(56px, calc(8vw + 0.5px), 100px) 0;
    gap: 24px;
  }

  .cta .button {
    width: fit-content;
  }

  .cta__headline {
    align-self: center;
    max-width: 430px;
    margin-bottom: 34px;
  }

  .cta__photo {
    width: 100%;
    height: 100%;
  }

  .cta__photo img {
    border-radius: 14px 14px 0 0;
  }

  .footer__grid,
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media screen and (min-width: 992px) {
  .page--menu-open {
    overflow: auto;
  }

  .header--menu-open {
    background: color-mix(in srgb, var(--color-white) 20%, transparent);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }

  .header__inner {
    min-height: 80px;
    padding: 24px;
  }

  .header__logo img {
    width: 170px;
    height: 44px;
  }

  .header__menu-toggle {
    display: none;
  }

  .header__nav {
    position: static;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .header__nav-link {
    width: auto;
  }

  .hero .layout__container {
    width: min(var(--container-desktop-lg), calc(100% - 48px));
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 388px;
    gap: 48px;
  }

  .hero__panel {
    order: 0;
  }

  .segments__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .hero__panel-image {
    display: block;
  }

  .problems__card {
    height: 600px;
  }

  .problems__card--dark {
    background: url('../assets/problems-card-01.png') center/cover no-repeat;
    background-position-y: -118px;
  }

  .problems__card--image {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-black) 8%, transparent) 0%,
        color-mix(in srgb, var(--color-black) 82%, transparent) 76%
      ),
      url('../assets/problems-card-02.png') center/cover;
  }

  .problems__card--photo {
    background: url('../assets/problems-card-03.png') center/cover no-repeat;
    background-position-y: -118px;
  }

  .privacy__intro {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: stretch;
  }

  .privacy__content {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
  }

  .privacy__toc {
    position: sticky;
    top: 110px;
  }
}

@media screen and (min-width: 1400px) {
  .header__inner{
    padding: 24px 0;
  }
}