:root {
  --brand-dark: #01377d;
  --brand: #027cc9;
  --brand-light: #97e7f5;
  --brand-gray: #d1d3d4;
  --brand-black: #000000;

  --brand-gradient: linear-gradient(90deg, #027cc9 0%, #97e7f5 100%);
  --brand-gradient-dark: linear-gradient(90deg, #000000 0%, #d1d3d4 100%);
}

body {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}
.video-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 15, 25, 0.85) 0%,
    rgba(10, 15, 25, 0.75) 100%
  );
}

.nav-scrolled {
  background-color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.nav-transparent {
  background-color: transparent;
}
.smooth-scroll {
  scroll-behavior: smooth;
}
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ------- */
.perspective {
  perspective: 1200px;
}

.flip-card-inner {
  position: relative;
  height: 360px;
  transform-style: preserve-3d;
  transition: transform 0.7s;
}

.group:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ------- parallax counter -------- */
.counter {
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(151, 231, 245, 0.3);
}