.storefront .proxy-promo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  align-items: center;
  min-height: 430px;
  margin: 0 0 22px;
  padding: 48px clamp(30px, 4.2vw, 62px);
  overflow: hidden;
  border: 1px solid rgba(135, 238, 226, .22);
  border-radius: 26px;
  background: radial-gradient(circle at 72% 47%, rgba(17, 174, 184, .22), transparent 39%), radial-gradient(circle at 2% 95%, rgba(26, 32, 41, .25), transparent 42%), linear-gradient(112deg, #0f1217 0%, #0e1218 56%, #07434a 100%);
  box-shadow: 0 24px 54px rgba(15, 17, 21, .16);
  color: #fff;
}
.storefront .proxy-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.08) 40.08%, transparent 40.2%), linear-gradient(120deg, transparent 65%, rgba(255,255,255,.06) 65.08%, transparent 65.2%);
  background-size: 275px 100%;
  opacity: .45;
}
.storefront .proxy-promo-copy { position: relative; z-index: 2; min-width: 0; }
.storefront .proxy-promo-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 32px; padding: 0 13px;
  border: 1px solid rgba(143, 246, 230, .37);
  border-radius: 999px; background: rgba(85, 210, 194, .12);
  color: #b5fbef; font-size: 10px; font-weight: 900; letter-spacing: .16em;
}
.storefront .proxy-promo-kicker::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #63ebd8; box-shadow: 0 0 0 4px rgba(99,235,216,.14); }
.storefront .proxy-promo h2 {
  max-width: 670px; margin: 22px 0 14px; color: #fff;
  font-size: clamp(44px, 4.4vw, 66px); font-weight: 900; line-height: 1.01;
  letter-spacing: -.06em; text-wrap: balance;
}
.storefront .proxy-promo h2 em { display: block; color: #a7f6df; font-style: normal; }
.storefront .proxy-promo-copy > p { max-width: 515px; margin: 0; color: #e1e2e5; font-size: 16px; font-weight: 500; line-height: 1.55; }
.storefront .proxy-promo-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.storefront .proxy-promo-benefits li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(179,238,233,.24); border-radius: 999px; background: rgba(255,255,255,.07); color: #e6f8f7; font-size: 11px; font-weight: 700; }
.storefront .proxy-promo-benefits li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #62e5cf; }
.storefront .proxy-promo-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.storefront .proxy-promo-action { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; min-height: 50px; padding: 0 19px; border-radius: 11px; background: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.16); color: #12171f; font-size: 13px; font-weight: 900; }
.storefront .proxy-promo-action span:last-child { color: #14a797; font-size: 22px; font-weight: 500; line-height: 1; }
.storefront .proxy-promo-note { color: #aac8d2; font-size: 11px; }
.storefront .proxy-promo-art-wrap { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; height: 355px; }
.storefront .proxy-promo-art-wrap::before { content: ""; position: absolute; width: min(92%, 430px); aspect-ratio: 1; border: 1px solid rgba(148,240,223,.16); border-radius: 50%; box-shadow: 0 0 0 46px rgba(107,220,208,.035), 0 0 0 98px rgba(107,220,208,.02); }
.storefront .proxy-promo-art { position: relative; display: block; width: min(120%, 670px); max-width: none; height: auto; filter: drop-shadow(0 24px 34px rgba(9, 12, 16,.23)); }
.storefront .proxy-promo-art-tag { position: absolute; right: -5px; bottom: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(170,250,238,.55); border-radius: 12px; background: rgba(12, 15, 21,.88); box-shadow: 0 14px 32px rgba(9, 12, 16,.23); color: #ddfff8; font-size: 11px; font-weight: 900; letter-spacing: .04em; backdrop-filter: blur(10px); }
.storefront .proxy-promo-art-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #55e6ce; box-shadow: 0 0 0 4px rgba(85,230,206,.15); }
@media (max-width: 900px) { .storefront .proxy-promo { min-height: 390px; } .storefront .proxy-promo h2 { font-size: clamp(40px, 5vw, 55px); } .storefront .proxy-promo-art-wrap { height: 305px; } }
@media (max-width: 700px) { .storefront .proxy-promo { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 29px 24px 20px; text-align: center; } .storefront .proxy-promo-copy { display: grid; justify-items: center; } .storefront .proxy-promo h2 { margin: 19px 0 11px; font-size: clamp(38px, 8vw, 48px); } .storefront .proxy-promo-benefits { justify-content: center; margin-top: 16px; } .storefront .proxy-promo-footer { justify-content: center; margin-top: 20px; } .storefront .proxy-promo-art-wrap { width: 100%; height: 270px; } .storefront .proxy-promo-art { width: min(110%, 490px); } .storefront .proxy-promo-art-tag { right: 3%; bottom: 10px; } }
@media (max-width: 420px) { .storefront .proxy-promo { padding: 24px 18px 18px; border-radius: 20px; } .storefront .proxy-promo h2 { font-size: 39px; } .storefront .proxy-promo-copy > p { font-size: 13px; } .storefront .proxy-promo-benefits { gap: 5px; } .storefront .proxy-promo-benefits li { padding: 6px 8px; font-size: 9px; } .storefront .proxy-promo-footer { gap: 7px; } .storefront .proxy-promo-note { width: 100%; } .storefront .proxy-promo-art-wrap { height: 230px; } .storefront .proxy-promo-art { width: 116%; } .storefront .proxy-promo-art-tag { right: 0; bottom: 0; padding: 9px 10px; font-size: 9px; } }
@media (prefers-reduced-motion: no-preference) { .storefront .proxy-promo-art { animation: proxy-art-reveal .8s ease-out both; } @keyframes proxy-art-reveal { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } }

.storefront a.proxy-promo-action { transition: transform .18s ease, box-shadow .18s ease; }
.storefront a.proxy-promo-action:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.24); }
.storefront a.proxy-promo-action:focus-visible { outline: 3px solid #62e5cf; outline-offset: 3px; }
