:root {
  --light-bg: #fff8dc;
  --light-bg-2: #fef6e4;
  --gold: #b8860b;
  --gold-strong: #ffd700;
  --text-dark: #222;
}

body.dark-mode {
  --light-bg: #3a2e00;
  --light-bg-2: #1f1700;
  --gold: #d4af37;
  --gold-strong: #ffd86b;
  --text-dark: #f8e7b1;
}

/* Section */
.clients-section {
  background: linear-gradient(135deg, var(--light-bg), var(--light-bg-2));
  padding: 80px 20px;
  color: var(--text-dark);
  overflow: hidden;
}

.clients-content {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

/* Title Glow Breathing */
@keyframes titleGlow {
  0% { text-shadow: 0 0 4px var(--gold-strong); transform: scale(1); }
  50% { text-shadow: 0 0 18px var(--gold-strong); transform: scale(1.02); }
 100% { text-shadow: 0 0 4px var(--gold-strong); transform: scale(1); }
}

.section-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  animation: titleGlow 2.8s ease-in-out infinite;
  display: inline-block;
}

/* Motto */
.clients-motto {
  max-width: 850px;
  margin: 15px auto 40px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Divider Shimmer */
@keyframes dividerShimmer {
  0% { background-position: 0% 50%; opacity: 0.8; }
  50% { background-position: 100% 50%; opacity: 1; }
 100% { background-position: 0% 50%; opacity: 0.8; }
}

.divider {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-strong), var(--gold), var(--gold-strong), transparent);
  background-size: 300% 100%;
  animation: dividerShimmer 4s ease-in-out infinite;
  margin: 30px 0;
  border-radius: 6px;
}

/* Infinite marquee */
.clients-marquee {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 60px;
  will-change: transform;
  white-space: nowrap;
}

/* Logo styling */
.marquee-track img {
  height: 80px;
  transition: transform .35s ease, opacity .35s, filter .35s;
}

.marquee-track img:hover {
  transform: scale(1.15);
  opacity: 1;
}