/* ============ 01 · הירו ============
   Every number below is read off the Figma frames 277:84 (desktop 1280×860)
   and 277:118 (mobile 390×844). Positions are expressed as % of the stage so
   the section flexes between 1200px and 1280px without breaking the composition. */

.hero{
  position:relative;
  background:var(--cream);
  overflow:hidden;
  isolation:isolate;
}
.hero__stage{
  position:relative;
  width:100%;
  max-width:1280px;
  height:860px;
  margin-inline:auto;
}

/* --- atmosphere --- */
.hero__glow,.hero__glow-top{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.hero__glow{display:none;}
.hero__glow-top{display:none;}                /* mobile only */

/* --- logo --- */
.hero__logo{
  position:absolute;
  /* על הגריד: אותו --margin בדיוק כמו הקצה הימני של הטקסט והכפתור.
     בפיגמה הלוגו ב-98 והטקסט ב-108 - הפרש של 8px שלא נראה לעין
     אבל שובר את הסימטריה. בקוד שניהם 100 מדויק */
  left:var(--margin);top:48px;
  width:166px;height:auto;
  z-index:3;
  /* a ולא img - הלוגו לחיץ וחוזר לראש הדף. display:block כי עוגן הוא
     inline כברירת מחדל, ורוחב על אלמנט inline לא נתפס */
  display:block;
}
.hero__logo img{width:100%;height:auto;display:block;}

/* --- Tal --- */
.hero__tal{
  position:absolute;
  left:var(--margin);top:171px;
  /* height:auto בלי object-fit - התמונה לעולם לא נחתכת, היא רק
     משנה גודל. טל ביקש שיראו את כל הקאדר כולל הירכיים */
  width:calc((100% - 3*var(--margin)) * .54);height:auto;
  /* אותו רדיוס כמו כל תמונה בדף - התמונה לא חריגה מהשפה של האתר */
  border-radius:var(--r-media);
  z-index:1;
}

/* --- the floor that dissolves the navy into the cream of section 02 ---
   ממוקם ביחס ל-.hero ולא ביחס לבמה, ולכן נפרס על 100% מרוחב המסך
   בכל רזולוציה - גם מעל 1280 - ולא נעצר בשולי הבמה */
.hero__scrim{display:none;}
.hero__fade{display:none;}

/* --- copy --- */
.hero__copy{
  position:absolute;
  right:var(--margin);top:171px;
  width:calc((100% - 3*var(--margin)) * .54);
  z-index:4;
  /* flex-start בעברית = ימין. flex-end היה דוחף את הפסקה הצרה שמאלה
     ושובר את הקו הימני המשותף של שלוש השורות */
  display:flex;flex-direction:column;align-items:flex-start;
  /* מרווח אחד לכל הפערים: כותרת, פסקה, כפתור */
  gap:28px;
  text-align:right;
}

/* ---- מילוי גרדיאנט על טקסט, בדיוק כמו בפיגמה ----
   שני המילויים נלקחו מה-segments של שכבות הטקסט עצמן בפיגמה,
   לא מהעין. background-clip:text צובע את הגליפים בלבד. */
/* הערכים למטה נדגמו מהרנדר של פיגמה פיקסל-פיקסל, ולא הועתקו מעצירות
   הגרדיאנט הגולמיות: בפיגמה הגרדיאנט נמתח על כל תיבת הטקסט (690px),
   והמילים הצבועות רואות רק חלק ממנו. דגימה נותנת את הצבע האמיתי שנראה בעין. */
.grad-sky{color:var(--sky-deep);}
.grad-gold{color:var(--sky-deep);font-weight:inherit;}


.hero h1{
  font-family:var(--f-head);font-weight:800;
  font-size:clamp(42px,3.6vw,49px);line-height:1.12;
  color:var(--navy);
  letter-spacing:-.015em;
  margin:0;
}
/* ---- שלוש ההבטחות ----
   flex-wrap ולא grid: שתי השורות הקצרות מסתדרות מעצמן זו לצד זו
   והשלישית יורדת מתחתן, בדיוק כמו במקור של טל, בלי לנעול מספר
   פריטים לשורה. הוי בגודל קבוע כדי שכל השורות יתחילו על אותו ציר */
.hero__checks{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 32px;
  max-width:520px;
}
.hero__checks li{
  display:flex;align-items:center;
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:32px;
  /* שחור ולא נייבי, ובלי תכלת על הוי: בקשה מפורשת של טל.
     התכלת בהירו שמורה לשורה השנייה בכותרת, וכשגם הצ׳קליסט תכלת
     יש שני מוקדים באותו גובה עין */
  color:var(--ink);
}
.hero__v{
  display:inline-block;width:1.15em;flex:none;
  margin-inline-end:.3em;
  color:var(--ink);font-weight:800;
}
/* השורות הן block ולא inline. transform פשוט לא חל על אלמנט inline,
   ולכן שורה עטופה ב-span רגיל הייתה מקבלת רק את ה-opacity ולא את
   התנועה כלפי מעלה - חצי אנימציה שנראית כמו תקלה */
.hero h1 .enter{display:block;}

.hero__cta-slot{position:static;z-index:5;}
.hero .cta{min-width:289px;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .hero__stage{
    height:auto;
    display:flex;flex-direction:column;align-items:center;
    /* טל ביקש שהתמונה תיכנס יותר לפריים במובייל. כל מה שמעליה
       התהדק: הריפוד העליון, המרווח מתחת ללוגו, המרווחים בתוך
       הטקסט והמרווח מעל התמונה - בלי להוריד שום תוכן */
    padding-top:12px;
    max-width:390px;
    /* same as clipsContent on the Figma mobile frame - the glows bleed past 390
       by design and must be cut at the frame edge, not allowed to widen the page */
    overflow:hidden;
  }

  /* Both glows are wider than the 390 frame in Figma. Sized in px and centred on
     the stage so they can never widen the document - in RTL a document even one
     pixel wider than the viewport opens scrolled to the right, i.e. cut off. */
  .hero__glow,.hero__glow-top{display:none;}

  .hero__logo{
    position:static;
    left:auto;right:auto;top:auto;
    order:1;margin:0 0 20px;width:133px;
  }

  .hero__copy{
    position:static;
    right:auto;left:auto;top:auto;transform:none;
    order:2;width:var(--content);
    align-items:flex-start;text-align:right;
    gap:18px;
  }
  /* שני הוי הראשונים באותה שורה והשלישי בשורה משלו, צמודים לימין:
     שלוש שורות מלאות דחפו את תמונת ההירו מתחת לקו המסך */
  .hero__checks{gap:10px 12px;max-width:342px;}
  .hero__checks li:nth-child(3){flex-basis:100%;}
  /* 20 ולא 22: חריגה מודעת מרצפת הגודל, כמו בגלולות של s03 - זה
     המחיר של שתי השורות הראשונות באותה שורה. הוי מתהדק באותו יחס */
  .hero__checks li{font-size:20px;line-height:28px;}
  .hero__v{width:1em;margin-inline-end:.25em;}

  /* הכפתור לבדו במרכז, הטקסט נשאר צמוד לימין. במובייל הכפתור צר
     מרוחב העמודה, ובצד ימין הוא נקרא כעוד שורת טקסט ולא כפעולה.
     align-self ולא text-align: העמודה עצמה נשארת flex-start */
  .hero__cta-slot{align-self:center;}
  .hero h1{font-size:var(--h1);line-height:var(--h1-lh);}   /* Figma says 40 - raised to 50 so
                                                  ק ן ף do not clip in the browser */
    /* One CTA element, not two. On mobile it lifts out of the copy block and
     sits where Figma's "Sticky CTA bar" puts it, above the fade. Same element
     means the wording can never drift between breakpoints. */
  /* רצועה ברוחב מלא עם מרכוז ב-flex, לא ב-translate: הכפתור נשאר במרכז
     המדויק בכל רוחב מסך, וגם כשאנימציית הכניסה כותבת transform על הרצועה */
  .hero__tal{
    position:static;
    left:auto;top:auto;
    order:3;margin-top:18px;
    /* רוחב מלא של הבמה ולא רוחב התוכן: הפסקה ירדה, והתמונה
       היא מה שנשאר לעשות את הרושם הראשון */
    width:100%;
  }

  .hero__scrim,.hero__fade{display:none;}
}