/* @u */
/* Figma hsxftd3Zi8PsYWvCYS4XYa node 32:40: 123 gold benefits (4 numbered cards with a corner-lit outline and an icon). Frame 1920. Fonts: Noto Sans Hebrew, Poppins (numbers).
   Type: body 22 to 20px. Card outline = gradient border (gold at two corners) via mask. */
.c-bn { --u: calc(min(100vw, 1920px) / 1920); --gold: linear-gradient(270deg, #8f5c1a 0%, #fce277 25%, #9e6f22 55%, #fad652 80%, #b88528 100%); direction: rtl; font-family: "Noto Sans Hebrew", "Poppins", sans-serif; background: #191508; color: #fff; overflow-x: clip; display: flow-root; }
.c-bn :where(h2, h3, p, ol, li) { margin: 0; padding: 0; list-style: none; }
.c-bn__sec { box-sizing: border-box; padding: 46px 16px 64px; text-align: center; }
.c-bn__h { max-width: 600px; margin: 0 auto; font-size: clamp(24px, 6.4vw, 34px); font-weight: 900; line-height: 1.3; background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; }
.c-bn__list { display: flex; flex-direction: column; gap: 30px; max-width: 520px; margin: 34px auto 0; }
.c-bn__item { position: relative; }
.c-bn__n { position: relative; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: 64px; height: 64px; margin: 0 auto -14px; border-radius: 12px; background: #191508; font-family: "Poppins", sans-serif; font-size: 36px; font-weight: 900; line-height: 1; color: #fff; }
.c-bn__n::before, .c-bn__card::before { content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: linear-gradient(135deg, #fad652, rgba(143, 92, 26, .15) 28%, rgba(143, 92, 26, .15) 72%, #fad652); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.c-bn__card { position: relative; box-sizing: border-box; padding: 34px 22px 20px; border-radius: 15px; text-align: center; }
.c-bn__t { font-size: 22px; font-weight: 900; line-height: 1.3; letter-spacing: .05em; background: var(--gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.c-bn__card p { margin-top: 12px; font-size: 17px; font-weight: 400; line-height: 1.6; color: #fff; }
.c-bn__ic { display: block; width: 64px; height: 64px; margin: 14px auto 0; }

@media (min-width: 1280px) {
  .c-bn__sec { width: calc(1920 * var(--u)); max-width: none; height: calc(1589 * var(--u)); margin: 0 auto; padding: 0; position: relative; }
  .c-bn__h { position: absolute; top: calc(66 * var(--u)); left: 0; right: 0; max-width: none; font-size: calc(40 * var(--u)); line-height: calc(58 * var(--u)); }
  .c-bn__list { position: absolute; top: calc(246 * var(--u)); left: 0; right: 0; display: block; max-width: none; margin: 0; }
  .c-bn__item { position: absolute; width: calc(611 * var(--u)); height: calc(495 * var(--u)); }
  .c-bn__item:nth-child(1) { left: calc(1048 * var(--u)); top: 0; }
  .c-bn__item:nth-child(2) { left: calc(261 * var(--u)); top: 0; }
  .c-bn__item:nth-child(3) { left: calc(1049 * var(--u)); top: calc(664 * var(--u)); }
  .c-bn__item:nth-child(4) { left: calc(262 * var(--u)); top: calc(664 * var(--u)); }
  .c-bn__n { position: absolute; left: calc(239 * var(--u)); top: 0; width: calc(133 * var(--u)); height: calc(133 * var(--u)); margin: 0; border-radius: calc(15 * var(--u)); font-size: calc(67 * var(--u)); }
  .c-bn__card { position: absolute; left: 0; top: calc(169 * var(--u)); width: calc(611 * var(--u)); height: calc(326 * var(--u)); padding: 0; display: block; border-radius: calc(15 * var(--u)); }
  .c-bn__t { position: absolute; top: calc(28 * var(--u)); left: 0; right: 0; font-size: calc(26 * var(--u)); line-height: calc(40 * var(--u)); }
  .c-bn__card p { position: absolute; top: calc(90 * var(--u)); left: 50%; width: calc(520 * var(--u)); margin: 0 0 0 calc(-260 * var(--u)); font-size: max(13px, calc(20 * var(--u))); line-height: calc(34 * var(--u)); }
  .c-bn__ic { position: absolute; left: calc(254 * var(--u)); top: calc(193 * var(--u)); width: calc(103 * var(--u)); height: calc(103 * var(--u)); margin: 0; }
}
