html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  color: #111827;
}

.glass-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

.hero-gradient {
  background: radial-gradient(
    circle at 70% 30%,
    rgba(31, 111, 255, 0.05) 0%,
    transparent 50%
  );
}

.tech-grid {
  background-image: radial-gradient(#1f6fff 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.1;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: #1f6fff;
}

.glow-icon:hover {
  filter: drop-shadow(0 0 8px #1f6fff);
  color: #1f6fff;
}

.timeline-line {
  background: linear-gradient(to bottom, #1f6fff 0%, #d1d5db 100%);
}

@media (min-width: 768px) and (max-width: 1023px) {
  h1.font-display-lg {
    font-size: 40px;
  }

  section[id="services"] h2.font-display-lg,
  section[id="process"] h2.font-display-lg,
  section[id="tech"] h2.font-display-lg,
  section[id="industries"] h2.font-display-lg,
  section[id="faq"] h2.font-display-lg {
    font-size: 36px;
  }

  #process .space-y-12 > div > div:last-child {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  #why-choose .lg\\:aspect-square {
    padding: 1rem !important;
  }

  #why-choose .lg\\:aspect-square > div:first-child {
    padding: 1rem !important;
  }

  #why-choose .lg\\:aspect-square > div:first-child .space-y-6 {
    gap: 0.75rem !important;
  }

  #why-choose .grid.grid-cols-3.gap-2 > div {
    height: 3rem !important;
  }

  #why-choose .absolute.-bottom-4 {
    padding: 0.5rem 0.75rem !important;
  }

  #why-choose .absolute.-bottom-4 p:first-child {
    font-size: 1.25rem !important;
  }

  #why-choose .h-2 {
    height: 0.5rem !important;
  }
}