:root {  
  --primary: #0a4a3c;  
  --secondary: #1a7d5b;  
  --accent: #ff7d00;  
  --dark: #06231c;  
  --light: #f5f9f8;  
}  

body {  
  font-family: 'Manrope', sans-serif;  
  scroll-behavior: smooth;  
  background-color: #f5f9f8;  
}  

.hero-gradient {  
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);  
}  

.card-hover {  
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);  
}  

.card-hover:hover {  
  transform: translateY(-8px);  
  box-shadow: 0 15px 30px rgba(10, 74, 60, 0.15);  
}  

.text-gradient {  
  background: linear-gradient(90deg, var(--primary), var(--secondary));  
  -webkit-background-clip: text;  
  background-clip: text;  
  color: transparent;  
}  

.glass-nav {  
  background: rgba(255, 255, 255, 0.08);  
  backdrop-filter: blur(12px);  
  -webkit-backdrop-filter: blur(12px);  
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);  
}  

.nav-scrolled {  
  background: #033010f2;  
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);  
}  

.section-title {  
  position: relative;  
  display: inline-block;  
}  

.section-title:after {  
  content: '';  
  position: absolute;  
  bottom: -8px;  
  left: 0;  
  width: 50%;  
  height: 3px;  
  background: linear-gradient(90deg, var(--accent), transparent);  
  border-radius: 3px;  
}  

.floating-shape {  
  animation: float 6s ease-in-out infinite;  
}  

@keyframes float {  
  0% { transform: translateY(0px); }  
  50% { transform: translateY(-15px); }  
  100% { transform: translateY(0px); }  
}  

.marquee {  
  display: flex;  
  width: max-content;  
  animation: marqueeAnim 20s linear infinite;  
}  
.marquee:hover {  
  animation-play-state: paused;  
}  
.client-logo {  
  height: 48px; /* h-12 */  
  margin-right: 3rem; /* space-x-12 ≈ 48px */  
  opacity: 0.7;  
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;  
  will-change: transform, opacity;  
}  
.client-logo:hover {  
  opacity: 1;  
  transform: scale(1.15);  
  filter: drop-shadow(0 4px 6px rgba(59,130,246,0.6));  
}  

@keyframes marqueeAnim {  
  0% {  
    transform: translateX(0);  
  }  
  100% {  
    transform: translateX(-50%);  
  }  
}