/* Hero = the mic + headphones photo filling the whole section (no dark colour); welcome text in dark blue on the light grey part. */
html body .cslider{height:clamp(480px,48vw,680px)!important;background:#d1d6dd!important}
html body .cslider .cslide-img{background-color:transparent!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center!important;transform:none!important;transition:none!important;animation:none!important;
  inset:0 0 0 auto!important;height:100%!important;width:auto!important;aspect-ratio:800/534!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
html body .cslider .cslide-overlay,html body .cslider .cslide-tint,html body .cslider .cslider-grain{display:none!important}
html body .cslider .cslide-body{inset:0!important;top:0!important;height:auto!important;align-items:center!important;padding:clamp(24px,4vw,64px) clamp(22px,5vw,80px)!important}
html body .cslider .cslide-text{max-width:min(560px,46%)!important}
html body .cslider .cslide-sub{font-size:clamp(26px,3.3vw,48px)!important;font-weight:400!important;line-height:1.22!important;letter-spacing:.005em!important;color:#13264d!important;margin-top:0!important;text-shadow:none!important}
@media(max-width:900px){
  html body .cslider{height:clamp(660px,178vw,780px)!important}
  /* bigger photo, anchored bottom-right, so the mic, pop filter and headphones are large and fully visible */
  html body .cslider .cslide-img{inset:auto 0 0 auto!important;width:150%!important;height:auto!important;aspect-ratio:800/534!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  html body .cslider .cslide-body{align-items:flex-start!important;padding:max(92px,calc(env(safe-area-inset-top,0px) + 80px)) 20px 20px!important}
  html body .cslider .cslide-text{max-width:100%!important}
  html body .cslider .cslide-sub{font-size:clamp(26px,7.4vw,36px)!important}
}

/* the company name stands out: bold, brand blue gradient with a soft glow that breathes */
html body .cslider .ks-hb{font-weight:700;color:#0a6cff;
  filter:drop-shadow(0 0 7px rgba(10,132,255,.55)) drop-shadow(0 0 18px rgba(0,194,255,.35));animation:ksBrandGlow 3.4s ease-in-out 1.5s infinite}
@keyframes ksBrandGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(10,132,255,.45)) drop-shadow(0 0 14px rgba(0,194,255,.25))}50%{filter:drop-shadow(0 0 11px rgba(10,132,255,.8)) drop-shadow(0 0 26px rgba(0,194,255,.5))}}
@media(prefers-reduced-motion:reduce){html body .cslider .ks-hb{animation:none}}
@media(max-width:900px){html body .cslider .cslide-sub{font-size:clamp(25px,7vw,34px)!important}}

/* welcome text: each letter lights up with a bright cyan-blue glow as it is written, then a glow wave runs word by word */
html body .cslider .cslide-sub{text-shadow:0 0 12px rgba(10,132,255,.16)!important}
html body .cslider .cslide-sub .ks-nt.on{animation:ksHeroLit 1.5s ease-out backwards!important}
html body .cslider .cslide-sub .ks-nt.on.ks-hb{animation:ksHeroLit 1.5s ease-out backwards,ksBrandGlow 3.4s ease-in-out 1.6s infinite!important}
@keyframes ksHeroLit{
  0%{opacity:0;color:#00d4ff;-webkit-text-fill-color:#00d4ff;-webkit-text-stroke:0;transform:translateY(6px) scale(1.18);text-shadow:0 0 8px #00d4ff,0 0 22px #00b4ff,0 0 46px #0a84ff}
  35%{opacity:1;color:#00d4ff;-webkit-text-fill-color:#00d4ff;transform:translateY(0) scale(1.06);text-shadow:0 0 10px #00d4ff,0 0 26px #00b4ff,0 0 54px #0a84ff,0 0 80px rgba(10,132,255,.6)}
  100%{-webkit-text-fill-color:currentColor;transform:none;text-shadow:0 0 12px rgba(10,132,255,.16)}
}
html body .cslider .cslide-sub.ks-hwave .ks-nt{animation:ksHeroWave 1.2s ease-in-out calc(var(--w,0)*.2s) 1 both!important}
html body .cslider .cslide-sub.ks-hwave .ks-nt.ks-hb{animation:ksHeroWave 1.2s ease-in-out calc(var(--w,0)*.2s) 1 both,ksBrandGlow 3.4s ease-in-out 1.6s infinite!important}
@keyframes ksHeroWave{
  0%,100%{text-shadow:0 0 12px rgba(10,132,255,.16)}
  45%{text-shadow:0 0 8px rgba(0,194,255,.95),0 0 22px rgba(10,132,255,.75),0 0 44px rgba(0,180,255,.5)}
}
@media(prefers-reduced-motion:reduce){html body .cslider .cslide-sub .ks-nt.on,html body .cslider .cslide-sub.ks-hwave .ks-nt{animation:none!important}}