/* ===== עמוד הבית (8.10.2026, רועי: "להחליף את האתר תדמית באותה שפה של העמוד נחיתה... פורטפוליו ולא מכירות").
   נטען אחרי v2.css ומשנה רק מה שהעמוד הזה צריך. כל השאר יורש מדף החנויות אחד לאחד ===== */

/* ===== פתיחה בקומפוזיציה של ליאב (נמדד 8.10 ב-liavmatzri.co.il: טקסט בעמודה הימנית ומיושר לימין, כ-40% מהרוחב,
   כותרת בארבע שורות; התמונה משמאל בגובה כ-80% מהמסך, יורדת עד התחתית ונחתכת שם, הצורות צמודות אליה).
   התמונה היא זו של "נעים מאוד" (רועי 8.10). 20% ממנה מוסתרים מתחת לקצה הכרטיס, כדי שבגלילה לא ייראה קצה חתוך ===== */
.lp.home .hero{--fh:min(86svh,calc(100svh - 110px),920px,calc(56.5vw - 58px));grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-rows:1fr;justify-items:stretch;text-align:start;align-items:end}
.lp.home .hero-copy{grid-column:1;grid-row:1;align-self:center;justify-items:start;max-width:880px;margin-inline:0;padding-block:24px 64px}
.lp.home .hero h1 .line>span{text-align:start}
.lp.home .hero .lead{margin-inline:0;max-width:46ch;text-wrap:pretty}
/* כותרת בשתי שורות בדיוק במחשב (רועי 8.10: "כותרת עד 2 שורות"); הגודל לא יורד */
@media (min-width:1200px){.lp.home .hero h1 .line{white-space:nowrap}}
.lp.home .hero .ctas{justify-content:flex-start}
.lp.home .hero-me{grid-column:2;grid-row:1;justify-self:center;align-self:end;position:relative;width:auto;margin:0 0 calc(var(--fh) * -.28)}
.lp.home .me-shot{position:relative;z-index:1}
/* הוגדל ב-8%, והחלק שמתחת לקצה הכרטיס גדל בהתאם (רועי 8.10: "הגדל אותי מעט") */
.lp.home .me-shot img{display:block;height:calc(var(--fh) * 1.35);width:auto;max-width:none}
.lp.home .hero-me .hero-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.lp.home .hero-me .hero-shapes-front{z-index:2}
/* המיקומים באחוזים מהתמונה עצמה (רוחבה ~ גובהה × 0.5). כולן בתוך המסך או בתוך הפער שבין התמונה לטקסט, אף אחת לא מאחורי טקסט */
.lp.home .hsp-cloud{--r:-6deg;width:50%;right:-24%;left:auto;top:1%;bottom:auto;translate:0 0;filter:none}
.lp.home .hsp-coil{--r:14deg;width:30%;left:-10%;right:auto;top:24%;bottom:auto;translate:0 0;filter:none}
.lp.home .hsp-stripes{--r:-22deg;--d:11s;width:32%;left:-6%;top:58%;filter:blur(2px)}
.lp.home .hsp-cross{--r:18deg;--d:9s;width:16%;right:-16%;left:auto;top:40%;filter:blur(2px)}
.lp.home .hsp-ball{--r:0deg;width:24%;right:-4%;left:auto;top:56%;bottom:auto;filter:none}
.lp.home .hsp-ball img{opacity:1}
.lp.home .hsp-x{--r:-20deg;--d:10s;width:34%;left:-8%;right:auto;top:70%;bottom:auto;filter:none}
.lp.home .hsp-stripes img{animation-delay:-3s}
.lp.home .hsp-x img{animation-delay:-5s}
@media (max-width:767px){
  .lp.home .hero{--fh:min(62svh,560px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  /* בטלפון בלבד: כותרת ותיאור ממורכזים (רועי 8.10: "כרגע ההירו לא ממורכז, הוא מיושר לימין - תתקן... במובייל בלבד") */
  .lp.home .hero-copy{grid-column:1;grid-row:1;padding-block:8px 24px;justify-items:center;text-align:center}
  .lp.home .hero h1 .line>span{text-align:center}
  .lp.home .hero .lead{margin-inline:auto}
  .lp.home .hero-me{grid-column:1;grid-row:2;margin-top:8px;margin-bottom:calc(var(--fh) * -.2)}
  .lp.home .me-shot img{height:calc(var(--fh) * .95)} /* בטלפון התמונה קטנה בכ-30% (רועי 8.10: "להקטין משמעותית את התמונה שלי"); השקיעה מתחת לקצה הכרטיס נשארת כחמישית מגובהה */
  .lp.home .hero .ctas{justify-content:stretch}
  .lp.home .hsp-stripes,.lp.home .hsp-cross,.lp.home .hsp-x{display:none}
  .lp.home .hsp-cloud{width:46%;right:-18%}
  .lp.home .hsp-coil{width:28%;left:-8%}
  .lp.home .hsp-ball{width:22%;right:-2%}
}

/* איך אני עובד: ארבעה כרטיסים בזיגזג (העיצוב של הבונוסים, רועי 8.10). הרביעי מתנהג כמו השני: ויזואל ומספר משמאל */
.lp.home .bs-card:nth-child(4){margin-inline-start:auto;grid-template-columns:300px 1fr}
.lp.home .bs-card:nth-child(4) .bs-vis{order:-1}
.lp.home .bs-card:nth-child(4) .bs-num{inset-inline-end:auto;inset-inline-start:-.08em}
.lp.home .bs-card:nth-child(4) .bs-shp{left:auto;right:-130px}
@media (max-width:900px){
  .lp.home .bs-card:nth-child(4){grid-template-columns:1fr;width:100%;margin-inline-start:0;border-radius:24px}
  .lp.home .bs-card:nth-child(4) .bs-num{inset-inline-start:auto;inset-inline-end:-.08em}
  .lp.home .bs-card:nth-child(4) .bs-shp{width:230px;left:50%;right:auto;top:-130px;margin:0 0 0 -115px}
  /* פחות ריווח מעל הטקסט, והצורה יוצאת מעל הכרטיס (רועי 8.10) */
  .lp.home .how .bs-card .bs-vis{min-height:96px}
  .lp.home .how .bs-shp{top:-130px}
  .lp.home .how .bs-stack{gap:150px;margin-top:150px}
}

/* שורת הסכמה במקום תיבת סימון, כמו ב-roeinissim.com */
.lp.home .ff-consent{font-size:var(--fs-meta,14px);line-height:1.5;color:var(--grey);text-align:center;margin-top:4px}
.lp.home .ff-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* השורה הקטנה מעל כותרת התהליך */
.lp.home .how-q{grid-column:1/-1;grid-row:1;text-align:center;font-size:var(--fs-lead);line-height:1.28;color:var(--ink-2);margin:clamp(40px,6vw,96px) 0 0}
.lp.home .how .bonus-h{grid-row:2;margin-top:16px}
.lp.home .how .get-cta{grid-column:1/-1;justify-self:center;margin-top:clamp(48px,5vw,72px)}

/* ===== הפרויקטים (8.10 ערב, רועי: "שהפסים יהיו לרוחב כל העמוד... מאחורי המוק-אפ", "שתבליט בכל פעם... בסגול", ו"לשנות את הבמה והכדור בהתאם לצבע הפרויקט").
   כל פרויקט פס מקצה לקצה של המסך; הפעיל נצבע סגול. הלפטופ נעוץ משמאל מעל הפסים (תמונה עם רקע שקוף לכל פרויקט, podium-<slug>.webp).
   הפסים הסגולים בבמה והכדור נצבעים בצבעי האתר הפעיל: שכבת צבע עם מסכה + mix-blend-mode:color, כך שהצל והמרקם נשארים.
   הצבעים (data-c1 לבמה, data-c2 לכדור) נבחרו בעין מצילום של כל אתר ===== */
.lp.home .plap{-webkit-mask-image:none;mask-image:none;transform-origin:50% 72%;will-change:transform}
/* לכל פרויקט תמונה מוכנה של הלפטופ והבמה בצבעי האתר (podium-<slug>.webp, נצבעו מהמקור פיקסל-פיקסל: חלק הסגול בכל פיקסל הוחלף בצבע האתר,
   הכדור נצבע במלואו, וההשתקפויות הסגולות על הלפטופ נוטרלו). מעבר בין פרויקטים = דהייה של התמונה הבאה מעל הנוכחית */
.plap-next{opacity:0;transition:opacity .3s var(--ease)}
.plap-next.on{opacity:1}
.lp.home .stg-idx{margin-inline:calc(var(--pad-x,40px) * -1)}
.lp.home .stg-it{padding-inline:var(--pad-x,40px);transition:background-color .35s var(--ease)}
.lp.home .stg-it .stg-bar::after{display:none}
.lp.home .stg-it:last-child{border-bottom:1px solid var(--line)}
.lp.home .stg-it.on{background:var(--accent)}
.lp.home .stg-it.on .mono,.lp.home .stg-it.on h3{color:#fff}
.lp.home .stg-it.on .tag{color:rgba(255,255,255,.85)}
.lp.home .stg-it.on .stg-bar{background:var(--accent)}
@media (max-width:899px){.lp.home .stg-stage{margin-inline:calc(var(--pad-x,20px) * -1);padding-inline:var(--pad-x,20px)}}
@media (min-width:900px){
  .lp.home .stg{grid-template-columns:minmax(0,1fr);column-gap:0}
  .lp.home .stg-idx{grid-area:1/1}
  .lp.home .stg-it{grid-template-columns:5ch minmax(0,min(34vw,560px));row-gap:6px}
  .lp.home .stg-it .tag{grid-column:2;white-space:normal}
  .lp.home .stg-it.on h3{transform:none}
  .lp.home .stg-stage{grid-area:1/1;justify-self:end;z-index:2;width:calc(var(--lw) * .905);--lw:min(60vw,108svh,1150px)}
}

/* ===== תפריט הבועות (8.10.2026, רועי: BubbleMenu של React Bits "בשפה העיצובית", בכל המסכים, הקפסולה ירדה) =====
   בהאדר: הלוגו בגלולה והמבורגר בעיגול, שניהם בזכוכית ובקו הדק של הקפסולה הקודמת, ומתהפכים בחצי הבהיר דרך המשתנים.
   בפתיחה: הדף מאחור מתכהה ומיטשטש, ועליו חמש גלולות קרם. בדסקטופ 3+2 מוטות, מתחת ל-900 אחת מתחת לשנייה וישרות.
   הריחוף צובע כל גלולה בצבע מהפלטה: סגול/לבן, ענבר/כהה, כהה/קרם. */
.lp.home .lp-hd{--bb-h:48px}
.lp.home .lp-hd .logo,.lp.home .lp-hd .nv-toggle{height:var(--bb-h);min-height:var(--bb-h);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 4px 16px rgba(0,0,0,.12);transition:background .4s var(--ease),border-color .4s var(--ease)}
.lp.home .lp-hd .logo{box-sizing:content-box;width:clamp(110px,9vw,140px);padding:0 18px;align-items:center}
.lp.home .lp-hd .nv-toggle{display:inline-flex;width:var(--bb-h);color:var(--ink)}
.lp.home .lp-hd .hd-cta .pill{min-height:var(--bb-h)}
/* כשהתפריט פתוח הרקע כהה, ולכן הלוגו וההמבורגר לא מתהפכים לגרסה הבהירה כמו בתפריט הקודם */
body.lp.home.nv-open:not(.is-light) .lp-hd .logo .on-dark{opacity:1}
body.lp.home.nv-open:not(.is-light) .lp-hd .logo .on-light{opacity:0}
body.lp.home.nv-open:not(.is-light) .lp-hd .la [fill="white"]{fill:#fff}
body.lp.home.nv-open .lp-hd .nv-toggle{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 20%,transparent);background:color-mix(in srgb,var(--bg) 72%,transparent)}

.bb-menu{position:fixed;inset:0;z-index:55;display:none;align-items:center;justify-content:center;visibility:hidden;background:rgba(20,18,42,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bb-list{list-style:none;margin:0 auto;padding:0 var(--gm);display:flex;flex-wrap:wrap;row-gap:4px;width:100%;max-width:1600px}
.bb-col{display:flex;justify-content:center;flex:0 0 calc(100% / 3);box-sizing:border-box}
.bb-col:nth-child(4):nth-last-child(2){margin-right:calc(100% / 6)}
.bb-pill{--hv-bg:var(--accent);--hv-fg:#fff;width:100%;min-height:160px;padding:clamp(24px,3vw,48px) 0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--light);color:var(--light-ink);font-family:var(--head);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1;white-space:nowrap;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.1);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out)}
.bb-pill.hv-a{--hv-bg:var(--amber);--hv-fg:var(--light-ink)}
.bb-pill.hv-d{--hv-bg:var(--light-ink);--hv-fg:var(--light)}
.bb-lbl{display:inline-flex;align-items:baseline;gap:14px}
.bb-lbl .mono{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.08em;opacity:.6}
.bb-pill:hover,.bb-pill:focus-visible{background:var(--hv-bg);color:var(--hv-fg)}
.bb-pill:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (min-width:900px){
  .bb-pill{transform:rotate(var(--rot,0deg))}
  .bb-pill:hover{transform:rotate(var(--rot,0deg)) scale(1.06)}
  .bb-pill:active{transform:rotate(var(--rot,0deg)) scale(.94)}
}
@media (max-width:899px){
  .bb-menu{align-items:flex-start;padding-top:120px}
  .bb-list{row-gap:16px}
  .bb-col{flex:0 0 100%;margin-right:0!important}
  .bb-pill{min-height:80px;padding:16px 0}
  .bb-pill:hover{transform:scale(1.06)}
  .bb-pill:active{transform:scale(.94)}
}
@media (prefers-reduced-motion:reduce){.bb-pill{transition:background .3s,color .3s}.bb-pill:hover,.bb-pill:active{transform:none}}
@media (prefers-reduced-motion:reduce) and (min-width:900px){.bb-pill:hover,.bb-pill:active{transform:rotate(var(--rot,0deg))}}

/* למה לעבוד איתי (8.10.2026): אותו אזור כמו "כך התהליך עובד" בדף החנויות, עם שלוש תחנות במקום ארבע. כהה — הבהיר מתחיל אחריו */
.why .ba-stn{grid-column:span 4}
.why .ba-track{height:400vh}
@media (max-width:1023px){.why .ba-track{height:340vh}}
/* הוויזואלים של "למה לעבוד איתי" גדולים ב-25% (רועי 8.10: "תגדיל את האימג׳ים"). הקופסה שלהם חסומה בגובה שבין הכותרת לפס,
   אז הם גדלים מעבר לה, החוצה מהטקסט: אל השטח הריק משמאל ולמעלה. בטלפון הפריסה אחרת ולא נגעו */
@media (min-width:768px){.why .ba-sky{transform:scale(1.25);transform-origin:100% 85%}} /* ב-1.35 נגע בפס ההתקדמות ב-1440; כך התחתית נשארת 8 פיקסלים מעליו */
/* המתנפח בצבע של הפרויקט (רועי 8.10): כל 16 הרינדורים פורקו לחלק קבוע (base) ולחלק שתלוי בצבע הפסים (המסכה: כמה מהצבע בכל פיקסל,
   כולל הצל של הפס והאור הצבעוני שהוא מחזיר על הקרם). התמונה = base + צבע הפרויקט × המסכה, והחיבור נעשה ב-plus-lighter.
   החלפת פרויקט = שינוי צבע בדהייה, בלי תמונה לפענח. הפרש ממוצע מהרינדור המקורי: 1.6–2.6 מתוך 255 */
.plap-stage{isolation:isolate}
/* הצל על הרצפה (רועי 8.10: "תתקן את הצל - שיראה מושלם"): ההילה הסגולה-כחולה שהייתה אפויה ברינדור (בהירה וכחולה מהרקע) הוסרה,
   ובמקומה צל שנבנה מקו התחתית של המתנפח והכדור — קו מגע כהה וצר, צל רך שנמס למטה, ואליפסה רחבה מתחתיו. הקנבס גבוה מהבמה (1520)
   כדי שהקצה הרך שלו לא ייחתך */
.plap-shadow{position:absolute;left:0;top:0;width:1400px;height:1520px;max-width:none;pointer-events:none}
.plap-tint{position:absolute;inset:0;background-color:var(--pc,#b8964a);mix-blend-mode:plus-lighter;pointer-events:none;
  -webkit-mask:url(../assets/works-web/mockup/pod/mask.webp?v=4) 0 0/100% 100% no-repeat;mask:url(../assets/works-web/mockup/pod/mask.webp?v=4) 0 0/100% 100% no-repeat;
  transition:background-color .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.plap-tint{transition:none}}
/* בטלפון: בלי הדהייה מתחת לבמה הדביקה (רועי 8.10: "האם הגרדיאנט הזה בחלק התחתון של המוקאפ תקין? לא רוצה שיהיה").
   היא נועדה להעלים בעדינות את הרשימה שגוללת מתחת לבמה, אבל על השורה הפעילה הסגולה היא נראתה כמו כתם כהה שמכסה את שם הפרויקט */
@media (max-width:899px){.lp.home .stg-stage::after{display:none}}

/* "שלוש סיבות": הענן גדול יותר בטלפון (רועי 8.10: "תגדיל את האימג של הענן במובייל") — מ-88% מהמסגרת ל-120%, בערך פי 1.35 */
@media (max-width:767px){.why .ba-v[data-v="1"]{inset:-10%}}