/* ==========================================================
   HERO (cm-hero scoped, from uploaded cutmode-hero.html)
   Scale system: desktop measured from a 2000px design (1 unit = --u),
   phone from a 390px design (1 unit = --m). Everything scales with
   the screen so proportions stay exact. Site colors unchanged.
   ========================================================== */
.hero{
  --u:min(calc(100vw / 2000), 1px);
  --m:calc(100vw / 390);
  position:relative;min-height:calc(1264 * var(--u));overflow:hidden;isolation:isolate;
  padding:0;margin:0;
}

/* colour wash + vertical light columns (original site colours) */
.hero .wash{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 90% at 20% 0%,rgba(58,123,255,.75),transparent 70%),
    radial-gradient(55% 90% at 80% 0%,rgba(212,107,255,.65),transparent 70%);
  background-color:var(--bg)}
.hero .cols{position:absolute;inset:0;z-index:-1;display:flex;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 100%)}
.hero .cols i{flex:1;border-right:1px solid rgba(255,255,255,.05)}
.hero .cols i:last-child{border-right:0}
.hero .cols i:nth-child(odd){background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 70%)}
.hero .cols i:nth-child(3n){background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 80%)}

/* reel row: card styling lives in styles.css (original site look) */
.hero .reels-wrap{position:relative;z-index:2;margin-top:calc(90 * var(--u))}

/* phone layout (measured from the 390px mobile reference) */
@media (max-width:760px){
  .hero{min-height:auto;padding-bottom:calc(60 * var(--m))}
  .hero .wash{background:
      radial-gradient(85% 55% at 12% 0%,rgba(58,123,255,.75),transparent 78%),
      radial-gradient(85% 55% at 92% 0%,rgba(212,107,255,.65),transparent 78%);background-color:var(--bg)}
  .hero .cols i:nth-child(n+5){display:none}

  .hero .reels-wrap{margin-top:calc(88 * var(--m))}
}