/* Horizon Hub V26 — 3/4-card YouTube carousel + richer hero particle field */

/* Richer decorative particles across the entire hero, desktop and mobile. */
.v12-hero{position:relative;isolation:isolate;overflow:hidden!important}
.v12-hero>.shell,.v12-hero .v12-hero-grid{position:relative;z-index:2}
.v12-hero::before{
  content:"";position:absolute;inset:-3%;z-index:1;pointer-events:none;opacity:.96;
  background:
    radial-gradient(circle at 3% 12%,rgba(19,205,158,.34) 0 4px,transparent 5px),
    radial-gradient(circle at 8% 42%,rgba(46,132,255,.22) 0 3px,transparent 4px),
    radial-gradient(circle at 5% 76%,rgba(19,205,158,.25) 0 5px,transparent 6px),
    radial-gradient(circle at 14% 90%,rgba(46,132,255,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 19% 23%,rgba(19,205,158,.20) 0 3px,transparent 4px),
    radial-gradient(circle at 27% 67%,rgba(46,132,255,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 36% 8%,rgba(19,205,158,.25) 0 3px,transparent 4px),
    radial-gradient(circle at 43% 47%,rgba(46,132,255,.16) 0 3px,transparent 4px),
    radial-gradient(circle at 52% 87%,rgba(19,205,158,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 58% 18%,rgba(46,132,255,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 65% 55%,rgba(19,205,158,.28) 0 4px,transparent 5px),
    radial-gradient(circle at 72% 7%,rgba(46,132,255,.26) 0 5px,transparent 6px),
    radial-gradient(circle at 79% 35%,rgba(19,205,158,.30) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 72%,rgba(46,132,255,.23) 0 4px,transparent 5px),
    radial-gradient(circle at 93% 17%,rgba(19,205,158,.34) 0 5px,transparent 6px),
    radial-gradient(circle at 97% 50%,rgba(46,132,255,.27) 0 3px,transparent 4px),
    radial-gradient(circle at 91% 92%,rgba(19,205,158,.26) 0 4px,transparent 5px);
  animation:hhV26ParticleDrift 10s ease-in-out infinite alternate
}
.v12-hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;width:440px;height:440px;right:-120px;bottom:-135px;border-radius:50%;
  border:1px solid rgba(19,205,158,.17);box-shadow:0 0 0 62px rgba(19,205,158,.028),0 0 0 124px rgba(46,132,255,.02);
  animation:hhV26Orbit 22s linear infinite
}
@keyframes hhV26ParticleDrift{0%{transform:translate3d(-5px,6px,0) scale(1)}100%{transform:translate3d(15px,-13px,0) scale(1.035)}}
@keyframes hhV26Orbit{to{transform:rotate(360deg)}}

/* YouTube carousel: contained inside page, swipeable, 4 cards desktop. */
.v11-video-section{position:relative!important;max-width:100%!important;overflow:hidden!important;padding-inline:56px!important}
.v11-video-section .video-marquee{position:relative!important;width:100%!important;max-width:100%!important;overflow:hidden!important;contain:paint!important}
.v11-video-section .video-marquee-track{
  display:flex!important;flex-wrap:nowrap!important;gap:14px!important;width:100%!important;max-width:100%!important;
  overflow-x:auto!important;overflow-y:hidden!important;scroll-behavior:smooth!important;scroll-snap-type:x mandatory!important;
  overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;padding:10px 2px 16px!important;
  transform:none!important;animation:none!important;scrollbar-width:none!important
}
.v11-video-section .video-marquee-track::-webkit-scrollbar{display:none!important}
.v11-video-section .youtube-card{
  flex:0 0 calc((100% - 42px)/4)!important;width:calc((100% - 42px)/4)!important;min-width:0!important;max-width:none!important;
  scroll-snap-align:start!important
}

/* Modern side arrows, inside the section so they never widen the page. */
.hh-v26-video-control{
  position:absolute;z-index:10;top:58%;transform:translateY(-50%);width:46px;height:72px;border:1px solid rgba(255,255,255,.82);
  background:rgba(7,31,49,.91);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(7,31,49,.20);transition:background .2s ease,transform .2s ease,box-shadow .2s ease
}
.hh-v26-video-control.prev{left:6px;border-radius:0 24px 24px 0}
.hh-v26-video-control.next{right:6px;border-radius:24px 0 0 24px}
.hh-v26-video-control:hover{background:rgba(9,143,124,.98);box-shadow:0 14px 34px rgba(7,31,49,.28)}
.hh-v26-video-control:active{transform:translateY(-50%) scale(.95)}
.hh-v26-video-control svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hh-v25-video-control,.hh-video-controls{display:none!important}

/* Mobile: user requested 3 videos visible in the same row. */
@media(max-width:720px){
  .v12-hero::before{opacity:1!important}
  .v12-hero::after{width:285px;height:285px;right:-90px;bottom:20px!important;box-shadow:0 0 0 42px rgba(19,205,158,.03),0 0 0 84px rgba(46,132,255,.022)}
  .v11-video-section{padding-inline:34px!important}
  .v11-video-section .video-marquee-track{gap:8px!important;padding-block:8px 13px!important}
  .v11-video-section .youtube-card{flex:0 0 calc((100% - 16px)/3)!important;width:calc((100% - 16px)/3)!important;min-width:0!important}
  .hh-v26-video-control{width:32px;height:56px;top:60%}
  .hh-v26-video-control.prev{left:1px;border-radius:0 18px 18px 0}
  .hh-v26-video-control.next{right:1px;border-radius:18px 0 0 18px}
  .hh-v26-video-control svg{width:19px;height:19px}
}
@media(max-width:390px){
  .v11-video-section{padding-inline:30px!important}
  .v11-video-section .video-marquee-track{gap:6px!important}
  .v11-video-section .youtube-card{flex-basis:calc((100% - 12px)/3)!important;width:calc((100% - 12px)/3)!important}
}
@media(prefers-reduced-motion:reduce){.v12-hero::before,.v12-hero::after{animation:none!important}.v11-video-section .video-marquee-track{scroll-behavior:auto!important}}