.zp-hero{
  position:relative;
  padding:clamp(44px,8vw,88px) 0 42px;
  overflow:hidden;
  border-bottom:1px solid rgba(235,241,228,.08);
}
.zp-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.zp-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:clamp(18px,3vw,34px);
  align-items:center;
}
.zp-hero__copy{display:grid;gap:16px}
.zp-hero__p{
  margin:0;
  color:rgba(235,233,223,.74);
  font-size:1.1rem;
  max-width:62ch;
  line-height:1.6;
}
.zp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.zp-hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.zp-hero__tag{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(235,241,228,.10);
  background:rgba(6,8,8,.20);
  color:rgba(235,233,223,.74);
  font-size:.92rem;
  letter-spacing:.02em;
}
.zp-hero__poster{display:grid;gap:12px;justify-items:end}
.zp-hero__frame{
  width:min(420px,100%);
  aspect-ratio:1/1;
  border-radius:var(--radius-xl);
  border:1px solid rgba(235,241,228,.10);
  background:linear-gradient(180deg,rgba(16,21,20,.75),rgba(6,8,8,.92));
  box-shadow:var(--shadow-glow);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  animation:zp-glow-pulse 3.8s ease-in-out infinite;
}
.zp-hero__frame::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 320px at 30% 25%,rgba(240,255,107,.22),transparent 55%),
    radial-gradient(680px 280px at 72% 72%,rgba(199,255,0,.16),transparent 58%),
    radial-gradient(780px 420px at 50% 85%,rgba(211,30,45,.10),transparent 66%);
  filter:blur(1px);
  opacity:.9;
}
.zp-hero__logo{
  position:relative;
  z-index:1;
  width:min(290px,72%);
  height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.70));
}
.zp-hero__note{
  width:min(420px,100%);
  text-align:right;
  color:rgba(235,233,223,.70);
  font-size:.95rem;
}

@media (max-width:992px){
  .zp-hero__inner{
    grid-template-columns:1fr;
    gap:48px;
  }
  .zp-hero__poster{
    justify-items:center;
    width:100%;
    order:-1; /* Logo first on mobile usually looks cool for brand */
  }
  .zp-hero__note{text-align:center}
  
  .zp-hero__copy{
    text-align:center;
    justify-items:center;
  }
  
  .zp-hero__cta{
    flex-direction:column;
    width:100%;
    gap:16px;
  }
  .zp-hero__cta > * {
    width:100%;
    justify-content:center;
  }

  .zp-hero__tags{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:8px;
    width:100%;
    mask-image:linear-gradient(90deg, black 85%, transparent);
    -webkit-mask-image:linear-gradient(90deg, black 85%, transparent);
    scrollbar-width:none;
  }
  .zp-hero__tags::-webkit-scrollbar{display:none}
  .zp-hero__tag{
    flex-shrink:0;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .zp-hero__frame{animation:none}
}