.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin-block-start: calc(-1 * var(--header-height));
  padding-block-start: var(--header-height);
  padding-bottom: 28px;
  overflow: hidden;
  background:var(--hero-gradient);
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.065;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22%23fff%22%20filter%3D%22url%28%23n%29%22%20d%3D%22M0%200h180v180H0z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
  background-size:180px 180px;
}

.hero .hero-decor {
  position:absolute;
  translate: 0 -50px;
  inset:var(--header-height) 0 0;
  pointer-events:none;
  z-index:0;
  transform:translate(var(--mx,0),var(--my,0));
  transition:transform .8s ease-out;
}

.hero .decor-piece {
  position:absolute;
  display:block;
  width:220px;
  height:220px;
  background-image:url("./hero-background-decor.webp");
  background-size:300% 200%;
  background-repeat:no-repeat;
  mask-image:radial-gradient(ellipse at center,#000 35%,transparent 72%);
  animation:hero-drift 8s ease-in-out infinite alternate;
  opacity:.65;
}

.hero .decor-arrow {
  left:1%;
  top:17%;
  background-position:0 0;
  transform:rotate(-12deg);
}

.hero .decor-star {
  right:1%;
  top:15%;
  background-position:50% 0;
  animation-delay:-3s;
  width:190px;
  height:190px;
}

.hero .decor-sphere {
  margin-bottom: 30px;
  left:4%;
  bottom:6%;
  background-position:100% 0;
  animation-delay:-5s;
  width:190px;
  height:190px;
}

.hero .decor-ring {
  right:3%;
  bottom:4%;
  background-position:0 100%;
  animation-delay:-1s;
  width:245px;
  height:245px;
}

@keyframes hero-drift {from{translate:0 -8px;rotate:-3deg}to{translate:0 12px;rotate:4deg}}

@media(max-width:1100px) {
.hero .decor-piece {
  opacity:.35;
  width:150px;
  height:150px;
}
.hero .decor-arrow {
  left:-40px;
  top:8%;
}
.hero .decor-star {
  right:-35px;
  top:8%;
}
.hero .decor-sphere {
  left:-35px;
  bottom:0;
}
.hero .decor-ring {
  right:-40px;
  bottom:0;
}
}

@media(prefers-reduced-motion:reduce) {
.hero .decor-piece {
  animation:none;
}
.hero .hero-decor {
  transform:none;
  transition:none;
}
}

.hero .decor-piece {
  animation-name:hero-depth;
  animation-duration:var(--drift,11s);
  animation-timing-function:ease-in-out;
  filter:blur(var(--blur,0px));
  opacity:var(--alpha,.7);
  will-change:translate,rotate,scale;
}

.hero .decor-arrow {
  left:-3%;
  top:12%;
  bottom:auto;
  right:auto;
  width:310px;
  height:310px;
  --blur:0px;
  --alpha:.85;
  --drift:13s;
  --dx:17px;
  --dy:-20px;
  --turn:6deg;
  animation-delay:-4s;
  transform:rotate(-18deg);
}

.hero .decor-star {
  right:10%;
  top:4%;
  left:auto;
  bottom:auto;
  width:125px;
  height:125px;
  --blur:2px;
  --alpha:.4;
  --drift:17s;
  --dx:-12px;
  --dy:13px;
  --turn:-9deg;
  animation-delay:-9s;
  transform:rotate(14deg);
}

.hero .decor-sphere {
  left:14%;
  bottom:4%;
  top:auto;
  right:auto;
  width:155px;
  height:155px;
  --blur:4px;
  --alpha:.38;
  --drift:15s;
  --dx:20px;
  --dy:-10px;
  --turn:4deg;
  animation-delay:-2s;
  transform:rotate(-10deg);
}

.hero .decor-ring {
  right:-5%;
  bottom:15%;
  left:auto;
  top:auto;
  width:340px;
  height:340px;
  --blur:.3px;
  --alpha:.8;
  --drift:12s;
  --dx:-18px;
  --dy:23px;
  --turn:-7deg;
  animation-delay:-7s;
  transform:rotate(23deg);
}

@keyframes hero-depth {0%{translate:0 0;rotate:0deg;scale:.96}55%{translate:var(--dx) var(--dy);rotate:var(--turn);scale:1.04}100%{translate:calc(var(--dx)*-.4) calc(var(--dy)*-.5);rotate:calc(var(--turn)*-.5);scale:.99}}

@media(max-width:1100px) {
.hero .decor-arrow {
  width:220px;
  height:220px;
  left:-65px;
  top:12%;
  --alpha:.5;
}
.hero .decor-star {
  width:95px;
  height:95px;
  right:7%;
  top:5%;
  --alpha:.3;
}
.hero .decor-sphere {
  width:110px;
  height:110px;
  left:8%;
  bottom:3%;
  --alpha:.3;
}
.hero .decor-ring {
  width:230px;
  height:230px;
  right:-75px;
  bottom:9%;
  --alpha:.45;
}
}

@media(max-width:720px) {
.hero .decor-arrow {
  width:150px;
  height:150px;
  left:-55px;
  top:9%;
  --alpha:.36;
}
.hero .decor-star {
  right:3%;
  top:3%;
  width:75px;
  height:75px;
}
.hero .decor-sphere {
  left:9%;
  bottom:1%;
  width:80px;
  height:80px;
}
.hero .decor-ring {
  width:180px;
  height:180px;
  right:-75px;
  bottom:5%;
  --alpha:.35;
}
}

@media(prefers-reduced-motion:reduce) {
.hero .decor-piece {
  animation:none;
  will-change:auto;
}
}

.hero::before {
  opacity:.13;
}

.hero .decor-document {
  background-position:50% 100%;
  left:3%;
  top:62%;
  width:130px;
  height:130px;
  --blur:1.2px;
  --alpha:.55;
  --drift:16s;
  --dx:13px;
  --dy:-16px;
  --turn:-8deg;
  animation-delay:-11s;
  transform:rotate(15deg);
}

.hero .decor-ribbon {
  background-position:100% 100%;
  right:2%;
  top:22%;
  width:200px;
  height:200px;
  --blur:2.5px;
  --alpha:.5;
  --drift:19s;
  --dx:-15px;
  --dy:17px;
  --turn:9deg;
  animation-delay:-6s;
  transform:rotate(-20deg);
}

@media(max-width:1100px) {
.hero .decor-document {
  left:1%;
  top:65%;
  width:100px;
  height:100px;
  --alpha:.35;
}
.hero .decor-ribbon {
  right:-25px;
  top:25%;
  width:135px;
  height:135px;
  --alpha:.3;
}
}

@media(max-width:720px) {
.hero .decor-document {
  left:-25px;
  top:64%;
  width:80px;
  height:80px;
  --alpha:.3;
}
.hero .decor-ribbon {
  right:-28px;
  top:24%;
  width:100px;
  height:100px;
  --alpha:.25;
}
}

.hero .decor-star {
  left:-48px;
  right:auto;
  top:-22px;
  bottom:auto;
  width:180px;
  height:180px;
  --blur:.4px;
  --alpha:.8;
  transform:rotate(-18deg);
}

.hero .decor-arrow {
  left:60%;
  right:auto;
  top:-115px;
  bottom:auto;
  width:230px;
  height:230px;
  --blur:0px;
  --alpha:.75;
  transform:rotate(22deg);
}

.hero .decor-ring {
  left:-100px;
  right:auto;
  bottom:205px;
  top:auto;
  width:380px;
  height:380px;
  --blur:0px;
  --alpha:.9;
  transform:rotate(-12deg);
}

.hero .decor-sphere {
  right:-90px;
  left:auto;
  bottom:12%;
  top:auto;
  width:260px;
  height:260px;
  --blur:1px;
  --alpha:.7;
  transform:rotate(12deg);
}

.hero .decor-document {
  left:2%;
  right:auto;
  top:auto;
  bottom:17%;
  width:150px;
  height:150px;
  --blur:0px;
  --alpha:.8;
  transform:rotate(-8deg);
}

.hero .decor-ribbon {
  right:-60px;
  left:auto;
  top:auto;
  bottom:-120px;
  width:320px;
  height:320px;
  --blur:1.5px;
  --alpha:.7;
  transform:rotate(-25deg);
}

@media(max-width:1100px) {
.hero .decor-star {
  left:-50px;
  top:-20px;
  width:140px;
  height:140px;
}
.hero .decor-arrow {
  left:62%;
  top:-85px;
  width:180px;
  height:180px;
}
.hero .decor-ring {
  left:-100px;
  bottom:235px;
  width:290px;
  height:290px;
}
.hero .decor-sphere {
  right:-90px;
  bottom:15%;
  width:210px;
  height:210px;
}
.hero .decor-document {
  left:-25px;
  bottom:22%;
  width:110px;
  height:110px;
  --alpha:.5;
}
.hero .decor-ribbon {
  right:-65px;
  bottom:-80px;
  width:240px;
  height:240px;
}
}

@media(max-width:720px) {
.hero .decor-star {
  left:-35px;
  top:-15px;
  width:100px;
  height:100px;
  --alpha:.55;
}
.hero .decor-arrow {
  left:65%;
  top:-65px;
  width:130px;
  height:130px;
}
.hero .decor-ring {
  left:-70px;
  bottom:260px;
  width:200px;
  height:200px;
  --alpha:.6;
}
.hero .decor-sphere {
  right:-70px;
  bottom:13%;
  width:150px;
  height:150px;
  --alpha:.4;
}
.hero .decor-document {
  left:-32px;
  bottom:20%;
  width:85px;
  height:85px;
  --alpha:.35;
}
.hero .decor-ribbon {
  right:-65px;
  bottom:-65px;
  width:180px;
  height:180px;
  --alpha:.5;
}
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: auto 0 0;
  height: 25px;
  background: var(--section-curve-fill, #fff);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 25' preserveAspectRatio='none'%3E%3Cpath d='M0 24 Q50 -22 100 24 L100 25 L0 25 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (max-width: 720px) {
  .hero::after {
    height: 16px;
  }
}

.hero .decor-arrow {
  top:-15px;
}

.hero .decor-sphere {
  width:165px;
  height:165px;
  right:-35px;
  bottom:18%;
}

.hero .decor-ribbon {
  width:350px;
  height:350px;
  right:-70px;
  bottom:-120px;
}

@media(max-width:1100px) {
.hero .decor-arrow {
  top:15px;
}
.hero .decor-sphere {
  width:125px;
  height:125px;
  right:-35px;
  bottom:18%;
}
.hero .decor-ribbon {
  width:260px;
  height:260px;
  right:-70px;
  bottom:-80px;
}
}

@media(max-width:720px) {
.hero .decor-arrow {
  top:35px;
}
.hero .decor-sphere {
  width:90px;
  height:90px;
  right:-30px;
  bottom:16%;
}
.hero .decor-ribbon {
  width:200px;
  height:200px;
  right:-70px;
  bottom:-65px;
}
}

@media(min-width:1101px) {
.hero .decor-arrow {
  left:calc(60% + 250px);
}
.hero .decor-sphere {
  right:315px;
  bottom:calc(18% + 180px);
}
}

.hero > :not(.hero-decor) {
  position: relative;
  z-index: 1;
}

.hero > .hero-intro {
  margin-block: auto;
}