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

   שלושה דברים בקובץ הזה:
   1. ביטול גאומטריית השקפים (גובה מסך מלא וחיתוך התוכן)
   2. האדר ופוטר של אתר
   3. עמודים משפטיים
   ===================================================================== */

/* =====================================================================
   1 · ביטול מצב שקפים
   ---------------------------------------------------------------------
   בגיליון המצגת כל סקשן נעול ל-height:100vh עם overflow:hidden, כדי
   ששקף יהיה בדיוק מסך אחד. בגלילה ארוכה זה חותך תוכן, אז מבטלים רק
   את הגאומטריה. display:flex נשאר כמו שהוא, כי הוא מה שממרכז את
   התוכן, והוא לא מזיק כשהגובה נגזר מהתוכן.
   ===================================================================== */
#site > section,
.slide,
.inv-part {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* מקצב אחיד בין סקשנים. במצגת הריווח היה 40px כי כל שקף היה ממורכז
   בתוך מסך שלם, ובגלילה רצופה זה נראה דחוס. */
#site > section { padding: 96px 0 }
.slide          { padding: 72px 0 }
.inv-part       { padding: 72px 0 }

/* הפתיח נשאר מסך מלא, זה הדבר היחיד שצריך אותו.
   הריפוד העליון בגובה הסרגל: הסרגל צף מעל התוכן, ובלי המקום הזה
   הכותרת ממורכזת מול כל המסך ונכנסת מתחתיו במסכים נמוכים. */
#site > section.hero { min-height: 100vh; padding: 92px 0 24px }
@media (max-width: 860px) {
  #site > section.hero { padding-top: 80px }
}

/* המנועים: כל מנוע הוא שקף בפני עצמו במצגת, וכאן הם רצף */
#solution .sec-head { padding: 0 0 8px }
#solution .pillar   { padding: 56px 0 }

/* האינפוגרפיקה של מסע הלקוח.
   במצגת רוחבה נגזר מגובה המסך (100vh * יחס התמונה) כדי שתיכנס לשקף.
   בגלילה אין אילוץ גובה, אז היא נגזרת מהרוחב כמו כל תמונה. */
.jm-slide { padding: 0 }
.jm-wrap  { width: 100%; max-width: 1600px }

/* ---- בלי הצמדת גלילה ----
   הגיליון של המצגת מצמיד את הגלילה לתחילת כל שקף (scroll-snap), וזה
   מה שמרגיש כמו קפיצות. באתר גוללים חופשי (ניקול, 16 בספטמבר 2026). */
html { scroll-snap-type: none }
#site > section,
#solution .sec-head,
#solution .pillar { scroll-snap-align: none }

/* עוגנים: הניווט העליון צף, אז קפיצה לעוגן חייבת לקזז את גובהו.
   במצגת הקיזוז אופס כי לא היה ניווט. */
#site > section,
.slide,
.inv-part,
.pillar { scroll-margin-top: 84px }

/* ---- קרוסלת הלוגואים ----
   הגדלים של הקרוסלה בגיליון המצגת מכוונים לפס צר. כאן היא סקשן שלם,
   אז הלוגואים גדולים יותר. הלוגואים לגובה, ואלה שהם כרטיס כהה בעצמם,
   מקבלים תקרה גבוהה יותר אחרת הם יוצאים זעירים בגובה אחיד. */
/* פס ולא סקשן: ריפוד נמוך בהרבה משאר הסקשנים.
   רקע לבן ולא האפור של sec-alt. חלק מהלוגואים הם קבצים עם רקע לבן
   משלהם, ועל אפור הם יוצרים ריבועים לבנים מסביבם. */
#site > section#logos { padding: 44px 0; background: var(--bg) }
#logos .lc-cap { margin-bottom: 26px }
#logos .logo-carousel { margin-bottom: 0; padding: 14px 0 }
#logos .lc-logo { height: 86px }
#logos .lc-logo img { max-height: 86px; max-width: 210px; opacity: 1 }
#logos .lc-logo.tall img { max-height: 104px }
#logos .logo-track { gap: 78px }

/* SVG בלי מידות פנימיות מתכווץ לרוחב אפס, ואז שלושת העותקים
   מפסיקים להיות זהים והלולאה קופצת. */
#logos .lc-logo img[src$=".svg"] { height: 78px; width: auto }

@media (max-width: 760px) {
  #logos .lc-logo { height: 62px }
  #logos .lc-logo img { max-height: 62px; max-width: 150px }
  #logos .lc-logo.tall img { max-height: 76px }
  #logos .logo-track { gap: 52px }
}

/* ---- הפסקאות של המסר ----
   בלי השבירות הקשיחות (site.js מוריד אותן) הפסקה הייתה רצה על כל
   רוחב המסגרת, 1064 פיקסלים, יותר מדי לקריאה. 840 הוא כמעט כפול
   מהשורות הקצרות שהיו, ועדיין שורה שנוחה לקרוא. נמדד: הפסקה הראשונה
   נכנסת בשורה אחת (כ-790 פיקסלים), השנייה בשתיים, הציטוט באחת. */
#manifesto .mf-p { max-width: 840px }
/* הגיליון של המצגת נועל את העמודה של המסר ל-840 כולל ריפוד, כלומר 784
   לטקסט, וזה מה שהצר את השורות גם אחרי שהשבירות ירדו. 900 נותן 844
   לטקסט, והפסקה הראשונה נכנסת בשורה אחת. */
#manifesto .container { max-width: 900px }

/* ---- שורת הסגירה של המסר, כציטוט ----
   בגיליון המצגת היא כרטיס עם רקע סגול ומסגרת. קו אנכי לבדו עדיין
   נקרא כמו הדגשה ולא כמו ציטוט, ולכן כאן: גרש פתיחה גדול מעל,
   טיפוגרפיה של כותרת, ורוחב צר יותר מהפסקאות שמעליו. */
.mf-close {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 42px;
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.38;
  color: var(--ink);
  /* אותו רוחב כמו הפסקאות שמעליו */
  max-width: 840px;
  /* מוצמד לקצה ההתחלה, כלומר ימין. margin-inline-start:auto היה
     דוחף אותו דווקא שמאלה. */
  margin-inline-start: 0;
  margin-inline-end: auto;
  text-wrap: balance;
}
.mf-close::before {
  content: "\201D";
  display: block;
  font-family: 'Secular One', sans-serif;
  font-size: 72px;
  line-height: .62;
  color: var(--accent);
  opacity: .3;
  margin-bottom: 6px;
}

/* ---- התמונה של גיא ----
   הקובץ הוא 900 על 1350, יחס 2:3. הגיליון של המצגת משתמש ב-cover
   עם תקרת גובה, וזה תמיד חותך: יישור למרכז קטע את הראש, יישור
   לראש קטע את הגוף. אין יישור נכון, כי cover חייב לחתוך.

   כאן היא לא נחתכת בכלל. היחס נעול על 2:3, והתמונה מתכווצת לפי
   מה שמגביל ראשון, הרוחב של העמודה או גובה המסך. */
.guy-photo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 64vh;
  aspect-ratio: 900 / 1350;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

/* ---- התפריט הנפתח ----
   בגיליון המצגת כל פריט הוא אייקון, כותרת ותת כותרת. כאן רק שם,
   אז הרוחב מצטמצם והריווח מתהדק. */
.dropdown { min-width: 190px; padding: 6px }
.dropdown a { padding: 10px 14px; gap: 0 }

/* ---- עמוד פנימי ----
   בעמוד הבית הפתיח תופס מסך מלא ומפנה מקום לסרגל הצף. בעמוד פנימי
   הסקשן הראשון מתחיל מיד, ולכן הוא צריך מקום משלו. */
body.inner-page #site > section:first-child { padding-top: 124px }

/* ---- עמוד הסייבר: שלושה מסכים ----
   לבקשת ניקול (16 בספטמבר 2026): שלושת החלקים מחולקים למסכים כמו
   במצגת. כל סקשן תופס לפחות מסך שלם והתוכן ממורכז בו אנכית.
   display:flex ו-align-items:center כבר מגיעים מגיליון המצגת, כאן
   רק מחזירים את גובה המסך שבוטל למעלה. סקשן שהתוכן שלו גבוה
   מהמסך (בטלפון) גדל לפי התוכן, כי זה min ולא height. */
body[data-page="cyber"] #site > section { min-height: 100vh }


/* =====================================================================
   2 · האדר
   ---------------------------------------------------------------------
   עיצוב הניווט כבר קיים בגיליון המצגת (.nav ומטה), הוא פשוט לא הופעל
   במצב שקפים. כאן רק משלימים את מה שחסר.
   ===================================================================== */
.nav-cta { text-decoration: none }

/* בפתיח הניווט שקוף לגמרי ומתמלא בגלילה, כי הפתיח כהה ממילא */
.nav:not(.scrolled) { background: transparent; border-bottom-color: transparent }

/* בעמוד פנימי הסקשן הראשון לבן, וסרגל שקוף מעליו מעלים את הלוגו
   ואת התפריט הלבנים עד שגוללים. ניקול: "למה ההדר נעלם מהעמודים
   הפנימיים?" (16 בספטמבר 2026). שם הסרגל כהה מהפיקסל הראשון, באותו
   גוון של מצב הגלילה, כך שאין קפיצת צבע. */
body:not([data-page="home"]) .nav:not(.scrolled) {
  background: rgba(13, 12, 32, .9);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* ---- הלוגו ----
   במצגת הוא 34 פיקסלים, קטן מהלוגו שבפוטר. הוא סימן המותג הראשון
   שרואים, אז הוא גדל ל-60. הריפוד האנכי צומצם ב-2 כדי שהסרגל
   לא יתנפח יותר מדי: 60 ועוד 24 יוצא 84 במקום 62. */
.nav-inner { padding-top: 12px; padding-bottom: 12px }
/* 34 במצגת היה קטן מדי, 60 יצא גדול מדי. 48 באמצע. */
.nav .logo img { height: 48px }

/* ---- התפריט באמצע ----
   במצגת הוא נצמד ללוגו והכפתור נדחף לקצה. כדי שהתפריט יהיה ממורכז
   באמת, שני הצדדים מקבלים אותו רוחב גמיש (flex:1) והתפריט נשאר
   בגודלו הטבעי ביניהם. ככה המרכז אמיתי ולא תלוי באורך הלוגו. */
.nav-inner > .logo { flex: 1 1 0 }
.nav-inner > .nav-menu { flex: 0 0 auto; margin-inline-start: 0 }
.nav-inner > .nav-right { flex: 1 1 0; margin-inline-start: 0; justify-content: flex-end }

/* העוגנים מקוזזים לפי גובה הסרגל החדש, אחרת קפיצה לעוגן
   נוחתת מתחת לניווט והכותרת נחתכת. */
#site > section,
.slide,
.inv-part,
.pillar { scroll-margin-top: 92px }

@media (max-width: 860px) {
  .nav .logo img { height: 40px }
  #site > section, .slide, .inv-part, .pillar { scroll-margin-top: 80px }
}

/* =====================================================================
   3 · פוטר
   ---------------------------------------------------------------------
   הפוטר של המצגת הוא שורה אחת עם תווית "כלי פנימי". אתר צריך פוטר
   מלא, אז זה נבנה כאן, בשפה של המצגת: רקע --ink, ליים להדגשה.
   ===================================================================== */
.site-foot { background: var(--ink); color: #fff; padding: 64px 0 28px }
.site-foot a { color: rgba(255,255,255,.72); transition: color .18s var(--ease) }
.site-foot a:hover { color: var(--pop) }

.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.foot-brand .logo img { height: 52px; width: auto; display: block; margin-bottom: 16px }
.foot-brand p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  max-width: 34ch;
}

.foot-col h4 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  margin-bottom: 14px;
}
.foot-col ul { list-style: none }
.foot-col li { margin-bottom: 9px }
.foot-col a { font-size: 14px }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
}
.foot-social { display: flex; gap: 10px }
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  font-size: 15px;
}
.foot-social a:hover { border-color: var(--pop); background: rgba(200,255,61,.1) }
.foot-copy { font-size: 13px; color: rgba(255,255,255,.45) }

@media (max-width: 900px) {
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr }
  .foot-bottom { justify-content: center; text-align: center }
}

/* =====================================================================
   4 · עמודים משפטיים
   ---------------------------------------------------------------------
   שלושת העמודים נלקחו מהאתר החי כמו שהם. הטיפוגרפיה כאן היא של
   המצגת, כדי שלא ייראו כמו אתר אחר.
   ===================================================================== */
.legal-wrap { padding: 148px 0 96px; background: var(--bg) }
.legal-page { max-width: 780px; margin-inline: auto }

.legal-page h1 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: 28px;
  color: var(--ink);
}
.legal-page h2 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: 22px;
  margin: 36px 0 12px;
  color: var(--ink);
}
.legal-page h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; color: var(--ink) }
.legal-page p,
.legal-page li { font-size: 16px; line-height: 1.8; color: var(--muted) }
.legal-page p { margin-bottom: 14px }
.legal-page ul, .legal-page ol { margin: 0 20px 18px 0 }
.legal-page li { margin-bottom: 7px }
.legal-page a { color: var(--accent); text-decoration: underline }
.legal-page strong, .legal-page b { color: var(--ink) }
.legal-page table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 15px }
.legal-page th, .legal-page td { border: 1px solid var(--line); padding: 10px 12px; text-align: right }
.legal-page th { background: var(--bg-alt); font-weight: 700; color: var(--ink) }

/* =====================================================================
   5 · טופס יצירת קשר
   ---------------------------------------------------------------------
   השדות זהים לטופס של האתר החי, כולל ה-id-ים, כדי שהמטפל הקיים
   ב-main.js יעבוד עליו בלי שינוי. העיצוב הוא של המצגת.
   ===================================================================== */
.cf-wrap {
  max-width: 720px;
  margin: 34px auto 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.cf-wide { grid-column: 1 / -1 }

.cf-field { display: flex; flex-direction: column; gap: 7px }
.cf-field label { font-size: 14px; font-weight: 700; color: var(--ink) }

.cf-field input,
.cf-field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--txt);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cf-field textarea { resize: vertical; min-height: 108px }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cf-field ::placeholder { color: var(--faint) }

/* מלכודת הבוטים. מוסתרת מהעין ומקוראי מסך, אבל קיימת בטופס. */
.cf-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

.cf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer }
.cf-check input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px }
.cf-check span { font-size: 14px; line-height: 1.55; color: var(--muted) }

.cf-submit {
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 30px;
  padding: 15px 28px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent) }
.cf-submit:disabled { opacity: .6; cursor: default; transform: none }

.form-result:empty { display: none }
.form-result.cf-blocked {
  margin-top: 16px; padding: 13px 16px;
  background: var(--bg-alt); border: 1px dashed var(--line);
  border-radius: var(--r-sm); font-size: 14.5px; color: var(--muted);
}

/* רגע האישור. הצלחה היא מצב ולא רצועת הודעה, כמו באתר החי. */
.form-result.cf-ok {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 200px; text-align: center;
}
.form-result.cf-ok b {
  font-family: 'Secular One', sans-serif; font-weight: 400;
  font-size: 24px; color: var(--ink);
}
.form-result.cf-ok span { font-size: 15px; color: var(--muted) }

.cf-note {
  margin-top: 16px; font-size: 13px; color: var(--faint);
  display: flex; align-items: center; gap: 7px;
}
.cf-note i { color: var(--amber) }

@media (max-width: 620px) {
  .cf-wrap { padding: 22px }
  .cf-form { grid-template-columns: 1fr }
}

/* =====================================================================
   6 · עמוד צור קשר
   ---------------------------------------------------------------------
   עמוד עצמאי ולא סקשן בגלילה. הטופס בצד אחד, ודרכים ישירות בצד השני
   למי שלא רוצה למלא טופס.
   ===================================================================== */
.contact-page { padding: 148px 0 96px; background: var(--bg-alt) }

.cp-head { max-width: 760px; margin: 0 auto 38px; text-align: center }
.cp-head .eyebrow { justify-content: center }
.cp-head h1 {
  font-family: 'Secular One', sans-serif; font-weight: 400;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.1;
  margin: 10px 0 12px; color: var(--ink);
}
.cp-head .lead { font-size: 18px; color: var(--muted) }

/* הטופס לבדו, ממורכז. cf-wrap כבר מביא max-width ו-margin auto. */
#contactMount .cf-wrap { margin-inline: auto }

@media (max-width: 860px) {
  .contact-page { padding: 120px 0 72px }
}

/* =====================================================================
   7 · שלט הבמה
   ---------------------------------------------------------------------
   רצועה שמסמנת שזו גרסת עבודה ולא האתר. יורדת כשמפסיקים לבדוק.
   ===================================================================== */
/* הרצועה צפה, ולכן היא מכסה את תחתית כל מסך. הריפוד הזה מפנה לה
   מקום משלה, אחרת היא חותכת שורה בכל סקשן שנגמר בתחתית החלון. */
body { padding-bottom: 34px }

.staging-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 400;
  background: var(--pop);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  padding: 7px 14px;
}