:root {
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --teal-500: #0d9488;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", sans-serif;
}

.display-font {
  font-family: "Sora", sans-serif;
}

.hero-bg {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.22), transparent 38%),
    radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.25), transparent 36%),
    linear-gradient(130deg, #f8fdff 0%, #effbff 45%, #f8fffd 100%);
}

.inner-hero-bg {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.18), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(13, 148, 136, 0.2), transparent 32%),
    linear-gradient(145deg, #f8fbff 0%, #f2fbff 40%, #f7fffc 100%);
}

.fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.65s ease-out forwards;
}

.fade-up-delay-1 {
  animation-delay: 120ms;
}

.fade-up-delay-2 {
  animation-delay: 220ms;
}

.float-card {
  animation: floatY 5s ease-in-out infinite;
}

.card-hover {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -16px rgba(2, 132, 199, 0.35);
}

.soft-shadow {
  box-shadow: 0 12px 36px -18px rgba(15, 23, 42, 0.3);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}