/* =========================================================
   CK Digital 360, מודול "אוטומציה שנבנית מול העיניים" (partials/_flow.html, js/flow.js).
   נטען דרך css_late, אחרי שכבת הנושא. רק משתנים, עם ערך גיבוי לכל אחד.
   הסקשן הוא אי כהה (on-dark) ולכן נשאר כהה גם במצב הבהיר.
   תנועה רק ב-transform וב-opacity:
     הלוח: rotateX לפי הגלילה (המשתנה --tilt נכתב מ-flow.js)
     צומת: נוחת מלמעלה (translate3d + scale + opacity)
     קו: scaleX מנקודת ההתחלה
     פולס: translateX לאורך הקו (המשתנה --len נכתב מ-flow.js), עם opacity בקצוות
   ========================================================= */

.hx-flow{background:var(--bg,#000);color:var(--text,#f5f5f7);overflow:clip}

/* ---------- רכיבי הבסיס של דף הבית, משוכפלים כאן בהיקף המודול בלבד,
   כדי שהסקשן יעבוד גם בעמוד שלא טוען את home2.css ---------- */
.hx-flow.hx-sec{position:relative;padding-block:var(--sec,clamp(88px,13vh,170px))}
.hx-flow .hx-head{display:grid;gap:16px;max-width:860px;margin-block-end:clamp(26px,4vh,40px)}
.hx-flow .hx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--grey,#86868b)}
.hx-flow .hx-dot{width:7px;height:7px;border-radius:50%;background:var(--pink,#E7357A)}
.hx-flow .hx-h2{font-size:clamp(34px,4.6vw,70px);font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;color:var(--text,#f5f5f7)}
.hx-flow .hx-h2 span{display:block;color:var(--grey,#86868b)}
.hx-flow .hx-lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;letter-spacing:-.01em;color:var(--text-2,#a1a1a6);max-width:58ch;text-wrap:pretty}
.hx-flow .hx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hx-flow .hx-tab{padding:9px 18px;border-radius:999px;font-size:15px;color:var(--text-2,#a1a1a6);background:var(--tile,#1d1d1f);transition:background-color .3s var(--ease),color .3s var(--ease)}
.hx-flow .hx-tab:hover{color:var(--text,#f5f5f7)}
.hx-flow .hx-tab[aria-pressed="true"]{background:var(--text,#f5f5f7);color:var(--bg,#000);font-weight:500}
.hx-flow .hx-go{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:500;color:var(--pink-ink,#F0508F);padding-block:6px;transition:gap .4s var(--ease)}
.hx-flow .hx-go svg{width:18px;height:18px;flex:none}
.hx-flow .hx-go:hover{gap:13px}
.hx-flow .hx-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-block-start:clamp(18px,3vh,28px)}

/* ---------- טאבים ---------- */
.hx-flow__tabs{justify-content:flex-start;margin-block-end:clamp(22px,3.4vh,34px)}

/* ---------- הבמה והלוח ---------- */
.hx-flow__scene{--tmax:13;--tilt:0deg;perspective:1500px;perspective-origin:50% 30%;padding-block:clamp(10px,2vh,24px)}
.hx-flow__board{position:relative;padding:clamp(20px,3vw,44px);border-radius:var(--r-l,28px);
  background:var(--tile-2,#161617);
  background-image:radial-gradient(rgba(var(--fg-rgb,245,245,247),.055) 1px,transparent 1.3px);background-size:22px 22px;background-position:11px 11px;
  box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12)),var(--shadow,0 40px 90px -40px rgba(0,0,0,.9));
  transform:rotateX(var(--tilt));transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform}
.hx-flow__graph{position:relative;transform-style:preserve-3d}
.hx-flow__graph[hidden]{display:none}
.hx-flow__nodes{position:relative;display:grid;list-style:none;margin:0;padding:0;transform-style:preserve-3d;
  column-gap:clamp(44px,6vw,110px);row-gap:22px;grid-auto-rows:minmax(118px,auto)}
.hx-flow__graph--lead .hx-flow__nodes{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"form notion wa me" "form mail wa me"}
.hx-flow__graph--seo .hx-flow__nodes{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(84px,auto);row-gap:14px;grid-template-areas:"grp . . ." "research posts ok live" "write posts ok live" "check posts ok live"}
.hx-flow__graph--cart .hx-flow__nodes{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:46px;grid-template-areas:"cart wait msg" "crm order coupon"}

/* ---------- צומת ---------- */
.hx-flow__node{position:relative;z-index:1;align-self:center;display:grid;align-content:center;gap:5px;min-height:118px;padding:20px 22px;border-radius:18px;
  background:var(--tile,#1d1d1f);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12));color:var(--text,#f5f5f7)}
.hx-flow__node::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 26px 40px -18px rgba(0,0,0,.85);opacity:0;transition:opacity .8s var(--ease)}
.hx-flow__node--s{min-height:84px;padding:14px 16px}
.hx-flow__n{position:absolute;inset-block-start:14px;inset-inline-end:16px;font-size:12px;font-weight:500;color:var(--grey,#86868b);font-feature-settings:"tnum" 1}
.hx-flow__k{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--grey,#86868b);letter-spacing:-.005em}
.hx-flow__k i{display:none;width:8px;height:8px;border-radius:50%;background:var(--pink,#E7357A);transform:scale(0);transition:transform .5s var(--ease-b,cubic-bezier(.28,.11,.32,1)) .35s}
.hx-flow__node--me .hx-flow__k i{display:inline-block}
.hx-flow__node--me .hx-flow__k{color:var(--pink-ink,#F0508F)}
.hx-flow__t{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.hx-flow__d{display:block;font-size:15px;line-height:1.4;color:var(--text-2,#a1a1a6);text-wrap:pretty}
.hx-flow__grp{align-self:end;padding-inline:4px;font-size:13.5px;font-weight:600;color:var(--grey,#86868b);line-height:1.3}
.hx-flow__grp span{display:inline-block;padding-block-end:8px;border-block-end:1px solid var(--hair,rgba(245,245,247,.12))}

/* ---------- קווים ופולסים (ממוקמים על ידי flow.js) ---------- */
.hx-flow__wires{position:absolute;inset:0;z-index:0;direction:ltr;pointer-events:none}
/* שכבת הקווים היא LTR ולכן כאן מיקום פיזי (left/top), ו-flow.js כותב left, top, width, --ang, --len ו---pd */
.hx-flow__wire{position:absolute;left:0;top:0;height:2px;margin-top:-1px;transform-origin:0 50%;transform:rotate(var(--ang,0deg))}
.hx-flow__line{position:absolute;inset:0;border-radius:2px;background:rgba(var(--fg-rgb,245,245,247),.2);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.hx-flow__pulse{position:absolute;top:-2px;left:0;width:30px;height:6px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,rgba(var(--fg-rgb,245,245,247),0),var(--text,#f5f5f7))}
.hx-flow__pulse::after{content:"";position:absolute;right:-1px;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--text,#f5f5f7)}
@keyframes hx-flow-pulse{
  0%{transform:translateX(0);opacity:0}
  3%{opacity:1}
  25%{opacity:1}
  28%{transform:translateX(var(--len,0px));opacity:0}
  100%{transform:translateX(var(--len,0px));opacity:0}
}

/* ---------- מצבי הבנייה (flow.js מוסיף את המחלקות) ---------- */
.js .hx-flow__node{opacity:0;transform:translate3d(0,-16px,90px) scale(1.02);transition:opacity .45s var(--ease),transform .85s var(--ease-b,cubic-bezier(.28,.11,.32,1))}
.js .hx-flow__grp{opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hx-flow__node.is-on,.hx-flow__grp.is-on{opacity:1;transform:none}
.hx-flow__node.is-on::after{opacity:1}
.hx-flow__node.is-on .hx-flow__k i{transform:scale(1)}
.hx-flow__wire.is-drawn .hx-flow__line{transform:none}
.hx-flow__wire.is-run .hx-flow__pulse{animation:hx-flow-pulse 4.4s linear 1}
.hx-flow__graph.is-live .hx-flow__wire .hx-flow__pulse{animation:hx-flow-pulse 4.4s linear var(--pd,0s) infinite}
.still .hx-flow__pulse{animation-play-state:paused}
/* פריים האפס לפני הרצה (גם הרצה חוזרת): בלי מעברים, כדי שהכול יתחיל באמת מאפס */
.hx-flow__graph.is-reset *{transition:none!important;animation:none!important}
/* מצב סופי בלי תנועה: תנועה מופחתת, או דפדפן בלי IntersectionObserver */
.hx-flow__graph.is-done .hx-flow__node,.hx-flow__graph.is-done .hx-flow__grp{opacity:1;transform:none;transition:none}
.hx-flow__graph.is-done .hx-flow__node::after{opacity:1}
.hx-flow__graph.is-done .hx-flow__node .hx-flow__k i{transform:scale(1)}
.hx-flow__graph.is-done .hx-flow__line{transform:none;transition:none}
.hx-flow__graph.is-done .hx-flow__pulse{animation:none;opacity:0}

/* ---------- מתחת ללוח ---------- */
.hx-flow__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-block-start:clamp(18px,3vh,28px)}
.hx-flow__legend{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:1.4;color:var(--text-2,#a1a1a6)}
.hx-flow__legend i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink,#E7357A)}
.hx-flow__again{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--text,#f5f5f7);
  box-shadow:inset 0 0 0 1px var(--hair-2,rgba(245,245,247,.2));transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.hx-flow__again:hover{background:rgba(var(--fg-rgb,245,245,247),.08);box-shadow:inset 0 0 0 1px var(--text,#f5f5f7)}
.hx-flow__again svg{width:16px;height:16px}

/* ---------- טאבלט ---------- */
@media (max-width:1060px){
  .hx-flow__nodes{column-gap:clamp(34px,5vw,64px)}
  .hx-flow__t{font-size:17.5px}
  .hx-flow__d{font-size:14px}
}

/* ---------- מובייל: הזרימה אנכית ---------- */
@media (max-width:760px){
  .hx-flow.hx-sec{padding-block:clamp(64px,10vh,96px)}
  .hx-flow .hx-h2 span{display:inline}
  .hx-flow__tabs{margin-inline:calc(-1*var(--gutter,18px));padding-inline:var(--gutter,18px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hx-flow__tabs::-webkit-scrollbar{display:none}
  .hx-flow__tabs .hx-tab{flex:none}
  .hx-flow__scene{--tmax:7;perspective:1100px;perspective-origin:50% 40%;padding-block:8px}
  .hx-flow__board{padding:18px 16px;border-radius:24px}
  .hx-flow__nodes{column-gap:12px;row-gap:46px;grid-auto-rows:auto}
  .hx-flow__graph--lead .hx-flow__nodes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"form form" "notion mail" "wa wa" "me me"}
  .hx-flow__graph--cart .hx-flow__nodes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"cart wait" "msg coupon" "order order" "crm crm"}
  .hx-flow__graph--seo .hx-flow__nodes{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:auto;row-gap:46px;grid-template-areas:"grp grp grp" "research write check" "posts posts posts" "ok ok ok" "live live live"}
  .hx-flow__grp{margin-block-end:-30px}
  .hx-flow__node{min-height:0;padding:16px 16px 17px;border-radius:16px;gap:3px}
  .hx-flow__node--s{padding:14px 12px}
  .hx-flow__node--s .hx-flow__n{display:none}
  .hx-flow__node--s .hx-flow__k{font-size:12px}
  .hx-flow__n{inset-block-start:12px;inset-inline-end:14px}
  .hx-flow__t{font-size:17px}
  .hx-flow__d{font-size:14px}
  .hx-flow__foot{gap:14px}
  .hx-flow__again{width:100%;justify-content:center;min-height:46px}
}

/* ---------- תנועה מופחתת: המצב הסופי בלי תנועה, והלוח ישר ---------- */
@media (prefers-reduced-motion:reduce){
  .hx-flow__board{transform:none;transition:none;will-change:auto}
  .js .hx-flow__node,.js .hx-flow__grp{opacity:1;transform:none;transition:none}
  .hx-flow__node::after{opacity:1;transition:none}
  .hx-flow__node .hx-flow__k i{transform:scale(1);transition:none}
  .hx-flow__line{transform:none;transition:none}
  .hx-flow__pulse,.hx-flow__wire.is-run .hx-flow__pulse,.hx-flow__graph.is-live .hx-flow__wire .hx-flow__pulse{animation:none;opacity:0}
  .hx-flow .hx-go,.hx-flow .hx-tab,.hx-flow__again{transition:none}
  .hx-flow__again{display:none}
}

/* מה אפשר לבנות: שש מערכות, רשת אריחים קטנה מתחת ללוח */
.hx-flow__uses{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hx-flow__uses li{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r-l,22px);background:var(--tile,#1d1d1f);box-shadow:inset 0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.hx-flow__uses b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.hx-flow__uses span{font-size:14.5px;line-height:1.45;color:var(--text-2,#a1a1a6)}
@media (max-width:1060px){.hx-flow__uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hx-flow__uses{grid-template-columns:1fr;gap:10px;margin-block-start:24px}.hx-flow__uses li{padding:16px 18px}}