/* @u */
/* Bonus banner + 2 bonus cards + CTA - Figma file uDZg3WYkcWRbWbPLThB3Ry, frame 2295:128 (1920 x 1464), Liav's own Figma (text and images 1:1).
   >=1280px: the block at the bottom is in Figma px, converted by build.js to calc(N * var(--u)) (1:1 at 1920).
   Below 1280px: tablet (>=700px) and phone (<700px) layouts built from the same pieces (no horizontal scroll).
   The man / gifts groups are sized in percentages of their own box, so they keep the Figma composition at every size. */
.c-bb { --u: calc(min(100vw, 1920px) / 1920); position: relative; box-sizing: border-box; direction: rtl; overflow-x: clip; padding: 36px 0 44px; color: #2d2d2d; font-family: "Noto Sans Hebrew", sans-serif;
  background: radial-gradient(ellipse 60% 85% at 50% 30%, #eaf8fe 0%, #edf9fe 45%, #fbfdff 85%, #fff 100%); }
.c-bb *, .c-bb *::before, .c-bb *::after { box-sizing: border-box; }
.c-bb :where(h2, h3, p) { margin: 0; }
:where(.c-bb) img { display: block; max-width: none; }

/* ---------- banner ---------- */
.c-bb__banner { position: relative; margin-top: 64px; background: #003340; }
.c-bb__stage { position: static; }
.c-bb__man { position: absolute; top: -58px; right: 10px; width: 128px; aspect-ratio: 315 / 434; }
.c-bb__glow-man { position: absolute; left: 60.6%; top: 75.8%; width: 159.8%; height: auto; transform: translate(-50%, -50%) rotate(-167.55deg) scaleY(-1); }
.c-bb__man-flip { position: absolute; inset: 0; transform: scaleX(-1); }
.c-bb__man-crop { position: absolute; inset: 0; overflow: hidden; }
.c-bb__man-crop img { position: absolute; left: 0; top: -10.75%; width: 167.91%; height: 152.28%; }
.c-bb__gifts { position: absolute; top: 20px; left: 8px; width: 132px; aspect-ratio: 246.3 / 198.6; }
.c-bb__glow-gift { position: absolute; left: 23.8%; top: 57.4%; width: 156.6%; height: auto; transform: translate(-50%, -50%) rotate(-12.45deg); }
.c-bb__gift { position: absolute; aspect-ratio: 156.128 / 163.102; transform: translate(-50%, -50%) rotate(-12deg); }
.c-bb__gift--big { left: 37.9%; top: 48.3%; width: 63.4%; }
.c-bb__gift--small { left: 76%; top: 69.9%; width: 39.5%; }
.c-bb__crop { position: absolute; inset: 0; overflow: hidden; }
.c-bb__crop img { position: absolute; left: -5.33%; top: -2.61%; width: 110.98%; height: 106.23%; }
.c-bb__text { position: relative; display: flex; flex-direction: column; align-items: center; padding: 138px 16px 26px; text-align: center; }
.c-bb__kicker { font-size: 17px; font-weight: 400; line-height: 1.4; letter-spacing: .08em; color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, .12); }
.c-bb__title { margin-top: 6px; font-size: 24px; font-weight: 900; line-height: 1.3; color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, .12); text-wrap: balance; }
.c-bb__accent { color: #1194ff; }
.c-bb__pillrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.c-bb__rule { display: block; width: 28px; height: 2px; background: linear-gradient(90deg, transparent 0%, #9fd4ff 50%, transparent 100%); }
.c-bb__pill { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 16px; background: #e6f6ff; box-shadow: 0 2px 6px rgba(0, 0, 0, .24); font-size: 17px; font-weight: 900; line-height: 1.2; color: #0072d0; white-space: nowrap; }
.c-bb__pill-icon { width: 22px; height: 22px; }

/* ---------- cards ---------- */
.c-bb__cards { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 36px 16px 0; }
.c-bb-card { width: 100%; max-width: 560px; padding: 18px 16px 16px; border-radius: 20px; background: #fff; box-shadow: 0 1.764px 17.641px 5.292px rgba(0, 0, 0, .25); text-align: center; }
.c-bb-card__media { position: relative; overflow: hidden; margin: 0 auto; width: min(301px, 78%); aspect-ratio: 301 / 201.396; }
.c-bb-card--zoom .c-bb-card__media { width: min(275px, 72%); aspect-ratio: 275 / 212; }
.c-bb-card__media img { position: absolute; }
.c-bb-card--files .c-bb-card__media img { left: 0; top: -28.26%; width: 100%; height: 149.46%; }
.c-bb-card--zoom .c-bb-card__media img { left: -2.07%; top: -13.43%; width: 103.98%; height: 134.69%; }
.c-bb-card__line { width: min(600px, 88%); height: 2px; margin: 14px auto 16px; }
.c-bb-card__title { margin: 0 auto; font-size: 22px; font-weight: 900; line-height: 1.3; color: #2d2d2d; text-shadow: 0 0 20px rgba(0, 0, 0, .2); text-wrap: balance; }
.c-bb-card__text { margin: 14px auto 0; font-size: 17px; font-weight: 400; line-height: 1.55; color: #2d2d2d; text-shadow: 0 2px 24px rgba(0, 0, 0, .12); }
.c-bb-card__bar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px auto 0; padding: 14px 12px; border-radius: 16px; background: #e6f6ff; box-shadow: 0 4px 12px rgba(0, 0, 0, .24); font-size: 19px; font-weight: 900; line-height: 1.3; }
.c-bb-card__price { color: #2d2d2d; white-space: nowrap; }
.c-bb-card__strike { position: relative; display: inline-block; }
.c-bb-card__strike::after { content: ""; position: absolute; left: 50%; top: 50%; width: 98%; height: 4px; border-radius: 2px; background: linear-gradient(180deg, #ff1a1a 0%, #ffd9d9 50%, #ff1a1a 100%); transform: translate(-50%, -50%) rotate(-19.88deg); }
.c-bb-card__sep { display: block; flex: none; width: 64px; height: 2px; background: #0072d0; }
.c-bb-card__perk { display: flex; align-items: center; gap: 10px; color: #0072d0; text-shadow: 0 0 23.886px rgba(0, 0, 0, .2); white-space: nowrap; }
.c-bb-card__badge { width: 34px; height: 34px; }

/* ---------- CTA ---------- */
.c-bb__cta { display: flex; justify-content: center; padding: 40px 16px 0; }
.c-bb__btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px; border-radius: 14px; background: #0072d0; color: #fff; font-size: clamp(16px, 4.6vw, 24px); font-weight: 900; line-height: 1.3; text-decoration: none; white-space: nowrap; filter: drop-shadow(0 2px 3px #0cf); }
.c-bb__btn-text { text-shadow: 0 2.955px 5.909px rgba(0, 0, 0, .25); }
.c-bb__btn-icon { width: 32px; height: 32px; }
.c-bb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- tablet 700-1279 ---------- */
@media (min-width: 700px) and (max-width: 1279px) {
  .c-bb { padding-top: 90px; }
  .c-bb__banner { margin-top: 40px; }
  .c-bb__man { top: -72px; right: 18px; width: 190px; }
  .c-bb__gifts { top: 24px; left: 20px; width: 190px; }
  .c-bb__text { padding: 36px 230px 36px 220px; }
  .c-bb__kicker { font-size: 20px; }
  .c-bb__title { font-size: 30px; }
  .c-bb__pillrow { gap: 14px; margin-top: 18px; }
  .c-bb__rule { width: 44px; }
  .c-bb__pill { padding: 9px 18px; font-size: 20px; }
  .c-bb__pill-icon { width: 26px; height: 26px; }
  .c-bb__cards { padding-top: 48px; gap: 28px; }
  .c-bb-card { padding: 22px 28px 22px; }
  .c-bb-card__title { font-size: 28px; }
  .c-bb-card__text { font-size: 19px; }
  .c-bb-card__bar { flex-direction: row; justify-content: center; gap: 0; padding: 16px 20px; font-size: 22px; }
  .c-bb-card__sep { width: 2.4px; height: 56px; margin: 0 22px; }
  .c-bb-card__badge { width: 40px; height: 40px; }
  .c-bb__cta { padding-top: 52px; }
  .c-bb__btn { gap: 20px; padding: 10px 30px; font-size: 32px; }
  .c-bb__btn-icon { width: 42px; height: 42px; }
}

/* ---------- desktop >= 1280: Figma px, scaled 1:1 at 1920 ---------- */
@media (min-width: 1280px) {
  .c-bb { padding: calc(93 * var(--u)) 0 calc(46.3 * var(--u)); }
  .c-bb__banner { height: calc(369 * var(--u)); margin-top: 0; background: linear-gradient(180deg, transparent 0, transparent calc(120 * var(--u)), #003340 calc(120 * var(--u)), #003340 100%); }
  .c-bb__stage { position: relative; width: calc(1920 * var(--u)); height: calc(369 * var(--u)); margin: 0 auto; }
  .c-bb__man { top: calc(-65 * var(--u)); right: 0; width: calc(315 * var(--u)); height: calc(434 * var(--u)); }
  .c-bb__gifts { top: calc(158 * var(--u)); left: calc(40 * var(--u)); width: calc(246.3 * var(--u)); height: calc(198.6 * var(--u)); }
  .c-bb__text { position: absolute; left: 0; right: 0; top: calc(148 * var(--u)); padding: 0; }
  .c-bb__kicker { height: calc(50 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(50 * var(--u)); letter-spacing: calc(3.84 * var(--u)); }
  .c-bb__title { height: calc(50 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(42 * var(--u)); line-height: calc(50 * var(--u)); white-space: nowrap; }
  .c-bb__pillrow { gap: calc(24.6 * var(--u)); margin-top: calc(27.6 * var(--u)); }
  .c-bb__rule { position: relative; top: calc(1.3 * var(--u)); }
  .c-bb__rule { width: calc(123 * var(--u)); height: calc(2 * var(--u)); }
  .c-bb__pill { width: calc(373.68 * var(--u)); height: calc(62.28 * var(--u)); gap: calc(11 * var(--u)); padding: 0; border-radius: calc(24 * var(--u)); box-shadow: 0 calc(1.977 * var(--u)) calc(5.931 * var(--u)) rgba(0, 0, 0, .24); font-size: calc(29.439 * var(--u)); line-height: calc(28.2 * var(--u)); text-shadow: 0 0 calc(14.482 * var(--u)) rgba(0, 0, 0, .2); }
  .c-bb__pill-icon { width: calc(35.572 * var(--u)); height: calc(35.572 * var(--u)); }

  .c-bb__cards { flex-direction: row; align-items: flex-start; justify-content: center; gap: calc(56 * var(--u)); padding: calc(73 * var(--u)) calc(87 * var(--u)) 0; }
  .c-bb-card { flex: none; width: calc(740.08 * var(--u)); max-width: none; height: calc(557.04 * var(--u)); padding: 0; }
  .c-bb-card__media { width: calc(264.88 * var(--u)); margin-top: calc(19.36 * var(--u)); }
  .c-bb-card--zoom .c-bb-card__media { width: calc(242 * var(--u)); margin-top: calc(13.2 * var(--u)); }
  .c-bb-card__line { width: calc(528 * var(--u)); margin: calc(13.728 * var(--u)) auto 0; }
  .c-bb-card--zoom .c-bb-card__line { margin-top: calc(14.96 * var(--u)); }
  .c-bb-card__title { display: flex; align-items: center; justify-content: center; width: calc(487.52 * var(--u)); height: calc(80.96 * var(--u)); margin-top: calc(12.32 * var(--u)); font-size: calc(31.68 * var(--u)); line-height: calc(37.84 * var(--u)); text-shadow: 0 0 calc(17.6 * var(--u)) rgba(0, 0, 0, .2); }
  .c-bb-card--zoom .c-bb-card__title { width: calc(542.96 * var(--u)); margin-top: calc(7.92 * var(--u)); }
  .c-bb-card__text { display: flex; align-items: center; justify-content: center; width: calc(666.16 * var(--u)); height: calc(88.88 * var(--u)); margin-top: calc(18.48 * var(--u)); font-size: calc(25.52 * var(--u)); line-height: calc(36.96 * var(--u)); }
  .c-bb-card__bar { flex-direction: row; justify-content: flex-start; gap: 0; width: calc(665.28 * var(--u)); height: calc(110.88 * var(--u)); margin-top: calc(18.48 * var(--u)); padding: 0 calc(24.64 * var(--u)); border-radius: calc(17.6 * var(--u)); box-shadow: 0 calc(3.52 * var(--u)) calc(10.56 * var(--u)) rgba(0, 0, 0, .24); font-size: calc(28.376 * var(--u)); line-height: calc(32.58 * var(--u)); }
  .c-bb-card__price { text-shadow: 0 0 calc(21.02 * var(--u)) rgba(0, 0, 0, .2); }
  .c-bb-card__strike::after { width: calc(206.8 * var(--u)); height: calc(3.52 * var(--u)); }
  .c-bb-card__sep { width: calc(2.103 * var(--u)); height: calc(88 * var(--u)); margin: 0 calc(26.224 * var(--u)) 0 calc(33.704 * var(--u)); }
  .c-bb-card__perk { gap: calc(12.32 * var(--u)); }
  .c-bb-card__badge { width: calc(42.24 * var(--u)); height: calc(42.24 * var(--u)); }

  .c-bb__cta { padding: calc(143.44 * var(--u)) 0 0; }
  .c-bb__btn { gap: calc(31.2 * var(--u)); padding: calc(8.667 * var(--u)) calc(40.733 * var(--u)); border-radius: calc(17.333 * var(--u)); font-size: calc(46.8 * var(--u)); line-height: calc(58.934 * var(--u)); filter: drop-shadow(0 calc(1.734 * var(--u)) calc(2.6 * var(--u)) #0cf); }
  .c-bb__btn-icon { width: calc(46.8 * var(--u)); height: calc(46.8 * var(--u)); }
}