/* ==================================================================
   ELI · 2026-09-22 — סקשן "המעבדה"

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

.lab{
  --ink:#F4F2F0;
  --dim:rgba(244,242,240,.62);
  --faint:rgba(244,242,240,.40);
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.045);
  --accent:#F14B1C;
  --accent-soft:rgba(241,75,28,.16);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0B0B0D;
  color:var(--ink);
  padding-block:clamp(64px, 8vw, 118px);
}

.lab__wrap{
  position:relative;
  z-index:2;
  inline-size:min(1240px, 100% - 2 * var(--gutter, 20px));
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:clamp(36px, 4.6vw, 64px);
}

/* --- רקע: שתי הילות שנעות לאט, ורשת עדינה --- */

.lab__glow{
  position:absolute;
  z-index:0;
  inline-size:clamp(340px, 46vw, 680px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(72px);
  pointer-events:none;
}
.lab__glow--a{
  inset-block-start:-14%;
  inset-inline-start:-8%;
  background:radial-gradient(circle, rgba(241,75,28,.30) 0%, rgba(241,75,28,0) 68%);
  animation:lab-drift-a 22s ease-in-out infinite;
}
.lab__glow--b{
  inset-block-end:-18%;
  inset-inline-end:-10%;
  background:radial-gradient(circle, rgba(90,120,255,.16) 0%, rgba(90,120,255,0) 68%);
  animation:lab-drift-b 28s ease-in-out infinite;
}

@keyframes lab-drift-a{
  0%,100%{ transform:translate3d(0,0,0)        scale(1); }
  50%    { transform:translate3d(6%, 5%, 0)    scale(1.12); }
}
@keyframes lab-drift-b{
  0%,100%{ transform:translate3d(0,0,0)        scale(1.06); }
  50%    { transform:translate3d(-7%, -6%, 0)  scale(1); }
}

.lab__grid{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%);
}

/* --- הכותרת --- */

.lab__head{ max-inline-size:62ch; }

.lab__eyebrow{
  margin:0 0 clamp(12px, 1.4vw, 18px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px 7px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  font-size:.8rem;
  font-weight:var(--w-bold, 700);
  letter-spacing:.02em;
  color:var(--dim);
}

.lab__pulse{
  inline-size:7px; block-size:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(241,75,28,.55);
  animation:lab-pulse 2.4s ease-out infinite;
  flex:none;
}
@keyframes lab-pulse{
  0%  { box-shadow:0 0 0 0 rgba(241,75,28,.55); }
  70% { box-shadow:0 0 0 9px rgba(241,75,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(241,75,28,0); }
}

.lab__title{
  margin:0;
  font-size:clamp(2rem, 4.4vw, 3.5rem);
  font-weight:var(--w-black, 900);
  line-height:1.04;
  letter-spacing:-.03em;
  text-wrap:balance;
  background:linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 42%, #FFC9B4 72%, #F14B1C 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

.lab__lead{
  margin:clamp(14px, 1.6vw, 20px) 0 0;
  max-inline-size:56ch;
  font-size:clamp(1rem, 1.2vw, 1.12rem);
  line-height:1.7;
  color:var(--dim);
}

/* ==================================================================
   סליידר לפני / אחרי
   ==================================================================

   הגרירה והמקלדת נשענים על input[type=range] שפרוש על כל
   המסגרת ושקוף לחלוטין. זה נותן גרירה, קליק, מגע וחצי
   מקלדת בחינם, בלי שורת קוד אחת של גרירה משלנו. */

.lab-ba{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#111114;
  border:1px solid var(--line);
  aspect-ratio:16 / 9;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}

.lab-ba__img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  display:block;
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
}

/* "לפני" מוצג מימין לידית — בעברית העין מתחילה שם */
.lab-ba__img--before{
  clip-path:inset(0 0 0 var(--p, 56%));
}

.lab-ba__line{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  inline-size:2px;
  margin-inline-start:var(--p, 56%);
  transform:translateX(-1px);
  background:linear-gradient(to bottom, transparent, #FFFFFF 12%, #FFFFFF 88%, transparent);
  pointer-events:none;
  z-index:3;
}

.lab-ba__grip{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  transform:translate(-50%, -50%);
  inline-size:46px; block-size:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(18,18,20,.55);
  border:1.5px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  color:#FFFFFF;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.lab-ba__grip svg{ inline-size:20px; block-size:20px; }

.lab-ba:hover .lab-ba__grip,
.lab-ba__range:focus-visible ~ .lab-ba__line .lab-ba__grip{
  transform:translate(-50%, -50%) scale(1.1);
  box-shadow:0 0 0 6px rgba(241,75,28,.22), 0 10px 30px rgba(0,0,0,.45);
}

.lab-ba__tag{
  position:absolute;
  inset-block-start:16px;
  z-index:4;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(12,12,14,.55);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  font-size:.78rem;
  font-weight:var(--w-black, 900);
  letter-spacing:.08em;
  color:#FFFFFF;
  pointer-events:none;
}
.lab-ba__tag--before{ inset-inline-end:16px; }
.lab-ba__tag--after {
  inset-inline-start:16px;
  background:rgba(241,75,28,.86);
  border-color:transparent;
}

/*
 * הסרגל: פרוש על כל המסגרת ושקוף. direction:ltr מפורש —
 * אחרת דפדפן ב-RTL הופך את כיוון הערכים והגרירה מרגישה הפוכה.
 */
.lab-ba__range{
  position:absolute; inset:0;
  z-index:5;
  inline-size:100%; block-size:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  opacity:0;
  cursor:ew-resize;
  direction:ltr;
  -webkit-appearance:none;
          appearance:none;
  touch-action:pan-y;
}
.lab-ba__range::-webkit-slider-thumb{ -webkit-appearance:none; inline-size:1px; block-size:100%; }
.lab-ba__range::-moz-range-thumb{ width:1px; height:100%; border:0; background:transparent; }
.lab-ba__range:focus{ outline:0; }
.lab-ba__range:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.lab-ba__caption{
  position:absolute;
  inset-block-end:14px;
  inset-inline:0;
  z-index:4;
  margin:0;
  text-align:center;
  font-size:.82rem;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
  pointer-events:none;
}

@media (max-width:640px){
  .lab-ba{ aspect-ratio:4 / 3; border-radius:18px; }
  .lab-ba__grip{ inline-size:40px; block-size:40px; }
}

/* ==================================================================
   מונים
   ================================================================== */

.lab-stats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(10px, 1.2vw, 18px);
}

.lab-stat{
  padding:clamp(18px, 2.1vw, 26px) clamp(14px, 1.7vw, 22px);
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  transition:border-color .3s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.lab-stat:hover{ border-color:rgba(241,75,28,.45); transform:translateY(-3px); }

.lab-stat__num{
  display:flex;
  align-items:baseline;
  gap:1px;
  direction:ltr;
  unicode-bidi:isolate;
  justify-content:flex-end;
  font-size:clamp(1.75rem, 3.4vw, 2.8rem);
  font-weight:var(--w-black, 900);
  line-height:1;
  letter-spacing:-.03em;
  color:#FFFFFF;
}
.lab-stat__num i{ font-style:normal; color:var(--accent); }

.lab-stat__label{
  display:block;
  margin-block-start:9px;
  font-size:.83rem;
  line-height:1.4;
  color:var(--faint);
}

@media (max-width:760px){
  .lab-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
   שלבי הטיפול — רצועה נגררת
   ================================================================== */

.lab-flow{ position:relative; }

.lab-flow__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-block-end:clamp(16px, 2vw, 24px);
}

.lab-flow__title{
  margin:0;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight:var(--w-black, 900);
  letter-spacing:-.02em;
  color:#FFFFFF;
}

.lab-flow__nav{
  margin-inline-start:auto;
  display:flex;
  gap:8px;
}

.lab-arrow{
  inline-size:38px; block-size:38px;
  display:grid; place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--ink);
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
}
.lab-arrow svg{ inline-size:17px; block-size:17px; }
.lab-arrow:hover,
.lab-arrow:focus-visible{
  background:var(--accent);
  border-color:transparent;
  color:#FFFFFF;
}
.lab-arrow[disabled]{ opacity:.3; pointer-events:none; }

.lab-steps{
  list-style:none;
  margin:0;
  padding:0 0 4px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:clamp(12px, 1.3vw, 18px);
}

.lab-step{
  position:relative;
  padding:clamp(20px, 2.3vw, 30px) clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 32px);
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.02) 60%);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  overflow:hidden;
  transition:border-color .3s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.lab-step:hover{ border-color:rgba(241,75,28,.42); transform:translateY(-4px); }

.lab-step__num{
  display:block;
  font-size:.95rem;
  font-weight:var(--w-black, 900);
  letter-spacing:.12em;
  color:var(--accent);
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
}

.lab-step__title{
  margin:10px 0 8px;
  font-size:clamp(1.05rem, 1.55vw, 1.28rem);
  font-weight:var(--w-black, 900);
  letter-spacing:-.02em;
  color:#FFFFFF;
}

.lab-step__text{
  margin:0;
  font-size:.92rem;
  line-height:1.65;
  color:var(--dim);
}

/* קו ההתקדמות שנמשך בתחתית כל שלב, בהשהיה לפי הסדר */
.lab-step__bar{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  block-size:2px;
  background:linear-gradient(to left, var(--accent), rgba(241,75,28,.15));
  transform:scaleX(0);
  transform-origin:right center;
}
.lab.is-in .lab-step__bar{
  animation:lab-bar .75s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--i, 0) * .14s + .2s);
}
@keyframes lab-bar{ to{ transform:scaleX(1); } }

@media (max-width:900px){
  .lab-steps{
    grid-auto-columns:minmax(min(280px, 78%), 1fr);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-padding-inline:0;
  }
  .lab-steps::-webkit-scrollbar{ display:none; }
  .lab-step{ scroll-snap-align:start; }
}

/* ==================================================================
   שלוש ההבטחות
   ================================================================== */

.lab-promises{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.4vw, 20px);
}

.lab-promise{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:clamp(16px, 1.9vw, 22px);
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
}

.lab-promise__badge{
  flex:none;
  inline-size:42px; block-size:42px;
  display:grid; place-items:center;
  border-radius:13px;
  background:var(--accent-soft);
  color:var(--accent);
}
.lab-ico{ inline-size:21px; block-size:21px; }

.lab-promise__text b{
  display:block;
  font-size:.98rem;
  font-weight:var(--w-black, 900);
  color:#FFFFFF;
  margin-block-end:4px;
}
.lab-promise__text span{
  display:block;
  font-size:.85rem;
  line-height:1.55;
  color:var(--faint);
}

@media (max-width:800px){
  .lab-promises{ grid-template-columns:1fr; }
}

/* ==================================================================
   כפתורים — גלולה, לא קטומה
   ================================================================== */

.lab-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.lab-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  text-decoration:none;
  font-size:1rem;
  font-weight:var(--w-black, 900);
  letter-spacing:-.01em;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background .22s ease;
}
.lab-btn svg{ inline-size:16px; block-size:16px; }

.lab-btn--primary{
  background:linear-gradient(120deg, #FF6B39 0%, #F14B1C 55%, #C93A0F 100%);
  color:#FFFFFF;
  box-shadow:0 14px 34px -12px rgba(241,75,28,.75);
}
.lab-btn--primary:hover,
.lab-btn--primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 20px 46px -12px rgba(241,75,28,.9);
}

/* ברק שעובר פעם אחת בריחוף */
.lab-btn--primary::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:-60%;
  inline-size:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%);
  pointer-events:none;
}
.lab-btn--primary:hover::after,
.lab-btn--primary:focus-visible::after{
  animation:lab-shine .8s cubic-bezier(.3,.7,.3,1);
}
@keyframes lab-shine{
  from{ transform:translateX(-120%); }
  to  { transform:translateX(420%); }
}

.lab-btn--ghost{
  background:var(--glass);
  border:1px solid var(--line);
  color:var(--ink);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
}
.lab-btn--ghost:hover,
.lab-btn--ghost:focus-visible{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}

@media (max-width:560px){
  .lab-cta{ flex-direction:column; }
  .lab-btn{ justify-content:center; }
}

/* ==================================================================
   החשיפה בגלילה
   המצב המוסתר מאחורי .js-lab שה-JS מוסיף — בלי JS הכל גלוי.
   ================================================================== */

.lab.js-lab [data-lab-in]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.lab.js-lab [data-lab-in].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .lab__glow{ animation:none; }
  .lab__pulse{ animation:none; }
  .lab.js-lab [data-lab-in]{ opacity:1; transform:none; transition:none; }
  .lab.is-in .lab-step__bar{ animation:none; transform:scaleX(1); }
  .lab-stat:hover,
  .lab-step:hover,
  .lab-btn:hover{ transform:none; }
  .lab-btn--primary:hover::after{ animation:none; }
}