

img.img-loading {
  filter: blur(12px) saturate(0.8);
  transform: scale(1.04);
  transition: filter 0.5s ease, transform 0.5s ease;
  background: linear-gradient(135deg, #e8e8ed 0%, #f0f0f5 50%, #e8e8ed 100%);
  background-size: 200% 200%;
  animation: imgShimmer 1.6s ease-in-out infinite;
}

img.img-loaded {
  filter: none;
  transform: none;
  animation: none;
  background: none;
}

@keyframes imgShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.back-to-top {
  background: linear-gradient(135deg, var(--septeni-blue), var(--septeni-red)) !important;
}

.footer-links a:hover {
  background: linear-gradient(90deg, #FF6E6E, #6FB5FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ext-arrow {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.85;
  margin-left: 2px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column-reverse;
    gap: 16px;
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
  }
}

.header-service-link {
  position: relative;
  overflow: hidden;
}
.header-service-link::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-service-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.menu-btn {
  transition: background 0.3s ease, transform 0.3s ease;
  border-radius: 50%;
}
.menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.back-to-top {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}
.back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 80, 170, 0.35);
}
