/* ==================================================================
   ELI · 2026-09-22 — עמוד המעבדה

   משיחת מכחול כתומה עם הכותרת → ארבע קופסאות ברשת 2×2
   שביניהן עובר פס אזהרה כתום-שחור כצלב רצוף → שורת פעולה.
   ================================================================== */

.labx{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#FFFFFF;
  padding-block-end:clamp(48px, 6vw, 88px);
}

/* ------------------------------------------------------------------
   1. משיחת המכחול
   ------------------------------------------------------------------ */

.labx__brushwrap{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  z-index:0;
  block-size:clamp(300px, 34vw, 470px);
  pointer-events:none;
}

.labx__brush{
  display:block;
  inline-size:100%;
  block-size:100%;
}

/* ------------------------------------------------------------------
   2. הכותרת, על הכתום
   ------------------------------------------------------------------ */

.labx__head{
  position:relative;
  z-index:2;
  padding-block:clamp(44px, 6vw, 84px) clamp(96px, 13vw, 190px);
}

.labx__title{
  margin:0;
  font-family:var(--font-display, 'Karantina', sans-serif);
  font-weight:700;
  font-size:clamp(3.2rem, 9vw, 7rem);
  line-height:.9;
  letter-spacing:0;
  color:#FFFFFF;
  text-shadow:0 2px 26px rgba(120,40,10,.30);
}

.labx__lead{
  margin:clamp(12px, 1.6vw, 20px) 0 0;
  max-inline-size:52ch;
  font-size:clamp(1rem, 1.25vw, 1.14rem);
  line-height:1.7;
  font-weight:var(--w-medium, 500);
  color:#FFFFFF;
  text-shadow:0 1px 14px rgba(120,40,10,.34);
}

@media (max-width:700px){
  .labx__head{ padding-block:clamp(30px, 8vw, 54px) clamp(60px, 18vw, 120px); }
  .labx__lead{ max-inline-size:34ch; }
}

/* ------------------------------------------------------------------
   3. ארבע הקופסאות ופס האזהרה

   רשת 2×2, והפס עובר בין כולן כצלב: רצועה אופקית
   בין שתי השורות ורצועה אנכית בין שני הטורים.
   הקופסאות לבנות ואטומות ויושבות מעליו, ולכן הוא נראה
   רק ברווחים שביניהן ובשוליים — וממשיך בלי לעצור.
   ------------------------------------------------------------------ */

.labx-boxes{
  --pad:clamp(10px, 2vw, 26px);
  --ico:78px;
  --strip:clamp(34px, 3.6vw, 48px);

  position:relative;
  z-index:2;
  padding-block:var(--pad);
}

.labx-boxes__strip{
  position:absolute;
  overflow:hidden;
  z-index:0;
}

/* הרצועה האופקית — מקצה המסך עד קצהו, בין שתי השורות */
.labx-boxes__strip--h{
  inset-inline:0;
  inset-block-start:50%;
  block-size:var(--strip);
  translate:0 -50%;
}

/* הרצועה האנכית — בין שני הטורים, לאורך כל גובה הרשת */
.labx-boxes__strip--v{
  inset-block:var(--pad);
  inset-inline-start:50%;
  inline-size:var(--strip);
  translate:-50% 0;
}

.labx-boxes__hazard{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--c-orange, #F14B1C) 0 15px,
    #0E0E10 15px 30px
  );
  background-size:42.4px 100%;
  animation:labx-hazard 1.25s linear infinite;
}

.labx-boxes__hazard--v{
  background-size:100% 42.4px;
  animation-name:labx-hazard-v;
}

@keyframes labx-hazard{
  to{ background-position:42.4px 0; }
}
@keyframes labx-hazard-v{
  to{ background-position:0 42.4px; }
}

.labx-boxes__grid{
  position:relative;
  z-index:1;
  list-style:none;
  margin:0 auto;
  padding:0;
  max-inline-size:1020px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px, 2.2vw, 30px);
  align-items:stretch;
}

.labx-box{
  background:#FFFFFF;
  border:1px solid var(--c-hairline, #E6E6E6);
  padding:clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
  text-align:center;
  --cut:16px;
  clip-path:polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .3s ease;
}
.labx-box:hover{
  transform:translateY(-4px);
  border-color:rgba(241,75,28,.45);
}

.labx-box__icon{
  display:grid;
  place-items:center;
  inline-size:var(--ico);
  block-size:var(--ico);
  margin-inline:auto;
  margin-block-end:clamp(14px, 1.6vw, 20px);
  border-radius:50%;
  background:var(--c-plate, #F6F2EC);
  color:var(--c-orange, #F14B1C);
}

.labx-ico{ inline-size:38px; block-size:38px; }

.labx-box__title{
  margin:0 0 8px;
  font-size:clamp(1.1rem, 1.6vw, 1.34rem);
  font-weight:var(--w-black, 900);
  letter-spacing:-.02em;
  color:var(--c-ink, #0A0A0A);
}

.labx-box__text{
  margin:0 auto;
  max-inline-size:46ch;
  font-size:.94rem;
  line-height:1.68;
  color:var(--c-graphite, #2B2B2B);
}

/* ---------- נייד: טור אחד, רק הרצועה האנכית ---------- */

@media (max-width:700px){

  .labx-boxes__grid{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(18px, 4vw, 28px);
    max-inline-size:560px;
  }

  .labx-boxes__strip--h{ display:none; }

  .labx-box{ --cut:13px; }
}

/* ------------------------------------------------------------------
   4. שורת הסיום
   ------------------------------------------------------------------ */

.labx__foot{
  position:relative;
  z-index:2;
  margin-block-start:clamp(34px, 4.4vw, 60px);
  text-align:center;
}

.labx__foot-text{
  margin:0 auto clamp(18px, 2.2vw, 26px);
  max-inline-size:56ch;
  font-size:clamp(1rem, 1.2vw, 1.12rem);
  line-height:1.7;
  color:var(--c-graphite, #2B2B2B);
}

.labx__cta{ display:inline-flex; }

.labx__body{
  position:relative;
  z-index:2;
  margin-block-start:clamp(30px, 4vw, 52px);
}

/* ------------------------------------------------------------------
   5. האנימציות של האיקונים
   ------------------------------------------------------------------ */

.labx-ico__needle{
  transform-origin:24px 33px;
  animation:labx-needle 2.8s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes labx-needle{
  0%,100%{ transform:rotate(-52deg); }
  45%    { transform:rotate(34deg); }
  62%    { transform:rotate(18deg); }
}

.labx-ico__fill{
  transform-origin:34.5px 24px;
  animation:labx-fill 2.6s ease-in-out infinite;
}
@keyframes labx-fill{
  0%   { transform:scaleX(.12); opacity:.55; }
  55%  { transform:scaleX(1);   opacity:1; }
  85%  { transform:scaleX(1);   opacity:1; }
  100% { transform:scaleX(.12); opacity:.55; }
}

.labx-ico__spin{
  transform-origin:24px 24px;
  animation:labx-spin 9s linear infinite;
}
@keyframes labx-spin{ to{ transform:rotate(360deg); } }

.labx-ico__flash{
  animation:labx-flash 2.2s ease-in-out infinite;
}
@keyframes labx-flash{
  0%,100%{ opacity:.12; }
  42%    { opacity:1; }
  58%    { opacity:.35; }
}

.labx-ico__wag{
  transform-origin:24px 24px;
  animation:labx-wag 2.4s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes labx-wag{
  0%,100%{ transform:rotate(0deg); }
  30%    { transform:rotate(-22deg); }
  60%    { transform:rotate(8deg); }
}

.labx-ico__draw{
  stroke-dasharray:20;
  stroke-dashoffset:20;
  animation:labx-draw 2.6s ease-in-out infinite;
}
@keyframes labx-draw{
  0%     { stroke-dashoffset:20; }
  40%,80%{ stroke-dashoffset:0; }
  100%   { stroke-dashoffset:20; }
}

@media (prefers-reduced-motion: reduce){
  .labx-boxes__hazard,
  .labx-ico__needle,
  .labx-ico__fill,
  .labx-ico__spin,
  .labx-ico__flash,
  .labx-ico__wag,
  .labx-ico__draw{ animation:none; }
  .labx-ico__fill{ transform:none; }
  .labx-ico__draw{ stroke-dashoffset:0; }
  .labx-box:hover{ transform:none; }
}


/* ==================================================================
   נוסף באותו סבב

   1. כרטיס המוצר — בלי הריבוע הקרם מתחת למוצר
   2. כפתורי הניווט — משקל כבד יותר
   ================================================================== */

.bp-card{
  background:#FFFFFF;
  border-color:var(--c-hairline, #E6E6E6);
}

.bp-card__media{ box-shadow:none; }

.bp-card .bp-specs{ border-block-color:var(--c-hairline, #E6E6E6); }
.bp-card .bp-spec{ border-inline-start-color:var(--c-hairline, #E6E6E6); }
.bp-card .bp-spec:last-child{ border-inline-start:0; }

.pill-nav__list a{ font-weight:var(--w-bold, 700); }