/* ==========================================================================
   ilana-ai.agency - המעטפת המשותפת לכל עמודי האתר
   מוגדרת פעם אחת. כל עמוד טוען את הקובץ הזה ומוסיף רק את מה שייחודי לו.
   מקור הערכים: ~/.adi/design-profile.md + pages/protocol-fonts-and-padding.md
   אין כאן צבע שלא קיים בפרופיל העיצובי.
   ========================================================================== */

:root {
  /* --- מבנה --- */
  --navy:      #0A1F4D;   /* נייבי הלוגו. הצבע של המבנה - טקסט, מסגרות, צללים */
  --navy-soft: #24335c;   /* הנייבי של ה-CRM - לצללים ולמעברים */

  /* הרקע הכהה - ארבעת הגוונים של הגרסה הכהה בפודקאסט (בקשת אילנה, 8.9.2026).
     המקור: master-library/scripts/podcast_video.py, THEMES["dark"]["grad"].
     הם לא כחול אחד אלא גרדיאנט, וזה מה שנותן לו את העומק שנייבי שטוח לא נותן. */
  --navy-0:    #05112A;   /* העמוק ביותר */
  --navy-1:    #0C2450;
  --navy-2:    #14386F;   /* הכחול הבהיר, ליבת הגרדיאנט */
  --navy-3:    #081A3A;
  --navy-bg:   #0C2450;   /* המשטח הכהה כשצריך צבע אחיד - פס עליון, פוטר */
  --navy-grad: linear-gradient(163deg, var(--navy-0) 0%, var(--navy-1) 30%, var(--navy-2) 62%, var(--navy-3) 100%);

  /* --- יוקרה. מינון קטן בלבד --- */
  --gold:      #C89A3C;
  --gold-lift: #D9B65A;

  /* --- טכנולוגיה. רק בהקשר AI --- */
  --cyan:      #1FC0F0;

  /* --- משמעות במסך פיננסי --- */
  --green:     #2F7A5F;   /* מותר / פנוי */
  --green-dk:  #6EE7A0;   /* אותו תפקיד, על רקע כהה */
  --red:       #B4472F;   /* אסור לגעת / חסום */
  --red-dk:    #E88A72;

  /* --- טקסט ורקעים --- */
  --cream:     #F4EFE2;   /* טקסט על כהה. לעולם לא לבן טהור */
  --band:      #F7F4EC;   /* פס בהיר */
  --ink:       #1f2328;
  --ink-warm:  #4A4335;   /* גוף הטקסט על הקרם. חם, לא כחלחל - מהמוקאפ שאושר */
  --muted:     #6b7280;
  --line:      #e7e9ee;
  --bg:        #ffffff;

  /* --- מידות --- */
  --maxw:      760px;    /* רוחב קריאה. התקן */
  --maxw-wide: 1120px;   /* מעטפת: פס עליון, פוטר, רשתות כרטיסים */
  --pad:       clamp(20px, 5.5vw, 48px);
  --radius:    clamp(20px, 4vw, 28px);
  --radius-sm: 14px;

  /* --- צל. תמיד בגוון הנייבי, לעולם לא אפור --- */
  --shadow:    0 2px 6px rgba(10,31,77,.08), 0 18px 46px rgba(10,31,77,.10);
}

* { box-sizing: border-box; }
/* hidden מנצח על כל display שרכיב מגדיר לעצמו */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--bg);
  color: var(--ink);
  font-family: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

/* מספרים וטלפונים בתוך טקסט RTL - שלא יתהפכו */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }


/* ==========================================================================
   1. פס עליון
   מלכודת RTL: justify-content: flex-start דוחף ימינה.
   התפריט מיושר לשמאל, ולכן flex-end.
   בלי לוגו בפס. בלי טלפון בפס - הוא חי בעמוד "צור קשר".
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12,36,80,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(200,154,60,.22);
}

.head-in {
  position: relative;
  /* ⛔ בלי max-width. הפס נפרש על כל רוחב המסך,
     כדי שהתפריט יגיע עד קצה המסך ממש (הוראת אילנה, 8.9.2026).
     מיכל ממורכז עצר אותו באמצע הדרך. */
  padding-block: 10px;
  padding-right: var(--pad);  /* צד ההתחלה ב-RTL - נושם */
  padding-left: 18px;         /* הצד השמאלי הפיזי - כמעט נוגע */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* בשמאל. ב-RTL זהו flex-end */
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* גם כאן */
  gap: clamp(10px, 1.8vw, 26px);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: clamp(13px, 1.25vw, 15px);
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 7px 2px;
  white-space: nowrap;         /* השמות המלאים לא נשברים באמצע */
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-nav a:hover { color: var(--gold-lift); }
.site-nav a[aria-current="page"] {
  color: var(--gold-lift);
  border-bottom-color: var(--gold);
}

/* כפתור ההמבורגר - מופיע רק במובייל */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid rgba(244,239,226,.28);
  border-radius: 10px;
  color: var(--cream);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 13px;
  cursor: pointer;
}
.nav-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle .bars i {
  display: block; width: 17px; height: 2px;
  background: var(--cream); border-radius: 2px;
}


/* ==========================================================================
   2. פריסת עמוד - סקשנים ורוחב קריאה
   ========================================================================== */

/* ריווח הסקשן - מרוסן. הטקסט מתחיל קרוב לראש הסקשן (הוראת אילנה, 8.9) */
.sec { padding: clamp(32px, 5vw, 58px) var(--pad); }
.sec-tight { padding-block: clamp(24px, 3.4vw, 40px); }

.wrap { max-width: var(--maxw); margin-inline: auto; }
.wrap-wide { max-width: var(--maxw-wide); margin-inline: auto; }

.sec-band { background: var(--band); }
.sec-dark { background: var(--navy-1); background-image: var(--navy-grad); color: var(--cream); }
.sec-dark p { color: rgba(244,239,226,.86); }

h1, h2, h3 { letter-spacing: -.015em; margin: 0 0 12px; }
h1 { font-size: clamp(27px, 5.6vw, 46px); font-weight: 800; line-height: 1.32; }
h2 { font-size: clamp(21px, 3.6vw, 31px); font-weight: 700; line-height: 1.3; }
h3 { font-size: clamp(16.5px, 2.7vw, 19px); font-weight: 700; }
p  { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.lead   { font-size: clamp(16.5px, 2.1vw, 19px); color: var(--ink-warm); line-height: 1.7; }
.sec-dark .lead { color: rgba(244,239,226,.72); }
.sec-band p, .bg-light p { color: var(--ink-warm); }

/* השורה הראשונה בהירו של הפודקאסט גדולה מהשנייה (הוראת אילנה):
   היא המסר, והשורה שמתחתיה היא ההמשך שלו. em ולא px, כדי שתמשיך
   לגדול ולהתכווץ יחד עם הליד במסכים שונים. */
.hero .lead .gold-text { font-size: 1.16em; line-height: 1.32; }   /* 22px במסך רגיל */

/* והשורה הזו נצמדת לכותרת "הפודקאסט" (הוראת אילנה).
   ה-:has מכוון רק להירו שהזהב שלו יושב בליד - כלומר הפודקאסט;
   בדשבורד הזהב יושב בתוך ה-h1 עצמו, ושם המרווח לא זז. */
.hero h1:has(+ .lead .gold-text) { margin-bottom: 7px; }

/* ובהירו של הפודקאסט הכותרת גם יושבת קרוב יותר לתפריט (הוראת אילנה).
   אותו :has - כדי שהדשבורד והבית לא יזוזו. */
.hero:has(h1 + .lead .gold-text) { padding-top: clamp(26px, 3.4vw, 46px); }

/* הליד של ההירו צר וממורכז - מהמוקאפ */
.hero .lead { max-width: 620px; margin-inline: auto; }
.strong { font-weight: 700; color: var(--navy); }
.sec-dark .strong { color: var(--cream); }

/* טקסט זהב מגורדן - הביצוע שאילנה אישרה לשורת המפתח בכותרת.
   ⛔ על רקע כהה לא שמים מרקר: הזהב השקוף מעל הנייבי יוצא ירקרק ובוצי.
   על כהה הזהב הוא האות עצמה; על בהיר הוא הפס מאחוריה. */
.gold-text {
  background: linear-gradient(118deg, #F3E0AA 0%, #D9B65A 60%, #C89A3C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* מרקר זהב מאחורי מילות המפתח.
   הביצוע של "זהב על המילים החשובות בלבד" - פס נמוך שמסמן,
   לא רקע שממלא את כל גובה השורה. מילה או שתיים בכותרת, לא משפט. */
.mk {
  background: linear-gradient(transparent 58%, rgba(217,182,90,.45) 58%);
  color: inherit;
}
/* על רקע כהה: פס זהב עבה מתחת לאותיות, לא מרקר מעליהן.
   שתי הגרסאות שנפסלו לפני כן מלמדות מה לא לעשות כאן:
   פס שקוף מתערבב עם הנייבי ויוצא בוצי, ופס אטום מאחורי כל השורה
   מחייב להפוך את האות לכהה.

   הפתרון: הפס יושב מתחת לקו-הבסיס של האותיות. הוא אטום ועבה,
   האותיות נשארות קרם, ושניהם לא מתחרים על אותו שטח. */
.sec-dark .mk, .hero .mk {
  background: linear-gradient(to bottom,
    transparent 82%,
    #D9B65A 82%,
    #C89A3C 95%,
    transparent 95%);
  /* 82% הוא מתחת לקצה הנמוך ביותר של האותיות - לא קו-הבסיס,
     אלא תחתית הזנבות של ך ן ף ץ ק. כך הפס לא נוגע באף אות. */
  color: inherit;
  padding: 0 .12em;
  border-radius: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* קו זהב מתחת למילים. בניגוד למרקר, הוא עובד גם על כהה:
   קו דק לא מתערבב עם הרקע כמו שפס שקוף מתערבב. */
.uline {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #E2C77E;
  background: transparent;                      /* ⛔ בלי מילוי. מסגרת בלבד */
  border: 1px solid rgba(200,154,60,.45);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
}
.sec-band .kicker, .bg-light .kicker { color: #8A6A1F; }


/* ==========================================================================
   3. ההירו הכהה - מתכון הפרופיל העיצובי, ארבע שכבות. אפס צבעים חדשים.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-1);
  background-image: var(--navy-grad);
  color: var(--cream);
  overflow: clip;
  /* רווח עליון מרוסן - הכותרת מתחילה קרוב לפס, כמו במוקאפ (הוראת אילנה, 8.9) */
  padding: clamp(34px, 4.4vw, 62px) var(--pad) clamp(38px, 5.4vw, 66px);
  text-align: center;   /* מהמוקאפ שאושר. ⛔ לא ליישר לימין */
}
/* הרקע הכהה.
   ⛔ בלי העיגול המואר במרכז (הוראת אילנה, 8.9.2026) - העומק
   בא מהגרדיאנט של הרקע עצמו, ולא מדקורציה שמונחת מעליו.
   נשארה רק נגיעת התכלת בפינה, מהמתכון המקורי. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(46% 40% at 10% 106%, rgba(31,192,240,.08), transparent 74%);
}

/* הרשת העדינה, מתפוגגת בשוליים */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to left, rgba(244,239,226,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,226,.026) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.hero .wrap { position: relative; }
.hero p { color: rgba(244,239,226,.84); }


/* ==========================================================================
   4. כפתורים - שני רכיבים חוזרים, מוגדרים פעם אחת
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 15px 34px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}

/* ראשי: גרדיאנט זהב, טקסט כהה, זוהר. שכבה 4 של המתכון */
/* נקודת האמצע של הגרדיאנט היא מה שזז במעבר העכבר.
   ⛔ ולא `background-size` גדול עם `background-position`: שם מצב-המנוחה
   מראה רק את הקצה הבהיר של הגרדיאנט, והכפתור יוצא חיוור. ככה מצב
   המנוחה נשאר בדיוק הגרדיאנט המקורי, ורק ההובר מזיז אותו. */
@property --gold-mid {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 60%;
}

.btn-gold {
  position: relative;
  overflow: hidden;            /* חותך את הברק לצורת הגלולה */
  color: #3D2C08;
  box-shadow: 0 0 34px rgba(217,182,90,.38);
  --gold-mid: 60%;
  background: linear-gradient(118deg, #F3E0AA 0%, #D9B65A var(--gold-mid), #C89A3C 100%);
  transition: --gold-mid .6s ease, box-shadow .3s ease, transform .25s ease;
}

/* הברק עצמו - פס אור שיושב מחוץ לכפתור ומחכה */
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255,251,235,.9) 50%, transparent 62%);
  transform: translateX(-135%);
}

/* במעבר עכבר שני הדברים קורים יחד: הזהב זורם לרוחב, והברק חולף פעם אחת. */
.btn-gold:hover,
.btn-gold:focus-visible {
  --gold-mid: 22%;
  box-shadow: 0 0 46px rgba(217,182,90,.55);
  transform: translateY(-1px);
}
.btn-gold:hover::after,
.btn-gold:focus-visible::after { animation: btn-shine .8s ease forwards; }

@keyframes btn-shine { to { transform: translateX(135%); } }

.btn-gold:active { transform: translateY(0); }

/* מושבת - אבל בצבע מלא ועם אותו אפקט (הוראת אילנה). הסינון האפור
   והעמעום הפכו אותו לבז' עכור; מה שמסמן שהוא לא פעיל זה הסמן, ⛔ לא הצבע. */
.btn-gold:disabled { cursor: default; }

/* משני: קו בלבד. לא מתחרה בראשי */
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244,239,226,.34);
  font-weight: 500;
  padding: 12px 26px;
  font-size: clamp(14px, 1.6vw, 15.5px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lift); }
.sec-band .btn-ghost, .bg-light .btn-ghost { color: var(--navy); border-color: rgba(10,31,77,.24); }

/* השורה שאומרת את האמת לפני הלחיצה. חוק-על: אף פעם לא באוויר */
.btn-truth {
  display: block;
  margin-top: 11px;
  font-size: 13.5px;
  color: rgba(244,239,226,.62);
}
.sec-band .btn-truth, .bg-light .btn-truth { color: var(--muted); }

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 20px; margin-top: 26px;
}
.hero .cta-row { justify-content: center; }


/* ==========================================================================
   5. כרטיסים
   ========================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3.4vw, 30px);
  box-shadow: var(--shadow);
}
.sec-dark .card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}

/* המסגרת המוזהבת - לחשובים בלבד. יוקרה היא ריסון */
.sec-dark .card-gold {
  /* קו זהב פנימי, לא מסגרת-גרדיאנט. מסגרת-גרדיאנט דורשת מילוי אטום,
     ומילוי אטום על גבי גרדיאנט הרקע נראה כמו טלאי. */
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(200,154,60,.60);
}
.bg-light .card-gold, .sec-band .card-gold {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--gold-lift), rgba(200,154,60,.35) 52%, var(--gold)) border-box;
}

.grid { display: grid; gap: clamp(14px, 2.2vw, 22px); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* כרטיס מודגש - הערכים מהמוקאפ שאילנה אישרה.
   כרטיס לבן עם פינות נדיבות, קו זהב בצד ההתחלה, וצל רך בגוון הנייבי.
   ⛔ לא קופסה שטוחה בגוון קרם - זה מה שנפסל. */
.note {
  background: #fff;
  border-radius: 18px;
  border-inline-start: 3px solid var(--gold);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px);
  box-shadow: 0 10px 24px -16px rgba(7,18,40,.40);
  font-size: clamp(15.5px, 1.9vw, 17px);
  line-height: 1.75;
  color: var(--ink-warm);
}
.note p { margin: 0 0 10px; }
.note p:last-child { margin-bottom: 0; }
.note b, .note strong { color: var(--navy); }
.sec-dark .note {
  background: rgba(255,255,255,.06);
  color: rgba(244,239,226,.82);
  box-shadow: none;
}
.sec-dark .note b, .sec-dark .note strong { color: var(--cream); }

/* הסתייגות שקטה - שורה, לא קופסה. שתי קופסאות בסקשן אחד מתחרות. */
.caveat {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}


/* ==========================================================================
   6. מסגרת לצילום מסך
   ========================================================================== */

.shot {
  margin: 0;
  border-radius: var(--radius);
  overflow: clip;
  border: 1px solid rgba(244,239,226,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.bg-light .shot, .sec-band .shot {
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.shot img { display: block; width: 100%; }
.shot figcaption {
  padding: 11px 18px;
  font-size: 13px;
  color: rgba(244,239,226,.6);
  border-top: 1px solid rgba(244,239,226,.10);
}
.bg-light .shot figcaption, .sec-band .shot figcaption {
  color: var(--muted); border-top-color: var(--line);
}

/* פלייסהולדר עד שיגיעו הצילומים האמיתיים */
.shot-todo {
  display: grid; place-items: center;
  min-height: clamp(200px, 34vw, 340px);
  padding: 26px;
  text-align: center;
  border: 1.5px dashed rgba(200,154,60,.45);
  border-radius: var(--radius);
  background: rgba(200,154,60,.05);
  color: rgba(244,239,226,.55);
  font-size: 14px;
  line-height: 1.7;
}
.bg-light .shot-todo, .sec-band .shot-todo { color: var(--muted); background: rgba(200,154,60,.06); }


/* ==========================================================================
   7. טופס
   ========================================================================== */

/* כשקופצים לטופס, שלא יישב מתחת לפס העליון הנדבק */
#form { scroll-margin-top: 80px; }
/* בעמוד הפרק הכותרת הנדבקת גבוהה יותר - תפריט ועוד פס */
.ep-page #form { scroll-margin-top: 124px; }

/* נסתרת מהעין, נשמעת לקורא-מסך.
   placeholder אינו תווית: הוא נעלם ברגע שמתחילים להקליד,
   ואז מי שאינו רואה לא יודע מה השדה מבקש. לכן התווית נשארת. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field input::placeholder { color: #9aa3b0; opacity: 1; }

.form { display: grid; gap: 14px; }
.field label {
  display: block;
  font-size: 14px; font-weight: 500;
  margin-bottom: 6px; color: #414b59;
}
.field input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;                 /* 16 ומעלה - מונע זום אוטומטי באייפון */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,154,60,.18);
}
.consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.consent input { margin-top: 3px; flex: none; }


/* ==========================================================================
   8. כפתור וואטסאפ צף
   מוסתר בכוונה: מספר הוואטסאפ העסקי עדיין לא פעיל (personal-links.md, 8.9.2026).
   קישור wa.me למספר לא פעיל מציג לגולש שגיאה.
   להפעלה: להסיר את hidden מהאלמנט ב-HTML ולמלא את המספר.
   ========================================================================== */

.wa-float {
  position: fixed;
  bottom: clamp(16px, 3vw, 26px);
  left:   clamp(16px, 3vw, 26px);   /* פינה שמאלית תחתונה */
  z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 22px rgba(10,31,77,.28);
  transition: transform .16s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }


/* ==========================================================================
   8b. עמוד הפודקאסט - כרטיס פרק ופס נדבק
   ========================================================================== */

/* צרה מהמעטפת הרחבה - כרטיס רחב מדי מותח את העין לרוחב */
.eps { display: grid; gap: clamp(16px, 2.2vw, 22px); max-width: 1000px; margin-inline: auto; }

/* הטקסט ראשון ב-DOM ולכן הוא בימין, והתמונה בשמאל (הוראת אילנה, 8.9). */
.ep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 10px 28px -18px rgba(7,18,40,.45);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .2s ease;
}
a.ep:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -18px rgba(7,18,40,.55); }

/* התמונה הממוזערת - אותה תמונה של היוטיוב.
   עד שהיא תגיע, המשבצת מחזיקה את מספר הפרק - ולא נראית שבורה. */
.ep-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: clip;
  background: var(--navy-1);
  background-image: var(--navy-grad);
  display: grid; place-items: center;
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-thumb .ep-num {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  color: rgba(232,206,140,.55);
  letter-spacing: .04em;
}

.ep-body { min-width: 0; }
.ep-kicker {
  display: block;
  font-size: clamp(19px, 2.3vw, 23px); font-weight: 800; letter-spacing: .02em;
  color: var(--gold); margin-bottom: 10px;
}
.ep h3 {
  font-size: clamp(19px, 2.5vw, 24px);
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.45;
}
/* טקסט בכחול עמוק, לא באפור (הוראת אילנה).
   והתיאור מפוצל לפסקאות, כדי שהשורות לא יימתחו לבלוק אחד. */
.ep p {
  font-size: clamp(15.5px, 1.6vw, 17px);
  color: #16305E;
  max-width: 40ch;
  line-height: 1.75;
  margin: 0 0 12px;
}
.ep p:last-of-type { margin-bottom: 0; }
.ep-soon {
  display: inline-block; margin-top: 14px;
  font-size: 14px; font-weight: 700;
  color: #8A6A1F; background: rgba(200,154,60,.12);
  border-radius: 999px; padding: 6px 16px;
}

/* הכרטיס שלם הוא קישור, אבל בלי צורת כפתור אף אחד לא יודע שאפשר ללחוץ.
   מסגרת זהב וטקסט בברונזה (הוראת אילנה - הנייבי היה כבד מדי לכרטיס).
   ⛔ המילוי נשאר נייבי ולא זהב: מילוי זהב שמור לכפתור ההרשמה,
      ושני כפתורי-זהב באותו עמוד מבטלים זה את זה. */
.ep-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;          /* ⛔ לא לשנות - הוראת אילנה */
  font-weight: 700;
  color: #8A6A1F;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 9px 20px;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .16s ease;
}
.ep-go i {
  font-style: normal;
  color: var(--gold);
  transition: transform .18s ease, color .2s ease;
}

/* המעבר: הכפתור מתרומם, נופל לו צל מתחת, מתמלא נייבי,
   האות מתהפכת לקרם והחץ מחליק שמאלה - ב-RTL זו התנועה קדימה. */
a.ep:hover .ep-go,
a.ep:focus-visible .ep-go {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--gold-lift);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -12px rgba(10,31,77,.75),
              0 2px 6px -2px rgba(200,154,60,.55);
}
a.ep:hover .ep-go i,
a.ep:focus-visible .ep-go i {
  color: var(--gold-lift);
  transform: translateX(-4px);
}

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

   שניהם יושבים בתוך עוטף אחד שהוא הנדבק, ולא כשני אלמנטים נדבקים
   זה מעל זה. שתי שכבות נפרדות היו מחייבות לדעת את גובה התפריט מראש,
   והוא משתנה בין דסקטופ לנייד. עוטף אחד פותר את זה בלי מדידה. */
.stick-top {
  position: sticky;
  top: 0;
  z-index: 60;
}
.stick-top .site-head { position: static; }

.snap-top {
  background: rgba(12,36,80,.95);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(200,154,60,.28);
  padding: 6px var(--pad);
}
.snap-top-in {
  max-width: var(--maxw-wide); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 14px;
}
.snap-top span {
  color: rgba(244,239,226,.86);
  font-size: clamp(13px, 1.5vw, 14.5px);
  font-weight: 500;
}
/* כפתור קטן במיוחד - הפס אמור להיות דק */
.snap-top .btn {
  padding: 5px 18px;
  font-size: 13.5px;
  box-shadow: 0 0 18px rgba(217,182,90,.28);
}
@media (max-width: 480px) {
  .snap-top .btn { width: auto; }
}

/* פס נדבק - נשאר זמין לכל אורך העמוד.
   ⚠️ כשכפתור הוואטסאפ יופעל - לבדוק שהשניים לא מתנגשים בפינה. */
.snap {
  position: fixed;
  inset-inline: 0; bottom: 0; z-index: 65;
  background: rgba(12,36,80,.95);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid rgba(200,154,60,.30);
  padding: 11px var(--pad);
}
/* גובה הפס נשמר כמשתנה, כדי שהעמוד יפנה לו מקום למטה
   והפוטר לא יישב מתחתיו. הערך נמדד ב-JS, כי הפס מתקפל במובייל. */
body:has(.snap),
body.has-snap { padding-bottom: var(--snap-h, 72px); }   /* המחלקה היא רשת ביטחון לדפדפן בלי :has */
.snap-in {
  max-width: var(--maxw-wide); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px 18px;
}
.snap span { color: var(--cream); font-size: clamp(14px, 1.8vw, 16px); font-weight: 500; }
.snap .btn { padding: 10px 26px; font-size: 15px; }

@media (max-width: 768px) {
  .ep { grid-template-columns: 1fr; }
  .ep-thumb { order: -1; }   /* במובייל התמונה ראשונה */
}

/* ==========================================================================
   8c. ניצוצות עולים - בצד ימין בלבד

   הדפוס הקנוני מ-`pages/landing-pages/animations.md`, עם שני הבאגים
   שכבר שולם עליהם מחיר:

   ⛔ **לא לייצר אותם ב-JS.** בזמן שה-JS רץ, התווים נראים תקועים בראש הדף
   בלי אנימציה. הם יושבים ב-HTML מההתחלה, וה-CSS מניע אותם.

   ⛔ **ולא `rotate()` בתוך ה-keyframe.** סיבוב מרחיב את תיבת-החסימה של
   האלמנט, ובנייד זה מדליק זיגוג אופקי. רק translateY ו-scale.
   ========================================================================== */

.sparkles-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 45;              /* מעל הכרטיסים הלבנים, מתחת לפס העליון ולפס הנדבק */
}

.spk {
  position: absolute;
  top: 100vh;               /* מתחילים מתחת למסך ועולים */
  opacity: 0;
  /* גוון עמוק, לא בהיר - השכבה עוברת גם מעל הפס הקרם,
     ושם זהב בהיר נעלם. הצל נשאר חם, כדי שעל הנייבי הם עדיין זוהרים. */
  color: var(--gold);
  text-shadow: 0 0 10px rgba(217,182,90,.55);
  animation: spk-rise 15s linear infinite;
  will-change: transform, opacity;
  user-select: none;
}

/* עיגול זהב במקום התו ✨.
   התו הזה הוא אמוג'י צבעוני במערכת ההפעלה - הוא מתעלם מה-color
   ובא בכתום שלו. עיגול מצוייר ב-CSS נשמע לפלטה, ונראה אותו דבר בכל מכשיר. */
.spk-dot {
  display: block;
  width: .28em; height: .28em;   /* נקודת אור, לא כדור */
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6E7B4, var(--gold-lift) 46%, var(--gold) 100%);
  box-shadow: 0 0 6px rgba(217,182,90,.6);
}

/* כולם מתקבצים בטווח הימני של המסך (הוראת אילנה).
   ה-delay השלילי הוא מה שמונע מסך ריק ברגע הטעינה:
   כל ניצוץ נכנס כבר באמצע המסלול שלו.

   ⛔ ומי שמאט את המחזור חייב להוסיף ניצוצות באותה נשימה: הניצוץ מגיע
   לגודל המלא רק באמצע המסלול, ולכן מחזור איטי פירושו פחות רגעי-שיא
   בשנייה - והשכבה נראית כאילו נעלמה. 15 שניות דורשות 14 ניצוצות. */
.spk.s1  { right:  2%; font-size: 18px; animation-delay:   0s;    }
.spk.s2  { right:  7%; font-size: 13px; animation-delay:  -5.4s;  }
.spk.s3  { right: 12%; font-size: 21px; animation-delay: -10.7s;  }
.spk.s4  { right:  4%; font-size: 15px; animation-delay:  -2.1s;  }
.spk.s5  { right: 15%; font-size: 19px; animation-delay:  -7.5s;  }
.spk.s6  { right:  9%; font-size: 14px; animation-delay: -12.9s;  }
.spk.s7  { right:  1%; font-size: 22px; animation-delay:  -3.2s;  }
.spk.s8  { right: 13%; font-size: 16px; animation-delay:  -8.6s;  }
.spk.s9  { right:  6%; font-size: 20px; animation-delay: -14.0s;  }
.spk.s10 { right: 17%; font-size: 15px; animation-delay:  -1.1s;  }
.spk.s11 { right:  3%; font-size: 17px; animation-delay:  -6.4s;  }
.spk.s12 { right: 10%; font-size: 23px; animation-delay: -11.8s;  }
.spk.s13 { right: 19%; font-size: 14px; animation-delay:  -4.3s;  }
.spk.s14 { right:  8%; font-size: 19px; animation-delay:  -9.6s;  }

@keyframes spk-rise {
  0%   { transform: translateY(0)     scale(0);   opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateY(-60vh) scale(1.1); opacity: 1; }
  92%  { opacity: .7; }
  100% { transform: translateY(-120vh) scale(.5); opacity: 0; }
}

/* בנייד מצמצמים לחמישה - תקציב האנימציות של המעבד שם קטן יותר,
   והטווח הימני צר יותר במסך צר. */
@media (max-width: 768px) {
  .spk.s6,  .spk.s7,  .spk.s8,  .spk.s9,
  .spk.s10, .spk.s11, .spk.s12, .spk.s13, .spk.s14 { display: none; }
  .spk { font-size: 14px !important; }
}

/* ==========================================================================
   8d. שכבת אבק-הכוכבים - עמודה צרה בקצה הימני

   הדפוס נלקח מלוח-הכספים של אילנה (`ilana-private/public/money-board.html`,
   השכבה `.sparks.r`) - לפי בקשתה.

   היא עושה משהו אחר מהניצוצות שעולים: נקודות זעירות שמרצדות
   במקום וננדות מעט, ברוחב של 170 פיקסל בלבד. שתי השכבות יחד
   נותנות עומק - תנועה גדולה מאחור, וריצוד קרוב מלפנים.

   ⛔ וכמו במקור: מופיעה רק מ-1200px ומעלה. במסך צר העמודה הזאת
   יושבת על התוכן, והצפיפות שלה מיותרת למעבד של טלפון.
   ========================================================================== */

.dust { display: none; }

@media (min-width: 1200px) {
  .dust {
    display: block;
    position: fixed;
    inset-block: 0;
    width: 170px;
    pointer-events: none;
    overflow: hidden;
    z-index: 44;              /* מתחת לניצוצות העולים, והרבה מתחת לפס העליון */
  }
  /* שני הצדדים, בדיוק כמו `.sparks.l` ו-`.sparks.r` בלוח */
  .dust.r { right: 0; }
  .dust.l { left: 0; }

  .dust i {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    /* השכבה הזאת צפה מעל כל העמוד ועוברת גם מעל נייבי וגם מעל קרם.
       בלוח הרקע כהה תמיד, ולכן הספיק זהב בהיר. כאן זהב בהיר נעלם
       על הקרם - ולכן הגוון עמוק יותר, ויש לו טבעת ברונזה דקה
       שנותנת לו קצה על רקע בהיר, ולא נראית על הכהה. */
    background: var(--gold);
    opacity: 0;
    box-shadow: 0 0 5px 1px rgba(200,154,60,.70), 0 0 0 .5px rgba(122,92,26,.45);
    animation: dust-twinkle linear infinite;
  }
  /* נגיעת תכלת במינון קטן, כמו בלוח - גם היא הועמקה */
  .dust i:nth-of-type(3n) {
    background: #0F8FB8;
    box-shadow: 0 0 5px 1px rgba(31,192,240,.55), 0 0 0 .5px rgba(11,80,104,.40);
  }
  .dust i:nth-of-type(5n) { width: 2px; height: 2px; }
}

/* ⛔ רק translateY ו-scale. אין כאן rotate, ולכן תיבת-החסימה לא מתרחבת. */
@keyframes dust-twinkle {
  0%   { opacity: 0;   transform: translateY(14px)  scale(.6); }
  25%  { opacity: .75; transform: translateY(0)     scale(1);  }
  60%  { opacity: .35; transform: translateY(-18px) scale(.9); }
  100% { opacity: 0;   transform: translateY(-40px) scale(.5); }
}

/* ההשהיות שליליות, בשונה מהמקור. בלוח הן חיוביות, ולכן העמודה
   מתמלאת בהדרגה על פני שבע שניות. השהיה שלילית מתחילה את כל נקודה
   באמצע המחזור שלה, כך שהשכבה חיה מהפריים הראשון (`animations.md`). */
.dust i:nth-of-type(1)  { left:  18px; top: 12%; animation-delay: -0s;   animation-duration: 5.1s; }
.dust i:nth-of-type(2)  { left:  96px; top: 26%; animation-delay: -1.29s; animation-duration: 6.12s;   }
.dust i:nth-of-type(3)  { left:  52px; top: 41%; animation-delay: -2.31s; animation-duration: 5.44s;   }
.dust i:nth-of-type(4)  { left: 128px; top: 55%; animation-delay: -0.54s;  animation-duration: 6.8s;  }
.dust i:nth-of-type(5)  { left:  30px; top: 63%; animation-delay: -3.47s; animation-duration: 4.76s;   }
.dust i:nth-of-type(6)  { left:  78px; top: 74%; animation-delay: -1.77s; animation-duration: 7.48s;  }
.dust i:nth-of-type(7)  { left: 112px; top: 88%; animation-delay: -4.22s; animation-duration: 5.78s; }
.dust i:nth-of-type(8)  { left:  42px; top: 15%; animation-delay: -2.92s; animation-duration: 6.46s; }
.dust i:nth-of-type(9)  { left: 140px; top: 34%; animation-delay: -4.83s; animation-duration: 5.3s; }
.dust i:nth-of-type(10) { left:  64px; top: 58%; animation-delay: -0.82s; animation-duration: 8.16s;  }
.dust i:nth-of-type(11) { left:  22px; top: 92%; animation-delay: -2.65s; animation-duration: 5.98s; }

/* העמודה השמאלית מקבלת מיקומים ותזמון משלה.
   אחרת שני הצדדים מרצדים באותו רגע בדיוק, וזה נקרא מכני ולא אקראי. */
.dust.l i:nth-of-type(1)  { left:  44px; top:  8%; animation-delay: -1.84s; animation-duration: 5.58s;  }
.dust.l i:nth-of-type(2)  { left: 132px; top: 21%; animation-delay: -4.35s; animation-duration: 7.14s; }
.dust.l i:nth-of-type(3)  { left:  20px; top: 33%; animation-delay: -0.75s; animation-duration: 4.9s;  }
.dust.l i:nth-of-type(4)  { left:  88px; top: 47%; animation-delay: -3.33s; animation-duration: 7.82s; }
.dust.l i:nth-of-type(5)  { left: 150px; top: 56%; animation-delay: -5.64s; animation-duration: 6.26s;  }
.dust.l i:nth-of-type(6)  { left:  36px; top: 69%; animation-delay: -2.18s; animation-duration: 5.3s;  }
.dust.l i:nth-of-type(7)  { left: 104px; top: 81%; animation-delay: -5.17s; animation-duration: 6.8s;   }
.dust.l i:nth-of-type(8)  { left:  68px; top: 95%; animation-delay: -3.67s; animation-duration: 5.85s;  }
.dust.l i:nth-of-type(9)  { left: 122px; top: 62%; animation-delay: -0.41s;  animation-duration: 8.16s;   }
.dust.l i:nth-of-type(10) { left:  26px; top: 17%; animation-delay: -6.19s; animation-duration: 5.17s;  }
.dust.l i:nth-of-type(11) { left:  96px; top: 38%; animation-delay: -1.43s; animation-duration: 6.66s;  }

/* ==========================================================================
   8e. עמוד פרק בודד - הסרטון והתמלול
   ========================================================================== */

/* הסקשן הראשון בעמוד פרק נצמד לפס ההרשמה שמעליו (הוראת אילנה):
   בלי פנדינג עליון, כך שהקישור-חזרה והסרטון עולים למעלה. */
.ep-top { padding-block: 26px clamp(26px, 3.4vw, 44px); }

.ep-back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14.5px;
  color: rgba(244,239,226,.72);
  text-decoration: none;
}
.ep-back::before { content: "→ "; }   /* חץ ימינה - ב-RTL זו החזרה */
.ep-back:hover { color: var(--gold-lift); }

/* מסגרת הסרטון. aspect-ratio שומר את המקום מראש,
   כך שהעמוד לא קופץ כשהאיפריים נטען. */
.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: clip;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(244,239,226,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-todo {
  height: 100%;
  display: grid; place-items: center;
  text-align: center;
  padding: 24px;
  font-size: 14.5px; line-height: 1.7;
  color: rgba(244,239,226,.55);
  border: 1.5px dashed rgba(200,154,60,.45);
  border-radius: var(--radius);
  background: rgba(200,154,60,.05);
}

/* כותרת הפרק היא משפט ארוך, ולא כותרת קצרה - במידת ה-h1 הרגילה
   היא משתלטת על העמוד ונשפכת לשש שורות. */
.ep-page h1 {
  font-size: clamp(19px, 2.5vw, 26px);
  line-height: 1.4;
  font-weight: 700;
  /* הכותרת היא משפט שלם, ובלי מידת-שורה היא נמתחת על כל רוחב
     העמוד ונקראת כמו פסקה. 42 תווים שוברים אותה למשפטי-נשימה. */
  max-width: 42ch;
  text-wrap: pretty;
}

/* גם התיאור מתחת לכותרת מקבל אורך שורה קצר, מאותה סיבה
   שהתמלול קיבל אותו. קצת רחב מהתמלול, כי הגופן גדול יותר. */
.ep-page .lead {
  max-width: 56ch;
  font-size: clamp(15px, 1.7vw, 16.5px);
  line-height: 1.75;
}

/* --- התמלול --- */

.tr-head {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.tr-head h2 { margin: 0; }
.tr-all {
  background: transparent;
  border: 1px solid rgba(10,31,77,.22);
  border-radius: 999px;
  color: var(--navy);
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 7px 18px; cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.tr-all:hover { border-color: var(--gold); color: #8A6A1F; }

/* כל פרקון הוא מגירה שנפתחת.
   כלל הברזל מפרוטוקול הדשבורדים: "כרטיס שהתוכן בו גדל בלי גבול
   נפתח מקופל, והכותרת שלו נשארת גלויה."
   וכך רשימת הפרקונים היא גם תוכן העניינים - שני נכסים במבנה אחד. */
.tr {
  border-bottom: 1px solid var(--line);
}
.tr:first-of-type { border-top: 1px solid var(--line); }
.tr summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 0 15px 28px;
  position: relative;
  font-size: clamp(15.5px, 1.9vw, 17px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.tr summary::-webkit-details-marker { display: none; }
/* המשולש בקצה השמאלי, מסתובב כשנפתח */
.tr summary::after {
  content: "";
  position: absolute; left: 2px; top: 50%;
  width: 8px; height: 8px;
  border-inline-end: 2px solid var(--gold);
  border-block-end: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.tr[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.tr summary:hover { color: #8A6A1F; }

.tr-time {
  display: inline-block;
  min-width: 52px;
  font-weight: 800;
  color: var(--gold);
  direction: ltr;
  unicode-bidi: isolate;
}

.tr-body { padding: 0 0 20px; }
/* הטקסט עצמו קטן מכותרות הפרקונים, והשורה קצרה.
   אורך השורה הוא מה שקובע אם טקסט ארוך נקרא בכלל: על עמודה
   של 760 העין מאבדת את תחילת השורה הבאה. 54 תווים הם טווח הקריאה. */
.tr-body p {
  font-size: clamp(16px, 1.6vw, 16.5px);
  line-height: 1.9;
  color: var(--ink-warm);
  max-width: 54ch;
  margin: 0 0 18px;
}
.tr-body p:last-child { margin-bottom: 0; }
.tr-body b { color: var(--navy); }

/* ==========================================================================
   9. פוטר
   ========================================================================== */

.site-foot {
  background: var(--navy-bg);
  color: rgba(244,239,226,.72);
  padding: clamp(34px, 5vw, 54px) var(--pad);
  font-size: 14px;
  border-top: 1px solid rgba(200,154,60,.22);
}
.foot-in {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
/* הנקודה שמפרידה בין הפריטים */
.foot-in .sep { color: rgba(200,154,60,.55); }
.site-foot a { color: rgba(244,239,226,.78); text-decoration: none; }
.site-foot a:hover { color: var(--gold-lift); text-decoration: underline; }
.foot-note { font-size: 12.5px; color: rgba(244,239,226,.46); }

/* שורת הסתייגות של העמוד - יושבת בפוטר, מתחת לקו.
   כל עמוד-מוצר מביא את שלו, ולכן זה רכיב ולא חלק מהפוטר הקבוע. */
.foot-legal {
  max-width: var(--maxw-wide);
  margin: 0 auto 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,239,226,.10);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(244,239,226,.52);
}


/* ==========================================================================
   10. עמוד ריק - שלד זמני עד שייכתב התוכן
   ========================================================================== */

.soon { text-align: center; padding: clamp(66px, 12vw, 130px) var(--pad); }
.soon h1 { margin-bottom: 14px; }
.soon p { color: var(--muted); font-size: 17px; }


/* ==========================================================================
   11. שלושה breakpoints, לא שניים.
   אייפד פרו 12.9 יושב בדיוק על 1024 - ולכן הוא גבול משלו.
   ========================================================================== */

/* טאבלט */
@media (max-width: 1024px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 13px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* מובייל - הפס מתקפל לתפריט, ושם השמות המלאים עובדים */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%; inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid rgba(200,154,60,.22);
    box-shadow: 0 18px 40px rgba(0,0,0,.34);
    padding: 6px var(--pad) 14px 18px;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    font-size: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(244,239,226,.09);
    white-space: normal;          /* השם המלא, גם אם הוא נשבר לשתי שורות */
  }
  .site-nav a[aria-current="page"] { border-bottom-color: rgba(244,239,226,.09); }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .foot-in { justify-content: flex-start; }
}

@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .btn { width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}