/* Cross-promotion banner for our other apps. Each app carries its own palette. */
.app-promo {
  --promo-bg: #fff7ef;
  --promo-border: #eeddd2;
  --promo-ink: #332825;
  --promo-muted: #766864;
  --promo-accent: #c5486e;
  --promo-cta-bg: #c5486e;
  --promo-cta-ink: #fff;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, auto);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: 28px 0;
  padding: 34px clamp(22px, 3vw, 32px) 26px;
  border: 1px solid var(--promo-border);
  border-radius: 24px;
  background: var(--promo-bg);
  color: var(--promo-ink);
  box-shadow: 0 16px 40px rgba(18, 13, 39, .1);
  font-family: inherit;
}
.app-promo--bimbi {
  background: radial-gradient(ellipse at 100% 0, #fbe9de 0, transparent 60%), #fff7ef;
}
/* Stawka: the four-colour frame of the app icon (yellow, teal, red, purple quarters) around a dark ink card. */
.app-promo--stawka {
  --promo-ink: #f6f4fb;
  --promo-muted: #a9a5b8;
  --promo-accent: #ffc21a;
  --promo-cta-bg: #ffc21a;
  --promo-cta-ink: #16141f;
  border: 3px solid transparent;
  background:
    radial-gradient(ellipse at 8% 0, rgba(255, 194, 26, .14) 0, transparent 55%) padding-box,
    radial-gradient(ellipse at 100% 100%, rgba(154, 117, 255, .16) 0, transparent 55%) padding-box,
    linear-gradient(#16141f, #16141f) padding-box,
    linear-gradient(#ffc21a, #ffc21a) left top / 50% 50% no-repeat border-box,
    linear-gradient(#1ac3b5, #1ac3b5) right top / 50% 50% no-repeat border-box,
    linear-gradient(#ff5c38, #ff5c38) left bottom / 50% 50% no-repeat border-box,
    linear-gradient(#9a75ff, #9a75ff) right bottom / 50% 50% no-repeat border-box;
  color-scheme: dark;
}
.app-promo--runnin {
  --promo-border: rgba(249, 115, 22, .35);
  --promo-ink: #fafaf9;
  --promo-muted: #a8a29e;
  --promo-accent: #f97316;
  --promo-cta-bg: #f97316;
  --promo-cta-ink: #1c0a00;
  background: radial-gradient(ellipse at 12% 0, rgba(249, 115, 22, .2) 0, transparent 60%), #0c0a09;
  color-scheme: dark;
}
/* One native link covers the whole banner; the button is only its visual label. */
.app-promo-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.app-promo a:focus-visible { outline: 3px solid var(--promo-accent); outline-offset: 5px; }
.app-promo-label { position: absolute; top: 12px; left: 0; right: 0; text-align: center; color: var(--promo-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.app-promo-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.app-promo-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; }
.app-promo-name { color: var(--promo-ink); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.app-promo h2 { margin: 0 0 10px; color: var(--promo-ink); font-family: inherit; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.22; font-weight: 800; letter-spacing: -.035em; }
.app-promo p { margin: 0; max-width: 570px; color: var(--promo-muted); font-size: 13px; line-height: 1.65; }
.app-promo-actions { display: flex; justify-content: center; }
.app-promo-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--promo-cta-bg); color: var(--promo-cta-ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
.app-promo:hover .app-promo-cta { filter: brightness(1.06); }
@media (max-width: 760px) {
  .app-promo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .app-promo-actions { justify-content: flex-start; }
}
@media (max-width: 380px) {
  .app-promo { padding: 34px 20px 22px; }
  .app-promo-cta { white-space: normal; }
}