/* Components - extended styles for carousel, numbered sections, testimonials, counters, logo grid */

/* Carousel */
.carousel {
  position: relative;
  overflow: hidden;
  padding: var(--space-md) 0;
}
.carousel-track {
  display: flex;
  gap: var(--space-md);
  transition: transform var(--transition-medium);
  will-change: transform;
}
.carousel-slide {
  min-width: 100%;
  flex: 0 0 100%;
  opacity: 0;
  transform: translateX(4%);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}
.carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
}
.carousel-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-sm);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}
.carousel-arrow {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.7rem;
  border-radius: 9999px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  color: var(--color-text-primary);
}
.carousel-arrow:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent);
}
.carousel-dots {
  display: flex;
  gap: 0.5rem;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.12);
  opacity: 0.85;
}
.carousel-dot.active { background: var(--color-accent); }

/* Testimonial card */
.testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: var(--space-md);
  border-radius: 1.5rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}
.testimonial-quote {
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}
.testimonial-meta {
  display:flex;
  gap:0.75rem;
  align-items:center;
  color:var(--color-text-secondary);
  font-size:0.9rem;
}
.testimonial-avatar { width:44px; height:44px; border-radius:9999px; object-fit:cover; }

/* Numbered services */
.numbered-section { padding: var(--space-lg) 0; }
.number-card { display:flex; gap:var(--space-md); align-items:flex-start; }
.number-badge { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 4rem); color:var(--color-accent); }
.number-card h3 { font-family: var(--font-heading); margin-bottom:0.5rem; }

/* Stats counters */
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:var(--space-md); align-items:center; }
@media (max-width:900px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
.stat { text-align:center; padding:var(--space-sm); }
.stat .value { font-family: var(--font-heading); font-size: clamp(1.5rem, 6vw, 2.5rem); color:var(--color-text-primary); }
.stat .label { color:var(--color-text-tertiary); font-size:0.95rem; }

/* Logo grid */
.logo-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:var(--space-md); align-items:center; }
@media (max-width:900px) { .logo-grid { grid-template-columns: repeat(3,1fr); } }
.logo-item { display:flex; align-items:center; justify-content:center; padding:1.05rem 0.85rem; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06); transition: transform var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast); filter: grayscale(100%); opacity:0.9; }
.logo-item:hover { filter:none; opacity:1; transform:translateY(-4px); }

.service-cards { display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: var(--space-md); }
@media (max-width: 900px) { .service-cards { grid-template-columns: 1fr; } }
.service-card { background: #ffffff; border: 1px solid rgba(11, 111, 242, 0.12); border-radius: 1.75rem; padding: var(--space-lg); display: grid; gap: 1rem; min-height: 260px; box-shadow: 0 24px 64px rgba(11, 111, 242, 0.08); }
.service-number { font-family: var(--font-heading); font-size: clamp(2.25rem, 5vw, 4.25rem); color: var(--color-accent); line-height: 0.9; }
.service-card h3 { font-family: var(--font-heading); font-size: 1.6rem; margin-top: 0.25rem; }
.service-card p { color: var(--color-text-secondary); line-height: 1.8; }
.service-card a { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 600; transition: transform var(--transition-fast); }
.service-card a:hover { transform: translateX(2px); }

.video-section { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
@media (max-width: 900px) { .video-section { grid-template-columns: 1fr; } }
.video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--glass-border); background: var(--color-bg-secondary); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-details h3 { font-size: clamp(1.9rem, 2.5vw, 2.75rem); margin-bottom: 1rem; }
.video-details p { color: var(--color-text-secondary); line-height: 1.8; }

.stats-grid { display:grid; grid-template-columns: repeat(4, minmax(180px,1fr)); gap: var(--space-md); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
.stat { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1.75rem; padding: var(--space-lg); text-align: center; box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08); }
.stat .value { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.5rem); color: var(--color-accent); line-height: 1; }
.stat .label { margin-top: 0.75rem; color: var(--color-text-secondary); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Utilities */
.u-container { max-width:1100px; margin:0 auto; padding:0 1rem; }
.u-center { text-align:center; }

/* Small responsive tweaks */
@media (max-width:700px) {
  .carousel-controls { bottom: 0.25rem; }
}