.hero{min-height:calc(100svh - 64px);display:grid;align-items:center;padding:clamp(40px,7vh,80px) 0;background:radial-gradient(70% 50% at 50% 45%,rgba(255,90,31,.10),transparent 100%)}
.hero .sig{position:absolute;left:50%;top:50%;width:min(118vh,135vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:url("/static/brand504/hero-w1-v3.svg") center/100% 100% no-repeat;opacity:.6;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(860px,120%);height:120%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(11,11,12,.82),rgba(11,11,12,.45) 60%,transparent 100%);pointer-events:none}
.hero .lock{margin:0 auto}
.hero .lock .word{font-size:clamp(3rem,10vw,6.6rem);margin:0 0 .35em}
.hero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);margin-top:0}
.hero .lead{margin-top:18px}
.hero .btn{margin-top:30px}
@media (min-width:900px){
  .hero .wrap{display:flex}
  .hero .lock{margin:0 auto;justify-self:auto}
  .hero .lock .word{font-size:clamp(3.4rem,6.4vw,6.6rem);margin:0 0 .3em}
  .hero h1{margin-top:0;font-size:clamp(2.6rem,4.4vw,4.2rem)}
  .hero > .wrap > .btn{justify-self:auto}
}
@media (max-width:699px){ .hero .sig{width:max(190vw,96svh);opacity:.55} }
.hero .lead{text-wrap:balance;max-width:60ch}
.hero .lead{color:var(--text)}