.scroll-promo{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,6,12,.72);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
  backdrop-filter:blur(8px);
}
.scroll-promo.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.scroll-promo__panel{
  position:relative;
  width:min(560px,calc(100vw - 28px));
  border:1px solid rgba(82,133,255,.45);
  border-radius:22px;
  overflow:hidden;
  background:#07101f;
  box-shadow:0 30px 100px rgba(0,0,0,.62),0 0 55px rgba(47,107,255,.2);
  transform:translateY(20px) scale(.97);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.scroll-promo.is-visible .scroll-promo__panel{transform:none}
.scroll-promo__link{position:relative;display:block;color:#fff;text-decoration:none}
.scroll-promo__image{display:block;width:100%;height:350px;aspect-ratio:16/10;object-fit:cover;object-position:center 42%}
.scroll-promo__link::after{
  content:"";
  position:absolute;
  inset:28% 0 0;
  background:linear-gradient(180deg,transparent,rgba(3,7,17,.96));
  pointer-events:none;
}
.scroll-promo__copy{
  position:absolute;
  z-index:2;
  right:15px;
  bottom:13px;
  left:15px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.scroll-promo__text{display:grid;gap:3px;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.scroll-promo__eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9db9ff}
.scroll-promo__title{font-size:19px;font-weight:850;line-height:1.02}
.scroll-promo__subtitle{max-width:230px;color:#d6def0;font-size:9px;line-height:1.3}
.scroll-promo__cta{flex:none;padding:9px 12px;border-radius:999px;background:#2f6bff;color:#fff;font-size:10px;font-weight:800;box-shadow:0 9px 25px rgba(47,107,255,.32)}
.scroll-promo__close{
  position:absolute;
  z-index:4;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(5,8,16,.78);
  color:#fff;
  font:700 18px/1 system-ui,sans-serif;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.scroll-promo__close:hover{background:#2f6bff;border-color:#2f6bff}
body.scroll-promo-open{overflow:hidden}
@media(max-width:620px){
  .scroll-promo{padding:14px}
  .scroll-promo__panel{width:100%;border-radius:18px}
  .scroll-promo__image{height:auto;aspect-ratio:4/5;object-position:center}
  .scroll-promo__copy{right:11px;bottom:10px;left:11px;display:flex;gap:8px}
  .scroll-promo__title{font-size:15px}
  .scroll-promo__subtitle{display:none}
  .scroll-promo__cta{padding:8px 10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.scroll-promo,.scroll-promo__panel{transition:none}}