/* =========================================================
   CK Digital 360, עמודי שירות: בניית אתרים, חנויות אונליין, עיצוב ומיתוג (30.09.2026, סבב שישי).
   נטען דרך css_late אחרי שכבת הנושא: css_late: svc-w (home2.css ו-how.css כבר נטענים גלובלית מ-head.html)
   כל ה-class כאן מתחילים ב-w-. רק משתנים, בלי צבע קשיח, ולכן המצב הבהיר עובד מאליו.
   תנועה ב-transform וב-opacity בלבד, ובמצב תנועה מופחתת רואים את המצב הסופי.
   מה יש כאן:
   1. סרטונים חיים בתוך מסגרות המכשיר (.dv__scr video) וחלון דפדפן חי (.win--live)
   2. תמונה במסגרת ביחס קבוע בעמודה הדביקה של "מה כלול" (.inc__shot--pic, .w-pic)
   3. כרטיס מוקאפ בסיסי (.w-card) עם כותרת, רשימת מצב ונקודה ירוקה, קו טקסט מדומה, כפתור
   4. שלושה מחשבים ניידים זה לצד זה (.w-trio), מחשב וטלפון עם מד מהירות (.w-dual), טלפון וכרטיס (.w-side)
   5. מוקאפים: מסלול פנייה (.w-lead), קטלוג (.w-cat), בחירת פלטפורמה (.w-plat), דף מוצר (.w-pdp), קופה (.w-chk)
   6. חלונות האתרים הגבוהים מתחילים לגלול רק כשמגיעים אליהם (.w-sites + data-replay), ואריחים עם הרמה והטיה קלה
   7. שירותים משלימים: אריחים גבוהים יותר עם תמונה במסגרת (.w-rel)
   8. טאבלט וטלפון, תנועה מופחתת, מצב בהיר
   ========================================================= */

[class*="p-service"]{
  --w-ok:#30d158;
  --w-wa:#25d366;
  --w-r:var(--rm,14px);
}

/* ---------- 1. סרטונים חיים במסגרות ---------- */
.dv__scr video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--md);transition:transform 1.2s var(--ease)}
a.dv:hover .dv__scr video,a.tile:hover .dv__scr video{transform:scale(1.015)}
body[class] .win--live .win__view{height:auto;aspect-ratio:16/10;background:var(--md)}
.win--live .win__view video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--md)}

/* ---------- 2. תמונה במסגרת בעמודה הדביקה ---------- */
.inc__shot--pic{justify-content:center;padding:clamp(18px,2.2vw,30px)}
.w-pic{position:relative;flex:0 1 auto;min-height:0;width:100%;margin:0;aspect-ratio:var(--par,3/2);border-radius:var(--rl);overflow:hidden;background:var(--md);box-shadow:0 0 0 1px var(--hr)}
.w-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.4s var(--ease)}
.inc__shot--pic.on .w-pic img{transform:scale(1.02)}
.inc__shot--pic figcaption{padding:16px 4px 0;background:none}
/* מוקאפ בעמודה הדביקה: ממורכז, עם אוויר */
.inc__shot--w{justify-content:center;padding:clamp(18px,2.2vw,30px)}
.inc__shot--w figcaption{padding:16px 4px 0;background:none}
.inc__shot--w>.w-fig{flex:none;margin:0}

/* ---------- 3. כרטיס מוקאפ ---------- */
.w-card{position:relative;display:grid;gap:12px;padding:clamp(16px,1.8vw,22px);border-radius:var(--rl);background:var(--t2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--hr);font-feature-settings:"tnum" 1,"lnum" 1}
.w-card p,.w-card ul,.w-card ol,.w-card figure{margin:0}
.w-card ul,.w-card ol{list-style:none;padding:0}
.w-card i{font-style:normal}
.w-card__h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;color:var(--grey)}
.w-card__h small{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--tx2)}
.w-dot{position:relative;flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--w-ok)}
.w-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--w-ok);opacity:0}
.w-ln{display:block;height:9px;border-radius:5px;background:rgba(var(--fg-rgb),.12);transform-origin:100% 50%}
.w-ln--t{height:11px;width:72%}
.w-ln--p{height:9px;width:38%;background:rgba(var(--fg-rgb),.2)}
.w-ln--s{height:9px;width:54px}
.w-list{display:grid}
.w-list li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-start:1px solid var(--hr);font-size:15px;line-height:1.3}
.w-list li span{flex:1;min-width:0;font-weight:500;color:var(--tx)}
.w-list li small{font-size:13px;color:var(--tx2)}
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding-inline:18px;border-radius:999px;background:var(--tx);color:var(--bg);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap}
.w-btn--pink{background:var(--pink-fill,#D62B6E);color:#fff}
.w-btn--ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px var(--hair-2)}
.w-btn svg{width:16px;height:16px;flex:none}
.w-chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:rgba(var(--fg-rgb),.07);font-size:13.5px;font-weight:500;color:var(--tx2);white-space:nowrap}
.w-chip.is-a{background:var(--tx);color:var(--bg)}

/* ---------- 4. הרכבים של מכשירים ---------- */
/* שלושה מחשבים ניידים זה לצד זה, האמצעי מעט גדול וקדימה */
.w-trio{display:grid;gap:14px;width:100%}
.w-trio__row{display:grid;grid-template-columns:1fr 1.34fr 1fr;align-items:end;gap:0}
.w-trio__row .dv--lap{width:100%;font-size:clamp(6px,.7vw,9px)}
.w-trio__row .dv--lap:nth-child(2){position:relative;z-index:1;margin-inline:-11%}
.w-trio__ls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.w-trio__ls li{display:grid;gap:3px;padding:12px 12px 13px;border-radius:var(--w-r);background:var(--t2);box-shadow:inset 0 0 0 1px var(--hr);text-align:center;line-height:1.3}
.w-trio__ls b{font-weight:600;font-size:14.5px;color:var(--tx)}
.w-trio__ls em{font-style:normal;font-size:12.5px;color:var(--tx2)}
/* מחשב נייד, טלפון שחופף מלמטה, ומד מהירות קטן */
.w-dual{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;padding-block-end:24%}
.w-dual__lap{grid-area:1/1;z-index:1;align-self:start;width:100%}
.w-dual__ph{grid-area:1/1;z-index:3;width:29%;justify-self:start;align-self:end;margin-inline-start:2%;margin-block-end:-24%}
.w-dual__g{grid-area:1/1;z-index:2;width:48%;justify-self:end;align-self:end;margin-block-end:-20%;padding:14px 16px;gap:8px;box-shadow:0 0 0 1px var(--hr),var(--dvsh,0 30px 60px -28px rgba(0,0,0,.65))}
.w-gauge{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 14px}
.w-gauge__g{width:64px;height:64px;grid-row:1/3}
.w-gauge__g svg{display:block;width:100%;height:100%}
.w-gauge__track{fill:none;stroke:rgba(var(--fg-rgb),.12);stroke-width:9}
.w-gauge__arc{fill:none;stroke:var(--w-ok);stroke-width:9;stroke-linecap:round;stroke-dasharray:300 327;transform:rotate(-90deg);transform-origin:50% 50%;transform-box:fill-box}
.w-gauge__ok{fill:none;stroke:var(--w-ok);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.w-gauge__t{font-size:13.5px;font-weight:600;color:var(--tx);align-self:end}
.w-gauge__l{display:grid;gap:5px;align-self:start;font-size:12.5px;color:var(--tx2)}
.w-gauge__l li{display:flex;align-items:center;gap:7px}
.w-gauge__l .w-dot{width:7px;height:7px}
.w-gauge__l .w-dot::after{display:none}
/* טלפון וכרטיס זה לצד זה */
.w-side{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;gap:clamp(14px,2vw,24px);width:100%}
.w-side__ph{width:100%;max-width:230px;justify-self:center}
.w-side__c{padding:16px 18px 6px}

/* ---------- 5. מוקאפים ---------- */
/* 5א. מסלול פנייה: טופס קצר, וואטסאפ וחיוג, והודעה שהפנייה נכנסה */
.w-lead{overflow:hidden;gap:14px;padding-block-start:22px}
.w-lead__f{display:grid;gap:9px}
.w-fld{display:grid;gap:7px;padding:11px 14px;border-radius:12px;background:var(--t1);box-shadow:inset 0 0 0 1px var(--hr)}
.w-fld i{font-size:12px;color:var(--grey)}
.w-fld .w-ln{width:var(--w,60%);transform:scaleX(0)}
.w-fld--ta{min-height:64px}
.w-lead__send{justify-self:start;margin-block-start:2px}
.w-lead__alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block-start:12px;border-block-start:1px solid var(--hr)}
.w-lead__alt>span:first-child{font-size:12.5px;color:var(--grey);margin-inline-end:auto}
.w-lead__wa{background:var(--tx);color:var(--bg)}
.w-lead__wa svg{color:var(--w-wa)}
.w-lead__wa,.w-lead__tel{min-height:36px;padding-inline:14px;font-size:13px}
.w-lead__tel b{direction:ltr;unicode-bidi:isolate;font-weight:600}
.w-toast{position:absolute;z-index:3;inset-inline:14px;inset-block-start:12px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:11px 14px;border-radius:14px;background:var(--tx);color:var(--bg);box-shadow:var(--shadow-s,0 18px 40px -20px rgba(0,0,0,.7));opacity:0;transform:translateY(-130%)}
.w-toast i{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--w-ok);color:#fff}
.w-toast i svg{width:16px;height:16px}
.w-toast b{font-size:14px;font-weight:600;line-height:1.25}
.w-toast span{font-size:12.5px;line-height:1.3;opacity:.72}
/* 5ב. קטלוג: קטגוריות, סינון ורשת מוצרים */
.w-cat__c{display:flex;flex-wrap:wrap;gap:6px}
.w-cat__f{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--grey)}
.w-cat__f span{display:inline-flex;align-items:center;gap:6px}
.w-cat__f span::after{content:"";width:6px;height:6px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.w-cat__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.w-cat__g li{display:grid;gap:8px;padding:8px 8px 10px;border-radius:12px;background:var(--t1);box-shadow:inset 0 0 0 1px var(--hr)}
.w-cat__im{display:block;aspect-ratio:5/4;border-radius:8px;background:linear-gradient(160deg,rgba(var(--fg-rgb),.14),rgba(var(--fg-rgb),.05))}
.w-cat__g .w-ln--t{width:84%}
.w-cat__g .w-ln--p{width:40%}
/* 5ג. בחירת פלטפורמה: ההמלצה מתחלפת לפי העסק */
.w-plat__o{display:grid;gap:8px}
.w-plat__o li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:12px 14px;padding-inline-end:96px;border-radius:14px;background:var(--t1);box-shadow:inset 0 0 0 1px var(--hr)}
.w-plat__o li::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--pink);opacity:0}
.w-plat__o li>i{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--fg-rgb),.07);font-size:15px;font-weight:700;color:var(--tx)}
.w-plat__o li>i img{width:28px;height:28px;object-fit:contain}
.w-plat__o li>i img[src*="shopify-logo"]{width:34px;height:auto}
.w-plat__o li>i img[src*="wordpress"]{filter:brightness(0) invert(1)}
html[data-theme="light"] .w-plat__o li>i img[src*="wordpress"]{filter:none}
.w-plat__o b{font-size:15px;font-weight:600;color:var(--tx)}
.w-plat__o span{font-size:13px;color:var(--tx2)}
.w-plat__tag{position:absolute;inset-block-start:50%;inset-inline-end:14px;transform:translateY(-50%);padding:4px 10px;border-radius:999px;background:var(--pink-fill,#D62B6E);color:#fff;font-size:11.5px;font-weight:600;opacity:0}
.w-plat__note{font-size:12.5px;color:var(--grey);text-align:center}
/* 5ד. דף מוצר: צילום, מחיר, מידות, הוספה לסל, והשאלות שנענות בדף */
.w-pdp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;gap:12px 16px;align-items:start}
.w-pdp__im{position:relative;grid-row:1/3;overflow:hidden;aspect-ratio:4/5;border-radius:14px;background:var(--md)}
.w-pdp__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 30%)}
.w-pdp__im i{position:absolute;inset-inline-start:10px;inset-block-end:10px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.w-pdp__b{display:grid;gap:10px;align-content:start;padding-block-start:4px}
.w-pdp__v{display:flex;gap:6px}
.w-pdp__v li{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--tx2);box-shadow:inset 0 0 0 1px var(--hr)}
.w-pdp__v li.is-a{background:var(--tx);color:var(--bg);box-shadow:none}
.w-pdp__q{display:grid;grid-column:2;grid-row:2;align-self:end;border-block-start:1px solid var(--hr)}
.w-pdp__q li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:10px;border-block-end:1px solid var(--hr);font-size:13.5px;font-weight:500;color:var(--tx)}
.w-pdp__q li i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--grey);box-shadow:inset 0 0 0 1px var(--hr)}
/* 5ה. קופה: שלבים, משלוח, תשלום */
.w-chk__s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.w-chk__s li{display:grid;gap:7px;font-size:12.5px;font-weight:600;color:var(--grey);text-align:center}
.w-chk__s li::before{content:"";display:block;height:4px;border-radius:2px;background:rgba(var(--fg-rgb),.12)}
.w-chk__s li.is-d,.w-chk__s li.is-a{color:var(--tx)}
.w-chk__s li.is-d::before{background:var(--tx)}
.w-chk__s li.is-a::before{background:var(--pink)}
.w-chk__grp{display:grid;gap:6px}
.w-chk__grp>p{font-size:12.5px;font-weight:600;color:var(--grey)}
.w-chk__opt li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--t1);box-shadow:inset 0 0 0 1px var(--hr);font-size:13.5px;font-weight:500;color:var(--tx)}
.w-chk__opt li+li{margin-block-start:6px}
.w-chk__opt li i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.w-chk__opt li i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pink);opacity:0;transform:scale(.4)}
.w-chk__opt li.is-a i{box-shadow:inset 0 0 0 1.5px var(--pink)}
.w-chk__opt li.is-a i::after{opacity:1;transform:none}
.w-chk__opt li .w-ln{margin-inline-start:auto}
.w-chk__pay{display:flex;flex-wrap:wrap;gap:6px}
.w-chk__tot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block-start:10px;border-block-start:1px solid var(--hr);font-size:14px;font-weight:600;color:var(--tx)}
.w-chk__go{justify-self:stretch}

/* ---------- 6. חלונות האתרים והאריחים ---------- */
/* הגלילה מתחילה רק כשהחלון נכנס למסך (ui.js מוסיף is-on דרך data-replay) */
body[class] .w-sites .win__view img{animation:none;transform:translateY(0)}
body[class] .w-sites .win.is-on .win__view img{animation:w-pan var(--dur,34s) linear .5s infinite alternate}
@keyframes w-pan{from{transform:translateY(0)}to{transform:translateY(calc(-100% + var(--vh,420px)))}}
body[class] .w-sites .tile:hover .win__view img,body[class] .w-sites .tile:focus-within .win__view img{animation-play-state:paused}
/* הרמה והטיה קלה במעבר עכבר, בפרספקטיבה. רק transform */
.w-sites .bento>li,.w-rel .bento>li{perspective:1400px}
.w-sites .bento>li>.tile,.w-rel .bento>li>.tile{transform-style:preserve-3d;transition:background-color .6s var(--ease),transform .8s var(--ease),box-shadow .8s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .w-sites .bento>li>.tile:hover,.w-rel .bento>li>.tile:hover{transform:translateY(-6px) rotateX(1.6deg);box-shadow:var(--shadow,0 40px 90px -40px rgba(0,0,0,.9))}
}
/* אריח פיתוח (Shopify או Elementor) בלי רשימת החנויות: הטקסט ושורת "מה פיתחתי" */
.w-made{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:6px}
.tile--shop .w-made{flex:0 0 min(44%,420px);margin:var(--pad);margin-inline-start:0;align-content:center;align-self:center}
.tile--shop .w-made li{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border-radius:var(--rm);background:var(--t2);box-shadow:inset 0 0 0 1px var(--hr);font-size:15px;font-weight:500;color:var(--tx)}
.tile--shop .w-made li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink)}

/* ---------- 7. שירותים משלימים: אריחים גבוהים יותר, תמונה במסגרת ---------- */
.w-rel .bento{grid-auto-rows:auto}
.w-rel .rel__a{grid-column:span 7;grid-row:auto}
.w-rel .rel__b{grid-column:span 5;grid-row:auto}
.w-rel .rel__c{grid-column:1/-1}
.w-rel .rel__a .tile,.w-rel .rel__b .tile{flex-direction:column}
.w-rel .rel__a .tile__txt,.w-rel .rel__b .tile__txt{flex:none;padding-block-end:0;align-content:start}
.w-rel .rel__a .tile__pic,.w-rel .rel__b .tile__pic{flex:1 0 auto;min-height:0;aspect-ratio:var(--par,16/10);margin:clamp(18px,3vh,28px) var(--pad) var(--pad);border-radius:var(--rm);box-shadow:0 0 0 1px var(--hr)}
.w-rel .rel__c .tile{flex-direction:row;align-items:center}
.w-rel .rel__c .tile__txt{flex:0 0 38%;padding-block-end:var(--pad);align-content:center}
.w-rel .rel__c .tile__pic{flex:1;min-height:0;aspect-ratio:var(--par,21/9);margin:var(--pad);margin-inline-start:0;border-radius:var(--rm);box-shadow:0 0 0 1px var(--hr)}
.w-rel .tile__pic img{object-position:var(--op,50% 0)}

/* ---------- 8. הירו של עמוד המיתוג: התמונה הגדולה נמוכה מעט, כדי שהכיתוב ייכנס למסך ---------- */
.p-service--branding .svh__stage .stg--duo{--sb:11%}

/* ---------- 9. תנועה: כל מוקאפ מתחיל מחדש כשהשלב שלו נהיה פעיל (on), ובמובייל כשהוא נכנס למסך ---------- */
@keyframes w-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes w-fade{from{opacity:0}to{opacity:1}}
@keyframes w-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes w-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes w-pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes w-press{0%,100%{transform:none}50%{transform:scale(.94)}}
@keyframes w-toast{0%,44%{opacity:0;transform:translateY(-130%)}50%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-130%)}}
@keyframes w-typing{0%,6%{transform:scaleX(0)}18%,86%{transform:none}92%,100%{transform:scaleX(0)}}
@keyframes w-send{0%,36%{transform:none}40%{transform:scale(.94)}44%,100%{transform:none}}
@keyframes w-ring{0%,4%{opacity:0}8%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes w-arc{from{stroke-dasharray:0 327}to{stroke-dasharray:300 327}}
@media (prefers-reduced-motion:no-preference){
  /* שלושה מחשבים */
  .on .w-trio__row .dv--lap{animation:w-up .8s var(--ease) both}
  .on .w-trio__row .dv--lap:nth-child(2){animation-delay:.12s}
  .on .w-trio__row .dv--lap:nth-child(3){animation-delay:.24s}
  .on .w-trio__ls li{animation:w-up .7s var(--ease) both;animation-delay:calc(.4s + var(--j,0)*.1s)}
  /* מחשב, טלפון ומד */
  .on .w-dual__ph{animation:w-up .9s var(--ease) .2s both}
  .on .w-dual__g{animation:w-up .9s var(--ease) .45s both}
  .on .w-gauge__arc{animation:w-arc 1.4s var(--ease) .7s both}
  .on .w-gauge__ok{animation:w-pop .6s var(--ease-b,var(--ease)) 1.6s both}
  .on .w-gauge__l li{animation:w-fade .6s var(--ease) both;animation-delay:calc(1.1s + var(--j,0)*.15s)}
  /* מסלול פנייה: מחזור של 9 שניות */
  .on .w-fld .w-ln{animation:w-typing 9s var(--ease) infinite;animation-delay:calc(var(--j,0)*.5s)}
  .on .w-lead__send{animation:w-send 9s var(--ease) infinite}
  .on .w-toast{animation:w-toast 9s var(--ease) infinite}
  /* רשימת מצב */
  .on .w-list li{animation:w-up .6s var(--ease) both;animation-delay:calc(var(--j,0)*.1s)}
  .on .w-list .w-dot::after{animation:w-pulse 2.4s var(--ease) infinite;animation-delay:calc(1s + var(--j,0)*.6s)}
  /* קטלוג */
  .on .w-cat__c .w-chip{animation:w-up .6s var(--ease) both;animation-delay:calc(var(--j,0)*.08s)}
  .on .w-cat__g li{animation:w-pop .7s var(--ease) both;animation-delay:calc(.35s + var(--j,0)*.09s)}
  /* פלטפורמה: הטבעת עוברת בין שלוש האפשרויות */
  .on .w-plat__o li::after,.on .w-plat__tag{animation:w-ring 9s linear infinite;animation-delay:calc(var(--j,0)*3s)}
  .on .w-plat__o li{animation:w-up .6s var(--ease) both;animation-delay:calc(var(--j,0)*.1s)}
  /* דף מוצר */
  .on .w-pdp__im{animation:w-fade .8s var(--ease) both}
  .on .w-pdp__b>*{animation:w-up .6s var(--ease) both;animation-delay:calc(.2s + var(--j,0)*.1s)}
  .on .w-pdp__q li{animation:w-up .6s var(--ease) both;animation-delay:calc(.6s + var(--j,0)*.1s)}
  /* קופה */
  .on .w-chk__s li{animation:w-fade .6s var(--ease) both;animation-delay:calc(var(--j,0)*.2s)}
  .on .w-chk__opt li.is-a i::after{animation:w-pop .5s var(--ease-b,var(--ease)) .7s both}
  .on .w-chk__pay .w-chip{animation:w-up .6s var(--ease) both;animation-delay:calc(.8s + var(--j,0)*.08s)}
  .on .w-chk__go{animation:w-press 1.2s var(--ease) 1.4s both}
  /* תמונה במסגרת */
  .on .w-pic{animation:w-fade .9s var(--ease) both}
}
/* מסך נמוך במחשב (720 עד 820 גובה): העמודה הדביקה נמוכה יותר, ולכן ההרכבים קטנים מעט */
@media (min-width:1001px) and (max-height:820px){
  .inc__shot--w,.inc__shot--pic{padding:14px 20px}
  .w-dual,.w-trio{width:86%;margin-inline:auto}
  .w-side__ph{max-width:190px}
  .w-card{gap:10px}
}
/* ---------- 10. טאבלט וטלפון: כל מוקאפ יושב מתחת לשורה שלו (service-c.js מעביר אותו לשם) ---------- */
@media (max-width:1000px){
  .inc__row>.inc__shot--pic,.inc__row>.inc__shot--w{padding:0}
  .inc__row>.inc__shot--pic .w-pic,.inc__row>.inc__shot--w>.w-fig{margin:16px 16px 0}
  .inc__row>.inc__shot--pic figcaption,.inc__row>.inc__shot--w figcaption{padding:12px 16px 15px}
  .inc__shot--pic .w-pic{aspect-ratio:var(--mar,var(--par,3/2))}
  .w-trio__row .dv--lap{font-size:7px}
  .w-trio__ls li{padding:10px 8px 11px}
  .w-trio__ls b{font-size:13.5px}
  .w-trio__ls em{font-size:12px}
  .w-dual__g{width:50%}
  .w-side{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .w-side__ph{max-width:200px}
  .w-rel .rel__a,.w-rel .rel__b,.w-rel .rel__c{grid-column:1/-1}
  .w-rel .rel__c .tile{flex-direction:column;align-items:stretch}
  .w-rel .rel__c .tile__txt{flex:none;padding-block-end:0}
  .w-rel .rel__c .tile__pic{flex:none;aspect-ratio:16/10;margin:clamp(18px,3vh,28px) var(--pad) var(--pad)}
  .w-rel .rel__a .tile__pic,.w-rel .rel__b .tile__pic{flex:none;aspect-ratio:16/10}
  .w-sites .bento>li,.w-rel .bento>li{perspective:none}
}
@media (max-width:760px){
  /* הכותרת של עמוד האתרים ארוכה יותר, ולכן יורדת מעט כדי שכל שורה תישאר שורה אחת ב-390 */
  body[class].p-service--websites main .h1{font-size:clamp(28px,8.3vw,36px)}
  .w-card{padding:14px;gap:10px}
  .w-trio__row .dv--lap{font-size:6px}
  .w-trio__ls{gap:6px}
  .w-trio__ls li{padding:9px 6px 10px}
  .w-trio__ls b{font-size:12.5px}
  .w-trio__ls em{font-size:11.5px}
  .w-dual{padding-block-end:28%}
  .w-dual__ph{width:31%;margin-block-end:-28%}
  .w-dual__g{width:54%;margin-block-end:-22%;padding:10px 12px}
  .w-gauge__g{width:52px;height:52px}
  .w-gauge__t{font-size:12.5px}
  .w-gauge__l{font-size:11.5px}
  .w-side{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
  .w-side__ph{max-width:150px}
  .w-side__c{padding:12px 12px 4px}
  .w-list li{padding-block:10px;font-size:13.5px}
  .w-list li small{font-size:12px}
  .w-cat__g{gap:8px}
  .w-cat__g li{padding:6px 6px 8px;gap:6px}
  .w-pdp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
  .w-pdp__q li{font-size:12.5px;padding-block:8px}
  .w-chk__opt li{padding:9px 10px;font-size:12.5px}
  .w-fld{padding:9px 12px}
  .w-fld--ta{min-height:56px}
  .w-lead__alt>span:first-child{flex-basis:100%;margin:0}
  .w-toast{inset-inline:10px;inset-block-start:10px;padding:9px 12px}
  .w-toast b{font-size:13px}
  .w-toast span{font-size:12px}
  .w-plat__o li{padding:10px 12px;grid-template-columns:38px minmax(0,1fr);column-gap:12px}
  .w-plat__o li>i{width:38px;height:38px}
  .w-plat__tag{inset-inline-end:10px;font-size:11px}
  .tile--shop .w-made{flex:none;margin:clamp(18px,3vh,28px) var(--pad) var(--pad)}
  .w-rel .rel__c .tile__pic,.w-rel .rel__a .tile__pic,.w-rel .rel__b .tile__pic{margin:18px var(--pad) var(--pad)}
}
/* ---------- 11. תנועה מופחתת: הכול נוחת במצב הסופי ---------- */
@media (prefers-reduced-motion:reduce){
  .w-fld .w-ln,.w-chk__opt li.is-a i::after{transform:none}
  .w-toast{opacity:1;transform:none}
  .w-plat__o li:first-child::after{opacity:1}
  .w-plat__o li:first-child .w-plat__tag{opacity:1}
  .dv__scr video,.w-pic img,.w-sites .tile,.w-rel .tile{transition:none}
  body[class] .w-sites .win.is-on .win__view img{animation:none}
}
/* ---------- 12. מצב בהיר: כרטיס המוקאפ לבן על אריח בהיר, ומסגרות המדיה עם קו ---------- */
html[data-theme="light"] .w-card{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
html[data-theme="light"] .w-fld,html[data-theme="light"] .w-cat__g li,html[data-theme="light"] .w-plat__o li,html[data-theme="light"] .w-chk__opt li,html[data-theme="light"] .w-trio__ls li{background:var(--tile-2)}
html[data-theme="light"] .w-pic,html[data-theme="light"] .win--live .win__view{box-shadow:0 0 0 1px var(--hair)}