/* =========================================================
   שכבת העיצוב של הדפים החדשים — **משותפת לכל דף חדש**, לא רק לבית.
   נוצר על ידי tools/make_home.py · אין לערוך ידנית

   ⚠️ הסלקטורים מקודמים ב-`.pg` (ולא ב-`.home`) בדיוק כדי שאפשר יהיה
   לטעון את הקובץ הזה גם בלשוניות אחרות. עותק שני של מערכת העיצוב היה
   מתפצל תוך שבועיים — בדיוק כמו שקרה עם התפריט העליון.

   נטען אחרי site.css ו-theme-abyss.css, ודורס אותם **בדף הזה בלבד**.
   הפלטה לא משתנה כאן — רק הטיפוגרפיה, המבנה והמהלכים.
   ========================================================= */

:root{
  /* מ11 — עקומה אחת חתומה לכל תנועה בדף. תנועה עקבית נקראת כמותג. */
  --ease:cubic-bezier(.22,1,.36,1);

  /* מ1 — זיווג גופנים. סריף עברי כבד לכותרות מול Heebo בגוף.
     סריף על פלטה טכנולוגית כהה הוא בדיוק הצירוף שאף תבנית לא בוחרת. */
  --font-display:"Frank Ruhl Libre","Noto Serif Hebrew",Georgia,serif;

  /* מ2 — כויל ב-tools/font_metrics.py מול Heebo כייחוס (200px):
     גובה אות Heebo 159.0 · Frank Ruhl Libre 152.0  →  F = 1.046
     גובה שורה טבעי 294.0 מול 258.0                →  λ = 0.878     */
}

/* ---------- טיפוגרפיה ---------- */
.pg h1,.pg h2,.pg h3,.pg .out-line{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0;
}
.pg h1{
  font-size:clamp(2.35rem,5.44vw,4.18rem);   /* 2.25/5.2vw/4rem × 1.046 */
  line-height:.96;                            /* 1.09 × .878 */
}
.pg h2{
  font-size:clamp(1.83rem,4.39vw,3.14rem);   /* 1.75/4.2vw/3rem × 1.046 */
  line-height:1.0;                            /* 1.14 × .878 */
}
.pg h3{font-family:Heebo,system-ui,sans-serif; font-weight:700; letter-spacing:-.01em}

/* מ3 — המילה הנושאת בכותרת עוברת ל-900 מול 500 באותה שורה. */
.pg h1 em,.pg h2 em{font-style:normal; font-weight:900; color:var(--ink)}
.pg h1 em{color:var(--orchid)}

/* ---------- שבירת שורה מכוונת בכותרת דו-פעימתית ----------
   כשהפעימה השנייה חייבת לשבת בשורה משלה, `<br>` הוא הכלי הלא-נכון:
   הוא שובר גם ברוחב שבו שתי הפעימות נכנסות יפה יחד, וגם מותיר
   רווח־מילה תלוי בסוף השורה הראשונה. `display:block` על ה-`em`
   עושה את אותו דבר בלי תו נוסף בטקסט.
   ⚠️ **השם אינו `.split`.** `.split` כבר תפוס ב-site.css כפריסת
   שתי עמודות (`display:grid`), והוא היה הופך את הכותרת לגריד.
   `.h2-break` = תמיד · `.h2-break-sm` = בטלפון בלבד (סוף הקובץ). */
.pg h2.h2-break em{display:block}
/* ⚠️ **אין כאן מרווח נוסף, וזו החלטה.** היה כאן `.is-gap` שהוסיף
   `margin-top:.3em`. נמדד בפועל: השורות התרחקו ל-38px במקום 29,
   ובצד כותרות שנשברות באופן טבעי זה נקרא כתקלה. שבירה מכוונת
   צריכה להיראות בדיוק כמו שבירה שקרתה מעצמה. */

/* ---------- מ6 — קו-שיער במקום החלפת רקע ---------- */
.pg main > section{background:transparent!important; border:0}
.pg main > section + section{
  border-top:1px solid transparent;
  border-image:linear-gradient(to left,transparent,var(--line) 16%,var(--line) 84%,transparent) 1;
}
.pg .cta-band{
  background:var(--plum)!important;
  border-image:none; border-top:1px solid var(--line);
}

/* ---------- מסילת התקדמות ---------- */
.rail{
  position:fixed; inset-block:0; inset-inline-start:0; width:2px; z-index:60;
  background:var(--line); pointer-events:none; opacity:.5;
}
.rail span{
  display:block; width:100%; height:0;
  background:linear-gradient(to bottom,var(--violet),var(--clay));
}
@media (max-width:47.99em){ .rail{display:none} }

/* ---------- השער ---------- */
/* פריים פתיחה, לא באנר. מלוא הרוחב, במה כהה, אובייקט מרונדר משמאל
   (`tools/render_hero.py`) והכתב מימין — נכנס אל תוך השוליים האפלים של
   האובייקט במקום לשבת לצדו. השזירה הזאת בין כתב לתמונה היא מה שהופך
   פריים לקומפוזיציה. */
.pg .hero{
  position:relative; overflow:hidden; padding:0;
  min-height:clamp(31rem,80svh,52rem);
  display:flex; align-items:center;
}
.hero-stage{
  position:absolute; inset:0; z-index:0;
  background:#080F18 url("hero/hero-scene.webp") no-repeat left center/cover;
}
/* ווילון: הצד שנושא טקסט חייב ניגוד יציב בכל רוחב מסך, בלי לכבות את
   התמונה. גרדיאנט ולא שכבה אחידה, אחרת האובייקט מאבד את העומק. */
.hero-stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to left, rgba(8,15,24,.97) 0%, rgba(8,15,24,.90) 24%,
                    rgba(8,15,24,.52) 50%, rgba(8,15,24,0) 76%),
    linear-gradient(to top, rgba(8,15,24,.55), transparent 34%);
}
.hero-inner{
  position:relative; z-index:1;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  padding-block:clamp(3.5rem,8vh,6rem);
}
.hero-inner > *{max-width:34rem}
.pg .hero .eyebrow{margin-bottom:1.1rem}
.pg .hero .lead{margin-top:1.4rem}
.pg .hero .btn-row{margin-top:2.1rem}
.pg .hero h1{text-shadow:0 2px 26px rgba(8,15,24,.85)}
/* הסיפא המודגשת נשברת לשתי שורות ומאבדת את המכה. `inline-block` +
   `nowrap` הופכים אותה ליחידה אחת שיורדת שורה בשלמותה. */
.pg .hero h1 em{display:inline-block; white-space:nowrap}
/* הכותרת רחבה מהליד בכוונה: עם הסיפא כיחידה אחת, 40rem הותירו את
   "שנבנות" לבדה בשורה. 44rem מחזירות אותה לשורה הראשונה. */
.pg .hero h1{max-width:44rem}

@media (max-width:61.99em){
  /* בטלפון האובייקט יוצא כמעט כולו מהמסך אם משאירים אותו צמוד לשמאל.
     מזיזים אותו פנימה ומחזקים את הווילון — הטקסט קודם. */
  .hero-stage{background-position:40% center}
  /* ווילון עדין יותר מהדסקטופ: שם הוא מפנה צד לטקסט, כאן הוא מכסה את כל
     הרוחב. אם הוא חזק כמו בדסקטופ, התמונה נעלמת לגמרי בטלפון. */
  .hero-stage::after{
    background:
      linear-gradient(to left, rgba(8,15,24,.90) 0%, rgba(8,15,24,.74) 45%, rgba(8,15,24,.40) 100%),
      linear-gradient(to top, rgba(8,15,24,.62), transparent 42%);
  }
}

/* פס התפריט: הכללים לשמונה הפריטים עברו ל-site.css, כי התפריט זהה
   בכל הלשוניות ולא רק כאן. מקור אמת אחד. */

/* ---------- רצועת הלקוחות ---------- */
.logo-band{padding-block:clamp(2rem,4vw,3.25rem)!important}
.logos-lab{
  margin:0 0 1.9rem; font-size:.75rem; font-weight:700; letter-spacing:.2em;
  color:var(--ink-2);
}
/* הרצועה יוצאת מגבולות ה-wrap בכוונה — לוגו שנחתך בקצה המסך אומר
   "יש עוד", ורצועה שנעצרת בשוליים אומרת "זה הכל". */
.marquee{
  overflow:hidden;
  /* ⚠️ **`direction` חייב לשבת כאן, על מיכל הגלישה — לא רק על המסילה.**
     במיכל RTL, ילד רחב מהמיכל מקובע ב**קצה הימני** וכל העודף תלוי שמאלה
     מחוץ למסך. נמדד: המסילה ברוחב 7878px יושבת ב-left ‎-7878‎ ו-right 0,
     כלומר בהתחלה רואים את **סוף** התוכן. אנימציה שמזיזה שמאלה מטיילת אז
     אל מעבר לסוף — ושם אין כלום, וזה הפס הריק. עם `ltr` המסילה מקובעת
     בקצה השמאלי, המבט מתחיל בתחילת התוכן, ו‎-50%‎ נוחת בדיוק על הסט
     השני הזהה. שכפול הסטים מעולם לא היה הבעיה; העיגון היה. */
  direction:ltr;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent);
}
.mq-track{display:flex; width:max-content; direction:ltr; animation:mq 117s linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
 /* ⚠️ רציפות התפר. `gap` לא חל אחרי הפריט האחרון ו-`padding` על הקבוצה
    יוצר מרווח כפול בין הסט השני לראשון — ואז נראה חור בפס. מרווח על
    כל פריט בנפרד הופך את שני הסטים לזהים לחלוטין, ולכן ‎-50%‎ נוחת
    בדיוק על אותה נקודה ואין רגע ריק. */
.mq-set{display:flex; align-items:center; list-style:none; margin:0; padding:0}
.mq-set li{flex:0 0 auto; line-height:0; margin-inline-end:clamp(2.25rem,4.5vw,4rem)}
/* כל קובץ לוגו יושב על קנבס בגובה זהה, והנרמול האופטי כבר נעשה בכלי.
   לכן גובה אחיד ב-CSS שומר על היחסים שנקבעו שם. */
.mq-set img{height:clamp(78px,9.5vw,116px); width:auto; opacity:.95}
.mq-set img:hover{opacity:1}
/* שליש = בדיוק סט אחד מתוך שלושה. משך זמן פי 1.5 שומר על אותה מהירות. */
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-33.3333%)}}
/* ?static מקפיא גם את הרצועה, אחרת כל צילום QA תופס אותה במקום אחר */
html:not(.anim-ready) .mq-track{animation:none}
@media (prefers-reduced-motion:reduce){ .mq-track{animation:none} }

/* ---------- כרטיסי התחומים ---------- */
.pg .card{
  background:transparent; border-color:var(--line); border-radius:16px;
  padding:1.6rem 1.4rem 1.4rem;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
/* מ9 — הכרטיס לא קופץ למעלה. הוא נצבע. */
.pg .card:hover{transform:none; box-shadow:none; border-color:var(--violet); background:var(--sand)}
.pg .card p{line-height:1.72}
.pg .card .ic{width:36px; height:36px; margin-bottom:.85rem}
.ic{fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ic .hi{stroke:var(--clay)}          /* מ8 — קו אחד בכל אייקון בצבע ההדגשה */
.pg .card:hover .ic{stroke:var(--ink)}
.pg .card .num{font-family:var(--font-display); font-weight:900; color:var(--violet)}
.pg .card .go{color:var(--clay)}

/* ---------- השלבים — מסלול, לא שלושה טורים ---------- */
.pg .steps{position:relative; padding-top:2.4rem}
.pg .steps::before{
  content:""; position:absolute; inset-inline:0; top:5px; height:1px;
  background:linear-gradient(to left,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.pg .steps li{position:relative}
.pg .steps li::after{
  content:""; position:absolute; top:-2.4rem; inset-inline-start:0;
  width:11px; height:11px; border-radius:50%;
  background:var(--violet); box-shadow:0 0 0 5px var(--paper);
}
.pg .steps li::before{
  font-family:var(--font-display); font-weight:900; font-size:1.05rem;
  letter-spacing:0; color:var(--violet); margin-bottom:.35rem;
}
@media (max-width:51.99em){
  .pg .steps{padding-top:0}
  .pg .steps::before{display:none}
  .pg .steps li{padding-top:1.4rem; border-top:1px solid var(--line)}
  .pg .steps li::after{top:-6px}
}

/* ---------- הדיאגרמה ידע←החלטה ---------- */
.gap-fig{margin:0}
.gap-svg{display:block; width:100%; height:auto}
.kdot{fill:var(--ink-2)}
.kdot.hot{fill:var(--violet)}
.funnel{fill:none; stroke:var(--line); stroke-width:1.2}
.gapline{stroke:var(--violet); stroke-width:1; stroke-dasharray:3 5; opacity:.75}
.beam{stroke:var(--clay); stroke-width:1.4}
.halo{fill:none; stroke:var(--clay); stroke-width:1; opacity:.42}
.halo-2{opacity:.16}
.mark{fill:var(--clay); filter:drop-shadow(0 0 10px color-mix(in srgb,var(--clay) 55%,transparent))}
.glab{font-family:Heebo,sans-serif; font-size:13px; fill:var(--ink-2); direction:rtl}
.lab-d{text-anchor:middle; fill:var(--ink); font-weight:700}

/* ---------- מ5 — שורת סגירה לסקשן ---------- */
.closer{
  margin:2.5rem 0 0; padding-inline-start:1.1rem;
  border-inline-start:2px solid var(--violet);
  font-size:1.0625rem; line-height:1.7; color:var(--ink-2); max-width:44rem;
}
.closer b{color:var(--ink); font-weight:700}

/* ---------- המלצות — קרוסלה בסגנון לשונית הליווי ---------- */
/* המבנה זהה ל"לקוחות מספרים": תמונה עגולה למעלה, טקסט ממורכז, שם ותפקיד,
   שלושה בתצוגה, חצים ונקודות. */
.tcar{position:relative}
.tviewport{overflow:hidden}
.ttrack{
  display:flex; list-style:none; margin:0; padding:0;
  transition:transform .5s var(--ease);
}
.tslide{flex:0 0 100%; padding-inline:0}
@media (min-width:44em){ .tslide{flex-basis:50%; padding-inline:.6rem} }
@media (min-width:66em){ .tslide{flex-basis:33.3333%; padding-inline:.75rem} }

.tcard{
  height:100%; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:.25rem .5rem 1rem;
}
.tav{
  width:96px; height:96px; border-radius:50%; margin:0 0 1.1rem;
  background:var(--sand); border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; flex:0 0 auto;
}
.tav img{width:100%; height:100%; object-fit:cover}
.tav-ph{width:56px; height:56px; fill:none; stroke:var(--line); stroke-width:2.4}
.ttext{margin:0 0 1.1rem; font-size:.9375rem; line-height:1.85; color:var(--ink-2)}
.tname{display:block; font-style:normal; font-weight:700; color:var(--ink); font-size:1rem}
.trole{display:block; margin-top:.15rem; font-size:.8125rem; color:var(--violet)}
/* צירוף שחייב לרדת שורה בשלמותו ולא להתפצל באמצע */
.trole .nb{white-space:nowrap}

.tnav{
  position:absolute; top:38px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
  cursor:pointer; display:grid; place-items:center; padding:0;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tnav:hover{color:var(--clay); border-color:var(--clay)}
.tnav svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tprev{inset-inline-end:-8px}
.tnext{inset-inline-start:-8px}
@media (max-width:47.99em){ .tnav{position:static; top:auto} }

.tdots{display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem}
.tdots button{
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:var(--line);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.tdots button[aria-current="true"]{background:var(--violet); transform:scale(1.4)}
.tbar{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.25rem}
/* ⚠️ תכונת `hidden` נותנת display:none מגיליון הדפדפן בלבד, וכל כלל
   `display` שכתבנו דורס אותה. בלי השורה הזאת החצים נשארו על המסך גם
   כשאין לאן לנווט. */
.tnav[hidden],.tbar[hidden]{display:none}

/* ---------- CTA ---------- */
.pg .cta-band h2{max-width:22ch}

/* ---------- מ9 — hover נפרד לכל סוג קישור ---------- */
.pg .site-nav a{transition:color .2s var(--ease)}
.pg .btn-primary{transition:background-color .2s var(--ease), transform .2s var(--ease)}
.pg .btn-primary:hover{transform:translateY(-1px)}
.pg .btn-ghost:hover{background:var(--sand)}

/* ---------- מ10 — reveal ב-keyframes, לא ב-transition ---------- */
.anim-ready .reveal{opacity:0}
.anim-ready .reveal.is-in{opacity:1; animation:rev .62s var(--ease) both}
@keyframes rev{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.anim-ready .kdot{opacity:0}
.anim-ready .is-in .kdot{animation:dotin .5s var(--ease) both; animation-delay:var(--d)}
@keyframes dotin{from{opacity:0; transform:scale(.4)} to{opacity:inherit; transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal,.kdot{opacity:1!important; animation:none!important; transform:none!important}
  .pin,.kpwrap,.lk-keyg,.ttrack{transition:none!important}
}

/* ---------- מ12 — מובייל: החלטות, לא הצרה ---------- */
@media (max-width:61.99em){
  /* ⚠️ פס התפריט הוא 92% אטימות עם טשטוש רקע, והוא נדבק מעל תמונת שער
     במלוא המסך. בטלפון האובייקט מוצג הרבה יותר גדול, ולכן הקצה המואר שלו
     עובר בדיוק מאחורי הפס בזמן גלילה ומבצבץ דרכו כקו דק על הלוגו.
     `backdrop-filter` על אלמנט sticky גם ידוע כמשאיר תפר של פיקסל במובייל.
     אטום מבטל את שתי הסיבות, ובראש הדף הוא ממילא זהה — צבע הפס שווה
     לצבע הרקע, אז לא רואים שום הבדל. */
  .pg .site-head{
    background:var(--paper);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .closer{font-size:1rem}
}
@media (max-width:39.99em){
  /* בטלפון הכותרת בגודל הדסקטופ תופסת ארבע שורות ודוחפת את ההדגמה
     הרחק מתחת לקיפול. מקטינים אותה — החלטה, לא הצרה. */
  .pg h1{font-size:2.05rem; line-height:1.02}
  /* בטלפון תוויות של 10px בתוך ה-SVG בלתי קריאות; מגדילים אותן ולא
     את כל הציור, כי הציור עצמו כן נקרא. */
  .lk-tag{font-size:13px}

  /* כותרת שבמחשב נכנסת בשורה אחת, ובטלפון נשברת באמצע הפעימה
     השנייה. הבחירה כאן היא איפה היא נשברת, לא האם. */
  .pg h2.h2-break-sm em{display:block}
}