/* ============================================================
   HERO SLIDESHOW — replaces the static photo collage in .hero-right
   Fully transparent container. Uses the theme's own tokens:
   --emerald, --gold, --mint, --jet, --surface, --border, --white,
   --text-muted, --font-head, --font-body
   Prefix: .hero-slider-wrap / .hs-*
   ============================================================ */

.hero-slider-wrap{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:4/3.6;
  z-index:1;
  background:transparent !important; /* hard guarantee: no panel, ever */
}

/* Swiper root — force transparency at every layer Swiper touches */
.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide{
  background:transparent !important;
  width:100%;
  height:100%;
}
.hero-swiper{ overflow:visible; } /* let glow/particles bleed past the edge */

.hs-slide{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

/* shared floating pagination — small, quiet, on-brand */
.hero-swiper-pagination{
  position:absolute;
  left:50%; bottom:-6px;
  transform:translateX(-50%);
  display:flex; gap:8px;
  z-index:5;
}
.hero-swiper-pagination .swiper-pagination-bullet{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.25);
  opacity:1; margin:0; cursor:pointer;
  transition:background .3s, width .3s;
}
.hero-swiper-pagination .swiper-pagination-bullet-active{
  background:var(--emerald);
  width:20px; border-radius:4px;
}

/* ============================================================
   SHARED FX — grid / particles / glow streak
   ============================================================ */
.hs-holo-grid{
  position:absolute; inset:6%;
  background-image:
    linear-gradient(rgba(108,158,245,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,158,245,0.10) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 65% 65% at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 45%, #000 0%, transparent 78%);
  animation:hsGridPan 16s linear infinite;
  pointer-events:none;
}
@keyframes hsGridPan{
  0%{background-position:0 0,0 0}
  100%{background-position:28px 28px,28px 28px}
}

.hs-particle{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px 2px rgba(108,158,245,0.65);
  animation:hsParticleDrift 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes hsParticleDrift{
  0%,100%{transform:translateY(0) scale(1);opacity:.35}
  50%{transform:translateY(-18px) scale(1.5);opacity:.9}
}

.hs-streak{
  position:absolute; top:8%; left:-30%;
  width:45%; height:140%;
  background:linear-gradient(100deg, transparent, rgba(108,158,245,0.10) 45%, transparent 60%);
  transform:rotate(12deg);
  animation:hsStreakSweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes hsStreakSweep{
  0%{transform:translateX(0) rotate(12deg)}
  50%{transform:translateX(260%) rotate(12deg)}
  100%{transform:translateX(0) rotate(12deg)}
}

@media (prefers-reduced-motion: reduce){
  .hero-slider-wrap *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   SLIDE 1 — ANALYTICS GROWTH
   ============================================================ */
.hs-analytics{ width:88%; height:78%; }
.hs-chart{
  position:relative; width:100%; height:100%;
  display:flex; align-items:flex-end; justify-content:center; gap:14px;
  padding:0 6%;
}
.hs-bar{
  position:relative;
  width:11%;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, var(--emerald) 0%, rgba(108,158,245,0.25) 100%);
  box-shadow:0 0 18px rgba(108,158,245,0.35);
  transform-origin:bottom center;
  transform:scaleY(0);
  animation:hsBarGrow 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
.hs-bar.is-last{ background:linear-gradient(180deg, var(--gold) 0%, rgba(201,168,76,0.25) 100%); box-shadow:0 0 20px rgba(201,168,76,0.45); }
.hs-bar::after{
  content:''; position:absolute; top:-3px; left:0; right:0; height:3px;
  background:rgba(255,255,255,0.55); border-radius:3px; filter:blur(.5px);
}
@keyframes hsBarGrow{ to{ transform:scaleY(1); } }

.hs-line-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hs-line-path{
  fill:none; stroke:var(--mint); stroke-width:2.5; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(143,221,190,0.7));
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:hsLineDraw 1.8s .3s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes hsLineDraw{ to{ stroke-dashoffset:0; } }

.hs-analytics-tag{
  position:absolute; top:6%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  background:rgba(13,17,23,0.55);
  border:1px solid rgba(108,158,245,0.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--white); font-size:11px; font-weight:500;
  padding:6px 13px; border-radius:50px; font-family:var(--font-body);
  white-space:nowrap;
}
.hs-analytics-tag::before{
  content:''; width:6px;height:6px;border-radius:50%;
  background:var(--emerald); box-shadow:0 0 8px 2px rgba(108,158,245,0.6);
  animation:hsPulse 2s infinite;
}
@keyframes hsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ============================================================
   SLIDE 2 — SERVICE CARDS (glassmorphism cluster)
   ============================================================ */
.hs-services{ position:relative; width:100%; height:100%; }
.hs-svc-lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hs-svc-lines path{
  fill:none; stroke:rgba(108,158,245,0.35); stroke-width:1;
  stroke-dasharray:4 5;
  animation:hsDashFlow 3.5s linear infinite;
}
@keyframes hsDashFlow{ to{ stroke-dashoffset:-90; } }

.hs-svc-card{
  position:absolute;
  width:110px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:rgba(19,27,39,0.55);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  padding:12px 12px 11px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(0,0,0,0.35);
  animation:hsFloat 5s ease-in-out infinite;
}
.hs-svc-icon{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(108,158,245,0.14);
  border:1px solid rgba(108,158,245,0.3);
}
.hs-svc-icon svg{ width:14px;height:14px; stroke:var(--emerald); }
.hs-svc-card.is-gold .hs-svc-icon{ background:rgba(201,168,76,0.14); border-color:rgba(201,168,76,0.35); }
.hs-svc-card.is-gold .hs-svc-icon svg{ stroke:var(--gold); }
.hs-svc-label{ font-family:var(--font-head); font-size:11px; font-weight:700; color:var(--white); line-height:1.25; }

@keyframes hsFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* eight-card scatter positions (percentage-based, responsive) */
.hs-svc-card:nth-child(1){ top:2%;  left:4%;  animation-delay:0s; }
.hs-svc-card:nth-child(2){ top:0%;  left:42%; animation-delay:.6s; }
.hs-svc-card:nth-child(3){ top:6%;  right:2%; animation-delay:1.2s; }
.hs-svc-card:nth-child(4){ top:36%; left:20%; animation-delay:.3s; }
.hs-svc-card:nth-child(5){ top:33%; right:14%; animation-delay:1.6s; }
.hs-svc-card:nth-child(6){ bottom:14%; left:2%; animation-delay:.9s; }
.hs-svc-card:nth-child(7){ bottom:8%;  left:38%; animation-delay:1.9s; }
.hs-svc-card:nth-child(8){ bottom:12%; right:4%; animation-delay:.4s; }

/* ============================================================
   SLIDE 3 — RESULTS / DASHBOARD COLLAGE
   ============================================================ */
.hs-collage{ position:relative; width:100%; height:100%; }
.hs-dash{
  position:absolute;
  width:180px;
  background:rgba(19,27,39,0.62);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  padding:14px 14px 12px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 44px rgba(0,0,0,0.4);
  animation:hsFloatSlow 7s ease-in-out infinite;
}
@keyframes hsFloatSlow{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg));} 50%{ transform:translateY(-8px) rotate(var(--r,0deg));} }

.hs-dash-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hs-dash-title{ font-family:var(--font-body); font-size:10px; color:var(--text-muted); letter-spacing:.4px; text-transform:uppercase; }
.hs-dash-dot{ width:6px;height:6px;border-radius:50%; background:var(--emerald); box-shadow:0 0 6px 2px rgba(108,158,245,0.6); animation:hsPulse 2s infinite; }
.hs-dash-val{ font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--white); letter-spacing:-.5px; }
.hs-dash-val span{ color:var(--emerald); font-size:13px; }
.hs-dash-delta{ font-size:11px; color:var(--mint); font-weight:600; margin-top:2px; }

.hs-spark{ display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:10px; }
.hs-spark i{ flex:1; background:linear-gradient(180deg, var(--emerald), rgba(108,158,245,0.15)); border-radius:2px 2px 0 0; transform-origin:bottom; animation:hsBarGrow 1.2s cubic-bezier(.16,1,.3,1) forwards; }

.hs-d1{ top:4%;  left:2%;  --r:-4deg; z-index:3; animation-delay:.1s; }
.hs-d2{ top:0%;  right:0%; --r:3deg;  z-index:2; animation-delay:.9s; }
.hs-d3{ bottom:6%; left:16%; --r:2deg; z-index:4; animation-delay:.5s; }
.hs-d4{ bottom:0%; right:8%; --r:-3deg; z-index:1; width:160px; animation-delay:1.3s; }

/* ============================================================
   SLIDE 4 — SOCIAL PLATFORM MONOGRAMS
   ============================================================ */
.hs-social{ position:relative; width:100%; height:100%; }
.hs-social-lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.hs-social-lines path{
  fill:none; stroke:rgba(108,158,245,0.3); stroke-width:1;
  stroke-dasharray:5 6;
  animation:hsDashFlow 4s linear infinite;
}
.hs-orb{
  position:absolute;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(19,27,39,0.6);
  border:1px solid rgba(108,158,245,0.3);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 0 22px rgba(108,158,245,0.25), 0 14px 26px rgba(0,0,0,0.35);
  color:var(--white);
  animation:hsOrbFloat 6s ease-in-out infinite;
}
.hs-orb svg{ width:24px; height:24px; color:inherit; }
.hs-orb.is-gold{ border-color:rgba(201,168,76,0.35); box-shadow:0 0 22px rgba(201,168,76,0.25), 0 14px 26px rgba(0,0,0,0.35); color:var(--gold); }
.hs-orb.is-mint{ border-color:rgba(143,221,190,0.35); box-shadow:0 0 22px rgba(143,221,190,0.22), 0 14px 26px rgba(0,0,0,0.35); color:var(--mint); }
@keyframes hsOrbFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(6deg); }
}

.hs-orb:nth-child(2){ top:2%;   left:8%;   animation-delay:0s; }
.hs-orb:nth-child(3){ top:0%;   left:42%;  animation-delay:.5s; }
.hs-orb:nth-child(4){ top:6%;   right:4%;  animation-delay:1s; }
.hs-orb:nth-child(5){ top:38%;  left:0%;   animation-delay:1.4s; }
.hs-orb:nth-child(6){ top:36%;  left:56%;  animation-delay:.3s; }
.hs-orb:nth-child(7){ bottom:16%; left:22%; animation-delay:1.8s; }
.hs-orb:nth-child(8){ bottom:10%; right:16%; animation-delay:.8s; }
.hs-orb:nth-child(9){ bottom:0%;  left:66%;  animation-delay:1.1s; }
.hs-orb:nth-child(10){ top:60%;  right:0%;   animation-delay:1.6s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1300px){
  .hero-slider-wrap{ max-width:420px; }
}
@media(max-width:1100px){
  /* .hero-right is hidden at this breakpoint by the base theme stylesheet;
     nothing to do here, kept for completeness if that rule changes */
  .hero-slider-wrap{ max-width:380px; }
}
@media(max-width:480px){
  .hs-svc-card{ width:92px; padding:10px; }
  .hs-dash{ width:150px; }
  .hs-orb{ width:48px;height:48px;font-size:11px; }
}