[ui-section=promo-banners]{ padding:var(--top-spacing,24px) 8% var(--bottom-spacing,24px); }
[ui-section=promo-banners] .pb-head{ text-align:center; margin-bottom:20px; }
[ui-section=promo-banners] .pb-head h2{ margin:0; font-size:clamp(1.4rem,3vw,2rem); color:#141a46; }
[ui-section=promo-banners] .pb-grid{
  list-style:none; margin:0; padding:0; display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
}
[ui-section=promo-banners] .pb-card{
  position:relative; overflow:hidden; isolation:isolate; min-height:190px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:26px 28px; border-radius:24px; color:#fff;
  box-shadow:0 18px 36px -22px rgba(20,26,70,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}
[ui-section=promo-banners] .pb-card:hover{ transform:translateY(-4px); }
[ui-section=promo-banners] .pb-card[data-tone=brand]{ background:linear-gradient(135deg,#2b3cc4 0%,#4a5ae8 100%); }
[ui-section=promo-banners] .pb-card[data-tone=dark]{ background:linear-gradient(135deg,#141a46 0%,#2a3180 100%); }
[ui-section=promo-banners] .pb-card[data-tone=accent]{ background:linear-gradient(135deg,#ff7a00 0%,#ffa840 100%); }
/* زخارف دائرية */
[ui-section=promo-banners] .pb-card::before,
[ui-section=promo-banners] .pb-card::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.12);
}
[ui-section=promo-banners] .pb-card::before{ width:180px; height:180px; inset-block-start:-60px; inset-inline-end:-50px; }
[ui-section=promo-banners] .pb-card::after{ width:110px; height:110px; inset-block-end:-40px; inset-inline-start:30%; background:rgba(255,255,255,.09); }
[ui-section=promo-banners] .pb-icon{
  width:54px; height:54px; padding:12px; border-radius:16px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
  stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
[ui-section=promo-banners] .pb-title{ margin:6px 0 0; color:#fff; font-size:1.3rem; font-weight:800; line-height:1.5; }
[ui-section=promo-banners] .pb-text{ margin:0; color:rgba(255,255,255,.92); font-size:.98rem; line-height:1.8; }
[ui-section=promo-banners] .pb-btn{
  width:fit-content; margin-top:8px; padding:10px 22px; border-radius:999px;
  background:#fff; color:#141a46; font-weight:800; text-decoration:none;
}
@media (max-width:900px){
  [ui-section=promo-banners] .pb-grid{ grid-template-columns:1fr; gap:14px; }
  [ui-section=promo-banners] .pb-card{ min-height:0; padding:22px; }
}