/* =========================================================
   SHELLY — base.css
   פריסה בלבד: flex + gap + padding. כל בלוק = קונטיינר באלמנטור.
   אין ערכים גולמיים — רק var() מ-tokens.css.
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- פרימיטיבים של פריסה ---------- */
.section{display:flex;flex-direction:column;align-items:center;padding:var(--section-pad) var(--gutter)}
.inner{width:100%;max-width:var(--content-width);display:flex;flex-direction:column;gap:var(--space-9)}
.row{display:flex;flex-direction:row;gap:var(--space-11)}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
.stack-2{gap:var(--space-2)} .stack-4{gap:var(--space-4)} .stack-6{gap:var(--space-6)} .stack-7{gap:var(--space-7)}
.a-end{align-items:flex-end} .a-center{align-items:center} .a-start{align-items:flex-start} .a-base{align-items:baseline}
.j-between{justify-content:space-between}
.wrap{flex-wrap:wrap}

/* ---------- טיפוגרפיה ---------- */
.h1,.h2,.h3,.h4{font-family:var(--font-display);font-weight:700;color:var(--color-choc)}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.lead{font-size:var(--fs-lead);color:var(--color-text);max-width:52ch}
.small{font-size:var(--fs-small);color:var(--color-muted)}
.xs{font-size:var(--fs-xs);color:var(--color-muted)}
.num{font-family:var(--font-number);font-weight:400;line-height:1;direction:ltr;unicode-bidi:isolate}
.hand{font-family:var(--font-hand);font-weight:700;font-size:var(--fs-hand);line-height:1;color:var(--color-choc)}
.u{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mark{background:var(--color-lilac);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
s{text-decoration-thickness:2px;text-decoration-color:var(--color-choc);color:var(--color-muted)}
b{font-weight:500;color:var(--color-choc)}

/* ---------- לוגו ---------- */
.logo{font-family:var(--font-logo);font-weight:700;direction:ltr;line-height:.82;display:flex;flex-direction:column;align-items:center;letter-spacing:.02em}
.logo span{display:block;transform:scaleX(.58)}
.logo-line{font-family:var(--font-logo);font-weight:700;font-size:var(--fs-logo-header);direction:ltr;display:inline-block;transform:scaleX(.6);transform-origin:right center;letter-spacing:.04em;line-height:1}

/* ---------- כפתור ---------- */
.btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-7);font-weight:500;font-size:17px;border:1.5px solid var(--color-choc);border-radius:var(--radius-btn);cursor:pointer;white-space:nowrap;transition:background .2s;width:fit-content}
.btn-choc{background:var(--color-choc);color:var(--color-paper)}
.btn-choc:hover{background:var(--color-choc-2)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-sm{padding:var(--space-2) var(--space-5);font-size:15px}

/* ---------- 00 הדר ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--color-paper);border-bottom:1px solid var(--color-line);display:flex;justify-content:center;padding:0 var(--gutter)}
.header .inner{flex-direction:row;align-items:center;justify-content:space-between;height:var(--header-h);gap:var(--space-6)}
.menu{display:flex;flex-direction:row;gap:var(--space-7);list-style:none;font-size:15px}
.menu a:hover{text-decoration:underline;text-underline-offset:5px}

/* ---------- 01 הירו ---------- */
.hero{padding-top:var(--space-10);padding-bottom:var(--space-11)}
.hero .row{align-items:flex-end;gap:var(--space-10)}
.eyebrow-he{display:flex;flex-direction:row;align-items:center;gap:var(--space-3);font-size:15px;color:var(--color-muted)}
.eyebrow-he i{width:28px;height:1px;background:var(--color-choc)}
.cta-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.collage{flex:1;display:flex;flex-direction:row;gap:var(--space-3);align-items:flex-start}
.collage .c-main{flex:1.15;display:flex;flex-direction:column;gap:var(--space-3)}
.collage .c-side{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-9)}
.photo{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.logo-tile{width:100%;aspect-ratio:1/1;background:var(--color-choc);color:var(--color-lilac);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2)}
.logo-tile .logo{font-size:var(--fs-logo-tile)}
.logo-tile small{font-size:9px;letter-spacing:.25em;color:var(--color-lilac-2);direction:ltr}
.reel-pair{display:flex;flex-direction:row;gap:var(--space-3)}
.reel-pair img{flex:1;min-width:0;aspect-ratio:9/16;object-fit:cover;cursor:pointer}
.hand-note{display:flex;flex-direction:row;align-items:center;gap:var(--space-2);transform:rotate(-3deg)}
.hand-note svg{width:40px;height:28px;stroke:var(--color-choc);fill:none;stroke-width:1.6;flex:none}

/* ---------- 02 פס לקוחות ---------- */
.strip{border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:var(--space-5) var(--gutter)}
.strip .inner{flex-direction:row;flex-wrap:wrap;gap:var(--space-2) var(--space-7);align-items:baseline;font-size:var(--fs-small)}

/* ---------- 03 כאבים ---------- */
.pain-head{align-items:flex-end;gap:var(--space-8)}
.pain-list{display:flex;flex-direction:column;border-top:2px solid var(--color-choc)}
.pain-row{display:flex;flex-direction:row;gap:var(--space-10);padding:var(--space-7) 0;border-bottom:1px solid var(--color-line);align-items:baseline}
.pain-row .quote{flex:1.2;font-family:var(--font-display);font-weight:400;font-size:var(--fs-quote);line-height:1;color:var(--color-choc)}
.pain-row p{flex:1;color:var(--color-text)}

/* ---------- 04 תוצאות ---------- */
.proof{background:var(--color-choc);color:var(--color-paper)}
.proof .h2,.proof .h3,.proof b{color:var(--color-paper)}
.proof .lead,.proof .small{color:var(--color-paper-72)}
.proof .row{align-items:center}
.big{font-size:var(--fs-big-number);color:var(--color-lilac);text-align:right}
.facts{display:flex;flex-direction:column;border-top:1px solid var(--color-paper-25)}
.fact{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--color-paper-12);font-size:var(--fs-small)}
.fact .num{font-size:var(--fs-number-m);color:var(--color-paper)}
.fact .num small{font-size:var(--fs-small);color:var(--color-paper-60)}
/* סליידר לפני/אחרי — וידג'ט HTML יחיד באלמנטור (חריג מוצהר מכלל ה-flex) */
.ba{position:relative;width:100%;aspect-ratio:620/700;overflow:hidden;background:var(--color-white);user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.ba .before{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--color-choc);transform:translateX(-50%)}
.ba .bar::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:50%;background:var(--color-lilac);border:2px solid var(--color-choc);transform:translate(-50%,-50%)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.ba .lbl{position:absolute;top:12px;font-size:13px;font-weight:500;padding:3px 10px;color:var(--color-choc);z-index:1}
.ba .lbl.b{right:12px;background:var(--color-sand)}
.ba .lbl.a{left:12px;background:var(--color-lilac)}
.proof .hand{color:var(--color-lilac)}
.proof2{border-top:1px solid var(--color-paper-25);padding-top:var(--space-9);gap:var(--space-8);align-items:flex-start}
.proof2 .num{font-size:var(--fs-number-l);color:var(--color-lilac)}
.shot{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);cursor:zoom-in}
.shot figcaption{font-size:var(--fs-xs);color:var(--color-paper-60)}
.extra{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-7);font-size:var(--fs-small);color:var(--color-paper-72)}
.extra .num{font-size:var(--fs-number-m);color:var(--color-paper);margin-left:var(--space-2)}

/* ---------- 05 עבודות ---------- */
.work-head{align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6)}
.switch{display:flex;flex-direction:row;gap:var(--space-6)}
.switch button{background:none;border:0;border-bottom:1.5px solid transparent;padding:var(--space-1) 0;cursor:pointer;color:var(--color-muted);font-size:var(--fs-small)}
.switch button[aria-selected=true]{color:var(--color-choc);border-color:var(--color-choc);font-weight:500}
.reels{display:flex;flex-direction:row;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-4);scrollbar-width:thin;scrollbar-color:var(--color-choc) transparent}
.reel{flex:0 0 200px;scroll-snap-align:start;cursor:pointer;background:var(--color-sand)}
.reel img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:opacity .2s}
.reel:hover img{opacity:.85}
.creative{display:none;flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}
.creative.on{display:flex}
.cr{flex:1 1 220px;display:flex;flex-direction:column;gap:var(--space-2);cursor:pointer}
.cr img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--color-sand)}
.cr p{font-size:15px}
.hide{display:none!important}

/* ---------- 06 איך עובדים ---------- */
.how{background:var(--color-lilac-3)}
.how .row{align-items:flex-start}
.sched{display:flex;flex-direction:column;border-top:2px solid var(--color-choc)}
.step{display:flex;flex-direction:row;gap:var(--space-5);padding:var(--space-6) 0;border-bottom:1px solid var(--color-line)}
.step .when{flex:0 0 120px;font-size:15px;color:var(--color-muted);padding-top:var(--space-1)}
.step .body{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.step p{font-size:var(--fs-small);color:var(--color-text)}

/* ---------- 07 המלצות ---------- */
.clients .row{align-items:flex-start}
.chat{flex:1;max-width:480px;display:flex;flex-direction:column;background:var(--color-chat);border:1px solid var(--color-line)}
.chat-h{display:flex;flex-direction:row;align-items:center;gap:var(--space-3);background:var(--color-choc);color:var(--color-paper);padding:var(--space-3) var(--space-4);font-size:15px}
.chat-h img{width:36px;height:36px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.chat-h small{display:block;font-size:12px;color:var(--color-paper-60)}
.chat-b{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-4) var(--space-3)}
.msg{max-width:86%;display:flex;flex-direction:column;gap:2px;background:var(--color-white);border-radius:var(--radius-chat) var(--radius-chat) var(--radius-chat) 2px;padding:var(--space-2) var(--space-3);font-size:var(--fs-small);line-height:1.45}
.msg .who{font-size:12px;font-weight:500;color:var(--color-whom)}
.voice{display:flex;flex-direction:row;align-items:center;gap:var(--space-2);min-width:228px}
.voice button{width:36px;height:36px;border-radius:50%;border:0;background:var(--color-choc);color:var(--color-lilac);cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.voice button svg{width:13px;height:13px;fill:currentColor}
.wave{flex:1;height:26px;display:flex;flex-direction:row;align-items:center;gap:2px;direction:ltr}
.wave i{flex:1;background:#cbbdb8;border-radius:1px}
.wave i.on{background:var(--color-choc)}
.voice .dur{font-size:11px;color:var(--color-muted);min-width:28px}

/* ---------- 08 עליי ---------- */
.about{padding-top:0}
.about .row{align-items:center}
.about-img{flex:.8;display:flex;flex-direction:column;gap:var(--space-3)}
.about-img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.about-copy{flex:1.2}
.about-copy p{max-width:56ch;color:var(--color-text)}
.bits{border-top:1px solid var(--color-line);padding-top:var(--space-4)}

/* ---------- 09 שאלות ---------- */
.faq{border-top:1px solid var(--color-line)}
.faq .row{align-items:flex-start}
.faq-list{flex:1.3;display:flex;flex-direction:column}
details{border-bottom:1px solid var(--color-line);padding:var(--space-5) 0}
details:first-child{border-top:2px solid var(--color-choc)}
summary{list-style:none;cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;gap:var(--space-5);font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);line-height:1.05;color:var(--color-choc)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-body);font-weight:300;font-size:28px;line-height:1;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-top:var(--space-2);color:var(--color-text);max-width:62ch}

/* ---------- 10 יצירת קשר ---------- */
.cta{background:var(--color-lilac)}
.cta .row{align-items:flex-end}
.cta .lead{color:var(--color-choc)}
.contact{flex:.6;display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-small)}

/* ---------- 11 פוטר ---------- */
.footer{background:var(--color-choc);color:var(--color-paper-60);padding:var(--space-5) var(--gutter);display:flex;justify-content:center;font-size:var(--fs-xs)}
.footer .inner{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
.footer .logo-line{color:var(--color-lilac);font-size:26px}

/* ---------- פס CTA במובייל + לייטבוקס (פופאפ באלמנטור) ---------- */
.mbar{display:none;position:fixed;bottom:0;right:0;left:0;z-index:60;flex-direction:row;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-paper);border-top:1px solid var(--color-line)}
.mbar .btn{flex:1;width:auto}
.mbar .sq{flex:0 0 52px;padding:0;background:transparent;color:var(--color-choc)}
.lb{position:fixed;inset:0;background:rgba(30,18,16,.94);z-index:100;display:none;align-items:center;justify-content:center;padding:var(--space-6)}
.lb.on{display:flex}
.lb video,.lb img{max-height:88vh;max-width:min(92vw,1000px)}
.lb button{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--color-paper);color:var(--color-choc);font-size:20px;cursor:pointer}

/* =========================================================
   טאבלט ≤1024
   ========================================================= */
@media (max-width:1024px){
  .menu{display:none}
  .row{flex-direction:column;gap:var(--space-9)}
  .row.keep{flex-direction:row}
  .row > *{align-self:stretch}
  .pain-head{align-items:flex-start}
  .about-img{max-width:420px;width:100%}
  .chat{max-width:100%;width:100%}
  .contact{flex:none}
  .proof2 .shot{flex:1 1 40%}
}
/* =========================================================
   מובייל ≤767
   ========================================================= */
@media (max-width:767px){
  body{padding-bottom:76px}
  .header .btn{display:none}
  .mbar{display:flex}
  .hero{padding-top:var(--space-8)}
  .cta-row .btn{width:100%}
  .pain-row{flex-direction:column;gap:var(--space-2);padding:var(--space-6) 0}
  .step{flex-direction:column;gap:var(--space-1)}
  .step .when{flex:none;padding:0}
  .logo-tile small{display:none}
  .reel{flex-basis:160px}
}