.loyalty-card { position: absolute; z-index: 1; top: 132px; left: 5%; width: 72%; aspect-ratio: 1.6; border-radius: 16px; padding: 22px; background: var(--solid-blue, #124dc9); color: white; transform: rotate(-10deg); box-shadow: 0 25px 40px -18px #0a337a70; overflow: hidden; }
.loyalty-card::after { content: ""; position: absolute; width: 250px; height: 250px; right: -140px; top: -120px; border: 45px solid #ffffff0c; border-radius: 50%; pointer-events: none; }
.loyalty-card-top, .loyalty-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.card-wordmark { display: inline-flex; align-items: center; gap: 7px; font-size: 24px; letter-spacing: -1px; font-weight: 700; }
.card-wordmark img { flex-shrink: 0; width: 26px; height: 26px; }
.loyalty-card-top > .icon { opacity: .7; width: 29px; height: 29px; }
.loyalty-card p { font-size: clamp(20px, 2.2vw, 29px); font-weight: 600; line-height: 1.15; letter-spacing: -1px; margin: 20px 0; }
.loyalty-card-bottom { font-size: 10px; letter-spacing: 1px; color: #e0eaff; }
.card-mark { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -2px; }

.payment-phone { position: absolute; z-index: 2; top: 47px; right: 7%; width: 36%; max-width: 188px; aspect-ratio: .52; border: 5px solid #172437; border-radius: 28px; background: #172437; transform: rotate(8deg); box-shadow: 0 22px 35px -18px #17345a70; }
.payment-phone::before { content: ""; position: absolute; z-index: 1; top: 10px; left: 50%; width: 20%; height: 5px; border-radius: 999px; background: #172437; transform: translateX(-50%); }
.payment-phone::after { content: ""; position: absolute; bottom: 9px; left: 50%; width: 30%; height: 3px; border-radius: 3px; background: #b7c2d0; transform: translateX(-50%); }
.phone-screen { position: absolute; inset: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 10px 18px; border-radius: 19px; background: var(--public-surface, var(--surface, #ffffff)); overflow: hidden; }
.phone-wordmark { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 750; line-height: 1.2; letter-spacing: -.7px; color: var(--public-link, var(--blue, #124dc9)); }
.phone-wordmark picture { display: flex; flex-shrink: 0; }
.phone-wordmark img { display: block; width: 20px; height: 20px; }
.phone-carwash { margin-top: 16px; color: var(--public-ink, var(--ink, #172437)); font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; }
/* Przycinamy biały margines wewnątrz SVG, zachowując skalę wzoru QR. */
.phone-qr { flex-shrink: 0; width: calc(100% - 6px); margin-top: 12px; padding: 2px; background: white; border-radius: 7px; clip-path: inset(10% round 7px); }
.phone-qr img { display: block; width: 100%; height: auto; }

@media (prefers-color-scheme: dark) {
    .payment-phone { background: #5a718e; border-color: #5a718e; }
    .payment-phone::before { background: #0b1422; }
    .phone-wordmark { color: var(--public-brand, var(--brand, #ffffff)); }
}