/* ============ 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:linear-gradient(180deg,#16203a 0%,#0b1020 100%);
  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{                                  /* Figma "Glow / sky" */
  left:-7.58%;top:166px;width:59.4%;height:700px;
  background:radial-gradient(closest-side,
    rgba(121,148,203,.30) 0%,
    rgba(121,148,203,.10) 55%,
    rgba(121,148,203,0) 100%);
}
.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:1.33%;top:171px;
  width:41.5%;height:auto;
  z-index:1;
}

/* --- the floor that dissolves the navy into the cream of section 02 ---
   ממוקם ביחס ל-.hero ולא ביחס לבמה, ולכן נפרס על 100% מרוחב המסך
   בכל רזולוציה - גם מעל 1280 - ולא נעצר בשולי הבמה */
.hero__scrim{display:none;}
.hero__fade{                                  /* Figma "Fade / hero floor" */
  position:absolute;
  left:0;right:0;bottom:-50px;height:258px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 21.6%,
    rgba(255,255,255,.34) 43.8%,
    rgba(255,255,255,.68) 54.8%,
    rgba(255,255,255,.94) 62.5%,
    rgba(255,255,255,1) 75.5%);
  z-index:2;pointer-events:none;
}

/* --- copy --- */
.hero__copy{
  position:absolute;
  right:var(--margin);top:171px;
  width:53.9%;
  z-index:4;
  /* flex-start בעברית = ימין. flex-end היה דוחף את הפסקה הצרה שמאלה
     ושובר את הקו הימני המשותף של שלוש השורות */
  display:flex;flex-direction:column;align-items:flex-start;
  gap:22px;
  text-align:right;
}
.hero__eyebrow{
  font-family:var(--f-head);font-weight:400;
  font-size:24px;line-height:25px;
  color:#fff;
  margin:0;
}
.hero__eyebrow strong{font-weight:700;}

/* ---- מילוי גרדיאנט על טקסט, בדיוק כמו בפיגמה ----
   שני המילויים נלקחו מה-segments של שכבות הטקסט עצמן בפיגמה,
   לא מהעין. background-clip:text צובע את הגליפים בלבד. */
/* הערכים למטה נדגמו מהרנדר של פיגמה פיקסל-פיקסל, ולא הועתקו מעצירות
   הגרדיאנט הגולמיות: בפיגמה הגרדיאנט נמתח על כל תיבת הטקסט (690px),
   והמילים הצבועות רואות רק חלק ממנו. דגימה נותנת את הצבע האמיתי שנראה בעין. */
.grad-sky{                                    /* Figma: "תהליך החיטוב האחרון" */
  background-image:linear-gradient(90deg,#8396bf 0%,#90a1c5 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.grad-gold{                                   /* Figma: "ועפה על הגוף שלך" */
  background-image:linear-gradient(90deg,
    #f5dca5 0%, #d9b369 25%, #d9ae5c 42%, #dba848 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* אם הדפדפן לא תומך ב-background-clip:text - הטקסט חוזר לזהב מלא ולא נעלם */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-sky{background-image:none;color:#a8bae0;}
  .grad-gold{background-image:none;color:#e8c078;}
}

.hero h1{
  font-family:var(--f-head);font-weight:800;
  font-size:56px;line-height:60px;
  color:#fff;
  letter-spacing:-.015em;
  margin:0;
}
.hero__sub{
  font-family:var(--f-head);font-weight:700;
  font-size:44px;line-height:50px;
  color:#fff;
  max-width:467px;
  margin:0;
}
/* השורות הן block ולא inline. transform פשוט לא חל על אלמנט inline,
   ולכן שורה עטופה ב-span רגיל הייתה מקבלת רק את ה-opacity ולא את
   התנועה כלפי מעלה - חצי אנימציה שנראית כמו תקלה */
.hero h1 .enter,
.hero__sub .enter{display:block;}

/* ---- לתת-כותרת אנימציה משלה ----
   הכותרת עולה למעלה, והתת-כותרת עולה אליה שורה אחרי שורה מתוך חלון
   סגור, כאילו הטקסט נדחף כלפי מעלה מאחורי קו. ההפרש בין השורות גדול
   (220ms) כדי שהעין תספיק לקרוא כל שורה לפני שהבאה מתחילה.
   transform בלבד - תכונה שהדפדפן מריץ על ה-GPU, כלומר אפס עלות
   על הגלילה */
.hero__line{
  display:block;overflow:hidden;
  /* הריפוד והמרג'ין השלילי מבטלים זה את זה בפריסה, אבל נותנים לחלון
     מקום לאותיות היורדות - ך, ן, ף - שאחרת נחתכות בקצה התחתון */
  padding-bottom:.16em;margin-bottom:-.16em;
}
.js .hero__sub .enter{
  opacity:1;
  transform:translateY(108%);
}
.js .hero.is-ready .hero__sub .enter{
  transform:translateY(0);
  transition:transform .68s var(--ease-out) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .js .hero__sub .enter{transform:none;}
  .hero__line{overflow:visible;}
}
.hero__cta-slot{
  position:absolute;
  right:var(--margin);top:536px;
  z-index:5;
}
.hero .cta{min-width:289px;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .hero__stage{
    height:844px;
    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{
    left:50%;transform:translateX(-50%);
    top:430px;width:500px;height:440px;
    background:radial-gradient(closest-side,
      rgba(121,148,203,.42) 0%,
      rgba(121,148,203,.14) 55%,
      rgba(121,148,203,0) 100%);
  }
  .hero__glow-top{
    display:block;
    left:50%;transform:translateX(-50%);
    top:-130px;width:460px;height:340px;
    background:radial-gradient(closest-side,
      rgba(121,148,203,.20) 0%,
      rgba(121,148,203,0) 100%);
  }

  /* מרכוז בלי transform. הלוגו והכפתור נושאים את מחלקת .enter, ואנימציית
     הכניסה כותבת transform משלה - כל מרכוז שמבוסס translateX היה נמחק
     ברגע שהאנימציה מתחילה, והאלמנט היה קופץ חצי רוחב ימינה */
  .hero__logo{
    left:0;right:0;margin-inline:auto;
    top:19px;width:133px;
  }

  .hero__copy{
    right:auto;left:50%;transform:translateX(-50%);
    top:102px;width:342px;
    align-items:center;text-align:center;
    gap:16px;
  }
  .hero__eyebrow{font-size:24px;line-height:25px;}
  .hero h1{font-size:44px;line-height:50px;}   /* Figma says 40 - raised to 50 so
                                                  ק ן ף do not clip in the browser */
  .hero__sub{
    font-weight:600;
    font-size:29px;line-height:35px;
    max-width:337px;
  }
  /* 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__cta-slot{
    left:0;right:0;
    display:flex;justify-content:center;
    top:723px;
  }

  .hero__tal{
    left:8.97%;top:422px;
    width:83.3%;
  }

  .hero__scrim{                                /* Figma "Scrim" */
    display:block;position:absolute;
    left:0;right:0;bottom:0;height:220px;
    background:linear-gradient(180deg,
      rgba(16,23,40,0) 0%,
      rgba(16,23,40,.70) 60%,
      rgba(16,23,40,.97) 100%);
    z-index:2;pointer-events:none;
  }
  .hero__fade{
    top:auto;bottom:0;height:274px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 34%,
      rgba(255,255,255,.34) 60%,
      rgba(255,255,255,.68) 78%,
      rgba(255,255,255,.94) 93%,
      rgba(255,255,255,1) 100%);
    z-index:3;
  }
}

/* the mobile CTA bar - pinned inside the hero, as in Figma */
@media (max-width:1199px){
  .hero__stage::after{content:none;}
}