@keyframes loaderFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  95% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes spinSmooth {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}
.loader-mark {
  animation: spinSmooth 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
/* Hero section entrance */
@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.hero::before {
  animation: heroReveal 1.2s ease-out 0.3s both;
}
/* Staggered element reveals on load */
@keyframes elementReveal {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-copy {
  animation: elementReveal 0.8s ease-out 0.4s both !important;
}
.hero-panel {
  animation: elementReveal 0.8s ease-out 0.6s both !important;
}
/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
/* Enhanced reveal with stagger */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children elements */
.card-grid .reveal {
  transition-delay: calc(50ms * var(--reveal-index, 0));
}
.stats-grid .reveal {
  transition-delay: calc(80ms * var(--reveal-index, 0));
}
.process .reveal {
  transition-delay: calc(70ms * var(--reveal-index, 0));
}
.testimonials-grid .reveal {
  transition-delay: calc(90ms * var(--reveal-index, 0));
}
/* Slide-in animations */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-48px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(48px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Scale-in effect */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Parallax movement on scroll */
@keyframes parallaxFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-16px);
  }
}
.floating-shape {
  animation: parallaxFloat 6s ease-in-out infinite !important;
}
.shape-one {
  animation-delay: 0s !important;
}
.shape-two {
  animation-delay: -2s !important;
}
/* ============================================================
   HOVER EFFECTS
   ============================================================ */
/* Button hover - lift and glow */
@keyframes buttonLift {
  0% {
    transform: translateY(0);
    box-shadow: 0 14px 28px rgba(15, 107, 63, 0.22);
  }
  50% {
    box-shadow: 0 20px 40px rgba(15, 107, 63, 0.28);
  }
  100% {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(15, 107, 63, 0.32);
  }
}
.btn {
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 500ms, height 500ms;
  pointer-events: none;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn:hover {
  animation: buttonLift 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 24px 48px rgba(15, 107, 63, 0.32),
              inset 0 0 20px rgba(255, 255, 255, 0.15);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}
.btn-outline:hover {
  background: linear-gradient(135deg, var(--color-primary-soft), #f0f9f5);
  border-color: var(--color-primary);
  box-shadow: 0 20px 40px rgba(15, 107, 63, 0.15),
              inset 0 0 20px rgba(15, 107, 63, 0.08);
}
/* Card hover - elevation and tilt */
@keyframes cardElevate {
  0% {
    transform: translateY(0) rotateX(0);
    box-shadow: 0 10px 30px rgba(16, 32, 25, 0.045);
  }
  100% {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow: 0 32px 64px rgba(15, 107, 63, 0.18);
  }
}
.card:hover,
.product-card:hover,
.service-card:hover,
.testimonial-card:hover,
.industry-card:hover,
.process-step:hover {
  animation: cardElevate 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  border-color: rgba(15, 107, 63, 0.3);
}
/* Image zoom on card hover */
.product-card:hover img,
.image-card:hover img {
  animation: imageZoom 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes imageZoom {
  0% {
    transform: scale(1) brightness(1);
  }
  100% {
    transform: scale(1.08) brightness(1.05);
  }
}
/* Image overlay effect on hover */
.product-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 107, 63, 0) 0%, rgba(15, 107, 63, 0.15) 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.product-card:hover figure::after {
  opacity: 1;
}
.product-card figure {
  position: relative;
  overflow: hidden;
}
/* ============================================================
   INTERACTIVE ELEMENTS
   ============================================================ */
/* Navigation link animations */
.nav-link {
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--color-primary);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
/* Icon badge animations */
.icon-badge {
  position: relative;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 300ms ease;
}
.service-card:hover .icon-badge,
.card:hover .icon-badge {
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 12px 28px rgba(15, 107, 63, 0.2);
}
/* Icon rotation on hover */
.info-item .icon-badge {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info-item:hover .icon-badge {
  transform: rotate(12deg) scale(1.08);
}
/* ============================================================
   FORM ANIMATIONS
   ============================================================ */
/* Label float animation */
.field label {
  position: relative;
  transition: color 300ms ease;
}
.field input:focus ~ label,
.field textarea:focus ~ label {
  color: var(--color-primary);
}
/* Input focus glow */
.field input:focus,
.field textarea:focus {
  animation: inputFocus 400ms ease;
  box-shadow: 0 0 0 4px var(--color-primary-soft),
              inset 0 0 16px rgba(15, 107, 63, 0.08);
}
@keyframes inputFocus {
  0% {
    border-color: var(--color-line);
  }
  100% {
    border-color: var(--color-primary);
  }
}
/* Form field wave animation on validation */
@keyframes fieldWave {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.field-error {
  animation: fieldWave 400ms ease-in-out;
}
/* ============================================================
   TEXT ANIMATIONS
   ============================================================ */
/* Gradient text animation */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Letter reveal effect */
@keyframes letterReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
   SCROLL PROGRESS INDICATOR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 200ms ease;
}
/* ============================================================
   SECTION TRANSITIONS
   ============================================================ */
/* Section fade transition */
@keyframes sectionFade {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.section {
  animation: sectionFade 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* ============================================================
   BACKGROUND ANIMATIONS
   ============================================================ */
/* Subtle floating blobs */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-20px) translateX(12px);
  }
  66% {
    transform: translateY(10px) translateX(-8px);
  }
}
.floating-gradient {
  position: fixed;
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: floatSlow 12s ease-in-out infinite;
}
/* ============================================================
   FOOTER ANIMATIONS
   ============================================================ */
/* Footer link underline */
.footer-links a {
  position: relative;
  transition: color 300ms ease;
}
.footer-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-links a:hover::after {
  transform: scaleX(1);
}
/* Social icons hover animations */
.social-links a {
  transition: background 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px) scale(1.1);
}
/* ============================================================
   MOBILE OPTIMIZATIONS
   ============================================================ */
@media (max-width: 820px) {
  /* Reduce animation delays on mobile */
  .card-grid .reveal {
    transition-delay: calc(30ms * var(--reveal-index, 0));
  }
  .stats-grid .reveal {
    transition-delay: calc(40ms * var(--reveal-index, 0));
  }
  /* Simplify card hover on mobile */
  .card:hover,
  .product-card:hover,
  .service-card:hover {
    animation: none;
    transform: translateY(-4px);
  }
}
/* ============================================================
   ACCESSIBILITY - Respect Prefers Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .btn:hover {
    animation: none;
    transform: translateY(-2px);
  }
  .card:hover {
    animation: none;
  }
  .floating-shape {
    animation: none;
  }
  .loader-mark {
    animation: spin 900ms linear infinite;
  }
}
/* ============================================================
   DATA ATTRIBUTE STYLES FOR INTERACTIVE ELEMENTS
   ============================================================ */
/* Tilt effect support */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Magnetic button support */
[data-magnetic] {
  position: relative;
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Ripple effect support */
[data-ripple] {
  position: relative;
  overflow: hidden;
}
/* Glow effect support */
[data-glow] {
  position: relative;
  background: radial-gradient(
    circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(215, 169, 67, 0.15) 0%,
    transparent 50%
  );
  transition: background 200ms ease;
}
/* ============================================================
   ENHANCED CARD STYLES
   ============================================================ */
.card[data-tilt]:hover,
.product-card[data-tilt]:hover,
.service-card[data-tilt]:hover,
.testimonial-card[data-tilt]:hover,
.industry-card[data-tilt]:hover,
.faq-item[data-tilt]:hover,
.process-step[data-tilt]:hover {
  border-color: rgba(15, 107, 63, 0.3);
  box-shadow: 0 32px 64px rgba(15, 107, 63, 0.18);
}
/* ============================================================
   SMOOTH PRODUCT CARD IMAGE TRANSITIONS
   ============================================================ */
.product-card figure {
  position: relative;
}
.product-card figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(15, 107, 63, 0.1) 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 1;
  pointer-events: none;
}
.product-card:hover figure::before {
  opacity: 1;
}
/* ============================================================
   ENHANCED BUTTON TRANSITIONS
   ============================================================ */
.btn[data-magnetic]:hover {
  box-shadow: 0 24px 48px rgba(15, 107, 63, 0.32);
}
.btn[data-ripple] {
  overflow: visible;
}
/* ============================================================
   SMOOTH ICON TRANSITIONS
   ============================================================ */
.icon-badge[data-glow] {
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ============================================================
   LINK ANIMATIONS
   ============================================================ */
a[data-underline] {
  position: relative;
  display: inline-block;
}
/* ============================================================
   ADDITIONAL POLISH
   ============================================================ */
/* Smooth text selection */
::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
::-moz-selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
/* Smooth placeholder transitions */
::placeholder {
  color: rgba(98, 112, 103, 0.5);
  transition: color 300ms ease;
}
:focus::placeholder {
  color: rgba(98, 112, 103, 0.3);
}
/* Enhanced scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 107, 63, 0.4);
  border-radius: 6px;
  transition: background 300ms ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 107, 63, 0.6);
}
/* ============================================================
   FORM FIELD ENHANCEMENTS
   ============================================================ */
.field input[data-valid]::placeholder,
.field textarea[data-valid]::placeholder {
  color: var(--color-primary-soft);
}