@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap");

@media (min-width: 1024px) {
  .hero .hero-subtitle,
  .hero .hero-subtitle p {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    font-size: clamp(2rem, 2.1vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }

  .hero .hero-subtitle br {
    display: none !important;
  }
}

.hero {
  position: relative !important;
  isolation: isolate;
}

.hero .hero-bg-slide {
  filter: brightness(0.58) saturate(0.92) !important;
}

.hero .hero-bg-wash {
  background:
    linear-gradient(
      180deg,
      rgba(7, 15, 31, 0.58) 0%,
      rgba(7, 15, 31, 0.68) 34%,
      rgba(7, 15, 31, 0.76) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5, 12, 28, 0.46) 0%,
      rgba(6, 16, 36, 0.3) 40%,
      rgba(5, 12, 28, 0.5) 100%
    ),
    radial-gradient(circle at 18% 20%, rgba(42, 105, 214, 0.18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(13, 145, 220, 0.14), transparent 26%) !important;
  opacity: 1 !important;
}

.hero .hero-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-shadow: 0 14px 34px rgba(3, 10, 26, 0.42) !important;
}

.hero .hero-subtitle,
.hero .hero-subtitle p {
  font-family: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  color: #f8fbff;
  text-shadow: 0 6px 20px rgba(3, 10, 26, 0.34) !important;
}

.hero .hero-slide-text,
.hero .hero-tag,
.hero .hero-badge-float,
.hero .hero-cta .btn,
.hero .hero-stat-label,
.hero .hero-scroll {
  font-family: "DM Sans", system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
}

.hero .hero-slide-text {
  letter-spacing: 2px !important;
}

.hero .hero-stat-value {
  font-family: "DM Sans", system-ui, sans-serif !important;
}

.hero .hero-tag {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f8fbff !important;
  box-shadow: 0 14px 30px rgba(3, 10, 26, 0.26) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero .hero-badge-float {
  box-shadow: 0 14px 32px rgba(3, 10, 26, 0.2) !important;
}

@media (max-width: 768px) {
  .hero .hero-bg-slide {
    filter: brightness(0.52) saturate(0.9) !important;
  }

  .hero .hero-bg-wash {
    background:
      linear-gradient(
        180deg,
        rgba(7, 15, 31, 0.62) 0%,
        rgba(7, 15, 31, 0.74) 38%,
        rgba(7, 15, 31, 0.82) 100%
      ),
      linear-gradient(
        90deg,
        rgba(5, 12, 28, 0.5) 0%,
        rgba(6, 16, 36, 0.34) 42%,
        rgba(5, 12, 28, 0.54) 100%
      ) !important;
  }
}

.hero-cta .btn {
  background: linear-gradient(90deg, #2a6fe6 0%, #158edd 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 20px rgba(42, 111, 230, 0.35) !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.hero-cta .btn:hover {
  background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%) !important;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.45) !important;
  transform: translateY(-2px) !important;
}