/* ==========================================================================
   ARKS International — Hero Slider (Home)
   ========================================================================== */

.hero-slider { position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden; background: var(--color-navy); }

.hero-slide { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.hero-slide__bg {
  position: absolute; inset: -5%; background-size: cover; background-position: center;
  transform: scale(1.08); transition: transform 8s var(--ease-soft);
}
.swiper-slide-active .hero-slide__bg { transform: scale(1); animation: kenburns 9s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

.hero-slide__overlay { position: absolute; inset: 0; background: var(--gradient-overlay-hero); }
.hero-slide__glow { position: absolute; inset: -20%; background: var(--gradient-glow); opacity: .8; pointer-events: none; }

.hero-slide__content { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; }
.hero-slide__panel { max-width: 780px; }
.hero-slide__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; color: #fff; background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border); backdrop-filter: blur(10px);
  padding: .5rem 1.1rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero-slide__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-emerald); box-shadow: 0 0 0 4px rgba(0,200,83,.25); }

.hero-slide__title {
  font-family: var(--font-heading); color: #fff; font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 4.6rem); line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hero-slide__title .accent { color: var(--color-teal); }
.hero-slide__subtitle { color: var(--text-on-dark-muted); font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 600px; margin-bottom: 2.25rem; }
.hero-slide__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Floating geometric elements */
.hero-float { position: absolute; z-index: 2; pointer-events: none; opacity: .55; }
.hero-float--ring { width: 220px; height: 220px; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 50%; top: 12%; right: 8%; animation: float-y 7s ease-in-out infinite; }
.hero-float--ring-sm { width: 120px; height: 120px; border: 1.5px solid rgba(0,168,168,0.4); border-radius: 50%; bottom: 18%; right: 22%; animation: float-y 5.5s ease-in-out infinite reverse; }
.hero-float--diamond { width: 60px; height: 60px; border: 1.5px solid rgba(255,255,255,0.3); transform: rotate(45deg); top: 30%; left: 6%; animation: float-y 6.5s ease-in-out infinite; }
.hero-float--plus { top: 60%; right: 14%; color: rgba(255,255,255,.5); font-size: 1.6rem; animation: float-y 5s ease-in-out infinite; }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* Particles */
.hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-particles span {
  position: absolute; width: 4px; height: 4px; background: rgba(255,255,255,.55); border-radius: 50%;
  animation: particle-rise linear infinite;
}
@keyframes particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .6; } 100% { transform: translateY(-100vh) translateX(30px); opacity: 0; } }

/* Glass stat panel inside hero */
.hero-stat-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
}
.hero-stat-strip .glass-panel { padding: 1.6rem 2rem; }
.hero-stat-strip .stat-block .stat-number { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.hero-stat-strip .stat-block .stat-label { color: var(--text-on-dark-muted); font-size: .8rem; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 6.5rem; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; color: #fff; opacity: .8;
}
.scroll-indicator .mouse { width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 14px; position: relative; }
.scroll-indicator .mouse::before {
  content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 8px; background: #fff; border-radius: 2px; animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot { 0% { opacity: 1; top: 7px; } 70% { opacity: 0; top: 20px; } 100% { opacity: 0; top: 7px; } }
.scroll-indicator span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

/* Swiper nav / pagination custom */
.hero-slider .swiper-pagination { bottom: 2.5rem !important; z-index: 5; display: flex; gap: .5rem; justify-content: center; }
.hero-slider .swiper-pagination-bullet { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); opacity: 1; transition: background var(--dur-fast); }
.hero-slider .swiper-pagination-bullet-active { background: var(--gradient-emerald); }

.hero-slider .swiper-button-prev, .hero-slider .swiper-button-next {
  width: 54px; height: 54px; border-radius: 50%; background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  backdrop-filter: blur(10px); color: #fff;
}
.hero-slider .swiper-button-prev::after, .hero-slider .swiper-button-next::after { font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .hero-float, .hero-particles { display: none; }
  .hero-stat-strip .row > div:not(:last-child) { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15); }
}