:root {
  --bs-primary: #0f8bf1;
  --bs-primary-rgb: 15, 139, 241;
  --bg-neutral: #f8fafc;
}

body {
  scroll-behavior: smooth;
}

.bg-gradient {
  background: radial-gradient(circle at 15% 20%, rgba(15, 139, 241, 0.12), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(15, 139, 241, 0.1), transparent 40%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 70%);
}

.hero-visual {
  background: linear-gradient(135deg, rgba(15, 139, 241, 0.12), rgba(15, 139, 241, 0.02));
  border: 1px solid rgba(15, 139, 241, 0.15);
}

.floating-card {
  position: absolute;
  top: 10%;
  right: 12%;
}

.card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(15, 139, 241, 0.1);
  color: #0f8bf1;
}

.logo-placeholder {
  background: #e8f2ff;
  border-radius: 12px;
  padding: 18px;
}

.fade-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Lift effect for cards (defined after fade-section to override transforms on hover) */
.card-lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transform-origin: center top;
  will-change: transform, box-shadow;
}

.card-lift:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(15, 139, 241, 0.24);
  cursor: default;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0f8bf1;
  --bs-btn-border-color: #0f8bf1;
  --bs-btn-hover-bg: #0d7ad4;
  --bs-btn-hover-border-color: #0d7ad4;
  --bs-btn-active-bg: #0c6cbf;
  --bs-btn-active-border-color: #0c6cbf;
  box-shadow: 0 8px 20px rgba(15, 139, 241, 0.2);
}

.btn-outline-primary {
  --bs-btn-color: #0f8bf1;
  --bs-btn-border-color: #0f8bf1;
  --bs-btn-hover-bg: rgba(15, 139, 241, 0.08);
  --bs-btn-hover-border-color: #0f8bf1;
}

.nav-link {
  font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
  color: #0f8bf1;
}

#contact .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 139, 241, 0.15);
  border-color: #0f8bf1;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 139, 241, 0.15);
}

/* Subtle background breathing */
@keyframes bgShift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.bg-gradient {
  background-size: 200% 200%;
  animation: bgShift 20s ease-in-out infinite;
}

/* Gentle float for hero card */
@keyframes floatCard {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating-card {
  animation: floatCard 8s ease-in-out infinite;
}

/* Micro-interaction for primary buttons */
.btn-primary {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 139, 241, 0.28);
}

/* Slight scale on logo placeholders */
.logo-placeholder {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logo-placeholder:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 139, 241, 0.18);
}

@media (max-width: 576px) {
  .floating-card {
    position: static;
    margin-top: 1rem;
  }
}