/* פונט: Discovery Fs (Variable, 100-800), מוטמע בקובץ.
   בפיתוח: להעלות את Discovery_Fs-VF.woff2 לשרת ולהחליף את ה-src בנתיב לקובץ. */
@font-face{
  font-family:"Discovery Fs";
  src:url("../fonts/DiscoveryFs-VF.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   Sara Weizman | Hero
   ---------------------------------------------------------
   מבנה:
   .hero              → מסך הפתיחה (הרקע מתחלף לפי הפרויקט)
     .flood           → בועת הצבע שממלאת את המסך במעבר
     .guides          → קווי גריד עדינים (מסר של סדר ומבנה)
     .site-header     → לוגו, ניווט, סטטוס
     .hero-name       → השם באנגלית (שמאל)
     .stage           → במת המוקאפים (מרכז) + הבא בתור
     .hero-copy       → כותרת בעברית + כפתורי הנעה (ימין)
     .hero-foot       → רשתות, חיצים + שם הפרויקט
   הפרויקטים מוגדרים במערך PROJECTS בסקריפט למטה.
   ========================================================= */

:root{
  --ease-move: cubic-bezier(.72,0,.18,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-move: 1150ms;
  --dur-flood: 1100ms;

  --font-he: "Discovery Fs", system-ui, sans-serif;
  --font-en: "Discovery Fs", system-ui, sans-serif;

  --pad-x: clamp(20px, 3.6vw, 56px);
  --header-h: 88px;

  /* ערכת צבע: מתעדכנת אוטומטית לפי בהירות הרקע */
  --bg: #26262A;
  --ink: #ffffff;
  --ink-rgb: 255 255 255;
}

/* טון בהיר = רקע בהיר → טקסט כהה
   כל בלוק מקבל data-tone משלו, כך שהצבע מתחלף בדיוק כשהבועה עוברת מתחתיו */
[data-tone="light"]{ --ink:#141414; --ink-rgb: 20 20 20; }
[data-tone="dark"] { --ink:#ffffff; --ink-rgb: 255 255 255; }
[data-tone]{ color:var(--ink); }
.tone-block{ transition:color .35s var(--ease-soft); }
.tone-block *{ transition-duration:.35s !important; }

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; }
body{
  font-family:var(--font-he);
  background:#0f0f0f;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:max(100svh, 720px);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  isolation:isolate;
  transition:color .55s var(--ease-soft);
}

/* בועת הצבע */
.flood{
  position:absolute; inset:0; z-index:0;
  background:var(--flood, transparent);
  clip-path:circle(0px at var(--fx, 50%) var(--fy, 50%));
  pointer-events:none;
}
.flood.is-running{
  clip-path:circle(var(--fr, 150vmax) at var(--fx, 50%) var(--fy, 50%));
  transition:clip-path var(--dur-flood) cubic-bezier(.62,0,.3,1);
}

/* קווי גריד */
.guides{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  --line: rgb(var(--ink-rgb) / .075);
}
.guides::before{ /* עמודות */
  content:""; position:absolute; inset:0 var(--pad-x);
  background-image:linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size:calc((100% - 1px) / 6) 100%;
  border-right:1px solid var(--line);
}
.guides::after{ /* קו מתחת להדר */
  content:""; position:absolute; left:0; right:0; top:var(--header-h);
  height:1px; background:var(--line);
}
.cross{
  position:absolute; width:11px; height:11px; translate:-50% -50%;
  color:rgb(var(--ink-rgb) / .35);
}
.cross::before,.cross::after{ content:""; position:absolute; background:currentColor; }
.cross::before{ left:5px; top:0; width:1px; height:11px; }
.cross::after{ top:5px; left:0; height:1px; width:11px; }

/* ---------- HEADER ---------- */
.site-header{
  position:absolute; inset:0 0 auto 0; z-index:5;
  height:var(--header-h);
  padding:0 var(--pad-x);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.brand{ display:flex; align-items:center; gap:12px; justify-self:start; }
.brand-mark{
  width:40px; height:40px; border-radius:11px;
  border:1px solid rgb(var(--ink-rgb) / .35);
  display:grid; place-items:center;
  font-family:var(--font-en); font-weight:600; font-size:14px; letter-spacing:-.02em;
  transition:border-color .55s;
}
.brand-name{ font-size:15px; font-weight:500; line-height:1.15; }
.brand-name small{ display:block; font-size:12px; font-weight:400; opacity:.62; }

.nav{
  display:flex; gap:2px; padding:5px;
  border-radius:999px;
  background:rgb(var(--ink-rgb) / .08);
  border:1px solid rgb(var(--ink-rgb) / .1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .55s, border-color .55s;
}
.nav a{
  padding:9px 18px; border-radius:999px;
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .3s, color .55s, opacity .3s;
  opacity:.78;
}
.nav a:hover{ opacity:1; background:rgb(var(--ink-rgb) / .08); }
.nav a[aria-current="page"]{
  opacity:1; background:var(--ink); color:var(--bg);
}

.head-cta{ justify-self:end; height:44px; padding:0 20px; font-size:14px; }
.status{
  justify-self:end;
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:500;
  padding:9px 16px; border-radius:999px;
  border:1px solid rgb(var(--ink-rgb) / .2);
  transition:border-color .55s;
}
.status i{
  width:7px; height:7px; border-radius:50%; background:#3ddc84;
  box-shadow:0 0 0 0 rgb(61 220 132 / .6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 7px rgb(61 220 132 / 0); }
  100%{ box-shadow:0 0 0 0 rgb(61 220 132 / 0); }
}

/* ---------- NAME (LEFT) ---------- */
.hero-name{
  position:absolute; z-index:4;
  left:var(--pad-x); top:50%; translate:0 -50%;
  direction:ltr; text-align:left;
  pointer-events:none;
}
/* שורה ראשונה: Sara + שורת התפקיד בשתי שורות, מיושרת לקו הבסיס של השם */
.name-row{
  display:flex; align-items:last baseline;
  gap:clamp(14px, 1.5vw, 26px);
}
.hero-name .eyebrow{
  font-family:var(--font-en); font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1.55;
  opacity:.7; margin:0;
}
.hero-name .eyebrow span{ display:block; white-space:nowrap; }
.display-name{
  font-family:var(--font-en);
  font-weight:500;
  font-size:clamp(64px, 8.4vw, 156px);
  line-height:.9;
  letter-spacing:-.04em;
  margin:0;
}
.hero-name .meta{
  margin-top:26px;
  font-family:var(--font-en); font-size:13px; letter-spacing:.02em;
  opacity:.6;
}

/* ---------- COPY (RIGHT) ---------- */
.hero-copy{
  position:absolute; z-index:4;
  right:var(--pad-x); top:calc(50% + 10px); translate:0 -60%;
  width:min(360px, 27vw);
}
.kicker{
  font-size:14px; font-weight:500; margin:0 0 18px;
  display:flex; align-items:center; gap:10px; opacity:.75;
}
.hero-copy h1{
  margin:0;
  font-weight:700;
  font-size:clamp(34px, 3.3vw, 50px);
  line-height:1.08;
  letter-spacing:-.01em;
}
/* כותרת: שורה אחת או שתיים, באיזון בין השורות (כמו Balance בפיגמה) */
.hero-copy h1{ text-wrap:balance; }
.hero-copy h1 span{ white-space:nowrap; }
.hero-copy h1 span:last-child{ font-weight:300; }
.lead{
  margin:22px 0 30px;
  font-size:16px; line-height:1.7; font-weight:400;
  opacity:.8;
  text-wrap:balance;
}
.kicker,.caption,.brand-name{ text-wrap:balance; }
.cta{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:50px; padding:0 22px; border-radius:999px;
  font-size:15px; font-weight:600;
  transition:background .55s, color .55s, border-color .55s, transform .25s var(--ease-soft);
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease-soft); }
.btn:hover svg{ transform:translateX(-4px); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-ghost{ border:1px solid rgb(var(--ink-rgb) / .38); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn:focus-visible,.arrow:focus-visible,.nav a:focus-visible,.social a:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}
.tags{
  margin:26px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-size:13px; opacity:.6;
}
.tags li{ display:inline-flex; align-items:center; }
.tags li + li::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor; margin-inline-end:16px; }

/* ---------- STAGE ---------- */
.stage{
  position:absolute; z-index:3;
  inset:var(--header-h) 0 0 0;
  touch-action:pan-y;
}
.phone{
  --x:0px; --y:0px; --s:1; --o:1;
  position:absolute; left:50%; top:var(--cy, 50%);
  width:var(--pw); height:var(--ph);
  margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  transform:translate3d(calc(var(--x) + var(--drag, 0px)), var(--y), 0) scale(var(--s));
  -webkit-user-drag:none; user-select:none; -webkit-tap-highlight-color:transparent;
  opacity:var(--o);
  transform-origin:50% 50%;
  transition:
    transform var(--dur-move) var(--ease-move),
    opacity calc(var(--dur-move) * .8) var(--ease-soft);
  will-change:transform, opacity;
}
.phone.no-anim{ transition:none !important; }

/* מצבים */
.phone[data-slot="center"]{ --x:0px; --y:0px; --s:1; --o:1; z-index:3; }
.phone[data-slot="next"]  { --x:var(--nx); --y:var(--ny); --s:var(--ns); --o:1; z-index:2; cursor:pointer; }
.phone[data-slot="exit"]  { --x:var(--ex); --y:var(--ey); --s:var(--es); --o:0; z-index:1; }
.phone[data-slot="queue"] { --x:var(--qx); --y:var(--qy); --s:var(--qs); --o:0; z-index:1; }
.phone[data-slot="exit"],.phone[data-slot="queue"]{ pointer-events:none; }

/* צל רצפה */
.phone::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-7%;
  height:5%; border-radius:50%;
  background:radial-gradient(closest-side, rgb(0 0 0 / .38), transparent);
  filter:blur(6px);
  transition:opacity .6s;
}
.phone:not([data-slot="center"])::after{ opacity:0; }

/* מכשיר */
.device{
  position:relative; width:100%; height:100%;
  border-radius:calc(var(--pw) * .165);
  padding:calc(var(--pw) * .032);
  background:
    linear-gradient(150deg, #56565a 0%, #1d1d1f 22%, #2a2a2d 55%, #111 78%, #4a4a4e 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .22),
    inset 0 0 0 calc(var(--pw) * .011) #0b0b0c,
    0 2px 2px rgb(0 0 0 / .12),
    0 40px 70px -30px rgb(0 0 0 / .55),
    0 80px 120px -50px rgb(0 0 0 / .35);
}
/* כפתורי צד */
.device::before,.device::after{
  content:""; position:absolute; width:calc(var(--pw) * .012);
  background:linear-gradient(90deg,#1b1b1c,#4a4a4e);
  border-radius:2px;
}
.device::before{ left:calc(var(--pw) * -.009); top:22%; height:11%; box-shadow:0 calc(var(--ph) * .14) 0 #2a2a2d; }
.device::after { right:calc(var(--pw) * -.009); top:28%; height:14%; }

.screen{
  position:relative; height:100%; overflow:hidden;
  border-radius:calc(var(--pw) * .133);
  background:var(--sb, #000);
  display:flex; flex-direction:column;
}
.statusbar{
  flex:0 0 auto; height:calc(var(--ph) * .062);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 9% 0 10%;
  direction:ltr;
  font-family:-apple-system, "SF Pro Text", var(--font-en);
  font-weight:600; font-size:calc(var(--pw) * .05);
  color:var(--sb-ink, #fff);
}
.statusbar .icons{ display:flex; gap:calc(var(--pw) * .018); align-items:center; }
.statusbar svg{ height:calc(var(--pw) * .038); width:auto; fill:currentColor; }
.island{
  position:absolute; z-index:2; left:50%; top:calc(var(--ph) * .016);
  width:31%; height:calc(var(--ph) * .036);
  translate:-50% 0; border-radius:999px; background:#000;
}
.screen img{
  flex:1 1 auto; min-height:0; width:100%;
  object-fit:cover; object-position:top center;
}
.screen::after{ /* ברק עדין על הזכוכית */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .05) 100%);
}
.home-bar{
  position:absolute; z-index:2; bottom:1.1%; left:50%; translate:-50% 0;
  width:36%; height:calc(var(--ph) * .006); border-radius:9px;
  background:rgb(0 0 0 / .55);
}

/* תווית "הבא בתור" */
.next-label{
  position:absolute; z-index:4;
  /* מיושר לימין, יחד עם הטלפון הקטן */
  left:calc(50% + var(--nx) + var(--pw) * var(--ns) / 2); top:calc(var(--cy) + var(--ny) - var(--ph) * var(--ns) / 2 - 34px);
  translate:-100% 0;
  font-size:12px; font-weight:500; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  opacity:.75;
  transition:opacity .35s var(--ease-soft);
}
.next-label b{ font-weight:600; }
.next-label.is-hidden{ opacity:0; }

/* ---------- FOOT ---------- */
.hero-foot{
  position:absolute; z-index:5; left:0; right:0; bottom:0;
  padding:0 var(--pad-x) 30px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
  direction:ltr; /* רשתות בשמאל, חיצים במרכז */
  pointer-events:none;
}
.hero-foot > *{ pointer-events:auto; }
.social{ display:flex; gap:8px; justify-self:start; }
.social a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgb(var(--ink-rgb) / .2);
  transition:border-color .55s, background .3s;
}
.social a:hover{ background:rgb(var(--ink-rgb) / .1); }
.social svg{ width:16px; height:16px; }

.controls{ display:flex; align-items:center; gap:22px; direction:rtl; }
.arrow{
  position:relative;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgb(var(--ink-rgb) / .28);
  transition:border-color .55s, background .3s, transform .25s var(--ease-soft);
}
.arrow:hover{ background:rgb(var(--ink-rgb) / .1); border-color:rgb(var(--ink-rgb) / .6); }
.arrow:active{ transform:scale(.94); }
.arrow svg{ width:18px; height:18px; }
.arrow .ring{
  position:absolute; inset:-1px; width:auto; height:auto;
  transform:rotate(-90deg);
  pointer-events:none;
}
.arrow .ring circle{
  fill:none; stroke:var(--ink); stroke-width:1.5;
  stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p, 0) * 100);
  transition:stroke .55s;
}
.caption{ text-align:center; min-width:190px; }
.caption .count{
  font-family:var(--font-en); font-size:12px; letter-spacing:.14em;
  opacity:.55; margin-bottom:4px; direction:ltr;
}
.caption .title{ font-size:17px; font-weight:600; line-height:1.25; }
.caption .type{ font-size:13px; opacity:.65; }
.caption .swap{ transition:opacity .35s, transform .45s var(--ease-soft); }
.caption.is-out .swap{ opacity:0; transform:translateY(6px); }

/* =========================================================
   MANIFESTO: אזור ההשראה
   השם נופל מהמסך הפתיחה, נערם, ומסתדר מחדש למשפט.
   הרקע ממשיך את הצבע שאיתו יצאו מהמסך הפתיחה.
   ========================================================= */
.manifesto{
  position:relative; z-index:2;
  height:calc(var(--vh, 1vh) * 205);   /* קוצר מ-244, הגלילה נעימה יותר */
  background:var(--bg);
  color:var(--ink);
  transition:background-color .9s var(--ease-soft), color .5s;
}
.m-stage{
  position:sticky; top:0;
  height:calc(var(--vh, 1vh) * 100);
  overflow:hidden;
  display:grid; place-items:center;
}
.m-frame{
  position:relative;
  padding:clamp(28px, 3vw, 48px) clamp(24px, 3.4vw, 56px);
  text-align:center;
}
.sentence{
  margin:0;
  font-family:var(--font-en);
  font-weight:500;
  font-size:clamp(64px, 8.4vw, 156px);
  line-height:.95;
  letter-spacing:-.04em;
  display:flex; flex-wrap:wrap; justify-content:center;
  column-gap:.24em; row-gap:.02em;
  direction:ltr;
}
.sentence .br{ flex-basis:100%; height:0; }
.sentence .w{ display:inline-block; position:relative; white-space:nowrap; }
.sentence .w1{ font-weight:200; }
.sentence .w2{ font-weight:400; }
.sentence .w3{ font-weight:700; }
.sentence .ch{ display:inline-block; will-change:transform, opacity; }
.js-fx .sentence .ch{ opacity:0; }

/* מסגרת בחירה בסגנון פיגמה סביב "order." */
.sel{
  position:absolute; inset:-.06em -.1em -.02em -.1em;
  pointer-events:none;
  opacity:var(--sel, 0);
}
.sel::before{
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--ink);
  clip-path:inset(0 calc((1 - var(--sel, 0)) * 100%) 0 0);
}
.sel i{
  position:absolute; width:11px; height:11px;
  background:var(--bg); border:1.5px solid var(--ink);
  translate:-50% -50%;
}
.sel i:nth-child(1){ left:0; top:0; }
.sel i:nth-child(2){ left:100%; top:0; }
.sel i:nth-child(3){ left:0; top:100%; }
.sel i:nth-child(4){ left:100%; top:100%; }
.sel .dim{
  position:absolute; left:50%; top:calc(100% + 14px); translate:-50% 0;
  direction:ltr; unicode-bidi:isolate;
  font-family:var(--font-en); font-size:12px; font-weight:500; letter-spacing:.02em;
  padding:4px 9px; border-radius:6px;
  background:var(--ink); color:var(--bg);
  white-space:nowrap;
}
.m-cursor{
  position:absolute; right:-.62em; bottom:-.42em;
  font-size:clamp(64px, 8.4vw, 156px);
  display:flex; align-items:flex-start; gap:4px;
  opacity:var(--cur, 0);
  transform:translate(calc((1 - var(--cur, 0)) * 90px), calc((1 - var(--cur, 0)) * 60px));
  pointer-events:none;
}
.m-cursor svg{ width:22px; height:22px; flex:none; }
.m-cursor span{
  margin-top:16px;
  font-family:var(--font-en); font-size:13px; font-weight:600; letter-spacing:0;
  padding:5px 11px; border-radius:999px 999px 999px 4px;
  background:var(--ink); color:var(--bg);
}

.m-caption{
  margin:clamp(28px, 3.4vw, 52px) auto 0;
  max-width:34ch;
  font-size:clamp(16px, 1.25vw, 20px); font-weight:400;
  line-height:1.6; text-wrap:balance;
  opacity:calc(var(--cap, 0) * .75);
  transform:translateY(calc((1 - var(--cap, 0)) * 14px));
}

/* סימני חיתוך בפינות */
.crop{
  --len:24px; --t:1.5px;
  position:absolute; width:var(--len); height:var(--len);
  direction:ltr;
  border:0 solid rgb(var(--ink-rgb) / .5);
  opacity:var(--crop, 0);
  transform:scale(calc(.6 + var(--crop, 0) * .4));
}
/* כל פינה בצורת L שפונה החוצה, בדיוק על קצה המסגרת */
.crop.tl{ left:0;  top:0;    border-top-width:var(--t);    border-left-width:var(--t);  transform-origin:0 0; }
.crop.tr{ right:0; top:0;    border-top-width:var(--t);    border-right-width:var(--t); transform-origin:100% 0; }
.crop.bl{ left:0;  bottom:0; border-bottom-width:var(--t); border-left-width:var(--t);  transform-origin:0 100%; }
.crop.br{ right:0; bottom:0; border-bottom-width:var(--t); border-right-width:var(--t); transform-origin:100% 100%; }

/* תגיות מרחפות */
/* .chip = מיקום וכניסה בגלילה | .chip b = הבועה עצמה, מונעת ע"י JS (ריחוף / בעיטה) */
.chip{
  position:absolute; left:var(--cx); top:var(--cy);
  translate:-50% -50%;
  opacity:var(--in, 0);
  transform:translateY(calc((1 - var(--in, 0)) * 26px)) scale(calc(.92 + var(--in, 0) * .08));
  pointer-events:none;
}
.chip b{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 12px; border-radius:999px;
  font-size:14px; font-weight:500; white-space:nowrap;
  border:1px solid rgb(var(--ink-rgb) / .24);
  background:rgb(var(--ink-rgb) / .06);
  will-change:transform;
  backface-visibility:hidden;
}
.chip svg{ width:18px; height:18px; flex:none; }

/* שכבת האותיות הנופלות */
.fx{
  position:fixed; inset:0; z-index:60;
  direction:ltr;
  pointer-events:none;
  color:var(--ink);
  visibility:hidden;
}
.fx.on{ visibility:visible; }
.fxl{
  position:absolute; left:0; top:0;
  will-change:transform;
}
.fxl .face{ position:absolute; overflow:visible; }
.fxl .face text{ fill:currentColor; font-family:var(--font-en); }

@media (max-width: 900px){
  .manifesto{ height:calc(var(--vh, 1vh) * 240); }
  .sentence{ font-size:clamp(60px, 19.5vw, 120px); flex-direction:column; align-items:center; }
  .sentence .br{ display:none; }
  .m-cursor{ font-size:clamp(60px, 19.5vw, 120px); right:-.5em; }
  .m-caption{ margin-top:64px; }
  .m-frame{ max-width:calc(100vw - 32px); padding:26px 18px; }
  .sel .dim{ font-size:11px; }
  .chip b{ font-size:12px; padding:7px 12px 7px 10px; gap:7px; }
  .chip svg{ width:15px; height:15px; }
  .chip{ translate:none; }
  .chip:nth-of-type(1){ left:22px; right:auto; top:11%; }
  .chip:nth-of-type(2){ left:auto; right:22px; top:17%; }
  .chip:nth-of-type(3){ left:22px; right:auto; top:auto; bottom:13%; }
  .chip:nth-of-type(4){ left:auto; right:22px; top:auto; bottom:7%; }
}
@media (prefers-reduced-motion: reduce){
}

/* =========================================================
   PROJECTS: ערימת כרטיסיות
   כל כרטיסייה צבועה בצבע הראשי של האתר שבה.
   בגלילה הכרטיסייה עולה עם הטיה: החלק העליון נכנס פנימה,
   התחתון יוצא החוצה, והבאה בתור עולה למקום.
   ========================================================= */
.m-white{
  position:absolute; inset:0; z-index:20;
  background:#fff;
  opacity:var(--wh, 0);
  pointer-events:none;
}
.projects{
  --ink:#141414; --ink-rgb:20 20 20; --bg:#fff;
  position:relative; z-index:1;
  /* נמצא מתחת לסוף אזור ההשראה: כשהוא כבר לבן הוא נגלל למעלה ונחשף מתחתיו,
     כך שאין זמן גלילה ריק על לבן */
  margin-top:calc(var(--vh, 1vh) * -100);
  background:#fff; color:var(--ink);
}
.p-stage{
  position:sticky; top:0;
  height:calc(var(--vh, 1vh) * 100);
  overflow:hidden;
  perspective:1600px;
  perspective-origin:50% 40%;
}
.p-head{
  position:absolute; left:50%; top:50%; z-index:1;
  translate:-50% -50%;
  text-align:center; white-space:nowrap;
  transform-origin:50% 0;
  will-change:transform;
}
.p-head .eyebrow{
  display:inline-flex; gap:10px; align-items:baseline;
  font-size:14px; font-weight:500; opacity:.6; margin:0 0 10px;
}
.p-head .eyebrow b{ font-family:var(--font-en); font-weight:500; letter-spacing:.06em; }
.p-head h2{
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(64px, 8.4vw, 156px);
  line-height:.9; letter-spacing:-.04em;
  direction:ltr;
}
.p-head h2 span:first-child{ font-weight:200; }
.p-head h2 span:last-child{ font-weight:700; }

.p-stack{
  position:absolute; inset:0; z-index:2;
  transform-style:preserve-3d;
  pointer-events:none;
}
.pcard{
  --cw:min(1180px, 88vw);
  --ch:min(calc(var(--vh, 1vh) * 62), 640px);
  position:absolute; left:50%; top:var(--card-top, 58%);
  width:var(--cw); height:var(--ch);
  margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  border-radius:clamp(20px, 2.2vw, 32px);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform, opacity;
  backface-visibility:hidden;
  box-shadow:
    0 1px 0 rgb(255 255 255 / .06) inset,
    0 30px 60px -30px rgb(0 0 0 / .35),
    0 60px 120px -60px rgb(0 0 0 / .3);
  pointer-events:auto;
  cursor:none;
  display:block;
}
.pcard[data-tone="light"]{ box-shadow: 0 0 0 1px rgb(0 0 0 / .07) inset, 0 30px 60px -30px rgb(0 0 0 / .22), 0 60px 120px -60px rgb(0 0 0 / .18); }
.pcard .shade{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .5));
  opacity:var(--shade, 0);
}

/* מדיה: מוקאפ טלפון + הגדלת פרט + צבע המותג */
.pc-media{ position:absolute; inset:0; }
/* מחשב נייד + טלפון שעומד לפניו */
.pc-media{ container-type:size; --lw:min(calc(var(--ch) * 1.06), 52cqw); }
.pc-laptop{
  position:absolute; left:6%; top:50%;
  width:var(--lw);
  transform:translateY(-54%);
  filter:drop-shadow(0 34px 40px rgb(0 0 0 / .26));
}
.lap-screen{
  position:relative;
  padding:calc(var(--lw) * .024) calc(var(--lw) * .024) calc(var(--lw) * .03);
  border-radius:calc(var(--lw) * .028) calc(var(--lw) * .028) 0 0;
  background:#0c0c0e;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 0 0 calc(var(--lw) * .004) #26262a;
}
.lap-cam{
  position:absolute; left:50%; top:calc(var(--lw) * .009); translate:-50% 0;
  width:calc(var(--lw) * .008); aspect-ratio:1; border-radius:50%;
  background:#2c2d33;
}
.lap-view{
  aspect-ratio:16 / 10; overflow:hidden;
  border-radius:calc(var(--lw) * .006);
  background:#fff;
}
.lap-view img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.lap-base{
  position:relative;
  width:114%; margin-left:-7%;
  height:calc(var(--lw) * .038);
  border-radius:0 0 calc(var(--lw) * .05) calc(var(--lw) * .05) / 0 0 100% 100%;
  background:linear-gradient(180deg, #e9eaec 0%, #c9cbcf 45%, #9ea1a6 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .7);
}
.lap-base span{
  position:absolute; left:50%; top:0; translate:-50% 0;
  width:15%; height:40%;
  border-radius:0 0 calc(var(--lw) * .02) calc(var(--lw) * .02);
  background:linear-gradient(180deg, #b6b8bc, #d4d6d9);
}
.pc-phone{
  --ph:calc(var(--lw) * .56);
  --pw:calc(var(--ph) * .478);
  position:absolute;
  right:calc(var(--pw) * -.5);
  bottom:calc(var(--lw) * -.012);
  width:var(--pw); height:var(--ph);
  filter:drop-shadow(-10px 20px 24px rgb(0 0 0 / .3));
}
.no-desktop .lap-screen, .no-desktop .lap-base{ visibility:hidden; }
.pc-phone .device{ box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 0 0 calc(var(--pw) * .011) #0b0b0c; }

/* טקסט: ימין למטה */
.pc-top{
  position:absolute; top:clamp(20px, 2.4vw, 34px); right:clamp(22px, 2.8vw, 40px); left:clamp(22px, 2.8vw, 40px);
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:500;
}
.pc-top .tag{ padding:6px 12px; border-radius:999px; border:1px solid rgb(var(--ink-rgb) / .25); }
.pc-top .idx{ font-family:var(--font-en); letter-spacing:.06em; opacity:.6; }
.pc-info{
  position:absolute; right:clamp(22px, 2.8vw, 44px); bottom:clamp(22px, 2.8vw, 44px);
  width:min(360px, 32%);
  text-align:right;
}
.pc-info h3{
  margin:0 0 12px;
  font-size:clamp(30px, 2.8vw, 46px); font-weight:700; line-height:1.05;
  text-wrap:balance;
}
.pc-info p{
  margin:0 0 22px auto;
  max-width:25ch;              /* תמיד 2-3 שורות קצרות ומאוזנות */
  font-size:16px; line-height:1.65; opacity:.78;
  text-wrap:balance;
}
.pc-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 20px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:15px; font-weight:600;
  cursor:none;
}
.pc-btn svg{ width:16px; height:16px; transition:transform .3s var(--ease-soft); }
.pcard:hover .pc-btn svg{ transform:translateX(-4px); }
/* בדסקטופ הסמן "לצפייה בפרויקט" הוא הקריאה לפעולה, אז אין צורך בכפתור */
@media (hover: hover) and (pointer: fine){
  .pc-btn{ display:none; }
  .pc-info p{ margin-bottom:0; }
}

/* סמן "לצפייה בפרויקט" */
.view-cursor{
  position:fixed; left:0; top:0; z-index:90;
  display:flex; align-items:flex-start; gap:4px;
  pointer-events:none;
  opacity:0; scale:.6;
  transition:opacity .2s, scale .25s var(--ease-soft);
  will-change:transform;
  direction:ltr;
}
.view-cursor.on{ opacity:1; scale:1; }
.view-cursor svg{ width:22px; height:22px; flex:none; color:var(--c-ink, #141414); }
.view-cursor svg path{ stroke:var(--c-bg, #fff); }
.view-cursor span{
  margin-top:16px;
  font-family:var(--font-he); font-size:14px; font-weight:600;
  padding:7px 14px; border-radius:999px 999px 999px 4px;
  background:var(--c-ink, #141414); color:var(--c-bg, #fff);
  white-space:nowrap;
}

/* כפתור קבוע: לכל הפרויקטים */
.all-projects{
  --ink:#141414; --bg:#fff;
  position:fixed; left:50%; bottom:24px; z-index:80;
  white-space:nowrap;
  box-shadow:0 14px 30px -14px rgb(0 0 0 / .45);
  translate:-50% calc(100% + 40px);
  transition:translate .55s var(--ease-move), transform .25s var(--ease-soft);
}
.all-projects.show{ translate:-50% 0; }

@media (max-width: 900px){
  .p-head .eyebrow{ font-size:12px; }
  .p-head h2{ font-size:clamp(60px, 19.5vw, 120px); }
  .pcard{
    --cw:calc(100vw - 32px);
    --ch:min(calc(var(--vh, 1vh) * 70), 640px);
    cursor:auto;
  }
  .pc-laptop{ left:50%; top:6%; width:auto; transform:none; filter:none; }
  .lap-screen, .lap-base{ display:none; }
  .pc-phone{ --ph:calc(var(--ch) * .56); position:relative; right:auto; bottom:auto; margin-left:calc(var(--pw) / -2); transform:rotate(-4deg); filter:drop-shadow(0 24px 30px rgb(0 0 0 / .3)); }
  .pc-top{ top:16px; right:16px; left:16px; }
  .pc-info{ left:18px; right:18px; bottom:18px; width:auto; }
  .pc-info h3{ font-size:28px; margin-bottom:6px; }
  .pc-info p{ font-size:14px; margin-bottom:14px; max-width:27ch; }
  .pc-btn{ height:42px; font-size:14px; cursor:pointer; }
  .all-projects{ bottom:16px; }
}

/* =========================================================
   ABOUT: אודות
   .ab-stage  → הבמה: כותרת ענק מאחור, לוחות זכוכית, התמונה, טבעת כרטיסים שמקיפה אותה
   .ab-copy   → הטקסט: כותרת, פסקה, ציטוט, שלושה נתונים, קריאה לפעולה
   ========================================================= */
.about{
  --ink:#141414; --ink-rgb:20 20 20; --bg:#F7F6F2; --acc:#F0437F; --acc-rgb:240 67 127;
  position:relative; z-index:1;
  background:var(--bg); color:var(--ink);
  min-height:max(calc(var(--vh, 1vh) * 100), 760px);
  overflow:hidden;
  isolation:isolate;
}
.about::before{ /* קווי גריד, כמו במסך הפתיחה */
  content:""; position:absolute; inset:0 var(--pad-x); z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgb(var(--ink-rgb) / .06) 1px, transparent 1px);
  background-size:calc((100% - 1px) / 6) 100%;
  border-right:1px solid rgb(var(--ink-rgb) / .06);
}

/* קווי הגריד רק מאחורי הבמה עם התמונה, לא מאחורי הטקסט */
.about::before{ right:auto; width:calc(60% - var(--pad-x)); background-size:calc((100% - 1px) / 4) 100%; border-right:0; }
@media (max-width: 900px){ .about::before{ display:none; } }

/* ---------- STAGE ---------- */
.ab-stage{
  position:absolute; inset:0 auto 0 0; width:60%;
  direction:ltr;
  z-index:1;
}
.ab-layer{ position:absolute; inset:0; will-change:transform; pointer-events:none; }

.ab-glow{
  position:absolute; left:52%; top:58%; width:92%; aspect-ratio:1;
  translate:-50% -50%;
  background:
    radial-gradient(closest-side, rgb(var(--acc-rgb) / .34), rgb(var(--acc-rgb) / .12) 45%, transparent 70%);
  filter:blur(20px);
  opacity:var(--rv, 0);
}

.ab-title{
  position:absolute; left:var(--pad-x); top:11%;
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(84px, 10.8vw, 204px);
  line-height:.86; letter-spacing:-.05em;
  white-space:nowrap;
}
.ab-title span{ display:block; overflow:hidden; padding-bottom:.08em; }
.ab-title span i{ display:block; font-style:normal; transform:translateY(calc((1 - var(--rv, 0)) * 105%)); transition:transform 1.1s var(--ease-move); }
.ab-title span:nth-child(1){ font-weight:200; }
.ab-title span:nth-child(2){ font-weight:700; }
.ab-title span:nth-child(2) i{ transition-delay:.09s; }

/* לוחות זכוכית */
.ab-glass{
  position:absolute; border-radius:clamp(22px, 2.4vw, 36px);
  transition:transform 1.2s var(--ease-move), opacity .9s;
}
.ab-glass.g1{
  left:25%; top:16%; width:31%; height:58%;
  background:linear-gradient(160deg, rgb(255 255 255 / .72), rgb(255 255 255 / .16) 70%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8), 0 30px 60px -30px rgb(var(--acc-rgb) / .35);
  transform:translate(calc((1 - var(--rv, 0)) * -70px), calc((1 - var(--rv, 0)) * 40px)) rotate(calc(-7deg - (1 - var(--rv, 0)) * 8deg));
  opacity:var(--rv, 0);
}
.ab-glass.g2{
  left:80%; top:30%; width:15%; height:48%;
  -webkit-backdrop-filter:blur(5px) saturate(1.15); backdrop-filter:blur(5px) saturate(1.15);
  transform:translate(calc((1 - var(--rv, 0)) * 90px), calc((1 - var(--rv, 0)) * 30px)) rotate(calc(6deg + (1 - var(--rv, 0)) * 10deg));
  transition-delay:.12s;
  opacity:var(--rv, 0);
}

/* התמונה */
.ab-figure{
  position:absolute; left:56%; bottom:0;
  height:min(80%, 800px); aspect-ratio:929 / 1272;
  translate:-50% 0;
}
.ab-figure .inner{
  position:absolute; inset:0;
  transform-origin:50% 100%;
  transform:translateY(calc((1 - var(--rv, 0)) * 7%)) scale(calc(1.05 - var(--rv, 0) * .05));
  clip-path:inset(calc((1 - var(--rv, 0)) * 100%) 0 0 0);
  transition:transform 1.3s var(--ease-move), clip-path 1.15s var(--ease-move);
}
.ab-figure img{ width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
.ab-shine{ /* מעבר אור על הדמות בלבד */
  position:absolute; inset:0;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  background:linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .5) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat;
  mix-blend-mode:soft-light;
  opacity:0;
}
.about.in .ab-shine{ animation:abShine 7.5s 1s var(--ease-soft) infinite; }
@keyframes abShine{
  0%{ background-position:130% 0; opacity:1; }
  22%{ background-position:-30% 0; opacity:1; }
  23%,100%{ background-position:-30% 0; opacity:0; }
}

/* טבעת הכרטיסים */
.ab-card{
  position:absolute; left:0; top:0;
  will-change:transform, opacity;
  backface-visibility:hidden;
  pointer-events:none;
}
.ab-card .c{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px 12px 12px; border-radius:18px;
  background:linear-gradient(150deg, rgb(255 255 255 / .92), rgb(255 255 255 / .66));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .9), 0 18px 40px -18px rgb(0 0 0 / .45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  translate:-50% -50%;
  white-space:nowrap;
  direction:rtl; color:#141414;
}
.ab-card .ico{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:rgb(var(--acc-rgb) / .14); color:var(--acc);
}
.ab-card .ico svg{ width:19px; height:19px; }
.ab-card b{ display:block; font-size:16px; font-weight:600; line-height:1.2; }
.ab-card small{ display:block; font-size:12.5px; opacity:.6; line-height:1.3; }
.ab-card.tile .c{ padding:0; overflow:hidden; border-radius:16px; width:112px; aspect-ratio:.82; background:#fff; }
.ab-card.tile img{ width:100%; height:100%; object-fit:cover; object-position:top; }

/* חותמת מסתובבת */
.ab-badge{
  position:absolute; left:var(--pad-x); bottom:6%;
  width:clamp(96px, 8.4vw, 132px); aspect-ratio:1;
  opacity:var(--rv, 0);
  transform:scale(calc(.7 + var(--rv, 0) * .3));
  transition:opacity .8s .35s, transform 1s .35s var(--ease-move);
  z-index:16;
}
.ab-badge svg{ width:100%; height:100%; overflow:visible; }
.ab-badge .ring{ animation:abSpin 22s linear infinite; transform-origin:50% 50%; }
.ab-badge text{ font-family:var(--font-en); font-size:9.6px; font-weight:500; letter-spacing:.24em; fill:currentColor; }
@keyframes abSpin{ to{ transform:rotate(360deg); } }

/* ---------- COPY ---------- */
.ab-copy{
  position:relative; z-index:2;
  margin-inline-start:0; margin-right:0;
  width:40%;
  padding:clamp(88px, 13vh, 150px) var(--pad-x) clamp(64px, 9vh, 110px) clamp(8px, 1vw, 24px);
  min-height:inherit;
  display:flex; flex-direction:column; justify-content:center;
}
.ab-copy > *{
  opacity:var(--rv, 0);
  transform:translateY(calc((1 - var(--rv, 0)) * 26px));
  transition:opacity .9s var(--ease-soft), transform 1s var(--ease-move);
}
.ab-copy > :nth-child(2){ transition-delay:.06s; }
.ab-copy > :nth-child(3){ transition-delay:.14s; }
.ab-copy > :nth-child(4){ transition-delay:.22s; }
.ab-copy > :nth-child(5){ transition-delay:.3s; }
.ab-copy > :nth-child(6){ transition-delay:.38s; }

.ab-eyebrow{ font-size:14px; font-weight:500; margin:0 0 18px; color:var(--acc); letter-spacing:.02em; }
.ab-copy h2{
  margin:0;
  font-size:clamp(38px, 4.1vw, 68px); line-height:1.04; letter-spacing:-.015em;
  font-weight:700; text-wrap:balance;
}
.ab-copy h2 span{ display:block; font-weight:200; }
.ab-lead{
  margin:24px 0 0; max-width:44ch;
  font-size:clamp(16px, 1.16vw, 18.5px); line-height:1.7; opacity:.8;
  text-wrap:balance;
}
.ab-lead + .ab-lead{ margin-top:12px; }

.ab-quote{
  margin:clamp(26px, 3.6vh, 40px) 0 0; padding:clamp(22px, 3vh, 30px) 0 0;
  border-top:1px solid rgb(var(--ink-rgb) / .13);
  position:relative;
}
.ab-quote .mark{
  display:block; height:26px; margin-bottom:10px;
  font-family:Georgia, "Times New Roman", serif; font-size:74px; line-height:1; color:rgb(var(--acc-rgb) / .38);
}
.ab-quote blockquote{
  margin:0; max-width:24ch;
  font-size:clamp(21px, 1.75vw, 28px); line-height:1.35; font-weight:500;
  text-wrap:balance;
}
.ab-quote figcaption{ margin-top:16px; font-size:14px; line-height:1.5; }
.ab-quote figcaption::before{ content:""; display:block; width:18px; height:2px; background:var(--acc); margin-bottom:12px; }
.ab-quote figcaption span{ display:block; opacity:.55; }

.ab-stats{
  margin:clamp(26px, 3.6vh, 40px) 0 0; padding:clamp(22px, 3vh, 30px) 0 0;
  border-top:1px solid rgb(var(--ink-rgb) / .13);
  display:grid; grid-template-columns:repeat(3, 1fr);
  list-style:none;
}
.ab-stats li{ padding-inline-end:16px; }
.ab-stats li + li{ padding-inline-start:0; }   /* בלי קווים אנכיים: רק קו אחד מעל השורה */
.ab-stats .k{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; opacity:.75; white-space:nowrap;
}
.ab-stats .k::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--acc); flex:none; }
.ab-stats .n{
  display:block; margin:12px 0 4px;
  font-family:var(--font-en); font-size:clamp(38px, 3.5vw, 58px); font-weight:300; line-height:1;
  color:var(--acc); direction:ltr; text-align:right; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.ab-stats .d{ font-size:13.5px; line-height:1.45; opacity:.6; text-wrap:balance; display:block; max-width:16ch; }

.ab-cta{ margin-top:clamp(28px, 4vh, 44px); display:flex; align-items:center; gap:14px; }
.ab-cta a{ display:inline-flex; align-items:center; gap:14px; font-size:15px; font-weight:600; }
.ab-cta .dot{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--acc); color:#fff;
  transition:transform .3s var(--ease-soft), background .3s;
}
.ab-cta .dot svg{ width:17px; height:17px; }
.ab-cta a:hover .dot{ transform:translateX(-5px) rotate(-12deg); background:var(--ink); }
.ab-cta a:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; border-radius:999px; }

@media (max-width: 1180px){
  .ab-stage{ width:56%; }
  .ab-copy{ width:44%; }
  .ab-card small{ display:none; }
  .ab-card .c{ padding:9px 14px 9px 9px; gap:9px; border-radius:15px; }
  .ab-card .ico{ width:32px; height:32px; border-radius:9px; }
  .ab-card.tile .c{ width:88px; }
}
@media (max-width: 900px){
  .about{ min-height:0; display:flex; flex-direction:column; }
  .about::before{ background-size:calc((100% - 1px) / 4) 100%; }
  .ab-copy{ display:contents; }
  .ab-copy > *{ margin-inline:var(--pad-x); position:relative; z-index:2; }
  .ab-eyebrow{ order:1; margin-top:64px; }
  .ab-copy h2{ order:2; font-size:clamp(36px, 10.4vw, 56px); }
  .ab-stage{ order:3; position:relative; inset:auto; width:100%; height:min(128vw, 640px); margin-top:8px; }
  .ab-lead{ order:4; margin-top:28px; }
  .ab-lead + .ab-lead{ order:5; }
  .ab-quote{ order:6; }
  .ab-stats{ order:7; }
  .ab-cta{ order:8; margin-bottom:72px; }

  .ab-title{ font-size:clamp(84px, 27vw, 170px); top:3%; }
  .ab-figure{ left:54%; height:88%; }
  /* במובייל התמונה לא יושבת על תחתית האזור, אז היא נמוגה בעדינות */
  .ab-figure .inner{ -webkit-mask-image:linear-gradient(#000 80%, transparent 99%); mask-image:linear-gradient(#000 80%, transparent 99%); }
  .ab-glass.g1{ left:14%; top:20%; width:42%; height:58%; }
  .ab-glass.g2{ left:75%; top:30%; width:21%; height:40%; }
  .ab-badge{ left:var(--pad-x); bottom:5%; width:92px; }
  .ab-card b{ font-size:14px; }
  .ab-card .c{ padding:7px 12px 7px 7px; gap:8px; border-radius:13px; }
  .ab-card .ico{ width:28px; height:28px; border-radius:8px; }
  .ab-card .ico svg{ width:15px; height:15px; }
  .ab-card.tile .c{ width:66px; border-radius:12px; }
  .ab-stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ab-stats .k{ font-size:11px; gap:6px; white-space:normal; }
  .ab-stats .n{ font-size:clamp(32px, 9.4vw, 44px); margin-top:10px; }
  .ab-stats .d{ font-size:12px; }
  .ab-stats li{ padding-inline-end:8px; }
}
@media (prefers-reduced-motion: reduce){
  .ab-badge .ring, .about.in .ab-shine{ animation:none; }
}

/* =========================================================
   TESTIMONIALS: חבל ההמלצות
   כרטיסיות תלויות על חבל שנע ללא הפסקה, נגררות ימינה ושמאלה,
   ומתנדנדות לפי מהירות התנועה.
   ========================================================= */
.testi{
  --ink:#ffffff; --ink-rgb:255 255 255; --bg:#0F0F0F; --acc:#FF7A45; --acc-rgb:255 122 69;
  --paper:#F7F6F2;
  position:relative; z-index:2;
  margin-top:-36px;
  border-radius:36px 36px 0 0;
  background:var(--bg); color:var(--ink);
  padding:clamp(72px, 11vh, 130px) 0 clamp(60px, 9vh, 110px);
  overflow:hidden;
  isolation:isolate;
}
.testi::before{
  content:""; position:absolute; inset:0 var(--pad-x); z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size:calc((100% - 1px) / 6) 100%;
  border-right:1px solid rgb(255 255 255 / .05);
}
.t-head{
  position:relative; z-index:1;
  text-align:center;
  padding:0 var(--pad-x);
}
.t-head > *{
  opacity:var(--rv, 0);
  transform:translateY(calc((1 - var(--rv, 0)) * 26px));
  transition:opacity .9s var(--ease-soft), transform 1s var(--ease-move);
}
.t-head > :nth-child(2){ transition-delay:.07s; }
.t-head > :nth-child(3){ transition-delay:.14s; }
.t-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgb(255 255 255 / .2);
  font-size:13.5px; font-weight:500;
  margin:0 0 22px;
}
.t-pill i{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
.t-head h2{
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(64px, 8.4vw, 156px);
  line-height:.9; letter-spacing:-.04em;
  direction:ltr;
}
.t-head h2 span:first-child{ font-weight:200; }
.t-head h2 span:last-child{ font-weight:700; }
.t-sub{
  margin:22px auto 0; max-width:34ch;
  font-size:clamp(16px, 1.2vw, 19px); line-height:1.6; opacity:.7;
  text-wrap:balance;
}

/* החבל */
.t-line{
  position:relative; z-index:1;
  height:var(--line-h, 520px);
  margin-top:clamp(18px, 3vh, 40px);
  direction:ltr;
  cursor:grab;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.t-line.dragging{ cursor:grabbing; }
.t-rope{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.t-rope path{
  fill:none; stroke:rgb(255 255 255 / .38); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--rv, 0));
  transition:stroke-dashoffset 1.6s var(--ease-move);
}

/* כרטיסיית המלצה */
.t-card{
  position:absolute; left:0; top:0;
  width:var(--card-w, 330px);
  transform-origin:50% 0;
  will-change:transform;
}
.t-clip{ /* האטב */
  position:absolute; left:50%; top:-17px; z-index:2;
  width:20px; height:36px; margin-left:-10px;
  border-radius:5px;
  background:linear-gradient(180deg, #9db7d1, var(--acc) 40%, #5d7d9d);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .25), 0 6px 10px -4px rgb(0 0 0 / .6);
}
.t-clip::after{
  content:""; position:absolute; left:50%; top:9px; translate:-50% 0;
  width:7px; height:7px; border-radius:50%;
  background:var(--bg); box-shadow:inset 0 1px 1px rgb(0 0 0 / .5);
}
.t-body{
  position:relative;
  margin-top:8px;
  padding:30px 26px 22px;
  border-radius:24px;
  background:var(--paper); color:#141414;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), 0 30px 50px -24px rgb(0 0 0 / .8);
  direction:rtl; text-align:right;
  transition:transform .45s var(--ease-soft), box-shadow .45s;
}
.t-card:hover .t-body{ transform:translateY(4px) scale(1.025); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), 0 40px 60px -24px rgb(0 0 0 / .9); }
.t-body .mark{
  display:block; height:24px; margin-bottom:8px;
  font-family:Georgia, "Times New Roman", serif; font-size:66px; line-height:1; color:#F0437F; opacity:.55;
}
.t-body blockquote{
  margin:0;
  font-size:17px; line-height:1.62; font-style:italic; font-weight:400;
  text-wrap:pretty;
}
.t-who{
  display:flex; align-items:center; gap:12px;
  margin-top:20px; padding-top:18px;
  border-top:1px solid rgb(20 20 20 / .1);
}
.t-avatar{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; overflow:hidden;
  background:var(--grad); color:#fff;
  font-size:15px; font-weight:600;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px rgb(20 20 20 / .12);
}
.t-avatar img{ width:100%; height:100%; object-fit:cover; }
.t-who b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }
.t-who span span{ display:block; font-size:13px; opacity:.6; line-height:1.35; }

/* שליטה */
.t-ctrl{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:8px;
  opacity:var(--rv, 0); transition:opacity .9s .4s;
}
.t-ctrl .hint{ font-size:13.5px; opacity:.55; min-width:13ch; text-align:center; }

@media (max-width: 900px){
  .testi{ margin-top:-26px; border-radius:26px 26px 0 0; }
  .testi::before{ background-size:calc((100% - 1px) / 4) 100%; }
  .t-head h2{ font-size:clamp(60px, 19.5vw, 120px); }
  .t-body{ padding:26px 20px 18px; border-radius:20px; }
  .t-body blockquote{ font-size:15.5px; }
  .t-ctrl .arrow{ width:46px; height:46px; }
}

/* =========================================================
   FOOTER
   .f-cta    → כרטיס הקריאה לפעולה, עם כפתור חץ גדול
   .f-panel  → לוח הפוטר: עמודות, ומתחתיהן "מגרש המשחקים":
               גלולות קשר שנופלות ונחות על שם הענק (פיזיקה אמיתית, אפשר לגרור ולזרוק)
   .f-bar    → שורת זכויות ושעון
   ========================================================= */
.site-footer{
  --ink:#141414; --ink-rgb:20 20 20; --bg:#F7F6F2; --acc:#F0437F; --acc-rgb:240 67 127;
  position:relative; z-index:2;
  background:#0F0F0F; color:#fff;
  padding:0 clamp(10px, 1.6vw, 24px) clamp(18px, 2vw, 28px);
}

/* ---------- CTA ---------- */
.f-cta{
  --mx:70%; --my:40%;
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, .8fr) auto; align-items:center;
  gap:clamp(20px, 3vw, 56px);
  padding:clamp(28px, 4vw, 64px) clamp(24px, 4.2vw, 68px);
  border-radius:clamp(24px, 2.6vw, 40px);
  background:var(--acc); color:#fff;
  opacity:var(--rv, 0);
  transform:translateY(calc((1 - var(--rv, 0)) * 60px)) scale(calc(.96 + var(--rv, 0) * .04));
  transition:opacity .9s var(--ease-soft), transform 1.1s var(--ease-move);
}
.f-cta::before{ /* אור שעוקב אחרי העכבר */
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .22), transparent 70%);
  transition:opacity .4s;
}
.f-cta .t-pill{ border-color:rgb(255 255 255 / .35); margin-bottom:18px; }
.f-cta .t-pill i{ background:#fff; }
.f-cta h2{
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(46px, 6.6vw, 122px);
  line-height:.9; letter-spacing:-.04em;
  direction:ltr; text-align:right;
}
.f-cta h2 span{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.f-cta h2 span i{
  display:block; font-style:normal;
  transform:translateY(calc((1 - var(--rv, 0)) * 110%));
  transition:transform 1.1s .15s var(--ease-move);
}
.f-cta h2 span:first-child{ font-weight:200; }
.f-cta h2 span:last-child{ font-weight:700; }
.f-cta h2 span:last-child i{ transition-delay:.24s; }
.f-cta-note b{ display:block; font-size:16px; font-weight:600; margin-bottom:8px; }
.f-cta-note p{ margin:0; font-size:clamp(15px, 1.12vw, 17.5px); line-height:1.65; opacity:.85; text-wrap:balance; max-width:26ch; }
.f-go{
  position:relative; overflow:hidden;
  width:clamp(104px, 13vw, 196px); aspect-ratio:1;
  border-radius:clamp(20px, 2.2vw, 32px);
  border:1.5px solid rgb(255 255 255 / .6);
  display:grid; place-items:center;
  color:#fff;
  transition:background .4s var(--ease-soft), color .4s, border-color .4s, transform .4s var(--ease-soft);
  will-change:transform;
}
.f-go svg{ width:44%; height:44%; position:absolute; transition:transform .55s var(--ease-move); }
.f-go svg + svg{ transform:translate(210%, 210%); }
.f-go:hover, .f-go:focus-visible{ background:#fff; color:var(--acc); border-color:#fff; }
.f-go:hover svg:first-child, .f-go:focus-visible svg:first-child{ transform:translate(-210%, -210%); }
.f-go:hover svg + svg, .f-go:focus-visible svg + svg{ transform:none; }
.f-go:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* ---------- PANEL ---------- */
.f-panel{
  position:relative; overflow:hidden;
  margin-top:clamp(10px, 1.6vw, 24px);
  border-radius:clamp(24px, 2.6vw, 40px);
  background:var(--bg); color:var(--ink);
}
.f-cols{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap:clamp(20px, 3vw, 56px);
  padding:clamp(34px, 4.4vw, 72px) clamp(24px, 4.2vw, 68px) 0;
}
.f-cols > *{
  opacity:var(--rv, 0);
  transform:translateY(calc((1 - var(--rv, 0)) * 22px));
  transition:opacity .8s var(--ease-soft), transform .9s var(--ease-move);
}
.f-cols > :nth-child(2){ transition-delay:.07s; }
.f-cols > :nth-child(3){ transition-delay:.14s; }
.f-cols > :nth-child(4){ transition-delay:.21s; }
.f-tag{ margin:0; font-size:clamp(21px, 1.9vw, 30px); font-weight:500; line-height:1.25; text-wrap:balance; max-width:17ch; }
.f-tag span{ font-weight:200; }
.f-col h3{ margin:0 0 14px; font-size:15px; font-weight:600; }
.f-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.f-col li a{
  font-size:15px; opacity:.6;
  background:linear-gradient(currentColor, currentColor) right 100% / 0 1px no-repeat;
  transition:opacity .25s, background-size .35s var(--ease-soft);
  padding-bottom:2px;
}
.f-col li a:hover, .f-col li a:focus-visible{ opacity:1; background-size:100% 1px; }
.f-col li a[dir="ltr"]{ display:inline-block; unicode-bidi:isolate; }
.f-links a{
  display:block; padding:0 0 16px;
}
.f-links a + a{ padding-top:16px; border-top:1px solid rgb(var(--ink-rgb) / .12); }
.f-links .row{ display:flex; align-items:center; gap:12px; font-size:clamp(20px, 1.8vw, 28px); font-weight:500; line-height:1.1; }
.f-links .row i{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--ink); color:var(--bg);
  transition:transform .35s var(--ease-soft);
}
.f-links a:first-child .row{ color:var(--acc); }
.f-links a:first-child .row i{ background:var(--acc); color:#fff; }
.f-links .row svg{ width:13px; height:13px; }
.f-links a:hover .row i{ transform:translate(-3px, -3px) rotate(-8deg); }
.f-links small{ display:block; margin-top:6px; font-size:13.5px; opacity:.55; }

/* מגרש המשחקים */
.f-play{
  position:relative; overflow:hidden;
  height:var(--play-h, 440px);
  margin-top:clamp(8px, 1.4vw, 24px);
  direction:ltr;
  touch-action:pan-y;
}
.f-word{
  position:absolute; left:0; right:0; top:0;
  margin:0; text-align:center; white-space:nowrap;
  font-family:var(--font-en);
  font-size:var(--word-size, 180px);
  line-height:.8; letter-spacing:-.05em;
  color:var(--ink);
  transform:translateY(var(--word-y, 0px));
  user-select:none; -webkit-user-select:none; pointer-events:none;
}
.f-word .w{ display:inline-block; }
.f-word .w:first-child{ font-weight:200; }
.f-word .w:last-child{ font-weight:700; }
.f-word .ch{ display:inline-block; overflow:hidden; padding-top:.14em; margin-top:-.14em; vertical-align:top; }
.f-word .ch i{
  display:block; font-style:normal;
  transform:translateY(calc((1 - var(--rv, 0)) * 112%));
  transition:transform 1s var(--ease-move); transition-delay:calc(var(--i) * 38ms);
}

.f-pill{
  position:absolute; left:0; top:0; z-index:2;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--pill-h, 56px); padding:0 26px;
  border-radius:999px;
  border:1.5px solid var(--ink);
  background:var(--bg); color:var(--ink);
  font-family:var(--font-he); font-size:var(--pill-f, 20px); font-weight:500; white-space:nowrap;
  cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  will-change:transform;
  visibility:hidden;
  transition:background .25s, color .25s, border-color .25s;
}
.f-pill.live{ visibility:visible; }
/* גלולה שנחתה הפוך: הטקסט מתהפך כדי להישאר קריא */
.f-pill .lbl{ display:inline-block; font-size:inherit; transition:transform .4s var(--ease-soft); }
.f-pill.flip .lbl{ transform:rotate(180deg); }
.f-pill.grab{ cursor:grabbing; }
.f-pill:hover{ background:var(--ink); color:var(--bg); }
.f-pill.solid{ background:var(--acc); border-color:var(--acc); color:#fff; }
.f-pill.solid:hover{ background:var(--ink); border-color:var(--ink); }
.f-pill.chip{ width:var(--pill-h, 56px); padding:0; }
.f-pill.chip.dark{ background:var(--ink); color:var(--bg); }
.f-pill.chip svg{ width:42%; height:42%; }
.f-pill.sticker{
  width:var(--stick, 124px); height:var(--stick, 124px); padding:0;
  border:0; background:var(--acc); color:#fff;
  box-shadow:0 14px 30px -14px rgb(0 0 0 / .45);
}
.f-pill.sticker:hover{ background:var(--ink); }
.f-pill.sticker svg{ position:absolute; inset:0; width:100%; height:100%; }
.f-pill.sticker text{ font-family:var(--font-en); font-size:10.4px; font-weight:600; letter-spacing:.2em; fill:currentColor; }
.f-pill:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }

/* ---------- BAR ---------- */
.f-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap;
  padding:clamp(16px, 1.8vw, 26px) clamp(14px, 2.6vw, 44px) 0;
  font-size:13.5px; color:rgb(255 255 255 / .6);
}
.f-bar ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
.f-bar a{ transition:color .25s; }
.f-bar a:hover, .f-bar a:focus-visible{ color:#fff; }
.f-top{ display:inline-flex; align-items:center; gap:10px; color:#fff; }
.f-top i{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgb(255 255 255 / .3);
  transition:background .3s, color .3s, transform .3s var(--ease-soft);
}
.f-top svg{ width:14px; height:14px; }
.f-top:hover i{ background:#fff; color:#0F0F0F; transform:translateY(-3px); }

@media (max-width: 1100px){
  .f-cols{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); row-gap:36px; }
  .f-cols .f-tagcol{ grid-column:1 / -1; }
  .f-cols .f-links{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px, 3vw, 56px); }
  .f-links a + a{ padding-top:0; border-top:0; }
}
@media (max-width: 900px){
  .f-cta{ grid-template-columns:minmax(0, 1fr) auto; align-items:end; row-gap:22px; }
  .f-cta-main{ grid-column:1 / -1; }
  .f-cta h2{ font-size:clamp(46px, 14.4vw, 96px); }
  .f-go{ width:clamp(84px, 24vw, 120px); }
  .f-word{ white-space:normal; }
  .f-word .w{ display:block; }
  .f-bar{ flex-direction:column; align-items:flex-start; }
  .f-bar .f-right{ display:flex; flex-direction:column; gap:12px; }
  .f-bar .f-left{ display:flex; width:100%; justify-content:space-between; align-items:center; }
}
@media (max-width: 520px){
  .f-cols .f-links{ grid-template-columns:1fr; }
  .f-links a + a{ padding-top:16px; border-top:1px solid rgb(var(--ink-rgb) / .12); }
}

/* =========================================================
   ACCENT: האתר שחור־לבן, והצבע היחיד הוא גרדיאנט מגורען
   כתום → ורוד → סגול → אינדיגו. הוא מופיע רק בנגיעות,
   ובמעבר עכבר על כותרות ותמונות (טשטוש קל והילה צבעונית).
   כדי לשנות את הצבעים: ארבעת המשתנים הראשונים ב-:root כאן.
   ========================================================= */
:root{
  --g-o:#FF6B2C; --g-p:#F0437F; --g-v:#6D45F5; --g-i:#2B1FB8;
  --blob:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 280 280'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='17'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M58 22C92 4 150 8 172 48c16 30-12 52-6 82 7 36-28 62-70 54-36-7-66 0-80-36C5 120 36 102 30 72 25 48 34 34 58 22Z'/%3E%3C/svg%3E");
  --mesh:radial-gradient(circle at 28% 30%, var(--g-o), transparent 52%),
    radial-gradient(circle at 74% 34%, var(--g-p), transparent 50%),
    radial-gradient(circle at 60% 76%, var(--g-v), transparent 55%),
    radial-gradient(circle at 24% 74%, var(--g-i), transparent 52%),
    var(--g-p);
  --grad:linear-gradient(115deg, var(--g-o) 0%, var(--g-p) 40%, var(--g-v) 76%, var(--g-i) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncA type='linear' slope='0' intercept='.85'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* משטחים קטנים: גרדיאנט מגורען */
.ab-cta .dot, .t-avatar, .t-clip, .f-pill.solid, .f-pill.sticker, .f-links a:first-child .row i, .m-cursor span{
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:160px, cover;
  color:#fff; border-color:transparent;
}
.t-pill i, .ab-stats .k::before, .ab-quote figcaption::before, .menu-list a::after{ background:var(--grad); }
/* טקסט בגרדיאנט */
.ab-eyebrow, .ab-stats .n, .f-links a:first-child .row > span, .menu-list a small{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ab-eyebrow{ display:inline-block; align-self:flex-start; }

/* כתם הצבע מאחורי הטלפון במסך הפתיחה */
/* כתם הצבע: צורה אורגנית (--blob), בצבעי הרשת (--mesh), שקוף למחצה ומגורען בעדינות */
.stage::before, .stage::after{
  content:""; position:absolute; left:50%; top:var(--cy, 50%); z-index:0; pointer-events:none;
  width:calc(var(--ph, 500px) * 1.5); aspect-ratio:1; translate:-50% -50%;
  -webkit-mask:var(--blob) center / contain no-repeat; mask:var(--blob) center / contain no-repeat;
  animation:blobFloat 20s ease-in-out infinite alternate;
}
.stage::before{ background:var(--mesh); filter:blur(56px); opacity:.2; }   /* הטשטוש מערבב את הצבעים, והמסכה הרכה מטשטשת את הקצה */
.stage::after{ background:var(--grain); background-size:150px; mix-blend-mode:overlay; opacity:.2; }
@keyframes blobFloat{
  0%  { rotate:-14deg; scale:1 .96; }
  50% { rotate:6deg;   scale:1.05 1; }
  100%{ rotate:22deg;  scale:.97 1.04; }
}

/* אודות: אותו כתם מאחורי הדמות, ולוח זכוכית נקי */
.ab-glow{
  width:104% !important; aspect-ratio:1 !important;
  background:var(--mesh) !important;
  -webkit-mask:var(--blob) center / contain no-repeat; mask:var(--blob) center / contain no-repeat;
  filter:blur(24px) !important;
  animation:blobFloat 24s ease-in-out infinite alternate;
}
.ab-glow-wrap{ opacity:.32; }   /* כתם עדין מאחורי הדמות */
.ab-glow::after{
  content:""; position:absolute; inset:0;
  background:var(--grain); background-size:150px; mix-blend-mode:overlay; opacity:.2;
}
.ab-glass.g2{
  background:linear-gradient(200deg, rgb(255 255 255 / .5), rgb(255 255 255 / .14) 55%, rgb(255 255 255 / .3));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .75), 0 30px 60px -30px rgb(0 0 0 / .3);
}
.ab-glass.g1{ box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8), 0 30px 60px -30px rgb(0 0 0 / .22); }

/* כרטיס הקריאה לפעולה: רשת צבע מגורענת שזזה לאט */
.f-cta{
  background:
    var(--grain),
    radial-gradient(60% 90% at 0% 100%, var(--g-o), transparent 70%),
    radial-gradient(55% 80% at 30% 0%, var(--g-p), transparent 72%),
    radial-gradient(70% 90% at 100% 0%, var(--g-v), transparent 75%),
    var(--g-i) !important;
  background-blend-mode:overlay, normal, normal, normal, normal;
  background-size:170px, 140% 140%, 140% 140%, 140% 140%, auto !important;
  animation:meshDrift 16s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  from{ background-position:0 0, 0% 100%, 20% 0%, 100% 0%, 0 0; }
  to  { background-position:0 0, 40% 60%, 70% 30%, 50% 40%, 0 0; }
}
.f-go:hover, .f-go:focus-visible{ color:var(--g-v); }
@media (max-width: 1100px){
  .menu-bubble::after{
    background:var(--grain), var(--mesh) !important; background-blend-mode:overlay, normal; background-size:150px, cover !important;
    border-radius:0 !important;
    -webkit-mask:var(--blob) center / contain no-repeat; mask:var(--blob) center / contain no-repeat;
    width:120% !important; aspect-ratio:1 !important; right:-44% !important; bottom:-30% !important;
    filter:none; opacity:.62; rotate:-20deg;
  }
}

/* ---------- מעבר עכבר על כפתורים: נצבעים בגרדיאנט המגורען ---------- */
.view-cursor span{
  background:var(--grain), var(--grad) !important; background-blend-mode:overlay, normal; background-size:150px, cover !important;
  color:#fff !important;
}
.view-cursor svg{ color:var(--g-p) !important; }
.view-cursor svg path{ stroke:#fff !important; }
@media (hover: hover) and (pointer: fine){
  .btn, .arrow, .social a, .f-go, .f-top i, .ab-cta .dot, .f-links .row i, .menu-foot a{ transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-soft); }
  .btn:hover, .arrow:hover, .social a:hover, .f-go:hover, .f-top:hover i, .ab-cta a:hover .dot,
  .f-links a:hover .row i, .f-pill:hover, .f-pill.solid:hover, .f-pill.sticker:hover, .f-pill.chip:hover{
    background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:150px, cover;
    color:#fff; border-color:transparent;
  }
  .arrow:hover .ring circle{ stroke:#fff; }
  .f-go:hover, .f-go:focus-visible{ box-shadow:0 0 0 2px #fff; }
}

@media (prefers-reduced-motion: reduce){
  .stage::before, .ab-glow, .f-cta{ animation:none; }
}

/* =========================================================
   SERVICES: שירותים ("Built to Order")
   דסקטופ: הבמה ננעצת, הכותרת הגדולה נשארת במקום, והכרטיסיות
           נגללות לרוחב מימין לשמאל לפי הגלילה. חותמת מסתובבת מראה את ההתקדמות.
   מובייל/טאבלט: קרוסלה רגילה שמחליקים באצבע.
   ========================================================= */
.services{
  --ink:#141414; --ink-rgb:20 20 20; --bg:#fff;
  position:relative; z-index:1;
  background:var(--bg); color:var(--ink);
}
.sv-stage{
  position:sticky; top:0;
  height:calc(var(--vh, 1vh) * 100); min-height:620px;
  overflow:hidden;
  direction:ltr;
}
.sv-stage::before{
  content:""; position:absolute; inset:0 var(--pad-x); pointer-events:none;
  background-image:linear-gradient(to right, rgb(var(--ink-rgb) / .06) 1px, transparent 1px);
  background-size:calc((100% - 1px) / 6) 100%;
  border-right:1px solid rgb(var(--ink-rgb) / .06);
}
/* כותרת */
.sv-head{
  position:absolute; z-index:2; left:var(--pad-x); bottom:clamp(40px, 7vh, 84px);
  width:calc(36% - var(--pad-x));
}
.sv-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgb(var(--ink-rgb) / .2);
  font-size:13.5px; font-weight:500; direction:rtl;
  margin:0 0 clamp(18px, 3vh, 30px);
}
.sv-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--grad); }
.sv-head h2{
  margin:0;
  font-family:var(--font-en);
  font-size:clamp(64px, 8.4vw, 156px);
  line-height:.86; letter-spacing:-.045em;
}
.sv-head h2 span{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.sv-head h2 span i{ display:block; font-style:normal; transform:translateY(calc((1 - var(--rv, 0)) * 108%)); transition:transform 1.1s var(--ease-move); }
.sv-head h2 span:nth-child(1){ font-weight:200; }
.sv-head h2 span:nth-child(2){ font-weight:700; }
.sv-head h2 span:nth-child(2) i{ transition-delay:.09s; }
.sv-sub{
  position:absolute; z-index:2; left:var(--pad-x); top:clamp(92px, 14vh, 150px);
  width:min(30ch, 26%);
  margin:0; direction:rtl; text-align:right;
  font-size:clamp(15px, 1.15vw, 18px); line-height:1.65; opacity:calc(var(--rv, 0) * .72);
  text-wrap:balance; transition:opacity .9s .2s;
}

/* חותמת מסתובבת */
.sv-badge{
  position:absolute; z-index:4;
  left:36%; top:50%; translate:-50% -50%;
  width:clamp(118px, 10.6vw, 164px); aspect-ratio:1;
  scale:calc(.6 + var(--rv, 0) * .4); opacity:var(--rv, 0);
  transition:scale 1s .25s var(--ease-move), opacity .7s .25s;
}
.sv-badge svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sv-badge .ring{ transform-origin:50% 50%; will-change:transform; }
.sv-badge text{ font-family:var(--font-en); font-size:9.4px; font-weight:500; letter-spacing:.2em; fill:var(--ink); }
.sv-badge .track{ fill:none; stroke:rgb(var(--ink-rgb) / .14); stroke-width:1; }
.sv-badge .prog{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p, 0) * 100); transform:rotate(-90deg); transform-origin:50% 50%; }
.sv-badge .core{
  position:absolute; inset:27%; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:150px, cover;
  color:#fff;
  box-shadow:0 12px 26px -12px rgb(0 0 0 / .45);
}
.sv-badge .core b{ font-family:var(--font-en); font-size:13px; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.sv-badge .core svg{ position:static; width:38%; height:38%; display:none; }

/* מסילת הכרטיסיות */
.sv-view{
  position:absolute; z-index:1; top:0; bottom:0; left:36%; right:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%); mask-image:linear-gradient(to right, transparent 0, #000 9%);
}
.sv-track{
  position:absolute; top:50%; left:0;
  display:flex; gap:clamp(22px, 2.6vw, 44px);
  padding-left:clamp(92px, 9vw, 140px); padding-right:var(--pad-x);
  translate:0 -50%;
  will-change:transform;
}
.sv-card{
  flex:none; width:clamp(320px, 31vw, 480px);
  direction:rtl; text-align:right;
  opacity:calc(.35 + var(--on, 0) * .65);
  transition:opacity .5s var(--ease-soft);
}
.sv-art{
  position:relative; overflow:hidden;
  aspect-ratio:1.12;
  border-radius:clamp(18px, 1.8vw, 28px);
  background:#F7F6F2;
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .06);
  padding:clamp(18px, 2vw, 30px);
  display:flex; flex-direction:column; gap:12px;
  transform:scale(calc(.94 + var(--on, 0) * .06)); transform-origin:50% 100%;
  transition:transform .7s var(--ease-move);
}
.sv-card:nth-child(2) .sv-art{ background:#141414; --ink-rgb:255 255 255; color:#fff; }
.sv-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:20px; padding-bottom:14px; border-bottom:1px solid rgb(var(--ink-rgb) / .16); }
.sv-meta h3{ margin:0; font-size:clamp(26px, 2.3vw, 36px); font-weight:700; line-height:1.1; }
.sv-meta .num{ font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:.06em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sv-card p{ margin:14px 0 0; font-size:clamp(15px, 1.1vw, 17px); line-height:1.6; opacity:.78; text-wrap:balance; max-width:34ch; }
.sv-card ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.sv-card li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.45; }
.sv-card li::before{ content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 8.200 2.300 2.300 4.700-5'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* האיורים: ממשקים קטנים בשחור־לבן */
.ui-row{ display:flex; gap:8px; align-items:center; }
.ui-chip{ height:26px; padding:0 12px; border-radius:999px; border:1px solid rgb(var(--ink-rgb) / .22); font-size:11.5px; font-weight:500; display:inline-flex; align-items:center; white-space:nowrap; }
.ui-chip.on{ background:rgb(var(--ink-rgb)); color:#F7F6F2; border-color:transparent; }
.ui-line{ height:7px; border-radius:4px; background:rgb(var(--ink-rgb) / .16); }
.ui-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ui-prod{ border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgb(20 20 20 / .06); padding:8px; display:flex; flex-direction:column; gap:6px; }
.ui-prod .ph{ flex:1; border-radius:8px; background:linear-gradient(135deg, #e7e4dd, #d6d2c9); }
.ui-prod.pick{ box-shadow:0 0 0 1.5px #141414, 0 14px 24px -14px rgb(0 0 0 / .4); transform:translateY(calc(var(--on, 0) * -8px)); transition:transform .8s .15s var(--ease-move); position:relative; }
.ui-prod.pick::after{ content:""; position:absolute; top:-7px; left:-7px; width:20px; height:20px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 3px #F7F6F2; }
.ui-h{ height:clamp(20px, 2.4vw, 34px); border-radius:6px; background:#fff; width:calc(40% + var(--on, 0) * 38%); transition:width 1s .1s var(--ease-move); }
.ui-h.s{ height:10px; width:52%; background:rgb(255 255 255 / .5); }
.ui-cols{ flex:1; min-height:0; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin-top:6px; }
.ui-cols > div{ border-radius:12px; border:1px solid rgb(255 255 255 / .2); padding:10px; display:flex; flex-direction:column; gap:7px; justify-content:flex-end; }
.ui-cols > div:first-child{ background:#fff; --ink-rgb:20 20 20; border-color:transparent; }
.ui-order{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgb(20 20 20 / .06); }
.ui-order .av{ width:24px; height:24px; border-radius:50%; background:#dcd8d0; }
.ui-order .st{ height:22px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; border:1px solid rgb(20 20 20 / .2); }
.ui-order .st.ok{ background:var(--grad); color:#fff; border-color:transparent; }
.ui-order:nth-child(3){ transform:translateX(calc((1 - var(--on, 0)) * -18px)); transition:transform .8s .1s var(--ease-move); }
.ui-order:nth-child(4){ transform:translateX(calc((1 - var(--on, 0)) * -30px)); transition:transform .8s .18s var(--ease-move); }
.ui-order:nth-child(5){ transform:translateX(calc((1 - var(--on, 0)) * -42px)); transition:transform .8s .26s var(--ease-move); }
.ui-title{ font-size:12px; font-weight:600; opacity:.7; display:flex; justify-content:space-between; }

/* ---------- מובייל וטאבלט: קרוסלה באצבע ---------- */
@media (max-width: 900px){
  .sv-stage{ position:relative; height:auto; min-height:0; padding:72px 0 64px; display:flex; flex-direction:column; }
  .sv-head{ order:1; } .sv-sub{ order:2; } .sv-view{ order:3; }
  .sv-stage::before{ background-size:calc((100% - 1px) / 4) 100%; }
  .sv-head{ position:relative; left:auto; bottom:auto; width:auto; padding:0 var(--pad-x); }
  .sv-head h2{ font-size:clamp(60px, 19.5vw, 120px); }
  .sv-sub{ position:relative; left:auto; top:auto; width:auto; max-width:30ch; margin:20px var(--pad-x) 0; align-self:flex-end; }
  .sv-badge{ left:auto; right:var(--pad-x); top:76px; translate:none; width:104px; }
  .sv-badge text{ font-size:10px; }
  .sv-view{ position:relative; left:auto; right:auto; margin-top:34px; overflow-x:auto; overflow-y:hidden; -webkit-mask-image:none; mask-image:none;
            scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; direction:rtl; }
  .sv-view::-webkit-scrollbar{ display:none; }
  .sv-track{ position:relative; top:auto; left:auto; translate:none; transform:none !important; padding:0 var(--pad-x); gap:16px; width:max-content; }
  .sv-card{ width:min(82vw, 380px); scroll-snap-align:center; }
  .sv-eyebrow{ margin-bottom:16px; }
}

/* ---------- RESPONSIVE ---------- */
/* =========================================================
   MENU: תפריט מובייל וטאבלט (עד 1100px)
   כפתור קבוע בפינה. בלחיצה בועה כהה מתפשטת ממנו וממלאת את המסך,
   והקישורים הגדולים עולים אחד אחרי השני.
   ========================================================= */
.menu-toggle, .menu{ display:none; }
@media (max-width: 1100px){
  .nav, .status, .head-cta{ display:none; }
  .site-header{ grid-template-columns:1fr auto; }

  .menu-toggle{
    position:fixed; z-index:210;
    top:calc((var(--header-h) - 48px) / 2); left:var(--pad-x);
    width:48px; height:48px; border-radius:50%;
    display:grid; place-items:center;
    background:#fff; color:#141414;
    box-shadow:0 0 0 1px rgb(20 20 20 / .08), 0 10px 24px -10px rgb(0 0 0 / .35);
    transition:background .45s var(--ease-soft), color .45s, box-shadow .45s, transform .25s var(--ease-soft);
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle:active{ transform:scale(.92); }
  .menu-toggle:focus-visible{ outline:2px solid var(--m-acc, #FF7A45); outline-offset:3px; }
  .menu-toggle .bars{ position:relative; width:18px; height:10px; }
  .menu-toggle .bars i{
    position:absolute; left:0; right:0; height:1.6px; border-radius:2px; background:currentColor;
    transition:transform .5s var(--ease-move), top .5s var(--ease-move), width .5s var(--ease-move);
  }
  .menu-toggle .bars i:nth-child(1){ top:0; }
  .menu-toggle .bars i:nth-child(2){ top:8.400px; width:62%; left:auto; }
  .menu-open .menu-toggle{ background:transparent; color:#fff; box-shadow:0 0 0 1px rgb(255 255 255 / .35); }
  .menu-open .menu-toggle .bars i:nth-child(1){ top:4.200px; transform:rotate(45deg); }
  .menu-open .menu-toggle .bars i:nth-child(2){ top:4.200px; width:100%; transform:rotate(-45deg); }

  .menu{
    --m-acc:#FF7A45;
    position:fixed; inset:0; z-index:200;
    display:flex; flex-direction:column;
    color:#fff;
    visibility:hidden;
    transition:visibility 0s .75s;
  }
  .menu-open .menu{ visibility:visible; transition-delay:0s; }
  /* הבועה */
  .menu-bubble{
    position:absolute; inset:0; z-index:-1;
    background:#0F0F0F;
    clip-path:circle(0px at var(--bx, 44px) var(--by, 36px));
    transition:clip-path .7s cubic-bezier(.62,0,.3,1);
  }
  .menu-open .menu-bubble{ clip-path:circle(var(--br, 150vmax) at var(--bx, 44px) var(--by, 36px)); transition-duration:.85s; }
  .menu-bubble::before{ /* קווי הגריד של האתר */
    content:""; position:absolute; inset:0 var(--pad-x);
    background-image:linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size:calc((100% - 1px) / 4) 100%;
    border-right:1px solid rgb(255 255 255 / .05);
  }
  .menu-bubble::after{ /* הילה בצבע המותג */
    content:""; position:absolute; right:-30%; bottom:-20%; width:90%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(closest-side, rgb(109 69 245 / .5), transparent 70%);
  }

  .menu-top{
    height:var(--header-h); flex:none;
    display:flex; align-items:center;
    padding:0 var(--pad-x);
  }
  .menu-top .brand-mark{ border-color:rgb(255 255 255 / .35); }
  .menu-top, .menu-foot, .menu-cta{
    opacity:0; transform:translateY(14px);
    transition:opacity .3s, transform .3s;
  }
  .menu-open .menu-top, .menu-open .menu-foot, .menu-open .menu-cta{
    opacity:1; transform:none;
    transition:opacity .6s var(--ease-soft), transform .8s var(--ease-move);
  }
  .menu-open .menu-top{ transition-delay:.25s; }
  .menu-open .menu-cta{ transition-delay:.62s; }
  .menu-open .menu-foot{ transition-delay:.7s; }

  .menu-list{
    flex:1 1 auto; min-height:0;
    list-style:none; margin:0; padding:0 var(--pad-x);
    display:flex; flex-direction:column; justify-content:center;
    gap:clamp(2px, 1.2vh, 12px);
  }
  .menu-list li{ overflow:hidden; padding:.04em 0 .1em; }
  .menu-list a{
    display:flex; align-items:baseline; gap:14px;
    font-size:clamp(42px, min(12.5vw, 9.4vh), 96px); font-weight:200; line-height:1.08; letter-spacing:-.02em;
    transform:translateY(112%) rotate(4deg); transform-origin:100% 100%;
    transition:transform .35s var(--ease-soft), opacity .3s, font-weight .3s;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-list a small{
    font-family:var(--font-en); font-size:13px; font-weight:500; letter-spacing:.08em;
    color:var(--m-acc); direction:ltr; translate:0 -.9em;
  }
  .menu-open .menu-list a{
    transform:none;
    transition:transform .9s var(--ease-move), opacity .3s, font-weight .3s;
    transition-delay:calc(.2s + var(--i) * .07s), 0s, 0s;
  }
  /* כמו בהשראה: הקישור הפעיל בהיר, והשאר מתעמעמים */
  .menu-list a{ opacity:.42; }
  .menu-list a.is-current, .menu-list a:hover, .menu-list a:focus-visible, .menu-list a:active{ opacity:1; font-weight:700; outline:0; }
  .menu-list:hover a.is-current:not(:hover){ opacity:.42; font-weight:200; }
  .menu-list a::after{
    content:""; align-self:center; flex:none;
    width:.2em; height:.2em; border-radius:50%; background:var(--m-acc);
    scale:0; transition:scale .35s var(--ease-soft);
  }
  .menu-list a.is-current::after{ scale:1; }

  .menu-cta{ padding:0 var(--pad-x) clamp(16px, 2.6vh, 28px); }
  .menu-cta .btn{
    --ink:#fff; --bg:#0F0F0F;
    width:100%; height:60px; justify-content:space-between; padding:0 26px; font-size:17px;
  }
  .menu-foot{
    flex:none;
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid rgb(255 255 255 / .14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .menu-foot a{
    display:flex; align-items:center; justify-content:center; gap:10px;
    height:64px; font-size:15px; font-weight:500;
    transition:background .3s;
  }
  .menu-foot a + a{ border-inline-start:1px solid rgb(255 255 255 / .14); }
  .menu-foot a:hover, .menu-foot a:focus-visible{ background:rgb(255 255 255 / .07); outline:0; }
  .menu-foot svg{ width:17px; height:17px; }

  html.menu-open{ overflow:hidden; }
  .menu-open .all-projects{ translate:-50% calc(100% + 40px); }
}
@media (max-width: 1100px) and (min-width: 700px){
  .menu-list{ align-items:flex-start; padding-inline:calc(var(--pad-x) + 4vw); }
  .menu-cta{ display:flex; justify-content:flex-start; padding-inline:calc(var(--pad-x) + 4vw); }
  .menu-cta .btn{ width:auto; min-width:300px; }
}
@media (max-width: 1100px) and (max-height: 560px){
  .menu-list{ flex-direction:row; flex-wrap:wrap; align-content:center; column-gap:28px; }
  .menu-list a{ font-size:clamp(28px, 9vh, 44px); }
}
@media (prefers-reduced-motion: reduce){
  .menu-bubble{ transition-duration:.01s !important; }
  .menu-list a{ transform:none !important; transition-delay:0s !important; }
}

@media (max-width: 1100px){
  .hero-copy{ width:min(320px, 28vw); }
  .lead{ font-size:15px; }
  .tags{ display:none; }
}

@media (max-width: 900px){
  :root{ --header-h:72px; }
  .hero{ min-height:auto; padding-bottom:40px; }
  .nav,.status,.head-cta{ display:none; }
  .site-header{ grid-template-columns:1fr auto; position:relative; }
  .guides::before{ background-size:calc((100% - 1px) / 4) 100%; }

  .hero-name{ position:relative; left:auto; top:auto; translate:none; padding:28px var(--pad-x) 0; }
  .hero-name .eyebrow{ font-size:11px; letter-spacing:.14em; }
  .display-name{ font-size:clamp(60px, 19.5vw, 120px); }
  .hero-name .meta{ display:none; }

  .stage{ position:relative; inset:auto; height:var(--stage-h, 560px); }

  .hero-copy{ position:relative; right:auto; top:auto; translate:none; width:auto; padding:8px var(--pad-x) 0; }
  .lead{ margin:16px 0 24px; }

  /* במובייל: בלי חיצים, רשתות ושם פרויקט. ניווט בגרירה + אוטומטי */
  .hero-foot,.next-label{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-move: 450ms; --dur-flood: 1ms; }
  .phone[data-slot="exit"],.phone[data-slot="queue"]{ --x:0px; --y:0px; --s:1; }
  .status i{ animation:none; }
}

/* =========================================================
   DISPLAY FONT: Bingo לכל הכותרות באנגלית
   ---------------------------------------------------------
   - משקל אחד בלבד, לכן הניגוד בין המילה הדקה למודגשת
     עובר לשקיפות (המילה הראשונה חצי-שקופה) במקום למשקל.
   - ligatures כבויים: בגרסת הדמו צירופים כמו st / ct יוצאים ריקים.
   - להחזרת הפונט הקודם: למחוק את הבלוק הזה.
   ========================================================= */
@font-face{
  font-family:"Bingo";
  src:url("../fonts/Bingo-Regular.woff2") format("woff2"), url("../fonts/Bingo-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{ --font-display:"Bingo", var(--font-en); }

.display-name, .sentence, .p-head h2, .ab-title, .t-head h2,
.f-cta h2, .f-word, .sv-head h2{
  font-family:var(--font-display);
  font-synthesis:none;
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0, "dlig" 0, "clig" 0, "calt" 0;
  letter-spacing:-.01em;
}
.display-name, .sentence .w, .p-head h2 span, .ab-title span, .t-head h2 span,
.f-cta h2 span, .f-word .w, .sv-head h2 span{ font-weight:400 !important; }

/* הניגוד: המילה הראשונה שקטה, השנייה מלאה */
.sentence .w1, .sentence .w2,
.p-head h2 span:first-child, .t-head h2 span:first-child,
.ab-title span:nth-child(1), .sv-head h2 span:nth-child(1),
.f-cta h2 span:first-child, .f-word .w:first-child{ opacity:.5; }

/* SERVICES: משפט המשנה ושורת דף הנחיתה צמודים לכותרת */
.sv-head .sv-sub{
  position:static; width:auto; max-width:34ch;
  margin:clamp(16px, 2.4vh, 26px) 0 0; direction:rtl; text-align:right;
}
.sv-more{
  margin:12px 0 0; max-width:40ch; direction:rtl; text-align:right;
  font-size:13.5px; line-height:1.6;
  opacity:calc(var(--rv, 0) * .6); transition:opacity .9s .35s;
}
.sv-more a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.sv-more a:hover{ opacity:.7; }
@media (max-width: 900px){
  .sv-head .sv-sub{ margin:20px 0 0; max-width:34ch; }
}

/* =========================================================
   GRID LINES: קווים שמצטיירים (ראו assets/js/grid-lines.js)
   הקווים בגוון העדין של הגריד, בלי צבע.
   ========================================================= */
/* הקווים הסטטיים כבויים כשהגרסה המונפשת פעילה */
.gl-host::before{ background-image:none !important; border-right-color:transparent !important; }
.hero .guides.gl-host::after{ display:none; }

.gl{
  --gl-color: rgb(var(--ink-rgb) / .07);
  --gl-dur: 1.5s;      /* כמה זמן כל קו נמתח */
  --gl-step: 90ms;     /* ההשהיה בין קו לקו */
  position:absolute; inset:0 var(--pad-x); z-index:0;
  pointer-events:none; overflow:hidden;
}
/* המיקום מחושב על הקו עצמו, כי שם מוגדר --k */
.gl i{ --gl-left: calc(var(--k) / var(--cols) * (100% - 1px)); }
.hero .gl{ --gl-color: var(--line); inset:0; }
.hero .gl i{ --gl-left: calc(var(--pad-x) + var(--k) / var(--cols) * (100% - 2 * var(--pad-x) - 1px)); }
/* כל האזורים על אותו גריד: 6 עמודות באותם מיקומים */
.testi .gl{ --gl-color: rgb(255 255 255 / .05); }

/* הקו */
.gl i{
  position:absolute; top:0; bottom:0; width:1px; left:var(--gl-left);
  background:var(--gl-color);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--gl-dur) var(--ease-move) calc(var(--k) * var(--gl-step));
}
.gl.is-in i{ transform:scaleY(1); }

/* הקו שמתחת להדר: נפרש לרוחב */
.gl-h{
  position:absolute; left:0; right:0; top:var(--header-h); height:1px;
  background:var(--gl-color);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform 1.6s var(--ease-move) .35s;
}
.gl.is-in .gl-h{ transform:scaleX(1); }

/* מסך הפתיחה מקצר כל מעבר בתוכו ל-.35s (.tone-block *), כאן מחזירים את הזמנים */
.tone-block .gl i{ transition-duration:var(--gl-dur) !important; }
.tone-block .gl-h{ transition-duration:1.6s !important; }
.tone-block.gl-host .cross{ transition-duration:.8s !important; }

/* יציאה מהאזור: איפוס מיידי, כדי שבכניסה הבאה הכל יצטייר שוב */
.gl.is-reset i, .gl.is-reset .gl-h{ transition:none !important; }

/* הצלבים בהירו מופיעים אחרי הקווים */
.hero .guides.gl-host .cross{ opacity:0; transition:opacity .8s 1s; }
.hero .guides.gl-host:has(.gl.is-in) .cross{ opacity:1; }

/* =========================================================
   LIVING COLOR: הגרדיאנט חי בכל מקום שכבר יש בו צבע
   (ראו גם assets/js/living-color.js)
   ---------------------------------------------------------
   "בלגן מבוקר": ארבעה כתמי צבע (כתום, ורוד, סגול, אינדיגו)
   שכל אחד נודד במסלול אחר ובקצב אחר. הקצבים לא מתחלקים זה בזה,
   ולכן הצבעים נפגשים כל פעם מכיוון אחר והתמונה לא חוזרת על עצמה.
   ========================================================= */
@property --c1x{ syntax:"<percentage>"; inherits:false; initial-value:15%; }
@property --c1y{ syntax:"<percentage>"; inherits:false; initial-value:20%; }
@property --c2x{ syntax:"<percentage>"; inherits:false; initial-value:85%; }
@property --c2y{ syntax:"<percentage>"; inherits:false; initial-value:25%; }
@property --c3x{ syntax:"<percentage>"; inherits:false; initial-value:70%; }
@property --c3y{ syntax:"<percentage>"; inherits:false; initial-value:85%; }
@property --c4x{ syntax:"<percentage>"; inherits:false; initial-value:20%; }
@property --c4y{ syntax:"<percentage>"; inherits:false; initial-value:80%; }

/* המשתנה מוגדר על כל אלמנט בנפרד (ולא ב-:root), כדי שהכתמים יזוזו לפי האנימציה של אותו אלמנט */
.btn, .arrow, .social a, .f-go, .f-top i, .ab-cta .dot, .f-links .row i, .f-pill, .menu-foot a,
.sv-badge .core, .t-avatar, .t-clip, .m-cursor span, .view-cursor span, .ui-order .st.ok, .ui-prod.pick::after,
.ab-eyebrow, .ab-stats .n, .f-links a:first-child .row > span, .menu-list a small, .sv-meta .num,
.stage::before, .ab-glow{
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), var(--g-o), transparent 58%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 60%),
    radial-gradient(circle at var(--c3x) var(--c3y), var(--g-v), transparent 62%),
    radial-gradient(circle at var(--c4x) var(--c4y), var(--g-i), transparent 58%),
    linear-gradient(var(--g-p), var(--g-p));
}
:root{
  --mesh-anim:
    liveC1 5.3s ease-in-out infinite alternate,
    liveC2 7.1s ease-in-out infinite alternate,
    liveC3 4.3s ease-in-out infinite alternate,
    liveC4 6.7s ease-in-out infinite alternate;
}
/* כל כתם במסלול לא סדיר משלו */
@keyframes liveC1{
  0%{ --c1x:10%; --c1y:15%; } 30%{ --c1x:75%; --c1y:30%; } 55%{ --c1x:40%; --c1y:90%; }
  80%{ --c1x:90%; --c1y:70%; } 100%{ --c1x:25%; --c1y:45%; }
}
@keyframes liveC2{
  0%{ --c2x:90%; --c2y:20%; } 25%{ --c2x:30%; --c2y:10%; } 60%{ --c2x:15%; --c2y:65%; }
  100%{ --c2x:70%; --c2y:95%; }
}
@keyframes liveC3{
  0%{ --c3x:70%; --c3y:90%; } 35%{ --c3x:95%; --c3y:40%; } 65%{ --c3x:50%; --c3y:5%; }
  100%{ --c3x:5%; --c3y:55%; }
}
@keyframes liveC4{
  0%{ --c4x:15%; --c4y:85%; } 40%{ --c4x:60%; --c4y:55%; } 70%{ --c4x:85%; --c4y:95%; }
  100%{ --c4x:45%; --c4y:20%; }
}

/* ---------- 1. כפתורים במעבר עכבר ---------- */
@media (hover: hover) and (pointer: fine){
  .btn:hover, .arrow:hover, .social a:hover, .f-go:hover, .f-top:hover i, .ab-cta a:hover .dot,
  .f-links a:hover .row i, .f-pill:hover, .f-pill.solid:hover, .f-pill.sticker:hover, .f-pill.chip:hover,
  .menu-foot a:hover{
    /* בלי גרעיניות על כפתורים: הצבע נקי וחלק.
       origin:border-box מונע פס צבע שחוזר על עצמו בתוך המסגרת */
    background:
      radial-gradient(circle at var(--mx, 30%) var(--my, 50%), rgb(255 190 140 / .45), transparent 60%),
      var(--mesh-live);
    background-blend-mode:soft-light, normal, normal, normal, normal, normal;
    background-origin:border-box; background-clip:border-box;
    color:#fff; border-color:transparent;
    text-shadow:0 1px 8px rgb(43 31 184 / .35);
    animation:var(--mesh-anim), liveGlow 3.1s ease-in-out infinite alternate;
  }
}
/* הילה מטושטשת שנשפכת מהכפתור, כל פעם מכיוון אחר */
@keyframes liveGlow{
  0%  { box-shadow:-12px 8px 26px -8px rgb(255 107 44 / .55), 12px 10px 30px -10px rgb(109 69 245 / .5); }
  35% { box-shadow: 10px -6px 28px -8px rgb(240 67 127 / .6),  -6px 12px 26px -10px rgb(43 31 184 / .4); }
  70% { box-shadow: -4px 14px 32px -8px rgb(109 69 245 / .55),  14px 2px 28px -10px rgb(255 107 44 / .45); }
  100%{ box-shadow: 12px 10px 30px -8px rgb(43 31 184 / .5),  -12px -4px 30px -8px rgb(240 67 127 / .5); }
}

/* ---------- 2. משטחי צבע קבועים: הבלגן הצבעוני כל הזמן ---------- */
.sv-badge .core,
.ab-cta .dot, .t-avatar, .t-clip, .f-pill.solid, .f-pill.sticker, .f-links a:first-child .row i,
.m-cursor span, .view-cursor span, .ui-order .st.ok, .ui-prod.pick::after{
  background:var(--grain), var(--mesh-live) !important;
  /* 6 שכבות: גרעיניות + 5 שכבות הצבע. לכל שכבה ערך משלה, אחרת CSS חוזר על הרשימה והצבע "מתרצף" לפסים */
  background-blend-mode:overlay, normal, normal, normal, normal, normal !important;
  background-size:150px, auto, auto, auto, auto, auto !important;
  background-origin:border-box !important;
  animation:var(--mesh-anim);
}
/* טקסט בגרדיאנט: אותו בלגן, בתוך האותיות */
.ab-eyebrow, .ab-stats .n, .f-links a:first-child .row > span, .menu-list a small, .sv-meta .num{
  background-image:var(--mesh-live);
  animation:var(--mesh-anim);
}

/* ---------- 3. הכתם מאחורי הטלפון: חזק יותר, נושם, ונגרר אחרי העכבר ---------- */
.stage::before, .stage::after{
  translate:calc(-50% + var(--bx, 0px)) calc(-50% + var(--by, 0px));
}
/* כתם גדול ומטושטש: זז ומסתובב (זול לדפדפן), בלי צבעים שמתחלפים בכל פריים.
   ציור מחדש של טשטוש 50px+ בכל פריים הוא מה שגרם לגלילה להיתקע */
.stage::before{
  opacity:.32;
  will-change:transform;
  animation:blobFloat 14s ease-in-out infinite alternate;
}
.stage::after{ animation:blobFloat 14s ease-in-out infinite alternate; }   /* הגרעיניות זזה יחד עם הכתם */
@keyframes liveHue{ from{ filter:blur(56px) hue-rotate(-14deg); } to{ filter:blur(64px) hue-rotate(16deg); } }

/* כתם האודות וכרטיס הפוטר */
.ab-glow{ filter:blur(48px) !important; will-change:transform; animation:blobFloat 16s ease-in-out infinite alternate; }
/* כרטיס "Let's make order": בגווני העיצוב המקורי של עדן, וחי.
   המבנה קבוע: ורוד למעלה, סגול באמצע-שמאל, אינדיגו כהה בצד ימין, נגיעה חמה בפינה.
   בתוך האזור שלו, כל כתם נודד במסלול לא סדיר ו"נושם" (--s), כל אחד בקצב אחר,
   כך שהתמונה משתנה כל הזמן ולא חוזרת בקצב קבוע. */
@property --s1{ syntax:"<percentage>"; inherits:false; initial-value:45%; }
@property --s2{ syntax:"<percentage>"; inherits:false; initial-value:55%; }
@property --s3{ syntax:"<percentage>"; inherits:false; initial-value:60%; }
@property --s4{ syntax:"<percentage>"; inherits:false; initial-value:70%; }
.f-cta{
  --mesh-live:
    radial-gradient(var(--s1) calc(var(--s1) * 1.6) at var(--c1x) var(--c1y), rgb(240 90 120 / .6), transparent 72%),
    radial-gradient(var(--s2) calc(var(--s2) * 1.5) at var(--c2x) var(--c2y), var(--g-p), transparent 72%),
    radial-gradient(var(--s3) calc(var(--s3) * 1.5) at var(--c3x) var(--c3y), var(--g-v), transparent 75%),
    radial-gradient(var(--s4) calc(var(--s4) * 1.4) at var(--c4x) var(--c4y), var(--g-i), transparent 80%),
    linear-gradient(var(--g-i), var(--g-i));
  background:var(--grain), var(--mesh-live) !important;
  background-blend-mode:overlay, normal, normal, normal, normal, normal !important;
  background-size:170px, auto, auto, auto, auto, auto !important;
  animation:
    ctaC1 9.7s ease-in-out infinite alternate, ctaC2 7.3s ease-in-out infinite alternate,
    ctaC3 8.9s ease-in-out infinite alternate, ctaC4 11.3s ease-in-out infinite alternate,
    ctaS1 6.1s ease-in-out infinite alternate, ctaS2 5.3s ease-in-out infinite alternate,
    ctaS3 7.7s ease-in-out infinite alternate, ctaS4 6.7s ease-in-out infinite alternate;
}
/* נגיעה חמה: נודדת בפינה השמאלית-תחתונה */
@keyframes ctaC1{ 0%{ --c1x:0%; --c1y:100%; } 30%{ --c1x:10%; --c1y:88%; } 65%{ --c1x:3%; --c1y:94%; } 100%{ --c1x:14%; --c1y:100%; } }
/* ורוד: למעלה, משוטט בין שמאל למרכז */
@keyframes ctaC2{ 0%{ --c2x:26%; --c2y:-4%; } 25%{ --c2x:44%; --c2y:10%; } 55%{ --c2x:33%; --c2y:2%; } 80%{ --c2x:50%; --c2y:-2%; } 100%{ --c2x:30%; --c2y:14%; } }
/* סגול: באמצע-שמאל, עולה ויורד */
@keyframes ctaC3{ 0%{ --c3x:18%; --c3y:60%; } 35%{ --c3x:38%; --c3y:38%; } 60%{ --c3x:26%; --c3y:75%; } 100%{ --c3x:44%; --c3y:55%; } }
/* אינדיגו: מחזיק את הצד הימני כהה, זז מעט */
@keyframes ctaC4{ 0%{ --c4x:92%; --c4y:68%; } 40%{ --c4x:80%; --c4y:45%; } 70%{ --c4x:96%; --c4y:85%; } 100%{ --c4x:85%; --c4y:60%; } }
/* נשימה: כל כתם גדל וקטן בקצב משלו */
@keyframes ctaS1{ from{ --s1:34%; } to{ --s1:52%; } }
@keyframes ctaS2{ from{ --s2:44%; } to{ --s2:66%; } }
@keyframes ctaS3{ from{ --s3:48%; } to{ --s3:72%; } }
@keyframes ctaS4{ from{ --s4:62%; } to{ --s4:80%; } }

@media (prefers-reduced-motion: reduce){
  .stage::before, .ab-glow, .f-cta, .sv-badge .core,
  .ab-cta .dot, .t-avatar, .t-clip, .f-pill.solid, .f-pill.sticker, .f-links a:first-child .row i,
  .m-cursor span, .view-cursor span, .ui-order .st.ok, .ui-prod.pick::after,
  .ab-eyebrow, .ab-stats .n, .f-links a:first-child .row > span, .menu-list a small, .sv-meta .num,
  .btn:hover, .arrow:hover, .social a:hover, .f-go:hover{ animation:none !important; }
}

/* =========================================================
   INTRO: הפתיח (ראו assets/js/intro.js)
   ========================================================= */
/* עד שהסקריפט בונה את הפתיח: מסך בהיר שמסתיר את מסך הפתיחה */
html.intro-on body:not(:has(.intro))::after{
  content:""; position:fixed; inset:0; z-index:9998; background:#F6F6F4;
}
/* השם האמיתי מוסתר עד שהאותיות נוחתות עליו */
html.intro-on .hero-name .display-name{ visibility:hidden; }
html.intro-on{ overflow:hidden; }

.intro{ position:fixed; inset:0; z-index:9999; pointer-events:none; }
.intro-bg{ position:absolute; inset:0; background:#F6F6F4; }
.intro-name{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  direction:ltr; line-height:.9;
  font-family:var(--font-display); font-synthesis:none;
  font-variant-ligatures:none; font-feature-settings:"liga" 0, "dlig" 0, "clig" 0, "calt" 0;
}
.intro-line{ display:flex; }
.intro-ch{ position:relative; display:inline-block; will-change:transform, filter; }
.intro-ch .t{ position:relative; z-index:1; display:inline-block; }
/* ההילה, בהשראת BLURRY: צל צבעוני רך בצורת המילה, מוסט לצד אחד.
   גרדיאנט אחד שעובר על כל השם (fixed): צהוב-כתום למעלה-שמאלה,
   ורוד באמצע, סגול למטה-ימינה. חלק ומטושטש, בלי גרעיניות */
.intro-ch .g{
  position:absolute; inset:0; z-index:0; display:inline-block;
  background:linear-gradient(155deg, #FFC24B 34%, #FF6B2C 42%, #F0437F 50%, #B23CF0 57%, #6D45F5 63%, #2B1FB8 70%) fixed;
  background-size:140% 140%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:.15em transparent;
  filter:blur(.12em) saturate(1.25);
  translate:-.05em -.07em;                  /* הצל בורח למעלה-שמאלה, כמו בהשראה */
  animation:introGlowShift 3.2s ease-in-out infinite alternate;
}
@keyframes introGlowShift{ from{ background-position:0% 0%; } to{ background-position:60% 40%; } }

/* המניפסט: האותיות הנופלות בפונט הכותרות, כמו השם */
.fxl .face text{ font-family:var(--font-display); font-variant-ligatures:none; }

/* ABOUT: הכרטיסים שמסתובבים סביב התמונה בלי טשטוש-רקע (backdrop-filter),
   שחושב מחדש בכל תזוזה ותקע את הגלילה. הרקע שלהם כמעט אטום ממילא */
.ab-card .c{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:linear-gradient(150deg, rgb(255 255 255 / .96), rgb(255 255 255 / .82)) !important; }

/* ABOUT: סימן האינסוף כ-SVG, בגובה של הספרות (0 ו-100%), ומצטייר בכניסה */
.ab-stats .n-inf{ background:none !important; animation:none !important; }
/* התיבה בגובה של שורת ספרות (1em), והסימן יושב בדיוק בין קו העליון לקו הבסיס של הספרות
   (בפונט הזה: מ-0.2em עד 0.83em), כך שגם הטקסט שמתחת מתיישר עם השכנים */
.ab-stats .n-inf{ height:1em; box-sizing:border-box; padding-top:.2em; }
.ab-stats .n-inf svg{
  display:block; margin-inline-start:auto;
  height:.63em; width:auto; overflow:visible;
}
.ab-stats .n-inf path{
  fill:none; stroke:url(#infGrad); stroke-width:6.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--rv, 0) * 100);
  transition:stroke-dashoffset 1.8s .5s var(--ease-move);
}

/* קווים שנשלטים על ידי הגלילה (grid-lines.js קובע את scaleY לכל קו) */
.gl.gl-scroll i{ transition:none !important; will-change:transform; }

/* ABOUT: התיאור מתחת למספרים בשורה אחת (במחשב). בנייד העמודות צרות, אז מותר לרדת שורה */
@media (min-width: 901px){
  .ab-stats .d{ max-width:none; white-space:nowrap; }
}

/* =========================================================
   LOGO (זמני): וריאציה 1 · "Sara Weizman." בפונט Bingo,
   Sara חצי-שקוף, ונקודה בגרדיאנט החי בסוף
   ========================================================= */
.brand{ flex-direction:column; align-items:flex-start; gap:2px; }
.logo{
  font-family:var(--font-display); font-weight:400; font-synthesis:none;
  font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0;
  font-size:24px; line-height:1; letter-spacing:-.01em; direction:ltr; white-space:nowrap;
}
.logo .soft{ opacity:.5; }
.logo-dot{
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), var(--g-o), transparent 58%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 60%),
    radial-gradient(circle at var(--c3x) var(--c3y), var(--g-v), transparent 62%),
    radial-gradient(circle at var(--c4x) var(--c4y), var(--g-i), transparent 58%),
    linear-gradient(var(--g-p), var(--g-p));
  display:inline-block; width:.2em; height:.2em; margin-left:.05em; border-radius:50%;
  /* הגוונים מסתובבים לאט ובאופן אחיד, עם גרעיניות כמו בכפתורים */
  background:var(--grain), linear-gradient(var(--dot-a), #FF6B2C, #F0437F 38%, #B23CF0 68%, #6D45F5) !important;
  background-blend-mode:overlay, normal; background-size:.9em, cover;
  animation:dotSpin 6s linear infinite !important;
}
@property --dot-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes dotSpin{ to{ --dot-a:360deg; } }
.logo-sub{ font-size:11.5px; opacity:.6; line-height:1.2; }
@media (max-width: 900px){ .logo{ font-size:21px; } }

/* =========================================================
   EFFECTS (ראו assets/js/effects.js)
   ========================================================= */
/* זנב התנועה מאחורי התמונה באודות: פסי צבע אופקיים ומטושטשים */
.ab-trail{
  position:absolute; inset:8% -10% 0 -10%; z-index:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(to bottom, transparent 0 18%, rgb(255 107 44 / .55) 22%, transparent 30% 44%,
                    rgb(240 67 127 / .55) 50%, transparent 58% 66%, rgb(109 69 245 / .5) 72%, transparent 82%);
  filter:blur(22px);
  transform-origin:100% 50%;
}
.ab-figure .inner{ z-index:1; }

/* הסמן העדין: הילה קטנה בצבעי האתר, מתחת לטקסט בתחושה (multiply) */
.cursor-glow{
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), var(--g-o), transparent 58%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 60%),
    radial-gradient(circle at var(--c3x) var(--c3y), var(--g-v), transparent 62%),
    linear-gradient(var(--g-p), var(--g-p));
  position:fixed; left:0; top:0; z-index:9000; pointer-events:none;
  width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%;
  background:var(--mesh-live); animation:var(--mesh-anim);
  filter:blur(46px); mix-blend-mode:multiply;
  opacity:0; scale:1; transition:opacity .5s, scale .45s var(--ease-soft);
}
.cursor-glow.on{ opacity:.22; }
.cursor-glow.small{ scale:.45; }

/* =========================================================
   רקע אחיד: כל האזורים הבהירים באותו גוון (--paper)
   האזורים הכהים (המלצות, מסביב לפוטר) נשארים כהים בכוונה
   ========================================================= */
:root{ --paper:#F7F6F2; }
.m-white{ background:var(--paper); }
.projects{ --bg:var(--paper); background:var(--paper); }
.services, .sv2{ --bg:var(--paper); background:var(--paper); }
.about{ background:var(--paper); }
.f-panel{ background:var(--paper); }
/* המוקאפים בשירותים היו בגוון הזה בדיוק, אז עכשיו הם לבנים כדי לבלוט מהרקע */
.sv-art{ background:#fff; }
.sv-card:nth-child(2) .sv-art, .sv2-panel.dark{ background:#141414; }
.sv-art .ui-prod, .sv-art .ui-order{ background:var(--paper); }
.sv-art .ui-chip.on{ color:#fff; }

/* =========================================================
   HEADING SCATTER (ראו assets/js/heading-scatter.js)
   הכותרות שמתפזרות ומתאחדות: מבטלים את חשיפת ה"מסיכה" הישנה
   (span עם overflow:hidden ו-i שעולה מלמטה), כדי שהאותיות יוכלו לעוף חופשי
   ========================================================= */
.hs-on, .hs-on span{ overflow:visible !important; }
.hs-on i{ transform:none !important; transition:none !important; }
hs-c{ display:inline-block; will-change:transform, filter, opacity; }

/* ABOUT: הכרטיסים סביב התמונה בשחור-לבן (הצבע כבר בהילה מאחורי התמונה) */
.ab-card .ico{ background:#141414 !important; color:#fff !important; }
.ab-card .ico svg{ color:#fff; stroke:#fff; }

/* LETTER RELAY: האותיות שעוברות בין הכותרות (ראו heading-scatter.js) */
.relay{ position:fixed; inset:0; z-index:60; pointer-events:none; visibility:hidden; }
.relay.on{ visibility:visible; }
.relay-ch{ position:absolute; left:0; top:0; line-height:1; will-change:transform; opacity:0; direction:ltr; }
.relay-ch i{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  font-style:normal; white-space:pre; font-synthesis:none;
  font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0;
}
/* כותרת שהאותיות שלה "בדרך": מוסתרת, כדי שלא יהיו שתי גרסאות על המסך */
.hs-away hs-c{ opacity:0 !important; }

/* ABOUT: גלולות דקות סביב התמונה, באותה שפה של התפריט שבהדר:
   רקע בהיר-שקוף, קו מסגרת דק, פינות עגולות, בלי צל ובלי ריבוע לאייקון */
.ab-card .c.pill{
  gap:8px; padding:9px 18px 9px 16px; border-radius:999px;
  background:rgb(247 246 242 / .86) !important;
  box-shadow:none !important;
  border:1px solid rgb(20 20 20 / .12);
}
.ab-card .c.pill .ico{ width:auto; height:auto; border-radius:0; background:none !important; color:#141414 !important; opacity:.7; }
.ab-card .c.pill .ico svg{ width:15px; height:15px; color:#141414; stroke:#141414; }
.ab-card .c.pill b{ font-size:14px; font-weight:500; }
@media (max-width: 900px){
  .ab-card .c.pill{ padding:7px 13px 7px 12px; }
  .ab-card .c.pill b{ font-size:12.5px; }
}

/* =========================================================
   ABOUT · המספרים (0 · 100% · ∞) עם רקע צבעוני משותף
   משטח צבע אחד וחי שנמתח על כל השורה; כל מספר הוא "חלון" שרואה ממנו
   את החלק שלו, ולכן הצבע זורם יחד בשלושתם. האינסוף הוא מסיכה באותו משטח.
   (המיקום של כל חלון בתוך המשטח נמדד ב-effects.js: --sx/--sy/--sw/--sh)
   ========================================================= */
@property --u1x{ syntax:"<percentage>"; inherits:true; initial-value:10%; }
@property --u1y{ syntax:"<percentage>"; inherits:true; initial-value:30%; }
@property --u2x{ syntax:"<percentage>"; inherits:true; initial-value:50%; }
@property --u2y{ syntax:"<percentage>"; inherits:true; initial-value:70%; }
@property --u3x{ syntax:"<percentage>"; inherits:true; initial-value:85%; }
@property --u3y{ syntax:"<percentage>"; inherits:true; initial-value:40%; }
@property --u4x{ syntax:"<percentage>"; inherits:true; initial-value:30%; }
@property --u4y{ syntax:"<percentage>"; inherits:true; initial-value:60%; }
@property --infw{ syntax:"<percentage>"; inherits:false; initial-value:0%; }

/* התנועה יושבת על השורה כולה, והמספרים יורשים אותה: כך שלושתם זזים כאחד */
.ab-stats{
  animation:statU1 6.3s ease-in-out infinite alternate, statU2 8.1s ease-in-out infinite alternate,
            statU3 7.2s ease-in-out infinite alternate, statU4 9.4s ease-in-out infinite alternate;
}
@keyframes statU1{ 0%{ --u1x:0%;  --u1y:20%; } 40%{ --u1x:45%; --u1y:70%; } 100%{ --u1x:20%; --u1y:40%; } }
@keyframes statU2{ 0%{ --u2x:60%; --u2y:80%; } 50%{ --u2x:95%; --u2y:30%; } 100%{ --u2x:35%; --u2y:60%; } }
@keyframes statU3{ 0%{ --u3x:100%; --u3y:40%; } 45%{ --u3x:55%; --u3y:20%; } 100%{ --u3x:80%; --u3y:75%; } }
@keyframes statU4{ 0%{ --u4x:25%; --u4y:70%; } 50%{ --u4x:70%; --u4y:50%; } 100%{ --u4x:5%; --u4y:35%; } }

.ab-stats .n, .ab-stats .inf-shape{
  --stat-mesh:
    radial-gradient(40% 90% at var(--u1x) var(--u1y), var(--g-o), transparent 70%),
    radial-gradient(45% 100% at var(--u2x) var(--u2y), var(--g-p), transparent 72%),
    radial-gradient(45% 100% at var(--u3x) var(--u3y), var(--g-v), transparent 72%),
    radial-gradient(40% 90% at var(--u4x) var(--u4y), var(--g-i), transparent 70%),
    linear-gradient(var(--g-p), var(--g-p));
  background-image:var(--stat-mesh) !important;
  background-size:var(--sw, 100%) var(--sh, 100%) !important;
  background-position:var(--sx, 0) var(--sy, 0) !important;
  background-repeat:no-repeat !important;
  animation:none !important;
}
.ab-stats .n{ -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }

/* האינסוף: אותו משטח, דרך מסיכה בצורת הסימן; מצטייר משמאל לימין בכניסה */
.ab-stats .n-inf{ background:none !important; }
.ab-stats .inf-shape{
  display:block; margin-inline-start:auto;
  height:.63em; width:calc(.63em * 115 / 55);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%272.5%202.5%20115%2055%27%3E%3Cpath%20d%3D%27M30%206C16.75%206%206%2016.75%206%2030C6%2043.25%2016.75%2054%2030%2054C44%2054%2052%2042%2060%2030C68%2018%2076%206%2090%206C103.25%206%20114%2016.75%20114%2030C114%2043.25%20103.25%2054%2090%2054C76%2054%2068%2042%2060%2030C52%2018%2044%206%2030%206Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat, linear-gradient(to right, #000 var(--infw), transparent calc(var(--infw) + 10%));
  -webkit-mask-composite:source-in;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%272.5%202.5%20115%2055%27%3E%3Cpath%20d%3D%27M30%206C16.75%206%206%2016.75%206%2030C6%2043.25%2016.75%2054%2030%2054C44%2054%2052%2042%2060%2030C68%2018%2076%206%2090%206C103.25%206%20114%2016.75%20114%2030C114%2043.25%20103.25%2054%2090%2054C76%2054%2068%2042%2060%2030C52%2018%2044%206%2030%206Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%276.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat, linear-gradient(to right, #000 var(--infw), transparent calc(var(--infw) + 10%));
  mask-composite:intersect;
  transition:--infw 1.8s .5s var(--ease-move);
}
.about.in .ab-stats .inf-shape{ --infw:110%; }
@media (prefers-reduced-motion: reduce){ .ab-stats{ animation:none; } .ab-stats .inf-shape{ --infw:110%; } }

/* HERO: צל עדין לטלפון. הכתם הצבעוני מאחוריו כבר נותן עומק, אז הצל קצר, רך ושקוף
   (הצל הקודם נמתח רחוק מתחת לטלפון ונחתך בצדדים) */
.device{
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .22),
    inset 0 0 0 calc(var(--pw) * .011) #0b0b0c,
    0 2px 2px rgb(0 0 0 / .08),
    0 24px 40px -22px rgb(0 0 0 / .28) !important;
}
.phone::after{ background:radial-gradient(closest-side, rgb(0 0 0 / .16), transparent); filter:blur(8px); }
/* שתי השכבות של האותיות המעופפות: כהה מעל בהיר, בהירה מעל כהה */
.relay-ink, .relay-paper{ position:absolute; inset:0; }
.relay-ink .relay-ch{ color:#141414; }
.relay-paper .relay-ch{ color:#fff; }

/* האותיות של כל כותרת בשרשרת (כולל המשפט של המניפסט) מוסתרות כשהן "בדרך" */
.hs-away .hs-l{ opacity:0 !important; }
/* המניפסט: מה שסביב המשפט נעלם בעדינות לפני שהאותיות יוצאות לדרך (--mf-out מ-heading-scatter.js) */
.manifesto .chip, .manifesto .crop, .manifesto .m-caption, .sentence .sel, .sentence .m-cursor{
  filter:opacity(calc(1 - var(--mf-out, 0))) blur(calc(var(--mf-out, 0) * 6px));
}

/* =========================================================
   הגרדיאנט הצבעוני בכל האתר: יותר ורוד וסגול, כתום רק בנגיעה עדינה,
   ותמיד עם הטקסטורה המנוקדת (כמו בעיגול של השירותים).
   כרטיס "Let's make order" (.f-cta) לא כלול: הגוונים שלו נשארים כמו שהם
   ========================================================= */
:root{
  /* הכתמים המטושטשים (מאחורי הטלפון ומאחורי התמונה באודות) */
  --mesh:radial-gradient(circle at 28% 30%, rgb(255 128 80 / .45), transparent 40%),
    radial-gradient(circle at 74% 34%, var(--g-p), transparent 52%),
    radial-gradient(circle at 60% 76%, #B23CF0, transparent 56%),
    radial-gradient(circle at 24% 74%, var(--g-v), transparent 52%),
    var(--g-p);
  --grad:linear-gradient(115deg, #FF8A6A 0%, var(--g-p) 20%, #B23CF0 58%, var(--g-v) 84%, var(--g-i) 100%);
}
.btn, .arrow, .social a, .f-go, .f-top i, .ab-cta .dot, .f-links .row i, .f-pill, .menu-foot a,
.sv-badge .core, .t-avatar, .t-clip, .m-cursor span, .view-cursor span, .ui-order .st.ok, .ui-prod.pick::after,
.ab-eyebrow, .f-links a:first-child .row > span, .menu-list a small, .sv-meta .num,
.stage::before, .ab-glow, .logo-dot{
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), rgb(255 128 80 / .5), transparent 36%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 62%),
    radial-gradient(circle at var(--c3x) var(--c3y), #B23CF0, transparent 64%),
    radial-gradient(circle at var(--c4x) var(--c4y), var(--g-v), transparent 56%),
    linear-gradient(135deg, var(--g-p), #9B3FE6);
}

/* כפתורים במעבר עכבר: אותו צבע חי, עכשיו עם הטקסטורה */
@media (hover: hover) and (pointer: fine){
  .btn:hover, .arrow:hover, .social a:hover, .f-go:hover, .f-top:hover i, .ab-cta a:hover .dot,
  .f-links a:hover .row i, .f-pill:hover, .f-pill.solid:hover, .f-pill.sticker:hover, .f-pill.chip:hover,
  .menu-foot a:hover{
    background:
      var(--grain),
      radial-gradient(circle at var(--mx, 30%) var(--my, 50%), rgb(255 180 220 / .4), transparent 60%),
      var(--mesh-live);
    background-blend-mode:overlay, soft-light, normal, normal, normal, normal, normal;
    background-size:150px, auto, auto, auto, auto, auto, auto;
    background-origin:border-box; background-clip:border-box;
    text-shadow:0 1px 8px rgb(90 30 140 / .35);
    animation:var(--mesh-anim), liveGlow 3.1s ease-in-out infinite alternate;
  }
}
/* ההילה סביב הכפתור: ורודה-סגולה, עם נגיעה חמה קלה */
@keyframes liveGlow{
  0%  { box-shadow:-12px 8px 26px -8px rgb(240 67 127 / .5),  12px 10px 30px -10px rgb(178 60 240 / .45); }
  35% { box-shadow: 10px -6px 28px -8px rgb(178 60 240 / .5), -6px 12px 26px -10px rgb(255 128 80 / .3); }
  70% { box-shadow: -4px 14px 32px -8px rgb(109 69 245 / .5),  14px 2px 28px -10px rgb(240 67 127 / .45); }
  100%{ box-shadow: 12px 10px 30px -8px rgb(240 67 127 / .45), -12px -4px 30px -8px rgb(155 63 230 / .5); }
}

/* טקסט בגרדיאנט: גם הוא עם הטקסטורה */
.ab-eyebrow, .f-links a:first-child .row > span, .menu-list a small, .sv-meta .num{
  background-image:var(--grain), var(--mesh-live);
  background-blend-mode:overlay, normal, normal, normal, normal, normal;
  background-size:120px, auto, auto, auto, auto, auto;
}

/* המספרים באודות (0 · 100% · ∞): אותו משטח משותף, בגוונים החדשים ועם הטקסטורה */
.ab-stats .n:not(.n-inf), .ab-stats .inf-shape{
  --stat-mesh:
    radial-gradient(30% 70% at var(--u1x) var(--u1y), rgb(255 128 80 / .5), transparent 70%),
    radial-gradient(45% 100% at var(--u2x) var(--u2y), var(--g-p), transparent 72%),
    radial-gradient(45% 100% at var(--u3x) var(--u3y), #B23CF0, transparent 72%),
    radial-gradient(40% 90% at var(--u4x) var(--u4y), var(--g-v), transparent 70%),
    linear-gradient(135deg, var(--g-p), #9B3FE6);
  background-image:var(--grain), var(--stat-mesh) !important;
  background-blend-mode:overlay, normal, normal, normal, normal, normal;
  /* 6 שכבות: לכל אחת ערך משלה, אחרת CSS חוזר על הרשימה והצבע נשבר לפסים */
  background-size:150px, var(--sw, 100%) var(--sh, 100%), var(--sw, 100%) var(--sh, 100%), var(--sw, 100%) var(--sh, 100%), var(--sw, 100%) var(--sh, 100%), var(--sw, 100%) var(--sh, 100%) !important;
  background-position:0 0, var(--sx, 0) var(--sy, 0), var(--sx, 0) var(--sy, 0), var(--sx, 0) var(--sy, 0), var(--sx, 0) var(--sy, 0), var(--sx, 0) var(--sy, 0) !important;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* הכתם מאחורי התמונה באודות: טיפה צר יותר, ועם הנקודות של הכתם שמאחורי הטלפון.
   הטשטוש של הכתם היה מוחק גם את הגרעיניות שעליו, לכן היא שכבה נפרדת ולא מטושטשת,
   באותה צורה ובאותה תנועה בדיוק */
.ab-glow{ width:86% !important; }
.ab-glow::after{ content:none; }
.ab-glow-wrap::after{
  content:""; position:absolute; left:52%; top:58%; width:86%; aspect-ratio:1;
  translate:-50% -50%; pointer-events:none;
  -webkit-mask:var(--blob) center / contain no-repeat; mask:var(--blob) center / contain no-repeat;
  background:var(--grain); background-size:150px;
  mix-blend-mode:overlay; opacity:.55;
  animation:blobFloat 16s ease-in-out infinite alternate;
}
@media (max-width: 900px){ .ab-glow-wrap::after{ display:none; } }

/* המספרים באודות: עם נגיעה כתומה ברורה יותר (האינסוף לא משתנה) */
.ab-stats .n:not(.n-inf){
  --stat-mesh:
    radial-gradient(34% 80% at var(--u1x) var(--u1y), rgb(255 128 80 / .9), transparent 70%),
    radial-gradient(45% 100% at var(--u2x) var(--u2y), var(--g-p), transparent 72%),
    radial-gradient(45% 100% at var(--u3x) var(--u3y), #B23CF0, transparent 72%),
    radial-gradient(40% 90% at var(--u4x) var(--u4y), var(--g-v), transparent 70%),
    linear-gradient(135deg, var(--g-p), #9B3FE6);
}

/* בועת הצבע של מסך הפתיחה, כשהיא ממשיכה לאזור שמתחתיו (main.js: paint) */
.m-flood{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--flood, transparent);
  clip-path:circle(0px at var(--fx, 50%) var(--fy, 50%));
}
.m-flood.is-running{
  clip-path:circle(var(--fr, 150vmax) at var(--fx, 50%) var(--fy, 50%));
  transition:clip-path var(--dur-flood) cubic-bezier(.62,0,.3,1);
}

/* הכתם מאחורי התמונה באודות: זז בעדינות (נודד, מסתובב ונושם),
   והטקסטורה המנוקדת שלו ברורה כמו בכפתורים. שתי השכבות באותה תנועה בדיוק */
.ab-glow-wrap{ opacity:.4; }
.ab-glow, .ab-glow-wrap::after{ animation:abDrift 11s ease-in-out infinite alternate !important; }
.ab-glow-wrap::after{ opacity:1; background-size:130px; }
@keyframes abDrift{
  0%  { rotate:-12deg; scale:1 .95;    translate:-54% -50%; }
  35% { rotate:4deg;   scale:1.06 1;   translate:-47% -53%; }
  70% { rotate:16deg;  scale:.96 1.05; translate:-51% -46%; }
  100%{ rotate:24deg;  scale:1.03 .98; translate:-45% -51%; }
}
@media (prefers-reduced-motion: reduce){ .ab-glow, .ab-glow-wrap::after{ animation:none !important; } }

/* =========================================================
   אודות: התמונה בלי אנימציית כניסה ובלי "מעבר האור" שיצר הבזקים.
   נשאר רק פרלקס עדין בגלילה (main.js)
   ========================================================= */
.ab-shine{ display:none !important; }
.ab-figure .inner{ transform:none !important; clip-path:none !important; transition:none !important; }
.ab-trail{ display:none; }

/* הכתם מאחורי התמונה: חי יותר. נודד ונושם בטווח רחב יותר ובקצב מהיר יותר,
   והצבע בו נוכח קצת יותר */
.ab-glow-wrap{ opacity:.48; }
.ab-glow, .ab-glow-wrap::after{ animation:abDrift2 8s ease-in-out infinite alternate !important; }
@keyframes abDrift2{
  0%  { rotate:-16deg; scale:.94 .9;   translate:-58% -47%; }
  30% { rotate:2deg;   scale:1.1 1;    translate:-44% -55%; }
  65% { rotate:18deg;  scale:.95 1.1;  translate:-53% -43%; }
  100%{ rotate:30deg;  scale:1.08 .96; translate:-42% -52%; }
}
@media (prefers-reduced-motion: reduce){ .ab-glow, .ab-glow-wrap::after{ animation:none !important; } }

/* =========================================================
   גוונים שזזים בתוך הכתמים (living-color.js יוצר את .hues)
   ========================================================= */
.hues{
  position:absolute; pointer-events:none; aspect-ratio:1;
  -webkit-mask:var(--blob) center / contain no-repeat; mask:var(--blob) center / contain no-repeat;
}
.hues i{
  position:absolute; width:58%; aspect-ratio:1; border-radius:50%;
  filter:blur(38px); will-change:transform;
}
.hues i:nth-child(1){ left:6%;  top:8%;  background:var(--g-p); animation:hueA 9.3s ease-in-out infinite alternate; }
.hues i:nth-child(2){ left:38%; top:34%; background:#B23CF0;    animation:hueB 11.7s ease-in-out infinite alternate; }
.hues i:nth-child(3){ left:14%; top:42%; background:var(--g-v); animation:hueC 8.1s ease-in-out infinite alternate; opacity:.85; }
.hues i:nth-child(4){ left:44%; top:6%;  width:36%; background:rgb(255 128 80 / .75); animation:hueD 10.9s ease-in-out infinite alternate; }
@keyframes hueA{ 0%{ transform:translate(0,0) scale(1); }      50%{ transform:translate(48%,22%) scale(1.15); }  100%{ transform:translate(14%,58%) scale(.9); } }
@keyframes hueB{ 0%{ transform:translate(0,0) scale(1.1); }    45%{ transform:translate(-52%,-30%) scale(.9); } 100%{ transform:translate(-18%,14%) scale(1.2); } }
@keyframes hueC{ 0%{ transform:translate(0,0); }               40%{ transform:translate(40%,-36%) scale(1.1); } 100%{ transform:translate(62%,6%) scale(.95); } }
@keyframes hueD{ 0%{ transform:translate(0,0) scale(.9); }     55%{ transform:translate(-70%,70%) scale(1.2); } 100%{ transform:translate(-20%,110%) scale(1); } }

/* מאחורי הטלפון: באותו מקום, גודל ותנועה כמו הכתם עצמו */
.hues-hero{
  left:50%; top:var(--cy, 50%); z-index:0;
  width:calc(var(--ph, 500px) * 1.5);
  translate:calc(-50% + var(--bx, 0px)) calc(-50% + var(--by, 0px));
  opacity:.34;
  animation:blobFloat 14s ease-in-out infinite alternate;
}
.stage::before{ opacity:.16; }      /* הבסיס נשאר, רך יותר; הגוונים הזזים נותנים את הצבע */

/* מאחורי התמונה באודות */
.hues-ab{
  left:52%; top:58%; width:86%;
  animation:abDrift2 8s ease-in-out infinite alternate;
}
.ab-glow{ opacity:.45; }
@media (max-width: 900px){ .hues i{ filter:blur(26px); } }

/* =========================================================
   HERO MOTION (hero-motion.js)
   ========================================================= */
/* עד שהכניסה מתחילה: מה שנכנס מוסתר, כדי שלא יהבהב לפני האנימציה */
html.hero-enter .hero-name .display-name, html.hero-enter .hero-name .eyebrow, html.hero-enter .hero-name .meta,
html.hero-enter .hero-copy > *, html.hero-enter .hero-copy h1 > span,
html.hero-enter .stage .device, html.hero-enter .hues-hero,
html.hero-enter .hero-foot .social, html.hero-enter .hero-foot .controls, html.hero-enter .next-label{ opacity:0; }

/* האתר בתוך הטלפון: צילום מסך ארוך שגולל לאט */
.screen img.long-shot{ flex:none; height:auto; object-fit:initial; will-change:transform; }

/* הטלפון שבמרכז נוטה בעדינות לכיוון העכבר, וברק אור זז על הזכוכית */
.phone[data-slot="center"] .device{
  transform:perspective(1100px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
}
.phone[data-slot="center"] .screen::after{
  background:
    radial-gradient(60% 40% at var(--glx, 50%) var(--gly, 30%), rgb(255 255 255 / .1), transparent 70%),
    linear-gradient(115deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .05) 100%);
  z-index:3;
}
/* שורת הסטטוס נשארת מעל האתר שגולל בתוך הטלפון */
.screen .statusbar{ position:relative; z-index:2; background:var(--sb, #000); }

/* =========================================================
   FAQ · שאלות ותשובות (faq.js)
   לוח בהיר בתוך המסגרת הכהה (כמו הלוח בתחתית הפוטר).
   במחשב: השאלות בטור, והתשובה גדולה בצד ומתחלפת בטשטוש רך.
   בנייד: שאלה ותשובה נפתחת מתחתיה
   ========================================================= */
.faq{
  position:relative; z-index:2;
  background:#0F0F0F;
  padding:clamp(36px, 5vw, 80px) clamp(10px, 1.6vw, 24px) clamp(10px, 1.6vw, 24px);
}
.faq-panel{
  --ink:#141414; --ink-rgb:20 20 20;
  background:var(--paper, #F7F6F2); color:var(--ink);
  border-radius:36px;
  padding:clamp(48px, 7vw, 110px) var(--pad-x) clamp(48px, 6vw, 100px);
}
.faq-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
  margin-bottom:clamp(40px, 6vw, 90px);
}
.faq-head h2{
  margin:0; font-size:clamp(64px, 8.4vw, 156px); line-height:.9; letter-spacing:-.04em;
  direction:ltr; white-space:nowrap;
}
.faq .t-pill{ border-color:rgb(20 20 20 / .18); margin-bottom:16px; }
.faq .t-pill i{ background:var(--grad); }
.faq-sub{ margin:0; max-width:30ch; font-size:16px; line-height:1.6; opacity:.7; }
.faq-sub a{ color:inherit; text-underline-offset:3px; }

.faq-body{
  display:grid; grid-template-columns:minmax(280px, 38%) 1fr;
  gap:clamp(32px, 6vw, 110px); align-items:start;
}
.faq-list{ position:relative; list-style:none; margin:0; padding:0; border-top:1px solid rgb(20 20 20 / .12); }
.faq-item{ border-bottom:1px solid rgb(20 20 20 / .12); }
.faq-q{
  width:100%; display:flex; gap:18px; align-items:baseline;
  padding:22px 0; margin:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:clamp(17px, 1.35vw, 21px); font-weight:500; line-height:1.35;
  text-align:right; color:rgb(20 20 20 / .42);
  transition:color .45s var(--ease-soft), padding .45s var(--ease-soft);
}
.faq-q:hover{ color:rgb(20 20 20 / .78); }
.faq-q[aria-expanded="true"]{ color:#141414; padding-inline-start:14px; }
.faq-q:focus-visible{ outline:2px solid #141414; outline-offset:4px; border-radius:6px; }
.faq-q .n{ flex:none; min-width:2.2em; font-family:var(--font-en); font-size:13px; font-weight:500; letter-spacing:.06em; }
.faq-q[aria-expanded="true"] .n{
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* פס צבע מגורען שמחליק אל השאלה הפעילה */
.faq-rail{
  position:absolute; right:0; top:0; width:3px; height:0; border-radius:3px;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:80px, cover;
  transition:transform .6s var(--ease-move), height .6s var(--ease-move);
}

/* התשובה הגדולה */
.faq-stage{ position:sticky; top:120px; min-height:260px; }
.faq-show .num{
  display:inline-block; font-family:var(--font-en); font-size:13px; font-weight:500; letter-spacing:.08em;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.faq-show .q{ margin:14px 0 0; font-size:15px; font-weight:500; opacity:.5; }
.faq-show .ans{
  margin:22px 0 0; max-width:26ch;
  font-size:clamp(24px, 2.3vw, 38px); line-height:1.35; font-weight:500; text-wrap:balance;
}
.faq-show .ln{ display:block; }

/* במחשב התשובה מוצגת בצד; הטקסט שליד השאלה נשאר לקוראי מסך */
@media (min-width: 901px){
  .faq-a{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:normal; }
}
/* נייד: שאלה, ותשובה שנפתחת מתחתיה */
@media (max-width: 900px){
  .faq-panel{ border-radius:26px; }
  .faq-head{ display:block; }
  .faq-head h2{ font-size:clamp(56px, 16vw, 100px); margin-top:22px; }
  .faq-body{ display:block; }
  .faq-stage{ display:none; }
  .faq-q[aria-expanded="true"]{ padding-inline-start:0; }
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-move); }
  .faq-a > p{ overflow:hidden; margin:0; font-size:16px; line-height:1.65; opacity:.8; }
  .faq-item.open .faq-a{ grid-template-rows:1fr; }
  .faq-item.open .faq-a > p{ padding-bottom:22px; }
  .faq-rail{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .faq-rail, .faq-q, .faq-a{ transition:none; } }

/* הכותרת בפונט הכותרות, כמו כל הכותרות באנגלית; המילה הראשונה שקטה */
.faq-head h2{
  font-family:var(--font-display); font-synthesis:none; font-variant-ligatures:none;
  font-feature-settings:"liga" 0, "dlig" 0, "clig" 0, "calt" 0;
}
.faq-head h2 span{ font-weight:400 !important; }
.faq-head h2 span:first-child{ opacity:.5; }
@media (max-width: 900px){ .faq-head h2{ font-size:clamp(40px, 11.5vw, 96px); } }

/* =========================================================
   PROCESS · איך זה עובד: "מבלגן לסדר" (process.js)
   ========================================================= */
.process{
  --ink:#141414; --ink-rgb:20 20 20;
  position:relative; z-index:1;
  height:calc(var(--vh, 1vh) * 400);
  background:var(--paper, #F7F6F2); color:var(--ink);
}
.pr-stage{
  position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); min-height:640px; overflow:hidden;
  display:grid; grid-template-columns:minmax(300px, 34%) 1fr; grid-template-rows:auto 1fr;
  column-gap:clamp(32px, 5vw, 96px);
  padding:clamp(90px, 13vh, 130px) var(--pad-x) clamp(36px, 6vh, 64px);
}
.pr-head{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:clamp(24px, 4vh, 48px); }
.pr-head h2{
  order:2; margin:0; direction:ltr; white-space:nowrap;
  font-size:clamp(56px, 7vw, 132px); line-height:.9; letter-spacing:-.04em;
  font-family:var(--font-display); font-synthesis:none; font-variant-ligatures:none;
  font-feature-settings:"liga" 0, "dlig" 0, "clig" 0, "calt" 0;
}
.pr-head h2 span{ font-weight:400 !important; }
.pr-head h2 span:first-child{ opacity:.5; }
.process .t-pill{ border-color:rgb(20 20 20 / .18); margin:0; }
.process .t-pill i{ background:var(--grad); }

/* השלבים: הפעיל מלא, השאר שקטים ומקופלים */
.pr-steps{ list-style:none; margin:0; padding:0; align-self:center; position:relative; }
.pr-step{ display:flex; gap:18px; padding:18px 0; border-top:1px solid rgb(20 20 20 / .12); opacity:.38; transition:opacity .5s var(--ease-soft); }
.pr-step:last-child{ border-bottom:1px solid rgb(20 20 20 / .12); }
.pr-step .n{ flex:none; min-width:2.2em; font-family:var(--font-en); font-size:13px; font-weight:500; letter-spacing:.06em; padding-top:.35em; }
.pr-step h3{ margin:0; font-size:clamp(20px, 1.7vw, 28px); font-weight:700; line-height:1.25; }
.pr-step p{
  margin:0; max-width:34ch; font-size:15.5px; line-height:1.6; opacity:.75;
  max-height:0; overflow:hidden; transition:max-height .6s var(--ease-move), margin .6s var(--ease-move);
}
.pr-step.on{ opacity:1; }
.pr-step.on p{ margin-top:10px; max-height:8em; }
.pr-step.on .n{
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- המוקאפ ---------- */
.pr-view{ position:relative; align-self:center; display:grid; place-items:center; height:100%; min-height:0; }
.pr-canvas{
  position:relative; width:min(100%, 760px); aspect-ratio:16 / 11; max-height:100%;
  container-type:inline-size;
  border-radius:clamp(14px, 1.6vw, 24px);
  transition:background .8s var(--ease-soft), box-shadow .8s var(--ease-soft), border-radius .6s;
}
.pr-canvas .bk{ position:absolute; }
.bk-in{
  position:absolute; inset:0; border-radius:2cqw; overflow:hidden;
  display:grid; place-items:center;
  transition:background .7s var(--ease-soft), border-color .7s, box-shadow .7s, border-radius .7s;
}
.pr-canvas .lbl{ position:relative; z-index:1; font-size:2.3cqw; font-weight:600; text-align:center; padding:0 6%; transition:opacity .5s, font-size .5s, color .5s; }
.pr-canvas .ds{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease-soft); }

/* שלב 0: פתקים מפוזרים, נושמים קלות */
.pr-canvas[data-st="0"] .bk-in{
  background:#fff; border:1px solid rgb(20 20 20 / .06);
  box-shadow:0 18px 30px -18px rgb(20 20 20 / .35);
  animation:prFloat 5s var(--fl, 0s) ease-in-out infinite alternate;
}
.pr-canvas[data-st="0"] .bk:nth-child(3n+1) .bk-in{ background:#FBEFF4; }
.pr-canvas[data-st="0"] .bk:nth-child(3n+2) .bk-in{ background:#F1ECFB; }
@keyframes prFloat{ from{ translate:0 -3px; rotate:-.8deg; } to{ translate:0 3px; rotate:.8deg; } }

/* שלב 1: שלד (מסגרות מקווקוות, תווית קטנה) */
.pr-canvas[data-st="1"]{ background:#fff; box-shadow:inset 0 0 0 1px rgb(20 20 20 / .08); }
.pr-canvas[data-st="1"] .bk-in{ background:rgb(20 20 20 / .025); border:1.5px dashed rgb(20 20 20 / .28); border-radius:1.2cqw; }
.pr-canvas[data-st="1"] .lbl{ font-size:1.6cqw; color:rgb(20 20 20 / .5); font-weight:500; }

/* שלב 2 ו-3: מעוצב */
.pr-canvas[data-st="2"], .pr-canvas[data-st="3"]{ background:#fff; box-shadow:0 40px 80px -40px rgb(20 20 20 / .35), inset 0 0 0 1px rgb(20 20 20 / .06); }
.pr-canvas[data-st="2"] .lbl, .pr-canvas[data-st="3"] .lbl{ opacity:0; }
.pr-canvas[data-st="2"] .ds, .pr-canvas[data-st="3"] .ds{ opacity:1; }
.pr-canvas[data-st="2"] .bk-in, .pr-canvas[data-st="3"] .bk-in{ border:0; background:transparent; }
.bk-nav .ds{ display:flex; align-items:center; justify-content:space-between; padding:0 3cqw; border-bottom:1px solid rgb(20 20 20 / .07); }
.bk-nav .logo{ font-family:var(--font-display); font-size:2.4cqw; direction:ltr; }
.bk-nav .logo i{ display:inline-block; width:.3em; height:.3em; margin-left:.1em; border-radius:50%; background:var(--grad); }
.bk-nav .menu{ display:flex; gap:1.6cqw; }
.bk-nav .menu i{ width:5cqw; height:.8cqw; border-radius:1cqw; background:rgb(20 20 20 / .18); }
.bk-title .ds{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.4cqw; }
.bk-title b{ font-size:4cqw; line-height:1.05; font-weight:700; white-space:nowrap; }
.bk-title b + b{ font-weight:300; }
.bk-text .ds{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1cqw; }
.bk-text .ds i{ height:.9cqw; width:100%; border-radius:1cqw; background:rgb(20 20 20 / .14); }
.bk-text .ds i:nth-child(2){ width:86%; }
.bk-text .ds i:nth-child(3){ width:62%; }
.bk-btn .ds{ display:grid; place-items:center; background:#141414; color:#fff; border-radius:99px; font-size:1.7cqw; font-weight:600; }
.bk-img .ds{ border-radius:2cqw; overflow:hidden; }
.bk-img .mesh{
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), rgb(255 128 80 / .5), transparent 36%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 62%),
    radial-gradient(circle at var(--c3x) var(--c3y), #B23CF0, transparent 64%),
    radial-gradient(circle at var(--c4x) var(--c4y), var(--g-v), transparent 56%),
    linear-gradient(135deg, var(--g-p), #9B3FE6);
  position:absolute; inset:0;
  background:var(--grain), var(--mesh-live); background-blend-mode:overlay, normal, normal, normal, normal, normal;
  background-size:120px, auto, auto, auto, auto, auto; animation:var(--mesh-anim);
}
.bk-card .ds{ display:flex; flex-direction:column; gap:1cqw; padding:1.4cqw; background:#F7F6F2; border-radius:2cqw; align-items:flex-start; }
.bk-card .pic{ width:100%; flex:1; border-radius:1.4cqw; background:linear-gradient(135deg, #F6D9E6, #E4DAFB); }
.bk-card .ds i{ height:.9cqw; width:80%; border-radius:1cqw; background:rgb(20 20 20 / .16); }
.bk-card .ds i + i{ width:55%; }
.bk-card em{ position:relative; display:block; font-style:normal; font-weight:700; font-size:2.2cqw; height:1.2em; width:4.5em; }
.bk-card .price{ position:absolute; top:0; right:0; }
.bk-card .price.new{ opacity:0; }

/* שלב 3: מסגרת דפדפן + ממשק ניהול */
.pr-chrome{
  position:absolute; left:0; right:0; bottom:100%; height:4.4cqw; display:flex; align-items:center; gap:.8cqw; padding:0 1.6cqw;
  background:#ECEAE4; border-radius:2cqw 2cqw 0 0; direction:ltr;
  opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s var(--ease-move);
}
.pr-chrome i{ width:1cqw; height:1cqw; border-radius:50%; background:rgb(20 20 20 / .2); }
.pr-chrome span{ margin-left:2cqw; padding:.4cqw 1.6cqw; border-radius:1cqw; background:#fff; font-size:1.3cqw; opacity:.7; }
.pr-admin{
  position:absolute; left:-6%; top:22%; width:38%; padding:2cqw; display:grid; gap:1.3cqw;
  background:#fff; border-radius:2cqw; box-shadow:0 30px 60px -24px rgb(20 20 20 / .45), inset 0 0 0 1px rgb(20 20 20 / .06);
  font-size:1.55cqw; opacity:0; transform:translateX(-14%) scale(.96); transition:opacity .7s, transform .8s var(--ease-move);
  pointer-events:none;
}
.pr-admin b{ font-size:1.9cqw; }
.pr-admin .row{ display:flex; justify-content:space-between; align-items:center; gap:1cqw; }
.pr-admin .pill{ padding:.3cqw 1.2cqw; border-radius:99px; background:#141414; color:#fff; font-size:1.2cqw; }
.pr-admin .field{ position:relative; display:inline-block; min-width:5em; height:1.6em; border:1px solid rgb(20 20 20 / .2); border-radius:.8cqw; overflow:hidden; }
.pr-admin .field span{ position:absolute; inset:0; display:grid; place-items:center; }
.pr-admin .field .v2{ opacity:0; }
.pr-admin .tog{ width:3.6cqw; height:2cqw; border-radius:99px; background:rgb(20 20 20 / .15); position:relative; }
.pr-admin .tog i{ position:absolute; top:.25cqw; left:.25cqw; width:1.5cqw; height:1.5cqw; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .3); }
.pr-admin .saved{ justify-self:start; font-size:1.2cqw; padding:.3cqw 1cqw; border-radius:99px; color:#fff; opacity:0;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:80px, cover; }
.pr-cursor{
  position:absolute; left:20%; top:52%; width:2.4cqw; height:2.4cqw; opacity:0; pointer-events:none; z-index:5;
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 2l15 9-7 1.5L9 20z%27 fill=%27%23141414%27 stroke=%27%23fff%27 stroke-width=%271.4%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.pr-canvas[data-st="3"]{ border-radius:0 0 2cqw 2cqw; }
.pr-canvas[data-st="3"] .pr-chrome{ opacity:1; transform:none; }
.pr-canvas[data-st="3"] .pr-admin{ opacity:1; transform:none; }
/* "הלקוח" מעדכן מחיר: הסמן לוחץ, השדה מתחלף, נשמר, והמחיר באתר מתעדכן (בלולאה) */
.pr-canvas[data-st="3"] .pr-cursor{ animation:prCursor 4.8s .6s ease-in-out infinite; }
.pr-canvas[data-st="3"] .field .v1, .pr-canvas[data-st="3"] .bk-card .price:not(.new){ animation:prV1 4.8s .6s infinite; }
.pr-canvas[data-st="3"] .field .v2, .pr-canvas[data-st="3"] .bk-card .price.new{ animation:prV2 4.8s .6s infinite; }
.pr-canvas[data-st="3"] .tog{ animation:prTogBg 4.8s .6s infinite; }
.pr-canvas[data-st="3"] .tog i{ animation:prTog 4.8s .6s infinite; }
.pr-canvas[data-st="3"] .saved{ animation:prSaved 4.8s .6s infinite; }
@keyframes prCursor{ 0%{ opacity:0; left:40%; top:80%; } 12%{ opacity:1; } 30%,42%{ left:20%; top:51%; } 55%,70%{ left:21%; top:62%; opacity:1; } 90%,100%{ left:30%; top:90%; opacity:0; } }
@keyframes prV1{ 0%,38%{ opacity:1; transform:none; } 44%,92%{ opacity:0; transform:translateY(-40%); } 100%{ opacity:1; transform:none; } }
@keyframes prV2{ 0%,38%{ opacity:0; transform:translateY(40%); } 44%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes prTog{ 0%,58%{ transform:none; } 64%,94%{ transform:translateX(1.6cqw); } 100%{ transform:none; } }
@keyframes prTogBg{ 0%,58%{ background:rgb(20 20 20 / .15); } 64%,94%{ background:#141414; } 100%{ background:rgb(20 20 20 / .15); } }
@keyframes prSaved{ 0%,66%{ opacity:0; } 72%,92%{ opacity:1; } 100%{ opacity:0; } }

/* נייד: מוקאפ למעלה, והשלב הפעיל בלבד מתחתיו */
@media (max-width: 900px){
  .process{ height:calc(var(--vh, 1vh) * 360); }
  .pr-stage{ display:flex; flex-direction:column; min-height:0; padding:84px var(--pad-x) 32px; }
  .pr-head{ display:block; margin-bottom:18px; }
  .pr-head h2{ font-size:clamp(40px, 12vw, 90px); margin-top:14px; }
  .pr-view{ order:2; height:auto; flex:none; margin-top:36px; }
  .pr-steps{ order:3; margin-top:26px; }
  .pr-step{ display:none; border:0 !important; padding:0; }
  .pr-step.on{ display:flex; }
  .pr-admin{ left:-2%; width:44%; }
}
@media (prefers-reduced-motion: reduce){
  .pr-canvas *, .pr-canvas{ animation:none !important; transition:none !important; }
}

/* ביצועים: אנימציות שמחוץ למסך עוצרות (living-color.js) */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after,
.anim-off *::before, .anim-off *::after{ animation-play-state:paused !important; }

/* =========================================================
   PROCESS בכהה: אחרי האודות, פותח את האזור הכהה (עם הפינות המעוגלות),
   וההמלצות ממשיכות אחריו על אותו רקע, בלי קצה נפרד
   ========================================================= */
.process{
  --ink:#ffffff; --ink-rgb:255 255 255;
  background:#0F0F0F; color:#fff;
  margin-top:-36px; border-radius:36px 36px 0 0; z-index:2;
}
.process + .testi{ margin-top:0; border-radius:0; }
.process .t-pill{ border-color:rgb(255 255 255 / .22); }
.pr-step{ border-color:rgb(255 255 255 / .14) !important; }
.pr-step p{ opacity:.7; }
/* שלב 0 על כהה: הפתקים בהירים ובולטים, עם צל עמוק יותר */
.pr-canvas[data-st="0"] .bk-in{ box-shadow:0 22px 40px -18px rgb(0 0 0 / .8); border-color:transparent; color:#141414; }
/* שלב 1: השלד על דף לבן, כמו "בד" שמתחיל להתסדר */
.pr-canvas[data-st="1"]{ box-shadow:0 30px 70px -30px rgb(0 0 0 / .9); }
.pr-canvas[data-st="1"] .bk-in, .pr-canvas .ds{ color:#141414; }
.pr-canvas[data-st="2"], .pr-canvas[data-st="3"]{ box-shadow:0 50px 100px -40px rgb(0 0 0 / .9); }
.pr-chrome{ background:#E7E4DD; }
@media (max-width: 900px){
  .process{ margin-top:-26px; border-radius:26px 26px 0 0; }
}
/* המוקאפ תמיד בטקסט כהה (גם כשהאזור סביבו כהה) */
.process .pr-canvas{ color:#141414; }
.process .pr-canvas .bk-btn .ds{ color:#fff; }
html.hero-enter .stage::before, html.hero-enter .stage::after{ opacity:0; }

/* =========================================================
   מסך הפתיחה: הטקסט מתהפך בדיוק בקצה בועת הצבע (main.js: paint)
   כל טקסט צבוע בעיגול באותו מרכז ורדיוס כמו הבועה: בפנים הצבע החדש, בחוץ הישן
   ========================================================= */
@property --tfr{ syntax:"<length>"; inherits:false; initial-value:0px; }
.hero .tf{
  background:radial-gradient(circle var(--tfr) at var(--tfx) var(--tfy), var(--tc-new) 99.5%, var(--tc-old) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; -webkit-text-fill-color:transparent;
  transition:none !important;   /* הרדיוס מגיע מ-main.js בכל פריים, יחד עם הבועה */
}
.hero .tf *{ color:transparent !important; -webkit-text-fill-color:transparent; }

/* =========================================================
   אודות: הכתם מאחורי התמונה רגוע ועדין (כדי שיקראו את הטקסט).
   בלי ענני הצבע הזזים, תנועה איטית וקטנה, ושכבה נפרדת לדפדפן
   כך שהטשטוש לא מצויר מחדש בכל פריים
   ========================================================= */
.hues-ab{ display:none !important; }
.ab-glow-wrap{ opacity:.34; }
.ab-glow{ opacity:1; }
.ab-glow, .ab-glow-wrap::after{
  animation:abCalm 20s ease-in-out infinite alternate !important;
  will-change:transform; backface-visibility:hidden;
}
@keyframes abCalm{
  0%  { rotate:-4deg; scale:1 .98;    translate:-51% -50%; }
  50% { rotate:3deg;  scale:1.03 1;   translate:-49% -51%; }
  100%{ rotate:7deg;  scale:.99 1.02; translate:-50% -49%; }
}
@media (prefers-reduced-motion: reduce){ .ab-glow, .ab-glow-wrap::after{ animation:none !important; } }

/* =========================================================
   HEADER דביק + לוגו משמאל
   - הלוגו באנגלית בצד שמאל, "צרו איתי קשר" בצד ימין
   - במסך הפתיחה הלוגו מוסתר: השם הגדול הוא הלוגו שם (בלי Sara Weizman כפול)
   - בגלילה (is-stuck, ראו hero-motion.js) ההדר נשאר למעלה, מקבל רקע זכוכית בהיר,
     והלוגו מופיע. בהיר תמיד, כך שהוא קריא מעל אזורים בהירים וכהים
   ========================================================= */
@media (min-width: 1101px){
  .site-header{ position:fixed; z-index:150; transition:height .5s var(--ease-soft), background .5s, box-shadow .5s; }
  .site-header .brand{ grid-column:3; grid-row:1; justify-self:end; transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
  .site-header .nav{ grid-column:2; grid-row:1; }
  .site-header .head-cta{ grid-column:1; grid-row:1; justify-self:start; }
  .site-header:not(.is-stuck) .brand{ opacity:0; transform:translateY(-10px); pointer-events:none; }
  .site-header.is-stuck{
    height:72px;
    background:rgb(247 246 242 / .74);
    -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:0 1px 0 rgb(20 20 20 / .07);
  }
  .site-header.is-stuck .tone-block{ --ink:#141414; --ink-rgb:20 20 20; --bg:#F7F6F2; color:#141414; }
  .site-header.is-stuck .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}
/* טאבלט ונייד: ההדר יושב מעל מסך הפתיחה כמו קודם (התפריט נפתח מהכפתור הצף) */
@media (max-width: 1100px){
  .site-header{ position:absolute; z-index:6; }
}
@media (max-width: 900px){
  .hero{ padding-top:var(--header-h); }
}

/* הכותרת במסך הפתיחה: "סדר" עם שכבת גרדיאנט שנדלקת לרגע, והמילים של השורה השנייה */
.hero-copy .h-word{ display:inline-block; }
.hero-copy .h-key{ position:relative; display:inline-block; }
.hero-copy .h-key .k-grad{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:160px, cover;
  -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent;
}
/* המילים והשכבות החדשות יורשות את המשקל של השורה שלהן (לא נתפסות בכללי first/last-child) */
.hero-copy h1 .h-key, .hero-copy h1 .h-key *, .hero-copy h1 .h-word{ font-weight:inherit !important; opacity:1; }
@media (min-width: 1101px){
  .site-header.is-stuck{ background:rgb(247 246 242 / .9); }
}
/* בראש העמוד: רק התפריט, במרכז. בגלילה: הלוגו משמאל ו"צרו איתי קשר" מימין, מאזנים זה את זה */
@media (min-width: 1101px){
  .site-header .head-cta{ transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
  .site-header:not(.is-stuck) .head-cta{ opacity:0; transform:translateY(-10px); pointer-events:none; }
}

/* קיצור: "איך זה עובד" ננעץ לאורך פחות גלילה (היה 400vh), כדי שלא תהיה גלילה בלי תגובה */
.process{ height:calc(var(--vh, 1vh) * 270); }
@media (max-width: 900px){ .process{ height:calc(var(--vh, 1vh) * 250); } }

/* ההדר מתקפל כשגוללים למטה וחוזר כשגוללים למעלה (hero-motion.js) */
@media (min-width: 1101px){
  .site-header{ transition:height .5s var(--ease-soft), background .5s, box-shadow .5s, transform .55s var(--ease-move) !important; }
  .site-header.is-hidden{ transform:translateY(-110%); }
}

/* המשפט "Beauty follows order." נשאר גלוי עד שהאזור משתחרר (מעל השכבה הלבנה שמחליפה את הרקע),
   ומתכהה יחד איתה, כך שהוא קריא גם כשמסך הפתיחה היה על פרויקט כהה. אחרת נוצר רגע של מסך ריק */
.manifesto .m-frame{ position:relative; z-index:21; }   /* מעל השכבה הלבנה (.m-white, z20) שבאותו מיכל */
.manifesto .sentence{ color:color-mix(in srgb, var(--ink) calc((1 - var(--wh, 0)) * 100%), #141414); }

/* =========================================================
   שמות האזורים (התהליך, לקוחות מספרים, שאלות נפוצות, שירותים):
   הכוכב של האתר לפני הטקסט, בלי מסגרת, בלי רקע ובלי נקודה.
   בכניסה לאזור הכוכב מסתובב חצי סיבוב ומתיישב (living-color.js)
   ========================================================= */
.t-pill.tag, .sv-eyebrow.tag{
  border:0 !important; background:none !important; padding:0 !important; border-radius:0;
  gap:8px; font-size:13.5px; font-weight:500; letter-spacing:.01em;
}
.tag .tag-star{
  width:11px; height:11px; flex:none; fill:currentColor;
  transform:rotate(-180deg) scale(.4); opacity:0;
  transition:transform 1.1s var(--ease-move), opacity .6s var(--ease-soft);
}
.tag.is-in .tag-star{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){ .tag .tag-star{ transform:none; opacity:1; transition:none; } }
/* "קצת עליי": בלי טקסט בגרדיאנט, כמו שאר שמות האזורים (כוכב + טקסט) */
.ab-eyebrow.tag{
  background:none !important; animation:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:inherit !important; -webkit-text-fill-color:currentColor;
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
}

/* המשפט מתחת ללוגו, באנגלית */
.logo-sub[lang="en"]{ font-family:var(--font-en); direction:ltr; letter-spacing:.01em; font-size:11.5px; }

/* =========================================================
   FAQ · רשת של משבצות (faq.js)
   ========================================================= */
.faq-body{ display:block !important; }
.faq-grid{
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E");
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid rgb(20 20 20 / .14); border-inline-start:1px solid rgb(20 20 20 / .14);
}
.faq-cell{
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  border-bottom:1px solid rgb(20 20 20 / .14); border-inline-end:1px solid rgb(20 20 20 / .14);
  min-height:clamp(150px, 12.6vw, 196px); padding:clamp(18px, 1.6vw, 26px);
  display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  background:var(--paper, #F7F6F2); color:#141414;
  transition:background .45s var(--ease-move), color .45s var(--ease-move);
}
.faq-cell:focus-visible{ outline:2px solid #141414; outline-offset:-4px; }
.fc-top{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.fc-n{ font-family:var(--font-en); font-size:12px; letter-spacing:.1em; opacity:.45; }
.fc-star{
  width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:var(--star) center / contain no-repeat; mask:var(--star) center / contain no-repeat;
  transition:transform .9s var(--ease-move);
}
.fc-body{ position:relative; z-index:2; min-height:3em; display:flex; flex-direction:column; justify-content:flex-end; }
.fc-q{ font-size:clamp(20px, 1.7vw, 28px); font-weight:500; line-height:1.25; max-width:16ch; }
.fc-a{ display:none; font-size:clamp(15px, 1.1vw, 17px); line-height:1.6; color:#fff; max-width:40ch; }
.fc-a .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.fc-a .li{ display:block; }
.fc-flash{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:160px, cover;
}
.faq-cell.on{ background:#141414; color:#fff; }
.fc-flash{ display:none; }
.faq-cell.on .fc-star{ transform:rotate(135deg) scale(1.15);
  background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:60px, cover; }
.faq-cell.on .fc-a{ display:block; }
/* פתוחה: השאלה נשארת מעל התשובה, קטנה ושקטה */
.faq-cell.on .fc-q{ font-size:14px; opacity:.55; max-width:none; margin-bottom:8px; }
.faq-cell.on .fc-n{ opacity:.6; }
@media (max-width: 900px){ .faq-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .faq-grid{ grid-template-columns:1fr; } }
/* השאלות: כותרת ורשת במסך אחד */
@media (min-width: 901px){
  .faq-panel{ padding-top:clamp(44px, 4.6vw, 76px); padding-bottom:clamp(36px, 3.6vw, 60px); }
  .faq-head{ margin-bottom:clamp(28px, 3vw, 48px); }
  .faq-head h2{ font-size:clamp(60px, 7vw, 128px); }
}

/* הכותרת קודם (heading-scatter.js): עד שהאותיות נוחתות, שאר האזור מחכה */
.hs-gate [data-hs-wait]{ visibility:hidden !important; }
/* החץ המקורי, ארוך ודק יותר */
svg.arr-long{ width:22px !important; height:16px !important; }
/* הגלולות בפוטר: בגודל המקורי, בלי בולד */
.f-pill, .f-pill .lbl{ font-weight:400 !important; }

/* הדר מעל אזור כהה (hero-motion.js מוסיף hdr-dark): רקע כהה וכיתוב בהיר */
@media (min-width: 1101px){
  .site-header.is-stuck.hdr-dark{ background-color:rgb(15 15 15 / .86); box-shadow:0 1px 0 rgb(255 255 255 / .07); }
  .site-header.is-stuck.hdr-dark .tone-block{ --ink:#fff !important; --ink-rgb:255 255 255 !important; --bg:#0F0F0F !important; color:#fff; }
}
/* התהליך: המוקאפ קטן יותר (הרגיש גדול מדי) */
@media (min-width: 901px){ .process .pr-canvas{ width:min(86%, 640px); } }

/* =========================================================
   התאמות נייד (בדיקה מסודרת על 390px)
   ========================================================= */
@media (max-width: 900px){
  /* התהליך: המוקאפ קרס לרוחב 0 (פריט flex שמתכווץ לתוכן), עכשיו ברוחב מלא */
  .pr-view{ width:100%; align-self:stretch; }
  /* פרויקטים: הכותרת הקטנה מתכווצת עם הכותרת הגדולה, אז היא מתחילה גדולה יותר כדי להישאר קריאה */
  .p-head .eyebrow{ font-size:22px; }
  /* השאלות: כמו בשאר האזורים, שם האזור, הכותרת ואז המשפט. ומשבצות נמוכות יותר */
  .faq-head{ display:flex !important; flex-direction:column; align-items:flex-start; }
  .faq-intro{ display:contents; }
  .faq-head .t-pill{ order:1; }
  .faq-head h2{ order:2; margin-top:16px !important; }
  .faq-sub{ order:3; margin-top:16px !important; }
  .faq-cell{ min-height:118px; }
  /* פוטר: מטרות לחיצה גדולות יותר, והמייל לא נחתך */
  .f-col li a{ display:inline-block; padding:5px 0; }
  .f-col li a[dir="ltr"]{ max-width:100%; }   /* המייל נשבר רק לפני ה-@ (wbr ב-HTML) */
  .f-bar a{ display:inline-block; padding:8px 0; }
}
@media (max-width: 600px){
  /* "Kind Words" נשבר לשתי שורות ("Word / s"): גודל שנכנס בשורה אחת */
  .t-head h2{ font-size:clamp(44px, 14.5vw, 96px) !important; white-space:nowrap; }
}
@media (max-width: 900px){
  /* אודות: הכותרת "יש לכם הרבה מה לתת" נדבקה לקצה המסך ונחתכה (כלל ספציפי יותר דרס את השוליים) */
  .ab-copy h2.ab-mess{ margin-inline:var(--pad-x); }
}
@media (max-width: 900px){
  /* מטרות לחיצה נוחות לאצבע (לפחות ~40px) */
  .f-col li a{ padding:9px 0; }
  .f-col ul{ gap:2px; }
  .sv-more a{ display:inline-block; padding:10px 0; }
  .faq-sub a{ display:inline-block; padding:8px 0; }
  /* תוויות הנתונים באודות: קריאות יותר */
  .ab-stats .k{ font-size:12.5px; }
}
/* הדר כהה: הכפתור של העמוד הנוכחי ("בית") מתמלא בגרדיאנט החי של האתר במקום לבן */
@media (min-width: 1101px){
  .site-header.is-stuck.hdr-dark .nav a[aria-current="page"]{
    background:var(--grain), var(--grad); background-blend-mode:overlay, normal; background-size:120px, cover;
    color:#fff;
  }
}

/* מעבר הכותרות: כל אות מציגה רק את העותק שמתאים לרקע שמתחתיה (heading-scatter.js: toneLetters) */
.relay .relay-ch.hs-off{ visibility:hidden; }
.relay .relay-ink, .relay .relay-paper{ clip-path:none !important; }
/* רקע ההדר הדביק בגוון של מה שמתחתיו (hero-motion.js: --hdr-bg). רק צבע הרקע, כדי לא לדרוס את קווי הגריד שבהדר */
@media (min-width: 1101px){
  .site-header.is-stuck{ background-color:var(--hdr-bga, rgb(247 246 242 / .9)) !important; transition:background-color .6s, height .5s var(--ease-soft), box-shadow .5s; }
}
/* לפני שהכניסה של הפתיחה מתחילה, גם צל הרצפה של הטלפון מוסתר */
html.hero-enter .phone::after{ opacity:0; }
/* מעבר הכותרות: כל אות בצבע של הכותרת שממנה יצאה / שאליה נוחתת (heading-scatter.js: recolor), עותק אחד מספיק */
.relay .relay-paper{ display:none !important; }
.relay .relay-ink .relay-ch.hs-off{ visibility:visible; }
.relay .relay-ink .relay-ch i{ color:inherit; }

/* פס גלילה עדין: מסילה שחורה עם קו הפרדה לבן דק, ופס גלילה לבן בפנים.
   כשנוגעים בפס עצמו (מעבר עכבר או גרירה) הוא מקבל את הגרדיאנט של האתר.
   בכרום, scrollbar-color מבטל את העיצוב המלא, אז הוא רק לפיירפוקס */
@supports not selector(::-webkit-scrollbar){ html{ scrollbar-width:thin; scrollbar-color:rgb(255 255 255 / .75) #0F0F0F; } }
html::-webkit-scrollbar{ width:10px; height:10px; }
html::-webkit-scrollbar-track{ background:#0F0F0F; box-shadow:inset 1px 0 0 rgb(255 255 255 / .16); }
html::-webkit-scrollbar-thumb{ min-height:56px; background:rgb(255 255 255 / .72); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active{ background:linear-gradient(180deg, #F0437F, #B23CF0 55%, #6D45F5); border-width:2px; background-clip:padding-box; }