/* ==========================================================================
   עמוד נחיתה לוובינר "מהירות תוצאות" · אופק זרמטי
   כל ערך צבע בקובץ הזה מוגדר אך ורק בבלוק :root שלמטה.
   מחוץ ל-:root אין אף hex ואף rgb/rgba. הכל עובר דרך var().
   ========================================================================== */

:root {
  /* חמשת צבעי ספר המותג */
  --navy:  #14213D;   /* Blue,  רקע ראשי */
  --black: #000000;   /* Black, רקע מודגש + טקסט על זהב */
  --grey:  #E5E5E5;   /* Gray,  טקסט על כהה */
  --gold:  #FCA311;   /* Gold Orange, הדגשה בלבד */
  --white: #FFFFFF;   /* White, רק על רקעים בהירים */

  /* מסגרות כרטיסים */
  --card-border:    rgba(229,229,229,0.11);
  --card-border-hl: rgba(252,163,17,0.4);

  /* גרדיאנטים לפי נוסחת ספר המותג: צבע מותג דוהה ללבן, 180 מעלות */
  --grad-navy:  linear-gradient(180deg, #14213D 0%, #FFFFFF 100%);
  --grad-black: linear-gradient(180deg, #000000 0%, #FFFFFF 100%);
  --grad-gray:  linear-gradient(180deg, #E5E5E5 0%, #FFFFFF 100%);
  --grad-gold:  linear-gradient(180deg, #FCA311 0%, #FFFFFF 100%);

  /* וריאנט הכפתור: אותה נוסחה, עם עצירת הזהב ב-58% כדי לשמור רוויה על שטח רחב */
  --grad-gold-cta:       linear-gradient(180deg, #FCA311 0%, #FCA311 58%, #FFFFFF 100%);
  --grad-gold-cta-hover: linear-gradient(180deg, #FCA311 0%, #FCA311 74%, #FFFFFF 100%);

  /* וריאנט התג העגול של שלבי השידור: אותה נוסחה, זהב עד 62% */
  --grad-gold-badge: linear-gradient(180deg, #FCA311 0%, #FCA311 62%, #FFFFFF 100%);

  /* שקיפויות נגזרות מחמשת הצבעים בלבד */
  --grey-80: rgba(229,229,229,0.80);
  --grey-64: rgba(229,229,229,0.64);
  --grey-46: rgba(229,229,229,0.46);
  --grey-28: rgba(229,229,229,0.28);
  --grey-08: rgba(229,229,229,0.08);

  --gold-dash:  rgba(252,163,17,0.45);
  --gold-line:  rgba(252,163,17,0.32);
  --gold-tint:  rgba(252,163,17,0.09);
  --gold-tint-2:rgba(252,163,17,0.16);
  --gold-ring:  rgba(252,163,17,0.28);
  --gold-focus: rgba(252,163,17,0.18);   /* טבעת פוקוס רכה בשדות טופס */
  --gold-glow:  rgba(252,163,17,0.22);   /* זוהר סביב תגים ונקודות ציר */

  --surface:    rgba(0,0,0,0.26);
  --surface-2:  rgba(0,0,0,0.42);
  --surface-hl: rgba(0,0,0,0.36);        /* רקע כרטיס במצב hover */
  --field-bg:   rgba(0,0,0,0.34);
  --shadow:     rgba(0,0,0,0.42);
  --shadow-soft:rgba(0,0,0,0.28);
  --shadow-lift:rgba(0,0,0,0.52);        /* צל מוגבר במצב hover */
  --bar-bg:     rgba(20,33,61,0.94);

  /* רקעים גרפיים */
  --bg-grid: repeating-linear-gradient(0deg, rgba(229,229,229,0.035) 0 1px, rgba(229,229,229,0) 1px 72px),
             repeating-linear-gradient(90deg, rgba(229,229,229,0.035) 0 1px, rgba(229,229,229,0) 1px 72px);
  --glow-gold: radial-gradient(circle at 50% 50%, rgba(252,163,17,0.20) 0%, rgba(252,163,17,0.07) 42%, rgba(252,163,17,0) 68%);
  --divider-gold: linear-gradient(90deg, rgba(252,163,17,0) 0%, rgba(252,163,17,0.55) 50%, rgba(252,163,17,0) 100%);

  /* מעברים בין סקשנים: רצועת שחור שדוהה אל תוך הסקשן הנייבי השכן.
     היא יושבת על הסקשן הבהיר ולא על הכהה, כדי שגם רשת הרקע תדעך יחד עם הצבע
     ולא תיחשף בקו חד ברגע שהסקשן השחור נגמר. */
  --blend-black-down: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.62) 34%, rgba(0,0,0,0.2) 68%, rgba(0,0,0,0) 100%);
  --blend-black-up:   linear-gradient(0deg,   rgba(0,0,0,1) 0%, rgba(0,0,0,0.62) 34%, rgba(0,0,0,0.2) 68%, rgba(0,0,0,0) 100%);
  /* הילה עדינה בראש סקשן הטופס, כדי לסמן "כאן קורה משהו" */
  --seam-glow: radial-gradient(ellipse at 50% 0%, rgba(252,163,17,0.11) 0%, rgba(252,163,17,0.04) 45%, rgba(252,163,17,0) 72%);

  /* קו הציר המקווקו של שלבי השידור, plus מסכת דעיכה בקצוות */
  --dash-line:   repeating-linear-gradient(180deg, rgba(252,163,17,0.45) 0 8px, rgba(252,163,17,0) 8px 17px);
  --fade-line-y: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);

  /* מסכות מיזוג לתמונות */
  --mask-hero-x: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 34%, rgba(0,0,0,0.45) 68%, rgba(0,0,0,0) 100%);
  --fade-hero-y: linear-gradient(180deg, rgba(20,33,61,0.75) 0%, rgba(20,33,61,0.12) 38%, rgba(20,33,61,0.95) 100%);

  /* מידות */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* עקומות האצה */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* כניסה רכה, לאנימציות גלילה */
  --ease-quick: cubic-bezier(0.2, 0, 0, 1);      /* מגע, ל-hover ו-active */
}

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, li, figure, form { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
a { color: inherit; }

body {
  font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--grey);
  background-color: var(--navy);
  background-image: var(--bg-grid);
  overflow-x: hidden;
}

.mono { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.01em; }
.gold { color: var(--gold); }
.center { text-align: center; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ------------------------------ Layout ---------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.sec {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
}

/* --- מעברים בין סקשנים ---------------------------------------------------
   שלוש שכבות: קו זהב דק בתפר, רצועת מיזוג של גוני הרקע בסקשנים הכהים,
   והילת זהב פועמת בתפר שלפני הטופס בלבד.
   ------------------------------------------------------------------------ */

/* 1. קו זהב דק בראש כל סקשן */
.sec::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--divider-gold);
  opacity: 0.5;
  pointer-events: none;
}

/* 2. רצועות מיזוג בין הנייבי לשחור. כל סקשן נייבי שנוגע בסקשן שחור מקבל
      רצועת שחור דוהה בשפה הרלוונטית, כך שהמעבר הוא רצועה של 120 פיקסל
      ולא קו חד. שכן שחור למעלה = דעיכה כלפי מטה, ולהיפך. */
.sec-problem {                                   /* מתחת: סקשן השידור השחור */
  background-image: var(--blend-black-up);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 120px;
}
.sec-about {                                     /* שחור משני הצדדים */
  background-image: var(--blend-black-down), var(--blend-black-up);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% 120px, 100% 120px;
}

/* 3. התפר שלפני הטופס: רצועת מיזוג plus הילת זהב רחבה, plus פעימה בקו עצמו */
.sec-join {
  background-image: var(--seam-glow), var(--blend-black-down);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: min(920px, 100%) 300px, 100% 120px;
}
.sec-join::before {
  height: 2px;
  opacity: 0.75;
  animation: seam-pulse 5s ease-in-out infinite;
}
@keyframes seam-pulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 var(--gold-tint); }
  50%      { opacity: 0.95; box-shadow: 0 0 16px 1px var(--gold-tint-2); }
}

/* --------------------------- כניסה בגלילה --------------------------------
   מוחל רק כשיש JS (מחלקת .js נוספת ל-html), כדי שבלי JS הכל פשוט נראה.
   ההסתרה חיה רק במצב :not(.is-in), ולכן אחרי הכניסה אין שום כלל transform
   שמתחרה ב-hover של הכרטיסים.
   ------------------------------------------------------------------------ */
.js [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}
.js [data-reveal].is-in {
  /* backwards, ולא both: אחרי סיום האנימציה האלמנט חוזר לסגנון הרגיל שלו */
  animation: reveal-in 0.58s var(--ease-out) backwards;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------- Typography --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: none;
  padding: 6px 16px;
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-pill);
  background: var(--gold-tint);
  margin-bottom: 22px;
}
.eyebrow .sep { opacity: 0.7; }
.eyebrow-start { align-self: flex-start; }

.h1 {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--grey);
  margin-bottom: 24px;
}
.h1-line { display: block; }

.h2 {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.5rem);
  line-height: 1.28;
  color: var(--grey);
  margin-bottom: 34px;
  max-width: 24ch;
}
.h2-line { display: block; }
.h2-center { max-width: none; text-align: center; margin-inline: auto; }
.sec-reveal .h2 { max-width: 22ch; }

.card-title {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--grey);
  margin-bottom: 10px;
}
.card-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--grey-64);
}

/* ------------------------------- Logo ----------------------------------- */
.logo { display: inline-flex; flex-direction: column; gap: 4px; }
.logo-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  color: var(--grey);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
  direction: ltr;
}
.logo-sub {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.logo-hero { margin-bottom: 34px; }
.logo-sm .logo-name {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  padding-bottom: 3px;
  border-bottom-width: 1px;
}

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  text-decoration: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick),
              background-image 0.18s ease,
              opacity 0.18s ease;
}
.btn-gold {
  background-image: var(--grad-gold-cta);
  color: var(--black);
  box-shadow: 0 10px 26px -12px var(--gold-ring), 0 2px 0 0 var(--gold-tint-2);
}
.btn-gold:hover {
  background-image: var(--grad-gold-cta-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -14px var(--gold-ring), 0 2px 0 0 var(--gold-tint-2);
}
/* לחיצה בפועל: דחיפה פנימה */
.btn:not([disabled]):active { transform: scale(0.97); }
.btn-lg { font-size: 1.125rem; padding: 16px 34px; }
.btn-sm { font-size: 0.875rem; padding: 9px 18px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-arrow {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform 0.15s var(--ease-quick);
}
.btn-sm .btn-arrow { width: 16px; height: 16px; }
.btn:hover .btn-arrow { transform: translateX(-3px); }
.btn:not([disabled]):active .btn-arrow { transform: translateX(-1px); }

/* ------------------------------- Icons ---------------------------------- */
.ico { width: 22px; height: 22px; color: var(--gold); flex: none; }
.ico-lg { width: 32px; height: 32px; }
.ico-xl { width: 52px; height: 52px; }

/* ------------------------------ Cards ----------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: 0 6px 18px -16px var(--shadow-soft);
  transition: border-color 0.15s var(--ease-quick),
              transform 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick),
              background 0.15s var(--ease-quick);
}
/* הכרטיסים אינם לחיצים, ולכן ההרמה עדינה יותר מזו של כפתור */
.card:hover {
  border-color: var(--card-border-hl);
  background: var(--surface-hl);
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -26px var(--shadow-lift);
}
.card:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px -20px var(--shadow-lift);
}
.num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
  /* יורש RTL מהכרטיס, כך שהמספר והקו שמתחתיו יושבים בצד ההתחלה (ימין) */
}
.num::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: var(--gold);
  margin-top: 12px;
  opacity: 0.8;
}

/* =========================== 1. פס עליון דביק ============================ */
.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* מצב מוסתר: דעיכה plus תזוזה קלה כלפי מעלה. visibility מושהית עד סוף המעבר */
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s var(--ease-quick),
              opacity 0.25s ease,
              visibility 0s linear 0.25s;
}
.topbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.25s var(--ease-quick),
              opacity 0.25s ease,
              visibility 0s linear 0s;
}
.topbar-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-sep { width: 1px; height: 22px; background: var(--card-border); flex: none; }
.topbar-event {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--grey-80);
  white-space: nowrap;
}
.topbar-event .mono { color: var(--gold); }
.topbar-dot { color: var(--grey-28); }

/* ================================ 2. HERO =============================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px);
}
.hero-media {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 52%;
  z-index: 0;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.42;
  filter: grayscale(0.25) contrast(1.05);
  -webkit-mask-image: var(--mask-hero-x);
  mask-image: var(--mask-hero-x);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fade-hero-y);
}
.hero-glow {
  position: absolute;
  inset-inline-start: 6%;
  top: 42%;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  transform: translateY(-50%);
  background: var(--glow-gold);
  z-index: 0;
  pointer-events: none;
  filter: blur(6px);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-sub {
  max-width: 62ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.19rem);
  color: var(--grey-80);
  margin-bottom: 34px;
}
.hero-inner .btn-lg { margin-bottom: 46px; }

.event-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 860px;
}
.event-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px -16px var(--shadow-soft);
  transition: border-color 0.15s var(--ease-quick),
              transform 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick);
}
.event-card:hover {
  border-color: var(--card-border-hl);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -24px var(--shadow-lift);
}
.event-card:active { transform: translateY(0); }
.event-card .ico { margin-bottom: 6px; }
.event-val {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--grey);
}
.event-lbl { font-size: 0.85rem; color: var(--grey-46); line-height: 1.4; }

.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 44px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--grey-46);
}
.scroll-hint svg { width: 18px; height: 18px; animation: bob 1.9s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================= 3. הבעיה ================================= */
.sec-problem .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.sec-problem .h2 { max-width: 40ch; }

.num-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.ba-block {
  width: 100%;
  margin-top: 64px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
}
.ba-title {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  color: var(--grey);
  text-align: center;
  margin-bottom: 26px;
}
/* גלריה נגללת אופקית: 10 תמונות, גוללים בעכבר/מגע/מקלדת */
.ba-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.ba-grid::-webkit-scrollbar { height: 7px; }
.ba-grid::-webkit-scrollbar-track { background: transparent; }
.ba-grid::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; }
.ba-grid::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.ba-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: start;
  transition: transform 0.15s var(--ease-quick);
}
.ba-item:hover { transform: translateY(-3px); }
.ba-item:active { transform: translateY(0); }
.ba-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background: var(--surface-2);
  transition: border-color 0.15s var(--ease-quick), box-shadow 0.15s var(--ease-quick);
}
.ba-item:hover .ba-frame {
  border-color: var(--card-border-hl);
  box-shadow: 0 20px 40px -26px var(--shadow-lift);
}
.ba-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.ba-item:hover .ba-frame img { transform: scale(1.04); }
.ba-tag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  padding: 5px 14px;
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-pill);
  background: var(--gold-tint);
}
.ba-micro {
  text-align: center;
  font-size: 0.85rem;
  color: var(--grey-46);
  margin-top: 12px;
}

/* רמז גלילה משותף לכל גלריה אופקית. החץ מצביע לכיוון שבו מתגלות התמונות
   הבאות (שמאלה, כי הגלריה בנויה RTL), ונעלם ברגע שהמשתמש כבר גלל */
.gal-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  /* max-height קבוע כדי שההיעלמות תוכל לכווץ גם את המקום שהרמז תופס */
  max-height: 32px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold);
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out),
              max-height 0.3s var(--ease-out),
              margin-top 0.3s var(--ease-out);
}
.gal-hint .gal-arrow {
  flex: none;
  animation: hint-nudge 1.7s var(--ease-quick) infinite;
}
/* אחרי שגללו, הרמז לא רק נעלם אלא גם מוותר על המקום שלו, כדי שלא יישאר
   חור ריק בין הגלריה לטקסט שמתחתיה */
.gal-hint.is-done {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
@keyframes hint-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  30%           { transform: translateX(-6px); }
}

.contrast {
  width: 100%;
  margin-top: 56px;
  padding: 34px 28px;
  text-align: center;
  border-block: 1px solid var(--card-border);
}
.contrast-line {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  line-height: 1.4;
}
.contrast-line:first-child { color: var(--grey-46); }
.contrast-line-hl { position: relative; display: inline-block; }
.contrast-line-hl::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 8px;
  background: var(--gold);
  opacity: 0.85;
}

/* ========================= 4. מה נעשה בשידור ============================ */
.sec-agenda { background-color: var(--black); }
.sec-agenda .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.sec-agenda .h2 { max-width: 36ch; }

.schedule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-lg);
  background: var(--gold-tint);
  overflow: hidden;
}
.schedule-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  transition: background 0.15s var(--ease-quick);
}
.schedule-block:hover { background: var(--gold-tint-2); }
.schedule-block + .schedule-block { border-inline-start: 1px solid var(--gold-line); }
.schedule-time {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
}
.schedule-desc { font-size: 0.96rem; line-height: 1.65; color: var(--grey-64); }
.schedule-micro {
  width: 100%;
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--grey-46);
}

.zigzag {
  position: relative;
  width: 100%;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* קו הציר: מקווקו רציף לאורך כל השלבים, דוהה בשני הקצוות */
.zigzag::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  background-image: var(--dash-line);
  -webkit-mask-image: var(--fade-line-y);
  mask-image: var(--fade-line-y);
}
.zig-item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  align-items: center;
}
/* נקודת הציר על הקו */
.zig-item::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: calc(50% - 7px);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background-image: var(--grad-gold-badge);
  box-shadow: 0 0 0 5px var(--gold-tint-2), 0 0 14px 0 var(--gold-glow);
  z-index: 1;
  transition: transform 0.15s var(--ease-quick), box-shadow 0.15s var(--ease-quick);
}
/* מקטע מחבר מנקודת הציר אל הכרטיס, בצד שבו הכרטיס יושב */
.zig-item::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  width: 28px;
  inset-inline-start: calc(50% - 28px);
  background: var(--gold-line);
}
.zig-item:nth-child(even)::after { inset-inline-start: 50%; }

.zig-item > .card { grid-column: 1; }
.zig-item:nth-child(even) > .card { grid-column: 2; }

/* נקודת הציר מגיבה ל-hover על הכרטיס. דפדפן בלי :has פשוט מדלג על הכלל */
.zig-item:has(> .card:hover)::before {
  transform: scale(1.18);
  box-shadow: 0 0 0 6px var(--gold-tint-2), 0 0 20px 0 var(--gold-glow);
}

/* תג עגול לספרת השלב, במקום מספר plus קו תחתי */
.zigzag .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-image: var(--grad-gold-badge);
  color: var(--black);
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 18px;
  direction: ltr;
  box-shadow: 0 10px 22px -12px var(--gold-glow), 0 0 0 1px var(--gold-ring);
  transition: transform 0.15s var(--ease-quick), box-shadow 0.15s var(--ease-quick);
}
.zigzag .num::after { display: none; }
.zigzag .card:hover .num {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 28px -12px var(--gold-glow), 0 0 0 1px var(--card-border-hl);
}

/* ============================ 5. מי מעביר =============================== */
.sec-about .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.about-lead {
  max-width: 56ch;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.65;
  color: var(--grey);
  margin-bottom: 44px;
}
/* רצועת תמונות נגללת אופקית. כל התמונות 1400x933 (3:2), ולכן זהות בגובה */
.about-media { width: 100%; }
.about-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity ולא mandatory: mandatory גרם לדפדפן להצמיד מחדש אחרי אנימציית
     הכניסה של הסקשן, והרצועה נפתחה באמצע במקום בתמונה הראשונה */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.about-strip::-webkit-scrollbar { height: 7px; }
.about-strip::-webkit-scrollbar-track { background: transparent; }
.about-strip::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 999px; }
.about-strip::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.about-shot {
  flex: 0 0 auto;
  width: 440px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  background: var(--surface-2);
  scroll-snap-align: start;
  transition: transform 0.15s var(--ease-quick),
              border-color 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick);
}
.about-shot:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hl);
  box-shadow: 0 20px 40px -26px var(--shadow-lift);
}
.about-shot:active { transform: translateY(0); }
.about-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* הרגעה קלה של הנאונים בצבעי הרקע של החדר כושר, כדי לא לשבור את הפלטה */
  filter: saturate(0.82);
  transition: transform 0.4s var(--ease-out);
}
.about-shot:hover img { transform: scale(1.04); }

/* שלושה כרטיסים בשורה בכל רוחב מסך, כולל מובייל. width מפורש כי
   .sec-about .wrap הוא flex עם align-items: flex-start, ובלעדיו הרשימה
   מתכווצת לרוחב התוכן ונצמדת לימין במקום להתפרס על כל הרוחב.
   הריפוד והטיפוגרפיה נזילים (clamp) כדי שהכרטיסים יתכווצו ברציפות
   ולא יישברו במסכים צרים */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
  margin-top: 30px;
}
/* .stats מוסיף specificity, אחרת ריפוד ה-.card הכללי של המובייל
   (24px 20px) גובר על הריפוד הנזיל וחונק את הכרטיסים הצרים */
.stats .stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(13px, 0.6rem + 0.9vw, 24px) clamp(7px, 0.1rem + 1.7vw, 26px);
}
.stat-num {
  /* המינימום נמוך מספיק כדי ש-"1,000+" ייכנס לכרטיס גם במסך של 344px */
  font-size: clamp(0.9rem, 0.35rem + 2.9vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold);
  /* "1,000+" ו-"#1" חייבים סדר לועזי, ועדיין להתיישר לצד ההתחלה של הכרטיס (ימין) */
  direction: ltr;
  text-align: right;
  /* ספרות ברוחב אחיד, כדי שהספירה העולה לא תרעד */
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  font-size: clamp(0.68rem, 0.5rem + 0.55vw, 1rem);
  line-height: 1.35;
  color: var(--grey-64);
}

/* ========================= 6. מה נחשוף בסוף ============================= */
.sec-reveal { background-color: var(--black); }
.sec-reveal .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.reveal-lead {
  max-width: 62ch;
  color: var(--grey-80);
  margin-bottom: 44px;
}
.reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  text-align: start;
}
.reveal-card .ico-lg { margin-bottom: 16px; }

.lock-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin-top: 34px;
  padding: 24px 28px;
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-lg);
  background: var(--gold-tint);
  transition: transform 0.15s var(--ease-quick),
              border-color 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick);
}
.lock-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-ring);
  box-shadow: 0 20px 40px -28px var(--shadow-lift);
}
.lock-card:active { transform: translateY(0); }
.lock-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color: var(--grey);
}
.lock-text .mono { color: var(--gold); }
.lock-sep { color: var(--gold); }

.risk-line {
  max-width: 66ch;
  margin-block: 34px 34px;
  font-size: 0.98rem;
  color: var(--grey-46);
}

/* ============================== 7. טופס ================================= */
.sec-join { scroll-margin-top: 72px; }
.sec-join .wrap { display: flex; flex-direction: column; align-items: center; }
.sec-join .h2 { margin-bottom: 30px; }
.sec-join .h2 .mono { color: var(--gold); }

.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 22px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--grey-80);
  line-height: 1.65;
}
.check strong { color: var(--grey); font-weight: 700; }
.ico-check { width: 20px; height: 20px; margin-top: 4px; }

.scarcity {
  width: 100%;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold);
  padding: 10px 18px;
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-pill);
  background: var(--gold-tint);
  margin-bottom: 28px;
}

.form-card {
  width: 100%;
  padding: 32px 28px;
  background: var(--surface-2);
  border: 1px solid var(--card-border-hl);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -30px var(--shadow);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-quick);
}
/* המעבר אל מסך ההצלחה: הכרטיס הקיים דועך ומעט עולה, ואז התוכן החדש
   נכנס ב-fade plus תזוזה קלה מלמטה. שתי המחלקות מנוהלות ב-main.js */
.form-card.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.form-card.is-entering {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}
.field { margin-bottom: 18px; }
.label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--grey-80);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  font-family: 'Assistant', sans-serif;
  font-size: 1rem;
  color: var(--grey);
  background: var(--field-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color 0.15s var(--ease-quick),
              background 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick);
}
.input::placeholder { color: var(--grey-28); }
.input:hover:not(:focus) { border-color: var(--grey-28); }
.input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--gold-focus);
}
.input[aria-invalid="true"] { border-color: var(--gold); background: var(--gold-tint); }

.field-consent { margin-top: 4px; margin-bottom: 22px; }
.consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  border: 1px solid var(--grey-28);
  border-radius: 5px;
  background: var(--field-bg);
  cursor: pointer;
  position: relative;
  transition: background 0.15s var(--ease-quick),
              border-color 0.15s var(--ease-quick),
              box-shadow 0.15s var(--ease-quick),
              transform 0.15s var(--ease-quick);
}
.consent:hover .checkbox { border-color: var(--gold-ring); }
.checkbox:focus-visible { box-shadow: 0 0 0 3px var(--gold-focus); }
.checkbox:active { transform: scale(0.92); }
.checkbox:checked { background: var(--gold); border-color: var(--gold); }
.checkbox:checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-text { font-size: 0.88rem; line-height: 1.6; color: var(--grey-64); }
.consent-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s var(--ease-quick), opacity 0.15s var(--ease-quick);
}
.consent-text a:hover { text-decoration-thickness: 2px; }
.consent-text a:active { opacity: 0.7; }

.err {
  display: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 6px;
}
.err.is-shown {
  display: block;
  animation: err-in 0.2s var(--ease-out) both;
}
@keyframes err-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.err-form { text-align: center; margin-top: 14px; }

.form-micro {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--grey-46);
  margin-top: 18px;
  text-align: center;
}

.success { text-align: center; display: flex; flex-direction: column; align-items: center; }
.success .ico-xl { margin-bottom: 16px; }
.success-title {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  color: var(--grey);
  margin-bottom: 12px;
}
.success-body { color: var(--grey-80); margin-bottom: 26px; max-width: 46ch; }
.success-body .mono { color: var(--gold); }
.success-micro { font-size: 0.84rem; color: var(--grey-46); margin-top: 14px; }

/* ============================== 8. פוטר ================================= */
.footer {
  padding-block: 40px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}
/* הלוגו הרשמי, בגרסת המונוכרום הבהיר של ספר המותג.
   קובץ המקור שחור על רקע לבן. הרקע הלבן הוסר מהקובץ, וצורות הווקטור נשמרו
   באפור המותג. טבעת ה-"O" בתוך הלוגו היא תמונת רסטר משובצת שאי אפשר לצבוע
   מחדש בקוד, ולכן היא נשארה שחורה. brightness(0) invert(1) מאחד את הכל
   לצללית בהירה אחת, כולל הרסטר, ו-opacity מוריד אותה מלבן טהור לגוון אפור,
   לפי הכלל בספר המותג שאוסר לבן טהור על רקע כהה */
.footer-logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-inline: auto;
  filter: brightness(0) invert(1);
  opacity: 0.86;
  transition: opacity 0.25s var(--ease-quick);
}
.footer-logo:hover { opacity: 1; }

/* ============================ רספונסיביות =============================== */
@media (max-width: 1024px) {
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reveal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zig-item { column-gap: 32px; }
  /* המקטע המחבר מתקצר יחד עם המרווח בין העמודות */
  .zig-item::after { width: 16px; inset-inline-start: calc(50% - 16px); }
  .zig-item:nth-child(even)::after { inset-inline-start: 50%; }
  .hero-media { width: 62%; }
}

@media (max-width: 860px) {
  .event-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
  .ba-item { width: 200px; }
  .hero-media { width: 100%; }
  .hero-media img { opacity: 0.24; object-position: center 15%; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 768px) {
  /* התמונות נפרסות כמעט לכל רוחב המסך, עם הצצה לתמונה הבאה שמסמנת שאפשר לגלול.
     הרצועה בורחת מריפוד ה-wrap כדי שהגלילה תרגיש קצה אל קצה */
  .about-strip {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .about-shot { width: min(82vw, 460px); }

  .num-grid { grid-template-columns: 1fr; }
  .reveal-grid { grid-template-columns: 1fr; }
  .schedule { grid-template-columns: 1fr; }
  .schedule-block + .schedule-block {
    border-inline-start: none;
    border-top: 1px solid var(--gold-line);
  }

  /* זיגזג הופך לטור יחיד, עם קו מקווקו בצד ההתחלה (ימין ב-RTL) */
  .zigzag { margin-top: 44px; gap: 18px; padding-inline-start: 32px; }
  .zigzag::before { inset-inline-start: 6px; }
  .zig-item { grid-template-columns: 1fr; }
  /* הנקודה יושבת על הקו, והמקטע המחבר רץ ממנה אל שפת הכרטיס */
  .zig-item::before { inset-inline-start: -32px; }
  .zig-item::after,
  .zig-item:nth-child(even)::after {
    inset-inline-start: -18px;
    width: 18px;
  }
  .zig-item > .card,
  .zig-item:nth-child(even) > .card { grid-column: 1; }
  .zigzag .num { width: 48px; height: 48px; font-size: 1.1rem; margin-bottom: 14px; }

  .topbar-event span:last-child { display: none; }
}

@media (max-width: 520px) {
  .wrap { padding-inline: 18px; }
  /* מתיישר עם ריפוד ה-wrap המוקטן */
  .about-strip {
    margin-inline: -18px;
    padding-inline: 18px;
    scroll-padding-inline: 18px;
    gap: 12px;
  }
  .about-shot { width: 86vw; }
  .gal-hint { font-size: 0.82rem; }
  .sec { padding-block: 56px; }
  .card { padding: 24px 20px; }
  .ba-block { padding: 24px 18px; }
  .ba-grid { gap: 12px; }
  .ba-item { width: 168px; }
  .form-card { padding: 26px 20px; }
  .btn-lg { font-size: 1.02rem; padding: 15px 24px; width: 100%; }
  .hero-inner .btn-lg { max-width: 420px; }
  .contrast { padding: 26px 14px; }
  .logo-hero { margin-bottom: 26px; }
  .topbar-inner { padding: 8px 16px; gap: 10px; }
  .topbar-sep, .topbar-info .logo { display: none; }
  .topbar-event { font-size: 0.8rem; }
  .lock-card { flex-direction: column; gap: 12px; padding: 18px 16px; }
  /* השורה כולה (תאריך + שעה) נשארת בשורה אחת גם במסכים צרים, בלי גלישה */
  .lock-text { flex-wrap: nowrap; gap: 6px; font-size: clamp(0.68rem, 0.55rem + 1.6vw, 0.95rem); }
  .lock-sep { flex: none; }
}

/* מתחת ל-344px בלבד. ב-375px כרטיסי האירוע נשארים 2x2 כדי שההירו לא יתארך */
@media (max-width: 344px) {
  .event-cards { grid-template-columns: 1fr; }
  .btn-sm { padding: 8px 14px; font-size: 0.8rem; }
}

/* ------------------------ העדפות נגישות -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  /* אין כניסה בגלילה: הכל גלוי מיד, בלי תזוזה ובלי דעיכה.
     main.js גם מסמן את כל האלמנטים כ-is-in מראש במצב הזה. */
  .js [data-reveal]:not(.is-in),
  .js [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* אין פעימה בתפר ואין ריחוף של חץ הגלילה */
  .sec-join::before { animation: none !important; opacity: 0.75; }
  .scroll-hint svg, .gal-hint .gal-arrow { animation: none !important; }
}