/* =============================================
   SAFETAXI — Hero Carousel
   ============================================= */

.hero-carousel {
  position: relative;
  width: 100%; height: 100vh; min-height: 600px;
  overflow: hidden;
  background: var(--dark);
}

/* Slides */
.hero-carousel__track { position: relative; width: 100%; height: 100%; }

.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }

/* Media background */
.hero-slide__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-slide__bg img,
.hero-slide__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(30,30,28,0.85) 0%,
    rgba(30,30,28,0.55) 50%,
    rgba(30,30,28,0.25) 100%
  );
}
/* Slide that is pure dark (no image) */
.hero-slide--dark .hero-slide__bg {
  background: var(--dark);
}
.hero-slide--dark .hero-slide__overlay {
  background: radial-gradient(ellipse 70% 90% at 70% 50%, rgba(233,79,29,0.14) 0%, transparent 70%);
}

/* Content */
.hero-slide__content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 5vw;
  padding-top: var(--nav-h);
}

.hero-slide__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(233,79,29,0.15);
  border: 1px solid rgba(233,79,29,0.3);
  color: var(--orange);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-slide__eyebrow::before {
  content: ''; width: 6px; height: 6px;
  background: var(--orange); border-radius: 50%;
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.hero-slide__title {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800; letter-spacing: -2px; line-height: 1.03;
  color: white; margin-bottom: 1.3rem;
}
.hero-slide__title em { font-style: normal; color: var(--orange); }

.hero-slide__body {
  font-size: 17px; line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 520px; margin-bottom: 2.2rem;
}

.hero-slide__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Phone mockup inside hero */
.hero-slide__visual {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);
  z-index: 2;
}

/* Stats chips */
.hero-slide__chips {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2.5rem;
}
.hero-chip {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65);
  display: flex; align-items: center; gap: 6px;
}
.hero-chip strong { color: white; }

/* Controls */
.hero-carousel__prev,
.hero-carousel__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
  cursor: pointer;
  transition: background var(--transition);
}
.hero-carousel__prev:hover,
.hero-carousel__next:hover { background: rgba(233,79,29,0.5); border-color: var(--orange); }
.hero-carousel__prev { left: 24px; }
.hero-carousel__next { right: 24px; }

/* Dots */
.hero-carousel__dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none; cursor: pointer;
  transition: background 0.3s, width 0.3s;
  padding: 0;
}
.hero-dot.active {
  background: var(--orange);
  width: 24px; border-radius: 4px;
}

/* Progress bar */
.hero-carousel__progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.1); z-index: 10;
}
.hero-carousel__progress-bar {
  height: 100%; background: var(--orange);
  animation: progressBar 6s linear infinite;
}
@keyframes progressBar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Slide counter */
.hero-carousel__counter {
  position: absolute; bottom: 28px; right: 5vw; z-index: 10;
  font-size: 12px; color: rgba(255,255,255,0.35); font-weight: 600;
}
.hero-carousel__counter strong { color: white; }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}
.hero-scroll-hint__arrow {
  width: 24px; height: 24px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(5px); }
}

/* Mobile */
@media (max-width: 900px) {
  .hero-slide__visual { display: none; }
  .hero-carousel__prev { left: 12px; }
  .hero-carousel__next { right: 12px; }
}
@media (max-width: 600px) {
  .hero-slide__body { font-size: 15px; }
}