/* NDIGIT v2 · HERO "מותג אחד. בכל מקום." (נתי 29.09, מתוך _mock-hero-b.html). ה־HERO הקודם (לוח 12 התוצרים) בהיסטוריה של גיט, לפני commit זה */
/* מוקאפ כיוון B, גרסה 2 (אחרי בקרת צופה: הגרסה עם 7 אפקטים נראתה כמו WordArt).
   מהלך אחד בלבד: "מותג אחד." נקייה ומלאה. "בכל מקום." ממולאת מבפנים בעבודות אמיתיות, שמתחלפות לאט.
   העין קוראת כותרת נקייה, ורק במבט שני מגלה שבתוך האותיות יש אריזה, שלט, דלת ופוסט */
.hb { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 110px var(--gut) 64px; overflow: clip; }
.hb-by { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 500 14px/1 var(--text); color: var(--soft); }
.hb-by::before { content: ""; width: 26px; height: 1px; background: var(--lime); }
.hb-h { margin: 0; font: 700 clamp(120px, 17vw, 330px)/.82 var(--display); letter-spacing: -.015em; }
.hb-h .ln { display: block; white-space: nowrap; }
.hb-h .a { color: var(--bone); }
.hb-h .a i, .hb-h .fill i { font-style: normal; color: var(--lime); -webkit-text-fill-color: var(--lime); }
/* השורה השנייה: כמה עותקים של אותו טקסט אחד על השני, כל אחד ממולא בעבודה אחרת. מתחלפים בדעיכה */
.hb-h .b { position: relative; display: block; }
.fill { display: block; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 100% auto; background-position: 50% 45%; clip-path: inset(0 0 0 100%); }
.fill + .fill { position: absolute; inset: 0; }
/* מעבר: "ניגוב" מהיר מימין לשמאל, כמו ערימת הדפסות שמתחלפת. הנוכחית נשארת מתחת עד שהבאה מכסה אותה */
.fill.on { clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path .62s cubic-bezier(.77, 0, .18, 1); animation: hb-push 1.7s ease-out both; }
.fill.was { clip-path: inset(0 0 0 0); z-index: 1; }
@keyframes hb-push { from { background-size: 118% auto; } to { background-size: 104% auto; } }
/* פס ליים דק שרץ עם הניגוב */
.hb-bar { position: absolute; z-index: 3; top: 6%; bottom: 10%; right: -10%; width: 4px; background: var(--lime); pointer-events: none; font-style: normal; }
.hb-cap { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 500 14px/1 var(--text); color: var(--soft); }
.hb-cap::before { content: ""; width: 26px; height: 1px; background: var(--line); }
.hb-cap b { color: var(--bone); transition: opacity .4s; }
.hb-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 60px; margin-top: 40px; }
.hb-sub { max-width: 34ch; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--soft); }
.hb-sub b { color: var(--bone); }
.hb-cta { display: flex; align-items: center; gap: 28px; }
.hb-h { position: relative; z-index: 2; }
/* הרגע: בריחוף (או נגיעה) על "בכל מקום." העבודה פורצת מהאותיות לפריים מלא מאחורי הכותרת */
.hb-reveal { position: absolute; z-index: 1; inset: 0; margin: 0; pointer-events: none; }
.hb-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); filter: blur(14px) brightness(.6); transition: opacity .9s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1), filter 1.1s ease; }
/* פתיחה רכה (נתי: לא ריבוע שגדל): העבודה מופיעה על כל הפריים מטשטוש וזום, ומתחדדת. בזמן הריחוף העבודות ממשיכות להתחלף בהצלבה */
.hb.out .hb-reveal img.on { opacity: 1; transform: scale(1); filter: blur(0) brightness(.62); }
.hb.out .hb-bar { opacity: 0; }
.hb-h .b::after { transition: opacity .6s ease; opacity: 0; }
.hb.out .hb-h .b::after { opacity: 1; }
.fill { transition-property: clip-path, opacity; } .hb.out .fill { opacity: 0 !important; transition: opacity .6s ease; }
.hb-h .b::after { content: attr(data-t); position: absolute; inset: 0; color: var(--bone); white-space: nowrap; pointer-events: none; }
.hb-h .b { cursor: zoom-in; }
.hb.out .hb-h .b { cursor: zoom-out; }
.hb-try { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; font: 700 12px/1 var(--text); color: var(--bone); background: none; cursor: pointer; min-height: 32px; }
.hb.out .hb-try { border-color: var(--lime); color: var(--lime); }
/* משחק בכותרת: כניסה אות אחרי אות מתחת לקו, והאותיות מגיבות לעכבר כמו הקלידים בפוטר */
.hb-h .a { overflow: visible; }
.lc { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .25s; will-change: transform; }
.lc.hot { color: var(--lime); }
.js-in .lc { animation: hb-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 70ms + 120ms); }
@keyframes hb-rise { from { transform: translateY(.9em) rotate(6deg); opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 -20% 0); } }
.hb-h .a i, .hb-h .fill i { display: inline-block; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.hb-h .fill.on i { animation: hb-dot .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes hb-dot { 40% { transform: scale(1.5); } }
/* נתי 29.09: הכל ממורכז. הכותרת במרכז המסך, ואיתה השורה שמעליה, הכיתוב, הטקסט והכפתורים */
.hb { justify-items: center; text-align: center; }
.hb-h .ln { text-align: center; }
.hb-by, .hb-cap { justify-content: center; }
.hb-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 60px; width: min(100%, 1040px); margin-inline: auto; }
.hb-sub { text-align: right; }
@media (max-width: 760px) { .hb-row { flex-direction: column; align-items: center; } .hb-sub { text-align: center; } }
@media (max-width: 760px) {
  .hb { padding-top: 84px; padding-bottom: 40px; align-content: center; }
  .hb-row { gap: 20px; }
  .hb-sub { max-width: 30ch; }
  .hb-h { font-size: clamp(96px, 30vw, 150px); line-height: .8; }
  .hb-cap { flex-wrap: wrap; row-gap: 10px; }
  .hb-try { min-height: 44px; padding: 0 16px; margin-inline-start: 0; }
  .hb-reveal img { object-position: 50% 40%; }
  .hb-row { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .hb-sub { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .js-in .lc { animation: none; } .lc { transition: none; } .fill, .fill.on { animation: none; transition: none; } .hb-bar { display: none; } }

/* נתי 30.09: הרקע מהאתר החי. שני כדורי אור מטושטשים, ליים וסגול, שנודדים לאט. רק כשהמסך שחור: נעלמים כשעבודה פורצת מהאותיות */
.hb-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .8s ease; }
.hb.out .hb-orbs { opacity: 0; }
.hb-orb { position: absolute; top: 18%; right: 8%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(200,245,66,.22), rgba(200,245,66,.06) 45%, transparent 70%); filter: blur(55px); animation: hb-drift-a 22s ease-in-out infinite alternate; }
.hb-orb-p { top: auto; bottom: -8%; right: auto; left: 4%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(168,85,247,.24), rgba(168,85,247,.06) 45%, transparent 70%); animation: hb-drift-b 26s ease-in-out infinite alternate; }
@keyframes hb-drift-a { 0% { transform: translate(0, 0); } 50% { transform: translate(-22vw, 12vh); } 100% { transform: translate(-8vw, -10vh); } }
@keyframes hb-drift-b { 0% { transform: translate(0, 0); } 50% { transform: translate(26vw, -14vh); } 100% { transform: translate(10vw, 6vh); } }
.hb-sub { max-width: none !important; }
@media (max-width: 760px) { .hb-orb { width: 340px; height: 340px; } .hb-orb-p { width: 300px; height: 300px; } .hb-sub br { display: none; } }
@media (prefers-reduced-motion: reduce) { .hb-orb { animation: none; } }

/* ===== סרטונים באותיות (נתי 29.09): הקנבס מצייר את הסרטון בתוך "בכל מקום", הנקודה נשארת ליים. בפריצה: הסרטון מלא ===== */
.hb-cv { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; transition: opacity .6s ease; }
.hb.hb-vid .fill { background-image: none !important; clip-path: none; animation: none; }
.hb.hb-vid .fill:not(.on) i { visibility: hidden; }
.hb.out .hb-cv { opacity: 0; }
.hb-reveal video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); filter: blur(14px) brightness(.6); transition: opacity .9s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1), filter 1.1s ease; }
.hb.out .hb-reveal video.on { opacity: 1; transform: scale(1); filter: blur(0) brightness(.62); }
/* מובייל: הכפתורים באמצע (נתי 29.09) */
@media (max-width: 760px) { .hb-row { align-items: center !important; } .hb-cta { justify-content: center; } }
/* הפתיח ממלא את כל המסך גם כשהדף מוקטן ל־88% במחשב, כדי שהלקוחות לא יציצו מלמטה (נתי 29.09) */
.hb { min-height: calc(100svh / var(--nbz, 1)); }
/* "בכל מקום" נפתח מתוך חלון אחרי "מותג אחד" (נתי 29.09) */
.js-in .hb-h .b { animation: hb-open 1.1s cubic-bezier(.7,0,.2,1) .55s both; }
@keyframes hb-open { from { clip-path: inset(0 0 100% 0); translate: 0 .25em; } to { clip-path: inset(-30% -10% -30% -10%); translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .js-in .hb-h .b { animation: none; } }
/* הקו עבה יותר (נתי 29.09). הגובה והמיקום נקבעים ב־hero.js לפי האותיות */
.hb-bar { width: 7px; border-radius: 2px; }
/* "בכל מקום": ריווח אותיות 0 (נתי 29.09) */
.hb-h .b, .hb-h .b .fill { letter-spacing: 0; }
/* הקו דק יותר (נתי 30.09) */
.hb-bar { width: 5px; }
/* שורת "נתי אלמה": קו קצר בשני הצדדים (נתי 30.09) */
.hb-by::before, .hb-by::after { content: ""; width: 14px; height: 1px; background: var(--lime); }