/* ==========================================================================
   עזר מציון — עמוד נחיתה

   שיטה: --u = יחידה אחת בקנה־המידה של קובץ העיצוב (רוחב 1400), מוגבלת ל־1px,
   כך שהעמוד זהה לעיצוב עד 1400px ואז מפסיק לגדול. לכל מידה יש רצפה (max())
   כדי שבטלפון הטקסט והריווח יהיו של אתר, לא של פוסטר מוקטן.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Stanga'; src:url('fonts/stanga-bold-aaa.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FbEinstein'; src:url('fonts/FbEinstein-Thin.woff2') format('woff2');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FbEinstein'; src:url('fonts/FbEinstein-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --red:#EC2427;
  --red-pat:#EF3C3F;
  --red-txt:#ED2427;
  --yellow:#FDE700;
  --yellow-pat:#FADC00;
  --yellow-lite:#FCEA1C;
  --ink:#000;
  --f-display:'Stanga','Heebo','Arial Hebrew',system-ui,sans-serif;
  --f-body:'FbEinstein','Heebo','Arial Hebrew',system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--red);
  color:var(--ink);
  font-family:var(--f-body);
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
p,h1{margin:0}

.skip{position:fixed;top:8px;left:8px;z-index:99;background:#000;color:#fff;
  padding:.6rem 1rem;border-radius:8px;font-family:var(--f-display);text-decoration:none;
  transform:translateY(-250%);transition:transform .18s ease}
.skip:focus{transform:none}

/* ==========================================================================
   קנה המידה
   ========================================================================== */
.stage-wrap{width:100%;container-type:inline-size}
.stage{
  --u:min(calc(100vw / 1400), 1px);              /* fallback */
  position:relative;
  overflow:hidden;
  /* isolation removed for headless-screenshot compat */
}
@supports (width:1cqw){ .stage{ --u:min(0.0714285714cqw, 1px); } }

.stage{
  --stroke:max(1.8px, calc(2 * var(--u)));

  /* ---- טיפוגרפיה: ערך העיצוב, עם רצפה קריאה בטלפון ---- */
  --f-head:max(30px,   calc(77.3 * var(--u)));
  --f-sub :max(16.5px, calc(55.8 * var(--u)));
  --f-rom :max(24px,   calc(72 * var(--u)));
  --f-cta :max(19px,   calc(35.1 * var(--u)));
  --f-fine:max(12px,   calc(23.3 * var(--u)));

  /* ---- אלמנטים ---- */
  /* הטלפון לא גדול מרוחב העיצוב ולא גבוה מהמסך — 0.5656 = 618/1092.6 */
  --phone-fit:calc((100svh - 130px) * 0.5656);
  --phone-w:max(300px, min(calc(618 * var(--u)), var(--phone-fit)));
  --cta-w  :max(220px, calc(267.4 * var(--u)));
  --cta-h  :max(56px,  calc(81    * var(--u)));
  --dome-v :max(300px, calc(787   * var(--u)));
  /* התמונה: יחס גובה/רוחב 1.3784. --photo-cut הוא כפולה של הרוחב,
     וקובע כמה נחתך בקו האדום/צהוב */
  --photo-w:calc(520 * var(--u));
  --photo-cut:0.07;
  --photo-x:calc(50% - 560 * var(--u));

  /* ---- קצב אנכי ---- */
  --pad-red-top  :max(40px, calc(134.4 * var(--u)));
  --pad-red-bot  :max(46px, calc(153   * var(--u)));
  --gap-boxes    :max(64px, calc(282.1 * var(--u)));
  --pad-film-top :max(48px, calc(107   * var(--u)));
  --gap-phone-cta:max(42px, calc(88.5  * var(--u)));
  --gap-cta-fine :max(16px, calc(35.4  * var(--u)));
  --pad-foot     :max(64px, calc(159.8 * var(--u)));
}

/* ==========================================================================
   דפוס הרקע
   ========================================================================== */
.pattern{position:absolute;inset:0;z-index:0;pointer-events:none}
.pattern--red{
  background-color:var(--red-pat);
  -webkit-mask:url('assets/pattern.svg') center calc(-228 * var(--u)) / 104% auto no-repeat;
          mask:url('assets/pattern.svg') center calc(-228 * var(--u)) / 104% auto no-repeat;
}
.pattern--yellow{
  background-color:var(--yellow-pat);
  -webkit-mask:url('assets/pattern.svg') center calc(-268 * var(--u)) / 125% auto no-repeat;
          mask:url('assets/pattern.svg') center calc(-268 * var(--u)) / 125% auto no-repeat;
}
.pattern--yellow2{
  background-color:var(--yellow-lite);
  -webkit-mask:url('assets/pattern.svg') center calc(530 * var(--u)) / 125% auto no-repeat;
          mask:url('assets/pattern.svg') center calc(530 * var(--u)) / 125% auto no-repeat;
}

/* ==========================================================================
   שלושת המסכים
   ========================================================================== */
.sec{position:relative}
.sec--hero{
  z-index:1;
  background:var(--red);
  padding-block:var(--pad-red-top) max(46px, calc(140.1 * var(--u)));
}
.sec--meet{
  z-index:1;
  background:var(--red);
  padding-block:max(40px, calc(142 * var(--u))) max(46px, calc(153 * var(--u)));
}

.logo{
  position:absolute;z-index:4;
  top:max(16px, calc(29.6 * var(--u)));
  left:max(16px, calc(35.8 * var(--u)));
  width:max(74px, calc(106.2 * var(--u)));
  height:auto;
}

/* ---------- עננים ---------- */
.clover{
  position:absolute;
  width:calc(434.8 * var(--u));
  aspect-ratio:436.8 / 437.2;
  background:url('assets/clover.svg') center/contain no-repeat;
  pointer-events:none;
}
.clover--1{z-index:1; top:calc(-146.9 * var(--u)); left:calc(-127   * var(--u))}
.clover--2{z-index:1; top:calc( 272.8 * var(--u)); right:calc(-102.7 * var(--u))}
.clover--3{z-index:4; top:calc(-150.7 * var(--u)); left:calc(-154.5 * var(--u))}
.clover--4{z-index:1; top:calc(-94.2 * var(--u)); left:calc(-112.5 * var(--u))}

/* ---------- קופסאות צהובות ---------- */
.box{
  position:relative;z-index:2;
  background:var(--yellow);
  border:var(--stroke) solid var(--ink);
  border-radius:max(12px, calc(19 * var(--u)));
}
.box--speech{
  width:calc(1260 * var(--u));
  margin-inline:auto;
  padding:max(20px, calc(36.4 * var(--u)))
          max(16px, calc(46.2 * var(--u)))
          max(24px, calc(66.5 * var(--u)));
}
.box--itai{
  width:calc(1259.9 * var(--u));
  margin-inline:auto;
  left:calc(-27.55 * var(--u));            /* ההיסט השמאלי שבעיצוב */
  min-height:calc(355.5 * var(--u));
  display:flex;align-items:center;
  padding:max(20px, calc(18 * var(--u)))
          max(20px, calc(84.4 * var(--u)))
          max(20px, calc(18 * var(--u)))
          max(16px, calc(60 * var(--u)));
}

/* ---------- כותרת ---------- */
.pill{
  background:#fff;
  border:var(--stroke) solid var(--ink);
  border-radius:max(8px, calc(12.4 * var(--u)));
  padding:max(11px, calc(11 * var(--u))) max(8px, calc(7 * var(--u)));
  text-align:center;
}
.headline{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--f-head);
  line-height:1.06;
  letter-spacing:-.011em;
  text-wrap:balance;
}
.t-red{color:var(--red-txt)}

.sub{
  text-align:center;
  margin-block-start:max(14px, calc(26 * var(--u)));
  font-size:var(--f-sub);
  line-height:1.2;
}
.sub__thin,.sub__med{display:block}
.sub__thin{font-weight:200}
.sub__med{font-weight:500;margin-block-start:.12em}

/* ---------- טקסט רום ---------- */
.itai-last{display:inline-flex;align-items:center;gap:.28em}
.itai-arrow{width:auto;height:.62em;flex:none}

.itai-text{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--f-rom);
  line-height:1.06;
  color:var(--red-txt);
  text-align:start;
}

/* ---------- רום (נחתך בדיוק בקו האדום/צהוב, כמו בעיצוב) ---------- */
.itai-clip{
  position:absolute;z-index:3;inset:0;
  overflow:hidden;pointer-events:none;
}
.itai-photo{
  position:absolute;
  left:var(--photo-x);
  bottom:calc(-1 * var(--photo-cut) * var(--photo-w));
  width:var(--photo-w);
  filter:drop-shadow(calc(5 * var(--u)) calc(9 * var(--u)) calc(13 * var(--u)) rgba(70,15,10,.32));
}
.itai-photo img{width:100%;height:auto}

/* ==========================================================================
   סקשן צהוב — סרטון + כפתור
   ========================================================================== */
.film{
  position:relative;z-index:2;              /* מעל האדום, כדי שהענן יחצה את הקו */
  background:var(--yellow);
  padding-block:var(--pad-film-top) var(--pad-foot);
}

/* כיפה אדומה — אליפסה שתמיד חוצה את כל הרוחב */
.dome{
  position:absolute;z-index:1;
  left:50%;
  transform:translateX(-50%);
  width:max(127.4%, calc(1783 * var(--u)));
  height:calc(2.2677 * var(--dome-v));
  bottom:calc(var(--dome-v) - 2.2677 * var(--dome-v));
  border-radius:50%;
  background:var(--red);
  border:var(--stroke) solid var(--ink);
}

/* ---------- טלפון ---------- */
.phone{
  position:relative;z-index:2;
  width:var(--phone-w);
  aspect-ratio:618 / 1092.6;
  margin-inline:auto;
  filter:drop-shadow(0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(95,65,0,.24));
}
.phone__frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.phone__screen{
  position:absolute;z-index:1;
  top:50%;left:50%;
  width:77.2%;height:92.08%;
  transform:translate(-50%,-50%) rotate(5.62deg);
  border-radius:11.5% / 5.46%;
  overflow:hidden;
  background:#111;
}

/* ---------- נגן ---------- */
.vid{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;padding:0;margin:0;border:0;
  background:#111;cursor:pointer;
}
.vid__poster{width:100%;height:100%;object-fit:cover}
.vid__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:24%;aspect-ratio:1;
  transition:transform .18s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.vid__play svg{width:100%;height:100%}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.08)}
.phone__screen video,.phone__screen iframe{
  display:block;width:100%;height:100%;border:0;object-fit:cover;background:#111;
}

/* ---------- שורת הסרטון + הכפתור ---------- */
.film-row{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
}
.film-spacer{display:none}

.foot{text-align:center;padding-block-start:var(--gap-phone-cta)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  gap:max(10px, calc(12 * var(--u)));
  min-width:var(--cta-w);
  min-height:var(--cta-h);
  padding-inline:max(22px, calc(20 * var(--u)));
  background:var(--ink);color:#fff;
  border-radius:max(12px, calc(19 * var(--u)));
  font-family:var(--f-display);font-weight:700;
  font-size:var(--f-cta);line-height:1;
  text-decoration:none;
  box-shadow:0 max(3px, calc(3 * var(--u))) max(10px, calc(9 * var(--u))) rgba(0,0,0,.24);
  transition:transform .16s ease, background-color .16s ease;
}
.cta:hover{transform:translateY(-2px) scale(1.02);background:#141414}
.cta:active{transform:translateY(0) scale(.99)}
.cta:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.cta__arrows{width:auto;height:.6em;flex:none}

.fine{
  margin-block-start:var(--gap-cta-fine);
  padding-inline:6cqw;
  color:var(--ink);
  font-weight:200;
  font-size:var(--f-fine);
  line-height:1.45;
}

/* ---------- רמז גלילה (מובייל בלבד) ---------- */
.scroll-cue{display:none}

/* ==========================================================================
   דסקטופ רחב — הכפתור משמאל לטלפון, כדי שיראו את שניהם בלי לגלול
   ========================================================================== */
@media (min-width:900px){
  .film-row{flex-direction:row;align-items:center;justify-content:center}
  .film-spacer,.foot{display:flex;flex:1 1 0;min-width:0}
  .film-spacer{visibility:hidden}
  .foot{
    flex-direction:column;align-items:center;justify-content:center;
    padding-block-start:0;
    gap:var(--gap-cta-fine);
  }
  .fine{margin-block-start:0;max-width:16em;margin-inline:auto;padding-inline:0;text-align:center}
}

/* ==========================================================================
   מובייל — שלושה מסכים, ביט אחד לכל גלילה
   ========================================================================== */
@media (max-width:760px){
  html{scroll-snap-type:y proximity}
  .sec{
    min-height:100svh;
    scroll-snap-align:start;
    display:flex;flex-direction:column;
  }

  .stage{
    --f-head:40px;                    /* גדול משמעותית — הכותרת נשברת לשלוש שורות */
    --f-sub :20px;
    --f-rom :max(23px, 7.1cqw);   /* יחסי לרוחב, כדי שהיחס לילד יישמר */
    --phone-w:max(min(340px, 84cqw), calc(618 * var(--u)));
    --pad-red-top:96px;
    --cta-w:min(86cqw, 420px);
    --cta-h:max(66px, 17cqw);
    --f-cta:max(23px, 6cqw);
  }

  /* ---- מסך 1: הכותרת ---- */
  .sec--hero{justify-content:center;padding-block:96px 60px}
  .logo{width:62px;top:18px;left:18px}
  .headline{line-height:1.12}
  .headline .hl-a{display:block}
  .sub{line-height:1.34;margin-block-start:18px}
  .sub__med{margin-block-start:.36em}
  .box--speech{width:92cqw;padding:20px 16px 24px}
  .pill{padding:12px 8px}

  .scroll-cue{
    display:block;position:absolute;z-index:5;
    bottom:104px;left:50%;translate:-50% 0;
    width:40px;opacity:.9;
    animation:cue 1.9s ease-in-out infinite;
    transition:opacity .3s ease;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
  }
  .is-scrolled .scroll-cue{opacity:0}
  @keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

  /* ---- מסך 2: רום ----
     גם הקופסה וגם הילד מעוגנים לתחתית הסקשן ביחידות רוחב (cqw),
     כך שהיחס ביניהם זהה בכל גובה מסך והילד לעולם לא מכסה את הטקסט */
  .sec--meet{min-height:88svh;padding:0}
  /* הקופסה בזרימה רגילה בראש המסך, ורום ממלא את מה שנשאר מתחתיה.
     כך הדפדפן מבטיח שהם לא יתנגשו — בלי מספרי קסם ובכל גובה מסך. */
  .box--itai{
    position:static;
    width:92cqw;
    margin:7cqw 4cqw 0 auto;
    min-height:0;
    display:block;
    padding:18px 5cqw;
  }
  .itai-text{line-height:1.16}

  .itai-clip{
    position:relative;inset:auto;
    flex:1 1 auto;min-height:0;
    margin-block-start:4cqw;
  }
  .itai-photo{
    position:absolute;inset:0;
    width:auto;
  }
  .itai-photo img{
    width:100%;height:100%;
    object-fit:contain;
    object-position:bottom center;
  }

  /* ---- העננים מאחורי הקופסאות ---- */
  .clover{z-index:1}
  .clover--1{top:-10cqw;  left:-10cqw}
  .clover--2{top:19cqw;   right:-11cqw}
  .clover--3{top:auto;    bottom:24cqw; left:-12cqw}
  .clover--4{top:-14cqw;  left:-9cqw}

  /* ---- מסך 3: הסרטון ---- */
  .film{justify-content:center}
  .film-row{margin-block:auto}
  .cta{
    border-radius:999px;
    padding-inline:6cqw;
    gap:14px;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
  }
  .fine{line-height:1.45;padding-inline:6cqw}
}

/* ==========================================================================
   אנימציות כניסה
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(clamp(14px, 2cqw, 30px))}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.75,.3,1)}

/* ==========================================================================
   כפתור צף
   ========================================================================== */
.sticky-cta{
  position:fixed;z-index:50;
  bottom:max(14px, env(safe-area-inset-bottom));
  left:0;right:0;
  width:max-content;max-width:88vw;
  margin-inline:auto;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;
  background:var(--ink);color:#fff;
  border:2px solid var(--yellow);
  border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;transform:translateY(150%);
  transition:opacity .28s ease, transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.sticky-cta.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.sticky-cta svg{height:.64em;width:auto;flex:none}
/* בדסקטופ הכפתור הגדול ממילא לצד הטלפון */
@media (min-width:761px){ .sticky-cta{display:none} }

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.is-in{opacity:1;transform:none;transition:none}
  .scroll-cue{animation:none}
  .cta,.sticky-cta,.vid__play{transition:none}
}