html, body { height: 100%; margin: 0; }
* { box-sizing: border-box; }

.app-wrapper {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'DM Sans', sans-serif;
}

.heading-font { font-family: 'Playfair Display', serif; }

.grid-bg {
  background-image:
          linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.glow-dot {
  width: 320px; height: 320px;
  border-radius: 50%;
  position: absolute;
  filter: blur(100px);
  opacity: .15;
  pointer-events: none;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .7s ease forwards; opacity: 0; }
.fade-up-d1 { animation-delay: .15s; }
.fade-up-d2 { animation-delay: .3s; }
.fade-up-d3 { animation-delay: .45s; }
.fade-up-d4 { animation-delay: .6s; }

.service-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}

.stat-num { font-variant-numeric: tabular-nums; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}