/* ============================================================
   mobile.css  —  MOBILE-ONLY OVERRIDES  (Cozmo website)
   ------------------------------------------------------------
   קובץ זה נטען אחרון בכל עמוד, אבל כל התוכן שלו עטוף ב:
        @media (max-width: 768px) { ... }
   כלומר: הוא משפיע *אך ורק* על מסכי טלפון (≤768px).
   בדסקטופ ובטאבלט הרחב — הכללים כאן פשוט לא קיימים. אפס סיכון.

   מתג חירום: כדי לבטל את כל תיקוני המובייל בבת אחת,
   מוחקים/מעירים את שורת ה-<link> של mobile.css בעמודים
   (או מרוקנים את הקובץ הזה) — והאתר חוזר בדיוק למצב הקודם.

   נוצר: 30.7.2026 — סקירת מובייל, שלב 1 (שלד ריק, בלי שינויים).
   ============================================================ */

@media (max-width: 768px) {

  /* ==========================================================
     בעיה 1 — חפיפת טקסט בראש כל Action Card
     ----------------------------------------------------------
     בדסקטופ שורת הכותרת (.enh-unit) היא שתי עמודות זו לצד זו:
     שם-הישות משמאל | "Held by..." + צ'יפ מימין.
     במסך צר הצד הימני (flex:none) לא מתכווץ, מועך את השמאלי
     לרוחב 0, והטקסטים רוכבים זה על זה.
     תיקון: במובייל הופכים את השורה לטור — הכותרת למעלה,
     "Held by" והצ'יפ מתחתיה, מיושרים לשמאל. אין יותר חפיפה.
     ========================================================== */
  .enh-unit {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .enh-held {
    text-align: left;
  }
  .enh-hands {
    margin-top: 0;
  }

  /* ==========================================================
     בעיה 2 — כפתורים ארוכים בורחים מהמסך
     ----------------------------------------------------------
     ל-.btn יש בדסקטופ white-space:nowrap (טקסט בשורה אחת).
     במסך צר, כפתור עם טקסט ארוך (כמו "See an Experience Replay
     from your data") בורח מעבר לקצה וגורם לגלילה אופקית.
     תיקון: במובייל מאפשרים שבירת שורה + הגבלה לרוחב המכל.
     כפתורים קצרים לא משתנים — הם נשברים רק אם באמת צריך.
     ========================================================== */
  .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: 100%;
  }

  /* ==========================================================
     תפריט מובייל — קולפס (אקורדיון)
     ----------------------------------------------------------
     בברירת המחדל של האתר, במסך צר כל תתי-התפריטים מוכרחים
     להיות פתוחים (.dropdown{display:flex !important}) — ולכן
     התפריט הוא רשימה ארוכה אחת ולא נעים.
     תיקון: מסתירים תתי-תפריט כברירת מחדל ומראים רק את הפתוח.
     ה-JS הקיים כבר מוסיף .open ללחיצה על סעיף (data-dropdown),
     אז זה הופך לאקורדיון: סעיף אחד פתוח בכל פעם, נגיעה פותחת/סוגרת.
     ========================================================== */
  .nav-menu .dropdown { display: none !important; }
  .nav-menu .dropdown.open { display: flex !important; }
  /* חץ הסעיף מסתובב כשהוא פתוח, כדי לסמן מצב */
  .nav-link { transition: background .2s; }
  .nav-link .caret { transition: transform .2s; }
  .nav-link.open .caret { transform: rotate(180deg); }

  /* ==========================================================
     בעיות 5 + 6 — כרטיסים בגריד 3-עמודות נמעכים ונחתכים
     ----------------------------------------------------------
     ל-.g-3 (גריד 3 עמודות) אין באתר כלל התכווצות למובייל
     (רק ל-.g-2 יש). לכן במסך צר נשארות 3 עמודות של ~110px,
     הטקסט נשבר מילה-בשורה ונחתך.
     מופיע ב: קרוסלת התעשיות (.otile) וכרטיסי Resources (.rcard).
     תיקון: במובייל הגריד נערם לעמודה אחת — כל כרטיס ברוחב מלא.
     ========================================================== */
  .g-3 { grid-template-columns: 1fr; }

  /* ==========================================================
     פריט 6 — Experience Replay: מסע אופקי מעל הכרטיס
     ----------------------------------------------------------
     במובייל ה-.xr נערם (copy → journey → detail). הופכים את
     המסע לשורת נקודות אופקית (משמאל לימין) עם תוויות קטנות
     מתחת, והכרטיס (detail) מוקטן ויושב מתחתיו.
     ה-JS מזיז קו/ידית רק במצב "flat" (class שאין כאן), אז
     במצב הרגיל הוא היה ממקם אותם אנכית — לכן מסתירים אותם
     ומציירים קו אופקי סטטי. ההדגשה של השלב הפעיל והכרטיס
     ממשיכים לעבוד (JS מוסיף class, לא תלוי-פריסה).
     חל על כל מופעי .xr (בית + Experience Replay).
     ========================================================== */
  .xr-journey { width: 100% !important; flex: none !important; min-height: 0 !important; }
  .xr-stops { flex-direction: row !important; justify-content: space-between !important;
    height: auto !important; position: relative; padding-top: 4px; }
  .xr-stops::before { content: ""; position: absolute; top: 12px; left: 6%; right: 6%; height: 3px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(99,102,241,.35) 0 5px, transparent 5px 10px); }
  .xr-stop { flex-direction: column-reverse !important; align-items: center !important;
    justify-content: flex-start !important; gap: 7px !important; flex: 1; min-width: 0; }
  .xr-cl { flex: none !important; text-align: center !important; font-size: 8.5px !important; line-height: 1.1; }
  /* hide the JS-positioned (vertical) line/fill/handle — replaced by the static line above */
  .xr-track, .xr-fill, .xr-handle, .xr-bridge { display: none !important; }
  /* compact detail card below the journey */
  .xr { gap: 20px !important; }
  .xr-detail { min-height: 190px !important; }
  .xr-frame { padding: 20px 22px !important; }
  .xr-frame h3 { font-size: 24px !important; }
  .xr-desc { font-size: 16px !important; }

  /* ==========================================================
     בעיה 8 — כותרת ארוכה (מילה אחת) נחתכת בקצה
     ----------------------------------------------------------
     כותרות הירו הן מילה אחת ארוכה (למשל "Subcontractors")
     שלא נשברת ונחתכת בימין במסך צר.
     תיקון: מאפשרים שבירה/מיקוף רק כשמילה לא נכנסת — כותרות
     קצרות לא מושפעות. לא משנים גודל, אז שאר הכותרות זהות.
     ========================================================== */
  .hero-centered h1, .section-head h1 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* ==========================================================
     בעיה 10 — כפתור ה-× של הבאנר העליון קטן לאצבע
     ----------------------------------------------------------
     ה-× היה שטח נגיעה קטנטן (~12×23px). מגדילים ל-44×44px
     (תקן נגישות למגע) בלי לשנות את מראה הסמל.
     ========================================================== */
  .announce-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 6px;
  }

  /* ==========================================================
     שינוי עיצובי — הירו: הוויזואל מעל הכותרת במובייל
     ----------------------------------------------------------
     בקשה של Yael: בכל ההירוז, האלמנט הוויזואלי יופיע לפני
     (מעל) הכותרת במובייל — בדיוק כמו שכבר קורה ב-Reputation
     Protection (שם ה-.ind-stage ראשון ב-HTML).
     תיקון: הגריד לעמודה אחת, והטקסט (.section-head) עובר לסוף,
     אז הוויזואל (ind-stage / *-viz וכו') תמיד עולה מעליו.
     עובד בכל סוגי הוויזואל; עמוד עם טקסט בלבד לא מושפע.
     הדסקטופ לא נוגע (מחוץ לבלוק ה-≤768).
     ========================================================== */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .section-head { order: 2; }

  /* ==========================================================
     פריט 1 + 16 — תפריט לא שמיש בגלילה + header אפור-חד
     ----------------------------------------------------------
     ל-header.scrolled יש backdrop-filter (טשטוש). בספארי/וובקיט
     טשטוש כזה יוצר "containing block" — וה-.nav-menu הצף (fixed)
     נכלא בתוך רצועת ה-header הקצרה במקום לכסות את כל המסך. לכן
     כשלא בראש העמוד — התפריט לא מוצג/לא ניתן לסגירה.
     תיקון: במובייל מבטלים את הטשטוש (מתקן את הכליאה) ונותנים
     ל-header בגלילה מראה רך יותר (לבן שקוף + צל עדין, בלי קו חד).

     עדכון 4.8.2026: הטשטוש עבר ל-header::after (pseudo-element), ולכן
     הכליאה כבר לא קיימת — pseudo אינו אלמנט-אב של התפריט הצף. הזכוכית
     המרחפת מוגדרת ב-brand.css בבלוק max-width:1080px. מה שנשאר כאן זה
     רק לוודא שלא יחזור רקע/טשטוש על ה-header עצמו: הוא היה נצבע לבן
     כמעט אטום ברוחב מלא ומופיע כ"פס מאחורי הפס".
     ========================================================== */
  header.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  /* ==========================================================
     פריט 7 — "One engine. Four outcomes." → 2×2 במובייל
     4 הטאבים (.tab) ב-.tabs-bar נערמים 1-בשורה. הופכים לרשת
     2 עמודות → 2×2.
     ========================================================== */
  .tabs-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }
  .tabs-bar .tab {
    justify-content: center;
  }

  /* ==========================================================
     פריט 15 — הפיל בהירו (.ind-pill) עימוד שבור
     "+4–6%" נשבר על ה-en-dash ("+4-"/"6%"), והחלקים מתפזרים.
     תיקון: המספר לא נשבר, והפיל נשבר נקי וממורכז אם צריך.
     ========================================================== */
  .ind-pill {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    font-size: 13px;
    max-width: 100%;
  }
  .ind-pill b {
    white-space: nowrap;
  }

  /* ==========================================================
     פריט 12 — מקטע "What should we do next?" נחתך (why-cozmo)
     ----------------------------------------------------------
     ה-.wc-climax נערם לעמודה אחת, אבל סטאק-הכרטיסים
     (.cz-deck-wrap, רוחב קבוע 520px) מרחיב את עמודת ה-1fr
     ל-520px (grid min-width:auto), אז גם הטקסט וגם הכרטיסים
     חורגים ונחתכים ל-319px.
     תיקון: minmax(0,1fr) מאפשר לעמודה להתכווץ → הטקסט נכנס
     ונשבר יפה; את סטאק-הכרטיסים ממרכזים (נחתך אחיד, לא בורח ימינה).
     ========================================================== */
  .wc-climax {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-climax-viz {
    justify-content: center;
  }
  /* ----------------------------------------------------------
     סטאק הכרטיסים הרצים — לצמצם ל-2, להקטין, למרכז (JS ממשיך
     לסובב). בדסקטופ נפרשים 5 כרטיסים (front+p1..p4) עד 304px
     → גולש. מסתירים p2/p3/p4, מקרבים את p1, וממרכזים.
     ---------------------------------------------------------- */
  .cz-deck-wrap { justify-content: center !important; }
  .cz-deck { width: 232px !important; height: 200px !important; margin: 0 auto !important; }
  .cz-deck .cz-card { width: 200px !important; }
  /* מציגים בדיוק 2 (front + p1); כל השאר שקוף — כולל first-child
     ה"עקשן" ומצב is-leaving. */
  .cz-deck .cz-card:not(.is-front):not(.is-p1) { opacity: 0 !important; }
  .cz-deck .cz-card.is-front { transform: translate(0, 18px) rotate(2deg) !important; }
  .cz-deck .cz-card.is-p1 { transform: translate(28px, 6px) rotate(3deg) scale(.97) !important; }

  /* ==========================================================
     פריט 13 — יותר מדי רווח אנכי בין סקשנים (גלובלי)
     ----------------------------------------------------------
     במובייל כל .section הוא padding 64px למעלה+למטה (=128px בין
     סקשנים), וההירו אף יותר — נוצר המון חלל ריק. מצמצמים.
     ========================================================== */
  .section { padding: 40px 0 !important; }
  .section--tight { padding: 30px 0 !important; }
  .hero-centered { padding: 48px 0 36px !important; }
  .hero-split { padding: 40px 0 34px !important; }
  .footer { padding: 48px 0 28px !important; }

  /* ==========================================================
     פריט 14 — כרטיסי before→after עם אייקון דליל (For Insights)
     ----------------------------------------------------------
     במובייל כל כרטיס .xform נערם (from / אייקון / to) עם רווחים
     גדולים סביב האייקון. מצמצמים: אייקון קטן יותר, רווחים הדוקים.
     ========================================================== */
  .xform { gap: 4px !important; padding: 12px 16px !important; }
  .xform-arrow { width: 26px !important; height: 26px !important; margin: 2px 0 !important; }
  .xform-arrow .gi { width: 15px; height: 15px; }
  .xform-from { margin-bottom: 0; }

  /* ==========================================================
     פריט 5 — הבועות ("Your costliest gaps") כבדות לימין
     ----------------------------------------------------------
     הצ'יפים ממוקמים left:3%..~95% ובמסך צר הימניים חורגים
     ומצטופפים לימין. שומרים על העיצוב, רק מקטינים מעט ומאזנים:
     צ'יפ קטן יותר + מרכוז הפיזור כך שלא בורח מהקצה הימני.
     ========================================================== */
  .signal-bubbles .sig-chip { font-size: 10.5px !important; padding: 5px 9px; }
  .signal-bubbles .sig-chip:nth-child(7)  { left: 50% !important; }
  .signal-bubbles .sig-chip:nth-child(8)  { left: 58% !important; }
  .signal-bubbles .sig-chip:nth-child(9)  { left: 64% !important; }
  .signal-bubbles .sig-chip:nth-child(10) { left: 70% !important; }
  .signal-bubbles .sig-chip:nth-child(11) { left: 6%  !important; }
  .signal-bubbles .sig-chip:nth-child(12) { left: 22% !important; }
  .signal-bubbles .sig-chip:nth-child(13) { left: 40% !important; }
  .signal-bubbles .sig-chip:nth-child(14) { left: 58% !important; }
  .signal-bubbles .sig-chip:nth-child(15) { left: 12% !important; }
  .signal-bubbles .sig-chip:nth-child(16) { left: 68% !important; }

  /* ==========================================================
     פריט 9 — "Built by Howazit" נקודות פולסיות נעלמות
     ----------------------------------------------------------
     ה-.tb-dot (d1/d2/d3) ממוקמות ליד הקצה הימני (right:12–40%)
     ועם האנימציה חלקן יוצאות מהמסך הצר. ממקמים אותן מרווח בטוח
     מהקצה כך שיישארו גלויות במובייל.
     ========================================================== */
  /* הטבעות/נקודות הדקורטיביות — מציגים את כולן (לא מסתירים),
     רק מכווצים וממקמים שייכנסו יפה בתוך הסקשן, וה-section חותך
     גלישה כדי שלא ייחתכו מכוער בקצה המסך. */
  .trust-band { overflow: hidden !important; }
  .tb-ring, .tb-dot { display: block !important; }
  .tb-ring.r1 { width: 210px !important; height: 210px !important; top: -50px !important; right: 4% !important; }
  .tb-ring.r2 { width: 150px !important; height: 150px !important; bottom: -46px !important; right: 8% !important; }
  .tb-ring.r3 { width: 92px !important; height: 92px !important; top: 66px !important; right: 30% !important; }
  .tb-dot.d1 { top: 44px !important; right: 26% !important; }
  .tb-dot.d2 { bottom: 52px !important; right: 20% !important; }
  .tb-dot.d3 { top: 96px !important; right: 14% !important; }

  /* ==========================================================
     פריט 2+3 — ההירו בבית: קודם הסטאק הישן, ואז קוזמו, תחת הכותרת
     ----------------------------------------------------------
     בדסקטופ הסטאק הישן (.col-l) וקוזמו (.col-r) צפים בשוליים
     האבסולוטיים. במובייל הסטאק הישן היה מוסתר, וקוזמו הציץ חצי.
     תיקון: ההירו נערם — כותרת (.in) → הסטאק הישן → קוזמו.
     את הסטאק הישן פורסים כאשכול קוביות-מטריקה ממורכז (Yesterday's
     stack), ומתחתיו כרטיס קוזמו. שניהם גלויים ומלאים.
     ========================================================== */
  /* ההירו נהיה שורה: כותרת (רוחב מלא) → מתחתיה שני המבנים
     הצפים של הדסקטופ, מוקטנים, זה לצד זה: הסטאק הישן משמאל,
     קוזמו מימין. שומרים את המבנה המקורי — רק מכווצים (zoom). */
  .hero { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: flex-start; row-gap: 6px; column-gap: 26px; }
  .hero .bg-fx { position: absolute !important; inset: 0; }
  .hero .in { flex: 0 0 100% !important; order: 0; }
  /* הסטאק הישן — אותו מגדל דסקטופ, גלוי, מוקטן, משמאל */
  /* המגדל הישן — פיזור כאוטי ועמוס (הרבה מטריקות "מיותרות"),
     מוקטן. בכוונה מבולגן — מייצג את הערימה הישנה חסרת-הערך.
     מציגים את כל האלמנטים (קוביות + גרפים), מקצרים השהיות. */
  .hero .col-l {
    order: 1; display: block !important; position: relative !important;
    left: auto !important; top: auto !important; margin: 42px 0 0 !important;
    zoom: .56; flex: 0 0 auto; align-self: flex-start;
  }
  .col-l, .hero.on .col-l { opacity: 1 !important; }
  /* התגית "Yesterday's stack" נכנסת יחד עם הסטאק (translate ידני,
     כי בעצמו הוא ממורכז אבסולוטית מעל הסטאק). */
  .col-l .cap { translate: none !important; }
  /* האנימציות מושהות עד שהסטאק נכנס למסך (אחרת הן משחקות בטעינה,
     כשהסטאק עדיין מתחת לקיפול — ואז "הכל כבר שם"). JS מוסיף
     .seq-go ל-.hero כשגוללים לסטאק. לפני הטריגר הכל נסתר — כולל התגית,
     כדי שלא תישאר לבד למעלה בלי הסטאק. */
  .hero:not(.seq-go) .col-l .cap,
  .hero:not(.seq-go) .col-l .old,
  .hero:not(.seq-go) .col-l::after,
  .hero:not(.seq-go) .col-r .fly,
  .hero:not(.seq-go) .col-r .act,
  .hero:not(.seq-go) .col-r .act > * { animation-play-state: paused !important; }

  /* שלב 1: התגית + הסטאק מרחפים פנימה יחד (מהשמאל) */
  .col-l .cap { animation: hero-floatin 1.7s cubic-bezier(.16,.7,.3,1) 0s both !important; }
  .col-l .old { animation: hero-floatin 1.7s cubic-bezier(.16,.7,.3,1) 0s both !important; }
  @keyframes hero-floatin {
    from { opacity: 0; transform: translate(-16px, 5px) scale(.93); }
    to   { opacity: 1; transform: none; }
  }
  /* הכיתוב לא נוזל — כל קובייה = קופסה עם ריפוד וטקסט ממורכז,
     כך שהמספר והתווית תמיד בתוך הקופסה (חסין גם בספארי). */
  .col-l .ocube {
    width: 86px !important; height: 64px !important; min-height: 0 !important;
    display: flex !important; flex-direction: column;
    justify-content: center !important; align-items: center !important;
    padding: 6px 8px !important; overflow: hidden !important;
  }
  .col-l .ocube .n { margin: 0 !important; line-height: 1 !important; }
  .col-l .ocube .l { margin: 3px 0 0 !important; line-height: 1 !important; }

  /* ── הכותרת בראש העמוד ──
     בדסקטופ מילות-הגרדיאנט נצבעות ב-4.9/6.2/7.5ש' והביים ב-7.6ש',
     והכל תלוי בקלאס .on שמתווסף כשההירו נכנס למסך. אבל במובייל ההירו
     גבוה מאוד (טור), 25% ממנו לא נראים בטעינה, אז .on לא מתווסף והכותרת
     "תקועה" עד שזזים. לכן במובייל מנתקים את כניסת הכותרת מ-.on לגמרי —
     היא משחקת מיד בטעינה (הטקסט תמיד קריא; זו רק ההצבעה של הגרדיאנט). */
  .hero .ig1 .f { animation: fill 1s var(--e) .5s forwards !important; }
  .hero .ig2 .f { animation: fill 1s var(--e) 1.2s forwards !important; }
  .hero .ig3 .f { animation: fill 1s var(--e) 1.9s forwards !important; }
  .hero .hbeam::before { animation: hbeam 8s ease-in-out 2.8s infinite !important; }

  /* רצף מדורג ורגוע: הסטאק(0s) → חץ(1.0s) → אורב(1.5s) → כרטיס ריק(2.2s)
     → התוכן ממלא מיד אחריו (2.45s) בתנועה אחת מלאה. פער כרטיס↔מילוי
     קצרצר (~0.25s), רצוף — בלי עצירה באמצע. */
  .hero .col-r { opacity: 1 !important; }
  .hero .col-r .fly { animation: hero-seq 1.2s cubic-bezier(.16,.7,.3,1) 1.5s both !important; }
  .hero .col-r .act { animation: hero-seq .7s cubic-bezier(.16,.7,.3,1) 2.2s both !important; }
  .hero .col-r .act > * { animation: hero-cardfill .7s cubic-bezier(.16,.7,.3,1) 2.45s both !important; }
  .hero .col-r .act .t .w { animation: none !important; opacity: 1 !important; }
  /* תתי-אלמנטים של הכרטיס היו במצב-מוסתר נייטיב שממתין ל-.on (שלא
     מתווסף במובייל): הפס העליון (::before) מכווץ ל-scaleX(0), ושורת
     High/$48k/Assign ב-opacity:0 — לכן הופיעו מאוחר ומדורג. מנטרלים
     אותם כך שיֵראו כחלק ממילוי-הכרטיס האחד (הם רוכבים על ההורה .row/.act). */
  .hero .col-r .act::before { animation: none !important; transform: none !important; opacity: 1 !important; }
  .hero .col-r .act .prio,
  .hero .col-r .act .risk,
  .hero .col-r .act .go { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; }
  @keyframes hero-seq {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-cardfill {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
  /* חץ דאטה מהערימה הישנה לכיוון קוזמו */
  .col-l::after {
    content: "\2192"; position: absolute; top: 46%; right: -16px;
    font: 800 40px/1 var(--font-head, sans-serif); color: var(--accent);
    pointer-events: none;
    animation: hero-seq 1s cubic-bezier(.16,.7,.3,1) 1s both;
  }
  /* קוזמו — אותו מבנה דסקטופ, מוקטן, מימין */
  .hero .col-r {
    order: 2; position: relative !important; right: auto !important; top: auto !important;
    margin: 26px 0 0 !important; zoom: .6; flex: 0 0 auto; align-self: flex-start;
  }

  /* ==========================================================
     המנוע (R4) — גרסה אנכית למובייל
     ----------------------------------------------------------
     מסתירים את ה-SVG הרחב (schema-svg) ומציגים במקומו גרסה
     אנכית עם אותם האלמנטים בדיוק: מקורות → Cozmo Engine →
     Context & Logic → Action Card. יושב על סקשן כהה (section--ink).
     ========================================================== */
  .schema-svg { display: none !important; }
  .engine-v {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    margin: 8px auto 0;
    text-align: center;
  }
  .ev-cap {
    font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.6); max-width: 280px; line-height: 1.4;
  }
  .ev-cap--in { color: var(--teal); }
  .ev-sources, .ev-inrow {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  }
  .ev-chip, .ev-input {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 12px; border: 1px solid transparent;
    background:
      linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
      linear-gradient(135deg, rgba(129,140,248,.6), rgba(34,211,238,.45)) border-box;
    color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap;
  }
  .ev-input {
    background:
      linear-gradient(rgba(99,102,241,.18), rgba(99,102,241,.18)) padding-box,
      linear-gradient(135deg, rgba(129,140,248,.75), rgba(34,211,238,.5)) border-box;
  }
  /* the flow between stages — a glowing data pulse travels down the line */
  .ev-arrow { position: relative; width: 3px; height: 30px; border-radius: 3px;
    background: linear-gradient(rgba(99,102,241,.35), rgba(34,211,238,.35)); }
  .ev-arrow::after {
    content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%;
    transform: translateX(-50%); background: #22D3EE; box-shadow: 0 0 12px 4px rgba(34,211,238,.75);
    animation: ev-flow 1.9s linear infinite;
  }
  @keyframes ev-flow {
    0% { top: -2px; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; }
    100% { top: calc(100% - 2px); opacity: 0; }
  }
  /* the engine core */
  .ev-core {
    width: 100%; border-radius: 22px; padding: 22px 20px;
    background: linear-gradient(155deg, #5B4FE0, #6366F1 45%, #22D3EE);
    box-shadow: 0 24px 50px -22px rgba(56,189,248,.6);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    animation: ev-pulse 3.4s ease-in-out infinite;
  }
  @keyframes ev-pulse {
    0%,100% { box-shadow: 0 24px 50px -22px rgba(56,189,248,.55); }
    50% { box-shadow: 0 24px 60px -16px rgba(56,189,248,.95), 0 0 0 1px rgba(255,255,255,.12); }
  }
  .ev-corr { animation: ev-corr-glow 2.4s ease-in-out infinite; }
  @keyframes ev-corr-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: 0 0 14px 2px rgba(255,255,255,.55); }
  }
  /* אמבלם המותג הלבן מעל הכותרת — לא מזיז דבר בליבה, רק מתווסף למעלה.
     האייקון ביחס 120×72, אז רוחב קבוע וגובה אוטומטי (בלי למעוך). */
  .ev-core .ev-logo { width: 60px !important; height: auto !important; max-width: 60px !important;
    display: block; margin: 0 0 8px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.2)); }
  .ev-core-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; }
  .ev-core-sub { font-size: 12.5px; color: rgba(255,255,255,.8); margin-bottom: 10px; }
  .ev-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .ev-agent {
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px; padding: 9px 6px; color: #fff; font-weight: 700; font-size: 12px;
  }
  .ev-corr {
    margin-top: 9px; background: #fff; color: var(--accent-deep);
    font-weight: 800; font-size: 12px; padding: 6px 16px; border-radius: 999px;
  }
  .ev-inputs { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; }
  /* the output action card */
  .ev-out { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .ev-card {
    position: relative;
    width: 100%; max-width: 290px; border-radius: 18px;
    padding: 18px 18px 20px; margin-top: 20px; text-align: left;
    display: flex; flex-direction: column; gap: 6px;
    /* בורדר גרדיאנט מסתובב (מנגנון --cza/cz-bspin הקיים באתר) */
    --cza: 0deg; border: 2px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      conic-gradient(from var(--cza), #6366F1, #22D3EE, #2DD4BF, #6366F1) border-box;
    animation: cz-bspin 6.5s linear infinite;
    box-shadow: 0 22px 44px -22px rgba(0,0,0,.5);
  }
  /* סטאק אלכסוני — 2 כרטיסים מאחור, מוסטים באלכסון, לכל אחד בורדר */
  .ev-card::before, .ev-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px;
    background: #fff; border: 1.5px solid rgba(99,102,241,.4);
    box-shadow: 0 14px 30px -18px rgba(48,46,80,.42);
  }
  .ev-card::before { transform: translate(9px, -9px) rotate(3.5deg); }
  .ev-card::after  { transform: translate(18px, -18px) rotate(7deg); }
  .ev-card-tag {
    align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent); background: rgba(99,102,241,.12);
    padding: 4px 10px; border-radius: 999px;
  }
  .ev-card-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text); }
  .ev-card-desc { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
  .ev-card-impact { font-size: 13px; color: var(--text); }
  .ev-card-impact b { color: var(--accent); }
  .ev-card-btn {
    margin-top: 6px; text-align: center; background: linear-gradient(110deg,#6366F1,#22D3EE);
    color: #fff; font-weight: 700; font-size: 14px; padding: 11px; border-radius: 12px;
  }

  /* ==========================================================
     פריט 11 — גלגל האינטגרציות (product) — קוביות נחתכות בצדדים
     ----------------------------------------------------------
     ה-.orb-stage (460px) מוקטן במובייל אבל לא מספיק — הקוביות
     בקצה שמאל/ימין נחתכות. מקטינים עוד ומוודאים שהמכל לא חותך.
     ========================================================== */
  .orb-stage { zoom: .58 !important; }
  .orb-layout { overflow: visible !important; }
  /* "השמש" (sun-feed) היא stage ענק 560×600 — מכווצים שתיכנס
     ומכילים גלישה של הקרניים. (תיקון: קודם היה overflow:visible
     שגרם לה לגלוש — עכשiv hidden + זום.) */
  .sun-wrap { overflow: visible !important; }
  /* מגדילים את הגלגל (זום גדול יותר) — קוביות גדולות וקריאות,
     במחיר שיהיו קצת יותר קרובות. הקוביות מספיק רחבות שהמילים
     השלמות ייכנסו בשורה, בלי שבירה באמצע מילה. */
  .sun-stage { zoom: .55 !important; transform: none !important; left: auto !important; margin: 0 auto !important; }
  .sun-tile.lg { width: 118px !important; }
  .sun-tile span, .sun-tile.lg span {
    font-size: 12px !important; line-height: 1.15 !important;
    word-break: keep-all !important; overflow-wrap: normal !important;
  }

  /* ==========================================================
     פריט 8 — "What you have today vs. what Cozmo adds"
     ----------------------------------------------------------
     בדסקטופ טבלה 3 עמודות: Today | מחבר | Cozmo. במובייל חסר
     הקו המחבר, ו-Cozmo לא ממורכז. תיקון: עמודה אחת → כל שלישייה
     (Today → מחבר → Cozmo, לפי סדר ה-DOM) נערמת ככרטיס אחד עם
     קו+חץ מחבר באמצע. חל על כל מופעי .cztf.
     ========================================================== */
  .cztf {
    grid-template-columns: 1fr !important;
    border: none !important; box-shadow: none !important;
    background: none !important; overflow: visible !important;
  }
  .cztf-hd { display: none !important; }           /* מסתירים את שורת הכותרות Today/With Cozmo */
  .cztf-c { min-height: 0 !important; }
  /* Today — ראש הכרטיס (אפור) */
  .cztf-c.cztf-today {
    background: #fbfbfe; padding: 13px 16px !important;
    border: 1px solid var(--line-soft); border-bottom: none;
    border-radius: 14px 14px 0 0; margin-top: 14px;
  }
  /* המחבר — קו אנכי + חץ */
  .cztf-c.cztf-mid {
    height: 24px !important; min-height: 0 !important; padding: 0 !important;
    position: relative; background: #fff;
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  }
  .cztf-mid .cztf-flow { display: none !important; }
  .cztf-c.cztf-mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(var(--accent), var(--cyan)); transform: translateX(-50%); }
  .cztf-c.cztf-mid::after { content: "↓"; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%); color: var(--accent); font-weight: 900; font-size: 12px;
    line-height: 1; background: #fff; padding: 1px 0; }
  /* With Cozmo — תחתית הכרטיס (מודגש), ממורכז */
  .cztf-c.cztf-cz {
    padding: 13px 16px !important;
    border: 1px solid var(--line-soft); border-top: none; border-left: 1px solid var(--line-soft);
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(34,211,238,.06));
  }
  .cztf-new { opacity: 1 !important; transform: none !important; }  /* לוודא ש-Cozmo תמיד גלוי */

  /* ==========================================================
     שורת התפריט — "הפס המרחף" ותפריט הטלפון  (4.8.2026)
     ----------------------------------------------------------
     ההמשך למה שנעשה בדסקטופ (brand.css · AIRY NAV LINE):
     (1) פס זכוכית — בראש העמוד צמוד לבאנר ברוחב מלא, ובגלילה
         מתרומם לפס מעוגל שמרחף מעל התוכן.
     (2) תפריט ההמבורגר מקבל אותו אוויר: שורות מרווחות, קו הפרדה
         דק בין הסעיפים, ו-Log in / Book a demo מיושרים לשמאל.
     (3) פס הגרדיאנט של המותג מסמן את הפריט של העמוד הנוכחי.

     למה הזכוכית על ::after ולא על ה-header עצמו — שתי סיבות:
     • גובה ה-header נשאר קבוע בשני המצבים, ולכן אין קפיצה של
       התוכן בתחילת הגלילה (זו הייתה "הרעידה" בגרסה הראשונה).
     • ::after אינו אלמנט-אב של .nav-menu, ולכן הטשטוש לא יוצר
       containing block שכולא את התפריט הצף — הבאג שמתועד למעלה.
     ========================================================== */
  header, header.scrolled {
    padding: 8px 0;
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  header::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(252,252,255,.70);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid transparent; border-radius: 0;
    transition: top .3s cubic-bezier(.22,1,.36,1), bottom .3s cubic-bezier(.22,1,.36,1),
                left .3s cubic-bezier(.22,1,.36,1), right .3s cubic-bezier(.22,1,.36,1),
                border-radius .3s cubic-bezier(.22,1,.36,1),
                background .3s, box-shadow .3s, border-color .3s;
  }
  header.scrolled::after {
    top: 6px; bottom: 6px; left: 12px; right: 12px;
    background: rgba(252,252,255,.88);
    border-color: rgba(255,255,255,.7);
    border-radius: 16px;
    box-shadow: 0 12px 28px -20px rgba(48,46,80,.5);
  }

  /* התפריט הנפתח — ריווח וקווי הפרדה */
  .nav-menu { padding: 8px 16px 40px; }
  .nav-menu .nav-item + .nav-item { border-top: 1px solid var(--line-soft); }
  .nav-menu .nav-link { padding: 17px 14px; }
  /* Log in והכפתור היו ממורכזים (ל-.nav-menu יש align-items:center, ורק
     ל-.nav-item יש width:100%) ונראו כמו שתי שורות שנשמטו מהרשימה.
     מיישרים לאותו קו שמאל, והכפתור לרוחב מלא. */
  .nav-menu .nav-login {
    padding: 18px 14px 14px; margin: 6px 0 0;
    align-self: stretch; text-align: left;
    border-top: 1px solid var(--line-soft);
  }
  .nav-menu .nav-cta { margin: 6px 0 0; align-self: stretch; }

  /* הפריט של העמוד הנוכחי — קו גרדיאנט קצר בצד השורה. בתפריט אנכי זה
     נקרא טוב יותר מקו מתחת לשורה, שהיה מתחרה בקווי ההפרדה. */
  .nav-menu .nav-item.is-current > .nav-link { position: relative; }
  .nav-menu .nav-item.is-current > .nav-link::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 3px; background: var(--grad-brand);
  }

}