/* Section 30: big product mockup on a dark grid background. The mockup is an ORIGINAL inline SVG (generic devices, no real brand);
   to use a real image replace the <svg class="c-mock__art"> with <img class="c-mock__img" src="..." alt="..."> (aspect 986 x 532). Colours are variables on .c-mock. */
.c-mock { --mock-bg: #0f0f0f; --mock-grid: rgba(255, 255, 255, .045); --mock-accent: #ae603b;
  background: var(--mock-bg); color: #fff; direction: rtl; font-family: "Noto Sans Hebrew", Arial, sans-serif; overflow-x: clip; }
.c-mock__section { position: relative; isolation: isolate; padding: 70px 16px 90px; overflow: hidden;
  background-image: linear-gradient(var(--mock-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mock-grid) 1px, transparent 1px);
  background-size: 66px 66px; background-position: center top; }
.c-mock__section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 55%, #0f0f0f00 0%, #0f0f0f66 60%, #0f0f0fe6 100%); }
.c-mock__glow { position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1100px, 120%); height: 60%; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, #ae603b26 0%, #6b3fa01a 45%, #0000 75%); filter: blur(30px); pointer-events: none; }
.c-mock__stage { display: flex; justify-content: center; width: min(986px, 100%); margin: 0 auto; }
.c-mock__art, .c-mock__slot, .c-mock__img { width: 100%; aspect-ratio: 986 / 532; border-radius: 18px; }
.c-mock__art { display: block; height: auto; filter: drop-shadow(0 30px 40px #00000099); }
.c-mock__img { display: block; height: auto; object-fit: contain; }
.c-mock__slot { display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px dashed #ffffff40; background: linear-gradient(135deg, #1a1a1d, #26202e); box-shadow: 0 30px 80px -30px #ae603b40; text-align: center; }
.c-mock__slot-text { display: flex; flex-direction: column; gap: 8px; color: #ffffffb0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.c-mock__slot-text small { color: var(--mock-accent); font-size: 14px; font-weight: 400; }

@media (min-width: 1280px) { .c-mock__section { padding: 90px 24px 120px; } }
@media (max-width: 600px) {
  .c-mock__section { padding: 44px 12px 56px; background-size: 44px 44px; }
  .c-mock__slot { padding: 10px; border-radius: 12px; }
  .c-mock__slot-text { font-size: 15px; }
  .c-mock__slot-text small { font-size: 12px; }
}