/* =========================================================
   SHELLY — proof-phone.css
   02 מה אמרו עליי + 03 נתונים עם אייפון, בפריים של עינית מצלמה.
   ========================================================= */
:root{--plum:#8E2236;--vf:rgba(92,26,38,.55)}

/* ---------- פריים עינית ---------- */
.vsec{display:flex;justify-content:center;padding:var(--space-9) var(--gutter)}
.vf{position:relative;width:100%;max-width:var(--content-width);padding:var(--space-7) var(--space-8)}
.vf > .c{position:absolute;width:26px;height:26px;border:0 solid var(--vf);pointer-events:none}
.vf > .c.tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.vf > .c.tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.vf > .c.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.vf > .c.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.vf > .rec{position:absolute;top:10px;left:40px;display:flex;align-items:center;gap:6px;font:500 11px/1 var(--font-body);letter-spacing:.14em;color:var(--color-choc);direction:ltr}
.vf > .rec i{width:7px;height:7px;border-radius:50%;background:#C0392B;animation:blink 1.4s steps(2,start) infinite}
.vf > .fno{position:absolute;top:10px;right:40px;font:400 13px/1 var(--font-number);color:var(--color-muted);direction:ltr}
@keyframes blink{to{visibility:hidden}}
.vtitle{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.vtitle h2{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4vw,58px);line-height:.92;color:var(--color-choc)}
.vtitle p{max-width:42ch;color:var(--color-text);font-size:var(--fs-small)}

/* ---------- 02 מה אמרו עליי ---------- */
.say{display:flex;flex-direction:row;gap:var(--space-9);align-items:flex-start}
.say-text{flex:1;display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:110px}
.say-text h2{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,4.6vw,66px);line-height:.92;color:var(--color-choc)}
.say-text p{color:var(--color-text);max-width:40ch}
.say .chat{flex:1.2;max-width:520px}

/* ---------- 03 נתונים עם אייפון ---------- */
.pcards{display:flex;flex-direction:row;gap:var(--space-6);align-items:flex-end;padding-top:var(--space-5)}
.bcard{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.iph{position:relative;z-index:2;width:220px;aspect-ratio:9/18.5;border:8px solid var(--color-ink);border-radius:36px;background:#fff;overflow:hidden;box-shadow:0 30px 50px -30px rgba(92,26,38,.6);margin-bottom:-150px;zoom:.58;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.iph::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:18px;border-radius:12px;background:var(--color-ink);z-index:3}
.bcard:nth-child(1) .iph{transform:rotate(4deg)}
.bcard:nth-child(3) .iph{transform:rotate(-4deg)}
.bcard:nth-child(2) .iph{transform:translateY(-20px)}
.bcard:hover .iph{transform:rotate(0) translateY(-10px)}
.ig{padding:30px 10px 0;font-size:10px;line-height:1.3}
.ig-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ig-av{width:50px;height:50px;border-radius:50%;padding:2px;background:conic-gradient(var(--color-choc),#B04A5C,var(--color-paper),#B04A5C,var(--color-choc));flex:none}
.ig-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}
.ig-stats{flex:1;display:flex;justify-content:space-around;text-align:center;font-size:9px}
.ig-stats b{display:block;font-family:var(--font-number);font-weight:400;font-size:16px;direction:ltr;color:inherit}
.ig-name{font-weight:700;font-size:11px}
.ig-bio{color:#777;margin:1px 0 6px;font-size:9px}
.ig-dash{border:1px solid #eee;border-radius:7px;padding:6px 8px;margin-bottom:6px;font-size:9px;transition:background .5s,border-color .5s}
.ig-dash b{font-family:var(--font-number);font-weight:400;font-size:17px;direction:ltr;display:inline-block;color:inherit}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 -10px}
.ig-grid span{aspect-ratio:4/5;background:#eee;overflow:hidden}
.ig-grid img{width:100%;height:100%;object-fit:cover;opacity:.15;filter:grayscale(1);transition:opacity .6s,filter .6s}
.ig-grid span:nth-child(-n+2) img{opacity:1;filter:none}
.now .ig-grid img{opacity:1;filter:none}
.now .ig-dash{background:var(--color-lilac-3);border-color:var(--color-lilac)}
.state{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;font:600 10px var(--font-body);padding:3px 10px;border-radius:999px;background:var(--color-sand);color:var(--color-choc);white-space:nowrap;transition:background .4s}
.now .state{background:var(--plum);color:#fff}

.ppanel{width:100%;background:var(--color-choc);color:var(--color-paper);padding:98px var(--space-5) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.bcard:nth-child(2) .ppanel{background:var(--color-lilac);color:var(--color-choc)}
.tg{align-self:center;display:inline-flex;background:rgba(251,247,240,.14);border-radius:999px;padding:3px;gap:3px}
.tg button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font:600 13px var(--font-body);color:var(--color-paper-72);cursor:pointer;transition:background .25s,color .25s}
.tg button.on{background:var(--color-lilac);color:var(--color-choc)}
.bcard:nth-child(2) .tg{background:rgba(92,26,38,.12)}
.bcard:nth-child(2) .tg button{color:var(--color-choc)}
.bcard:nth-child(2) .tg button.on{background:var(--color-choc);color:var(--color-paper)}
.pwho{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.pwho b{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;color:inherit}
.pwho small{font-size:12px;opacity:.65}
.phead{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-3) 0 var(--space-2);border-top:1px solid rgba(251,247,240,.18);border-bottom:1px solid rgba(251,247,240,.18);position:relative}
.bcard:nth-child(2) .phead{border-color:rgba(92,26,38,.2)}
.phead .val{font-size:44px;color:var(--color-lilac)}
.bcard:nth-child(2) .phead .val{color:var(--plum)}
.phead .lbl{font-size:13px;opacity:.8;text-align:center}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%) scale(0);background:var(--color-paper);color:var(--plum);font:400 19px/1 var(--font-number);padding:5px 12px;border-radius:999px;direction:ltr;transition:transform .45s cubic-bezier(.3,1.6,.5,1);box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.now .badge{transform:translateX(-50%) scale(1)}
.bcard:nth-child(2) .badge{background:var(--color-choc);color:var(--color-lilac)}
.prows{display:flex;flex-direction:column}
.prows div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:5px var(--space-2);font-size:14px;border-bottom:1px dashed rgba(251,247,240,.18);transition:background .5s}
.bcard:nth-child(2) .prows div{border-color:rgba(92,26,38,.2)}
.prows div:last-child{border-bottom:0}
.prows .v{display:flex;align-items:center;gap:6px}
.prows .v .n{font-size:19px}
.prows .v i{font-style:normal;font-size:11px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;color:#9BE29B}
.bcard:nth-child(2) .prows .v i{color:#2E7D32}
.now .prows .v i{opacity:1;transform:none}
.prows div.flash{background:rgba(243,234,219,.28)}
.bcard:nth-child(2) .prows div.flash{background:rgba(255,255,255,.45)}
.porig{align-self:center;font-size:12px;opacity:.6;text-decoration:underline;text-underline-offset:4px}
.todo{border-bottom:1.5px dashed currentColor}

@media(max-width:1024px){
  .say{flex-direction:column}
  .say-text{position:static}
  .say .chat{max-width:100%;width:100%}
}
@media(max-width:900px){
  .vsec{padding:var(--space-7) var(--space-3)}
  .vf{padding:var(--space-7) var(--space-4) var(--space-5)}
  .pcards{flex-direction:column;align-items:stretch;gap:var(--space-9);padding-top:var(--space-7)}
  .bcard{max-width:340px;align-self:center;width:100%}
  .iph{zoom:.56}
  .ppanel{padding:94px var(--space-5) var(--space-4)}
}
@media(prefers-reduced-motion:reduce){.iph,.ig-grid img,.badge{transition:none}}

/* ===== 03 · קרוסלת אייפונים עם מדבקה ===== */
.pcar{display:flex;flex-direction:row;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-5) var(--space-2) var(--space-3);scrollbar-width:none;justify-content:safe center}
.pcar::-webkit-scrollbar{display:none}
.pslide{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ph{position:relative;width:220px;aspect-ratio:9/18.5;border:8px solid var(--color-ink);border-radius:36px;background:#fff;overflow:hidden;box-shadow:0 26px 44px -28px rgba(92,26,38,.6);zoom:.9;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ph::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:18px;border-radius:12px;background:var(--color-ink);z-index:3}
.pslide:hover .ph{transform:translateY(-8px)}
.ph .ig-grid span{aspect-ratio:4/5}
.ph .ig-grid img{opacity:.18}
.ph .ig-grid img.on,.now .ph .ig-grid img{opacity:1;filter:none}
.sticker{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) rotate(-4deg);z-index:4;background:var(--color-paper);border-radius:16px;padding:10px 14px;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:150px;transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .4s}
.sticker small{font-size:10px;color:var(--color-muted)}
.sticker .val{font-size:30px;color:var(--color-choc)}
.now .sticker{background:var(--color-lilac);transform:translateX(-50%) rotate(3deg) scale(1.06)}
.pname{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1;color:var(--color-choc)}
.mini-tg{display:inline-flex;background:var(--color-sand);border-radius:999px;padding:3px;gap:3px}
.mini-tg button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font:600 13px var(--font-body);color:var(--color-muted);cursor:pointer}
.mini-tg button.on{background:var(--color-choc);color:var(--color-paper)}
.pnav{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}
.pnav button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--color-choc);background:transparent;color:var(--color-choc);font-size:16px;cursor:pointer}
.pnav button:hover{background:var(--color-choc);color:var(--color-paper)}
.pnav .dots{display:flex;gap:8px}
.pnav .dots i{width:8px;height:8px;border-radius:50%;background:var(--color-line);cursor:pointer;transition:background .3s,transform .3s}
.pnav .dots i.on{background:var(--color-choc);transform:scale(1.25)}
@media(max-width:900px){
  .pcar{justify-content:flex-start;padding-inline:14%}
  .pslide{flex-basis:72%}
  .ph{zoom:.78}
}

/* מדבקה שנייה: נתון חשוב נוסף, קטנה יותר ובצד השני */
.sticker.s2{bottom:auto;top:96px;left:auto;right:10px;transform:rotate(5deg);min-width:0;padding:7px 11px;border-radius:12px;align-items:flex-end;transition-delay:.12s}
.sticker.s2 small{font-size:9px}
.sticker.s2 .val2{font-family:var(--font-number);font-size:22px;color:var(--color-choc);line-height:1;direction:ltr}
.now .sticker.s2{background:var(--color-choc);transform:rotate(-3deg) scale(1.08)}
.now .sticker.s2 small{color:var(--color-paper-72)}
.now .sticker.s2 .val2{color:var(--color-lilac)}

/* הנתון השני: שורה קטנה מתחת לשם העסק */
.pslide .pname{margin-bottom:-6px}
.pstat2{display:inline-flex;align-items:baseline;gap:6px;font-size:14px;color:var(--color-muted);padding:3px 12px;border-radius:999px;transition:background .4s,color .4s}
.pstat2 .val2{font-size:20px;color:var(--color-choc)}
.pstat2 i{font-style:normal;font-size:10px;color:#2E7D32;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.now .pstat2{background:var(--color-lilac-2);color:var(--color-choc)}
.now .pstat2 i{opacity:1;transform:none}
/* כותרות קטנות יותר עם Reisinger Michal */
.vtitle h2{font-size:clamp(28px,2.6vw,38px);line-height:1.05}
.say-text h2{font-size:clamp(30px,2.8vw,42px);line-height:1.05}
.pname{font-size:19px}
@media(max-width:767px){.vtitle h2,.say-text h2{font-size:27px}}

/* קרוסלה: חץ בסוף הדרך נראה כבוי ולא לחיץ */
.pnav button:disabled{opacity:.25;cursor:default;pointer-events:none}
.pnav button{transition:opacity .3s,background .2s,color .2s}
.pcar{cursor:grab}
.pcar.drag{cursor:grabbing;user-select:none}
.pcar.drag img{pointer-events:none}

/* קרוסלה בטלפון: האייפון הראשון צמוד לקצה, באמצע רואים חצי מכל צד, והאחרון צמוד לקצה השני */
@media(max-width:767px){.pcar{padding-inline:20px;scroll-padding-inline:20px}}

/* רמז ללחוץ על "עכשיו": חץ קטן ישר מתחת לכפתור, ומתחתיו "לחצו כאן" בפונט עגול.
   נכנס כשמגיעים לסקשן, על האייפון שבמרכז, ונעלם אחרי הלחיצה הראשונה */
.pslide{padding-bottom:58px}
.mini-tg button{position:relative}
.tap-hint{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;opacity:0;color:var(--color-plum)}
.tap-hint svg{width:12px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tap-hint em{font:400 13px/1 'Varela Round',var(--font-body);font-style:normal;white-space:nowrap;padding:6px 11px;border-radius:999px;background:var(--color-lilac-2);color:var(--color-plum)}
.pcar.hinting.hint-in .pslide.mid .tap-hint{animation:hintin .6s cubic-bezier(.3,1.5,.5,1) .3s forwards}
.pcar.hinting.hint-in .pslide.mid .tap-hint svg{animation:nudge 1.3s ease-in-out .9s infinite}
.pcar.hinting.hint-in .pslide.mid .mini-tg button[data-s="b"]{animation:tap-pulse 1.6s ease-out .9s infinite}
@keyframes hintin{from{opacity:0;transform:translate(-50%,14px) scale(.85)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes nudge{50%{transform:translateY(-4px)}}
@keyframes tap-pulse{0%{box-shadow:0 0 0 0 rgba(142,34,54,.55)}70%{box-shadow:0 0 0 10px rgba(142,34,54,0)}100%{box-shadow:0 0 0 0 rgba(142,34,54,0)}}
@media (prefers-reduced-motion:reduce){.tap-hint{opacity:1}.tap-hint svg,.pcar.hinting .mini-tg button[data-s="b"]{animation:none!important}}

/* במחשב: הקרוסלה ברוחב כל המסך */
.pcar{width:100vw;margin-inline:calc(50% - 50vw);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);justify-content:flex-start}

/* במחשב: האייפונים פרושים מקצה לקצה. הגודל מחושב ב־JS (--phz) לפי רוחב המסך */
@media(min-width:1025px){
  .pcar{justify-content:space-between}
  .ph{zoom:var(--phz,.9)}
}
/* הקרוסלה גוללת רק לרוחב */
.pcar{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
@media(hover:none){.pslide:hover .ph{transform:none}}