/* ============================================================================
   GroupiApp — home.css  ·  דף הבית בשפת v2 («נועז»)  ·  W-141  ·  22.10.2026
   frontend-engineer · נטען רק ב-index.html, אחרי style.css ו-design-v2.css.

   מה זה: שכבת ההתאמות של דף הבית לשפת v2. ההירו (שם המותג הענק, האשכול הסטטי,
   הכותרת בשורה אחת) הוא הכרעת מנכ"ל מ-22–24.09.2026 ונשאר כמות שהוא; כאן משתנים
   רק מה שמתחתיו ומה שבתוכו שהוא מספר: ההישג-במספרים, הקטלוג, הצעדים, בלוק «מול מה»
   וסגירת הארגונים.

   כללי הקובץ (אותם כללי ברזל של design-v2.css):
     · תכונות לוגיות בלבד (אין left/right).  · אפס צבע גולמי: טוקן, או color-mix של טוקן.
     · אפס z-index מספרי.  · יעד מגע ≥44.  · hover רק תחת (hover:hover) and (pointer:fine).
     · קידומת מחלקות פרטיות: v2-home-.

   ⚠ התוכן לעולם לא מוסתר כברירת מחדל. עד 22.10.2026 ישב כאן מנגנון [data-reveal]
   (style.css §17 + motion.js): הוא הסתיר את כל מה שמתחת להירו עד שגללו אליו, ולכן
   בצילום עמוד מלא, בהדפסה ובתצוגה מקדימה נראו סקשנים ריקים. הוא הוסר מהעמוד.
   במקומו `.v2-home-rise`: תזוזה בלבד (transform), בלי opacity, כך שהתוכן גלוי בכל מצב
   (בלי JS, reduced-motion, "עצירת אנימציות", הדפסה, דפדפן בלי view-timeline). האנימציה
   רק משפרת.
   ========================================================================== */

:root{
  /* גובה בלוק המספר בכרטיס הצעד; גם הניקוב נגזר ממנו, כך שאין מקור אמת שני. */
  --v2-home-step-num-h:112px;
  --v2-home-punch:28px;
}

/* ===== אנימציית עלייה — שיפור בלבד =========================================== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:not(.a11y-nomotion) .v2-home-rise{
      animation:v2-home-rise linear backwards;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    @keyframes v2-home-rise{ from{ transform:translateY(var(--sp-7)) } }
  }
}
@media print{ .v2-home-rise{ animation:none !important } }

/* ===== 1 · ההירו: ההישג במספרים ============================================== */
/* אלה אותם שני קריאונים, אותם מפתחות i18n, אותו נוסח: «60 שנ׳ לפתוח פעילות» ו-«0 ₪ בשלב
   הראשון». הם אומרים מה המוצר עושה, לא כמה אנשים עשו זאת (ch11 §11.1). הצורה: מספר ענק עם כיתוב,
   מופרדים בקו דק כמו שורות בלוח. W-142: המראה עבר ל-style.css (`.hero-stats`, `.m-stat`) — כאן לא נשאר דבר. */

/* ===== 2 · קטלוג «מגוון הפעילויות» =========================================== */
/* תצלומים נטויים (ch07 §7.11.1), לא רשת אריחים שטוחה. הזווית אינה תנועה ולכן אינה
   מתבטלת תחת reduced-motion. התצלום עצמו הוא `.v2-photo`; כאן רק מנטרלים את הטיפול
   הישן של `.showcase-tile img` (פינות, צל, hover) שישב על ה-img לפני שהיה לו מעטפת. */
.showcase{ padding-block:var(--sp-10) calc(var(--sp-10) + var(--sp-5)) }
.showcase .section-h{ font-size:var(--t-poster); line-height:.9 }
.showcase .lede{ font-size:var(--t-lede); margin-block-end:var(--sp-9) }
.showcase-grid{ gap:var(--sp-7) var(--sp-5) }
.showcase-tile{ gap:var(--sp-4) }
.showcase-tile .v2-photo{ inline-size:100%; border-width:4px }
.showcase-tile:nth-child(even) .v2-photo{ --v2-tilt:-3.5deg }
.showcase-tile .v2-photo > img{
  border-radius:0; box-shadow:none; transition:none; aspect-ratio:auto;
}
.showcase-label{ font-size:var(--t-title-row); font-weight:700; line-height:1.25 }
@media (hover:hover) and (pointer:fine){
  .showcase-tile:hover .v2-photo > img{ transform:none; box-shadow:none }
  .showcase-tile .v2-photo{ transition:box-shadow var(--dur-ui) var(--ease-out) }
  .showcase-tile:hover .v2-photo{ box-shadow:var(--shadow-3) }
}

/* ===== 3 · «מול מה אנחנו עומדים» ============================================= */
/* בלוק היפוך הקוטביות נשאר (הקול האחר). נוסף לו מספור גדול ב-Secular One, כמו שעות
   בלוח, והתוכן מתיישר לרשת: מספר · משפט. המספור הוא CSS counter: דקורטיבי בלבד. */
.band .section-h{ font-size:var(--t-poster); line-height:.9; margin-block-end:var(--sp-8) }
.enemy{ counter-reset:v2-home-enemy; padding:var(--sp-4) var(--sp-5) }
@media (min-width:700px){ .enemy{ padding:var(--sp-5) var(--sp-8) } }
.enemy li{
  counter-increment:v2-home-enemy;
  position:relative; padding-block:var(--sp-6);
  padding-inline-start:calc(var(--v2-row-time-w) + var(--sp-4));
  font-size:var(--t-title-row); line-height:1.45;
}
.enemy li::before{
  content:counter(v2-home-enemy, decimal-leading-zero);
  position:absolute; inset-inline-start:0; inset-block-start:var(--sp-6);
  font-family:var(--font-display); font-size:var(--t-time); line-height:1.2; color:var(--yellow);
  font-variant-numeric:tabular-nums lining-nums;
}
@media (min-width:700px){
  .enemy li{ font-size:var(--t-title-lg); line-height:1.25; padding-inline-start:calc(var(--v2-row-time-w) + var(--sp-7)) }
  .enemy li::before{ font-size:var(--t-title-lg); line-height:1.25 }
}

/* ===== 4 · «איך זה עובד»: שלושה כרטיסי כניסה ================================= */
.steps{ padding-block:var(--sp-10) }
.steps .section-h{ font-size:var(--t-poster); line-height:.9; margin-block-end:var(--sp-8) }
.steps .grid3 li{
  position:relative; padding:0; gap:0; overflow:hidden;
  box-shadow:var(--shadow);
}
.steps .grid3 li:hover{ transform:none }
@media (hover:hover) and (pointer:fine){ .steps .grid3 li:hover{ box-shadow:var(--shadow-3) } }
/* גוף הכרטיס: מספר גדול על צהוב, ניקוב מקווקו, ואז הטקסט. */
.steps .grid3 .step-num{
  display:flex; align-items:center; justify-content:flex-start;
  inline-size:auto; block-size:var(--v2-home-step-num-h); padding-inline:var(--sp-7);
  border-radius:0; background:var(--yellow); color:var(--ink);
  font-size:var(--t-stat); line-height:1;
  border-block-end:2px dashed var(--line-strong);
}
.steps .grid3 h3{ padding:var(--sp-6) var(--sp-7) 0; font-size:var(--t-title-lg); line-height:1.05 }
.steps .grid3 p{ padding:var(--sp-3) var(--sp-7) var(--sp-7); font-size:var(--t-body) }
/* שני חריצי הניקוב, בצבע הרקע של העמוד, על קו המקווקו. */
.steps .grid3 li::before,
.steps .grid3 li::after{
  content:""; position:absolute; inset-block-start:calc(var(--v2-home-step-num-h) - var(--v2-home-punch) / 2 + 1px);
  inline-size:var(--v2-home-punch); block-size:var(--v2-home-punch); border-radius:50%; background:var(--bg);
}
.steps .grid3 li::before{ inset-inline-start:calc(var(--v2-home-punch) / -2) }
.steps .grid3 li::after{ inset-inline-end:calc(var(--v2-home-punch) / -2) }

/* ===== 5 · סגירת «ובאותה אפליקציה — גם מפרסמים» ================================ */
/* כרזה צהובה שנייה בעמוד: הכותרת היא הקומפוזיציה, והקישור הוא הפעולה היחידה. */
.v2-home-end{ padding-block:var(--sp-10) calc(var(--sp-10) + var(--sp-5)) }
.v2-home-end .section-h{ font-size:var(--t-poster); line-height:.88; max-inline-size:14ch }
.v2-home-end .lede{ font-size:var(--t-lede); max-inline-size:44ch }
.v2-home-end .btn .v2-ico{ inline-size:20px; block-size:20px }