.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; width: 1300px; } .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 picture{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .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; display:block; margin:0 auto; 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; width: 100%; } .zp-hero__poster{ justify-items:center; width:100%; order:-1; } .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;width: 100%;} }