/* =====================================================================
   BOMBEDIG - brand site
   מורכבות חכמה. פשטות מנצחת.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* brand palette, sampled strictly off BOMBEDIG logo: #242021 (ink) & #f06023 (gear) */
  --bg:#fcfbf9;                   /* luminous warm white base */
  --bg-alt:#f5f3ef;               /* warm neutral section background */
  --bg-deep:#edeae3;              /* elevated neutral contrast */
  --card:#ffffff;
  --line:rgba(36,32,33,.10);
  --line-soft:rgba(36,32,33,.06);
  --line-strong:rgba(36,32,33,.18);
  --accent:#f06023;               /* BOMBEDIG logo gear orange */
  --accent-hover:#ff7033;
  --accent-dim:#d44a10;
  --accent-soft:rgba(240,96,35,.09);
  --accent-glow:rgba(240,96,35,.32);
  --accent-gradient:linear-gradient(135deg, #ff7133 0%, #f06023 55%, #d84b0e 100%);
  --text:#242021;                 /* brand graphite / ink */
  --text-soft:#4a4345;
  --muted:#665e5b;
  --muted-dim:#998f8c;
  --shadow-sm:0 2px 8px rgba(36,32,33,.04),0 1px 3px rgba(36,32,33,.03);
  --shadow-md:0 8px 24px -4px rgba(36,32,33,.08),0 2px 8px -2px rgba(36,32,33,.04);
  --shadow-lg:0 18px 40px -8px rgba(36,32,33,.12),0 6px 16px -3px rgba(36,32,33,.05);
  --shadow-xl:0 30px 70px -12px rgba(36,32,33,.16),0 12px 28px -5px rgba(36,32,33,.08);
  --shadow:var(--shadow-md);

  /* the "heavy system / manager command center" surfaces */
  --tech:#13151a;
  --tech-2:#1a1d24;
  --tech-card:#21252f;
  --tech-line:rgba(255,255,255,.09);
  --tech-line-strong:rgba(255,255,255,.18);
  --tech-bar:#363c4a;
  --tech-text:#f2f4f8;
  --tech-muted:#8e96a8;

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:9999px;
  --cut:16px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --fast:.22s var(--ease);
  --slow:.65s var(--ease);

  --pad:clamp(20px,5vw,64px);
  --max:1240px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
section,footer{scroll-margin-top:84px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Heebo','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;
  overflow-x:hidden;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html[dir="ltr"] body{text-align:left}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:700}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{
  position:fixed;top:-100px;inset-inline-end:20px;z-index:200;
  background:var(--accent);color:#fff;padding:12px 24px;font-weight:700;
  border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);
  transition:top var(--fast);
}
.skip:focus{top:16px}

/* ---------- shared ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding:clamp(84px,12vh,144px) 0;position:relative}
.concept.section{padding:clamp(60px,8vh,96px) 0 clamp(54px,7vh,80px)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:700;
  color:var(--accent);margin-bottom:18px;
  padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--accent-soft);border:1px solid rgba(240,96,35,.2);
  width:fit-content;letter-spacing:normal;
}
.kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(240,96,35,.25);
}
.kicker::after{display:none}

.h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;margin-bottom:20px;letter-spacing:-.025em}
.h3{font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:700;margin-bottom:10px}
.lead{color:var(--muted);max-width:64ch;font-size:clamp(1.02rem,1.38vw,1.18rem);line-height:1.75}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-weight:700;font-size:1.02rem;
  color:#fff;background:var(--accent-gradient);
  border-radius:var(--radius-md);
  box-shadow:0 6px 20px rgba(240,96,35,.32),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast),filter var(--fast);
  will-change:transform;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 60%);
  opacity:0;transition:opacity var(--fast);
}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(240,96,35,.42),0 2px 6px rgba(240,96,35,.2),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active{transform:translateY(1px) scale(.99);box-shadow:0 4px 12px rgba(240,96,35,.3)}
.btn__arrow{
  font-weight:900;display:inline-block;
  transition:transform var(--fast);
}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(-5px)}
.btn--sm{padding:10px 22px;font-size:.9rem;border-radius:var(--radius-sm)}
.btn--lg{padding:18px 44px;font-size:1.15rem;border-radius:var(--radius-lg)}
.btn--ghost{
  background:rgba(255,255,255,.8);color:var(--text);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
}
.btn--ghost::before{background:rgba(240,96,35,.05)}
.btn--ghost:hover,.btn--ghost:focus-visible{
  border-color:var(--accent);color:var(--accent);background:#ffffff;
  box-shadow:0 8px 22px rgba(36,32,33,.08),0 0 0 1px var(--accent);
}

/* ---------- logo ---------- */
.logo{height:auto;width:auto}
.logo--sm{height:26px}
.logo--hero{width:min(78vw,620px);height:auto;overflow:visible}
.logo__ink{fill:var(--text)}
.logo__gear{
  fill:var(--accent);
  transform-box:fill-box;transform-origin:center;
  /* rotation itself is driven from script.js */
}
.nav__logo{display:flex;align-items:center;transition:opacity var(--fast)}
.nav__logo:hover,.nav__logo:focus-visible{opacity:.72}

/* ---------- boot overlay ---------- */
.boot{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s ease;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__stack{display:grid;gap:10px;justify-items:start}
.boot__line{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  direction:ltr;display:flex;align-items:center;gap:8px;
  font-size:clamp(.85rem,2.4vw,1.1rem);color:var(--muted);
}
.boot__line.is-he{direction:rtl}
.boot__prompt{color:var(--accent);font-weight:700}
.boot__caret{width:9px;height:1.05em;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- custom cursor: brand diamond (45° cut), no dot ---------- */
.cursor{position:fixed;inset:0;z-index:250;pointer-events:none;display:none}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;will-change:transform}
/* the "dot" slot is a diamond — echoes the site's engineered cuts */
.cursor__dot{
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  background:var(--accent);
  transform:rotate(45deg);
  box-shadow:0 0 0 1.5px rgba(253,245,242,.92);
  transition:width .18s var(--ease),height .18s var(--ease),margin .18s var(--ease),
             background .18s var(--ease),box-shadow .18s var(--ease);
}
.cursor__ring{
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border:1.5px solid rgba(240,96,35,.35);
  transform:rotate(45deg);
  opacity:0;
  transition:width .18s var(--ease),height .18s var(--ease),margin .18s var(--ease),
             opacity .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.cursor.is-hot .cursor__dot{
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:#fff;
  box-shadow:0 0 0 2px var(--accent);
}
.cursor.is-hot .cursor__ring{
  opacity:1;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border-color:var(--accent);
  background:rgba(240,96,35,.08);
}
.cursor.is-down .cursor__dot{
  width:8px;height:8px;margin:-4px 0 0 -4px;
}
.cursor.is-down .cursor__ring{
  width:22px;height:22px;margin:-11px 0 0 -11px;
  opacity:1;background:rgba(240,96,35,.14);
}
body.has-cursor,body.has-cursor *{cursor:none!important}
@media (pointer:fine){.cursor{display:block}}
@media (prefers-reduced-motion:reduce){
  .cursor{display:none!important}
  body.has-cursor,body.has-cursor *{cursor:auto!important}
}

/* ---------- scroll cog: a third of the gear peeks from the bottom-right corner ----------
   wide-only breakpoint so it stays in the gutter and does not cover the copy */
.cog{
  --size:clamp(280px,21vw,440px);
  position:fixed;right:0;bottom:0;
  width:var(--size);height:var(--size);
  transform:translate(36%,36%);
  z-index:90;display:none;pointer-events:none;
}
@media (min-width:1280px){.cog{display:block}}
.cog__wheel,.cog__ring{position:absolute;inset:0;width:100%;height:100%}
.cog__wheel{
  opacity:.17;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity var(--slow);
  will-change:transform;
}
.cog__ring{overflow:visible;fill:none}
.cog__track{stroke:var(--line);stroke-width:1}
.cog__arc{
  stroke:var(--accent);stroke-width:2.5;stroke-linecap:butt;
  stroke-dasharray:0 100;
  transition:stroke-dasharray .12s linear;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease,box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(252,251,249,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px rgba(36,32,33,.04);
}
.nav__inner{
  max-width:var(--max);margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav__logo{
  opacity:1;transition:opacity .25s ease,transform .25s ease;
  margin-inline-end:auto;display:flex;align-items:center;
}
.nav__logo:hover{opacity:.8;transform:scale(1.02)}
.nav__menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}
.lang{
  display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px;
  background:rgba(255,255,255,.7);box-shadow:var(--shadow-xs);
}
.lang__btn{
  min-width:34px;height:28px;padding:0 10px;border-radius:var(--radius-pill);
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:var(--muted);transition:background var(--fast),color var(--fast),box-shadow var(--fast);
}
.lang__btn:hover,.lang__btn:focus-visible{color:var(--text)}
.lang__btn.is-active{background:var(--text);color:#fff;box-shadow:0 2px 6px rgba(36,32,33,.2)}
.nav .lang{flex:0 0 auto;margin-inline-end:4px}
.nav__links{display:flex;align-items:center;gap:clamp(4px,1vw,10px)}
.nav__links a{
  position:relative;font-size:.9rem;font-weight:500;color:var(--muted);
  padding:7px 13px;border-radius:var(--radius-pill);
  white-space:nowrap;transition:color var(--fast),background var(--fast),transform var(--fast);
}
.nav__links a:hover,.nav__links a:focus-visible{
  color:var(--text);background:rgba(36,32,33,.04);
}
.nav__links a.is-active{
  color:var(--accent);font-weight:700;background:var(--accent-soft);
}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--text);transition:transform var(--fast),opacity var(--fast)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100dvh;display:grid;place-items:center;
  padding:clamp(120px,16vh,154px) var(--pad) clamp(60px,8vh,90px);
  overflow:hidden;text-align:center;
  border-bottom:1px solid var(--line-soft);
  background:radial-gradient(ellipse 90% 70% at 50% -10%, rgba(240,96,35,.07) 0%, transparent 70%);
}
.hero__grid,.hero__glow{pointer-events:none}
.hero__grid{
  position:absolute;inset:-20% -10%;
  background-image:
    linear-gradient(rgba(36,32,33,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,32,33,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 75%);
  will-change:transform;
}
.hero__glow{
  position:absolute;left:50%;top:38%;width:min(900px,110vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(240,96,35,.15) 0%,rgba(240,96,35,.04) 45%,transparent 68%);
  filter:blur(36px);
  will-change:transform;
}
/* no z-index here on purpose: the grid and the glow come earlier in the markup,
   so the copy already paints above them, and the mark below can outrank the nav */
.hero__content{position:relative;max-width:940px;display:grid;justify-items:center;gap:0}
.hero__content>*{text-align:center}

.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(240,96,35,.24);
  box-shadow:0 4px 14px rgba(36,32,33,.04);
  font-size:.82rem;font-weight:600;color:var(--text);
  margin-bottom:26px;backdrop-filter:blur(10px);
}
.hero__badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(240,96,35,.5);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(240,96,35,.6)}
  70%{box-shadow:0 0 0 7px rgba(240,96,35,0)}
  100%{box-shadow:0 0 0 0 rgba(240,96,35,0)}
}

/* the mark flies up and lands on the header logo, so it has to pass over the bar,
   and it must never sit in front of anything clickable */
#heroLogo{
  position:relative;z-index:101;
  will-change:transform,opacity;pointer-events:none;
  filter:drop-shadow(0 10px 24px rgba(36,32,33,.06));
}
.hero__slogan{
  margin-top:16px;color:var(--accent);letter-spacing:normal;
  font-size:clamp(.92rem,1.8vw,1.15rem);
  font-weight:700;
}
.hero__title{
  margin-top:clamp(22px,4vh,38px);
  font-size:clamp(2.1rem,5.6vw,4rem);
  font-weight:900;line-height:1.14;letter-spacing:-.03em;
  color:var(--text);
}
.hero__sub{
  margin-top:22px;max-width:64ch;color:var(--muted);
  font-size:clamp(1.05rem,1.45vw,1.22rem);line-height:1.75;
}
.hero__sub strong{color:var(--text);font-weight:700;display:inline-block;margin-top:4px}
.hero__actions{margin-top:clamp(32px,5vh,48px);display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.hero__proof{
  margin-top:clamp(36px,5.5vh,52px);
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,24px);padding:10px 22px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.8);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);
  flex-wrap:wrap;
}
.hero__proof-item{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:600;color:var(--muted);
}
.hero__proof-icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);line-height:1;
}
.hero__proof-icon svg{
  width:14px;height:14px;stroke:var(--accent);display:block;
}
.hero__proof-divider{
  width:1px;height:16px;background:var(--line);
}
@media (max-width:680px){
  .hero__proof-divider{display:none}
  .hero__proof{border-radius:var(--radius-lg);gap:10px;justify-content:center}
}

/* ---------- flow connectors ---------- */
.flow{height:72px;display:grid;place-items:center;pointer-events:none}
.flow svg{width:40px;height:72px;overflow:visible}
.flow__path{fill:none;stroke:var(--line);stroke-width:1.5}
.flow__dot{fill:var(--accent);opacity:0}

/* ---------- concept / iceberg ---------- */
.iceberg{margin:clamp(20px,3vh,36px) 0 0;height:auto;position:relative}
.iceberg__viewport{
  position:relative;
  display:grid;justify-items:center;
  padding:16px 0 20px;
  overflow:hidden;
}
#icebergCanvas{width:100%;height:100%;position:absolute;inset:0}
.iceberg__labels{position:absolute;inset:0;pointer-events:none}
.iceberg__label{
  position:absolute;font-size:clamp(.68rem,1.5vw,.82rem);letter-spacing:.14em;
  color:var(--muted-dim);
}
.iceberg__label--a{right:var(--pad);top:12%}
.iceberg__label--b{left:var(--pad);bottom:18%;color:var(--accent)}
.ice-stage{
  position:relative;z-index:1;width:min(62vw,620px);
  display:grid;gap:clamp(36px,5.5vh,56px);
}
/* the interface that the network resolves into */
.ice-ui{
  width:100%;
  background:#ffffff;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:0 30px 80px -12px rgba(36,32,33,.16), 0 0 0 1px var(--line-soft);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  overflow:hidden;
}
.ice-ui__bar{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  background:var(--bg-alt);border-bottom:1px solid var(--line);
}
.ice-ui__dot{width:10px;height:10px;border-radius:50%;background:rgba(36,32,33,.2)}
.ice-ui__dot:first-child{background:#ff5f56}
.ice-ui__dot:nth-child(2){background:#ffbd2e}
.ice-ui__dot:nth-child(3){background:#27c93f}
.ice-ui__name{
  margin-inline-start:auto;direction:ltr;
  font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;
  font-size:.72rem;font-weight:600;color:var(--muted);
}
.ice-ui .emp{
  max-width:none;                 /* it is the window here, so it fills it */
  transform:translateY(10px);transition:transform .5s var(--ease);
}
.iceberg.is-converged .ice-ui .emp{transform:none}

/* ---------- the employee screen ----------
   One real task, already framed by the system. The "נעשה לפני שהמסך נפתח"
   strip is the point of the whole component: the work happened, it just
   never reached him. */
.emp{
  width:100%;max-width:540px;display:grid;gap:clamp(12px,1.6vw,18px);
  padding:clamp(18px,2.6vw,28px);text-align:right;background:#ffffff;
}
.emp__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.emp__live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;color:var(--accent);
}
/* the incoming-call ping: line art, because the canvas network draws this exact
   circle before the screen itself appears */
.emp__ping{
  position:relative;flex:0 0 24px;width:24px;height:24px;
  border:1.5px solid var(--accent);border-radius:50%;
}
.emp__ping::before,.emp__ping::after{content:"";position:absolute;inset:0;margin:auto;border-radius:50%}
.emp__ping::before{
  width:100%;height:100%;border:1px solid var(--accent);
  animation:ping 2.4s var(--ease) infinite;
}
.emp__ping::after{
  width:6px;height:6px;background:var(--accent);
  animation:beat 1.8s ease-in-out infinite;
}
@keyframes beat{50%{opacity:.2}}
@keyframes ping{
  0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(1.9);opacity:0}
}
.emp__clock{
  font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;font-size:.75rem;font-weight:600;
  color:var(--muted-dim);font-variant-numeric:tabular-nums;direction:ltr;
}
.emp__who{display:flex;align-items:center;gap:14px;min-width:0}
.emp__ava{
  flex:0 0 clamp(40px,4.2vw,48px);height:clamp(40px,4.2vw,48px);
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-weight:900;font-size:1.15rem;
  border-radius:var(--radius-md);border:1px solid rgba(240,96,35,.2);
}
.emp__id{display:grid;gap:2px;min-width:0}
.emp__id b{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;line-height:1.22;color:var(--text)}
.emp__id>span{font-size:.78rem;color:var(--muted);line-height:1.45}
.emp__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;
}
.emp__fact{display:grid;gap:3px;padding:10px 14px;background:#ffffff;min-width:0}
.emp__fact i{
  font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:normal;color:var(--muted-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.emp__fact b{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.emp__act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.emp__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent-gradient);color:#fff;font-weight:700;
  padding:12px clamp(28px,4vw,46px);border-radius:var(--radius-sm);
  box-shadow:0 6px 18px rgba(240,96,35,.32);
  transition:transform var(--fast),box-shadow var(--fast);
}
.emp__btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(240,96,35,.42)}
.emp__alt{font-size:.82rem;font-weight:500;color:var(--muted);border-bottom:1px dotted var(--line)}
.emp__auto{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-top:clamp(10px,1.4vw,14px);border-top:1px solid var(--line-soft);
}
.emp__autoLead{
  font-size:.65rem;font-weight:700;color:var(--muted-dim);
  white-space:nowrap;
}
.emp__auto ul{display:flex;flex-wrap:wrap;gap:6px 14px}
.emp__auto li{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:500;color:var(--muted);
}
/* a tick, not a chevron: physical sides so RTL doesn't mirror it */
.emp__auto li::before{
  content:"";flex:0 0 9px;width:9px;height:5px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  rotate:-45deg;translate:0 -1px;
}
/* inside the drag compare, where vertical room is tight */
.emp--tight{gap:10px;padding:clamp(14px,1.8vw,20px)}
.emp--tight .emp__id b{font-size:clamp(.98rem,1.6vw,1.15rem)}
.emp--tight .emp__ping{flex:0 0 20px;width:20px;height:20px}

.iceberg__note{
  position:relative;z-index:2;margin:0;text-align:center;
  font-size:clamp(1.15rem,2.6vw,1.95rem);font-weight:800;
  color:var(--text);opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s var(--ease);
}
.iceberg.is-converged .iceberg__note{opacity:1;transform:none}

/* ---------- spotlight ---------- */
.spot{position:relative;margin-top:clamp(76px,10vh,124px)}
.spot__head{max-width:64ch;margin-bottom:34px}
.spot__screen{
  position:relative;height:clamp(300px,46vh,460px);overflow:hidden;
  background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
}
.spot__deep,.spot__clean{position:absolute;inset:0}
/* deep console under the hood */
.spot__deep{
  --tech:#12141a;--tech-2:#191c24;--tech-card:#1f232d;
  --tech-line:rgba(255,255,255,.08);--tech-bar:#363c4a;
}
.spot__clean{
  background:var(--bg);
  display:grid;place-items:center;
  -webkit-mask-image:radial-gradient(circle 0px at var(--mx,50%) var(--my,50%),transparent 0 98%,#000 100%);
          mask-image:radial-gradient(circle 0px at var(--mx,50%) var(--my,50%),transparent 0 98%,#000 100%);
  transition:-webkit-mask-image .18s ease,mask-image .18s ease;
}
.spot.is-hot .spot__clean{
  -webkit-mask-image:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%),transparent 0 62%,#000 66%);
          mask-image:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%),transparent 0 62%,#000 66%);
}
.spot__screen::after{
  content:"";position:absolute;pointer-events:none;
  left:var(--mx,50%);top:var(--my,50%);
  width:320px;height:320px;margin:-160px 0 0 -160px;
  border:2px solid var(--accent);border-radius:50%;
  box-shadow:0 0 50px rgba(240,96,35,.3) inset, 0 0 24px rgba(240,96,35,.25);
  opacity:0;transition:opacity .2s ease;
}
.spot.is-hot .spot__screen::after{opacity:.85}

/* ---------- dashboard mock (heavy side) ---------- */
.dash{
  position:absolute;inset:0;display:grid;grid-template-columns:56px 1fr;gap:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/100% 20px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 100%,
    var(--tech);
  color:var(--tech-text);
}
.dash__side{
  border-inline-end:1px solid var(--tech-line);padding:16px 0;
  display:grid;align-content:start;gap:12px;justify-items:center;
  background:rgba(0,0,0,.25);
}
.dash__side span{
  width:26px;height:26px;border:1px solid var(--tech-line);background:var(--tech-2);
  border-radius:var(--radius-xs);
}
.dash__side span:first-child{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px rgba(240,96,35,.45);
}
.dash__side span:nth-child(2){background:var(--tech-bar)}
.dash__body{padding:14px 18px 16px;display:grid;gap:12px;align-content:start;min-width:0}
.dash__top{
  display:flex;align-items:center;gap:10px;
  font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;
  font-size:.68rem;letter-spacing:.08em;color:var(--tech-muted);
}
.dash__live{
  display:inline-flex;align-items:center;gap:6px;color:#ff7133;font-weight:700;
}
.dash__live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#ff7133;
  box-shadow:0 0 0 0 rgba(240,96,35,.55);
  animation:live 1.6s ease-out infinite;
}
@keyframes live{
  0%{box-shadow:0 0 0 0 rgba(240,96,35,.5)}
  100%{box-shadow:0 0 0 8px rgba(240,96,35,0)}
}
.dash__crumb{margin-inline-end:auto}
.dash__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dash--calls .dash__kpis,.dash--stock .dash__kpis,.dash--crm .dash__kpis{grid-template-columns:repeat(3,1fr)}
.dash__kpi{
  position:relative;overflow:hidden;
  border:1px solid var(--tech-line);padding:10px 14px 14px;background:var(--tech-card);
  border-radius:var(--radius-sm);min-width:0;
}
.dash__kpi::after{
  content:"";position:absolute;inset:auto 8px 5px 8px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,
    transparent 0 8%, var(--accent) 8% 14%, transparent 14% 28%,
    var(--accent) 28% 32%, transparent 32% 48%, var(--accent) 48% 62%,
    transparent 62% 70%, var(--accent) 70% 88%, transparent 62%);
  opacity:.7;
}
.dash__kpi:first-child,.dash__kpi:nth-child(4){
  box-shadow:inset 3px 0 0 var(--accent);
}
.dash__kpi:nth-child(4){background:rgba(240,96,35,.1)}
.dash__kpi b{display:block;font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:900;font-variant-numeric:tabular-nums;color:#ffffff}
.dash__kpi i{display:block;font-style:normal;font-size:.68rem;font-weight:500;color:var(--tech-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash__mix{display:grid;grid-template-columns:1.4fr .7fr;gap:10px;min-height:0}
.dash__chart{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;gap:5px;height:clamp(60px,10vh,94px);
  padding:10px 10px 8px;border:1px solid var(--tech-line);background:var(--tech-card);
  border-radius:var(--radius-sm);
}
.dash__chart::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;
  background:linear-gradient(90deg,transparent,rgba(240,96,35,.35),transparent);
  animation:scan 2.8s linear infinite;
  pointer-events:none;
}
@keyframes scan{from{inset-inline-start:-20px}to{inset-inline-start:110%}}
.dash__chart span{
  flex:1;height:var(--h);transform-origin:bottom;border-radius:2px 2px 0 0;
  background:linear-gradient(var(--accent),rgba(240,96,35,.35));
  animation:rise .7s var(--ease) both;
}
.dash__chart span:nth-child(even){background:var(--tech-bar);opacity:.9}
.dash__chart span:nth-child(1){animation-delay:.02s}
.dash__chart span:nth-child(2){animation-delay:.05s}
.dash__chart span:nth-child(3){animation-delay:.08s}
.dash__chart span:nth-child(4){animation-delay:.11s}
.dash__chart span:nth-child(5){animation-delay:.14s}
.dash__chart span:nth-child(6){animation-delay:.17s}
.dash__chart span:nth-child(7){animation-delay:.2s}
.dash__chart span:nth-child(8){animation-delay:.23s}
@keyframes rise{from{transform:scaleY(.15)}}
.dash__heat{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
  gap:4px;padding:8px;min-height:clamp(60px,10vh,94px);
  border:1px solid var(--tech-line);background:var(--tech-card);
  border-radius:var(--radius-sm);
}
.dash__heat i{display:block;background:var(--tech-bar);opacity:.45;border-radius:2px}
.dash__heat i:nth-child(3n){background:var(--accent);opacity:.9}
.dash__heat i:nth-child(5n){background:var(--accent);opacity:.5}
.dash__heat i:nth-child(7n){opacity:.2}
.dash__rows{display:grid;gap:6px;font-size:.72rem;color:var(--tech-muted)}
.dash__row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr;gap:8px;align-items:center;
  border:1px solid var(--tech-line);padding:7px 10px;background:var(--tech-card);
  border-radius:var(--radius-xs);color:var(--tech-text);
}
.dash__st{
  justify-self:end;padding:2px 8px;font-weight:700;font-size:.66rem;border-radius:4px;
  background:rgba(240,96,35,.2);color:#ff814a;border:1px solid rgba(240,96,35,.35);
}
.dash__st--warn{background:rgba(255,255,255,.08);color:#d0d4dc;border:1px solid rgba(255,255,255,.15)}
.dash--dense .dash__rows{gap:5px}

/* calls: occupancy + routing path */
.dash--calls .dash__agents{display:grid;gap:5px}
.dash__agent{
  display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;align-items:center;
  padding:6px 8px;border:1px solid var(--tech-line);background:var(--card);
  font-size:.66rem;
}
.dash__agent b{font-weight:700;white-space:nowrap}
.dash__agent u{
  display:block;height:6px;background:rgba(36,32,33,.08);position:relative;
  text-decoration:none;
}
.dash__agent u::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  background:var(--accent);
}
.dash__agent em{font-style:normal;color:var(--muted-dim);font-variant-numeric:tabular-nums}
.dash__path{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;
}
.dash__path span{
  padding:4px 8px;border:1px solid var(--tech-line);background:var(--card);
}
.dash__path span.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dash__path i{width:10px;height:1px;background:var(--accent);opacity:.5}

/* stock: warehouse aisles */
.dash--stock .dash__aisles{
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
}
.dash__bin{
  aspect-ratio:1;border:1px solid var(--tech-line);background:var(--card);
  font-size:.5rem;display:grid;place-items:end start;padding:3px;
  color:var(--muted-dim);
}
.dash__bin.is-ok{background:var(--accent-soft);border-color:rgba(240,96,35,.35)}
.dash__bin.is-low{background:var(--text);color:#fff}

/* crm: approval board */
.dash--crm .dash__board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;min-height:0}
.dash__col{
  border:1px solid var(--tech-line);background:var(--card);padding:6px;
  display:grid;gap:4px;align-content:start;
}
.dash__col em{
  font-style:normal;font-size:.58rem;letter-spacing:.1em;color:var(--muted-dim);
}
.dash__ticket{
  height:22px;background:var(--tech-2);border:1px solid var(--tech-line);
}
.dash__ticket.is-hot{background:var(--accent-soft);border-color:var(--accent)}
.dash--crm .dash__rows{grid-template-columns:1fr}
.dash--crm .dash__row{grid-template-columns:1.6fr 1fr auto}

@media (prefers-reduced-motion:reduce){
  .dash__live::before,.dash__chart::after,.dash__chart span{animation:none}
}

/* ---------- proof numbers ---------- */
.stats{
  margin-top:clamp(40px,6vh,64px);padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.5vw,36px);
}
.stat{
  display:grid;gap:10px;align-content:start;
  padding:26px 28px;background:#ffffff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast);
}
.stat:hover{
  transform:translateY(-4px);border-color:rgba(240,96,35,.35);
  box-shadow:var(--shadow-lg);
}
.stat__num{
  font-size:clamp(2.8rem,5.6vw,4.2rem);font-weight:900;line-height:1;
  color:var(--accent);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__label{color:var(--muted);font-size:1rem;font-weight:500;line-height:1.55}

/* ---------- systems: pinned horizontal ---------- */
.systems{padding:clamp(56px,7vh,88px) 0 0;position:relative}
.pin{height:170vh;position:relative;margin-top:clamp(14px,2vh,22px)}
.pin__viewport{
  position:sticky;top:68px;height:calc(100svh - 68px);overflow:hidden;
  display:flex;align-items:flex-start;padding-top:8px;box-sizing:border-box;
}
.pin__track{
  flex:0 0 auto;
  display:flex;gap:clamp(24px,4vw,64px);padding-inline:var(--pad);
  will-change:transform;
}
.panel{
  flex:0 0 min(86vw,980px);display:grid;gap:16px;align-content:start;
}
.panel__head{display:grid;gap:8px;max-width:70ch}
.panel__index{
  font-family:ui-monospace,Consolas,monospace;color:var(--accent);
  font-size:.8rem;letter-spacing:.2em;
}
.panel__title{font-size:clamp(1.4rem,3.2vw,2.4rem)}
.panel__desc{color:var(--muted);font-size:clamp(.9rem,1.25vw,1.05rem)}

.mock{
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-xl);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transform-style:preserve-3d;transition:transform .3s var(--ease);will-change:transform;
}
.mock__bar{
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--bg-alt);
}
.mock__dot{width:10px;height:10px;border-radius:50%;background:rgba(36,32,33,.2)}
.mock__dot:first-child{background:#ff5f56}
.mock__dot:nth-child(2){background:#ffbd2e}
.mock__dot:nth-child(3){background:#27c93f}
.mock__name{
  margin-inline-start:auto;font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;
  font-size:.72rem;font-weight:600;color:var(--muted);direction:ltr;
}

/* compare slider: --x = width of the CLEAN layer, measured from the right */
.compare{
  position:relative;height:clamp(280px,42vh,420px);overflow:hidden;
  background:var(--tech);touch-action:pan-y;
}
/* two live panes, each composed inside its own strip - nothing gets cut mid-word */
.compare__pane{
  position:absolute;top:0;bottom:0;overflow:hidden;
  transition:width var(--dur,0s) var(--ease);
}
.compare__pane--heavy{left:0;width:calc(100% - var(--x));background:var(--tech)}
.compare__pane--light{right:0;width:var(--x);background:#ffffff}
/* both sides keep a working width and clip instead of squashing, so whichever
   strip you leave open still reads as a real screen */
.compare__pane--heavy .dash{inset:0 auto 0 0;width:max(520px,100%)}
.compare__pane--light .emp{
  position:absolute;inset:0 0 0 auto;width:max(400px,100%);
  max-width:none;align-content:center;
}
.compare__handle{
  position:absolute;top:0;bottom:0;right:var(--x);width:38px;
  transform:translateX(50%);cursor:ew-resize;
  display:grid;place-items:center;touch-action:none;
  transition:right var(--dur,0s) var(--ease);
}
.compare__handle::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--accent);
  box-shadow:0 0 16px rgba(240,96,35,.75);
}
.compare__grip{
  width:32px;height:32px;background:var(--accent-gradient);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--fast),box-shadow var(--fast);
  box-shadow:0 4px 16px rgba(240,96,35,.5),0 0 0 2px #fff;
  color:#fff;font-size:.75rem;font-weight:900;
}
.compare__grip::after{
  content:"◂▸";letter-spacing:-1px;font-size:11px;
}
.compare__handle:hover .compare__grip,
.compare__handle:focus-visible .compare__grip{transform:scale(1.15);box-shadow:0 6px 20px rgba(240,96,35,.65),0 0 0 3px #fff}
.compare__tag{
  position:absolute;bottom:14px;font-size:.72rem;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.92);color:var(--text);
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  pointer-events:none;
}
.compare__tag--start{right:16px;color:var(--accent);border-color:rgba(240,96,35,.3)}
.compare__tag--end{left:16px}

.mock__toggle{
  display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);
  flex-wrap:wrap;background:var(--bg-alt);align-items:center;
}
.tgl{
  padding:8px 18px;font-size:.86rem;font-weight:600;color:var(--muted);
  border-radius:var(--radius-pill);background:transparent;
  border:1px solid transparent;
  transition:color var(--fast),border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
.tgl:hover{color:var(--text);background:rgba(36,32,33,.04)}
.tgl.is-active{
  color:#ffffff;background:var(--text);
  box-shadow:0 2px 8px rgba(36,32,33,.2);
}

/* ---------- cards ---------- */
.cards{
  margin-top:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(20px,2.5vw,32px);
}
/* blog: all four posts stay on one row; cards bleed a touch wider so text breathes */
.blog .cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  width:calc(100% + clamp(28px,4.5vw,64px));
  margin-inline:calc(clamp(14px,2.25vw,32px) * -1);
}
.blog .card{
  padding:clamp(22px,2.6vw,32px);
  padding-bottom:clamp(58px,6.8vw,72px); /* keep "קרא עוד" clear of the summary */
}
.blog .card__title{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:800}
.blog .card p{font-size:.92rem;line-height:1.6}
.blog .post__cli{
  bottom:clamp(18px,2.2vw,24px);
  inset-inline-end:clamp(22px,2.6vw,32px);
  font-size:clamp(.95rem,1.15vw,1.08rem);font-weight:700;
}
.card{
  position:relative;background:#ffffff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(26px,3.2vw,36px);display:grid;gap:12px;align-content:start;
  transition:transform .35s var(--ease),border-color var(--fast),
             background var(--fast),box-shadow var(--fast);
  overflow:hidden;
}
.card::before{  /* mouse-following glow */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(240,96,35,.12),transparent 65%);
  transition:opacity var(--fast);
}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-8px);border-color:rgba(240,96,35,.35);box-shadow:var(--shadow-xl)}
.card__num{
  font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;color:var(--accent);
  font-size:.85rem;font-weight:800;letter-spacing:.05em;
  background:var(--accent-soft);padding:4px 10px;border-radius:var(--radius-pill);
  width:fit-content;border:1px solid rgba(240,96,35,.2);
}
.card__title{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;transition:color var(--fast);color:var(--text)}
.card:hover .card__title{color:var(--accent)}
.card p{color:var(--muted);font-size:.98rem;line-height:1.65}
.card__line{
  position:absolute;top:0;bottom:0;right:0;width:4px;background:var(--accent-gradient);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.card:hover .card__line{transform:scaleY(1)}

/* audience stacking */
.aud{
  will-change:transform;
  transform:
    translate3d(calc(var(--dx) * (1 - var(--p,1))),calc(38px * (1 - var(--p,1))),0)
    rotate(calc(var(--rot) * (1 - var(--p,1))))
    scale(calc(1 - .07 * (1 - var(--p,1))));
}
.aud:hover{transform:translateY(-8px)}

/* ---------- about ---------- */
.about{background:var(--bg-alt);border-block:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(32px,5vw,72px)}
.about__slogan{
  margin-top:22px;font-weight:900;font-size:clamp(1.25rem,2.4vw,1.8rem);
  line-height:1.25;color:var(--accent);
}
.about__pillars{
  margin-top:28px;display:grid;gap:10px;
}
.about__pillar{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.92rem;font-weight:600;color:var(--text);
  padding:8px 14px;background:#ffffff;border:1px solid var(--line);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);
  width:fit-content;
}
.about__pillar-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.about__body{display:grid;gap:20px;align-content:start}
.about__p{color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.75}
.about__p--accent{
  color:var(--text);font-weight:700;
  border-inline-start:4px solid var(--accent);padding-inline-start:20px;
  background:#ffffff;border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding-block:14px;border:1px solid var(--line);border-inline-start:4px solid var(--accent);
  box-shadow:var(--shadow-xs);
}
.more{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.more summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;transition:color var(--fast);
}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--accent)}
.more__sign{position:relative;width:14px;height:14px;flex:0 0 14px}
.more__sign::before,.more__sign::after{
  content:"";position:absolute;background:var(--accent);transition:transform var(--fast);
}
.more__sign::before{inset:6px 0 auto 0;height:2px}
.more__sign::after{inset:0 6px auto 6px;height:14px;width:2px;left:6px;top:0}
.more[open] .more__sign::after{transform:scaleY(0)}
.more__body{display:grid;gap:14px;padding-top:16px;color:var(--muted);line-height:1.75}

/* ---------- checklist ---------- */
.checklist{
  position:relative;padding:clamp(84px,11vh,144px) 0;overflow:hidden;
  background:var(--bg-alt);border-block:1px solid var(--line);
}
.checklist__wipe{
  position:absolute;inset:0;background:
    repeating-linear-gradient(-45deg,rgba(240,96,35,.06) 0 2px,transparent 2px 14px);
  clip-path:polygon(100% 0,100% 100%,calc(100% - var(--p,0) * 130%) 100%,calc(100% - var(--p,0) * 100%) 0);
}
.checks{margin-top:clamp(32px,5vh,56px);display:grid;gap:14px;max-width:920px;list-style:none;padding:0}
.check{
  display:flex;gap:18px;align-items:flex-start;cursor:pointer;
  padding:20px 24px;background:#ffffff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
  transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast),background var(--fast);
}
.check:hover,.check:has(:focus-visible){
  transform:translateY(-3px);border-color:rgba(240,96,35,.4);
  box-shadow:var(--shadow-md);
}
.check:has(:checked){
  border-color:var(--accent);
  box-shadow:0 10px 28px rgba(240,96,35,.14),0 0 0 1px var(--accent);
  background:rgba(255,255,255,.98);
}
.check__input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.check__mark{
  flex:0 0 24px;height:24px;margin-top:2px;position:relative;
  border-radius:var(--radius-xs);border:2px solid var(--line);
  background:#fff;
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
.check:hover .check__mark{border-color:var(--accent)}
.check:has(:checked) .check__mark{
  border-color:var(--accent);background:var(--accent);
}
.check__mark::before,.check__mark::after{
  content:"";position:absolute;background:#fff;
  transform-origin:bottom left;transform:scaleX(0);transition:transform .22s var(--ease);
}
.check__mark::before{width:7px;height:2px;left:5px;top:12px;rotate:45deg}
.check__mark::after{width:12px;height:2px;left:8px;top:13px;rotate:-45deg;transition-delay:.08s}
.check:has(:checked) .check__mark::before,
.check:has(:checked) .check__mark::after{transform:scaleX(1)}
.check__body{display:block;min-width:0}
.check b{display:block;margin-bottom:3px;font-size:1.05rem;font-weight:800;color:var(--text)}
.check__body span{display:block;color:var(--muted);font-size:.95rem;line-height:1.6}
.checks__foot{
  margin-top:0;max-height:0;overflow:hidden;
  max-width:920px;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),max-height .4s var(--ease),margin-top .4s var(--ease);
}
.checks__foot.is-on{
  margin-top:28px;max-height:16em;opacity:1;transform:none;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;padding:22px 28px;background:#ffffff;border:1px solid rgba(240,96,35,.3);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.checks__verdict{
  flex:1 1 14rem;min-width:min(100%,20ch);
  margin:0;font-weight:700;color:var(--text);
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;
  white-space:pre-wrap;
}
.checks__cta{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;font-weight:700;font-size:.92rem;
  color:#fff;background:var(--accent-gradient);
  border-radius:var(--radius-pill);
  box-shadow:0 4px 14px rgba(240,96,35,.35);
  transition:transform var(--fast),box-shadow var(--fast);
}
.checks__cta span{font-weight:900;transition:transform var(--fast)}
.checks__cta:hover,.checks__cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(240,96,35,.45);
}
.checks__cta:hover span,.checks__cta:focus-visible span{transform:translateX(-5px)}

/* ---------- blog ---------- */
.post{position:relative;padding-bottom:clamp(48px,5.5vw,60px)}
.post__meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.72rem;letter-spacing:.1em;
}
.post__cat{color:var(--accent);font-weight:700;white-space:nowrap}
.post__time{color:var(--muted-dim);white-space:nowrap;flex-shrink:0}
.post__cli{
  position:absolute;bottom:clamp(20px,2.4vw,26px);right:clamp(24px,3vw,34px);
  font-weight:500;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--accent);
  opacity:0;transform:translateX(8px);
  transition:opacity var(--fast),transform var(--fast);
}
.post:hover .post__cli{opacity:1;transform:none}
/* the whole card is the click target, the "קרא עוד" line just marks it */
.post__open{
  position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;
  cursor:pointer;
}
.post__open:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.post__open:hover ~ .post__cli,.post__open:focus-visible ~ .post__cli{opacity:1;transform:none}

/* ---------- article reader ----------
   The posts live inside the page (each card carries its own .post__full), and
   this panel is where that markup gets read. One page, real articles. */
.reader{
  position:fixed;inset:0;z-index:180;
  /* flex, not grid: a grid row would grow to the article's full height and the
     panel would never be capped by the viewport */
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,44px);
}
.reader[hidden]{display:none}
.reader__scrim{position:absolute;inset:0;background:rgba(36,32,33,.5);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.reader__panel{
  position:relative;width:min(840px,100%);max-height:100%;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:#ffffff;border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(36,32,33,.35);
  border-radius:var(--radius-xl);
  overflow:hidden;
  animation:readerIn .4s var(--ease);
}
@keyframes readerIn{from{opacity:0;transform:translateY(20px)}}
.reader__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(20px,3.2vw,36px);border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.reader__meta{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:600}
.reader__close{
  flex:0 0 36px;height:36px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer;
  transition:color var(--fast),border-color var(--fast),background var(--fast);
}
.reader__close:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.reader__body{
  overflow:auto;overscroll-behavior:contain;
  padding:clamp(24px,3.6vw,44px);
  display:grid;gap:clamp(16px,2vw,22px);align-content:start;
}
.reader__body h2{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:900;line-height:1.25}
.reader__body h3{
  margin-top:clamp(10px,1.5vw,18px);
  font-size:clamp(1.08rem,1.8vw,1.3rem);font-weight:800;
  display:flex;align-items:center;gap:10px;
}
.reader__body h3::before{
  content:"";flex:0 0 8px;width:8px;height:8px;background:var(--accent);border-radius:2px;
}
.reader__body p{color:var(--muted);line-height:1.85}
.reader__body .reader__lead{color:var(--text);font-size:clamp(1.05rem,1.7vw,1.18rem);font-weight:500}
.reader__body b{color:var(--text)}
.reader__body code{
  font-family:'Plus Jakarta Sans',ui-monospace,Consolas,monospace;font-size:.9em;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:2px 8px;
  unicode-bidi:isolate;  /* a file name stays one unit inside an RTL sentence */
}
.reader__body ul{display:grid;gap:12px}
.reader__body li{
  position:relative;color:var(--muted);line-height:1.8;
  padding-inline-start:22px;
}
.reader__body li::before{
  content:"";position:absolute;inset-inline-start:0;top:.65em;
  width:6px;height:6px;background:var(--accent);border-radius:50%;
}
/* the scene that opens a piece: a real morning in a real office, before any analysis */
.reader__body .reader__story{
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.5vw,26px);
  background:var(--bg-alt);border-inline-start:4px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text);line-height:1.9;
}
.reader__body .reader__ask{
  margin-top:clamp(8px,1.2vw,14px);padding:clamp(16px,2.2vw,22px);
  background:var(--accent-soft);border-inline-start:4px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text);font-weight:700;
}
.reader__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(16px,2.2vw,22px) clamp(20px,3.2vw,36px);
  border-top:1px solid var(--line);background:var(--bg-alt);
}
.reader__foot .reader__prompt{
  font-size:clamp(1.05rem,1.4vw,1.18rem);
  font-weight:600;
  color:var(--text);
  max-width:38ch;
  line-height:1.45;
}
body.is-reading{overflow:hidden}

/* ---------- footer ---------- */
.footer{
  position:relative;padding:clamp(88px,13vh,160px) 0 48px;overflow:hidden;
  background:#181516;color:#ffffff;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 65% 75% at 50% 100%,#000 15%,transparent 75%);
}
.footer__inner{position:relative;z-index:2;display:grid;justify-items:center;text-align:center}
.footer__inner>*{text-align:center}
.footer__title{
  font-size:clamp(2rem,4.8vw,3.4rem);font-weight:900;color:#ffffff;
  letter-spacing:-.025em;
}
.footer__sub{margin-top:18px;color:#a89fa1;max-width:58ch;font-size:1.15rem;line-height:1.7}
.footer .btn{margin-top:clamp(32px,5vh,48px);box-shadow:0 8px 32px rgba(240,96,35,.55)}
.footer__contact{
  margin-top:clamp(36px,5.5vh,56px);display:flex;gap:clamp(16px,3vw,36px);flex-wrap:wrap;justify-content:center;
}
.footer__contact li{
  display:grid;gap:4px;font-size:1rem;
  padding:14px 26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);backdrop-filter:blur(8px);
  transition:border-color var(--fast),background var(--fast),transform var(--fast);
}
.footer__contact li:hover{
  background:rgba(255,255,255,.08);border-color:rgba(240,96,35,.4);transform:translateY(-2px);
}
.footer__contact .muted{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#ff854d}
.footer__contact a{font-weight:700;color:#ffffff;transition:color var(--fast)}
.footer__contact a:hover{color:var(--accent-hover)}
.footer__bottom{
  margin-top:clamp(52px,7.5vh,88px);padding-top:28px;width:100%;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.footer .logo__ink{fill:#ffffff}
.footer__slogan{color:#a89fa1;font-size:.92rem;font-weight:500}

/* ---------- back to top ---------- */
.toTop{
  position:fixed;bottom:26px;left:26px;z-index:95;
  width:48px;height:48px;display:grid;place-items:center;
  background:#ffffff;
  box-shadow:0 8px 24px rgba(36,32,33,.12),0 0 0 1px var(--line);
  color:var(--accent);font-weight:900;font-size:1.1rem;
  border-radius:50%;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--fast),transform var(--fast),visibility var(--fast),box-shadow var(--fast),background var(--fast),color var(--fast);
}
.toTop span{display:block;transform:rotate(-90deg)}
.toTop.is-on{opacity:1;visibility:visible;transform:none}
.toTop:hover{
  transform:translateY(-3px);
  background:var(--accent);color:#fff;
  box-shadow:0 12px 30px rgba(240,96,35,.45);
}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 70ms)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .about__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav__burger{display:flex}
  .nav__logo{opacity:1;transform:none;margin-inline-end:0}
  .nav .lang{order:2;margin-inline-end:0;margin-inline-start:auto}
  .nav__burger{order:3}
  .nav__menu{
    order:4;
    position:fixed;inset:64px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(252,251,249,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-xl);
    padding:10px var(--pad) 26px;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .35s var(--ease);
  }
  .nav__menu.is-open{clip-path:inset(0 0 0 0)}
  .nav__links{flex-direction:column;align-items:stretch;gap:0}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
  .nav__menu .btn{margin-top:18px;justify-content:center}

  /* pinned sections unwind into normal stacked flow */
  .pin{height:auto;margin-top:20px}
  .pin__viewport{position:static;height:auto;overflow:visible;display:block}
  .pin__track{flex-direction:column;transform:none!important;gap:60px}
  .panel{flex:1 1 auto}
  .iceberg{height:auto}
  .ice-ui{width:min(88vw,520px)}
  .ice-ui__meta{display:none}
  .aud{transform:none!important}
  .dash__kpis{grid-template-columns:repeat(2,1fr)}
  .dash--calls .dash__kpis,.dash--stock .dash__kpis,.dash--crm .dash__kpis{grid-template-columns:1fr 1fr 1fr}
  .dash__mix{grid-template-columns:1fr}
  .dash__heat{display:none}
  .dash__row{grid-template-columns:1.2fr 1fr .7fr}
  .dash:not(.dash--stock):not(.dash--crm) .dash__row span:nth-child(3){display:none}
  .compare{height:340px}
  .compare__pane--heavy .dash{width:100%}
  /* the slider opens on the employee view here, so let it fit instead of clip */
  .compare__pane--light .emp{width:100%}
}
@media (max-width:720px){
  .blog .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    margin-inline:0;
  }
}

/* touch: no hover to lean on, so the affordances stay visible */
@media (hover:none){
  .card__line{transform:scaleY(1);opacity:.45}
  .post__cli{opacity:1;transform:none}
  .card:active{transform:translateY(-4px);border-color:var(--line)}
  .card:active .card__title{color:var(--accent)}
  .check:active{transform:translateX(-6px);border-color:var(--accent)}
  .btn:active::before{transform:translateX(0)}
}
@media (max-width:520px){
  .hero{padding-top:104px}
  .compare__tag{font-size:.56rem}
  .footer__bottom{justify-content:center;text-align:center}
  .spot__screen::after{display:none}
  .blog .cards{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .cursor{display:none!important}
  body.has-cursor{cursor:auto}
  .pin{height:auto}
  .pin__viewport{position:static;height:auto;overflow:visible;display:block}
  .pin__track{flex-direction:column;transform:none!important;gap:60px}
  .iceberg{height:auto}
  .iceberg__viewport{position:static;height:auto}
  .aud{transform:none!important}
  .iceberg__note{opacity:1}
  .ice-ui{opacity:1}
  .ice-ui .emp{transform:none}
  .cog__wheel{transform:none!important}
}

/* English labels run longer — tighten the bar so nothing wraps */
html[dir="ltr"] .nav__menu{gap:clamp(10px,1.6vw,22px)}
html[dir="ltr"] .nav__links{gap:clamp(10px,1.4vw,18px)}
html[dir="ltr"] .nav__links a{font-size:.86rem}
html[dir="ltr"] .nav__menu .btn--sm{padding:10px 16px;font-size:.84rem}
html[dir="ltr"] .skip{right:auto;left:20px}
html[dir="ltr"] .toTop{left:auto;right:26px}
html[dir="ltr"] .btn::before{transform:translateX(-101%)}
html[dir="ltr"] .btn:hover::before,
html[dir="ltr"] .btn:focus-visible::before{transform:translateX(0)}
html[dir="ltr"] .btn:hover .btn__arrow,
html[dir="ltr"] .btn:focus-visible .btn__arrow{transform:translateX(6px)}

/* compare: clean pane grows from the left in LTR */
html[dir="ltr"] .compare__pane--heavy{
  left:auto;right:0;width:calc(100% - var(--x));
}
html[dir="ltr"] .compare__pane--light{
  right:auto;left:0;width:var(--x);
}
html[dir="ltr"] .compare__pane--heavy .dash{inset:0 0 0 auto;width:max(520px,100%)}
html[dir="ltr"] .compare__pane--light .emp{
  inset:0 auto 0 0;width:max(400px,100%);
}
html[dir="ltr"] .compare__handle{right:auto;left:var(--x)}
html[dir="ltr"] .compare__tag--start{right:auto;left:12px}
html[dir="ltr"] .compare__tag--end{left:auto;right:12px}

html[dir="ltr"] .emp,
html[dir="ltr"] .dash__body,
html[dir="ltr"] .panel__head,
html[dir="ltr"] .spot__head,
html[dir="ltr"] .about__p,
html[dir="ltr"] .about__pillar,
html[dir="ltr"] .check__body,
html[dir="ltr"] .reader__body,
html[dir="ltr"] .card{text-align:left}

html[dir="ltr"] .about__p--accent{
  border-inline-start:3px solid var(--accent);
  border-inline-end:0;
}

/* English runs wider — tighten tracking on chips/labels so they stay one line */
html[dir="ltr"] .kicker{letter-spacing:.12em}
html[dir="ltr"] .hero__slogan{letter-spacing:.08em}
html[dir="ltr"] .post__meta,
html[dir="ltr"] .reader__meta{letter-spacing:.04em;gap:10px}
html[dir="ltr"] .compare__tag{
  letter-spacing:.06em;white-space:nowrap;font-size:.6rem;
}
html[dir="ltr"] .iceberg__label{
  letter-spacing:.06em;max-width:16ch;line-height:1.35;
}
html[dir="ltr"] .emp__live{letter-spacing:.08em;white-space:nowrap}
html[dir="ltr"] .emp__fact i{white-space:nowrap}
html[dir="ltr"] .emp__autoLead{white-space:nowrap}
html[dir="ltr"] .dash__kpi i{white-space:nowrap}
html[dir="ltr"] .dash__top,
html[dir="ltr"] .tgl{white-space:nowrap}
html[dir="ltr"] .card__num{letter-spacing:.12em}
html[dir="ltr"] .footer__contact .muted{letter-spacing:.1em}