:root{
  --hc-accent:#7abd2f;
  --hc-dot:rgba(255,255,255,.55);
  --hc-radius:18px;
  --hc-slide-dur:5000ms;   /* doit matcher data-interval (JS) */
  --hc-fade:1100ms;
}
.hc-hero-slider{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--hc-radius);
  overflow:hidden;background:#0d1117;box-shadow:0 20px 60px -20px rgba(13,17,23,.45);isolation:isolate;}
.hc-hero-slider__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--hc-fade) ease;will-change:opacity;}
.hc-hero-slider__slide.is-active{opacity:1;}
.hc-hero-slider__slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);will-change:transform;}
.hc-hero-slider__slide.is-active img{animation:hcKenBurns calc(var(--hc-slide-dur) + var(--hc-fade)) ease-out forwards;}
@keyframes hcKenBurns{from{transform:scale(1.06) translate(0,0);}to{transform:scale(1.14) translate(-1.5%,-1.5%);}}
.hc-hero-slider::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(13,17,23,.25));}
.hc-hero-slider__dots{position:absolute;z-index:2;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:10px;align-items:center;}
.hc-hero-slider__dot{-webkit-appearance:none;appearance:none;border:0;padding:0;cursor:pointer;
  width:10px;height:10px;border-radius:999px;background:var(--hc-dot);position:relative;overflow:hidden;
  transition:width .45s cubic-bezier(.65,0,.35,1),background .3s;}
.hc-hero-slider__dot.is-active{width:34px;background:rgba(255,255,255,.3);}
.hc-hero-slider__dot.is-active::after{content:"";position:absolute;inset:0;width:0%;
  background:var(--hc-accent);border-radius:999px;animation:hcFill var(--hc-slide-dur) linear forwards;}
@keyframes hcFill{from{width:0%}to{width:100%}}
.hc-hero-slider.is-paused .hc-hero-slider__slide.is-active img,
.hc-hero-slider.is-paused .hc-hero-slider__dot.is-active::after{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .hc-hero-slider__slide{transition:opacity .2s ease;}
  .hc-hero-slider__slide.is-active img{animation:none;transform:scale(1);}
  .hc-hero-slider__dot.is-active::after{animation:none;width:100%;}
}