/* Grande - home page hero: in-game pictures that crossfade behind the headline (js/home-hero.js), and the stats strip under it. */
.hero-wrap{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;margin-top:calc(var(--nav-h,70px)*-1);padding-top:var(--nav-h,70px);box-sizing:border-box;background:var(--bg)}
.hbg{position:absolute;inset:0;z-index:0;background:var(--bg)}
.hbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.8s ease;user-select:none;pointer-events:none}
.hbg img.on{opacity:1}
/* a dark layer over the pictures, and the bottom fades into the page's grey */
.hbg::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.58)}
.hbg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(15,15,15,0) 0%,rgba(15,15,15,0) 50%,rgba(15,15,15,.7) 78%,var(--bg) 100%)}
.hero-wrap .hero{position:relative;z-index:3;min-height:0;padding:90px 28px 120px}
.hero-wrap .hero h1{text-shadow:0 2px 28px rgba(0,0,0,.45)}
.hero-wrap .hero p{color:#cfcfcf;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hstats{padding:8px 20px 56px}
.hstats .trust{margin:0 auto;padding-top:0;border-top:0}
@media(max-width:560px){.hero-wrap .hero{padding:70px 20px 100px}.hstats{padding:0 20px 40px}}
@media(prefers-reduced-motion:reduce){.hbg img{transition:none}}