/* =========================================================
   לשונית עולם הדאטה — הדף עצמו הוא ויזואליזציה
   נוצר על ידי tools/make_data.py · אין לערוך ידנית

   ⚠️ **העיקרון:** התחום הזה עוסק במעבר ממצב אחד לשני — מרעש לממצא.
   לכן הדף לא מציג אוסף פריטים אלא **תנועה**: השער מתלכד משמאל,
   וארבע היחידות מטפסות לאורך ציר.
   ========================================================= */

/* ---------- השער ---------- */
.dhero{
  position:relative; overflow:hidden;
  padding-block:clamp(3.5rem,8vw,6rem) clamp(3rem,6vw,5rem)!important;
  min-height:clamp(28rem,72svh,40rem);
  display:flex; align-items:center;
}
.dhero-in{position:relative; z-index:2}
.dhero-in > *{max-width:38rem}
.dhero .kick{margin-bottom:1.4rem}
.dhero h1{max-width:16ch}
.dhero h1 em{display:inline-block; white-space:nowrap}
.dhero .lead{margin-top:1.5rem; max-width:36rem}
.dhero .btn-row{margin-top:2.25rem}

/* הכותרת יושבת **בתוך** השדה ולא לצדו — אין וילון לכל הרוחב, רק
   הילה רכה מאחורי הכתב. זה מה שמונע מהשער להיות עוד פיצול שמאל/ימין
   כמו בדף הבית. */
.dhero::after{
  content:""; position:absolute; z-index:1; inset-block:0;
  inset-inline-start:-6%; inset-inline-end:38%;
  background:radial-gradient(58% 74% at 72% 50%,
             rgba(13,25,38,.94) 0%, rgba(13,25,38,.82) 46%, rgba(13,25,38,0) 100%);
  pointer-events:none;
}

/* ---------- שדה הנתונים ---------- */
/* מכפיל אחד. הרצועה מוצגת ב-1200 יחידות viewBox על רוחב שנע בין
   412px ל-1440px — כלומר עובי קו של 2.6 הוא 2.6px בדסקטופ ופחות
   מ-1px בטלפון. `--sw` הוא הפיצוי, ויושב במקום אחד. */
.dfield{position:absolute; inset:0; z-index:0; overflow:hidden; --sw:1}
.dfield-svg{display:block; width:100%; height:100%}


.dfield .grid path{fill:none; stroke:var(--line); stroke-width:var(--sw); opacity:.5}
.dfield .grid .axis{opacity:.6}

.dfield .lay circle{fill:var(--dgr); opacity:calc(var(--k) * var(--o))}
.dfield .far{filter:blur(3px)}
.dfield .mid{filter:blur(.7px)}
.dfield .far circle{--k:.42}
.dfield .mid circle{--k:.80}
.dfield .near circle{--k:1}

.dfield .area{fill:var(--dar); stroke:none}
.dfield .stems path{fill:none; stroke:var(--clay); stroke-width:var(--sw); opacity:.16}
.dfield .trace{fill:none; stroke:var(--dgr); stroke-linecap:round}
.dfield .ghost{stroke-width:calc(1.2 * var(--sw)); opacity:.22}
.dfield .hot{stroke-width:calc(2.6 * var(--sw)); opacity:.92;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--clay) 55%,transparent))}

/* הסמנים — תווית של גרף, לא קישוט. הם מסבירים את כל התמונה בשתי מילים. */
.dfield .pin circle{fill:none; stroke:var(--ink); stroke-width:calc(1.6 * var(--sw))}
.dfield .pin path{fill:none; stroke:var(--ink); stroke-width:var(--sw);
  stroke-dasharray:calc(3 * var(--sw)) calc(4 * var(--sw)); opacity:.7}
.dfield .pin text{
  font-family:Heebo,system-ui,sans-serif; font-weight:700;
  direction:rtl; unicode-bidi:bidi-override;
  letter-spacing:.16em; fill:var(--ink); opacity:.9;
}
.dfield .pin-a circle,.dfield .pin-a path{stroke:var(--violet)}
.dfield .pin-a text{fill:var(--violet)}
.dfield .pin-b circle,.dfield .pin-b path{stroke:var(--clay)}
.dfield .pin-b text{fill:var(--clay-2)}
.dfield .pin{opacity:1}

/* ---------- תנועה ---------- */
/* בלי `.anim-ready` הכל נשאר גלוי וסטטי — כך עובד גם ‎?static‎ וגם
   prefers-reduced-motion, בלי כפילות כללים. */
.anim-ready .dfield .lay circle{opacity:0; animation:dot-in .7s var(--ease) var(--d) forwards}
.anim-ready .dfield .pin{opacity:0; animation:rev .8s var(--ease) 1.6s forwards}
.anim-ready .dfield .area,.anim-ready .dfield .stems{opacity:0; animation:rev 1.1s var(--ease) 1.1s forwards}
.anim-ready .dfield .trace{
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:draw 2.1s var(--ease) .45s forwards;
}
@keyframes dot-in{ to{opacity:calc(var(--k) * var(--o))} }
@keyframes draw{ to{stroke-dashoffset:0} }

/* נשימה מתמשכת — רק לשתי השכבות הקדמיות. 210 אלמנטים מונפשים
   בו-זמנית זה מה שהופך שדה יפה לטלפון שנתקע. */
@media (min-width:48em) and (prefers-reduced-motion:no-preference){
  .anim-ready .dfield .mid circle,
  .anim-ready .dfield .near circle{
    animation:dot-in .7s var(--ease) var(--d) forwards,
              float var(--dur) ease-in-out var(--del) infinite alternate;
  }
}
@keyframes float{ from{transform:translateY(-3px)} to{transform:translateY(3px)} }

@media (prefers-reduced-motion:reduce){
  .dfield .lay circle{opacity:calc(var(--k) * var(--o))!important; animation:none!important}
  .dfield .pin,.dfield .area,.dfield .stems{opacity:1!important; animation:none!important}
  .dfield .trace{stroke-dashoffset:0!important; animation:none!important}
}

/* ---------- טלפון: טקסטורה, לא איור ---------- */
/* ⚠️ **שתי גרסאות קודמות נפסלו כאן, ושתיהן מאותה סיבה שלא ראיתי.**
   נתתי לשדה רצועה משלו מתחת לכתב, פעם ביחס 2.0 ופעם ביחס 1.13, ופעם
   אחת אפילו בניתי לו viewBox שני עם פחות נקודות וגדולות יותר.

   **הטעות לא הייתה בכיוונון — היא הייתה בהגדרה.** גרף פיזור עם עקומה
   הוא **צורה רחבה**; הוא חי על יחס 2:1 ומעלה. בטלפון אין רוחב, ולכן
   כל גרסה שם היא מיניאטורה של רעיון רחב — ומיניאטורה בתוך מסגרת,
   מתחת לטקסט, נקראת כתמונה מודבקת ולא כחלק מהשער.

   ההחלטה של יפתח: **שהוא יפסיק להיות משהו שצריך לקרוא.** הוא נשאר
   מאחורי הכותרת, במלוא הרוחב, מעומעם — טקסטורה. אין מה שייראה קטן
   מדי כשאין מה להבין.

   ומכאן גם נעלם הצורך בשדה שני: ב-`slice` על מיכל **גבוה** ה-SVG
   מתקרב במקום להתרחק (קנה מידה 0.87 במקום 0.33), ולכן אותו שדה רחב
   בדיוק הוא שנותן את הטקסטורה — חתוך לאזור המעבר שבאמצע. */
@media (max-width:61.99em){
  .dhero{min-height:clamp(26rem,68svh,34rem)}
  .dfield{opacity:.85}
  /* ⚠️ העקומה הבוהקת חייבת להיכבות כאן. ב-slice על מיכל גבוה רואים
     רק **קטע** ממנה, וקטע של קו בוהק שחוצה כותרת נקרא כשריטה, לא
     כגרף. מה שנשאר הוא מה שבאמת עובד כטקסטורה: ענן הנקודות והשטח. */
  .dfield .hot{opacity:.28; filter:none}
  .dfield .ghost{opacity:.10}
  .dfield .stems path{opacity:.07}
  .dfield .grid path{opacity:.3}
  /* הסמן יורד. הוא תווית שמסבירה, ובטקסטורה אין מה להסביר —
     והוא גם ממילא היה נחתך באמצע ברוחב הזה. */
  .dfield .pin{display:none}
  /* ההילה הופכת לוילון על כל הרוחב: כאן אין חצי ריק לתת לו לגרף,
     והכתב חייב ניגוד יציב מעליו. */
  .dhero::after{
    inset-inline:0;
    background:linear-gradient(to top,
      rgba(13,25,38,.90) 0%, rgba(13,25,38,.62) 40%, rgba(13,25,38,.14) 100%);
  }
}
@media (max-width:34em){
  .dhero h1 em{white-space:normal}
}

/* ---------- ארבע היחידות לאורך ציר ---------- */
.chain-sec{position:relative; overflow:hidden}
.chain-sec > .wrap{position:relative; z-index:1}
.chain{
  list-style:none; margin:clamp(2.5rem,5vw,3.75rem) 0 0; padding:0;
  display:grid; gap:2.25rem;
}
@media (min-width:40em){ .chain{grid-template-columns:1fr 1fr; gap:2.75rem 2.5rem} }

@media (min-width:62em){
  .chain{grid-template-columns:repeat(4,1fr); gap:2.25rem; position:relative}
  /* הציר. קו ישר אחד — לא קו מפותל שינסה להתיישר עם ארבעה כרטיסים
     בכל רוחב מסך וייכשל.

     ⚠️ **הכרטיסים ישרים, ובכוונה.** היה כאן היסט אנכי (`--y`) שהעלה
     את הכרטיסים משמאל כדי שייראו "משורטטים בגבהים שונים על הציר".
     יפתח פסל: "01 נמוך מהשאר, ישר אותם." והוא צודק — אין הבדל תוכני
     בין ארבע היחידות, ולכן הבדל ויזואלי בגובה הוא רעש. **אותה הערה
     בדיוק כמו על 11 האריחים בלשונית ה-AI: היררכיה ויזואלית בלי
     היררכיה תוכנית.** מה שנשאר משפת הגרף הוא הציר, הצמתים וקווי
     ההשלכה — כולם באורך אחיד. */
  .chain::before{
    content:""; position:absolute; inset-block-start:.5rem; inset-inline:0;
    height:1px; background:linear-gradient(to left,
      transparent, var(--line) 7%, var(--line) 93%, transparent);
  }
  .chain > li{position:relative; padding-top:2.5rem}
  .chain > li::before{
    content:""; position:absolute; inset-block-start:.14rem; inset-inline-start:0;
    width:.72rem; height:.72rem; border-radius:50%;
    background:var(--paper); border:2px solid var(--violet);
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .chain > li::after{
    content:""; position:absolute; inset-block-start:.5rem; inset-inline-start:.34rem;
    width:1px; height:2rem;
    background:linear-gradient(to bottom,var(--violet),transparent);
    opacity:.55;
  }
  .chain > li:hover::before{background:var(--violet); border-color:var(--blush)}
}
@media (max-width:61.99em){
  .chain > li{border-top:1px solid var(--line); padding-top:1.5rem}
}

.u-card{transition:transform .35s var(--ease)}
@media (min-width:62em){ .chain > li:hover .u-card{transform:translateY(-6px)} }

.u-top{display:flex; align-items:center; gap:1.1rem; margin-bottom:1.1rem}
@media (min-width:40em){ .u-top{justify-content:space-between; gap:1rem} }
.u-n{font-family:var(--font-display); font-weight:900; font-size:2rem;
  line-height:1; color:var(--violet)}

.mini{width:6.75rem; height:auto; flex:0 0 auto;

  fill:none; stroke:var(--ink-2); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s var(--ease), transform .35s var(--ease)}
.mini .axis{stroke:var(--line); stroke-width:1.2}
.mini .dot{fill:var(--ink-2); stroke:none}
.mini .hi{stroke:var(--clay)}
.mini .hi.dot{fill:var(--clay); stroke:none}
.chain > li:nth-child(2) .mini .hi{stroke:var(--orchid)}
.chain > li:nth-child(2) .mini .hi.dot{fill:var(--orchid)}
.chain > li:nth-child(3) .mini .hi{stroke:var(--blush)}
.chain > li:nth-child(3) .mini .hi.dot{fill:var(--blush)}
.chain > li:nth-child(4) .mini .hi{stroke:var(--violet)}
.chain > li:nth-child(4) .mini .hi.dot{fill:var(--violet)}
.chain > li:hover .mini{stroke:var(--ink); transform:translateY(-3px) scale(1.05)}
@media (max-width:39.99em){ .mini{width:5.25rem} }

.chain h3{margin:0 0 .55rem; font-size:1.125rem}
.chain p{margin:0; font-size:.9375rem; line-height:1.75; color:var(--ink-2)}
.closer{margin:clamp(2.5rem,5vw,3.5rem) 0 0; max-width:44rem;
  font-size:1.0625rem; line-height:1.8; color:var(--ink-2)}
.closer b{color:var(--ink)}

/* ---------- הכלים ---------- */
.tools{display:grid; gap:2.5rem 4rem}
@media (min-width:56em){ .tools{grid-template-columns:1fr 1fr; align-items:start} }
.tools h2{margin:0}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem;
  margin:1.75rem 0 0; padding:0; font-size:.9375rem}
.chips li{padding:.5rem 1.05rem; border:1px solid var(--line); border-radius:999px;
  transition:border-color .3s var(--ease), color .3s var(--ease)}
.chips li:hover{border-color:var(--clay); color:var(--clay)}
.t-note{margin:1.5rem 0 0; font-size:.9375rem; line-height:1.8; color:var(--ink-2)}
.t-ai{padding-top:.15rem}
@media (min-width:56em){
  .t-ai{border-inline-start:2px solid var(--orchid); padding-inline-start:2rem}
}
.t-ai h3{margin:0 0 .9rem; font-size:1.0625rem; color:var(--orchid)}
.t-ai p{margin:0 0 .9rem; font-size:1.0625rem; line-height:1.8; color:var(--ink-2)}
.t-ai b{color:var(--ink); font-weight:500}

/* ---------- תת־המסלול ---------- */
/* ⚠️ הפס הזה **אין בו כפתור** — בכוונה. ולכן הוא לא יכול להיות פס
   ריק עם כותרת: המשקל שלו חייב לבוא מהעיצוב עצמו. תיבה תחומה
   שיוצאת מקצב העמוד, שלושה מאפיינים עובדתיים, וגרף ארבעת המפגשים. */
.ins-sec{padding-block:clamp(3rem,6vw,4.5rem)!important}
.insert{
  position:relative; display:grid; gap:2.5rem;
  padding:clamp(1.75rem,4vw,3rem);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--plum) 82%,transparent),
    color-mix(in srgb,var(--sand) 60%,transparent));
  border:1px solid var(--line); border-top:2px solid var(--violet);
  border-radius:2px;
}
@media (min-width:60em){
  .insert{grid-template-columns:minmax(0,1fr) 14rem; gap:3.5rem; align-items:center}
}
.insert h2{margin:.9rem 0 0; font-size:clamp(1.6rem,3.4vw,2.35rem)}
.insert .lead{margin-top:1.1rem; max-width:38rem}

.facets{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.25rem}
@media (min-width:44em){ .facets{grid-template-columns:repeat(3,1fr); gap:1.75rem} }
.facets li{padding-top:.9rem; border-top:1px solid var(--line)}
.facets strong{display:block; font-size:.9375rem; font-weight:700; color:var(--ink)}
.facets span{display:block; margin-top:.35rem; font-size:.875rem;
  line-height:1.7; color:var(--ink-2)}

.ins-art{display:flex; flex-direction:column; align-items:center; gap:1rem}
.ins-art svg{width:100%; max-width:11rem; height:auto;
  fill:none; stroke:var(--ink-2); stroke-width:1.7; stroke-linejoin:round}
.ins-art .axis{stroke:var(--line); stroke-width:1.2}
.ins-art .hi{stroke:var(--clay)}
.ins-n{display:flex; align-items:baseline; gap:.55rem; margin:0}
.ins-n b{font-family:var(--font-display); font-weight:900; font-size:2.4rem;
  line-height:1; color:var(--clay)}
.ins-n span{font-size:.8125rem; letter-spacing:.16em; color:var(--ink-2)}
@media (max-width:59.99em){
  .ins-art{flex-direction:row; align-items:center; justify-content:space-between;
    gap:1.5rem; padding-top:1.6rem; border-top:1px solid var(--line)}
  .ins-art svg{max-width:9rem}
  .ins-n b{font-size:2.9rem}
}

/* ---------- קו מפריד בין הכותרת לתגית, משותף לשער ולתיבה ---------- */
.kick{
  display:flex; align-items:center; gap:.85rem; margin:0;
  font-size:.75rem; font-weight:700; letter-spacing:.2em; color:var(--orchid);
}
.kick{flex-wrap:wrap}
.kick i{flex:0 0 auto; width:3rem; height:1px; background:var(--line)}
@media (max-width:40em){
  .kick i{width:.3rem; height:.3rem; border-radius:50%; background:var(--orchid)}
}