/* === HERO BANNER - Image Slider + Stats === */
.hero-banner { background: #F8FAFC; }

/* Slider */
.slider { position: relative; width: 100%; overflow: hidden; }
.slide { display: none; position: relative; width: 100%; }
.slide.active { display: block; animation: fadeIn 0.6s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.slide img { width: 100%; height: 300px; display: block; object-fit: cover; }

/* Arrows */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); border: none; border-radius: 50%; color: white; font-size: 1.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 5; }
.slider-arrow:hover { background: rgba(0,0,0,0.6); }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }

/* Dots */
.slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.3); border: none; cursor: pointer; transition: all 0.2s; padding: 0; }
.slider-dot.active { background: var(--primary); width: 20px; border-radius: 4px; }

/* Stats Strip */
.stats-strip { background: #FFFFFF; border-bottom: 1px solid var(--border); padding: 20px 0; }
.stats-row { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; max-width: 100%; }
.stat-item { text-align: center; padding: 8px 20px; flex: 1; min-width: 120px; }
.stat-number { display: block; font-size: 1.2rem; font-weight: 900; color: var(--primary); }
.stat-label { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; }
.stat-divider { width: 1px; height: 36px; background: var(--border); }

/* Responsive */
@media (min-width: 600px) {
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 0.75rem; }
}

@media (min-width: 1024px) {
    .slider-arrow { width: 44px; height: 44px; font-size: 1.4rem; }
    .slider-prev { left: 20px; }
    .slider-next { right: 20px; }
    .stat-number { font-size: 2rem; }
    .stat-label { font-size: 0.8rem; }
    .stat-item { padding: 12px 40px; }
    .stats-strip { padding: 24px 0; }
}