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

   **המהלך:** "שלוש דרכים, כולן מגיעות אליי" מצויר. לא קישוט —
   המשפט של הדף.

   **המנגנון הוא זרימה מתמדת**, ולא ריחוף (AI), התלכדות במיקום
   (דאטה), פנייה אל העכבר (פרזנטציה) או הצטברות (פרויקטים).
   כל הקודמים בנויים מפריטים בדידים; כאן יש מסה נוזלית.
   ========================================================= */

.ct-hero{
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,7vw,5rem)!important;
  /* ⚠️ גובה מינימלי — בלעדיו השער התכווץ לגובה התוכן, השדה
     נחתך לפס צר, ושלושת הזרמים נדחסו לקרן אחת. לגרפיקה
     שנפרשת ממקורות רחוקים צריך להקצות מקום, לא לקוות לו. */
  display:flex; align-items:center;
  min-height:clamp(33rem,80svh,44rem);
}
.ct-in{width:min(100% - 2.5rem, var(--wrap))}
/* ⚠️⚠️ **חסר גבולות — זו הדרישה, וזה מה שהקוד כאן עושה.**
   יפתח: *"יש גבולות ברורים באופן לא מקצועי בינה לבין מה שלא
   בתוך המלבן בו היא יושבת."* הוא צדק: השדה נקטע בשפת המיכל,
   ובטלפון הוא ישב ברצועה בגובה קבוע — כלומר מלבן ממש.

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

   ⚠️ `mask-composite:intersect` הוא מה שמצליב את שתי הדעיכות.
   בלעדיו שתי המסכות **מתחברות** במקום להצטלב, וכל הפריים
   נשאר אטום — כלומר בדיוק כלום. הקידומת של ובקיט משתמשת
   ב-`source-in`, שזה אותו דבר בשם אחר. */
.ct-flow{
  position:absolute; inset:-14% -8%; z-index:0; pointer-events:none;
  /* ⚠️ **שכבה שלישית: עוצמה משתנה לאורך האלכסון.** קודם כל
     הרכיב היה באותה עוצמה מקצה לקצה, וזה מה שגרם לו להיקרא
     כמסה אחת אחידה. הגרדיאנט הזה רץ בכיוון הזרימה (125°)
     ומעמעם ומגביר לסירוגין — בעדינות, בלי פסים נראים.
     כל שלוש השכבות **מצטלבות**; בלי `intersect` הן מתחברות
     והפריים נשאר אטום. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 26%, #000 78%, transparent 100%),
    linear-gradient(to left, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(125deg, rgba(0,0,0,.24) 0, rgba(0,0,0,.72) 16%, #000 34%,
      rgba(0,0,0,.62) 52%, #000 74%, rgba(0,0,0,.7) 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 26%, #000 78%, transparent 100%),
    linear-gradient(to left, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(125deg, rgba(0,0,0,.58) 0, #000 20%, rgba(0,0,0,.6) 40%,
      #000 62%, rgba(0,0,0,.66) 82%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.flow{display:block; width:100%; height:100%}
.flow.is-narrow{display:none}

/* ---------- שלוש השכבות של כל זרם ---------- */
/* ⚠️ העומק לא מגיע מצל ולא מגרדיאנט. הוא מגיע מזה ששלוש שכבות
   על **אותו מסלול בדיוק** נעות בקצב שונה. */
.str{--c:var(--clay); transition:opacity .55s var(--ease)}
.is-wide   .s0{--c:url(#g0-wide)}
.is-wide   .s1{--c:url(#g1-wide)}
.is-wide   .s2{--c:url(#g2-wide)}
.is-narrow .s0{--c:url(#g0-narrow)}
.is-narrow .s1{--c:url(#g1-narrow)}
.is-narrow .s2{--c:url(#g2-narrow)}

/* עצירות הגרדיאנט יושבות ב-CSS ולא ב-SVG, כדי שהן יישארו
   קשורות לטוקנים של הערכה ולא יתקבעו כערכים קשיחים. */
/* ⚠️ **שלושת הזרמים לא נגמרים בלבן, וזה תיקון של גרסה קודמת.**
   כשכולם הלכו אל ‎--ink‎ בקצה, כל השטח סביב הצומת — כלומר רוב
   מה שרואים — הפך לערפל לבן אחד, ושלושת הצבעים נעלמו. הלבן
   של ההתלכדות מגיע מההילה של הצומת בלבד. כל זרם נשאר בצבעו
   ורק **מתבהר** בתוך המשפחה שלו. */
/* המקור שקוף — הזרם עולה מהרקע במקום להתחיל בקצה חתוך. */
.g0 .s{stop-color:var(--violet); stop-opacity:0}
.g1 .s{stop-color:var(--violet); stop-opacity:0}
.g2 .s{stop-color:var(--clay);   stop-opacity:0}
.g0 .a{stop-color:var(--violet)}  .g0 .b{stop-color:var(--clay)}
.g0 .c{stop-color:var(--clay-2)}
.g1 .a{stop-color:var(--violet)}  .g1 .b{stop-color:var(--orchid)}
.g1 .c{stop-color:var(--blush)}
.g2 .a{stop-color:var(--clay-2)}  .g2 .b{stop-color:var(--orchid)}
.g2 .c{stop-color:var(--violet)}

.flow path{fill:none; stroke-linecap:round}
.body path{stroke:var(--c); stroke-width:var(--w); opacity:var(--o)}
.core path{stroke:var(--c); stroke-width:var(--w); opacity:var(--o)}

/* הדופק מוסתר כברירת מחדל ומופיע רק דרך האנימציה. כך מי שביקש
   פחות תנועה מקבל את הזרמים בלי הריצה, ולא דפוס מקווקו קפוא. */
.pulse path{
  stroke:var(--c); stroke-width:var(--w);
  stroke-dasharray:9 91; stroke-dashoffset:100; opacity:0;
}

.node .glow{fill:var(--clay); opacity:var(--o)}
/* ⚠️ שלוש קשתות חלקיות, לא מעגלים. `pathLength="100"` מנרמל
   את הקו, ולכן `--dash` הוא ישירות **אחוז מהיקף** — 58% קשת
   ו-42% פתח. הפתח הוא מה שהופך את זה מעיגול לצמצם. */
.node .arc{
  fill:none; stroke-width:1.7; stroke-linecap:round;
  stroke-dasharray:var(--dash) 100;
  transform-box:fill-box; transform-origin:center;
}
.node .a0{stroke:var(--clay);   opacity:.85}
.node .a1{stroke:var(--orchid); opacity:.68}
.node .a2{stroke:var(--violet); opacity:.5}
.anim-ready .node .arc{animation:ct-spin var(--dur,30s) linear infinite}
/* הכיוון ההפוך על האמצעית — שתי קשתות שנעות יחד נקראות
   כגלגל אחד; אחת שנעה נגד הופכת אותן למנגנון. */
.anim-ready .node .a1{animation-direction:reverse}
.node .flare{stroke-width:1.2; opacity:.7}
/* ⚠️⚠️ **בטלפון הקשתות מוסתרות, וזה לא קיצור דרך.**
   שלוש קשתות צמצם שמסתובבות הן פרט של מקור אור **קרוב** —
   מנגנון שאפשר להבחין בחלקיו. מכוכב רחוק רואים נקודה וזוהר,
   ותו לא. כל עוד הן היו שם, שום הקטנה אחרת לא הצליחה לגרום
   לנקודה להיראות מרוחקת. */
.is-narrow .node .arc{display:none}
.is-narrow .node .flare{stroke-width:.9; opacity:.55}
/* ⚠️ פרספקטיבה אטמוספרית: הקצה **הרחב** הוא הקרוב לצופה,
   ולכן הוא רך יותר. הרחוק — הצר, ליד הכוכב — נשאר חד.
   הגרדיאנט ההפוך על הגוף גורם לטשטוש לחול כמעט רק שם. */
.is-narrow .body{filter:blur(2.4px)}
.flg .e{stop-color:var(--clay-2); stop-opacity:0}
.flg .m{stop-color:var(--clay-2); stop-opacity:.85}
.node .dot{fill:var(--ink); opacity:.95}

/* ---------- התנועה ---------- */
/* שלושה קצבים שונים על אותו אובייקט = הרמוניה. קצב אחד = מטרונום. */
@keyframes ct-run{
  0%   {stroke-dashoffset:100; opacity:0}
  10%  {opacity:.95}
  88%  {opacity:.95}
  100% {stroke-dashoffset:0; opacity:0}
}
@keyframes ct-breathe{from{opacity:.72} to{opacity:1}}
/* ⚠️ הפעימה משנה **קנה מידה בלבד**. בגרסה קודמת היא הנפישה גם
   `opacity`, וזו דרסה את ה-`--o` של כל טבעת — חמש טבעות
   שקופות הפכו לדיסקה טורקיז אטומה. */
@keyframes ct-spin{to{transform:rotate(360deg)}}
@keyframes ct-beat{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.07)}
}

.anim-ready .pulse path{
  animation:ct-run 6.2s linear infinite;
  animation-delay:var(--dl);
}
.anim-ready .s0 .body{animation:ct-breathe 9s ease-in-out infinite alternate}
.anim-ready .s1 .body{animation:ct-breathe 11.5s ease-in-out infinite alternate}
.anim-ready .s2 .body{animation:ct-breathe 13s ease-in-out infinite alternate}
.anim-ready .node .halo{
  animation:ct-beat 5.2s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center;
}

/* ---------- הקישור בין כרטיס לזרם — זה מה שהופך רקע למהלך ---------- */
.ct-hero[data-on] .str{opacity:.14}
.ct-hero[data-on="0"] .s0,
.ct-hero[data-on="1"] .s1,
.ct-hero[data-on="2"] .s2{opacity:1}
.anim-ready .ct-hero[data-on="0"] .s0 .pulse path,
.anim-ready .ct-hero[data-on="1"] .s1 .pulse path,
.anim-ready .ct-hero[data-on="2"] .s2 .pulse path{animation-duration:2.6s}

/* ---------- הכתב ---------- */
.ct-in{position:relative; z-index:1; display:grid; gap:clamp(2.5rem,6vw,4.5rem)}
.ct-copy{max-width:var(--measure)}
/* ⚠️ הקיקר "צור קשר" הוסר מהשער — הוא חזר על שם הלשונית
   שכבר מסומן בתפריט ובפירורי הלחם, ולא הוסיף מידע.
   ⚠️ **חשוב:** הקיקר החזיק בעצמו מרווח עליון, ובלעדיו הכותרת
   נצמדת לראש השער. `margin-block-start` מחזיר בדיוק את
   האוויר שהוא תפס — לא יותר, אחרת נוצר החלל המת שכבר
   תיקנו כאן פעם. */
.ct-hero h1{
  margin:clamp(.4rem,1.6vw,1.1rem) 0 1rem;
  font-size:clamp(2.6rem,6vw,4.6rem);
}
.ct-note{
  margin:1.25rem 0 0; font-weight:700; color:var(--ink);
  font-size:var(--fs-sm); letter-spacing:.04em;
}

/* ---------- שלושת הערוצים ---------- */
.ways{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.8vw,1.4rem);
}
.way{
  position:relative; display:flex; flex-direction:column;
  gap:.5rem; padding:clamp(1.25rem,2.4vw,1.75rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--sand);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.w0{--c:var(--clay)} .w1{--c:var(--orchid)} .w2{--c:var(--violet)}
/* ⚠️ קו אחד בצבע הערוץ — זה כל הקישור החזותי שצריך. כרטיס צבוע
   כולו היה הופך שלושה כרטיסים לשלוש מדבקות. */
.w-line{
  position:absolute; inset-inline:0; top:0; height:2px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(to left,transparent,var(--c),transparent);
  opacity:.5; transition:opacity .45s var(--ease);
}
.way:hover,.way:focus-within{transform:translateY(-3px); border-color:var(--c)}
.way:hover .w-line,.way:focus-within .w-line{opacity:1}
.w-tag{
  align-self:flex-start; font-size:.75rem; font-weight:700;
  letter-spacing:.12em; color:var(--on-accent);
  background:var(--clay); border-radius:999px; padding:.2rem .7rem;
}
/* ⚠️ **הכותרות הן `h2` ולא `h3`.** מעליהן יושבת ה-`h1` של
   העמוד, ולא היתה ביניהן רמת ביניים — דילוג מ-h1 ל-h3 שובר
   את מפת המסמך שקורא מסך בונה (סעיף 1.3.1). הגודל והמשקל
   נשארים של `h3` בדיוק, ולכן המראה לא זז בפיקסל אחד. */
.way h2{margin:0; font-size:var(--fs-h3); font-family:Heebo,system-ui,sans-serif;
  font-weight:700; letter-spacing:-.01em; line-height:1.14}
.w-val{margin:0; color:var(--clay-2); font-weight:700; word-break:break-word}
.way p{margin:0; color:var(--ink-2); font-size:var(--fs-sm)}
.way .btn{align-self:flex-start; margin-top:.4rem}

/* ---------- מה כדאי לכתוב ---------- */
.brief{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
.brief-head h2{margin:0 0 .75rem}
.brief-list{margin:0; padding:0; list-style:none; counter-reset:b}
.brief-list li{
  counter-increment:b; position:relative;
  padding-block:.9rem; padding-inline-start:2.75rem;
  border-bottom:1px solid var(--line);
}
.brief-list li:last-child{border-bottom:0}
.brief-list li::before{
  content:counter(b,decimal-leading-zero);
  position:absolute; inset-inline-start:0; top:.9rem;
  font-size:.8rem; font-weight:700; letter-spacing:.08em;
  color:var(--clay);
}
.closer{margin:0; color:var(--ink-2)}

/* ---------- שאלות ---------- */
.faq{list-style:none; margin:0; padding:0; max-width:52rem}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer; list-style:none; padding-block:1.15rem;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; font-weight:700;
}
.qa summary::-webkit-details-marker{display:none}
/* הסימן הוא פלוס שנסגר למינוס: הקו האנכי מתקצר לאפס. סיבוב
   ב-45° היה נותן ×, וזה סימן של סגירה — לא של קיפול. */
.qa summary::after{
  content:''; flex:0 0 auto; width:13px; height:13px; margin-top:.35rem;
  background:
    linear-gradient(var(--clay),var(--clay)) center/13px 1.5px no-repeat,
    linear-gradient(var(--clay),var(--clay)) center/1.5px 13px no-repeat;
  transition:background-size .35s var(--ease);
}
.qa details[open] summary::after{background-size:13px 1.5px, 1.5px 0}
.qa p{margin:0 0 1.3rem; color:var(--ink-2); max-width:var(--measure)}

/* ---------- הסגירה ---------- */
.end-sec{background:var(--sand)}
.end{max-width:44rem}
.end h2{margin:0 0 .85rem}
.end p{margin:0 0 1.6rem; color:var(--ink-2)}

/* =========================================================
   מובייל — כל שינוי כאן הוא החלטה, לא הצרה (מ12)
   ========================================================= */
@media (max-width:61.99em){
  /* השדה הרחב מצויר לפנורמה. בפורטרט הוא היה מציג רבע ממנו. */
  .flow.is-wide{display:none}
  .flow.is-narrow{display:block}
}
@media (max-width:47.99em){
  /* ⚠️ בטלפון הכתב יושב **על** השדה, לא לצידו — ולכן הדעיכה
     העליונה ארוכה בהרבה והשדה כולו מרוסן. זו החלטה של
     קריאוּת: אותה עוצמה שנכונה לצד הכתב בדסקטופ מתחרה בו
     בטלפון. */
  .ct-flow{
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%),
      linear-gradient(to left, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%),
      linear-gradient(to left, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .flow.is-narrow{opacity:.72}

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

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

     ⚠️ `z-index:-1` עובד כאן כי `.ct-in` יוצר הקשר ערימה
     (`z-index:1`): הצעיף יורד מתחת לטקסט של אותו הקשר, אבל
     נשאר מעל `.ct-flow` שיושב ב-`z-index:0`. */
  .ct-copy{position:relative}
  .ct-copy::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    /* ⚠️ הדימום למטה גדול בהרבה מזה שבצדדים. הקצה התחתון הוא
       היחיד שחוצה את האלומות באמצע מסלולן, ולכן שם נוצר קו
       אופקי גלוי אם הדעיכה קצרה. שאר הקצוות פוגשים רקע. */
    inset:-2rem -2rem -7rem -3.5rem;
    background:radial-gradient(104% 74% at 76% 34%,
      rgba(13,25,38,.93) 0, rgba(13,25,38,.87) 32%,
      rgba(13,25,38,.62) 54%, rgba(13,25,38,.30) 72%,
      rgba(13,25,38,.10) 87%, transparent 100%);
  }
  /* ⚠️ **הרווח הזה הוא מקום להתלכדות, לא אוויר.** נמדד: בין
     שורת "שלוש דרכים" לכרטיס הראשון היו 40px, והצומת — כלומר
     כל הרעיון של הדף — נפל מאחורי הכרטיס. בדסקטופ הכתב יושב
     לצד השדה ואין בעיה; בטלפון הוא מעליו, ולכן צריך להקצות
     במפורש את הפס שבו ההתלכדות נראית. */
  .ct-in{gap:11rem}
  /* שלושה כרטיסים בטור אחד. שניים+אחד יוצר יתום. */
  .ways{grid-template-columns:1fr}
  /* הכותרת והרשימה זו מתחת לזו — שתי עמודות ברוחב טלפון נותנות
     שורות של שלוש מילים. */
  .brief{grid-template-columns:1fr}
}