/* =========================================================
   CK Digital 360, שכבה לשלושת עמודי השירות: ניהול ותחזוקה, קידום בגוגל, אוטומציות וסוכני AI.
   נטען דרך css_late אחרי home2.css ואחרי mocks.css, וכל class מתחיל ב-m-.
   1. בסיס: וידאו במסגרת מכשיר, הרמה במעבר עכבר, חשיפה ברצף (data-replay -> is-on), גלולת סטטוס
   2. ניהול ותחזוקה: כרטיסי לוח עם מוקאפים חיים (עדכונים, אתר, שרת, גיבויים, דומיין), פס הדלתות, אריח אתר חי
   3. קידום בגוגל: כרטיס הקייס של ילדודס
   4. אוטומציות: קטלוג המערכות עם טאבים ב-CSS בלבד, ארבעת שלבי הפרויקט, סוכן AI בעבודה
   5. מצב בהיר, טאבלט, טלפון, תנועה מופחתת
   כל הצבעים דרך משתנים עם ערך גיבוי. תנועה: transform ו-opacity בלבד.
   ========================================================= */

/* ---------- 1. בסיס ---------- */
[class*="p-service"]{--m-ok:#30d158;--m-ok-soft:rgba(48,209,88,.16)}
[class*="p-service"] .dv__scr video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--media,#0b0b0c);transition:transform 1.2s var(--ease)}
[class*="p-service"] a.dv:hover .dv__scr video,[class*="p-service"] a.tile:hover .dv__scr video{transform:scale(1.015)}

/* הרמה קלה עם הטיה תלת ממדית עדינה */
.m-lift{transform-style:preserve-3d;transition:transform .8s var(--ease),background-color .6s var(--ease),box-shadow .8s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .m-lift:hover{transform:perspective(1400px) rotateX(1.4deg) translateY(-6px)}
}

/* חשיפה ברצף: הבסיס נראה, ובכל כניסה למסך הרצף מתחיל מחדש */
@keyframes mUp{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mUpB{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mIn{from{opacity:0}to{opacity:1}}
@keyframes mOut{from{opacity:1}to{opacity:0}}
@keyframes mPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes mGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes mGrowY{from{transform:scaleY(0)}to{transform:none}}
@keyframes mDrop{from{opacity:0;transform:translateY(-110%)}to{opacity:1;transform:none}}
@keyframes mRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mPulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes mSpin{to{transform:rotate(360deg)}}
@keyframes mLift{0%,8%{transform:none}14%,34%{transform:translateY(-5px)}40%,100%{transform:none}}

/* גלולת סטטוס: מבדיקה לתקין */
.m-st{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1;color:var(--text-2,#a1a1a6)}
.m-st__d{position:relative;width:8px;height:8px;border-radius:50%;background:var(--grey,#86868b)}
.m-st__d::before,.m-st__d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--m-ok)}
.m-st__d::after{inset:-4px;border:1.5px solid var(--m-ok);background:none;opacity:0}
.m-st__a,.m-st__b{grid-area:1/2}
.m-st__a{opacity:0}
.m-st__b{color:var(--text,#f5f5f7)}

/* ---------- 2. ניהול ותחזוקה ---------- */
/* כרטיס לוח: מוקאפ למעלה, טקסט למטה */
.m-card{display:flex;flex-direction:column;min-width:0}
.m-panel{position:relative;flex:1 0 auto;display:grid;align-content:center;padding:var(--pad) var(--pad) 0;min-height:clamp(232px,27vh,300px)}
.m-panel .mk{width:100%}
.m-card__txt{display:grid;gap:10px;justify-items:start;padding:clamp(18px,2.4vh,26px) var(--pad) var(--pad);margin-block-start:auto}
.m-card__k{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:13.5px;font-weight:600;color:var(--grey,#86868b);direction:rtl}
.m-card__k>span{font-feature-settings:"tnum" 1;direction:ltr}
.m-card h3{font-weight:700;font-size:clamp(21px,1.75vw,27px);line-height:1.14;letter-spacing:-.022em;color:var(--text,#f5f5f7)}
.m-card__txt>p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:var(--text-2,#a1a1a6);max-width:46ch;text-wrap:pretty}
/* כרטיס מפוצל: מוקאפ בצד אחד, טקסט בצד השני */
.m-card--split{flex-direction:row;align-items:stretch}
.m-card--split .m-panel{flex:0 0 46%;padding:var(--pad);padding-inline-end:0;min-height:0}
.m-card--split .m-card__txt{flex:1;min-width:0;align-content:center;padding:var(--pad);margin:0}
.m-card--split .m-card__txt>p{max-width:40ch}

/* המוקאפים בתוך הכרטיסים: מרווחים משלהם, בלי השוליים של העמודה הדביקה */
.m-card .mk{margin:0}
.m-card .mk-list,.m-card .mk-a11y{padding-block-end:4px}
.m-card .mk-shield{width:min(28%,84px);margin-block:0 10px}
.m-card .mk-psi{padding-block-end:18px}

/* 01 עדכונים */
.m-upd{padding:18px 20px 16px;display:grid;gap:4px}
.m-upd__l{display:grid}
.m-upd__l li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:14px;padding-block:12px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12));font-size:15px;line-height:1.3}
.m-upd__l li>span{font-weight:500;color:var(--text,#f5f5f7);direction:ltr;text-align:end}
.m-upd__l em{position:relative;display:grid;min-width:52px;font-style:normal;font-size:13px;color:var(--text-2,#a1a1a6);text-align:start}
.m-bar{position:relative;display:block;height:8px;border-radius:4px;background:rgba(var(--fg-rgb,245,245,247),.08);overflow:hidden}
.m-bar b{position:absolute;inset:0;border-radius:inherit;background:var(--text-2,#a1a1a6);transform-origin:100% 50%}
.m-sw__a,.m-sw__b{grid-area:1/1}
.m-sw__a{opacity:0}
.m-sw__b{color:var(--m-ok);font-weight:600}
.m-upd__f{display:flex;align-items:center;gap:10px;padding-block-start:12px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12));font-size:13.5px;line-height:1.4;color:var(--text-2,#a1a1a6)}
.m-chk{position:relative;flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--m-ok)}
.m-chk::after{content:"";position:absolute;inset-block-start:4px;inset-inline-start:6px;width:5px;height:8px;border:solid #062a1f;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* 04 תוכן ומבצעים: חלון אתר קטן שבאנר נכנס אליו מלמעלה */
.m-site{padding:18px 20px 16px;display:grid;gap:12px}
.m-site__win{border-radius:10px;overflow:hidden;background:var(--bg,#000);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.m-site__bar{display:flex;gap:5px;height:22px;align-items:center;padding-inline:10px;background:var(--tile-3,#2a2a2c);direction:ltr}
.m-site__bar i{width:7px;height:7px;border-radius:50%;background:rgba(var(--fg-rgb,245,245,247),.22)}
.m-site__pg{position:relative;display:grid;gap:10px;padding:0 12px 12px;overflow:hidden}
.m-site__ban{display:block;margin-inline:-12px;padding:8px 14px;background:var(--pink,#E7357A);color:#fff;font-size:12.5px;font-weight:600;line-height:1.3;text-align:center}
.m-site__hero{display:grid;gap:7px;padding-block:8px 2px}
.m-site__hero .mk-ln{height:10px}
.m-site__hero .mk-ln:first-child{height:14px;background:rgba(var(--fg-rgb,245,245,247),.18)}
.m-site__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-site__cols i{display:block;aspect-ratio:4/3;border-radius:6px;background:rgba(var(--fg-rgb,245,245,247),.08)}
.m-site__new{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.4;color:var(--text-2,#a1a1a6)}

/* שרת: רשימת מצב וסרגל זמינות */
.m-srv{padding:18px 20px 16px;display:grid;gap:2px}
.m-srv .mk__h{justify-content:space-between}
.m-srv .mk__h small{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-2,#a1a1a6)}
.m-srv__l{display:grid}
.m-srv__l li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12));font-size:15px;line-height:1.3}
.m-srv__l li span{flex:1;min-width:0;font-weight:500;color:var(--text,#f5f5f7)}
.m-srv__l li small{font-size:13px;color:var(--text-2,#a1a1a6)}
.m-up{display:grid;gap:10px;padding-block-start:14px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.m-up p{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:500;color:var(--text,#f5f5f7)}
.m-up p small{font-size:12.5px;font-weight:400;color:var(--m-ok)}
.m-up__s{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;height:18px;direction:ltr}
.m-up__s b{display:block;border-radius:3px;background:var(--m-ok);opacity:.85;transform-origin:50% 100%}

/* גיבויים: שבוע של סימני וי ושורת שחזור */
.m-bak{padding:18px 20px 16px;display:grid;gap:14px}
.m-bak__w{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.m-bak__w li{display:grid;justify-items:center;gap:8px;padding:10px 4px 11px;border-radius:10px;background:rgba(var(--fg-rgb,245,245,247),.05);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12));font-size:12.5px;font-weight:600;color:var(--text-2,#a1a1a6)}
.m-bak__w li .m-chk{width:16px;height:16px}
.m-bak__w li .m-chk::after{inset-block-start:3px;inset-inline-start:5px;width:4px;height:7px}
.m-bak__r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--tile-3,#2a2a2c);font-size:14px;color:var(--text,#f5f5f7)}
.m-bak__r b{padding:5px 12px;border-radius:999px;background:var(--text,#f5f5f7);color:var(--bg,#000);font-size:12.5px;font-weight:600}

/* פס הדלתות: שלוש דלתות בתוך אריח אחד */
.m-doors{flex-direction:row;padding:0}
.m-door{flex:1;min-width:0;display:grid;gap:8px;align-content:start;justify-items:start;padding:var(--pad);color:var(--text,#f5f5f7);transition:background-color .5s var(--ease)}
.m-door+.m-door{border-inline-start:1px solid var(--hair,rgba(245,245,247,.12))}
.m-door:hover{background:var(--tile-3,#2a2a2c)}
.m-door__k{font-size:13.5px;font-weight:600;color:var(--pink-ink,#F0508F)}
.m-door h3{font-weight:700;font-size:clamp(20px,1.6vw,25px);line-height:1.15;letter-spacing:-.02em}
.m-door p{font-size:15.5px;line-height:1.5;color:var(--text-2,#a1a1a6);max-width:34ch}
.m-door .go{margin-block-start:6px;color:var(--text,#f5f5f7)}
.m-door .go svg{color:var(--pink,#E7357A)}

/* אריח אתר חי: מחשב נייד עם הקלטה בתחתית האריח */
.m-live .dv--lap{margin:auto var(--pad) 0;font-size:clamp(9px,1vw,13px)}
.m-live .tile__txt{padding-block-end:clamp(20px,3vh,30px)}
.m-live .dv--lap::after{margin-inline:-3.5%}

/* אריח ראשי ברוחב מלא: טקסט בצד אחד, מחשב נייד חי בצד השני */
.m-feat{flex-direction:row;align-items:stretch}
.m-feat .tile__txt{flex:0 0 38%;padding-block-end:var(--pad);align-content:center}
.m-feat__dev{flex:1;min-width:0;display:grid;align-content:end;padding-block-start:var(--pad);padding-inline-end:var(--pad)}
.m-feat .dv--lap{margin:0;font-size:clamp(10px,1.15vw,15px)}
.m-feat .dv--lap::after{margin-inline:-3.5%}

/* ---------- 3. קידום בגוגל: הקייס של ילדודס ---------- */
.m-case{justify-content:space-between}
.m-case .tile__txt{padding-block-end:0}
.m-case__jump{display:flex;align-items:center;gap:12px;margin:clamp(22px,3vh,32px) var(--pad) 0;font-size:15px;font-weight:600;color:var(--text-2,#a1a1a6)}
.m-case__jump span{display:inline-flex;align-items:baseline;gap:6px;padding:10px 16px;border-radius:999px;background:var(--tile-2,#161617);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.m-case__jump b{font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:-.03em;color:var(--text,#f5f5f7);font-feature-settings:"tnum" 1,"lnum" 1}
.m-case__to{background:var(--pink-fill,#D62B6E);box-shadow:none;color:#fff}
.m-case__to b{color:#fff}
.m-case__arr{position:relative;flex:1;min-width:26px;height:2px;background:var(--hair-2,rgba(245,245,247,.2));transform-origin:100% 50%}
.m-case__arr::after{content:"";position:absolute;inset-inline-start:-1px;inset-block-start:-4px;width:8px;height:8px;border:solid var(--text-2,#a1a1a6);border-width:0 0 2px 2px;transform:rotate(45deg)}
.m-case .kpi{margin:clamp(18px,2.6vh,26px) var(--pad) 0;padding-block-start:18px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.m-case__src{margin:auto var(--pad) 0;padding-block:18px clamp(20px,3vh,30px);font-size:13.5px;line-height:1.45;color:var(--grey,#86868b)}
.m-case__jump{font-size:16px}
.m-case__jump span{padding:12px 20px}
.m-case__jump b{font-size:clamp(28px,2.6vw,40px)}
.m-case .kpi{gap:8px clamp(24px,3vw,48px)}
.m-case .kpi dt{font-size:14.5px}
.m-case .kpi dd{font-size:clamp(30px,3vw,46px);letter-spacing:-.03em}

/* ---------- 4. אוטומציות ---------- */
/* 4א. קטלוג המערכות: טאבים ב-CSS בלבד (רדיו) וכרטיסים מסוננים */
.m-cat__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block:clamp(22px,3.4vh,34px) clamp(26px,4vh,40px)}
.m-cat__tab{position:relative;cursor:pointer}
.m-cat__tab input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.m-cat__tab span{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--text-2,#a1a1a6);background:var(--tile,#1d1d1f);transition:background-color .3s var(--ease),color .3s var(--ease),transform .5s var(--ease)}
.m-cat__tab:hover span{color:var(--text,#f5f5f7)}
.m-cat__tab input:checked+span{background:var(--text,#f5f5f7);color:var(--bg,#000);font-weight:600}
.m-cat__tab input:focus-visible+span{outline:2px solid var(--text,#f5f5f7);outline-offset:3px}
.m-cat__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.m-sys{display:grid;align-content:start;gap:12px;padding:clamp(22px,2.2vw,30px);border-radius:var(--rx,28px);background:var(--tile,#1d1d1f);animation:mUp .7s var(--ease) both;animation-delay:calc(var(--i,0)*.04s)}
.m-sys__for{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;font-weight:600;color:var(--grey,#86868b)}
.m-sys__for span{padding:4px 10px;border-radius:999px;background:rgba(var(--fg-rgb,245,245,247),.06)}
.m-sys h3{font-weight:700;font-size:clamp(20px,1.55vw,24px);line-height:1.18;letter-spacing:-.02em}
.m-sys__d{font-size:15.5px;line-height:1.5;color:var(--text-2,#a1a1a6)}
.m-sys__tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.m-sys__tools li{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text,#f5f5f7);background:rgba(var(--fg-rgb,245,245,247),.06);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12));direction:ltr}
.m-hu{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-block-start:auto;padding-block-start:14px;border-block-start:1px solid var(--hair,rgba(245,245,247,.12));font-size:14.5px;line-height:1.45;color:var(--text-2,#a1a1a6)}
.m-hu i{width:8px;height:8px;margin-block-start:7px;border-radius:50%;background:var(--pink,#E7357A)}
.m-hu b{font-weight:600;color:var(--text,#f5f5f7)}
/* הסינון: כרטיס שלא שייך לסוג העסק שנבחר יוצא מהרשת */
.m-cat:has(input[value="serv"]:checked) .m-sys:not([data-biz~="serv"]),
.m-cat:has(input[value="shop"]:checked) .m-sys:not([data-biz~="shop"]),
.m-cat:has(input[value="clinic"]:checked) .m-sys:not([data-biz~="clinic"]),
.m-cat:has(input[value="office"]:checked) .m-sys:not([data-biz~="office"]),
.m-cat:has(input[value="rest"]:checked) .m-sys:not([data-biz~="rest"]){display:none}
.m-cat__note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-block-start:clamp(20px,3vh,28px);font-size:14.5px;color:var(--grey,#86868b)}
.m-cat__note i{width:8px;height:8px;border-radius:50%;background:var(--pink,#E7357A)}

/* 4ב. ארבעת שלבי הפרויקט */
.m-ph{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.m-ph::before{content:"";position:absolute;inset-inline:5%;inset-block-start:31px;height:2px;background:var(--hair,rgba(245,245,247,.12));z-index:0}
.m-ph::after{content:"";position:absolute;inset-inline-start:5%;inset-block-start:30px;width:22%;height:4px;border-radius:4px;background:linear-gradient(270deg,transparent,var(--pink,#E7357A));opacity:0;z-index:0}
.m-ph__i{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;border-radius:var(--rx,28px);background:var(--tile,#1d1d1f);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.m-ph__k{display:flex;align-items:center;gap:12px;font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.m-ph__k i{font-style:normal;font-size:13px;font-weight:600;color:var(--pink-ink,#F0508F);font-feature-settings:"tnum" 1;padding:4px 9px;border-radius:999px;background:rgba(var(--fg-rgb,245,245,247),.06)}
.m-ph__d{font-size:15px;line-height:1.5;color:var(--text-2,#a1a1a6);margin-block-start:auto}
.m-ph__p{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--tile-2,#161617);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12));min-height:132px;align-content:center}
.m-ph__row{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--text,#f5f5f7)}
.m-ph__row i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--grey,#86868b)}
.m-ph__row small{margin-inline-start:auto;padding:3px 9px;border-radius:999px;background:var(--pink-fill,#D62B6E);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.m-ph__row b{font-weight:500}
.m-ph__row .m-chk{width:16px;height:16px}
.m-ph__row .m-chk::after{inset-block-start:3px;inset-inline-start:5px;width:4px;height:7px}
/* שלב 2: שלוש צמתים עם חוט שנמתח ביניהן */
.m-ph__nodes{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.m-ph__nodes span{padding:9px 6px;border-radius:9px;background:var(--tile-3,#2a2a2c);font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:var(--text,#f5f5f7)}
.m-ph__nodes i{display:block;width:16px;height:2px;background:var(--pink,#E7357A);transform-origin:100% 50%}
/* שלב 3: פס לוג */
.m-ph__log{display:grid;gap:7px}
.m-ph__log li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--text-2,#a1a1a6)}
.m-ph__log li b{font-weight:500;color:var(--text,#f5f5f7)}
.m-ph__log li em{font-style:normal;margin-inline-start:auto;font-size:11.5px;color:var(--m-ok)}
.m-ph__me{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-block-start:4px;padding:5px 11px;border-radius:999px;background:rgba(var(--fg-rgb,245,245,247),.06);font-size:12.5px;font-weight:600;color:var(--text,#f5f5f7)}
.m-ph__me i{width:7px;height:7px;border-radius:50%;background:var(--pink,#E7357A)}
.m-ph__by{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin-block-start:clamp(26px,4vh,40px);font-size:15.5px;color:var(--text-2,#a1a1a6);text-align:center}
.m-ph__by b{font-weight:600;color:var(--text,#f5f5f7)}

/* 4ג. סוכן AI בעבודה */
.m-ag__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,4vw,64px);align-items:start}
.m-ags .h2{font-size:clamp(30px,3.5vw,54px)}
.m-ag__list{list-style:none;margin:clamp(24px,3.6vh,40px) 0 0;padding:0;display:grid;gap:10px}
.m-ag__list li{display:grid;gap:8px;padding:clamp(18px,2vw,24px);border-radius:var(--rl,22px);background:var(--tile,#1d1d1f);transition:background-color .4s var(--ease),transform .7s var(--ease)}
.m-ag__list li:hover{background:var(--tile-3,#2a2a2c)}
.m-ag__list b{font-size:clamp(18px,1.4vw,21px);font-weight:700;letter-spacing:-.02em}
.m-ag__list p{font-size:15px;line-height:1.5;color:var(--text-2,#a1a1a6)}
.m-ag__io{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin-block-start:4px;font-size:13.5px;line-height:1.4;color:var(--text-2,#a1a1a6)}
.m-ag__io dt{font-weight:600;color:var(--grey,#86868b)}
.m-ag__io dd{margin:0}
.m-agm{position:sticky;inset-block-start:calc(var(--nav-h,64px) + 40px);padding:clamp(20px,2.2vw,30px);display:grid;gap:18px;border-radius:var(--rx,28px)}
.m-agm .mk__h{font-size:14.5px}
.m-agm .mk__h{justify-content:space-between}
.m-agm .mk__h small{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-2,#a1a1a6)}
.m-agm__in{display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:var(--tile-3,#2a2a2c)}
.m-agm__in span{font-size:12.5px;font-weight:600;color:var(--grey,#86868b)}
.m-agm__in p{font-size:16px;line-height:1.45;color:var(--text,#f5f5f7)}
.m-agm__steps{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.m-agm__steps li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:12px;font-size:16px;line-height:1.35;color:var(--text-2,#a1a1a6)}
.m-agm__steps li i{position:relative;display:block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hair-2,rgba(245,245,247,.2))}
.m-agm__steps li i::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-block-start-color:var(--text,#f5f5f7);opacity:0}
.m-agm__steps li i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--m-ok);opacity:1}
.m-agm__steps i b{position:absolute;z-index:1;inset-block-start:4px;inset-inline-start:6px;width:5px;height:8px;border:solid #062a1f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.m-agm__steps li:last-child i::after{background:var(--pink,#E7357A)}
.m-agm__steps li:last-child i b{display:none}
.m-agm__steps li:last-child{color:var(--text,#f5f5f7);font-weight:500}
.m-agm__out{display:grid;gap:6px;justify-items:start;padding:16px 18px;border-radius:14px;background:var(--mk-pink-tint,rgba(231,53,122,.1));box-shadow:inset 0 0 0 1px var(--mk-pink-line,rgba(231,53,122,.4))}
.m-agm__out b{font-size:13px;font-weight:600;color:var(--pink-ink,#F0508F)}
.m-agm__out p{font-size:17px;font-weight:600;line-height:1.35;color:var(--text,#f5f5f7)}
.m-agm__btn{display:inline-flex;align-items:center;gap:8px;margin-block-start:4px;padding:7px 14px;border-radius:999px;background:var(--text,#f5f5f7);color:var(--bg,#000);font-size:13px;font-weight:600}
.m-agm__btn i{width:7px;height:7px;border-radius:50%;background:var(--pink,#E7357A)}
.m-agm__note{font-size:13px;line-height:1.45;color:var(--grey,#86868b)}

/* ---------- 5. תנועה: כל רצף מתחיל מחדש בכניסה למסך ---------- */
@media (prefers-reduced-motion:no-preference){
  /* כרטיסים שנחשפים ברצף */
  .is-on.m-seq,.is-on .m-seq{animation:mUp .8s var(--ease) both;animation-delay:calc(var(--i,0)*.12s)}
  /* גלולת הסטטוס: הנקודה הירוקה, הפולס והמילה מתחלפים אחרי שהמוקאפ סיים */
  .is-on .m-st__d::before{animation:mIn .4s var(--ease) both;animation-delay:calc(var(--i,0)*.12s + 1.9s)}
  .is-on .m-st__d::after{animation:mPulse 1.6s var(--ease) both;animation-delay:calc(var(--i,0)*.12s + 2s)}
  .is-on .m-st__a{animation:mOut .4s var(--ease) both;animation-delay:calc(var(--i,0)*.12s + 1.9s)}
  .is-on .m-st__b{animation:mIn .4s var(--ease) both;animation-delay:calc(var(--i,0)*.12s + 1.9s)}
  /* 01 עדכונים */
  .is-on .m-upd__l li{animation:mRise .6s var(--ease) both;animation-delay:calc(var(--j,0)*.14s + .2s)}
  .is-on .m-bar b{animation:mGrow 1s var(--ease) both;animation-delay:calc(var(--j,0)*.36s + .5s)}
  .is-on .m-sw__a{animation:mOut .3s var(--ease) both;animation-delay:calc(var(--j,0)*.36s + 1.5s)}
  .is-on .m-sw__b{animation:mIn .3s var(--ease) both;animation-delay:calc(var(--j,0)*.36s + 1.5s)}
  .is-on .m-upd__f{animation:mRise .6s var(--ease) both;animation-delay:2.5s}
  .is-on .m-upd__f .m-chk{animation:mPop .5s var(--ease-b,var(--ease)) both;animation-delay:2.7s}
  /* 02 אבטחה ו-05 מהירות: המוקאפים של mocks.css, עם אותם קטעי תנועה, מופעלים כאן דרך is-on */
  .is-on .mk-list li{animation:mkUp .6s var(--ease) both;animation-delay:calc(var(--j,0)*.12s + .2s)}
  .is-on .mk-list .mk-dot::after{animation:mkPulse 2.4s var(--ease) both;animation-delay:calc(var(--j,0)*.5s + 1.2s)}
  .is-on .mk-shield{animation:mkPop .9s var(--ease) both}
  .is-on .mk-shield__c{animation:mkFade .5s var(--ease) .6s both}
  .is-on .mk-psi__g{animation:mkPop .9s var(--ease) both}
  .is-on .mk-psi__ok{animation:mkPop .6s var(--ease-b,var(--ease)) .6s both}
  .is-on .mk-psi__l li{animation:mkUp .6s var(--ease) both;animation-delay:calc(var(--j,0)*.1s + .7s)}
  /* 03 נגישות */
  .is-on .mk-a11y__l li{animation:mkUp .6s var(--ease) both;animation-delay:calc(var(--j,0)*.1s + .2s)}
  .is-on .mk-a11y__l .mk-tg--on::before{animation:mkToggle 1.4s var(--ease) both;animation-delay:calc(var(--j,0)*.3s + .4s)}
  .is-on .mk-a11y__l .mk-tg--on::after{animation:mkKnob 1.4s var(--ease) both;animation-delay:calc(var(--j,0)*.3s + .4s)}
  /* 04 תוכן ומבצעים */
  .is-on .m-site__ban{animation:mDrop .8s var(--ease-b,var(--ease)) both;animation-delay:.9s}
  .is-on .m-site__cols i{animation:mRise .6s var(--ease) both;animation-delay:calc(var(--j,0)*.1s + .3s)}
  .is-on .m-site__new{animation:mRise .6s var(--ease) both;animation-delay:1.9s}
  .is-on .m-site__new .m-chk{animation:mPop .5s var(--ease-b,var(--ease)) both;animation-delay:2.1s}
  /* שרת וזמינות */
  .is-on .m-srv__l li{animation:mRise .6s var(--ease) both;animation-delay:calc(var(--j,0)*.14s + .2s)}
  .is-on .m-srv .mk-dot::after{animation:mkPulse 2.4s var(--ease) both;animation-delay:calc(var(--j,0)*.5s + 1.1s)}
  .is-on .m-up__s b{animation:mGrowY .5s var(--ease) both;animation-delay:calc(var(--j,0)*.05s + .9s)}
  .is-on .m-up p small{animation:mIn .5s var(--ease) both;animation-delay:2.3s}
  /* גיבויים */
  .is-on .m-bak__w li{animation:mRise .5s var(--ease) both;animation-delay:calc(var(--j,0)*.08s + .2s)}
  .is-on .m-bak__w .m-chk{animation:mPop .45s var(--ease-b,var(--ease)) both;animation-delay:calc(var(--j,0)*.2s + .8s)}
  .is-on .m-bak__r{animation:mLift 4s var(--ease) both;animation-delay:2.4s}
  /* הקייס של ילדודס: מהעמוד השמיני למקום השלישי */
  .is-on .m-case__from{animation:mRise .6s var(--ease) both;animation-delay:.2s}
  .is-on .m-case__arr{animation:mGrow .8s var(--ease) both;animation-delay:.7s}
  .is-on .m-case__to{animation:mPop .6s var(--ease-b,var(--ease)) both;animation-delay:1.4s}
  .is-on .m-case .kpi div{animation:mRise .6s var(--ease) both;animation-delay:calc(var(--j,0)*.12s + 1.8s)}
  /* ארבעת השלבים: הכרטיסים נכנסים ברצף, הפולס רץ על הקו, וכל כרטיס מריץ את המיני-סצנה שלו */
  .is-on .m-ph__i{animation:mUp .8s var(--ease) both;animation-delay:calc(var(--i,0)*.16s)}
  .is-on.m-ph::after{animation:how3-pulse-rtl 9s linear infinite}
  .is-on .m-ph__row{animation:mRise .55s var(--ease) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.22s + .5s)}
  .is-on .m-ph__row small{animation:mPop .5s var(--ease-b,var(--ease)) both;animation-delay:calc(var(--i,0)*.16s + 1.5s)}
  .is-on .m-ph__nodes span{animation:mPop .5s var(--ease-b,var(--ease)) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.5s + .5s)}
  .is-on .m-ph__nodes i{animation:mGrow .45s var(--ease) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.5s + .8s)}
  .is-on .m-ph__log li{animation:mRise .55s var(--ease) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.45s + .5s)}
  .is-on .m-ph__log li em{animation:mIn .4s var(--ease) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.45s + .95s)}
  .is-on .m-ph__me{animation:mPop .5s var(--ease-b,var(--ease)) both;animation-delay:calc(var(--i,0)*.16s + 2.2s)}
  .is-on .m-ph__row .m-chk{animation:mPop .45s var(--ease-b,var(--ease)) both;animation-delay:calc(var(--i,0)*.16s + var(--j,0)*.3s + .9s)}
  /* הסוכן בעבודה: לולאה של 14 שניות */
  .is-on .m-agm__in{animation:mAgIn 14s var(--ease) infinite}
  .is-on .m-agm__steps li{animation:mAgStep 14s var(--ease) infinite}
  .is-on .m-agm__steps li:nth-child(1) i::before{animation:mAgSpin0 14s linear infinite}
  .is-on .m-agm__steps li:nth-child(2) i::before{animation:mAgSpin1 14s linear infinite}
  .is-on .m-agm__steps li:nth-child(3) i::before{animation:mAgSpin2 14s linear infinite}
  .is-on .m-agm__steps li:nth-child(4) i::before{animation:mAgSpin3 14s linear infinite}
  .is-on .m-agm__steps li:nth-child(1) i::after,.is-on .m-agm__steps li:nth-child(1) i b{animation:mAgDone0 14s var(--ease) infinite}
  .is-on .m-agm__steps li:nth-child(2) i::after,.is-on .m-agm__steps li:nth-child(2) i b{animation:mAgDone1 14s var(--ease) infinite}
  .is-on .m-agm__steps li:nth-child(3) i::after,.is-on .m-agm__steps li:nth-child(3) i b{animation:mAgDone2 14s var(--ease) infinite}
  .is-on .m-agm__steps li:nth-child(4) i::after,.is-on .m-agm__steps li:nth-child(4) i b{animation:mAgDone3 14s var(--ease) infinite}
  .is-on .m-agm__out{animation:mAgOut 14s var(--ease) infinite}
  .is-on .m-agm__btn{animation:mAgBtn 14s var(--ease) infinite}
  .is-on .m-agm .mk-dot::after{animation:mkPulse 2.2s var(--ease) infinite}
}
/* המשימה נכנסת, נשארת, ונעלמת לפני הסיבוב הבא */
@keyframes mAgIn{0%,3%{opacity:0;transform:translateY(8px)}8%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
/* כל שלב: מופיע, מסתובב בתורו, ואז מסומן. ארבעה סטים של keyframes כדי שהמחזור של 14 שניות יישאר מסונכרן */
@keyframes mAgStep{0%,9%{opacity:0;transform:translateY(6px)}13%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mAgSpin0{0%,12%{opacity:0;transform:rotate(0)}13%,21%{opacity:1}22%,100%{opacity:0;transform:rotate(720deg)}}
@keyframes mAgSpin1{0%,24%{opacity:0;transform:rotate(0)}25%,33%{opacity:1}34%,100%{opacity:0;transform:rotate(720deg)}}
@keyframes mAgSpin2{0%,36%{opacity:0;transform:rotate(0)}37%,45%{opacity:1}46%,100%{opacity:0;transform:rotate(720deg)}}
@keyframes mAgSpin3{0%,48%{opacity:0;transform:rotate(0)}49%,55%{opacity:1}56%,100%{opacity:0;transform:rotate(720deg)}}
@keyframes mAgDone0{0%,22%{opacity:0;transform:scale(.4)}25%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mAgDone1{0%,34%{opacity:0;transform:scale(.4)}37%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mAgDone2{0%,46%{opacity:0;transform:scale(.4)}49%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mAgDone3{0%,56%{opacity:0;transform:scale(.4)}59%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes mAgOut{0%,60%{opacity:0;transform:translateY(12px)}66%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes mAgBtn{0%,68%{opacity:0;transform:scale(.7)}72%,93%{opacity:1;transform:none}97%,100%{opacity:0}}
/* מצב מנוחה של הסוכן (בלי is-on): השלב האחרון מחכה לאישור, ולכן הטבעת שלו לא ירוקה אלא ורודה */
.m-agm__steps li i::before{opacity:0}

/* ---------- 6. מצב בהיר ---------- */
html[data-theme="light"] .m-site__win{background:var(--tile-2,#e9e9ee)}
html[data-theme="light"] .m-site__hero .mk-ln:first-child{background:rgba(var(--fg-rgb,29,29,31),.22)}
html[data-theme="light"] .m-bak__w li{background:var(--tile-2,#e9e9ee)}
html[data-theme="light"] .m-bak__r,html[data-theme="light"] .m-agm__in,html[data-theme="light"] .m-ph__nodes span{background:var(--tile-2,#e9e9ee)}
html[data-theme="light"] .m-ph__p{background:var(--bg,#fff)}
html[data-theme="light"] .m-case__jump span{background:var(--bg,#fff)}
html[data-theme="light"] .m-case__to{background:var(--pink-fill,#D62B6E)}
html[data-theme="light"] .m-chk::after,html[data-theme="light"] .m-agm__steps i b{border-color:#0b3d1f}

/* ---------- 7. טאבלט ---------- */
@media (max-width:1000px){
  .m-panel{min-height:0;padding:var(--pad) var(--pad) 0}
  .m-card--split{flex-direction:column}
  .m-card--split .m-panel{flex:none;padding:var(--pad);padding-block-end:0}
  .m-card--split .m-card__txt{padding-block-start:18px}
  .m-doors{flex-direction:column}
  .m-door+.m-door{border-inline-start:0;border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
  .m-feat{flex-direction:column}
  .m-feat .tile__txt{flex:none;padding-block-end:0}
  .m-feat__dev{padding:clamp(20px,3vh,30px) var(--pad) 0}
  .m-cat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-ph{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-ph::before,.m-ph::after{display:none}
  .m-ag__grid{grid-template-columns:1fr}
  .m-agm{position:static}
}

/* ---------- 8. טלפון ---------- */
@media (max-width:760px){
  .m-card h3{font-size:21px}
  .m-card__txt{padding:16px var(--pad) var(--pad)}
  .m-upd,.m-site,.m-srv,.m-bak,.m-agm{padding:14px 14px 14px}
  .m-upd__l li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:10px;font-size:14px;padding-block:10px}
  .m-srv__l li{font-size:14px;padding-block:10px}
  .m-up__s{grid-template-columns:repeat(16,minmax(0,1fr))}
  .m-up__s b:nth-child(n+17){display:none}
  .m-bak__w{gap:4px}
  .m-bak__w li{padding:8px 2px 9px;font-size:12px}
  .m-door{padding:22px}
  .m-live .dv--lap{margin-inline:16px}
  .m-cat__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter,18px)*-1);padding-inline:var(--gutter,18px);padding-block:2px}
  .m-cat__tabs::-webkit-scrollbar{display:none}
  .m-cat__tab span{white-space:nowrap;padding:9px 15px;font-size:14px}
  .m-cat__grid{grid-template-columns:1fr;gap:10px}
  .m-sys{padding:20px;border-radius:var(--rl,18px)}
  .m-sys h3{font-size:20px}
  .m-ph{grid-template-columns:1fr;gap:10px}
  .m-ph__i{padding:18px 18px 20px;border-radius:var(--rl,18px)}
  .m-ph__p{min-height:0}
  .m-case__jump{margin-inline:var(--pad);gap:8px;font-size:14px}
  .m-case__jump span{padding:8px 12px}
  .m-case__jump b{font-size:22px}
  .m-ag__list li{padding:18px}
}

/* ---------- 9. תנועה מופחתת: הכול נוחת במצב הסופי ---------- */
@media (prefers-reduced-motion:reduce){
  .m-lift,.m-sys,.m-ph__i,.m-ag__list li{animation:none!important;transition:none!important}
  [class*="p-service"] .dv__scr video{transition:none}
}