/* Flowsoft hero motion v2 — Flow mascot + network band. Transform/opacity only. Generated by src/css-gen.js */
:root{--motion-fast:150ms;--motion-base:200ms;--motion-slow:250ms;--ease-out:cubic-bezier(.2,.7,.2,1);--ease-inout:cubic-bezier(.4,0,.2,1)}
.flow{--flow-d:9s;--flow-loops:2}
.flow svg{display:block;width:100%;height:auto}
html[dir="ltr"] .flow svg{transform:scaleX(-1)}
html[dir="ltr"] .flow .keep,html[dir="rtl"] .net .keep{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
html[lang="he"] [data-lang="en"],html[lang="en"] [data-lang="he"]{display:none}
/* transform pivots (SVG children need fill-box on Safari/Chromium alike) */
#flow-ticket,#flow-terminal,#flow-check,#flow-spark-1,#flow-spark-2,#flow-spark-3,#flow-arm-l,#flow-arm-r,#flow-head,#flow-eyes-open,#flow-wrench{transform-box:fill-box}
#flow-ticket,#flow-check,#flow-spark-1,#flow-spark-2,#flow-spark-3,#flow-eyes-open{transform-origin:50% 50%}
#flow-arm-l,#flow-arm-r{transform-origin:50% 0}
#flow-head{transform-origin:50% 100%}
#flow-terminal{transform-origin:0 50%}
#flow-wrench{transform-origin:50% 100%}
/* static final frame = no JS, reduced motion, or finished: idle + check */
.flow:not(.is-playing) #flow-check{opacity:1}
/* playing: one master timeline per part, 9s period (6s action + 3s rest), 2 loops then stop */
.flow.is-playing #flow-ticket{animation:flow-ticket var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-arm-r{animation:flow-arm-r var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-arm-l{animation:flow-arm-l var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-head{animation:flow-head var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-led{animation:flow-led var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-terminal{animation:flow-terminal var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-tl1{animation:flow-tl1 var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-tl2{animation:flow-tl2 var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-tl3{animation:flow-tl3 var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-cursor{animation:flow-cursor var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-wrench{animation:flow-wrench var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-check{animation:flow-check var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-eyes-open{animation:flow-blink var(--flow-d) linear var(--flow-loops) both,flow-eyes-open var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-eyes-happy{animation:flow-eyes-happy var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-spark-1{animation:flow-spark var(--flow-d) linear var(--flow-loops) both}
.flow.is-playing #flow-spark-2{animation:flow-spark var(--flow-d) linear var(--flow-loops) both;animation-delay:.08s}
.flow.is-playing #flow-spark-3{animation:flow-spark var(--flow-d) linear var(--flow-loops) both;animation-delay:.16s}
/* will-change only while playing */
.flow.is-playing #flow-ticket,.flow.is-playing #flow-arm-r,.flow.is-playing #flow-arm-l,.flow.is-playing #flow-check,.flow.is-playing #flow-head{will-change:transform,opacity}
/* pause: user pause, off-screen, hidden tab */
.flow.is-paused *,.flow.is-halted *{animation-play-state:paused!important}
/* tap / click wave (only when idle or done) */
.flow.is-waving:not(.is-playing) #flow-arm-r{animation:flow-wave .9s linear 1 both}
/* end of loop 2: the check was faded by the master timeline, so fade it back in (opacity only) instead of popping */
.flow.is-done #flow-check{animation:flow-check-in var(--motion-slow) var(--ease-out) 1 both}
@media (hover:hover) and (pointer:fine){
  .flow:not(.is-playing) #flow-head{transition:transform var(--motion-base) var(--ease-out)}
  .flow:not(.is-playing):hover #flow-head{transform:rotate(-3deg)}
}
/* reduced motion: nothing runs unless the visitor opts in with the visible Play button (adds .is-optin) */
@media (prefers-reduced-motion:reduce){.flow:not(.is-optin) *{animation:none!important;transition:none!important}}
/* play / pause toggle */
.flow-toggle{font:600 13px/1 Inter,Heebo,sans-serif;color:#0B1F3A;background:#E6F7F9;border:1.5px solid #2BB3C0;border-radius:99px;padding:8px 14px;cursor:pointer;min-height:44px}
.flow-toggle:focus-visible{outline:3px solid #177C87;outline-offset:2px}
@keyframes flow-ticket{
  0%{transform:translate(220px,-8px) scale(1);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  6.67%{transform:translate(220px,-8px) scale(1);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  13.33%{transform:translate(0px,0px) scale(1);opacity:1}
  15.56%{transform:translate(0px,0px) scale(1);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  22.22%{transform:translate(-47px,104px) scale(0.62);opacity:1;animation-timing-function:cubic-bezier(.4,0,1,1)}
  26.67%{transform:translate(-40px,112px) scale(0.4);opacity:0}
  100%{transform:translate(-40px,112px) scale(0.4);opacity:0}
}
@keyframes flow-arm-r{
  0%{transform:rotate(0deg)}
  15.56%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  22.22%{transform:rotate(-78deg)}
  28.89%{transform:rotate(-78deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  31.11%{transform:rotate(-70deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  33.33%{transform:rotate(-86deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  35.56%{transform:rotate(-70deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  37.78%{transform:rotate(-86deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  40%{transform:rotate(-76deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  42.22%{transform:rotate(-78deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  46.67%{transform:rotate(-150deg)}
  51.11%{transform:rotate(-150deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  57.78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes flow-arm-l{
  0%{transform:rotate(0deg)}
  42.22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  46.67%{transform:rotate(150deg)}
  51.11%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  57.78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes flow-head{
  0%{transform:rotate(0deg)}
  42.22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  46.67%{transform:rotate(-4deg)}
  51.11%{transform:rotate(-4deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  57.78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes flow-blink{
  0%{transform:scaleY(1)}
  3.33%{transform:scaleY(1)}
  4%{transform:scaleY(.1)}
  5.11%{transform:scaleY(1)}
  61.11%{transform:scaleY(1)}
  61.78%{transform:scaleY(.1)}
  62.89%{transform:scaleY(1)}
  100%{transform:scaleY(1)}
}
@keyframes flow-eyes-open{
  0%{opacity:1}
  43.89%{opacity:1}
  45%{opacity:0}
  55.56%{opacity:0}
  57.22%{opacity:1}
  100%{opacity:1}
}
@keyframes flow-eyes-happy{
  0%{opacity:0}
  43.89%{opacity:0}
  45%{opacity:1}
  55.56%{opacity:1}
  57.22%{opacity:0}
  100%{opacity:0}
}
@keyframes flow-led{
  0%{opacity:1}
  26.67%{opacity:1}
  30%{opacity:.45}
  33.33%{opacity:1}
  36.67%{opacity:.45}
  40%{opacity:1}
  100%{opacity:1}
}
@keyframes flow-terminal{
  0%{transform:scale(.92);opacity:0}
  26.67%{transform:scale(.92);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  30%{transform:scale(1);opacity:1}
  41.11%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  44.44%{transform:scale(.96);opacity:0}
  100%{transform:scale(.96);opacity:0}
}
@keyframes flow-tl1{
  0%{opacity:0}
  30%{opacity:0}
  31.11%{opacity:1}
  100%{opacity:1}
}
@keyframes flow-tl2{
  0%{opacity:0}
  32.78%{opacity:0}
  33.89%{opacity:1}
  100%{opacity:1}
}
@keyframes flow-tl3{
  0%{opacity:0}
  35.56%{opacity:0}
  36.67%{opacity:1}
  100%{opacity:1}
}
@keyframes flow-cursor{
  0%{opacity:0}
  30%{opacity:1}
  32.78%{opacity:0}
  35.56%{opacity:1}
  38.33%{opacity:0}
  41.11%{opacity:1}
  44.44%{opacity:0}
  100%{opacity:0}
}
@keyframes flow-wrench{
  0%{opacity:0;transform:rotate(0deg)}
  28.89%{opacity:0;transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  30%{opacity:1;transform:rotate(-14deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  32.78%{opacity:1;transform:rotate(14deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  35.56%{opacity:1;transform:rotate(-14deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38.33%{opacity:1;transform:rotate(14deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  41.11%{opacity:1;transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  44.44%{opacity:0;transform:rotate(0deg)}
  100%{opacity:0;transform:rotate(0deg)}
}
@keyframes flow-check{
  0%{transform:scale(0);opacity:0}
  42.22%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}
  45%{transform:scale(1.14);opacity:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  47.78%{transform:scale(1);opacity:1}
  92.22%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  96.67%{transform:scale(.9);opacity:0}
  100%{transform:scale(.9);opacity:0}
}
@keyframes flow-spark{
  0%{transform:scale(0);opacity:0}
  44.44%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  47.22%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  53.33%{transform:scale(.5);opacity:0}
  100%{transform:scale(.5);opacity:0}
}
@keyframes flow-wave{
  0%{transform:rotate(0deg)}22%{transform:rotate(-145deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  38%{transform:rotate(-125deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}54%{transform:rotate(-150deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  70%{transform:rotate(-125deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}100%{transform:rotate(0deg)}
}
@keyframes flow-check-in{from{opacity:0}to{opacity:1}}
@keyframes net-ring{from{transform:scale(1);opacity:.55}to{transform:scale(1.9);opacity:0}}

/* ---------- Network band (D) ---------- */
.net-band{position:sticky;top:var(--nav-h,64px);z-index:5;background:#0B1F3A;padding:12px 16px 10px}
.net-wrap{max-width:960px;margin-inline:auto}
.net-wrap svg{display:block;width:100%;height:auto}
html[dir="rtl"] .net-wrap svg{transform:scaleX(-1)}
.net-labels{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);width:75%;margin:0;margin-inline-start:14.375%;padding:0;font:600 13px/1.3 Heebo,Inter,sans-serif;text-align:center}
.net-labels li{color:#C6D2E1;transition:color var(--motion-base) var(--ease-out)}
.net-labels li.is-on{color:#fff}
.net-labels li.is-now{color:#2BB3C0}
.net .halo,.net .ring,.net .on,.net .gl-on,.net .gl-off{transform-box:fill-box;transform-origin:center}
.net .halo{opacity:.22}.net .ring{opacity:0}.net .on,.net .gl-on{opacity:1}.net .gl-off{opacity:0}
#net-progress{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(var(--p,1))}
/* JS adds .net--live: unlit by default, lit via .is-lit toggled from IntersectionObserver */
.net--live .halo{opacity:0;transform:scale(.6)}
.net--live .on,.net--live .gl-on{opacity:0}
.net--live .gl-off{opacity:1}
.net--live .is-lit .halo{opacity:.22;transform:scale(1)}
.net--live .is-lit .on,.net--live .is-lit .gl-on{opacity:1}
.net--live .is-lit .gl-off{opacity:0}
.net--live .halo,.net--live .on,.net--live .gl-on,.net--live .gl-off{transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
.net--live .is-lit .ring{animation:net-ring 600ms var(--ease-out) 1 both}
.net--live #net-progress{transform:scaleX(var(--p,0));transition:transform 120ms linear}
@media (max-width:600px){.net-labels{font-size:11px}#net-hub{display:none}}
@media (prefers-reduced-motion:reduce){.net *{transition:none!important;animation:none!important}}