html,
body {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: #100d15;
  font-family: Arial, sans-serif;
}
.banner {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #100d15 center / cover no-repeat;
}
.banner--desktop {
  aspect-ratio: 1200 / 145;
  background-image: url("desktop-bg.webp");
}
.banner img {
  position: absolute;
  height: auto;
}
.banner__discount {
  left: 0;
  top: 0;
  width: 44%;
  z-index: 1;
  animation: banner-enter 650ms ease-out both;
}
.banner__ribbon {
  right: 0;
  top: 0;
  width: 47.3%;
}
.banner__button {
  right: 3.3%;
  top: 50%;
  width: 26.25%;
  transform: translateY(-50%);
  z-index: 2;
  animation: banner-pulse 750ms ease-in-out 800ms 3;
}
.banner__period {
  position: absolute;
  bottom: 4%;
  left: 2%;
  width: 42%;
  text-align: center;
  font-size: clamp(7px, 1vw, 12px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 3px #000;
}
.banner--mobile {
  aspect-ratio: 1;
  background-image: url("mobile-bg.webp");
}
.banner--mobile .banner__discount {
  top: 5%;
  width: 100%;
}
.banner--mobile .banner__ribbon {
  top: 48%;
  width: 100%;
}
.banner--mobile .banner__button {
  top: auto;
  bottom: 10%;
  right: 12.5%;
  width: 75%;
  transform: none;
}
.banner--mobile .banner__period {
  bottom: 3%;
  left: 0;
  width: 100%;
  font-size: clamp(9px, 4vw, 16px);
}
.banner:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: -4px;
}
@keyframes banner-enter {
  from { translate: 0 12px; }
  to { translate: 0 0; }
}
@keyframes banner-pulse {
  50% { scale: 1.04; filter: brightness(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .banner__discount,
  .banner__button { animation: none; }
}