/* ============================================================
   ROI · אתר התדמית של בית הספר של רועי עובדיה
   ------------------------------------------------------------
   אותה שפה של המוצר: שחור #141414, זהב #EDBE2E, Polin.
   הטוקנים הועתקו מ-roi-sales/templates/parts/funnel-css.php כדי
   שדף המכירה והאתר לא ייראו כמו שני מוצרים שונים.

   מה נוסף בסבב העיצוב:
   1. **דהייה** במקום חיתוך. אף סקשן לא נחתך בקו ישר - לא הרקע
      (מסכה אופקית שממיסה את הצילום לקצוות, בדיוק כמו `secbg`
      בדף המכירה) ולא המפריד (קו שיער שדועה לשקוף בשני הצדדים).
   2. **גראדיינטים עדינים** - כל משטח הוא מעבר ולא צבע שטוח, בטווח
      של שתיים-שלוש נקודות בהירות. זהב מופיע כ-6%-34% אלפא, לא כמלא.
   3. **מסגרות דקות** - טבעת 1px בגראדיינט, דרך `mask-composite`,
      במקום `border` אחיד. היא זו שנותנת לכרטיס נוכחות בלי צל.
   4. **מעט תנועה** - דהיית כניסה חד-פעמית והרמה של 3px בריחוף. זהו.

   ⚠️ כל סלקטור כאן הוא מחלקה, או מחלקה + **ילד ישיר**. אין כלל שנבחר
   לפי שם תגית בתוך מיכל - זו טעות שכבר נשרפה בפרויקט הזה שלוש פעמים,
   והיא תופסת אחים שאין להם שום קשר לתפקיד שהתכוונו אליו.
   ⚠️ פריסה בתכונות לוגיות (inline-start/end), כי `inset-inline-start`
   הוא **ימין** בעברית, וכל היפוך ידני נשבר.
   ⚠️ כל `var()` בתוך `background`/`calc` מקבל ערך ברירת מחדל. משתנה
   שלא הוגדר מפיל את **כל** ההצהרה בשקט, בלי שגיאה בקונסולה.
   ============================================================ */

@font-face{font-family:Polin;src:url(fonts/polin-regular.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:Polin;src:url(fonts/polin-medium.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Polin;src:url(fonts/polin-black.woff2) format("woff2");font-weight:700 900;font-display:swap}

:root{
  --rs-bg:#141414;
  --rs-bg-2:#171717;
  --rs-bg-3:#121212;
  --rs-card:#1C1C1C;
  --rs-card-2:#242016;
  --rs-line:#2A2A2A;
  --rs-line-2:#3A3527;
  --rs-gold:#EDBE2E;
  --rs-gold-lit:#F7D264;
  --rs-gold-dim:#D8A716;
  --rs-gold-deep:#8A6B12;
  --rs-ink:#FFFFFF;
  --rs-ink-2:#EDEDED;
  --rs-bone:#EFE9DC;
  /* ⚠️ שני הגוונים האלה הם `--rs-bone` **מעורבב מראש** עם רקע הסקשן.
     קודם הם היו `opacity:.82`/`.88` על בלוק הטקסט, וזה שלוש בעיות
     באחת: מעל צילום השקיפות מראה את התמונה דרך האות; היא מחווירה גם
     את מה שאין סיבה להחוויר; והיא מסתירה את הכשל שהשער מחפש -
     אלמנט שנתקע במצב הכניסה השקוף ולא חזר. */
  --rs-bone-2:#D2CCC1;
  --rs-bone-3:#C4C0B5;
  --rs-muted:#9A9A9A;
  --rs-moss:#5C7A4E;
  --rs-wrap:1120px;
  --rs-pad:22px;
  --rs-r:18px;
  --rs-ease:cubic-bezier(.16,1,.3,1);
  /* ============================================================
     סבב 2 - "יוקרתי יותר". ארבעה טוקנים חדשים, וטבעת שהוחלשה.
     ============================================================ */
  /*
   * מסגרת דקה - הטבעת שכל כרטיס עונד.
   * ⚠️ סבב 1 פתח ב-34% זהב **וסגר** ב-16% זהב, כלומר טבעת זהובה סביב
   * כל הכרטיס. זה מה שנקרא "לא מספיק עדין": מסגרת שרואים אותה כמסגרת
   * הופכת להיות הקישוט במקום הכרטיס. עכשיו הזהב יושב **רק בפינה
   * העליונה** (הראשונה בכיוון הגראדיינט) ב-20%, וכל השאר לבן ב-3%-10%.
   * הפינה הנגדית נגמרת בלבן 2.8% - כלומר כמעט כלום.
   */
  --rs-frame:linear-gradient(158deg,rgba(237,190,46,.20) 0%,rgba(255,255,255,.10) 24%,rgba(255,255,255,.045) 60%,rgba(255,255,255,.028) 100%);
  --rs-frame-lit:linear-gradient(158deg,rgba(237,190,46,.38) 0%,rgba(255,255,255,.17) 26%,rgba(255,255,255,.075) 62%,rgba(255,255,255,.05) 100%);
  /* קו שיער שדועה בשני הקצוות. זה המפריד היחיד באתר. */
  --rs-hair:linear-gradient(90deg,rgba(42,42,42,0) 0%,rgba(58,53,39,.75) 18%,rgba(237,190,46,.22) 50%,rgba(58,53,39,.75) 82%,rgba(42,42,42,0) 100%);
  /*
   * פס דק עם גראדיינט דהוי. שני וריאנטים:
   *   `soft`  - מרכז בהיר שדועה לשקוף בשני הקצוות. מפריד בין סקשנים
   *             שאינם `sec-alt`, ובתוך כרטיס.
   *   `spec`  - הקצה העליון של משטח זכוכית. זה מה שמדמה אור שנופל על
   *             השפה: הפס העליון בהיר, התחתון כהה.
   * ⚠️ שניהם מסתיימים ב-alpha 0 משני הצדדים. קו שחוצה את כל הרוחב
   * בעוצמה אחידה הוא בדיוק החיתוך שכל הסבב הקודם בא למחוק.
   */
  --rs-hair-soft:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.055) 26%,rgba(237,190,46,.13) 50%,rgba(255,255,255,.055) 74%,rgba(255,255,255,0) 100%);
  --rs-hair-spec:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 22%,rgba(247,210,100,.26) 50%,rgba(255,255,255,.10) 78%,rgba(255,255,255,0) 100%);
  /*
   * זכוכית. רקע חצי-שקוף + טשטוש של מה שמאחוריו. זה ההבדל בין כרטיס
   * אטום עם גבול לבין משטח שיש לו עומק: מתחת לכרטיס יושבים גראדיינט
   * הסקשן, שטיפת האור של העמוד, ובסקשן הבוגרים גם צילום - וכולם
   * נראים דרכו, מטושטשים.
   * ⚠️ מוחל **רק בתוך `@supports`**. דפדפן בלי `backdrop-filter` יקבל
   * את הרקע האטום שבהצהרה הרגילה, ולא כרטיס שקוף בלי רקע.
   */
  --rs-glass:rgba(27,27,27,.62);
  --rs-glass-lit:rgba(35,33,27,.74);
  --rs-glass-2:rgba(24,24,24,.55);
  --rs-blur:blur(16px) saturate(1.16);
  /*
   * צל רך ועמוק - לא הילה. ⚠️ אין כאן שום `rgba(237,190,46,...)`:
   * זוהר זהוב מתחת למשטח הוא בדיוק מה שמסגיר דף שנוצר אוטומטית, וזו
   * החלטה מתועדת ב-funnel-css. הצל הוא שחור, גדול, ועם היסט שלילי
   * גדול (`-28px`) כך שהוא נשפך למטה ולא סביב.
   */
  --rs-shadow:0 18px 44px -28px rgba(0,0,0,.78);
  --rs-shadow-lit:0 30px 68px -30px rgba(0,0,0,.92),0 3px 12px -7px rgba(0,0,0,.62);
  /* אור על השפה העליונה, צל על התחתונה. שתי שורות `inset` בלבד. */
  --rs-edge:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.34);
  --rs-edge-lit:inset 0 1px 0 rgba(255,255,255,.095),inset 0 -1px 0 rgba(0,0,0,.4);
}

.rsite *,.rsite *::before,.rsite *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.rsite{
  background:var(--rs-bg);color:var(--rs-ink);direction:rtl;
  font-family:Polin,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* אין גלילה אופקית באתר הזה. אף פעם. */
  overflow-x:hidden;max-width:100%;
}
/* שטיפת אור קבועה מאחורי כל העמוד - זהב מלמעלה-ימין, נגיעת ירוק
   מהצילומים של רועי משמאל. בלעדיה השחור שטוח, וזה בדיוק מה שהלקוח
   קרא לו "לא ברמה". `pointer-events:none` כי היא פרוסה על כל המסך. */
body.rsite::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1180px 640px at 88% -10%,rgba(237,190,46,.11),rgba(20,20,20,0) 62%),
    radial-gradient(880px 520px at 4% 16%,rgba(92,122,78,.075),rgba(20,20,20,0) 66%);
}
/*
 * ⚠️ `:where()` ולא `.rsite img` / `.rsite a`. סלקטור עם שם תגית בתוך
 * מחלקה הוא (0,1,1), והוא **גובר על מחלקה בודדת** (0,1,0) - כלומר
 * איפוס שנועד להיות ברירת מחדל מבטל בשקט את כל מי שבא אחריו:
 *   · `.rsite-btn{color:#141414}` הפסיד ל-`color:inherit`, וכל כפתור
 *     זהב באתר יצא עם טקסט **לבן על זהב** - יחס ניגודיות 1.9:1.
 *   · `.rsite-link{color:gold}` הפסיד גם הוא, וכל "לדף המלא ←" היה לבן.
 *   · `.rsite-bg-img{height:100%}` הפסיד ל-`height:auto`, ולכן הרקע
 *     נרנדר בגובה הטבעי ו-`object-position` לא עשה כלום.
 * `:where()` מאפס את המשקל ל-(0,0,1), והאיפוס חוזר להיות ברירת מחדל.
 */
:where(.rsite) img{max-width:100%;height:auto;display:block}
:where(.rsite) a{color:inherit;text-decoration:none}
.rsite ul,.rsite ol{list-style:none}
.rsite button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.rsite ::selection{background:var(--rs-gold);color:#141414}
.rsite :focus-visible{outline:2px solid var(--rs-gold);outline-offset:3px;border-radius:6px}

.rsite-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rsite-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--rs-gold);color:#141414;padding:10px 18px;font-weight:700}
.rsite-skip:focus{inset-inline-start:12px;top:12px}

.rsite-wrap{width:100%;max-width:var(--rs-wrap);margin-inline:auto;padding-inline:var(--rs-pad)}

/* ============================================================
   מסגרת דקה - הכלי המרכזי של הסבב הזה
   ------------------------------------------------------------
   טבעת של פיקסל אחד בגראדיינט. `mask-composite:exclude` חותך את
   הפנים ומשאיר רק את המסגרת.
   ⚠️ היא תמיד פסבדו-אלמנט **בלי ילדים**: המסכה זורקת את התוכן של
   האלמנט שהיא מוחלת עליו, ולכן אסור לשים אותה על מיכל אמיתי.
   ⚠️ `pointer-events:none` - היא פרוסה מעל כל שטח הכרטיס.
   ============================================================ */
.rsite-card::after,
.rsite-course::after,
.rsite-bundle::after,
.rsite-empty::after,
.rsite-hero-img::after,
.rsite-split-img::after,
.rsite-names>li::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:var(--rs-frame,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background .45s var(--rs-ease),opacity .45s var(--rs-ease);
}

/* דפדפן בלי `mask-composite` היה מקבל מלבן גראדיינט מלא מעל הכרטיס
   במקום טבעת. שם נופלים חזרה למסגרת רגילה. */
@supports not (mask-composite:exclude){
  .rsite-card::after,.rsite-course::after,.rsite-bundle::after,.rsite-empty::after,
  .rsite-hero-img::after,.rsite-split-img::after,.rsite-names>li::after{display:none}
  .rsite-card,.rsite-course,.rsite-bundle,.rsite-empty,
  .rsite-hero-img,.rsite-split-img,.rsite-names>li{border:1px solid var(--rs-line-2)}
}

/* ============================================================
   הפס העליון של משטח הזכוכית
   ------------------------------------------------------------
   קו של פיקסל אחד בשפה העליונה של כל משטח, בהיר במרכז ודועה לשקוף
   בשני הקצוות. ביחד עם ה-`inset` הכהה בשפה התחתונה (`--rs-edge`) זה
   מה שנותן את התחושה שאור נופל על הקצה - במקום `border` אחיד שסוגר
   את הקופסה מארבעה צדדים באותה עוצמה.
   ⚠️ `::before` ולא `::after` - ה-`::after` כבר תפוס על ידי הטבעת.
   ⚠️ `.rsite-hero-img` ו-`.rsite-split-img` **לא** ברשימה: ה-`::before`
   שלהם כבר מחזיק את דהיית הצילום אל הרקע.
   ⚠️ `pointer-events:none` - הוא פרוס על שפת הכרטיס.
   ============================================================ */
.rsite-card::before,.rsite-course::before,.rsite-bundle::before,
.rsite-empty::before,.rsite-names>li::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:5;pointer-events:none;
  background-image:var(--rs-hair-spec,linear-gradient(90deg,rgba(255,255,255,0),rgba(247,210,100,.26) 50%,rgba(255,255,255,0)));
  opacity:.8;transition:opacity .35s var(--rs-ease)}
.rsite-card:hover::before,.rsite-course:hover::before,.rsite-bundle:hover::before,
.rsite-empty:hover::before,.rsite-names>li:hover::before{opacity:1}

/* צל רך מתחת לכל משטח. הכפתורים **לא** ברשימה - ראו ההערה בטוקנים. */
.rsite-card,.rsite-course,.rsite-bundle,.rsite-empty,.rsite-names>li{
  box-shadow:var(--rs-shadow,0 18px 44px -28px rgba(0,0,0,.78)),var(--rs-edge,inset 0 1px 0 rgba(255,255,255,.055))}
.rsite-card:hover,.rsite-course:hover,.rsite-bundle:hover,.rsite-empty:hover,.rsite-names>li:hover{
  box-shadow:var(--rs-shadow-lit,0 30px 68px -30px rgba(0,0,0,.92)),var(--rs-edge-lit,inset 0 1px 0 rgba(255,255,255,.095))}

/* קו שיער שדועה - המפריד היחיד. אין באתר הזה `border` שחוצה את
   כל הרוחב בקו ישר: קו ישר הוא בדיוק מה שגורם לסקשן להיראות כמו
   טלאי שהודבק, והוא מה שהיה כאן קודם. */
.rsite-sec::before,.rsite-hero::after,.rsite-cta-band::before,
.rsite-sec-alt::before,.rsite-sec-alt::after,
.rsite-strip::before,.rsite-strip::after{
  content:"";position:absolute;inset-inline:0;height:1px;pointer-events:none;z-index:4;
  background:var(--rs-hair-soft,rgba(255,255,255,.06));
}
/* הסקשן המובלט ופס המספרים מקבלים את הקו החזק יותר - הם משנים גם את
   צבע הרקע, ולכן המפריד שלהם צריך להיות מורגש. סקשן רגיל, ההירו ופס
   הסיום מקבלים את הגרסה הדהויה: פס דק שרואים אותו רק אם מחפשים.
   ⚠️ שתי ההצהרות באותו סדר וללא כפילות של תכונה - הכלל השני נוגע
   ב-`background` בלבד, כל השאר נשאר מהכלל שמעליו. */
.rsite-sec-alt::before,.rsite-sec-alt::after,
.rsite-strip::before,.rsite-strip::after{background:var(--rs-hair,rgba(58,53,39,.7))}
.rsite-sec::before,.rsite-sec-alt::before,.rsite-strip::before,.rsite-cta-band::before{top:0}
.rsite-sec-alt::after,.rsite-strip::after,.rsite-hero::after{bottom:0}
/* סקשן עם רקע צילום כבר דוהה בעצמו למעלה ולמטה - קו שיער מעליו
   מחזיר בדיוק את החיתוך שהוא בא למנוע. */
.rsite-has-bg::before,.rsite-has-bg::after{display:none}

/* ---------- טיפוגרפיה ---------- */
/* קו זהב קצר לפני התווית, שדועה החוצה. זה מה שמסמן "כאן מתחיל סקשן
   חדש" עכשיו, במקום הקו שחצה קודם את כל הרוחב.
   ⚠️ הכיוון: הדף כולו RTL, ולכן `inset-inline-start` הוא **ימין**,
   והקו צריך להיות זהוב בצד שנוגע בטקסט (שמאל) ולדעוך ימינה. */
.rsite-eyebrow{position:relative;display:block;font-size:clamp(13px,1.5vw,15px);font-weight:500;
  color:var(--rs-gold);letter-spacing:.02em;margin-block-end:12px;padding-inline-start:32px}
.rsite-eyebrow::before{content:"";position:absolute;inset-inline-start:0;top:.66em;
  width:22px;height:1px;
  background-image:linear-gradient(90deg,var(--rs-gold,#EDBE2E),rgba(237,190,46,0))}
/*
 * ⚠️ כותרות ארוכות. דף נחיתה מקבל כותרת שהלקוח כותב, והיא כמעט
 * תמיד ארוכה ממה שהמעצב צייר. שלוש הגנות, ביחד:
 *   `text-wrap:balance` - מחלק את השורות שווה במקום להשאיר יתומה
 *   `max-width` ב-`ch` - תוחם את מספר התווים לשורה, לא לפיקסלים
 *   `overflow-wrap:anywhere` - מילה אחת ארוכה מהשורה נשברת ולא
 *     גולשת מהמסך. בלעדיו כתובת או שם באנגלית שוברים את הפריסה.
 */
.rsite h1,.rsite-h2,.rsite h3,.rsite-hero-sub{
  text-wrap:balance;overflow-wrap:anywhere;hyphens:manual}
/*
 * ⚠️ הגדלים והרוחבים כאן **נמדדו**, לא נבחרו. הדרישה היא "כותרת גג שתי
 * שורות", ולכן `qa/site-qa.mjs` שער 14 מחפש בחיפוש בינארי כמה תווים כל
 * כותרת יכולה לשאת בשתי שורות בכל רוחב, ודורש רצפה: 36 תווים ל-h1,
 * 44 ל-h2. הערכים האלה נותנים 39 ל-h1 ו-50 ל-h2 בצוואר הבקבוק (390
 * ו-1440), כלומר מרווח של 3 ו-6 תווים. מי שמגדיל כאן גופן - להריץ את
 * השער, הוא יגיד בדיוק כמה ירד.
 */
.rsite h1{font-size:clamp(34px,5.4vw,60px);font-weight:900;line-height:1.05;letter-spacing:normal;max-width:30ch}
.rsite-h2{font-size:clamp(24px,3.2vw,38px);font-weight:900;line-height:1.12;letter-spacing:normal;max-width:32ch}
.rsite h3{font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.28;letter-spacing:normal;max-width:30ch}
.rsite-lead{font-size:clamp(16px,1.85vw,20px);color:var(--rs-bone);line-height:1.6;font-weight:300;max-width:62ch}
.rsite-sec-lead{margin-block:14px 30px;font-size:clamp(15px,1.7vw,18.5px);color:var(--rs-bone-2);max-width:66ch;line-height:1.6}
.rsite-note{margin-block-start:16px;font-size:14px;color:var(--rs-muted);max-width:70ch;line-height:1.6}
/* כותרת ממורכזת (פס הסיום) - `max-width` ב-ch ועדיין באמצע. */
.rsite-center{text-align:center}
.rsite-center>.rsite-h2,.rsite-center>h1{margin-inline:auto}

/*
 * ברק על הכותרת. גראדיינט שנחתך לצורת האותיות.
 * ⚠️ המלכודת: הצבע נעצר בגבול **הקופסה** ולא בגבול הטקסט, ולכן
 * המילה האחרונה יוצאת לא צבועה כשהטקסט מגיע עד הקצה. הריפוד
 * המפוצה (`padding` חיובי + `margin` שלילי זהה) נותן לצבע מקום
 * בלי להזיז את תיבת התוכן אפילו בפיקסל.
 * ⚠️ `pointer-events:none` - הקופסה גדלה, ובלי זה היא בולעת קליק
 * של מה שיושב לידה.
 */
.rsite-shine{
  background-image:linear-gradient(102deg,#FFFFFF 0%,#FFFFFF 30%,#F7E3AC 52%,var(--rs-gold,#EDBE2E) 72%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-inline:.16em;margin-inline:-.16em;
  pointer-events:none;
}

/* ---------- כפתורים ---------- */
/*
 * ⚠️ בלי צל. כך זה בכל האתר של רועי ובכל דף מכירה, וזו החלטה
 * מתועדת ב-funnel-css: זוהר זהוב מתחת לכפתור הוא הדבר שמסגיר דף
 * שנוצר אוטומטית. הגראדיינט העדין והקו העליון נותנים את הנפח.
 */
.rsite-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background-color:var(--rs-gold);
  background-image:linear-gradient(168deg,var(--rs-gold-lit,#F7D264) 0%,var(--rs-gold,#EDBE2E) 46%,var(--rs-gold-dim,#D8A716) 100%);
  color:#141414;font-weight:800;font-size:clamp(15px,1.7vw,18px);
  border-radius:255px;padding:14px 34px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  transition:filter .3s var(--rs-ease),transform .3s var(--rs-ease)}
.rsite-btn:hover{filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rsite-btn-ghost{background-color:rgba(255,255,255,.02);background-image:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  color:var(--rs-ink);border:1px solid var(--rs-line-2);box-shadow:none}
.rsite-btn-ghost:hover{border-color:rgba(237,190,46,.55);filter:none;box-shadow:none;
  background-color:rgba(255,255,255,.045);
  background-image:linear-gradient(168deg,rgba(237,190,46,.10),rgba(255,255,255,0))}
.rsite-btn-sm{padding:11px 24px;font-size:15px}
.rsite-ar{font-size:1.05em;line-height:1;transition:transform .3s var(--rs-ease)}
.rsite-btn:hover>.rsite-ar,.rsite-link:hover>.rsite-ar,.rsite-cta:hover>.rsite-ar{transform:translateX(-3px)}
.rsite-btns{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:30px}
.rsite-link{display:inline-flex;align-items:center;gap:7px;color:var(--rs-gold);font-weight:600;font-size:15px;
  transition:color .25s var(--rs-ease)}
.rsite-link:hover{color:var(--rs-gold-lit);text-decoration:underline;text-underline-offset:4px}

/* ---------- תפריט עליון ---------- */
/*
 * ההדר דוהה פנימה. בראש העמוד הוא כמעט שקוף ומשאיר את ההירו נושם;
 * מהגלילה הראשונה הוא נאטם וקו השיער מתחתיו נדלק. `is-stuck` נוסף
 * ב-JS, אבל **גם בלעדיו** יש לו רקע - אחרת הוא נעלם למי שה-JS שלו
 * לא רץ, והתפריט הופך לטקסט צף על תמונה.
 */
.rsite-head{position:sticky;top:0;z-index:40;
  background-color:rgba(18,18,18,.62);
  backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);
  transition:background-color .45s var(--rs-ease),backdrop-filter .45s var(--rs-ease)}
.rsite-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:var(--rs-hair,rgba(58,53,39,.7));opacity:.5;
  transition:opacity .45s var(--rs-ease)}
.rsite-head.is-stuck{background-color:rgba(15,15,15,.92);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.rsite-head.is-stuck::after{opacity:1}
.rsite-head-in{display:flex;align-items:center;gap:18px;min-height:68px}
.rsite-logo{flex:none;display:block;opacity:.94;transition:opacity .25s var(--rs-ease)}
.rsite-logo:hover{opacity:1}
.rsite-logo img{width:96px;height:auto}
.rsite-nav{display:flex;align-items:center;gap:22px;margin-inline-start:auto}
/* הקו מתחת לפריט התפריט נמתח מהמרכז החוצה - זו כל התנועה כאן. */
.rsite-nav-a{position:relative;font-size:15.5px;font-weight:500;color:var(--rs-ink-2);
  transition:color .25s var(--rs-ease);padding-block:4px}
.rsite-nav-a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background-image:linear-gradient(90deg,rgba(237,190,46,0),var(--rs-gold,#EDBE2E),rgba(237,190,46,0));
  transform:scaleX(0);transition:transform .35s var(--rs-ease)}
.rsite-nav-a:hover{color:var(--rs-gold)}
.rsite-nav-a:hover::after{transform:scaleX(1)}
.rsite-nav-a.is-on{color:var(--rs-gold)}
.rsite-nav-a.is-on::after{transform:scaleX(1)}
/*
 * ⚠️ הפריט של העמוד הנוכחי כבר זהוב והקו שלו כבר פרוס - כלומר כלל
 * הריחוף הרגיל לא משנה בו **כלום**, והוא הפריט היחיד בתפריט שלא מגיב
 * למצביע. שער הריחוף תפס בדיוק את זה. כאן הוא מתבהר גוון אחד.
 */
.rsite-nav-a.is-on:hover{color:var(--rs-gold-lit)}
.rsite-nav-a.is-on:hover::after{
  background-image:linear-gradient(90deg,rgba(247,210,100,0),var(--rs-gold-lit,#F7D264),rgba(247,210,100,0))}
.rsite-cta{display:inline-flex;align-items:center;gap:8px;
  background-color:var(--rs-gold);
  background-image:linear-gradient(168deg,var(--rs-gold-lit,#F7D264) 0%,var(--rs-gold,#EDBE2E) 46%,var(--rs-gold-dim,#D8A716) 100%);
  color:#141414;font-weight:800;font-size:15px;border-radius:255px;padding:10px 22px;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  transition:filter .3s var(--rs-ease),transform .3s var(--rs-ease)}
.rsite-cta:hover{filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rsite-burger{display:none;width:42px;height:42px;flex:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-inline-start:auto;
  border-radius:10px;transition:background-color .25s var(--rs-ease)}
.rsite-burger:hover{background-color:rgba(255,255,255,.055)}
.rsite-burger>span{display:block;width:22px;height:2px;background:var(--rs-ink);border-radius:2px;
  transition:transform .3s var(--rs-ease),opacity .2s}
.rsite-burger[aria-expanded="true"]>span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rsite-burger[aria-expanded="true"]>span:nth-child(2){opacity:0}
.rsite-burger[aria-expanded="true"]>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.rsite-menu{position:relative;display:none;flex-direction:column;gap:2px;padding:10px var(--rs-pad) 22px;
  /* ⚠️ רקע אטום, לא רק גראדיינט: התפריט נפתח מעל תוכן העמוד, ובלי
     רקע משלו הטקסט שלו נקרא על גבי מה שמתחתיו. */
  background-color:rgba(13,13,13,.97);
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(20,20,20,0) 70%)}
.rsite-menu::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;
  background:var(--rs-hair,rgba(58,53,39,.7))}
.rsite-menu>a{position:relative;padding:13px 4px;font-size:17px;font-weight:500;
  transition:color .25s var(--rs-ease)}
.rsite-menu>a:hover{color:var(--rs-gold)}
.rsite-menu>a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background-image:linear-gradient(90deg,rgba(42,42,42,.9),rgba(42,42,42,0))}
.rsite-menu-cta{margin-block-start:14px;
  background-color:var(--rs-gold);
  background-image:linear-gradient(168deg,var(--rs-gold-lit,#F7D264),var(--rs-gold-dim,#D8A716));
  color:#141414;font-weight:800;border-radius:255px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
  transition:filter .3s var(--rs-ease),color .25s var(--rs-ease)}
.rsite-menu-cta::after{display:none}
/* ⚠️ הכפתור בתפריט יורש את `color:gold` מהכלל שמעליו ברגע שמרחפים -
   וטקסט זהב על רקע זהב הוא 1:1. הוא מחזיר לעצמו את השחור. */
.rsite-menu>a.rsite-menu-cta:hover{color:#141414;filter:brightness(1.06)}

/* ============================================================
   רקע צילום לסקשן - הדהייה
   ------------------------------------------------------------
   זה הטיפול שהלקוח אמר עליו "מושלם" בדף המכירה, מועתק לכאן בעיקרון
   ולא בהעתק-הדבק (roi-sales הוא קריאה בלבד). שלוש שכבות:
     1. הצילום, `cover`, ממלא את הסקשן
     2. מסכה אופקית שממיסה אותו אל הרקע בשני הצדדים - זה מה שמונע
        ממנו להיראות כמו טלאי שנחתך בקו ישר
     3. צעיף אנכי שמכהה בדיוק במקום שהטקסט יושב בו, ומתמזג לרקע
        העמוד למעלה ולמטה
   ⚠️ בלי `loading="lazy"` בתבנית - זה רקע, לא קישוט. טעינה עצלה
   מראה לגולל קופסה ריקה ואז תמונה שקופצת.
   ============================================================ */
.rsite-has-bg{position:relative;overflow:hidden;isolation:isolate}
.rsite-has-bg>.rsite-wrap{position:relative;z-index:2}
.rsite-bg-pic{position:absolute;inset:0;display:block;z-index:0;pointer-events:none}
/*
 * ⚠️ `.rsite-bg-pic>` ולא `.rsite-bg-img` לבד. האיפוס הגלובלי
 * `.rsite img{height:auto}` הוא סלקטור עם **שם תגית** (0,1,1), והוא
 * גובר על מחלקה בודדת (0,1,0) - כלומר `height:100%` פשוט לא הוחל,
 * הצילום נרנדר בגובה הטבעי שלו, ו-`object-fit`/`object-position`
 * לא עשו כלום כי הקופסה כבר הייתה ביחס המקורי. התסמין: הרקע תמיד
 * מראה את ראש התמונה, בלי קשר למה שכתוב ב-object-position.
 */
.rsite-bg-pic>.rsite-bg-img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.44) contrast(1.04) brightness(.7);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.rsite-bg-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(180deg,
    var(--rs-bg,#141414) 0%,
    rgba(20,20,20,var(--rs-dim,.84)) 26%,
    rgba(20,20,20,var(--rs-dim,.84)) 74%,
    var(--rs-bg,#141414) 100%)}
/* בטלפון הצילום צר והפנים בורחות מהמסגרת; מיקוד גבוה יותר מחזיר
   אותן, והחשכה חזקה יותר כי הטקסט תופס שם כמעט את כל הרוחב. */
@media (max-width:700px){
  .rsite-bg-pic>.rsite-bg-img{filter:grayscale(.52) brightness(.58)}
  .rsite-bg-veil{--rs-dim:.89}
}

/* ---------- הירו ---------- */
.rsite-hero{position:relative;padding-block:clamp(38px,6vw,76px) clamp(30px,5vw,60px);
  background-image:
    radial-gradient(118% 88% at 100% 0%,rgba(237,190,46,.15) 0%,rgba(20,20,20,0) 58%),
    radial-gradient(80% 70% at 0% 100%,rgba(92,122,78,.10) 0%,rgba(20,20,20,0) 62%)}
.rsite-hero-in{display:grid;grid-template-columns:1.5fr .76fr;gap:clamp(24px,4vw,56px);align-items:center}
.rsite-hero-sub{margin-block-start:14px;font-size:clamp(17px,2.2vw,25px);font-weight:500;color:var(--rs-gold);line-height:1.3;max-width:30ch}
.rsite-hero-txt .rsite-lead{margin-block-start:18px}
/*
 * ⚠️ צילום של אדם לא נגמר בקו.
 *
 * `roi-avatar.jpg` הוא קרופ מרובע שנגמר באמצע הגוף. קודם היה כאן
 * ויניאט - גראדיינט של 55% בפינה - וזה מכהה, לא ממיס: הקו התחתון
 * נשאר חד והגוף נקטע. הלקוח העיר על זה כמה פעמים.
 *
 * הפתרון הוא **מסכה**, אותו עיקרון בדיוק כמו ב-`section-bg.php`
 * שעליו הוא אמר "מושלם": הפיקסלים עצמם דוהים לשקיפות, ולכן אין קצה
 * בכלל. הטבעת מוסרת מהתחתית מאותה סיבה - מסגרת סביב תמונה נמוגה
 * מציירת בדיוק את הקו שהמסכה מחקה.
 */
.rsite-hero-img{position:relative;border-radius:var(--rs-r)}
.rsite-hero-img>img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-start-start-radius:var(--rs-r);border-start-end-radius:var(--rs-r);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 54%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 54%,rgba(0,0,0,.55) 82%,transparent 100%)}
/* הטבעת עולה רק עד שהצילום עוד אטום. */
.rsite-hero-img::after{inset-block-end:auto;height:62%}

/* ---------- פס מספרים ---------- */
.rsite-strip{position:relative;
  background-color:var(--rs-bg-2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.028) 0%,rgba(20,20,20,0) 100%)}
.rsite-strip-in{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,34px);padding-block:clamp(22px,3vw,34px)}
.rsite-stat{position:relative;display:flex;flex-direction:column;gap:6px}
/* מספר עם סימן בעמוד RTL - מבודד, אחרת הדפדפן מעיף את ה-₪ לצד השני.
   ⚠️ בלי `background-clip` על המספר: החיתוך לצורת האותיות מפיל את
   סימן השקל, וזה נראה תקין ב-`textContent` ושבור על המסך. */
.rsite-stat>b{font-size:clamp(24px,3.2vw,38px);font-weight:900;color:var(--rs-gold);line-height:1;
  direction:ltr;unicode-bidi:isolate;text-align:start}
.rsite-stat>span{font-size:14.5px;color:var(--rs-bone-3);line-height:1.5}

/* ---------- סקשנים ---------- */
/* לכל סקשן מקור אור משלו. בלי זה אזור האמצע של הדף הוא מלבן שחור
   אחיד באורך אלפיים פיקסל, וזה מה שגרם לו להיראות שטוח. */
.rsite-sec{position:relative;padding-block:clamp(46px,6.5vw,86px);scroll-margin-block-start:86px;
  background-image:radial-gradient(120% 60% at 100% 0%,rgba(255,255,255,.022) 0%,rgba(20,20,20,0) 58%)}
.rsite-sec-alt{position:relative;
  background-color:var(--rs-bg-2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(20,20,20,0) 46%,rgba(0,0,0,.18) 100%)}
.rsite-sec-foot{margin-block-start:34px}
.rsite-page-head{position:relative;padding-block:clamp(34px,5vw,64px) clamp(24px,3vw,40px);
  background-image:
    radial-gradient(100% 100% at 100% 0%,rgba(237,190,46,.12) 0%,rgba(20,20,20,0) 60%),
    radial-gradient(70% 90% at 0% 100%,rgba(92,122,78,.08) 0%,rgba(20,20,20,0) 66%)}
.rsite-page-head h1{margin-block-end:18px}
/* ראש עמוד וסקשן ראשון אחריו - שני ריפודים שנערמים ויוצרים חלל ריק. */
.rsite-page-head+.rsite-sec{padding-block-start:clamp(18px,2.4vw,34px)}
.rsite-crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--rs-muted);margin-block-end:18px}
.rsite-crumbs>a{transition:color .25s var(--rs-ease)}
.rsite-crumbs>a:hover{color:var(--rs-gold)}

/* ---------- רשתות וכרטיסים ---------- */
.rsite-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.rsite-grid-4{grid-template-columns:repeat(4,1fr)}
.rsite-grid-3{grid-template-columns:repeat(3,1fr)}
.rsite-card{position:relative;
  background-color:var(--rs-card);
  background-image:linear-gradient(166deg,rgba(237,190,46,.055) 0%,rgba(255,255,255,.018) 34%,rgba(0,0,0,.12) 100%);
  border-radius:var(--rs-r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--rs-ease),background-color .35s var(--rs-ease),box-shadow .35s var(--rs-ease)}
.rsite-card:hover{transform:translateY(-4px);background-color:#201F1A}
.rsite-card:hover::after{background:var(--rs-frame-lit,rgba(237,190,46,.5))}
.rsite-card-b{position:relative;z-index:2;padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.rsite-tile{padding:22px;gap:10px}
.rsite-tile>p{position:relative;z-index:2;color:var(--rs-bone-3);font-size:15px;line-height:1.6}
.rsite-tile>h3,.rsite-tile>.rsite-link{position:relative;z-index:2}
.rsite-num{display:inline-block;font-size:12.5px;font-weight:700;color:var(--rs-gold);
  letter-spacing:.04em;text-transform:none}
/* הכריכה דוהה אל גוף הכרטיס במקום להיחתך בקו. */
.rsite-gear-img{position:relative;display:block;background:#0E0E0E}
.rsite-gear-img>img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .8s var(--rs-ease)}
.rsite-gear-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(20,20,20,0) 58%,rgba(28,28,28,.92) 100%)}
.rsite-card:hover .rsite-gear-img>img{transform:scale(1.035)}
/* תפר של פיקסל בין הכריכה לגוף הכרטיס - דועה לשקוף בשני הקצוות. */
.rsite-gear .rsite-card-b::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  pointer-events:none;z-index:3;
  background-image:var(--rs-hair-soft,linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 50%,rgba(255,255,255,0)));
  opacity:.9;transition:opacity .35s var(--rs-ease)}
.rsite-card:hover .rsite-card-b::before{opacity:1}
.rsite-gear .rsite-card-b>p{color:var(--rs-bone-3);font-size:14.5px;line-height:1.55;flex:1}
.rsite-gear .rsite-link{margin-block-start:4px}

/* ---------- רשימת סימונים ---------- */
/* טבעת דקה עם נקודה בפנים - אותה שפה של המסגרות, בקטן. */
.rsite-ticks{display:flex;flex-direction:column;gap:10px;margin-block-start:18px}
.rsite-ticks>li{position:relative;padding-inline-start:26px;font-size:15.5px;color:var(--rs-bone-2);
  line-height:1.55}
.rsite-ticks>li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;
  width:14px;height:14px;border-radius:50%;transform:translateY(-50%);
  border:1px solid rgba(237,190,46,.45);
  background-image:radial-gradient(circle at 50% 50%,var(--rs-gold,#EDBE2E) 0 3px,rgba(237,190,46,.10) 3.5px 100%)}

/* ---------- פיצול תמונה/טקסט ---------- */
.rsite-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,54px);align-items:center}
.rsite-split-img{position:relative;border-radius:var(--rs-r);overflow:hidden}
.rsite-split-img>img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:contrast(1.03) brightness(.94)}
/* אותו כלל: הצילום נמוג, לא מוכהה. */
.rsite-split-img{overflow:visible}
.rsite-split-img>img{
  border-start-start-radius:var(--rs-r);border-start-end-radius:var(--rs-r);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.55) 84%,transparent 100%)}
.rsite-split-img::after{inset-block-end:auto;height:66%}
.rsite-split-txt>p{margin-block-start:16px;color:var(--rs-bone-2);font-size:16px;line-height:1.65}

/* ---------- בוגרים ---------- */
.rsite-names{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-block-start:28px}
.rsite-names>li{position:relative;
  background-color:rgba(28,28,28,.72);
  background-image:linear-gradient(166deg,rgba(237,190,46,.05),rgba(255,255,255,.015) 40%,rgba(0,0,0,.1));
  border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:3px;
  transition:transform .35s var(--rs-ease),background-color .35s var(--rs-ease),box-shadow .35s var(--rs-ease)}
.rsite-names>li:hover{transform:translateY(-3px);background-color:rgba(38,36,30,.82)}
.rsite-names>li:hover::after{background:var(--rs-frame-lit,rgba(255,255,255,.14))}
.rsite-names>li>b{position:relative;z-index:2;font-size:16.5px;font-weight:700}
.rsite-names>li>span{position:relative;z-index:2;font-size:14px;color:var(--rs-muted)}

/* ---------- דף הקורסים ---------- */
.rsite-courses{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.rsite-course{position:relative;display:grid;grid-template-columns:320px 1fr;gap:clamp(18px,2.6vw,32px);
  background-color:var(--rs-card);
  background-image:linear-gradient(112deg,rgba(237,190,46,.055) 0%,rgba(255,255,255,.015) 38%,rgba(0,0,0,.14) 100%);
  border-radius:var(--rs-r);overflow:hidden;
  transition:transform .35s var(--rs-ease),background-color .35s var(--rs-ease),box-shadow .35s var(--rs-ease)}
.rsite-course:hover{transform:translateY(-4px);background-color:#201F1A}
.rsite-course:hover::after{background:var(--rs-frame-lit,rgba(237,190,46,.5))}
/* הכריכה מומסת אל גוף הכרטיס בצד הפנימי - בלי קו חיתוך אנכי. */
.rsite-course-img{position:relative;background:#0E0E0E}
.rsite-course-img>img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.rsite-course-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(270deg,rgba(28,28,28,0) 62%,rgba(28,28,28,.95) 100%)}
.rsite-course-b{position:relative;z-index:2;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px}
.rsite-course-sub{color:var(--rs-bone-2);font-size:16px}
.rsite-course-foot{position:relative;margin-block-start:auto;padding-block-start:20px;display:flex;flex-wrap:wrap;
  align-items:center;gap:16px;justify-content:space-between}
.rsite-course-foot::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(58,53,39,.85),rgba(58,53,39,0) 72%)}
.rsite-price{display:inline-flex;align-items:baseline;gap:8px;font-size:clamp(22px,2.6vw,30px);
  font-weight:900;color:var(--rs-gold);direction:ltr;unicode-bidi:isolate;text-align:start}
.rsite-price>i{font-style:normal;font-size:13px;font-weight:400;color:var(--rs-muted);
  direction:rtl;unicode-bidi:isolate}
.rsite-price-xl{font-size:clamp(30px,4vw,46px)}

/* ---------- חבילה ---------- */
.rsite-bundle{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,3.4vw,44px);
  background-color:var(--rs-card-2);
  background-image:
    radial-gradient(90% 120% at 100% 0%,rgba(237,190,46,.14) 0%,rgba(36,32,22,0) 62%),
    linear-gradient(168deg,rgba(255,255,255,.03),rgba(0,0,0,.16));
  border-radius:var(--rs-r);
  padding:clamp(24px,3.4vw,44px);
  transition:transform .35s var(--rs-ease),background-color .35s var(--rs-ease),box-shadow .35s var(--rs-ease)}
.rsite-bundle:hover{transform:translateY(-3px);background-color:#2A2519}
.rsite-bundle:hover::after{background:var(--rs-frame-lit,rgba(255,255,255,.14))}
.rsite-bundle>div{position:relative;z-index:2}
.rsite-bundle>div>p{margin-block-start:14px;color:var(--rs-bone-2);line-height:1.65}
.rsite-bundle-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  justify-content:center}

/* ---------- רועי ממליץ ---------- */
.rsite-chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:24px}
.rsite-chips>a{display:inline-flex;align-items:center;
  background-color:#0E0F11;
  background-image:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  border:1px solid var(--rs-line);
  border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:500;color:var(--rs-ink-2);
  transition:border-color .3s var(--rs-ease),color .3s var(--rs-ease),background-color .3s var(--rs-ease)}
.rsite-chips>a:hover{border-color:rgba(237,190,46,.55);color:var(--rs-gold);
  background-color:rgba(237,190,46,.055)}
.rsite-chips>a.is-on{border-color:rgba(237,190,46,.7);color:var(--rs-gold);background-color:rgba(237,190,46,.09)}
/* אותה בעיה כמו בתפריט: השבב הפעיל כבר זהוב, ולכן צריך מצב ריחוף משלו. */
.rsite-chips>a.is-on:hover{border-color:rgba(237,190,46,.9);color:var(--rs-gold-lit);
  background-color:rgba(237,190,46,.16)}
.rsite-benefit{color:var(--rs-gold);font-weight:600;font-size:15px}
.rsite-pick .rsite-card-b>p{color:var(--rs-bone-3);font-size:14.5px;line-height:1.6}
.rsite-soon{font-size:14px;color:var(--rs-muted)}
.rsite-empty{position:relative;
  background-color:rgba(28,28,28,.6);
  background-image:linear-gradient(166deg,rgba(237,190,46,.045),rgba(255,255,255,0) 60%);
  border-radius:var(--rs-r);
  padding:26px;color:var(--rs-bone-2);font-size:15.5px;
  transition:transform .35s var(--rs-ease),background-color .35s var(--rs-ease),box-shadow .35s var(--rs-ease)}
.rsite-empty:hover{transform:translateY(-3px);background-color:rgba(36,34,28,.8)}
.rsite-empty:hover::after{opacity:1}
/* המסגרת של "בקרוב" מקווקוות - אותה טבעת, קו מרוסק, ובאותה עדינות
   של שאר הטבעות (18% ולא 34%). */
.rsite-empty::after{opacity:.8;background:repeating-linear-gradient(104deg,
  rgba(237,190,46,.18) 0 10px,rgba(237,190,46,0) 10px 20px)}

/* ---------- פס סיום ---------- */
.rsite-cta-band{position:relative;padding-block:clamp(48px,6.4vw,84px);text-align:center;
  background-image:linear-gradient(180deg,rgba(237,190,46,.10) 0%,rgba(20,20,20,0) 72%)}
.rsite-cta-band>.rsite-wrap>p{margin-block:14px 28px;color:var(--rs-bone-2);font-size:17px;
  max-width:56ch;margin-inline:auto}
.rsite-cta-band>.rsite-wrap>.rsite-h2{margin-inline:auto}

/* ---------- פוטר ---------- */
/* בלי `border-top`. הפוטר עולה מהעמוד בגראדיינט וקו שיער דועה. */
.rsite-foot{position:relative;
  background-color:#0F0F0F;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(0,0,0,.35) 100%);
  padding-block:clamp(38px,4.6vw,58px) 26px}
.rsite-foot::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;
  background:var(--rs-hair,rgba(58,53,39,.7))}
.rsite-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(20px,3vw,40px)}
.rsite-foot-brand>img{width:108px;height:auto}
.rsite-foot-brand>p{margin-block-start:14px;color:var(--rs-muted);font-size:14.5px;line-height:1.6;max-width:42ch}
.rsite-foot-social{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:14px}
.rsite-foot-social>a{font-size:14px;color:var(--rs-gold);
  transition:color .25s var(--rs-ease)}
.rsite-foot-social>a:hover{color:var(--rs-gold-lit);text-decoration:underline;text-underline-offset:4px}
.rsite-foot-col{display:flex;flex-direction:column;gap:10px}
.rsite-foot-col>h2{font-size:14px;font-weight:700;color:var(--rs-ink);letter-spacing:.03em;margin-block-end:2px}
.rsite-foot-col>a{font-size:14.5px;color:var(--rs-muted);line-height:1.45;
  transition:color .25s var(--rs-ease)}
.rsite-foot-col>a:hover{color:var(--rs-gold)}
.rsite-foot-base{position:relative;margin-block-start:clamp(26px,3vw,40px);padding-block-start:20px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.rsite-foot-base::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(42,42,42,0),rgba(42,42,42,.95) 26%,rgba(42,42,42,.95) 74%,rgba(42,42,42,0))}
.rsite-foot-base>p{font-size:13.5px;color:var(--rs-muted)}
/* הקרדיט הוא חלק קבוע מהתוצר ולא העדפה - לכן יש לו כלל משלו,
   שלא תלוי בכלל כללי של הפוטר שמישהו עלול להסיר. */
.rsite-credit{font-size:13.5px;color:var(--rs-muted);white-space:nowrap}
.rsite-credit>strong{color:var(--rs-bone);font-weight:600}

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

   ⚠️ הכל בתוך `@supports`. דפדפן בלי `backdrop-filter` (פיירפוקס עם
   הדגל כבוי, ווב-ויו ישן) ימשיך לקבל את הרקע האטום שבהצהרה הרגילה.
   בלי השער הזה הוא היה מקבל כרטיס שקוף למחצה בלי שום טשטוש מאחוריו -
   כלומר טקסט על הרקע של הסקשן, וזו בדיוק הנפילה הלא-חיננית.

   ⚠️ `var()` עם ברירת מחדל בכל מקום. משתנה שלא הוגדר מפיל את **כל**
   ההצהרה בשקט, וכאן ההצהרה הזו היא הרקע של הכרטיס.
   ============================================================ */
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .rsite-card,.rsite-course,.rsite-bundle,.rsite-empty,.rsite-names>li,.rsite-chips>a{
    backdrop-filter:var(--rs-blur,blur(16px) saturate(1.16));
    -webkit-backdrop-filter:var(--rs-blur,blur(16px) saturate(1.16))}

  .rsite-card,.rsite-course{background-color:var(--rs-glass,rgba(27,27,27,.62))}
  .rsite-card:hover,.rsite-course:hover{background-color:var(--rs-glass-lit,rgba(35,33,27,.74))}
  .rsite-bundle{background-color:rgba(36,32,22,.68)}
  .rsite-bundle:hover{background-color:rgba(44,39,26,.78)}
  .rsite-empty{background-color:var(--rs-glass-2,rgba(24,24,24,.55))}
  .rsite-empty:hover{background-color:rgba(34,32,26,.68)}
  .rsite-names>li{background-color:var(--rs-glass-2,rgba(24,24,24,.55))}
  .rsite-names>li:hover{background-color:rgba(38,36,30,.7)}
  .rsite-chips>a{background-color:rgba(14,15,17,.55)}
}

/* ============================================================
   תנועה - מעט, ובכיוון אחד
   ------------------------------------------------------------
   ⚠️ מצב הבסיס הוא `opacity:1`. המחלקה `rsite-pre` נוספת ב-JS
   **רק** למה שמתחת לקיפול, ורק כשהמשתמש לא ביקש פחות תנועה.
   ה-observer חד-פעמי (`unobserve`) ויש רשת ביטחון בטיימר, כי
   `toggle(cls, isIntersecting)` כבר מחק כאן תוכן לצמיתות בגלילה
   חזרה למעלה.
   ============================================================ */
.rsite-pre{opacity:0;transform:translateY(16px)}
.rsite-rev{transition:opacity .75s var(--rs-ease),transform .75s var(--rs-ease)}
.rsite-in{opacity:1;transform:none}

/* כניסת ההירו. אנימציית CSS שמסתיימת ב-`opacity:1`, כלומר גם אם
   היא לא רצה בכלל - התוכן במקומו. */
@keyframes rsite-lift{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rsite-lift{animation:rsite-lift .85s var(--rs-ease) both}
.rsite-lift-2{animation-delay:.1s}
.rsite-lift-3{animation-delay:.2s}

/* ============================================================
   רספונסיביות. הלקוח מקפיד על מובייל, ולכן הבריקפוינטים יורדים
   בהדרגה ולא בקפיצה אחת.
   ============================================================ */
@media (max-width:1040px){
  .rsite-grid-4{grid-template-columns:repeat(2,1fr)}
  .rsite-foot-grid{grid-template-columns:1fr 1fr 1fr}
  .rsite-foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .rsite-nav,.rsite-cta{display:none}
  .rsite-burger{display:flex}
  .rsite-menu[data-open="1"]{display:flex}
  .rsite-hero-in{grid-template-columns:1fr}
  .rsite-hero-img{order:-1;max-width:420px}
  .rsite-split{grid-template-columns:1fr}
  .rsite-split-img{order:-1}
  .rsite-course{grid-template-columns:1fr}
  .rsite-course-img>img{aspect-ratio:16/9}
  /* הכריכה עוברת למעלה, ולכן הדהייה שלה עוברת מהצד לתחתית. */
  .rsite-course-img::after{background-image:linear-gradient(180deg,rgba(28,28,28,0) 58%,rgba(28,28,28,.95) 100%)}
  .rsite-bundle{grid-template-columns:1fr}
  .rsite-names{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .rsite-grid-3{grid-template-columns:repeat(2,1fr)}
  .rsite-strip-in{grid-template-columns:1fr;gap:18px}
  .rsite-stat{flex-direction:row;align-items:baseline;gap:12px}
  .rsite-stat>span{flex:1}
}
/* ⚠️ סקאלת טיפוגרפיה נפרדת לטלפון. פריים טלפון אינו דסקטופ מוקטן:
   שם `max-width` ב-ch דוחס כותרת לעמודה צרה מדי, ולכן הוא מבוטל
   והגדלים נגזרים מרוחב המסך. */
@media (max-width:620px){
  :root{--rs-pad:18px}
  .rsite h1{font-size:clamp(27px,7.7vw,39px);line-height:1.12;max-width:none}
  .rsite-h2{font-size:clamp(21px,5.7vw,28px);line-height:1.2;max-width:none}
  .rsite h3{font-size:18.5px;line-height:1.32;max-width:none}
  .rsite-hero-sub{font-size:clamp(17px,4.8vw,21px);max-width:none}
  .rsite-lead,.rsite-sec-lead{max-width:none}
  .rsite-grid-4,.rsite-grid-3{grid-template-columns:1fr}
  .rsite-names{grid-template-columns:1fr}
  .rsite-foot-grid{grid-template-columns:1fr 1fr}
  .rsite-btns{flex-direction:column;align-items:stretch}
  .rsite-btns>.rsite-btn{width:100%}
  .rsite-course-foot{justify-content:flex-start}
  .rsite-foot-base{flex-direction:column;align-items:flex-start}
  .rsite-sec{scroll-margin-block-start:72px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rsite *{transition:none!important;animation:none!important}
  /* ואם ה-JS כבר הספיק לסמן משהו - להחזיר אותו מיד. */
  .rsite-pre{opacity:1!important;transform:none!important}
  /*
   * גם הריחוף. ההרמה של 2-4 פיקסלים היא תנועה, וכיבוי ה-transition
   * בלבד הופך אותה מהרמה רכה **לקפיצה** - כלומר גרוע יותר ממה שהיה.
   * המראה עדיין משתנה בריחוף (רקע, צל, טבעת), רק בלי שהמשטח זז.
   */
  .rsite-card:hover,.rsite-course:hover,.rsite-bundle:hover,.rsite-empty:hover,
  .rsite-names>li:hover,.rsite-btn:hover,.rsite-cta:hover{transform:none!important}
}