/* Amit Agents v2 — one idea per screen, huge type, the product as the hero, motion tied to the scroll. */
:root {
  --ink: #1d1d1f;
  --ink-2: #424245;
  --mute: #6e6e73;
  --line: #c5c5cb;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --night: #000000;
  --night-ink: #f5f5f7;
  --night-mute: #86868b;
  --tide: #0a8f7e;
  --tide-hi: #2fd3b8;
  --wa-bg: #efeae2;
  --wa-out: #d9fdd3;
  --font: "Heebo", "Arial Hebrew", system-ui, sans-serif;
  --latin: "Inter", "Heebo", system-ui, sans-serif;
  --nav-h: 48px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; line-height: 1.47; letter-spacing: -0.003em; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 6px; }

/* ---------- nav: thin, translucent, Apple-quiet ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, .72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: background .4s, border-color .4s, color .4s; }
.nav[data-dark] { background: rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .08); color: var(--night-ink); }
.nav-in { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 32px; }
.logo { font-family: var(--latin); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; direction: ltr; }
.logo span { font-weight: 500; opacity: .55; margin-inline-start: 3px; }
.nav nav { display: flex; gap: 28px; margin-inline-start: auto; font-size: 13px; opacity: .8; }
.nav nav a:hover { opacity: .6; }
.lang { font-size: 12px; font-weight: 600; opacity: .7; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; line-height: 1; }
.lang:hover { opacity: 1; }
.nav-cta { font-size: 12px; font-weight: 600; background: var(--tide); color: #fff; padding: 5px 13px; border-radius: 999px; }

/* ---------- shared type ---------- */
.eyebrow { margin: 0; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--tide); letter-spacing: 0; }
h1, h2 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(40px, 6vw, 80px); }
.muted { color: var(--mute); }

/* ---------- 1. hero ---------- */
.hero { position: relative; height: 520vh; background: var(--paper); }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); }
.hero-copy { text-align: center; padding: 0 20px; transform: translateY(calc(var(--p, 0) * -200px)); opacity: calc(1 - var(--p, 0) * 6); will-change: transform, opacity; }
.kicker { margin: 0 0 14px; font-family: var(--latin); font-weight: 600; font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -0.01em; color: var(--tide); direction: ltr; }
.hero h1 { font-size: clamp(44px, 7.6vw, 104px); }
.hero-sub { margin: 18px auto 0; font-size: clamp(19px, 2vw, 28px); font-weight: 400; color: var(--ink-2); letter-spacing: -0.012em; max-width: 30ch; }
.links { margin-top: 26px; display: flex; gap: 26px; justify-content: center; align-items: center; font-size: 17px; }
.pill { background: var(--tide); color: #fff; padding: 11px 22px; border-radius: 999px; font-weight: 600; transition: background .25s; }
.pill:hover { background: #087a6c; }
.more { color: var(--tide); font-weight: 500; }
.more i { font-style: normal; display: inline-block; transition: transform .25s var(--ease); }
.more:hover i { transform: translateX(-4px); }

/* the device rises out of the fold and settles */
.device-wrap { position: relative; margin-top: clamp(28px, 5vh, 56px); perspective: 1600px; transform-origin: 50% 0;
  /* התנועה עצמה (עלייה בטעינה, עלייה בגלילה, יציאה) — מחושבת ב-JS ונכתבת ישר ל-transform.
     ספארי באייפון לא מצליח לחשב את אותה נוסחה ב-CSS (כפל של שני משתנים), ומשאיר את הטלפון במקום */
  transform: translateY(30vh) scale(.94); will-change: transform, opacity; }
.floor-shadow { position: absolute; inset-inline: 12%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent); filter: blur(6px); }

/* ---------- the phone: titanium frame, black bezel, glass, island, buttons ---------- */
.device { --w: clamp(290px, 27vw, 380px); position: relative; width: var(--w); aspect-ratio: 71.6 / 146.6; border-radius: calc(var(--w) * .165); padding: calc(var(--w) * .026);
  background:
    linear-gradient(145deg, #f2f3f5 0%, #b8bcc2 18%, #e9eaec 34%, #8a8f96 52%, #d7d9dc 70%, #a3a7ad 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 0 2.5px rgba(0, 0, 0, .18),
    0 2px 2px rgba(0, 0, 0, .06), 0 14px 28px -8px rgba(0, 0, 0, .22), 0 50px 90px -30px rgba(0, 0, 0, .35);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.btn-side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #7d8289, #d4d7da, #8b9096); }
.btn-side.a { inset-inline-start: -3px; top: 21%; height: 6%; }
.btn-side.b { inset-inline-start: -3px; top: 30%; height: 9%; }
.btn-side.c { inset-inline-end: -3px; top: 26%; height: 13%; }
.glass { position: relative; height: 100%; border-radius: calc(var(--w) * .142); background: #000; padding: calc(var(--w) * .022); overflow: hidden; }
.island { position: absolute; z-index: 3; top: calc(var(--w) * .035); left: 50%; translate: -50% 0; width: 32%; height: calc(var(--w) * .09); border-radius: 999px; background: #000; }
.sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 26%, transparent 42%); mix-blend-mode: screen; }

/* WhatsApp, as it really looks */
.wa { position: relative; height: 100%; border-radius: calc(var(--w) * .122); overflow: hidden; display: flex; flex-direction: column; background: var(--wa-bg);
  font-size: calc(var(--w) * .043); line-height: 1.35; }
.wa-status { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--w) * .045) calc(var(--w) * .085) calc(var(--w) * .02); background: #f6f6f6; font-family: var(--latin); font-weight: 600; font-size: calc(var(--w) * .045); direction: ltr; }
.wa-status .icons { display: inline-flex; gap: 3px; }
.wa-status .icons i { width: 5px; height: 8px; border-radius: 1.5px; background: var(--ink); }
.wa-status .icons i:nth-child(1) { height: 5px; margin-top: 3px; }
.wa-status .icons i:nth-child(3) { width: 16px; border-radius: 2.5px; }
.wa-head { display: flex; align-items: center; gap: calc(var(--w) * .03); padding: calc(var(--w) * .02) calc(var(--w) * .04) calc(var(--w) * .03); background: #f6f6f6; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.wa-head .back { color: #0a84ff; font-size: 1.6em; line-height: 1; }
.av { display: grid; place-items: center; width: calc(var(--w) * .1); height: calc(var(--w) * .1); border-radius: 50%; background: linear-gradient(160deg, #19b39b, #0a7d6f); color: #fff; font-weight: 700; }
.who { display: flex; flex-direction: column; line-height: 1.2; }
.who b { font-weight: 600; }
.who small { color: #8a8a8e; font-size: .78em; }
.wa-body { flex: 1; min-height: 0; padding: calc(var(--w) * .04); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(var(--w) * .022); overflow: hidden;
  background-color: var(--wa-bg); background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 14px 14px; }
.wa-body > * { flex-shrink: 0; }
.msg { max-width: 80%; padding: .45em .7em .35em; border-radius: .9em; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); animation: pop .42s var(--ease) both; }
.msg.in { align-self: flex-start; background: #fff; border-start-start-radius: .25em; }
.msg.out { align-self: flex-end; background: var(--wa-out); border-start-end-radius: .25em; }
.msg time { display: block; margin-top: .15em; font-size: .72em; color: #8a8a8e; text-align: end; font-family: var(--latin); }
.msg.out time::after { content: " ✓✓"; color: #53bdeb; letter-spacing: -.25em; }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: .7em .8em; border-radius: .9em; background: var(--wa-out); box-shadow: 0 1px .5px rgba(0, 0, 0, .13); animation: pop .3s var(--ease) both; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8aa58a; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.card-meet { align-self: flex-end; width: 80%; border-radius: .9em; overflow: hidden; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); animation: pop .5s var(--ease) both; }
.card-meet .top { background: linear-gradient(135deg, #0a8f7e, #0b6b60); color: #fff; padding: .6em .8em; font-weight: 600; }
.card-meet .rows { padding: .55em .8em .6em; display: grid; gap: .2em; font-size: .92em; color: #3a3a3c; }
.wa-input { padding: calc(var(--w) * .025) calc(var(--w) * .04) calc(var(--w) * .07); background: #f6f6f6; }
.wa-input span { display: block; padding: .45em .9em; border-radius: 999px; background: #fff; border: 1px solid #e3e3e6; color: #a1a1a6; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* ---------- 2. night ---------- */
.night { position: relative; z-index: 2; height: 500vh; color: var(--night-ink);
  /* הפרק השחור עולה מעל סוף הפתיחה (כמו הטלפון מעל הכותרת), בלי קו קשוח: הקצה העליון שלו הוא מעבר רך מהלבן */
  margin-top: -100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .12) 12vh, rgba(0, 0, 0, .5) 30vh, rgba(0, 0, 0, .88) 48vh, #000 62vh, #000 100%); }
.night-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: grid; place-items: center; align-content: center; text-align: center; }
.night-kicker { margin: 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; color: var(--night-mute); }
.clock { font-family: var(--latin); font-weight: 700; font-size: clamp(110px, 22vw, 300px); line-height: .95; letter-spacing: -0.05em; direction: ltr; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #6b6b70 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: .06em 0 .04em; }
.clock .colon { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.night-line { margin: 0; font-size: clamp(30px, 4.4vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
[data-at] { transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-at][data-hidden] { opacity: 0; transform: translateY(18px); }
.pings { position: absolute; inset: 0; pointer-events: none; }
.ping { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border-radius: 18px; background: rgba(28, 28, 30, .78); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; color: #e5e5ea; white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.ping[data-on] { opacity: 1; transform: none; }
.ping .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #25d366; color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.ping .t { display: flex; flex-direction: column; line-height: 1.25; }
.ping .t b { font-weight: 600; color: #fff; }
.ping .t small { color: var(--night-mute); font-size: 12.5px; }
.ping .ok { color: var(--tide-hi); font-size: 12.5px; font-weight: 600; margin-inline-start: 6px; }
.night-end { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; padding: 0 22px; }
/* בסוף הפרק: השעון והמשפטים יוצאים, ו-61% נכנס במקומם (בלי קופסה שחורה שיוצרת קו) */
.night-sticky > .night-kicker, .night-sticky > .clock, .night-sticky > .night-line { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.night-sticky[data-end] > .night-kicker, .night-sticky[data-end] > .clock, .night-sticky[data-end] > .night-line { opacity: 0; transform: translateY(-16px); }
.night-end[data-hidden] { transform: none; }
.big-stat { margin: 0; font-family: var(--latin); font-size: clamp(120px, 24vw, 320px); line-height: .9; letter-spacing: -0.06em; font-weight: 700;
  background: linear-gradient(135deg, #2fd3b8 0%, #0a8f7e 55%, #e9fff9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-stat b { font-weight: 700; }
.night-cap { margin: 22px 0 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.night-cap span { color: var(--night-mute); }

/* ---------- 3. speed ---------- */
.speed { position: relative; height: 330vh; background: var(--paper-2); }
.speed-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; place-items: center; align-content: center; text-align: center; padding: 0 22px; }
.speed-num { margin: 6px 0 0; font-family: var(--latin); font-weight: 700; font-size: clamp(150px, 26vw, 340px); line-height: .9; letter-spacing: -0.06em; color: var(--ink); direction: ltr; font-variant-numeric: tabular-nums; }
.speed-num small { font-family: var(--font); font-size: .16em; font-weight: 700; letter-spacing: -0.02em; margin-inline-start: .25em; color: var(--mute); }
.speed-cap { margin: 16px auto 0; max-width: 46ch; color: var(--mute); font-size: clamp(16px, 1.4vw, 19px); }
.race { margin: 46px auto 0; width: min(720px, 90vw); display: grid; gap: 18px; text-align: start; }
.lane { display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; }
.lane .bar { height: 14px; border-radius: 999px; background: #e5e5ea; overflow: hidden; }
.lane .bar i { display: block; height: 100%; width: 0; border-radius: inherit; }
.lane.amit .bar i { background: linear-gradient(90deg, #0a8f7e, #2fd3b8); }
.lane.other .bar i { background: #aeaeb2; }
.lane .val { color: var(--mute); font-weight: 500; }
.lane.amit .val { color: var(--tide); font-weight: 700; }

/* ---------- shared: sections that slide over the previous one, with a soft edge ---------- */
[data-overlap] { position: relative; z-index: 2; margin-top: -100vh; }
.speed[data-overlap] { background: linear-gradient(180deg, rgba(245, 245, 247, 0) 0, rgba(245, 245, 247, .5) 24vh, #f5f5f7 56vh, #f5f5f7 100%); }
.team[data-overlap] { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .6) 24vh, #fff 56vh, #fff 100%); }
.crowd[data-overlap], .trust[data-overlap] { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .12) 12vh, rgba(0, 0, 0, .5) 30vh, rgba(0, 0, 0, .88) 48vh, #000 62vh, #000 100%); }
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.lede { margin: 18px 0 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; color: var(--mute); max-width: 36ch; letter-spacing: -0.01em; }
.note { margin: 18px 0 0; font-size: 13px; color: var(--night-mute); }
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- 4. team ---------- */
.team { height: 360vh; color: var(--ink); }
.team-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(30px, 6vw, 110px); max-width: 1080px; margin: 0 auto; padding: calc(var(--nav-h) + 20px) 22px 20px; }
.team h2 { font-size: clamp(42px, 5.6vw, 76px); margin-top: 10px; }
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps li { position: relative; padding-inline-start: 46px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; color: var(--mute); opacity: .35; transition: opacity .5s var(--ease), color .5s; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--latin); font-size: 14px; font-weight: 700; background: #e8e8ed; color: var(--mute); transition: background .5s, color .5s; }
.steps li[data-on] { opacity: 1; color: var(--ink-2); }
.steps li[data-on]::before { background: var(--tide); color: #fff; }
.steps b { color: var(--ink); font-weight: 700; }
.team-device { margin: 0; transform: none; opacity: 1; }
.team-device .device { --w: min(clamp(270px, 24vw, 340px), calc((100vh - var(--nav-h) - 70px) * .488)); }
.prep { align-self: flex-start; width: 86%; border-radius: .9em; overflow: hidden; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); animation: pop .5s var(--ease) both; font-size: .95em; }
.prep .top { background: linear-gradient(135deg, #0a8f7e, #0b6b60); color: #fff; padding: .55em .8em; font-weight: 600; }
.prep dl { margin: 0; padding: .5em .8em .6em; display: grid; grid-template-columns: auto 1fr; gap: .25em .7em; }
.prep dt { color: #8a8a8e; }
.prep dd { margin: 0; color: #1d1d1f; }
.prep .warn { grid-column: 1 / -1; margin-top: .2em; padding: .35em .5em; border-radius: .5em; background: #fdf3d6; color: #6b4a00; }

/* ---------- 4b. names: a 3D carousel of agents ---------- */
.names { position: relative; z-index: 3; height: 300vh; margin-top: -100vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 22vh, #fff 50vh, #fff 100%); }
.names-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: grid; align-content: center; justify-items: center; text-align: center; padding: calc(var(--nav-h) + 12px) 0 12px; }
.names h2 { font-size: clamp(40px, 5.8vw, 80px); margin-top: 10px; }
.names .lede { margin-inline: auto; max-width: 42ch; text-align: center; }
.ring-stage { --card: min(clamp(190px, 15vw, 230px), calc((100vh - var(--nav-h) - 360px) / 2.05)); position: relative; width: 100%; overflow: hidden; height: calc(var(--card) * 2.05 + 70px); margin-top: clamp(16px, 3vh, 34px); perspective: 1800px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ring-stage.dragging { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 10px; width: var(--card); height: calc(var(--card) * 2.05); margin-left: calc(var(--card) / -2); transform-style: preserve-3d; }
/* כל טלפון במלוא הפרטים (מסגרת, כפתורים, זכוכית), עם השתקפות רכה על הרצפה */
.ring .device { --w: var(--card); position: absolute; inset: 0; width: var(--w); will-change: transform;
  -webkit-box-reflect: below 12px linear-gradient(transparent 86%, rgba(255, 255, 255, .1)); }
.ring .device:not([data-front]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 0 2.5px rgba(0, 0, 0, .18), 0 30px 60px -30px rgba(0, 0, 0, .3); }
.ring .wa { font-size: calc(var(--w) * .05); }
.ring .wa-body { justify-content: flex-start; gap: calc(var(--w) * .03); }
.ring .msg { animation: none; max-width: 86%; }
.ring-cap { margin: 10px 0 0; min-height: 1.6em; font-size: clamp(17px, 1.5vw, 20px); color: var(--mute); }
.ring-cap b { color: var(--ink); font-weight: 700; margin-inline-end: .4em; }
.ring-hint { margin: 6px 0 0; font-size: 13px; color: #a1a1a6; }
@media (max-width: 734px) {
  /* בנייד: מתחילים מלמעלה (בלי שטח מת), והכרטיסים בגודל שנכנס בגובה הגלוי של המסך */
  .names-sticky { align-content: start; padding-top: calc(var(--nav-h) + 22px); }
  .names h2 { font-size: 40px; }
  .names .lede { font-size: 16px; padding: 0 22px; margin-top: 12px; }
  .ring-stage { --card: min(170px, calc((100svh - var(--nav-h) - 330px) / 2.15)); margin-top: 18px; }
}

/* ---------- 5. crowd (campaigns) ---------- */
.crowd { height: 320vh; color: var(--night-ink); }
.crowd-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; place-items: center; align-content: center; text-align: center; padding: calc(var(--nav-h) + 10px) 22px 10px; }
.crowd h2 { font-size: clamp(40px, 5.6vw, 76px); margin-top: 10px; }
.crowd .lede { margin-inline: auto; max-width: 44ch; color: var(--night-mute); }
.dots { margin-top: clamp(24px, 4vh, 44px); display: grid; grid-template-columns: repeat(24, 1fr); gap: clamp(6px, .8vw, 11px); width: min(860px, 92vw); }
.dots i { aspect-ratio: 1; border-radius: 50%; background: #2c2c2e; transition: background .45s var(--ease), transform .45s var(--ease), box-shadow .45s; }
.dots i[data-s="1"] { background: #3a6b63; }
.dots i[data-s="2"] { background: var(--tide-hi); box-shadow: 0 0 12px rgba(47, 211, 184, .55); transform: scale(1.12); }
.dots i[data-s="3"] { background: #e8b84a; box-shadow: 0 0 16px rgba(232, 184, 74, .7); transform: scale(1.25); }
.legend { margin-top: 22px; display: flex; gap: 22px; justify-content: center; font-size: 14px; color: var(--night-mute); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 7px; vertical-align: middle; }
.legend .sent { background: #3a6b63; } .legend .reply { background: var(--tide-hi); } .legend .meet { background: #e8b84a; }

/* ---------- 6. modules (bento) ---------- */
.modules { position: relative; z-index: 3; background: var(--paper-2); padding: clamp(90px, 14vh, 160px) 0; }
.modules h2 { margin-top: 10px; }
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { position: relative; overflow: hidden; border-radius: 28px; background: #fff; padding: 30px 30px 0; min-height: 300px; display: flex; flex-direction: column; }
.tile.big { grid-column: span 2; }
.tile.dark { background: #000; color: var(--night-ink); }
.tile h3 { margin: 14px 0 0; font-family: var(--latin); font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; direction: ltr; text-align: end; }
.tile p { margin: 8px 0 0; color: var(--mute); font-size: 17px; line-height: 1.45; max-width: 34ch; }
.tile.dark p { color: var(--night-mute); }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tag.live { background: var(--tide-soft, #e2f3ef); color: #0a6b5f; }
.tile.dark .tag.live { background: rgba(47, 211, 184, .16); color: var(--tide-hi); }
.tag.soon { background: #ececf0; color: #55555a; }
.tag.pilot { background: #fdf3d6; color: #7a5a17; }
.mini-chat { margin-top: auto; padding: 26px 0 30px; display: grid; gap: 10px; max-width: 360px; }
.mini-chat i { font-style: normal; padding: 10px 14px; border-radius: 16px; font-size: 15px; box-shadow: 0 1px .5px rgba(0,0,0,.12); }
.mini-chat .in { justify-self: start; background: #f2f2f4; }
.mini-chat .out { justify-self: end; background: var(--wa-out); }
.mini-chat .ok { justify-self: end; background: var(--tide); color: #fff; font-weight: 600; }
.mini-dots { margin-top: auto; padding: 26px 0 30px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.mini-dots b { aspect-ratio: 1; border-radius: 50%; background: #2c2c2e; animation: twinkle 4s infinite; }
@keyframes twinkle { 0%, 100% { background: #2c2c2e; } 40% { background: var(--tide-hi); } 60% { background: #3a6b63; } }
.wave { margin-top: auto; padding: 30px 0 40px; display: flex; align-items: center; gap: 6px; height: 120px; }
.wave i { flex: 1; border-radius: 999px; background: linear-gradient(180deg, #2fd3b8, #0a8f7e); height: 30%; animation: wave 1.4s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: .15s; } .wave i:nth-child(3n) { animation-delay: .3s; } .wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes wave { 50% { height: 90%; } }
.ads { margin-top: auto; position: relative; height: 150px; }
.ads i { position: absolute; bottom: -20px; width: 46%; aspect-ratio: 4 / 5; border-radius: 14px; background: linear-gradient(160deg, #1b2a33, #0b8f7f); box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }
.ads i:nth-child(1) { inset-inline-start: 4%; transform: rotate(-8deg); background: linear-gradient(160deg, #e9e3d6, #b98a2e); }
.ads i:nth-child(2) { inset-inline-start: 27%; transform: rotate(2deg); z-index: 1; }
.ads i:nth-child(3) { inset-inline-start: 50%; transform: rotate(9deg); background: linear-gradient(160deg, #26262a, #57575d); }
.bars { margin-top: auto; padding: 26px 0 0; display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #2fd3b8, #0a8f7e); }
.bars i:last-child { background: linear-gradient(180deg, #f3cf72, #b98a2e); }

/* ---------- 7. HQ ---------- */
.hq { position: relative; height: 412vh; background: #fff; }
.hq-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; align-content: center; justify-items: center; gap: clamp(26px, 5vh, 48px); padding: calc(var(--nav-h) + 16px) 22px 16px; text-align: center; }
.hq h2 { font-size: clamp(36px, 5vw, 68px); margin-top: 10px; }
.hq .lede { margin-inline: auto; max-width: 52ch; }
.screen-mock { width: min(880px, 100%); box-sizing: border-box; border-radius: 18px; background: #fbfbfd; border: 1px solid #e5e5ea; box-shadow: 0 40px 80px -40px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.05); overflow: hidden; text-align: start; }
.sm-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #ececf0; background: #f5f5f7; direction: ltr; }
.sm-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .sm-bar i:nth-child(2) { background: #febc2e; } .sm-bar i:nth-child(3) { background: #28c840; }
.sm-bar span { margin-inline-start: 12px; font-size: 12.5px; color: var(--mute); font-family: var(--latin); }
.sm-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; padding: 24px; }
.funnel { display: grid; gap: 12px; }
.f { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; overflow: hidden; font-size: 15px; }
.f i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--tide-soft, #e2f3ef); border-radius: 12px; z-index: 0; transition: width .2s linear; }
.f.gold i { background: #fdf3d6; }
.f span, .f b { position: relative; z-index: 1; }
.f b { font-family: var(--latin); font-variant-numeric: tabular-nums; }
.branches { transition: opacity .5s var(--ease); }
.branches p { margin: 0 0 12px; font-size: 13px; color: var(--mute); transition: color .4s, font-weight .4s; }
.screen-mock[data-phase="2"] .branches p { color: var(--ink); font-weight: 700; }
.br { position: relative; }
.br i { width: 0; }
.br { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; font-size: 14px; }
.br span { display: flex; justify-content: space-between; }
.br i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #0a8f7e, #2fd3b8); }
.br b { font-family: var(--latin); font-size: 13px; color: var(--tide); }
.sm-note { margin: 0; padding: 0 24px 16px; font-size: 12px; color: #a1a1a6; }

/* ---------- 8. trust ---------- */
.trust { height: 240vh; color: var(--night-ink); }
.trust-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; align-content: center; max-width: 1024px; margin: 0 auto; padding: calc(var(--nav-h) + 16px) 22px 16px; }
.trust h2 { font-size: clamp(38px, 5.4vw, 74px); margin-top: 10px; }
.trust h2 span { background: linear-gradient(135deg, #2fd3b8, #0a8f7e 60%, #e9fff9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pillars { margin-top: clamp(30px, 6vh, 60px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pillars div { display: grid; gap: 8px; border-top: 1px solid #333336; padding-top: 18px; }
.pillars b { font-size: 19px; font-weight: 700; }
.pillars span { color: var(--night-mute); font-size: 15.5px; line-height: 1.45; }

/* ---------- 9. results ---------- */
.results { position: relative; z-index: 3; background: #fff; padding: clamp(100px, 16vh, 170px) 0; }
.results h2 { margin-top: 10px; }
.nums { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.nums div { display: grid; gap: 8px; }
.nums b { font-family: var(--latin); font-size: clamp(64px, 8vw, 112px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; direction: ltr; text-align: end;
  background: linear-gradient(135deg, #0a8f7e, #1d1d1f 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nums small { font-family: var(--font); font-size: .3em; letter-spacing: 0; margin-inline-start: .15em; }
.nums span { color: var(--mute); font-size: 17px; }
.results .note { color: #a1a1a6; }

/* ---------- 10. founder ---------- */
.founder { position: relative; z-index: 3; background: var(--paper-2); padding: clamp(90px, 14vh, 150px) 0; }
.founder blockquote { margin: 18px 0 0; font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; max-width: 30ch; }
.sig { margin: 34px 0 0; display: flex; gap: 14px; align-items: center; }
.mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 20px; flex: none; }
.sig span { display: grid; }
.sig small { color: var(--mute); font-size: 15px; }

/* ---------- 11. demo ---------- */
.demo { position: relative; z-index: 3; background: #000; color: var(--night-ink); padding: clamp(100px, 16vh, 170px) 0; }
.demo h2 { font-size: clamp(42px, 6vw, 84px); }
.demo .lede { color: var(--night-mute); }
.form { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; }
.form label { display: grid; gap: 8px; font-size: 14px; color: var(--night-mute); }
.form input, .form select { font: inherit; font-size: 17px; color: #fff; background: #1c1c1e; border: 1px solid #38383a; border-radius: 14px; padding: 14px 16px; outline: none; transition: border-color .2s; }
.form input:focus, .form select:focus { border-color: var(--tide-hi); }
.form button { grid-column: 1 / -1; justify-self: start; border: 0; font: inherit; font-size: 17px; cursor: pointer; margin-top: 6px; }
.form-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--night-mute); }
.form-note a { color: var(--tide-hi); }
.foot { position: relative; z-index: 3; background: #000; color: var(--night-mute); border-top: 1px solid #1c1c1e; font-size: 13px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding-block: 26px; }
.foot .logo { color: #fff; }
.foot a { color: var(--night-mute); }

@media (max-width: 899px) {
  .team-sticky { grid-template-columns: 1fr; align-content: start; justify-items: center; gap: 18px; padding-top: calc(var(--nav-h) + 18px); text-align: center; }
  .team .steps { display: none; }
  .team .lede { font-size: 15px; line-height: 1.4; margin: 6px auto 0; max-width: 36ch; text-align: center; }
  .team .eyebrow { display: none; }
  .team h2 br { display: none; }
  /* בנייד: לפי הגובה הגלוי של המסך (בלי הסרגלים של ספארי), כך שהטלפון נכנס שלם מתחת לכותרת */
  .team-device .device { --w: min(80vw, 330px, calc((100svh - var(--nav-h) - 205px) * .488)); }
  .team-sticky { height: 100svh; padding-top: calc(var(--nav-h) + 14px); gap: 14px; }
  .team h2 { font-size: 34px; margin-top: 6px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile.big { grid-column: span 2; }
  .sm-body { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 734px) {
  .bento { grid-template-columns: 1fr; }
  .tile.big { grid-column: auto; }
  .tile { min-height: 260px; }
  .dots { grid-template-columns: repeat(12, 1fr); width: min(330px, 86vw); margin-top: 18px; }
  .crowd h2 { font-size: 34px; }
  .crowd .lede { font-size: 15px; margin-top: 12px; }
  .legend { margin-top: 14px; gap: 12px; font-size: 13px; }
  .nums { grid-template-columns: 1fr; gap: 26px; }
  .form { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 18px; }
  .hq-sticky { gap: 18px; }
  .crowd .lede { font-size: 16px; }
}
@media (max-width: 734px) {
  /* נייד: כותרת שנכנסת במסך, טלפון בגודל שנראה שלם, ופחות גלילה בכל פרק */
  .hero-sticky { padding-top: calc(var(--nav-h) + 22px); }
  .kicker { margin-bottom: 8px; font-size: 15px; }
  .hero h1 { font-size: 10.6vw; line-height: 1.05; }
  .hero-sub { font-size: 17px; margin-top: 12px; }
  .links { margin-top: 18px; gap: 18px; font-size: 15px; }
  .pill { padding: 9px 18px; }
  .device { --w: min(74vw, 300px); }
  .device-wrap { margin-top: 22px; }
  .night { height: 400vh; }
  .speed { height: 296vh; }
  .speed-cap { font-size: 15px; }
  .race { margin-top: 32px; }
  .night-kicker { font-size: 20px; }
  .night-line { font-size: 34px; }
  .hero h1 br { display: none; }
  .clock { font-size: 25vw; }
  .ping { max-width: 46vw; white-space: normal; }
  .ping .ok { display: none; }
  .ping .t b { white-space: nowrap; }
  .nav nav { display: none; }
  .nav-cta { margin-inline-start: auto; }
  .hero { height: 390vh; }
  .lane { grid-template-columns: 64px 1fr 72px; gap: 10px; font-size: 14px; }
  .night-cap { font-size: 20px; }
  .ping { font-size: 12.5px; padding: 8px 12px; }
  .ping .t small { display: block; color: var(--tide-hi); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .device-wrap { transform: none; }
}

/* צילומי מסך: בלי מעברים, כדי שהצילום יראה את המצב הסופי */
html.shot [data-overlap] { margin-top: 0; }
html.shot *, html.shot *::before, html.shot *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }

/* הכיתוב ליד הטלפון בזמן שהשיחה מתקדמת — במחשב בצד, בנייד לא מוצג (אין מקום) */
.hero-caption { position: absolute; top: 38%; inset-inline-end: calc(100% + clamp(40px, 6vw, 110px)); width: clamp(220px, 24vw, 340px); margin: 0;
  font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); text-align: start; opacity: 0; }
.hero-caption.in { animation: capIn .6s var(--ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .hero-caption { display: none; } }

/* ---------- English (en/index.html): Inter, left-to-right ---------- */
:root[lang="en"] { --font: "Inter", "Heebo", system-ui, sans-serif; }
:root[lang="en"] h1, :root[lang="en"] h2 { letter-spacing: -0.04em; }
:root[lang="en"] .tile h3, :root[lang="en"] .nums b { text-align: start; }
:root[lang="en"] .more:hover i { transform: translateX(4px); }
:root[lang="en"] .speed-num small, :root[lang="en"] .nums small { font-family: var(--latin); }
:root[lang="en"] .lane { grid-template-columns: 120px 1fr 120px; }
@media (max-width: 734px) { :root[lang="en"] .lane { grid-template-columns: 92px 1fr 96px; } }

/* the speed timeline: 0 → 29 sec → 5 min → 1 hour → next day. The dot and its number move with the big counter */
.timeline { margin: 44px auto 0; width: min(760px, 88vw); }
.tl-track { position: relative; height: 6px; border-radius: 999px; background: #e8e8ed; }
.tl-track i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 999px; }
.tl-fill { background: linear-gradient(90deg, #0a8f7e, #2fd3b8); z-index: 1; }
:root[dir="rtl"] .tl-fill { background: linear-gradient(270deg, #0a8f7e, #2fd3b8); }
.tl-grey { background: linear-gradient(90deg, #c7c7cc, #8e8e93); }
:root[dir="rtl"] .tl-grey { background: linear-gradient(270deg, #c7c7cc, #8e8e93); }
.tl-dot { position: absolute; z-index: 2; top: 50%; inset-inline-start: 0; width: 18px; height: 18px; margin-top: -9px; margin-inline-start: -9px; border-radius: 50%; background: #fff; border: 3px solid #0a8f7e; box-shadow: 0 2px 10px rgba(10, 143, 126, .3); }
.tl-dot span { position: absolute; bottom: 30px; left: 50%; translate: -50% 0; white-space: nowrap; font-family: var(--latin); font-size: 15px; font-weight: 700; color: var(--tide); font-variant-numeric: tabular-nums; }
.tl-ticks { position: relative; height: 28px; margin-top: 14px; font-size: 13px; color: #86868b; }
.tl-ticks span { position: absolute; inset-inline-start: calc(var(--x) * 100%); translate: calc(var(--x) * -100%) 0; white-space: nowrap; }
:root[dir="rtl"] .tl-ticks span { translate: calc(var(--x) * 100%) 0; }
.tl-cap { margin: 18px 0 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.tl-cap.in { opacity: 1; transform: none; }

/* "למחרת" נצבע באדום, עם איקס מעליו, כשהאפור מגיע אליו */
.tl-end { transition: color .4s var(--ease); }
.tl-end::before { content: "✕"; position: absolute; bottom: calc(100% + 26px); left: 50%; translate: -50% 0; font-size: 18px; font-weight: 800; color: #e0352b; opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease), transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.tl-end.bad { color: #e0352b; font-weight: 700; }
.tl-end.bad::before { opacity: 1; transform: none; }
.tl-cap { max-width: 44ch; margin-inline: auto; }
/* כפתורי הצד: עדינים יותר בטלפונים הקטנים, ובנייד כמעט לא בולטים */
.ring .btn-side { width: 2px; opacity: .55; }
.ring .btn-side.a, .ring .btn-side.b { inset-inline-start: -2px; }
.ring .btn-side.c { inset-inline-end: -2px; }
@media (max-width: 734px) {
  .btn-side { width: 2px; opacity: .5; }
  .btn-side.a, .btn-side.b { inset-inline-start: -2px; }
  .btn-side.c { inset-inline-end: -2px; }
  .ring .btn-side { opacity: .3; }
}
/* החלק העליון של הטלפון בנייד: פחות צפוף — אי קטן יותר, שעה וסמלים קטנים, ומרווח לפני שורת השם */
@media (max-width: 734px) {
  .island { width: 27%; height: calc(var(--w) * .075); top: calc(var(--w) * .04); }
  .wa-status { padding: calc(var(--w) * .05) calc(var(--w) * .09) calc(var(--w) * .035); font-size: calc(var(--w) * .038); }
  .wa-status .icons i { width: 4px; height: 6px; } .wa-status .icons i:nth-child(1) { height: 4px; margin-top: 2px; } .wa-status .icons i:nth-child(3) { width: 12px; }
  .wa-head { padding-top: calc(var(--w) * .03); }
  /* בקרוסלה הטלפונים קטנים מאוד — בלי שעה וסמלים, רק האי */
  .ring .wa-status > * { visibility: hidden; }
  .ring .av { width: calc(var(--w) * .11); height: calc(var(--w) * .11); font-size: .9em; }
}

/* בטוח למותג: העקרונות נכנסים אחד-אחד עם הגלילה */
.pillar { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pillar.on { opacity: 1; transform: none; }
@media (max-width: 734px) {
  /* בנייד: ממורכז בגובה הגלוי (בלי הסרגלים של ספארי), כך שאין שטח שחור ריק מתחת לעקרונות */
  .trust { height: 200vh; }
  .trust-sticky { height: 100svh; align-content: center; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 12px; }
  .results { padding: 64px 0 80px; }
  .trust h2 { font-size: 36px; }
  .pillars { margin-top: 24px; gap: 14px; }
  .pillars div { padding-top: 14px; gap: 4px; }
  .pillars b { font-size: 17px; }
  .pillars span { font-size: 14.5px; }
}

/* Amit HQ בנייד: מתחילים מלמעלה בגובה הגלוי, בלי ההסבר הארוך; המשפך ואז "לפי סוכנות" באותו מקום, אחד אחרי השני */
@media (max-width: 899px) {
  .hq { height: 364vh; }
  .hq-sticky { height: 100svh; align-content: start; gap: 18px; padding-top: calc(var(--nav-h) + 20px); }
  .hq h2 { font-size: 30px; }
  .hq .lede { display: none; }
  .sm-body { position: relative; display: grid; grid-template-columns: 1fr; padding: 16px; }
  .funnel, .branches { grid-area: 1 / 1; transition: opacity .5s var(--ease); }
  .f { padding: 9px 12px; font-size: 14px; }
  .screen-mock:not([data-phase="2"]) .branches { opacity: 0; pointer-events: none; }
  .screen-mock[data-phase="2"] .funnel { opacity: 0; }
  .branches p { font-size: 15px; }
  .br { margin-bottom: 18px; font-size: 15px; }
  .br i { height: 10px; }
}

/* הכיתוב בנייד: בלי קופסה — טקסט נקי וחד מעל הטלפון, עם שורת נקודות קטנה שמראה באיזה שלב השיחה */
.hero-cap-m { display: none; }
@media (max-width: 899px) {
  .hero-cap-m { display: grid; justify-items: center; gap: 8px; position: absolute; z-index: 5; top: calc(var(--nav-h) + 10px); left: 0; right: 0; margin: 0; padding: 0 22px;
    text-align: center; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); opacity: 0; transition: opacity .4s var(--ease); }
  .hero-cap-m.on { opacity: 1; }
  .hero-cap-m .txt { display: block; }
  .hero-cap-m.in .txt { animation: capIn .55s var(--ease) both; }
  .hero-cap-m .steps-dots { display: flex; gap: 6px; }
  .hero-cap-m .steps-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c5c5cb; transition: background .35s, width .35s var(--ease); }
  .hero-cap-m .steps-dots i.on { width: 18px; border-radius: 999px; background: var(--tide); }
}

/* הצוות בנייד: שורת השלב הנוכחי מתחת לטלפון (במחשב — הרשימה הממוספרת בצד) */
.team-cap-m { display: none; }
@media (max-width: 899px) {
  .team-copy { text-align: center; }
  .team-sticky { grid-template-rows: auto auto auto; align-content: start; gap: 10px; }
  .team-cap-m { display: block; order: 3; margin: 0; min-height: 2.7em; padding: 0 22px; text-align: center; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
  .team-cap-m b { color: var(--ink); }
  .team-cap-m.in { animation: capIn .5s var(--ease) both; }
  .team-device { order: 2; }
}
/* הצוות בנייד — ריווח צמוד: ההסבר, מיד אחריו הטלפון, ומתחתיו שורת השלב, הכל בתוך הגובה הגלוי */
@media (max-width: 899px) {
  .team-sticky { row-gap: 6px; padding-bottom: 8px; }
  .team .lede { margin-bottom: 0; }
  .team-device .device { --w: min(80vw, 330px, calc((100svh - var(--nav-h) - 215px) * .488)); }
  .team-cap-m { min-height: 0; margin-top: 4px; }
}
@media (max-width: 899px) {
  .team-sticky { align-items: start; grid-template-rows: auto auto auto; }
}
@media (max-width: 899px) {
  .team-sticky .team-device { margin-top: 2px; }
  .team-device .device { --w: min(82vw, 340px, calc((100svh - var(--nav-h) - 220px) * .488)); }
}
/* הצוות בנייד — כותרת בשורה אחת, והשורה שמתחת לטלפון תמיד בתוך המסך */
@media (max-width: 899px) {
  .team h2 .br-d { display: none; }
  .team h2 { white-space: nowrap; font-size: min(34px, 8vw); text-align: center; max-width: none; width: 100%; margin-inline: 0; }
  html[lang="en"] .team h2 { font-size: min(34px, 5.9vw); }
  .team-device .device { --w: min(82vw, 340px, calc((100svh - var(--nav-h) - 200px) * .488)); }
}
/* הכיתוב בפתיחה בנייד — באנגלית קצת קטן יותר, כדי שתמיד ייכנס בשורה אחת ולא ידחוף את הנקודות אל הטלפון */
@media (max-width: 899px) { .hero-cap-m { font-size: min(19px, 4.6vw); } }
/* טופס ההדגמה בנייד — הכל במסך אחד: פחות ריווח למעלה, כותרת קומפקטית, שני שדות בשורה וכפתור ברוחב מלא */
@media (max-width: 899px) {
  .demo { padding: calc(var(--nav-h) + 28px) 0 40px; min-height: 100svh; box-sizing: border-box; }
  .demo h2 { font-size: 34px; line-height: 1.1; }
  .demo .lede { font-size: 15px; line-height: 1.45; margin-top: 10px; }
  .form { grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 22px; }
  .form label { gap: 6px; font-size: 13px; min-width: 0; }
  .form input, .form select { font-size: 16px; padding: 11px 12px; border-radius: 12px; min-width: 0; width: 100%; box-sizing: border-box; }
  .form button { justify-self: stretch; margin-top: 8px; padding-block: 13px; }
  .form-note { font-size: 13px; line-height: 1.45; text-align: center; }
}
/* הלילה והאחוזים בנייד — המרכוז לפי האזור הגלוי בפועל: מתחת לתפריט ומעל השורה התחתונה של הדפדפן */
@media (max-width: 899px) {
  .night-sticky, .speed-sticky { box-sizing: border-box; padding-top: var(--nav-h); padding-bottom: calc(100lvh - 100svh); padding-bottom: calc(100lvh - 100dvh); }
}
/* הלילה בנייד — המשפט מעל השעון מתחיל בערך בשליש העליון, הבועות מסביב (שלוש מעל, השאר מתחת) */
@media (max-width: 899px) {
  .night-sticky { align-content: start; padding-top: calc(var(--nav-h) + 24svh); padding-bottom: 0; }
}
@media (max-width: 899px) {
  .night-end { padding-top: var(--nav-h); padding-bottom: calc(100lvh - 100svh); padding-bottom: calc(100lvh - 100dvh); box-sizing: border-box; }
}
/* ה-63 בנייד נכנס בדיוק בגובה של השעון שהוא מחליף */
@media (max-width: 899px) {
  .night-end { align-content: start; padding-top: calc(var(--nav-h) + 24svh + 36px); padding-bottom: 0; }
}
/* הקמפיינים בנייד — מרכוז לפי האזור הגלוי בפועל */
@media (max-width: 899px) {
  .crowd-sticky { box-sizing: border-box; padding-top: calc(var(--nav-h) + 10px); padding-bottom: calc(100lvh - 100svh + 10px); padding-bottom: calc(100lvh - 100dvh + 10px); }
}
/* הנקודות — אנימציה רכה ויוקרתית: מעברי צבע איטיים, זוהר עדין, טבעת זהב אחת לכל פגישה שנקבעה */
.dots i { position: relative; background: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: background 1.1s cubic-bezier(.2, .7, .2, 1), box-shadow 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.dots i[data-s="1"] { background: #2b4f49; box-shadow: inset 0 0 0 1px rgba(47, 211, 184, .18); }
.dots i[data-s="2"] { background: radial-gradient(circle at 35% 30%, #8ff0dd, var(--tide-hi) 55%, #17917d); box-shadow: 0 0 14px rgba(47, 211, 184, .45); transform: scale(1.08); }
.dots i[data-s="3"] { background: radial-gradient(circle at 35% 30%, #fff1c9, #e8b84a 55%, #a87a1e); box-shadow: 0 0 18px rgba(232, 184, 74, .6); transform: scale(1.16); }
.dots i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid transparent; opacity: 0; pointer-events: none; }
.dots i[data-s="2"]::after { border-color: rgba(47, 211, 184, .55); animation: dotRing 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.dots i[data-s="3"]::after { border-color: rgba(232, 184, 74, .75); animation: dotRing 1.8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dotRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .dots i::after { animation: none; } }
/* הקמפיינים בנייד — עוד קצת גלילה בעצירה, כדי שהאנימציה תסתיים ותישאר רגע לעין */
@media (max-width: 899px) { .crowd { height: 380vh; } }
/* לוח התוצאות של הקמפיין — שעון 15 דקות ומונים חיים, בשורה אחת דקה ונקייה */
.board { margin: 22px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); width: min(620px, 100%); border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.board .cell { display: grid; gap: 4px; justify-items: center; padding: 12px 6px; }
.board .cell + .cell { border-inline-start: 1px solid rgba(255, 255, 255, .08); }
.board b { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; line-height: 1; }
.board span { font-size: 12.5px; color: var(--night-mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.board span i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.board .sent { background: #3a6b63; } .board .reply { background: var(--tide-hi); } .board .meet { background: #e8b84a; }
.board .clockcell b { background: linear-gradient(180deg, #fff, #9a9aa0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.board .meetcell b { transition: color .8s, text-shadow .8s; }
.board[data-done] .meetcell b { color: #f3cf74; text-shadow: 0 0 18px rgba(232, 184, 74, .55); }
@media (max-width: 899px) {
  .board { margin-top: 14px; }
  .board .cell { padding: 10px 2px; }
  .board b { font-size: 21px; }
  .board span { font-size: 10.5px; gap: 4px; }
  .board span i { width: 6px; height: 6px; }
}
/* הקמפיינים בנייד — התוכן צמוד למעלה מתחת לתפריט, כדי שהלוח והמקרא בתחתית תמיד ייראו */
@media (max-width: 899px) {
  .crowd-sticky { align-content: start; padding-top: calc(var(--nav-h) + 6px); }
  .crowd .eyebrow { margin: 0; }
  .crowd h2 { margin-top: 4px; }
}
/* הנקודות בכרטיס הקמפיינים — מלאות ויוקרתיות, באותה שפה של פרק הקמפיינים */
.mini-dots b { animation: none; background: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.mini-dots b[data-s="1"] { background: #2b4f49; box-shadow: inset 0 0 0 1px rgba(47, 211, 184, .18); }
.mini-dots b[data-s="2"] { background: radial-gradient(circle at 35% 30%, #8ff0dd, var(--tide-hi) 55%, #17917d); box-shadow: 0 0 10px rgba(47, 211, 184, .4); animation: miniBreath 5s ease-in-out infinite; }
.mini-dots b[data-s="3"] { background: radial-gradient(circle at 35% 30%, #fff1c9, #e8b84a 55%, #a87a1e); box-shadow: 0 0 12px rgba(232, 184, 74, .55); animation: miniBreath 5s ease-in-out infinite; }
@keyframes miniBreath { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.25); transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mini-dots b { animation: none !important; } }
/* כרטיס Amit Creative בנייד — המודעות מתחת לטקסט, עם מרווח, בלי לעלות על השורה האחרונה */
@media (max-width: 899px) {
  .ads { height: 150px; margin-top: 28px; }
  .ads i { width: 38%; }
  .ads i:nth-child(2) { inset-inline-start: 31%; }
  .ads i:nth-child(3) { inset-inline-start: 58%; }
}
/* Amit Voice — נגן שיחת הדגמה: כפתור עגול, גל קול שזז לפי הקול האמיתי, ופס התקדמות דק */
.call-player { margin-top: auto; padding: 26px 0 30px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "btn meta" "wave wave" "track track"; align-items: center; column-gap: 14px; row-gap: 16px; }
.call-btn { grid-area: btn; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5fe6cf, var(--tide) 60%, #087565); box-shadow: 0 10px 24px -10px rgba(10, 143, 126, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .3s var(--ease), box-shadow .3s; }
.call-btn:hover { transform: scale(1.05); }
.call-btn:active { transform: scale(.96); }
.call-btn svg { width: 22px; height: 22px; }
.call-btn .i-pause, .call-player[data-on] .call-btn .i-play { display: none; }
.call-player[data-on] .call-btn .i-pause { display: block; }
.call-player:not([data-on]) .call-btn { animation: callPulse 2.6s ease-out infinite; }
@keyframes callPulse { 0% { box-shadow: 0 0 0 0 rgba(47, 211, 184, .45), 0 10px 24px -10px rgba(10, 143, 126, .7); } 70%, 100% { box-shadow: 0 0 0 14px rgba(47, 211, 184, 0), 0 10px 24px -10px rgba(10, 143, 126, .7); } }
.call-meta { grid-area: meta; display: grid; gap: 2px; text-align: start; }
.call-meta b { font-size: 16px; font-weight: 700; color: var(--ink); }
.call-meta span { font-size: 13px; color: var(--mute); }
.call-wave { grid-area: wave; display: flex; align-items: center; gap: 4px; height: 56px; }
.call-wave i { flex: 1; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #2fd3b8, #0a8f7e); transform: scaleY(var(--v, .14)); transition: transform .09s linear; opacity: .9; }
.call-player:not([data-on]) .call-wave i { animation: callIdle 2.8s ease-in-out infinite; animation-delay: calc(var(--k) * -0.11s); transition: none; }
@keyframes callIdle { 0%, 100% { transform: scaleY(.12); } 50% { transform: scaleY(.3); } }
.call-track { grid-area: track; height: 3px; border-radius: 3px; background: #e6e6ea; overflow: hidden; }
.call-track i { display: block; height: 100%; width: 100%; background: var(--tide); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
html[dir="rtl"] .call-track i { transform-origin: 100% 50%; }
@media (prefers-reduced-motion: reduce) { .call-player .call-wave i, .call-btn { animation: none !important; } }
/* מעבר מהתפריט אל המודולים — הכותרת נוחתת מיד מתחת לתפריט, בלי חלל ריק למעלה */
#modules { scroll-margin-top: calc(var(--nav-h) + 28px); }
/* המודולים במחשב — כותרת וכרטיסים קומפקטיים, כדי שאחרי לחיצה בתפריט יראו את כל המודולים במסך אחד */
@media (min-width: 900px) {
  .modules h2 { font-size: clamp(40px, 4.2vw, 64px); }
  .modules .lede { margin-top: 12px; }
  .bento { margin-top: 32px; gap: 16px; }
  .tile { padding: 24px 28px 0; min-height: 0; }
  .tile h3 { margin-top: 10px; }
  .mini-chat { padding: 16px 0 22px; gap: 8px; }
  .mini-chat i { padding: 8px 13px; }
  .mini-dots { padding: 18px 0 24px; gap: 6px; }
  .call-player { padding: 16px 0 22px; row-gap: 12px; }
  .call-wave { height: 44px; }
  .wave { height: 90px; padding: 18px 0 24px; }
  .ads { height: 120px; margin-top: 16px; }
}
@media (min-width: 900px) {
  .tile p { font-size: 16px; max-width: 42ch; }
  .modules h2 { margin-top: 6px; line-height: 1.04; }
}
@media (min-width: 900px) {
  .modules .lede { max-width: none; }
  .tile p { max-width: none; }
}
@media (min-width: 900px) {
  .ads { height: 130px; margin-top: 18px; }
  .ads i { width: 36%; }
  .ads i:nth-child(2) { inset-inline-start: 30%; }
  .ads i:nth-child(3) { inset-inline-start: 56%; }
}
/* טופס ההדגמה — שדה המלכודת לבוטים מוסתר, והודעת התודה אחרי שליחה */
.form .hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-done { margin-top: 32px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; color: var(--tide-hi); }
/* כניסה לדשבורד מהאתר — קישור עדין בתפריט, ליד שפת האתר וכפתור ההדגמה */
.nav-login { font-size: 13px; font-weight: 500; opacity: .8; }
.nav-login:hover { opacity: 1; }
@media (max-width: 899px) {
  .nav-login { margin-inline-start: auto; font-size: 13px; }
  .nav-login ~ .nav-cta { margin-inline-start: 0; }
}
/* ---------- ריחוף: הכותרת הראשית — אור רך שנחשף איפה שהעכבר עובר (רק במחשב) ---------- */
@property --spot { syntax: '<length>'; initial-value: 0px; inherits: true; }
@media (hover: hover) and (pointer: fine) {
  .hero h1 {
    background: radial-gradient(circle calc(var(--spot) + 1px) at var(--mx, 50%) var(--my, 50%), #5fe6cf 0%, #12a892 38%, var(--ink) 100%) var(--ink);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: --spot .7s cubic-bezier(.2, .7, .2, 1);
  }
  .hero h1.lit { --spot: 240px; }
  /* הילה חלשה מאחורי האותיות, באותו מקום של האור */
  .hero-copy { position: relative; isolation: isolate; }
  /* עיגול חופשי שזז עם העכבר — בלי קופסה שחותכת אותו */
  .hero-copy::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; top: 0; width: 560px; height: 560px; border-radius: 50%;
    transform: translate(calc(var(--cx, 0px) - 280px), calc(var(--cy, 0px) - 280px));
    background: radial-gradient(closest-side, rgba(47, 211, 184, .12), rgba(47, 211, 184, .05) 55%, transparent);
    opacity: 0; transition: opacity .7s cubic-bezier(.2, .7, .2, 1); }
  .hero-copy.lit::before { opacity: 1; }
}

/* ---------- הטלפון בפתיחה: עובי אמיתי בתלת־ממד — שכבות של המסגרת מאחור, כך שבזווית רואים את הצד ---------- */
.device .edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform-style: preserve-3d; }
.device .edge i { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(calc(var(--z) * -1px));
  background: linear-gradient(145deg, #c9ccd0, #8d9298 40%, #b6babf 70%, #7f848a); }
.device .edge i:last-child { background: linear-gradient(145deg, #a9adb2, #6f747a); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); }
.device[data-tilt] { transition: none; will-change: transform; }
.device[data-tilt] > .glass, .device[data-tilt] > .btn-side { transform: translateZ(.5px); }
/* ---------- ריחוף: כפתורים וקישורים בפתיחה ובתפריט ---------- */
.pill, .nav-cta { display: inline-block; transition: background .3s, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover, .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(10, 143, 126, .55), 0 0 0 4px rgba(47, 211, 184, .14); }
  /* קו דק שנמתח מהמרכז מתחת לקישור */
  .nav nav a, .nav-login { position: relative; transition: opacity .25s; }
  .nav nav a::after, .nav-login::after { content: ""; position: absolute; inset-inline: 0; bottom: -5px; height: 1.5px; border-radius: 2px; background: currentColor;
    transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .nav nav a:hover, .nav-login:hover { opacity: 1; }
  .nav nav a:hover::after, .nav-login:hover::after { transform: scaleX(1); }
  .more i { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .more:hover i { transform: translateX(-6px); }
  html[lang="en"] .more:hover i { transform: translateX(6px); }
}
/* בטלפון: תגובה עדינה ללחיצה במקום ריחוף */
.pill:active, .nav-cta:active { transform: scale(.97); }
/* ---------- ריחוף: המשפט מתחת לכותרת — כל אות ליד העכבר מתבלטת קצת, עם דעיכה רכה לאותיות שמסביב ---------- */
.hero-sub .hw { display: inline-block; white-space: nowrap; }
.hero-sub .hch { display: inline-block; transform: translateY(calc(var(--k, 0) * -4px)) scale(calc(1 + var(--k, 0) * .14)); transform-origin: 50% 80%;
  color: color-mix(in srgb, var(--ink) calc(var(--k, 0) * 100%), currentColor); transition: transform .25s cubic-bezier(.2, .7, .2, 1), color .25s; }
/* ---------- בטלפון: פס אור שעובר פעם אחת על הכותרת, וגל על אותיות המשפט ---------- */
@media (hover: none), (pointer: coarse) {
  .hero h1.sweep {
    background: linear-gradient(105deg, var(--ink) 40%, #12a892 46%, #5fe6cf 50%, #12a892 54%, var(--ink) 60%) var(--ink);
    background-size: 260% 100%; background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: titleSweep 1.6s cubic-bezier(.45, 0, .2, 1) forwards; will-change: background-position;
  }
  html[lang="en"] .hero h1.sweep { animation-name: titleSweepEn; }
  .hero-sub .hw { display: inline-block; white-space: nowrap; }
  .hero-sub .hch { display: inline-block; }
  .hero-sub.hs-wave .hch { animation: chWave .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; }
}
@keyframes titleSweep { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes titleSweepEn { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes chWave { 0%, 100% { transform: none; color: inherit; } 40% { transform: translateY(-4px) scale(1.12); color: var(--ink); } }

/* ---------- לחיצה בטלפון: תגובה מיידית ומורגשת (ספארי באייפון מפעיל את זה רק כשהדף מאזין למגע — ב-JS) ---------- */
a, button { -webkit-tap-highlight-color: transparent; }
.pill:active, .nav-cta:active, .call-btn:active { transform: scale(.94); transition-duration: .08s; filter: brightness(.92); }
.more:active, .lang:active, .nav-login:active, .foot a:active { opacity: .55; transition: opacity .08s; }
/* ---------- ריחוף: כרטיסי המודולים — מתרוממים, משטח אור עדין לפי העכבר, ובכל כרטיס משהו קטן שמתעורר ---------- */
.tile { transition: opacity .9s var(--ease), transform .9s var(--ease), translate .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 30%), rgba(47, 211, 184, .09), transparent 70%); }
.tile.dark::after { background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .09), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { translate: 0 -6px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .28); }
  .tile:hover::after { opacity: 1; }
  /* Sales: הבועות בשיחה מתעוררות אחת אחרי השנייה */
  .mini-chat i { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s; }
  .tile.sales:hover .mini-chat i { transform: translateY(-3px); }
  .tile.sales:hover .mini-chat i:nth-child(2) { transition-delay: .06s; }
  .tile.sales:hover .mini-chat i.ok { transition-delay: .12s; transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 22px -10px rgba(10, 143, 126, .7); }
  /* Campaigns: גל אור עובר על הנקודות מהמרכז החוצה */
  .tile.campaigns:hover .mini-dots b { animation: miniWave 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
  /* Voice: גל הקול מתגבר */
  .tile.voice:hover .call-player:not([data-on]) .call-wave i { animation-name: callIdleHi; animation-duration: 1.3s; }
  /* Creative: המודעות נפתחות כמו מניפה */
  .ads i { transition: transform .55s cubic-bezier(.2, .7, .2, 1), translate .55s cubic-bezier(.2, .7, .2, 1); }
  .tile.creative:hover .ads i:nth-child(1) { transform: rotate(-15deg); translate: -14% 0; }
  .tile.creative:hover .ads i:nth-child(2) { transform: rotate(0deg); translate: 0 -10px; }
  .tile.creative:hover .ads i:nth-child(3) { transform: rotate(16deg); translate: 14% 0; }
  /* HQ: העמודות עולות מחדש, אחת אחרי השנייה */
  .tile.hq-tile:hover .bars i { animation: barRise .8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 100%; }
  .tile.hq-tile:hover .bars i:nth-child(2) { animation-delay: .06s; } .tile.hq-tile:hover .bars i:nth-child(3) { animation-delay: .12s; }
  .tile.hq-tile:hover .bars i:nth-child(4) { animation-delay: .18s; } .tile.hq-tile:hover .bars i:nth-child(5) { animation-delay: .24s; }
}
@keyframes miniWave { 0%, 100% { transform: none; filter: none; } 35% { transform: scale(1.22); filter: brightness(1.6); } }
@keyframes callIdleHi { 0%, 100% { transform: scaleY(.16); } 50% { transform: scaleY(.62); } }
@keyframes barRise { from { transform: scaleY(.15); } to { transform: none; } }
/* בטלפון: לחיצה על כרטיס — מתכווץ לרגע */
.tile:active { transform: scale(.985); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .tile:hover { translate: none; } .tile .mini-dots b, .tile .bars i { animation: none !important; } }
/* ---------- ריחוף: ה-63 — אותו אור בהיר שבקצה הגרדיאנט שלו, נחשף איפה שהעכבר עובר ---------- */
@property --spot2 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@media (hover: hover) and (pointer: fine) {
  .big-stat {
    background:
      radial-gradient(circle calc(var(--spot2) + 1px) at var(--sx, 50%) var(--sy, 50%), #f2fffb 0%, rgba(233, 255, 249, .85) 35%, rgba(233, 255, 249, 0) 100%),
      linear-gradient(135deg, #2fd3b8 0%, #0a8f7e 100%);
    -webkit-background-clip: text; background-clip: text;
    transition: --spot2 .7s cubic-bezier(.2, .7, .2, 1);
  }
  .big-stat.lit { --spot2: 210px; }
}
/* כרטיסי המודולים — תלת־ממד: הנקודה שמתחת לעכבר "נלחצת" פנימה (במקום הרמה) */
@media (hover: hover) and (pointer: fine) {
  .bento { perspective: 1100px; }
  .tile:hover { translate: none; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .3); }
  .tile.tilting { will-change: transform; }
}
/* ---------- זמן התגובה: לוח כרטיסים מתהפכים, כמו לוח ההמראות בשדה תעופה ---------- */
.speed-num .flaps { display: inline-flex; gap: .045em; vertical-align: -.06em; letter-spacing: 0; }
.flap { position: relative; display: inline-block; width: .64em; height: .92em; border-radius: .07em; perspective: 2.4em;
  box-shadow: 0 .02em .03em rgba(0, 0, 0, .25), 0 .1em .22em -.06em rgba(0, 0, 0, .35); }
.flap .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.flap .h.t { top: 0; border-radius: .07em .07em 0 0; background: linear-gradient(180deg, #333336, #28282b); }
.flap .h.b { bottom: 0; border-radius: 0 0 .07em .07em; background: linear-gradient(180deg, #232326, #1c1c1e); }
.flap .d { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font-size: .78em; line-height: 1; color: #f5f5f7; letter-spacing: -0.04em; }
.flap .h.t .d { top: 0; }
.flap .h.b .d { bottom: 0; }
/* הקו של הציר באמצע הכרטיס */
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .006em); height: .012em; min-height: 1px; background: rgba(0, 0, 0, .55); z-index: 3; }
.flap .ft, .flap .fb { z-index: 2; visibility: hidden; }
.flap .ft { transform-origin: 50% 100%; }
.flap .fb { transform-origin: 50% 0; transform: rotateX(90deg); }
.flap.go .ft { visibility: visible; animation: flapTop .16s cubic-bezier(.5, 0, .9, .5) forwards; }
.flap.go .fb { visibility: visible; animation: flapBot .2s cubic-bezier(.2, .6, .3, 1) .16s forwards; }
@keyframes flapTop { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.6); } }
@keyframes flapBot { from { transform: rotateX(90deg); filter: brightness(1.4); } to { transform: rotateX(0); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .flap.go .ft, .flap.go .fb { animation: none; visibility: hidden; } }
.speed-num:has(.flaps) { margin-top: clamp(12px, 2vh, 22px); }
/* ---------- הלוגו בתפריט: המילה Agents נבנית אות אחרי אות בטעינה, עם סמן טורקיז שרץ לפניה ---------- */
.nav .logo .lg { font-style: normal; display: inline-block; max-width: 0; opacity: 0; filter: blur(5px); transform: translateY(.35em); animation: lgIn .5s cubic-bezier(.2, .7, .2, 1) var(--d) forwards; }
@keyframes lgIn { 35% { max-width: 1em; } to { max-width: 1em; opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav .logo .lg { animation: none; opacity: 1; filter: none; transform: none; } }
.flap.sm { width: .9em; height: 1.32em; border-radius: .14em; perspective: 3em; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); font-family: var(--font); font-weight: 700; }
.flap.sm .h.t { border-radius: .14em .14em 0 0; }
.flap.sm .h.b { border-radius: 0 0 .14em .14em; }
.flap.sm .d { font-size: .95em; color: #f5f5f7; }
.flap.sm::after { height: 1px; top: calc(50% - .5px); }
.flap.sm.go .ft { animation-duration: .07s; }
.flap.sm.go .fb { animation-duration: .09s; animation-delay: .07s; }
/* הכרטיסים של המספר במרכז בדיוק, מתחת למשפט — "שניות" יושבת בצד בלי להזיז אותם */
.speed-num:has(.flaps) { position: relative; width: fit-content; margin-inline: auto; }
.speed-num:has(.flaps) small { position: absolute; left: 100%; bottom: .04em; white-space: nowrap; }
@media (max-width: 899px) {
  html[lang="en"] .speed-num:has(.flaps) small { position: static; display: block; text-align: center; margin: .12em 0 0; }
}
/* בזמן הספירה — היפוכים מהירים; המספר האחרון מתהפך בקצב הרגיל */
.flaps.quick .flap.go .ft { animation-duration: .03s; }
.flaps.quick .flap.go .fb { animation-duration: .035s; animation-delay: .03s; }
/* ---------- שדות הטופס: מסגרת טורקיז עדינה בריחוף, וזוהר רך בזמן הקלדה ---------- */
.form input, .form select { transition: border-color .3s, box-shadow .35s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
@media (hover: hover) and (pointer: fine) {
  .form input:hover:not(:focus), .form select:hover:not(:focus) { border-color: rgba(47, 211, 184, .45); background-color: #202023; }
}
.form input:focus, .form select:focus { border-color: var(--tide-hi); background-color: #1f2221;
  box-shadow: 0 0 0 4px rgba(47, 211, 184, .14), 0 0 24px -4px rgba(47, 211, 184, .35); }
.form label:focus-within > span { color: var(--tide-hi); transition: color .3s; }

/* ---------- הלוגו: הסמן הטורקיז — עמית תמיד מוכן להקליד. מהבהב 3 פעמים ונשאר דולק; בריחוף חוזר להבהב ---------- */
.logo::after { content: ""; display: inline-block; width: .11em; min-width: 2px; height: .86em; margin-left: .07em; vertical-align: -.1em;
  border-radius: .04em; background: #12a892; animation: caretBlink 1.06s steps(2, jump-none) 1.25s 3 both; }
.nav[data-dark] .logo::after, .foot .logo::after { background: var(--tide-hi); }
@media (hover: hover) and (pointer: fine) { .logo:hover::after { animation: caretBlink 1.06s steps(2, jump-none) infinite; } }
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo::after { animation: none; } }
/* הקרוסלה: ההשתקפות דועכת בעדינות לרקע — בלי קו חד איפה שהאזור נחתך */
.ring-stage { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); }
.ring .device { -webkit-box-reflect: below 12px linear-gradient(transparent 80%, rgba(255, 255, 255, .14)); }
@media (hover: hover) and (pointer: fine) { .ring .device:not([data-front]) { cursor: pointer; } }
/* הקרוסלה: צל קצר ורך לכל הטלפונים — הצל הרחב יצר "מלבן" בהיר מאחורי הטלפון הקדמי */
.ring .device, .ring .device:not([data-front]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 0 2.5px rgba(0, 0, 0, .18), 0 18px 26px -22px rgba(0, 0, 0, .35); }
/* ---------- ריחוף: היבואנים — מספרי המשפך מתבהרים; שורת הסוכנות שמתחת לעכבר מודגשת והשאר מתעמעמות ---------- */
@media (hover: hover) and (pointer: fine) {
  .f { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
  .f b { transition: color .3s, transform .35s cubic-bezier(.2, .7, .2, 1); display: inline-block; }
  .f:hover { transform: translateX(calc(var(--dirx, 1) * -3px)); box-shadow: 0 8px 20px -14px rgba(10, 143, 126, .55); }
  .f:hover b { color: var(--tide); transform: scale(1.12); }
  .f.gold:hover b { color: #b98a2e; }
  .br { transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
  .br i { transition: filter .3s, width .2s linear; }
  .branches:hover .br:not(:hover) { opacity: .4; }
  .branches .br:hover { transform: scale(1.02); }
  .branches .br:hover i { filter: brightness(1.12) drop-shadow(0 0 6px rgba(47, 211, 184, .55)); }
  .branches .br:hover span { font-weight: 700; }
  /* עקרונות האמון: העיקרון שמתחת לעכבר מואר, והשאר מתעמעמים */
  .pillar { transition: opacity .4s var(--ease), transform .45s cubic-bezier(.2, .7, .2, 1), border-color .4s; }
  .pillars:hover .pillar.on:not(:hover) { opacity: .42; }
  .pillar.on:hover { transform: translateY(-4px); border-top-color: var(--tide-hi); }
  .pillar.on:hover b { color: #fff; }
  .pillar b { transition: color .3s; }
}
html[dir="rtl"] { --dirx: -1; }
/* כרטיסי המודולים: בלי אור צבעוני בריחוף — רק התלת־ממד. ולכל כרטיס עובי, כמו אריח: רואים את הדופן מתחת */
.tile::after { display: none; }
.tile { box-shadow: 0 1px 0 #dcdce1, 0 2px 0 #d6d6db, 0 3px 0 #d0d0d6, 0 4px 0 #cacad0, 0 5px 0 #c5c5cb, 0 6px 0 #c0c0c6, 0 18px 30px -16px rgba(0, 0, 0, .28); }
.tile.dark { box-shadow: 0 1px 0 #2a2a2d, 0 2px 0 #262629, 0 3px 0 #222225, 0 4px 0 #1f1f21, 0 5px 0 #1c1c1e, 0 6px 0 #19191b, 0 18px 30px -16px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) { .tile:hover { box-shadow: 0 1px 0 #dcdce1, 0 2px 0 #d6d6db, 0 3px 0 #d0d0d6, 0 4px 0 #cacad0, 0 5px 0 #c5c5cb, 0 6px 0 #c0c0c6, 0 18px 30px -16px rgba(0, 0, 0, .28); }
  .tile.dark:hover { box-shadow: 0 1px 0 #2a2a2d, 0 2px 0 #262629, 0 3px 0 #222225, 0 4px 0 #1f1f21, 0 5px 0 #1c1c1e, 0 6px 0 #19191b, 0 18px 30px -16px rgba(0, 0, 0, .45); } }
/* כרטיסי המודולים — עובי אמיתי בתלת־ממד (במקום קווי צל): במצב ישר הכרטיס שטוח, הדופן נחשפת רק כשהוא נוטה */
.tile, .tile.dark, .tile:hover, .tile.dark:hover { box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .3); }
.tile-3d { position: relative; transform-style: preserve-3d; will-change: transform; }
.tile-3d.big { grid-column: span 2; }
.tile-3d > .tile { height: 100%; transform-style: flat; }
.slab { position: absolute; inset: 0; border-radius: 28px; transform-style: preserve-3d; pointer-events: none; }
.slab i { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(calc(var(--z) * -1.2px));
  background: linear-gradient(180deg, #d4d4da, #bdbdc4); filter: brightness(calc(1 - var(--z) * .015)); }
.slab.dark i { background: linear-gradient(180deg, #2c2c30, #1a1a1c); }
@media (max-width: 899px) { .tile-3d.big { grid-column: auto; } }
@media (min-width: 900px) and (max-width: 1100px) { .tile-3d.big { grid-column: span 2; } }
@media (hover: hover) and (pointer: fine) { .bento { perspective: none; } }
.tile-3d { will-change: auto; }
.tile-3d.tilting { will-change: transform; }
.slab { opacity: 0; transition: opacity .25s; }
.tile-3d.tilting .slab { opacity: 1; }
.slab i { transform: translateZ(calc(var(--z) * -1.6px)); }
.foot .foot-note { opacity: .6; font-size: 12.5px; }
/* ---------- המודולים כסצנה בתלת־ממד (מחשב וטאבלט) — הכיתה scene-on נוספת מ-JS ---------- */
.modules.scene-on { height: 330vh; padding: 0; }
.modules.scene-on .mod-anchor { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 0; }
.modules.scene-on > .wrap { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--nav-h) + clamp(18px, 4vh, 44px)); overflow: hidden; }
.modules.scene-on .mod-scene { margin-top: clamp(18px, 3.4vh, 36px); perspective: 1800px; }
.modules.scene-on .mod-board { position: relative; transform-style: preserve-3d; border-radius: 36px; padding: 18px;
  background: linear-gradient(160deg, #fbfaf8, #eeede9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .04), 0 50px 90px -46px rgba(0, 0, 0, .38);
  transform: translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--sc, 1)); transform-origin: 50% 30%; will-change: transform; }
/* אור מחלון: פסים רכים באלכסון על הלוח (נחלש כשהמצלמה מתיישרת) */
.modules.scene-on .mod-board::before, .modules.scene-on .mod-board::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.modules.scene-on .mod-board::before { opacity: var(--light, 0); filter: blur(14px); mix-blend-mode: soft-light;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 60px, rgba(255, 255, 255, .6) 90px 150px, rgba(255, 255, 255, 0) 190px 250px); }
.modules.scene-on .mod-board::after { opacity: calc(var(--light, 0) * .9); filter: blur(18px);
  background: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0) 0 140px, rgba(0, 0, 0, .05) 170px 210px, rgba(0, 0, 0, 0) 240px 260px); }
.modules.scene-on .bento { margin-top: 0; transform-style: preserve-3d; gap: 16px; }
.mod-cell { position: relative; transform-style: preserve-3d; }
.mod-cell.big { grid-column: span 2; }
.modules.scene-on .tile { height: 100%; min-height: 0; transform: translateZ(calc(var(--h, 4) * 1px)); transition: box-shadow .3s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .035); }
.modules.scene-on .tile.dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .3); }
.modules.scene-on .tile:active { transform: translateZ(calc(var(--h, 4) * 1px)); }
/* צל על הלוח — גדל ומיטשטש ככל שהכרטיס גבוה יותר */
.mod-shade { position: absolute; inset: 6% 4% 0; border-radius: 26px; background: rgba(20, 22, 20, .55); pointer-events: none;
  filter: blur(calc(6px + var(--h, 4) * .55px)); opacity: calc(.12 + var(--h, 4) * .0035);
  transform: translate(calc(var(--h, 4) * .25px), calc(var(--h, 4) * .45px)) scale(calc(1 - var(--h, 4) * .0012)); }
/* עובי הכרטיס: שכבות בצורת הכרטיס מתחתיו — רואים את הדופן כשהלוח מוטה */
.mod-slab { position: absolute; inset: 0; border-radius: 28px; transform-style: preserve-3d; pointer-events: none; }
.mod-slab i { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(calc((var(--h, 4) - var(--z) * 1.5) * 1px));
  background: linear-gradient(180deg, #d6d6dc, #bcbcc3); filter: brightness(calc(1 - var(--z) * .02)); }
.mod-slab.dark i { background: linear-gradient(180deg, #2e2e32, #18181a); }

/* בטלפון: הכרטיסים כרגיל, עם עובי עדין — דופן אחת רציפה מתחת, ולחיצה שמורידה אותם */
@media (max-width: 899px) {
  .tile { box-shadow: 0 3px 0 -1px #d2d2d8, 0 12px 26px -16px rgba(0, 0, 0, .3); transition: transform .12s, box-shadow .12s; }
  .tile.dark { box-shadow: 0 3px 0 -1px #2a2a2d, 0 12px 26px -16px rgba(0, 0, 0, .45); }
  .tile:active { transform: translateY(2px); box-shadow: 0 1px 0 -1px #d2d2d8, 0 6px 14px -10px rgba(0, 0, 0, .3); }
  .tile.dark:active { box-shadow: 0 1px 0 -1px #2a2a2d, 0 6px 14px -10px rgba(0, 0, 0, .45); }
}
.modules.scene-on .mod-board { transform-origin: 50% 0; }
/* בסצנה: כותרת בשורה אחת, כדי שללוח יהיה מקום */
.modules.scene-on h2 br { display: none; }
.modules.scene-on h2 { font-size: clamp(36px, 3.6vw, 54px); }
.modules.scene-on .lede { margin-top: 6px; }
.modules.scene-on { overflow-x: clip; }
.modules.scene-on > .wrap { overflow: visible; }
/* ---------- מצב הצגה: כפתור צף בפינה ---------- */
.show-btn { position: fixed; z-index: 60; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-start: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(29, 29, 31, .78); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: hidden; transition: transform .25s, background .25s; }
html[dir="rtl"] .show-btn { padding: 9px 12px 9px 16px; }
.show-btn:hover { transform: translateY(-2px); background: rgba(29, 29, 31, .9); }
.show-btn:active { transform: scale(.96); }
.show-btn .ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tide); }
.show-btn svg { width: 14px; height: 14px; }
.show-btn .i-pause, .show-btn.on .i-play { display: none; }
.show-btn.on .i-pause { display: block; }
/* פס התקדמות דק בתחתית הכפתור */
.show-btn .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tide-hi); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); opacity: 0; transition: opacity .3s; }
html[dir="rtl"] .show-btn .bar { transform-origin: 100% 50%; }
.show-btn.on .bar { opacity: 1; }
@media (max-width: 899px) { .show-btn { font-size: 13px; padding: 7px 13px 7px 9px; } html[dir="rtl"] .show-btn { padding: 7px 9px 7px 13px; } .show-btn .ico { width: 24px; height: 24px; } }
/* ---------- הקמפיינים: נקודות שמגיבות לעכבר ולחיצה ---------- */
.dots { cursor: pointer; touch-action: manipulation; }
.dots i { scale: calc(1 + var(--k, 0) * .55); transition: background 1.1s cubic-bezier(.2, .7, .2, 1), box-shadow 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1), scale .25s cubic-bezier(.2, .7, .2, 1), filter .25s; filter: brightness(calc(1 + var(--k, 0) * .7)); }
.dots i.ripple { animation: dotRipple .9s cubic-bezier(.2, .7, .2, 1) var(--rd, 0ms) both; }
@keyframes dotRipple { 0%, 100% { scale: calc(1 + var(--k, 0) * .55); filter: brightness(1); } 35% { scale: 1.45; filter: brightness(1.9) drop-shadow(0 0 6px rgba(47, 211, 184, .8)); } }
/* סצנת המודולים — ביצועים: צל עם טשטוש קבוע (רק שקיפות ותזוזה משתנות), פחות שכבות עובי, וטקסט יציב */
.mod-shade { filter: blur(22px); opacity: calc(.14 + var(--h, 4) * .003);
  transform: translate3d(calc(var(--h, 4) * .25px), calc(var(--h, 4) * .45px), 0) scale(calc(1 - var(--h, 4) * .0012)); will-change: transform, opacity; }
.mod-slab i:nth-child(n+7) { display: none; }
.mod-slab i { transform: translateZ(calc((var(--h, 4) - var(--z) * 2.2) * 1px)); }
.modules.scene-on .tile { backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
/* בתוך הסצנה: בלי אנימציות שרצות כל הזמן (נשימת הנקודות, גל הקול, הדופק של הכפתור) — הן מכריחות את הלוח כולו להצטייר מחדש בכל פריים */
.modules.scene-on .mini-dots b, .modules.scene-on .call-player:not([data-on]) .call-wave i, .modules.scene-on .call-player:not([data-on]) .call-btn { animation-play-state: paused; }
.modules.scene-on .tile:hover .mini-dots b, .modules.scene-on .tile:hover .call-wave i { animation-play-state: running; }
/* כפתור השתקה ליד כפתור ההצגה */
.show-mute { position: fixed; z-index: 60; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-start: 132px; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: rgba(29, 29, 31, .78); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .25s; }
.show-mute:hover { transform: translateY(-2px); }
.show-mute svg { width: 18px; height: 18px; }
html[lang="en"] .show-mute { inset-inline-start: 118px; }
@media (max-width: 899px) { .show-mute { width: 38px; height: 38px; inset-inline-start: 120px; } html[lang="en"] .show-mute { inset-inline-start: 106px; } }