/* =========================================================
   CK Digital 360, עמודי שירות: צילום ווידאו, קמפיינים ממומנים, ניהול סושיאל (30.09.2026, סבב שישי).
   נטען דרך css_late (אחרי שכבת הנושא), ולכן כל הצבעים במשתנים בלבד.
   מה יש כאן, כל המחלקות מתחילות ב-p-:
   1. סרטון בתוך מסגרת מכשיר (.dv__scr video) ומסגרת צילום נקייה (.p-frame) עם מצגת שמתחלפת (.p-slides)
   2. ראש עמוד הצילום: שלושה טלפונים שמנגנים (.p-trio)
   3. ראש עמוד הסושיאל: קיר פוסטים שנע (.p-wall) עם רילס שחופף אותו
   4. ראש עמוד הקמפיינים: שני לוחות בקרה בשלמותם (.p-dash2) ושורת "כלול" (.p-incl)
   5. סקשן הפלטפורמות והאוטומציות בעמוד הקמפיינים (.p-plat, .p-auto, .p-ico)
   6. תיקוני מסגרות: לוח בקרה באריח קייס לא נחתך, הרמה במעבר עכבר, הטיה קלה בפרספקטיבה
   תנועה: transform ו-opacity בלבד, נעצרת ב-html.still ובמצב תנועה מופחתת.
   ========================================================= */

/* ---------- 1. סרטון במסגרת, מסגרת צילום ומצגת ---------- */
.dv__scr video{display:block;width:100%;height:100%;object-fit:cover;background:var(--media,#0b0b0c)}
.p-frame{position:relative;display:block;width:100%;margin:0;aspect-ratio:var(--sar,4/3);border-radius:var(--rm,14px);overflow:hidden;background:var(--media,#0b0b0c);box-shadow:0 0 0 1px var(--hair)}
.p-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
/* מצגת: שלוש תמונות שמתחלפות בדהייה עם זום עדין. בלי תנועה רואים את הראשונה */
.p-slides img{opacity:0;transform:scale(1.045)}
.p-slides img:first-child{opacity:1;transform:none}
.inc__shot.on .p-slides img{animation:p-slide 12s linear infinite;animation-delay:calc(var(--j,0)*4s)}
.inc__shot.on .p-slides img:first-child{animation-name:p-slide1}
/* בטלפון ובטאבלט התמונה יושבת בתוך השורה שלה, ולכן המצגת רצה כשהיא על המסך (data-replay) */
@media (max-width:1000px){
  .p-slides.is-on img{animation:p-slide 12s linear infinite;animation-delay:calc(var(--j,0)*4s)}
  .p-slides.is-on img:first-child{animation-name:p-slide1}
}
@keyframes p-slide{0%{opacity:0;transform:scale(1)}6%{opacity:1}30%{opacity:1;transform:scale(1.045)}39%,100%{opacity:0;transform:scale(1.045)}}
@keyframes p-slide1{0%{opacity:1;transform:scale(1)}30%{opacity:1;transform:scale(1.045)}39%,94%{opacity:0;transform:scale(1.045)}100%{opacity:1;transform:scale(1)}}
/* בתוך העמודה הדביקה: המסגרת יושבת במרכז עם אוויר, והכיתוב מתחתיה */
.inc__shot--frame{justify-content:space-between}
.inc__shot--frame .p-frame{width:calc(100% - 2*var(--pad));margin:auto var(--pad)}
.inc__shot--frame figcaption{flex:none}
/* זום איטי לתמונה בודדת כשהשלב שלה פעיל */
.p-kb img{transition:transform 9s linear}
.inc__shot.on .p-kb img,.p-kb.is-on img{transform:scale(1.045)}
/* טלפון עם סרטון בעמודה הדביקה: מעט גדול יותר מטלפון עם צילום מסך */
body[class] .inc__shot--ph.p-vid .dv--ph{width:min(50%,262px)}
@media (max-width:1000px){
  .inc__row>.inc__shot--frame .p-frame{width:auto;margin:16px 16px 0}
  .inc__row>.inc__shot--frame figcaption{margin-block-start:0}
  body[class] .inc__row>.inc__shot--ph.p-vid .dv--ph{width:min(56%,230px)}
}

/* ---------- 2. ראש עמוד הצילום: שלושה טלפונים ---------- */
.p-trio{display:grid;grid-template-columns:30fr 36fr 30fr;gap:clamp(10px,1.6vw,22px);align-items:end;perspective:1500px;padding-block:2% 0}
.p-trio+.svh__cap{margin-block-start:22px}
.p-ph{margin:0;display:grid;gap:12px;justify-items:center;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.p-ph .dv--ph{width:100%;--phar:9/17.5}
.p-ph:first-child{transform:rotateY(7deg)}
.p-ph:last-child{transform:rotateY(-7deg)}
.p-ph:nth-child(2){z-index:2}
.p-ph:hover{transform:translateY(-8px)}
.p-ph:first-child:hover{transform:rotateY(4deg) translateY(-8px)}
.p-ph:last-child:hover{transform:rotateY(-4deg) translateY(-8px)}
.p-ph figcaption{padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;color:var(--text-2);background:rgba(var(--fg-rgb),.07);white-space:nowrap}
/* חשיפה מדורגת: כל טלפון עולה אחרי הקודם */
@media (prefers-reduced-motion:no-preference){
  .js .p-ph{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate 1.1s var(--ease),transform .8s var(--ease);transition-delay:calc(.25s + var(--i,0)*.14s)}
  .js .in .p-ph{opacity:1;translate:0 0}
}
@media (max-width:1000px){
  .p-trio{padding-block:0;max-width:560px;margin-inline:auto}
}
@media (max-width:760px){
  .p-trio{gap:8px}
  .p-ph{gap:8px}
  .p-ph figcaption{font-size:11.5px;padding:4px 9px}
}

/* ---------- 3. ראש עמוד הסושיאל: קיר פוסטים שנע ---------- */
.p-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.9vw,12px);padding:clamp(6px,.9vw,12px);box-sizing:border-box;align-items:start;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.p-wall__c{display:grid;gap:clamp(6px,.9vw,12px);min-width:0;will-change:transform}
.p-wall__c:nth-child(2){transform:translateY(-16%)}
.p-wall__c img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:clamp(8px,1vw,14px);background:var(--tile-2)}
.is-on .p-wall__c{animation:p-wall-up 28s ease-in-out infinite alternate}
.is-on .p-wall__c:nth-child(2){animation:p-wall-dn 34s ease-in-out infinite alternate}
.is-on .p-wall__c:nth-child(3){animation-duration:31s}
@keyframes p-wall-up{from{transform:translateY(0)}to{transform:translateY(-22%)}}
@keyframes p-wall-dn{from{transform:translateY(-22%)}to{transform:translateY(0)}}
.still .p-wall__c{animation-play-state:paused}
/* הטלפון שחופף את הקיר: קצת גדול יותר מברירת המחדל של הבמה */
.p-social .stg--duo{--sb:14%;--rw:36%;--rx:-2%}

/* ---------- 4. ראש עמוד הקמפיינים: שני לוחות בשלמותם ---------- */
.p-dash2{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,22px);perspective:1800px}
.p-dash2 .dashf{min-width:0;background:none;box-shadow:none;border-radius:0;overflow:visible;transition:transform .9s var(--ease)}
.p-dash2 .dashf__bar{border-radius:var(--rm,14px) var(--rm,14px) 0 0}
.p-dash2 .dashf__view{border-radius:0 0 var(--rm,14px) var(--rm,14px);box-shadow:0 0 0 1px var(--hair),var(--dvsh,0 30px 60px -28px rgba(0,0,0,.65))}
.p-dash2 figcaption{padding:10px 4px 0;font-size:14px;line-height:1.45;color:var(--grey)}
.p-dash2 figcaption b{font-weight:600;color:var(--text-2)}
@media (min-width:1001px){
  .p-dash2 .dashf:hover{transform:translateY(-4px) rotateY(-2deg);transform-origin:100% 50%}
}
@media (max-width:760px){
  .p-dash2 .dashf__view{border-radius:0;box-shadow:none}
  .p-dash2 .dashf__hint{border-radius:0 0 var(--rm,14px) var(--rm,14px);box-shadow:0 0 0 1px var(--hair)}
  .p-dash2__b{display:none}
}
/* שורת "כלול": מופיעה מתחת לכפתורים בראש העמוד */
.p-incl{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:999px;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--text);background:var(--tile);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s var(--ease),transform .5s var(--ease)}
.p-incl:hover{box-shadow:inset 0 0 0 1px var(--text);transform:translateY(-2px)}
.p-incl i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--pink-fill,var(--pink));color:#fff;flex:none}
.p-incl i svg{width:13px;height:13px}
.p-incl svg.p-incl__arr{width:15px;height:15px;color:var(--grey);flex:none}
@media (max-width:1000px){.svh__copy>.p-incl{order:5;align-self:flex-start;margin-block-start:-4px}}
@media (max-width:760px){.svh__copy>.p-incl{align-self:stretch;justify-content:center;font-size:14px}}

/* ---------- 5. פלטפורמות ואוטומציות (עמוד הקמפיינים) ---------- */
.p-plat__grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap,20px)}
.p-plat__grp{display:grid;gap:14px;align-content:start;padding:var(--pad);border-radius:var(--rx,28px);background:var(--tile)}
.p-plat__grp h3,body[class] main .p-plat__grp h3{font-size:15px;line-height:1.3;font-weight:600;color:var(--grey);letter-spacing:-.005em}
.p-plat__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.p-plat__grp--m .p-plat__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-plat__i{display:grid;gap:12px;align-content:start;min-height:150px;padding:18px;border-radius:var(--rl,22px);background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--hair);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.p-plat__i:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--hair-2)}
.p-plat__i i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--fg-rgb),.07);color:var(--text)}
.p-plat__i i svg{width:22px;height:22px}
.p-plat__i b{display:block;font-weight:600;font-size:16.5px;line-height:1.2;letter-spacing:-.012em;color:var(--text);direction:ltr;text-align:start;text-wrap:balance}
.p-plat__i span{display:block;font-size:14px;line-height:1.35;color:var(--text-2)}
/* אוטומציות: אריח כהה עם כותרת ושלושה כרטיסים */
.p-auto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:center;margin-block-start:var(--gap,20px);padding:var(--pad);border-radius:var(--rx,28px);background:var(--tile)}
.p-auto__head{display:grid;gap:14px;justify-items:start}
.p-auto__k{font-size:15px;font-weight:600;color:var(--pink-ink,var(--pink))}
.p-auto__head h3{font-weight:700;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.p-auto__head p{font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--text-2);max-width:40ch;text-wrap:pretty}
.p-auto__cards{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.p-auto__c{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:18px;padding:16px;border-radius:var(--rl,22px);background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--hair);transition:transform .6s var(--ease)}
.p-auto__c:hover{transform:translateY(-3px)}
.p-auto__c h4{font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.012em;color:var(--text)}
.p-auto__c p{margin-block-start:4px;font-size:14.5px;line-height:1.45;color:var(--text-2)}
/* אייקונים מונפשים: שיחת וואטסאפ, שורה ב-CRM, דוח יומי. מחזור של 7 שניות תחת is-on */
.p-ico{position:relative;width:104px;height:80px;border-radius:14px;background:rgba(var(--fg-rgb),.05);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.p-ico i,.p-ico b{position:absolute;display:block}
.p-ico--wa .p-ico__in{inset-inline-start:10px;inset-block-start:12px;width:52px;height:16px;border-radius:9px 9px 9px 2px;background:rgba(var(--fg-rgb),.16);opacity:0}
.p-ico--wa .p-ico__typing{inset-inline-end:10px;inset-block-start:34px;width:40px;height:16px;border-radius:9px 9px 2px 9px;background:rgba(var(--fg-rgb),.1);display:flex;align-items:center;justify-content:center;gap:4px;opacity:0}
.p-ico--wa .p-ico__typing b{position:static;width:4px;height:4px;border-radius:50%;background:var(--grey)}
.p-ico--wa .p-ico__out{inset-inline-end:10px;inset-block-start:52px;width:64px;height:16px;border-radius:9px 9px 2px 9px;background:var(--pink);opacity:0}
.is-on .p-ico--wa .p-ico__in{animation:p-bub 7s var(--ease) infinite}
.is-on .p-ico--wa .p-ico__typing{animation:p-typ 7s var(--ease) infinite}
.is-on .p-ico--wa .p-ico__typing b{animation:p-dot 1.2s ease-in-out infinite;animation-delay:calc(var(--k,0)*.2s)}
.is-on .p-ico--wa .p-ico__out{animation:p-bub2 7s var(--ease) infinite}
@keyframes p-bub{0%{opacity:0;transform:translateY(6px)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes p-typ{0%,14%{opacity:0}20%,42%{opacity:1}48%,100%{opacity:0}}
@keyframes p-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes p-bub2{0%,48%{opacity:0;transform:translateY(6px)}56%,90%{opacity:1;transform:none}100%{opacity:0}}
.p-ico--crm .p-ico__row{inset-inline:12px;height:10px;border-radius:5px;background:rgba(var(--fg-rgb),.12)}
.p-ico--crm .p-ico__row:nth-child(1){inset-block-start:14px}
.p-ico--crm .p-ico__row:nth-child(2){inset-block-start:32px}
.p-ico--crm .p-ico__row--new{inset-block-start:50px;background:rgba(var(--fg-rgb),.2);opacity:0;transform:translateX(12px)}
.p-ico--crm .p-ico__row--new b{inset-inline-end:-2px;inset-block-start:-4px;width:18px;height:18px;border-radius:50%;background:var(--pink);opacity:0;transform:scale(.4)}
.p-ico--crm .p-ico__row--new b::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:4px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-on .p-ico--crm .p-ico__row--new{animation:p-row 7s var(--ease) infinite}
.is-on .p-ico--crm .p-ico__row--new b{animation:p-chk 7s var(--ease) infinite}
@keyframes p-row{0%,20%{opacity:0;transform:translateX(12px)}30%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes p-chk{0%,38%{opacity:0;transform:scale(.4)}46%,90%{opacity:1;transform:scale(1)}100%{opacity:0}}
.p-ico--rep .p-ico__bar{inset-block-end:14px;width:12px;border-radius:4px 4px 0 0;background:rgba(var(--fg-rgb),.22);transform-origin:50% 100%;transform:scaleY(.15)}
.p-ico--rep .p-ico__bar:nth-child(1){inset-inline-start:16px;height:26px}
.p-ico--rep .p-ico__bar:nth-child(2){inset-inline-start:34px;height:38px}
.p-ico--rep .p-ico__bar:nth-child(3){inset-inline-start:52px;height:30px}
.p-ico--rep .p-ico__bar:nth-child(4){inset-inline-start:70px;height:48px;background:var(--pink)}
.p-ico--rep .p-ico__base{inset-inline:12px;inset-block-end:12px;height:1px;background:var(--hair-2)}
.is-on .p-ico--rep .p-ico__bar{animation:p-bar 7s var(--ease) infinite;animation-delay:calc(var(--k,0)*.18s)}
@keyframes p-bar{0%{transform:scaleY(.15)}14%,88%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.still .p-ico i,.still .p-ico b{animation-play-state:paused}
@media (max-width:1000px){
  .p-plat__grid{grid-template-columns:minmax(0,1fr)}
  .p-plat__list,.p-plat__grp--m .p-plat__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-plat__i{min-height:0}
  .p-auto{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
  .p-plat__grp,.p-auto{border-radius:var(--rl,22px);padding:18px}
  .p-plat__i{padding:14px;gap:10px}
  .p-plat__i b{font-size:15.5px}
  .p-plat__i span{font-size:13.5px}
  .p-auto__c{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px}
  .p-ico{width:88px;height:72px}
  .p-ico--wa .p-ico__in{width:44px}
  .p-ico--wa .p-ico__out{width:52px}
  .p-ico--rep .p-ico__bar:nth-child(1){inset-inline-start:12px}
  .p-ico--rep .p-ico__bar:nth-child(2){inset-inline-start:28px}
  .p-ico--rep .p-ico__bar:nth-child(3){inset-inline-start:44px}
  .p-ico--rep .p-ico__bar:nth-child(4){inset-inline-start:60px}
}

/* ---------- 6. תיקוני מסגרות והרמה במעבר עכבר ---------- */
/* לוח בקרה בתוך אריח קייס: בשלמותו, עם אוויר מכל צד, לא נחתך בקצה האריח */
body[class] .p-svc .tile--case .dashf,body[class] .p-svc .tile--case.tile--row .dashf{margin:var(--pad);margin-block-start:auto;border-radius:var(--rm,14px);box-shadow:0 0 0 1px var(--hair),var(--dvsh,0 30px 60px -28px rgba(0,0,0,.65))}
body[class] .p-svc .tile--case.tile--row .dashf{margin-block-start:var(--pad)}
@media (max-width:1000px){
  body[class] .p-svc .tile--case.tile--row .dashf{margin:0 var(--pad) var(--pad)}
}
/* מודעה ריבועית בעמודה הדביקה: לא נחתכת */
.inc__shot--sq{justify-content:space-between}
.inc__shot--sq .p-frame{--sar:1/1;width:min(calc(100% - 2*var(--pad)),520px);margin:auto}
.inc__shot--sq figcaption{flex:none}
@media (max-width:1000px){
  .inc__row>.inc__shot--sq .p-frame{width:auto;margin:16px 16px 0}
}
/* הרמה קלה של אריחים במעבר עכבר, בכל שלושת העמודים */
.p-svc .bento>li>.tile{transition:transform .7s var(--ease),background-color .6s var(--ease)}
.p-svc .bento>li:hover>.tile{transform:translateY(-4px)}
.p-svc .adwall li{transition:transform .7s var(--ease)}
.p-svc .adwall li:hover{transform:translateY(-4px)}
/* בלי תמונה בצד השאלות: הפסקה תופסת את כל הרוחב */
body[class] .p-nome{grid-template-columns:minmax(0,1fr)}
/* מצב תנועה מופחתת: הכול נוחת במצב הסופי */
@media (prefers-reduced-motion:reduce){
  .inc__shot.on .p-slides img,.p-slides.is-on img,.is-on .p-wall__c,.is-on .p-ico i,.is-on .p-ico b{animation:none!important}
  .p-slides img:first-child{opacity:1}
  .p-kb img,.p-ph,.p-dash2 .dashf,.p-plat__i,.p-auto__c,.p-incl,.p-svc .bento>li>.tile,.p-svc .adwall li{transition:none}
  .p-ico--wa .p-ico__in,.p-ico--wa .p-ico__out,.p-ico--crm .p-ico__row--new,.p-ico--crm .p-ico__row--new b{opacity:1;transform:none}
  .p-ico--rep .p-ico__bar{transform:none}
}