/* Design System */
img[loading='lazy'] {
  content-visibility: auto;
}

/* CLS Prevention & Performance Optimizations */
img[priority] {
  content-visibility: visible;
}

/* Image aspect ratio preservation */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

.btn-primary-cdt,
.btn-primary-cdt:hover,
.btn-primary-cdt:focus {
  border: none;
  background: var(--color-blue-100);
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.btn-primary-cdt:hover,
.btn-primary-cdt:focus {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
}

.btn-primary-cdt:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2);
}

.btn-hero-desktop {
  width: 355px;
  height: 70px;
  border-radius: 99px;
  padding: 20px 32px;
  gap: 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 100%;
}

.hero-title-1 {
  font-size: 48px;
  color: #525252;
}

.hero-title-1 {
  font-size: 48px;
  color: #525252;
}

.hero-title-5 {
  font-size: 32px;
}

.hero-title-6 {
  font-size: 30px;
}

.hero-text-1 {
  font-size: 24px;
  color: #525252;
}

.hero-big-title-1 {
  font-size: 90px;
}

.hero-title-1,
.hero-title-5,
.hero-title-6 .hero-text-1 {
  font-display: swap;
}

.hero-label-1 {
  font-size: 24px;
  color: #525252;
}

.hero-card-text-1 {
  font-size: 20px;
  color: #525252;
}

.hero-label-2 {
  font-size: 21px;
  color: #525252;
}

.hero-card-text-2 {
  font-size: 18px;
  color: #525252;
}

.hero-label-6 {
  font-size: 12px;
  color: #525252;
}

.hero-card-text-6 {
  font-size: 11px;
  color: #525252;
}

@media (max-width: 767.98px) {
  .hero-big-title-1 {
    font-size: 65px;
  }

  .hero-big-title-6 {
    font-size: 32px;
  }

  .hero-title-1 {
    font-size: 28px;
  }

  .hero-title-5 {
    font-size: 18px;
  }

  .hero-title-6 {
    font-size: 16px;
  }

  .hero-text-1 {
    width: 100%;
    font-size: 16px;
  }

  .hero-label-1 {
    font-size: 20px;
  }

  .hero-label-2 {
    font-size: 18px;
  }

  .hero-label-4 {
    font-size: 13px;
  }

  .hero-text-4 {
    font-size: 12px;
  }

  .hero-card-text-1 {
    font-size: 16px;
  }

  .hero-big-title-1 {
    font-size: 68px;
  }

  .btn-hero-mobile {
    width: 229px;
    height: 48.8px;
    border-radius: 63.86px;
    padding: 12.9px 20.64px;
    gap: 6.45px;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
  }
}
/* End Design System */