/* M Trade — LP לסוחר המנוסה
   הצבעים והגופנים כאן הם אלה של m-trade.co.il — אותו מותג, לא "דומה".
   אפס פריימוורק. כל ה-CSS כאן. */

/* ================================================================
   גופנים — מתארחים אצלנו (self-hosted), לא נטענים מ-Google.
   ה-CSP של האתר הוא font-src 'self' + style-src 'self', ולכן קישור אל
   fonts.googleapis.com היה נחסם בשקט והדף היה נופל לגופן-מערכת.
   הקבצים הם variable-fonts: קובץ אחד למשפחה+תת-קבוצה שמכסה את כל
   המשקלים — בדיוק מה ש-Google מגישה, רק מהשרת שלנו.
   שתי המשפחות הן בדיוק אלה שנטענות ב-m-trade.co.il: Rubik לכותרות,
   Heebo לגוף. לשתיהן יש תת-קבוצה עברית מלאה, ולכן אין נפילת-גופן.
   ================================================================ */
@font-face{
  font-family:'Heebo';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Heebo';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/heebo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ===== פלטת המותג =====
     כל הערכים הבאים הועתקו מגיליון-הסגנון החי של https://m-trade.co.il —
     זה הדף המקורי. אין כאן אף גוון שהומצא. */
  --white:#ffffff;
  --bg-alt:#f2f9f5;
  --bg-deep:#0b1f16;
  --ink:#0b1f16;
  --ink-soft:#23372d;
  --muted:#52685c;
  /* הוכהה 11-09-2026 מ-#84988d. הגוון הקודם נתן יחס ניגודיות של 3.06
     על רקע לבן ו-2.86 על רצועת הרקע, ושניהם נופלים מהסף 4.5 של
     WCAG AA. זה סתר ישירות את הצהרת הנגישות שפרסמנו באותו יום.
     הגוון החדש נותן 4.85 ו-4.54, ונשאר באותה משפחת צבע. */
  --subtle:#66756d;
  --green:#0e9f6e;
  --green-bright:#10b981;
  --green-deep:#067a54;
  --green-dark:#065f46;
  --green-light:#d7f2e6;
  --green-faint:#eaf7f1;
  --green-glow:rgba(14,159,110,.16);
  --border:rgba(11,31,22,.10);
  --border-strong:rgba(14,159,110,.45);
  --on-deep:#cfe2d9;

  /* ===== שמות-התפקיד שבשימוש בקובץ, ממופים אל הפלטה שלמעלה =====
     כך אף שימוש-צבע בקובץ לא נשאר מחוץ למיפוי, ואין סיכון שנשכח
     מקום אחד וייצא כתם זהב בודד על דף ירוק-לבן. */
  --bg:var(--white);
  --bg-2:var(--white);          /* כרטיס-טופס, FAQ, כרטיס-מחיר */
  --bg-3:var(--bg-alt);         /* לוחות ובחירות */
  --bg-4:var(--green-faint);    /* ראש-הגרדיאנט של הכרטיסים */
  --gold:var(--green-bright);   /* מילוי-כפתור, קו-אור, מסגרת-פוקוס */
  --gold-light:var(--ink);      /* צבע-הכותרות */
  --gold-bright:var(--green-dark);
  --gold-dark:var(--green-deep);/* סוף-גרדיאנט הכפתור */
  --gold-glow:var(--green-glow);
  --line:var(--border);
  --line-strong:var(--border-strong);
  --txt:var(--ink);
  --txt-dim:var(--muted);
  --txt-mute:var(--subtle);
  --on-gold:var(--white);       /* טקסט על מילוי ירוק */
  /* רצועת-סקשן שקופה-למחצה, כדי שהרקע החי ייראה מבעדה.
     הכרטיסים עצמם נשארים אטומים — שם חשובה הקריאוּת, לא האפקט. */
  --band:rgba(242,249,245,.78);
  /* הרצועה השנייה — עליה יושבים .stats / .founder-section / .cta-section. */
  --band-2:rgba(234,247,241,.62);
  --grn:var(--green-deep);
  --grn-2:var(--green-dark);
  --grn-soft:rgba(14,159,110,.10);
  /* באתר המקורי אין אדום — אף לא פעם אחת. סימוני-שלילה ושגיאות-הטופס
     לוקחים את הירוק הכהה שבפלטה, כדי לא להכניס צבע שאינו במותג. */
  --alert:var(--green-dark);
  /* אדום-שגיאה. מופיע אך ורק על שדה-קלט לא-תקין, לפי הכרעת מולי 10-09-2026.
     שאר הדף נשאר בפלטת-המותג: ה-✕ ברשימת-הדיסקוואליפיקציה נשאר ירוק-כהה,
     וכך גם תיבת-השגיאה הכללית .err. אדום = שדה שגוי, ותו לא. */
  --err:#b91c1c;
  --err-soft:rgba(185,28,28,.05);
  --err-ring:rgba(185,28,28,.16);
  --r:14px;
  --r-lg:22px;
  --wrap:1120px;
  --narrow:760px;
  --fs-h1:clamp(2rem,6.2vw,3.6rem);
  --fs-h2:clamp(1.5rem,3.6vw,2.35rem);
  --fs-h3:clamp(1.18rem,2.4vw,1.5rem);
  --fs-body:clamp(1rem,1.6vw,1.11rem);
  --sp:clamp(3.5rem,8vw,6.5rem);
  /* גופנים — בדיוק שני אלה שנטענים ב-m-trade.co.il:
     Rubik לכותרות, Heebo לגוף. */
  --font-body:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:'Rubik','Heebo',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}

/* ---------- כותרות — כמו ב-m-trade.co.il ----------
   שם כל h1-h4 הן Rubik במשקל 800 ובצבע-דיו אחיד rgb(11,31,22),
   letter-spacing ‎-0.01em, ו-h2 ב-normal. אין שם גרדיאנט-טקסט,
   אין נצנוץ ואין הילה — ולכן גם כאן לא. ================== */
h1,h2,h3{line-height:1.22;margin:0 0 .6em;font-family:var(--font-display);
  font-weight:800;letter-spacing:-.01em}
h1{font-size:var(--fs-h1);line-height:1.1}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:normal}
h3{font-size:var(--fs-h3)}
.card h3,.nx h3,.need h3,.steps h3,.step-done h3{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em}
/* מחלקת-עזר, כמו .serif במקור */
.serif{font-family:var(--font-display);font-weight:800}

h1,h2,h3.mid{color:var(--gold-light)}
/* ההדגשה בהירו — הירוק שבו האתר המקורי צובע טקסט מודגש. */
.hero h1 .accent{color:var(--green-deep)}
h3.mid{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
  font-size:var(--fs-h2)}
p{margin:0 0 1.05em}
a{color:var(--grn)}
:focus-visible{outline:3px solid var(--grn);outline-offset:3px;border-radius:6px}

.skip{position:absolute;right:-9999px;top:0;background:var(--grn);color:var(--on-gold);padding:.7rem 1.2rem;z-index:999;font-weight:700}
.skip:focus{right:1rem;top:1rem}

.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100%,var(--narrow));margin-inline:auto}
.sec{padding-block:var(--sp);position:relative}
.sub{color:var(--txt-dim);font-size:1.02em;margin-bottom:1.8em}
.sub.center{text-align:center}
.center{text-align:center}
.eyebrow{color:var(--grn);font-weight:700;font-size:.83rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1rem}
.mid{margin-top:3.6rem;text-align:center}

/* ---------- כפתורים ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--bg);
  font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  padding:.85rem 1.7rem;border-radius:100px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  box-shadow:0 15px 40px -10px rgba(14,159,110,.35);
  font-family:inherit;text-align:center;
  position:relative;overflow:hidden;
}
/* מחוון-האור שחולף על הכפתור — .btn-primary::before במקור. */
.btn::before{content:'';position:absolute;top:0;right:-100%;height:100%;width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:right .6s ease;pointer-events:none}
.btn:hover::before{right:100%}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 50px -10px rgba(14,159,110,.45)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:1.05rem 2.3rem;font-size:1.08rem}
.btn-sm{padding:.55rem 1.15rem;font-size:.9rem;box-shadow:none}
.btn-block{width:100%}
/* המקבילה ל-.btn-outline במקור: רקע לבן, טקסט rgb(6,95,70), משקל 600 (הראשי הוא 700). */
.btn-ghost{background:transparent;color:var(--green-dark);font-weight:600;border:1.5px solid var(--line);box-shadow:none}
.btn-ghost::before,.btn-sm::before{display:none}
.btn-ghost:hover{border-color:var(--grn);color:var(--grn);box-shadow:none}

/* אופציה 23 — גל-לחיצה שיוצא מנקודת האצבע. הגאומטריה נכתבת מה-JS דרך
   CSSOM (el.style.width וכו'), כי ‎style=‎ מוטבע ב-HTML חסום ע"י ה-CSP.
   ל-.btn כבר יש position:relative + overflow:hidden, ולכן הגל נחתך לגלולה. */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);pointer-events:none;
  animation:rip .62s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes rip{from{transform:scale(0);opacity:.55}to{transform:scale(1);opacity:0}}
.btn-ghost .ripple{background:rgba(14,159,110,.28)}

/* ---------- HEADER ---------- */
/* .topbar במקור: לבן ב-88% שקיפות מעל טשטוש. */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;
  padding-block:.7rem;gap:1rem}
.hdr-logo{height:44px;width:auto}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(3rem,9vw,6rem) clamp(3rem,7vw,5rem);
  background:
    radial-gradient(ellipse at 30% 20%,rgba(14,159,110,.10),transparent 60%),
    radial-gradient(ellipse at 80% 70%,rgba(14,159,110,.05),transparent 60%),
    rgba(255,255,255,.55);
  text-align:center;
}
/* רשת-הרקע הדקה של ההירו (.hero::before): משבצת 60px בדיו שקוף מאוד,
   ממוסכת אליפטית כך שהיא דוהה בקצוות ולא חותכת את המסך בקווים. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(11,31,22,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,22,.045) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at center,black,transparent 70%);
  mask-image:radial-gradient(ellipse at center,black,transparent 70%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1 span{display:block}
/* אופציה 4 — קו-הדגשה שנמשח מימין לשמאל מתחת למילים המכריעות של הכותרת.
   display:inline דורס את display:block שמעליו (0,2,1 מול 0,1,2) — בלעדיו
   ה-span המקונן היה שובר שורה. z-index:-1 נשאר בתוך .hero .wrap, שהוא
   הקשר-הערימה, ולכן הקו יושב מתחת לאותיות ולא מאחורי הרקע החי. */
/* סימון ההדגשה. קו תחתון עבה ולא ריבוע ממוקם, כי ::after עם
   position:absolute בתוך אלמנט inline שנשבר לכמה שורות מקבל
   בלוק-הכלה שנגזר מהשורה הראשונה והאחרונה יחד. נמדד חי
   12-09-2026 על 375: רוחב 47px מול ביטוי של 271px בשלוש שורות,
   כלומר כתם ירוק מתחת לשורה האחרונה. על 1440 הביטוי בשורה אחת
   והסימון היה תקין, ולכן הפגם היה במובייל בלבד.
   text-decoration עוקב אחרי שבירת שורות מעצם הגדרתו, ולכן הוא
   נכון בכל רוחב בלי media query. skip-ink:none מונע קטיעה מתחת
   לאותיות יורדות, וה-offset השלילי מרים את הקו אל גוף האות כך
   הקו יושב מתחת לקו הבסיס ולא בתוך גוף האות: נמדד חזותית
   12-09-2026 ש-text-decoration נצבע מעל הגליפים, ולכן offset
   שלילי חתך את האותיות והכותרת נעשתה קשה לקריאה. */
.hero h1 .a-mark{display:inline;
  text-decoration-line:underline;
  text-decoration-color:rgba(16,185,129,.55);
  text-decoration-skip-ink:none;
  text-underline-offset:.08em;
  text-decoration-thickness:0;
  animation:markIn .75s cubic-bezier(.22,.61,.36,1) .8s both}
@keyframes markIn{from{text-decoration-thickness:0}to{text-decoration-thickness:.15em}}
.hero h1 .accent{font-family:var(--font-display);font-weight:800;
  letter-spacing:-.01em;color:var(--green-deep)}
/* באתר המקורי זהו האלמנט היחיד בכל העמוד שצבוע בגרדיאנט-טקסט (120deg, ירוק-עמוק→בהיר→עמוק).
   מחוץ ל-@supports נשאר צבע מלא, כדי שדפדפן בלי background-clip:text לא יציג טקסט שקוף. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .accent{background-image:linear-gradient(120deg,#067a54,#10b981 55%,#067a54);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    /* אובחן חי 12-09-2026 על מסך 375. בלי השורה הזו הגרדיאנט נצבע רק
       על שבר-השורה הראשון, וכל שורה נוספת נשארת טקסט שקוף בלי רקע
       מאחוריו, כלומר בלתי נראית. בדסקטופ הכותרת נכנסה בשורה אחת ולכן
       הבאג היה סמוי. clone נותן לכל שורה שבורה רקע משלה. */
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  /* התגית הפנימית יורשת text-fill-color שקוף מ-.accent, אבל background-image
     אינו עובר בירושה. התוצאה הייתה טקסט שקוף בלי גרדיאנט מאחוריו, כלומר
     מילים בלתי נראות. אובחן 12-09-2026, והיה קיים בכל המכשירים ולא רק
     במובייל. כאן היא מקבלת גרדיאנט משלה. */
  .hero h1 .accent .a-mark{
    background-image:linear-gradient(120deg,#067a54,#10b981 55%,#067a54);
    -webkit-background-clip:text;background-clip:text;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
}
.lede{max-width:60ch;margin-inline:auto;color:var(--txt-dim);font-size:1.1em}
.hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

.stats{list-style:none;display:flex;justify-content:center;gap:clamp(1.5rem,6vw,4.5rem);
  margin:3.4rem 0 0;padding:0;flex-wrap:wrap}
.stats li{text-align:center}
/* המספרים — ירוק-המותג, ובמידה מרוסנת יותר מהכותרת שמעליהם. */
.stats b{display:block;font-family:var(--font-display);color:var(--green);
  font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums}
/* התווית שמתחת למספר — ורק היא. הסלקטור היה ‎.stats span והוא תפס גם את
   ה-span שבתוך ה-b (אותה ספציפיות, מאוחר יותר בקובץ), ולכן המספר עצמו
   נצבע אפור-קטן ורק הסיומת נשארה ירוקה-גדולה. */
.stats > li > span{color:var(--txt-mute);font-size:.9rem}

/* אופציה 18 — גלגל ספרות במקום ספירה-עולה. כל טור בנוי
   [ספרת-היעד, 0..9, ספרת-היעד] = 12 תאים בגובה 1em, ולכן ההזזה קבועה
   (‎-11em) ויושבת כאן ב-CSS: אין חישוב ב-JS ואין style מוטבע (ה-CSP חוסם).
   היחידה em ולא rem — גודל ה-b הוא clamp() נוזלי.
   המבנה כולו תגי i: כל span בתוך .stats היה נתפס בכלל התווית. */
.reel{display:inline-flex;direction:ltr;align-items:flex-end;
  font-variant-numeric:tabular-nums}
.reel > i{display:block;height:1em;line-height:1;overflow:hidden;font-style:normal}
/* הרצועה זזה — לא החלון. אלמנט שגם חותך (overflow) וגם מוזז (transform) גורר
   איתו את החיתוך, והספרה נחתה 11em מעל מקומה: המספרים ריחפו מעל הכותרת
   וה-"+" (שאין עליו אנימציה) נשאר למטה. באג חי, נתפס ותוקן 10-09-2026.
   transform על התאים אינו משנה פריסה — החלון נשאר נעוץ, הרצועה גולשת בתוכו. */
.reel > i > i{display:block;height:1em;line-height:1;font-style:normal;
  animation:reelSpin 1.25s cubic-bezier(.16,.86,.28,1) both}
/* הסיומת ("+") אינה מתגלגלת. (0,2,0) גובר על .reel > i שהוא (0,1,1). */
.reel .sfx{display:block;height:1em;line-height:1;font-style:normal;
  overflow:visible;animation:none}
/* ההשהיה יורדת לתאים, כי הם נושאי-האנימציה עכשיו. */
.reel > i:nth-child(2) > i{animation-delay:.09s}
.reel > i:nth-child(3) > i{animation-delay:.18s}
@keyframes reelSpin{from{transform:translateY(0)}to{transform:translateY(-11em)}}

/* המספר האמיתי נשאר בדף לקורא-המסך, מוסתר חזותית בלבד. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- בלוק הזיכוי ---------- */
.sec-exo{background:var(--band);border-block:1px solid var(--line)}
.sec-exo p{color:var(--txt-dim)}
.punch{
  margin-top:2rem;padding:1.3rem 1.5rem;
  border-right:4px solid var(--grn);background:var(--grn-soft);
  border-radius:0 var(--r) var(--r) 0;
  color:var(--txt)!important;font-size:1.16em;line-height:1.45;
  font-family:var(--font-display);font-weight:700;
}

/* ---------- מדיה ---------- */
/* הרקע נשאר שחור: זו "בארית" הווידאו, ופס שחור מסביב לפריים הוא הנייטרלי. */
.media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:#000;box-shadow:0 8px 28px rgba(11,31,22,.10)}
.media video{width:100%;display:block}
.media-16x9 video{aspect-ratio:16/9;object-fit:cover}

/* ---------- מולי ---------- */
.sec-muli{background:var(--band);border-block:1px solid var(--line)}
.muli{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.muli-img img{border-radius:var(--r-lg);border:1px solid var(--line);width:100%;
  object-fit:cover;aspect-ratio:4/5;
  box-shadow:0 18px 44px -12px rgba(14,159,110,.18),0 0 0 1px rgba(11,31,22,.06)}
.muli-txt p{color:var(--txt-dim)}
@media (max-width:760px){.muli{grid-template-columns:1fr}
  .muli-img{max-width:280px;margin-inline:auto}}

/* ---------- מה מקבלים ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem}
.card{background:linear-gradient(180deg,var(--bg-4),var(--bg-3));border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:rgba(14,159,110,.45);transform:translateY(-3px)}
.card .ic{font-size:1.7rem;line-height:1;margin-bottom:.85rem;display:block}
.card h3{margin-bottom:.45em;font-size:1.11rem}
.card p{color:var(--txt-dim);font-size:.97rem;margin:0}

/* כרטיסיות ממוספרות שיורדות אחת אחרי השנייה — עמודה אחת בכל רוחב מסך.
   עיגול-המספר הוא טור קבוע ב-grid, כדי שכל הכותרות יתחילו באותו קו. */
.cards-stack{grid-template-columns:1fr;gap:.9rem}
.cards-stack .card{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  align-items:start;padding:1.35rem 1.4rem}
.cards-stack .card:hover{transform:none}
.card-n{width:2.35rem;height:2.35rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1;
  color:var(--white);background:var(--green);
  box-shadow:0 5px 14px -5px rgba(14,159,110,.55)}
.card-body{min-width:0}
.cards-stack .card .ic{display:inline-block;font-size:1.15rem;margin:0;
  margin-inline-end:.5rem;vertical-align:-.04em}
.cards-stack .card h3{margin-bottom:.35em}

/* אופציה 10 — כניסה מדורגת בתוך הכרטיס: המספר קופץ, אחריו הכותרת, אחריה
   הפסקה. מותנה ב-html.js-on כדי שגולש בלי JS יקבל כרטיס מלא ולא ריק,
   ונדלק מ-.is-in שכבר מתווסף ע"י ה-IntersectionObserver בסעיף 8. */
html.js-on .cards-stack .card.reveal .card-n,
html.js-on .cards-stack .card.reveal .card-body h3,
html.js-on .cards-stack .card.reveal .card-body p{opacity:0}
html.js-on .cards-stack .card.reveal.is-in .card-n{
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
html.js-on .cards-stack .card.reveal.is-in .card-body h3{
  animation:riseIn .5s ease .22s both}
html.js-on .cards-stack .card.reveal.is-in .card-body p{
  animation:riseIn .5s ease .38s both}
@keyframes popIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .cards-stack .card{gap:.85rem;padding:1.2rem 1.1rem}
  .card-n{width:2rem;height:2rem;font-size:.92rem}
}

.need{margin-top:2.6rem;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.4rem)}
.need h3{color:var(--grn);margin-bottom:.9em}
.need-list{list-style:none;padding:0;margin:0 0 1.3rem}
.need-list li{position:relative;padding-inline-start:1.7rem;margin-bottom:.75rem;color:var(--txt-dim)}
.need-list li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--grn);font-weight:800}
.need-note{background:var(--green-faint);border:1px solid rgba(14,159,110,.22);
  border-radius:var(--r);padding:1.05rem 1.25rem;margin:0;color:var(--txt-dim);font-size:.98rem}
.need-note strong{color:var(--green-dark)}
.need-hint{margin:.1rem 0 .9rem;color:var(--txt-dim);font-size:.98rem}
.need-video{margin:0 0 1.3rem}

/* ---------- שלבים ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-inline-start:3.6rem;
  padding-bottom:2.2rem;border-inline-start:2px solid var(--line);
  margin-inline-start:1.1rem}
.steps li:last-child{border-inline-start-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:-1.15rem;top:-.15rem;
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--grn);color:var(--on-gold);
  font-family:var(--font-display);font-weight:700;
  display:grid;place-items:center;font-size:1.2rem}
.steps h3{margin-bottom:.35em}
.steps p{color:var(--txt-dim);margin-bottom:0}
.steps .note{margin-top:.9rem;font-size:.94rem;color:var(--txt-mute);
  border-inline-start:3px solid var(--line);padding-inline-start:.9rem}

/* ---------- הוכחות ---------- */
.sec-proof{background:var(--band);border-block:1px solid var(--line)}
.data-block{margin-top:4rem;text-align:center}
/* בלוק המשיכה היה היחיד בסקשן בלי מרכוז, ולכן נצמד לימין בעוד שכניו
   (.data-block ו-.mid) ממורכזים. אותו טיפול בדיוק, ובלוק אחד פחות שנשבר. */
.withdraw-block{text-align:center}
/* סקשן המודל העסקי: רצועה בהירה בין שני סקשנים לבנים, ומלל ממורכז
   כמו שאר בלוקי-המדיה בדף. */
.sec-model{background:var(--band);border-block:1px solid var(--line)}
.sec-model .narrow{text-align:center}
/* ---------- רצועות גלילה אינסופית ----------
   ה-build מכפיל כל רשימה פעמיים, ולכן הזזה של חצי מרוחב המסילה מחזירה
   בדיוק לנקודת-ההתחלה והתפר בלתי-נראה. direction:ltr על המסילה שומר על
   כיוון-תנועה אחיד גם בעמוד RTL. */
/* direction:ltr על המסגרת, ולא רק על המסלול שבתוכה.
   הדף כולו rtl, ולכן בלוק ברוחב max-content מיושר כך שקצהו הימני
   צמוד לימין המסגרת וכל השאר גולש שמאלה מחוץ למסך. האנימציה מזיזה
   עוד שמאלה, והרצועה יוצאת מהמסך לגמרי. נמדד חי 13-09-2026:
   רצועת הקהילה הייתה ריקה ב-81% מהסיבוב ורצועת החברות ב-71%.
   עם ltr הרצועה מתחילה בקצה השמאלי, ו-translateX(-50%) מגלה בדיוק
   את העותק הכפול. נמדד אחרי: 0% ריק בשתיהן. */
.marquee{position:relative;margin-top:1.6rem;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* המרווח יושב על הפריט ולא על הרצועה. gap נכנס רק בין פריטים, ולכן חצי-רצועה
   הייתה קצרה מסט אמיתי בדיוק בחצי-מרווח, והתפר קפץ בכל סיבוב (נמדד 6.7-9.4px).
   margin-inline-end נותן לכל פריט את המרווח שלו, וחצי-רצועה = סט אחד בול. */
.marquee-track{display:flex;width:max-content;direction:ltr;
  animation:marq 64s linear infinite}
/* עצירה על ריחוף ועל מיקוד-מקלדת — כדי שאפשר יהיה לקרוא עדות בלי לרדוף אחריה. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.marquee img{flex:none;height:230px;width:auto;border-radius:10px;margin-inline-end:.85rem;
  border:1px solid var(--line);box-shadow:0 6px 20px -5px rgba(11,31,22,.14)}
[data-marquee="comm"] img{height:190px;aspect-ratio:4/3;object-fit:cover}

/* לוגואי חברות-המימון — רצועה נמוכה על רקע לבן. */
.marquee-firms{background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.7rem 0;margin-top:1.8rem}
.marquee-firms .marquee-track{align-items:center;
  animation-duration:48s}
/* ---------- הלוגואים בצבעי המותג שלהם ----------
   נמדד מכל קובץ: אף אחד מתשעת הלוגואים אינו שקוף. כל אחד מהם הוא מלבן אטום
   עם רקע צרוב משלו (אפקס שחור 100%, בולנוקס לבן 100%, טריידדיי סגול, וכו').
   לכן ביטול ה-grayscale לבדו היה מייצר שורת טלאים מתנגשים על הרצועה הבהירה.
   הפתרון: כל לוגו הופך לצ'יפ בגובה אחיד שרקעו זהה לרקע הצרוב של הקובץ, כך
   שגבול-הקובץ נעלם, ומסגרת-השיער שלו היא צבע-המותג שנמדד מהפיקסלים עצמם.
   הצבע לא מגיע מ-style= בשורה (ה-CSP חוסם אותו) אלא מ-data-firm שנכתב
   ב-build. שלושה מהקבצים נושאים מדרג ולא צבע שטוח, ולכן הרקע שלהם
   הוא linear-gradient שהותאם לנקודות-הקצה שנמדדו מהקובץ — אחרת
   נשאר גבול-קובץ גלוי בתוך הצ'יפ. הצבע מוצג תמיד, לא ב-hover: בנייד אין hover, ושם הרצועה נראתה
   אפורה לתמיד — וזו בדיוק ההערה שקיבלנו. */
.marquee-firms img{height:36px;width:auto;box-sizing:content-box;
  padding:.62rem .85rem;border-radius:12px;
  margin-inline-end:clamp(1.2rem,4vw,2.8rem);
  background:var(--chip-bg,#fff);border:1px solid var(--chip-line,var(--line));
  box-shadow:0 2px 12px -4px var(--chip-glow,rgba(11,31,22,.18));
  transition:transform .2s ease,box-shadow .2s ease}
.marquee-firms img:hover{transform:translateY(-2px);
  box-shadow:0 7px 20px -6px var(--chip-glow,rgba(11,31,22,.28))}

/* צבעי-המותג הנמדדים. הרקע הוא הרקע הצרוב בקובץ; המסגרת היא הצבע השולט
   בסימן עצמו אחרי החרגת הרקע (בינים של 14 מעלות גוון, דירוג לפי רוויה×בהירות). */
.marquee-firms img[data-firm="pf-alpha-futures"]{
  --chip-bg:linear-gradient(to right,#1b2e27,#11261e);
  --chip-line:#3d6b58;--chip-glow:rgba(27,46,39,.42)}
.marquee-firms img[data-firm="pf-apextraderfunding"]{
  --chip-bg:#000;--chip-line:#3a3a3a;--chip-glow:rgba(0,0,0,.42)}
.marquee-firms img[data-firm="pf-blusky"]{
  --chip-bg:linear-gradient(to bottom,#245fdf,#2157cc);
  --chip-line:#789ce8;--chip-glow:rgba(36,95,223,.40)}
.marquee-firms img[data-firm="pf-bulenox"]{
  --chip-bg:#fff;--chip-line:#023b5d;--chip-glow:rgba(2,59,93,.30)}
.marquee-firms img[data-firm="pf-elitetraderfunding"]{
  --chip-bg:linear-gradient(to bottom,#d8fff3,#e3fdf4);
  --chip-line:#10a478;--chip-glow:rgba(16,164,120,.34)}
.marquee-firms img[data-firm="pf-lucidtrading"]{
  --chip-bg:#090909;--chip-line:#3f4c60;--chip-glow:rgba(9,9,9,.42)}
.marquee-firms img[data-firm="pf-toponefutures"]{
  --chip-bg:#06120d;--chip-line:#3a9042;--chip-glow:rgba(58,144,66,.38)}
.marquee-firms img[data-firm="pf-tradeday"]{
  --chip-bg:#180a3c;--chip-line:#48c3c8;--chip-glow:rgba(72,195,200,.36)}
.marquee-firms img[data-firm="pf-tpt"]{
  --chip-bg:#fff;--chip-line:#25bf7a;--chip-glow:rgba(37,191,122,.30)}

@media (max-width:760px){
  .marquee img{height:180px}
  [data-marquee="comm"] img{height:148px}
  .marquee-firms img{height:30px;padding:.5rem .7rem;border-radius:10px}
}

/* הערות-שוליים — ל-Rubik אין חתך נטוי אמיתי, ולכן הן נשארות ב-Heebo רגיל,
   בדיוק כמו טקסט-השוליים באתר המקורי. */
.privacy,.reassure,.steps .note{
  font-family:var(--font-body);font-style:normal}

/* ---------- דיסקוואליפיקציה ---------- */
.dq-list{list-style:none;padding:0;margin:0}
.dq-list li{position:relative;padding-inline-start:2.1rem;margin-bottom:1rem;color:var(--txt-dim)}
.dq-list li::before{content:"✕";position:absolute;inset-inline-start:0;top:.05rem;
  color:var(--alert);font-weight:800}

/* ---------- מה קורה אחרי ---------- */
.sec-next{background:var(--band);border-block:1px solid var(--line)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.nx{background:linear-gradient(180deg,var(--bg-4),var(--bg-3));border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem}
.nx b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--grn-soft);color:var(--grn);font-size:.9rem;margin-bottom:.85rem;
  border:1px solid rgba(14,159,110,.28)}
.nx h3{font-size:1.04rem;margin-bottom:.4em}
.nx p{color:var(--txt-dim);font-size:.95rem;margin:0}
.reassure{margin-top:1.8rem;text-align:center;color:var(--txt-mute);font-size:.95rem}

/* ---------- טופס ---------- */
/* אותה רצועת-CTA של הדף המקורי: הילה ירוקה במרכז מעל רצועה בהירה. */
.sec-form{background:
    radial-gradient(ellipse at center,rgba(14,159,110,.10),transparent 60%),
    var(--band-2);
  border-block:1px solid var(--line)}
/* הטופס האמצעי — מסך אחד, רצועה נמוכה יותר מזו שבתחתית הדף. */
.sec-form-mid{padding-block:clamp(2.6rem,6vw,4.2rem)}
.form-card{background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.6rem,4.5vw,3rem);position:relative;
  box-shadow:0 2px 6px rgba(11,31,22,.06),0 18px 44px rgba(14,159,110,.10),
             0 0 0 1px var(--line)}
/* קו-האור הדק בראש הכרטיס — .hero-form-card::before במקור. */
.form-card::before{content:'';position:absolute;top:-1px;right:30px;left:30px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.form-card h2{text-align:center}
.form-card .sub{text-align:center}
.progress{height:4px;background:var(--line);border-radius:100px;overflow:hidden;margin-bottom:2rem}
.progress .bar{display:block;height:100%;width:33.33%;background:var(--grn);
  transition:width .32s cubic-bezier(.4,0,.2,1)}
.step{display:none;border:0;padding:0;margin:0;min-inline-size:0}
.step.is-active{display:block;animation:fade .3s ease}
/* 09-11-2026: עמוד אחד. שלוש השאלות ושדות הקשר מוצגים יחד,
   ולכן צריך הפרדה ביניהם ולא רק החלפה. */
.js-onepage .step.is-active + .step.is-active{
  margin-block-start:1.6rem;padding-block-start:1.5rem;
  border-block-start:1px solid var(--line,rgba(0,0,0,.09));
}
.js-onepage .step{animation:none}
.js-onepage .progress{display:none}
/* 09-11-2026: שדות הקשר נפתחים רק אחרי שלוש התשובות.
   כפתור השליחה יושב בתוך הבלוק הזה, ולכן עד שעונים
   פשוט אין מה לשלוח, ולא רק שאסור. */
.js-onepage .step[data-step="4"]{display:none}
.js-onepage.is-ready .step[data-step="4"].is-active{display:block;animation:fade .3s ease}
.onepage-gate{
  margin-block-start:1.6rem;padding-block-start:1.5rem;
  border-block-start:1px solid var(--line,rgba(0,0,0,.09));
  color:var(--txt-mute,#667);font-size:.95rem;text-align:center;
}
.js-onepage.is-ready .onepage-gate{display:none}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step legend{font-family:var(--font-display);font-size:1.25rem;font-weight:800;
  letter-spacing:-.01em;margin-bottom:1.1rem;padding:0;color:var(--gold-light)}
.choices{display:grid;gap:.65rem}
.choice{display:block;position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:block;padding:1rem 1.25rem;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:.16s ease;background:var(--bg-3);
  font-size:1rem}
.choice span:hover{border-color:rgba(14,159,110,.45)}
.choice input:checked+span{border-color:var(--grn);background:var(--grn-soft);color:var(--txt)}
.choice input:focus-visible+span{outline:3px solid var(--grn);outline-offset:2px}
/* שם פרטי ושם משפחה זה לצד זה; בנייד צר הם יורדים אחד מתחת לשני. */
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:520px){.fld-row{grid-template-columns:1fr}}
.fld{display:block;position:relative;margin-bottom:1.05rem}
.fld span{display:block;font-size:.9rem;color:var(--txt-dim);margin-bottom:.4rem;font-weight:600}
/* שדות-קלט לבנים, כמו במקור. */
.fld input{width:100%;padding:.92rem 1.1rem;border:1.5px solid var(--line);
  border-radius:var(--r);background:var(--white);color:var(--txt);
  font-size:1.02rem;font-family:inherit;transition:border-color .16s ease}
.fld input:focus{border-color:var(--gold);outline:none;
  background:rgba(14,159,110,.04);box-shadow:0 0 0 3px rgba(14,159,110,.14)}
.fld input[aria-invalid="true"]{border-color:var(--err);
  box-shadow:0 0 0 3px var(--err-ring)}

/* אופציות 29+30 — תגובת-שדה. תקין ⇒ מסגרת ירוקה + וי מצויר. לא-תקין ⇒
   רעד קצר, מסגרת אדומה (‎--err) והודעה מתחת לשדה עצמו ולא בתיבה המשותפת.
   האדום מוגבל לשדה השגוי בלבד — שאר הדף נשאר בירוק המותג. */
.fld input.is-ok{border-color:var(--grn);background:rgba(14,159,110,.05)}
.fld input.is-bad{border-color:var(--err);background:var(--err-soft);
  animation:fldShake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes fldShake{15%{transform:translateX(-4px)}35%{transform:translateX(4px)}
  55%{transform:translateX(-3px)}75%{transform:translateX(2px)}100%{transform:none}}
/* הווי מצויר משתי מסגרות של ריבוע מסובב — בלי SVG ובלי תמונה.
   ‎.fld הוא label בגובה התוכן, ולכן bottom נמדד מתחתית שדה-הקלט. */
.fld::after{content:"";position:absolute;inset-inline-end:1.05rem;bottom:1.2rem;
  width:.42rem;height:.78rem;border:solid var(--grn);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.35);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .24s cubic-bezier(.34,1.56,.64,1)}
.fld.ok::after{opacity:1;transform:rotate(45deg) scale(1)}
.fld-err{color:var(--err);font-size:.87rem;font-weight:600;margin:.4rem 0 0}
.err{color:var(--alert);font-size:.92rem;margin:.4rem 0 1rem}
.link-back{display:block;margin:1.1rem auto 0;background:none;border:0;
  color:var(--txt-mute);cursor:pointer;font-family:inherit;font-size:.92rem;padding:.4rem}
.link-back:hover{color:var(--grn)}
.step-done{text-align:center;padding:1.5rem 0}
.step-done.is-active{display:block}
/* אופציה 31 — החותמת. שני קווים שנמשכים: העיגול (היקף 2π×28 ≈ 176) ומיד
   אחריו הווי (אורך ≈ 37, ולכן dasharray 44 מסתיר אותו לגמרי בהתחלה).
   הציור נדלק מ-.step-done.is-active — בדיוק מה שה-JS מוסיף ב-show(4). */
.seal{width:4.4rem;height:4.4rem;display:block;margin:0 auto 1.1rem;overflow:visible}
.seal circle,.seal path{fill:none;stroke:var(--green);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round}
.seal circle{stroke-dasharray:176;stroke-dashoffset:176;
  transform:rotate(-90deg);transform-origin:50% 50%;transform-box:view-box}
.seal path{stroke-dasharray:44;stroke-dashoffset:44}
.step-done.is-active .seal circle{animation:draw2 .78s cubic-bezier(.4,0,.2,1) both}
.step-done.is-active .seal path{animation:draw2 .42s cubic-bezier(.4,0,.2,1) .62s both}
@keyframes draw2{to{stroke-dashoffset:0}}
.privacy{text-align:center;color:var(--txt-mute);font-size:.87rem;margin:1.4rem 0 0}

/* מלכודת-דבש. בכוונה לא display:none — בוטים רבים מדלגים על שדות שמוסתרים כך,
   ואז המלכודת לא תופסת כלום. זו ההסתרה החזותית הרגילה: אין רוחב, אין גלישה. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  border:0;pointer-events:none}

/* Turnstile — נטען רק אם הוגדר מפתח אתר; אחרת הבלוק כלל לא נכתב לדף. */
.cf-turnstile{margin:0 0 1rem;display:flex;justify-content:center}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:.7rem;background:var(--bg-2);overflow:hidden}
.faq details[open]{border-color:rgba(14,159,110,.32)}
.faq summary{padding:1.15rem 1.4rem;cursor:pointer;font-weight:700;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grn);font-size:1.4rem;font-weight:400;
  transition:transform .2s ease;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 1.4rem 1.3rem;color:var(--txt-dim);margin:0}

/* ---------- FOOTER ---------- */
/* הפוטר נשאר רצועה כהה — בדיוק כמו ב-m-trade.co.il:
   רקע rgb(11,31,22), טקסט rgb(207,226,217). */
.ftr{background:var(--bg-deep);border-top:1px solid var(--line);
  padding-block:3rem 6.5rem;text-align:center;color:var(--on-deep)}
.ftr-logo{height:38px;width:auto;margin:0 auto 1.6rem;opacity:.75}
.risk{color:var(--on-deep);font-size:.8rem;line-height:1.75;text-align:justify;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:1.15rem 1.3rem;
  background:rgba(255,255,255,.05)}
/* פרטי קשר בפוטר. לא אותיות קטנות: זה מה שמבדיל בין עסק
   שאפשר להרים אליו טלפון לבין דף אנונימי. */
.ftr-contact{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.4rem;margin:1.6rem 0 0;font-size:.88rem;
  color:rgba(207,226,217,.9)}
.ftr-contact a{color:inherit;text-decoration:underline;
  text-underline-offset:3px}
.ftr-contact a:hover{color:#fff}
.copy{color:rgba(207,226,217,.68);font-size:.82rem;margin:1.4rem 0 0}

/* ---------- STICKY CTA ---------- */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:70;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -10px 30px rgba(11,31,22,.10);
  transform:translateY(110%);transition:transform .26s ease;
  display:none}
.sticky-cta.show{transform:translateY(0)}
@media (max-width:760px){.sticky-cta{display:block}
  .hdr .btn-sm{display:none}}

/* ================================================================
   רקע חי — "אור שעוקב אחרי הסמן" (אפשרות 39 באלבום; בחירת מולי 10-09-2026).
   הילה ירוקה אחת, רכה, שנגררת אחרי העכבר בהשהיה של חצי שנייה.
   בלי עכבר — טלפון, טאבלט, או סמן שיצא מהחלון — היא נודדת לבד במסלול איטי.
   מוזזת ב-transform ולא ב-left/top: מאיץ-חומרה, בלי חישוב-פריסה בכל פריים.
   המיקום נכתב ב-JS דרך CSSOM (בלי style= בתגית) כדי לא לשבור את ה-CSP.
   ================================================================ */
.money-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* התוכן חייב שכבה משלו מעל הרקע. בלי זה, שכבה ממוקמת עם z-index:0
   מציירת מעל תוכן זורם רגיל — והדף היה נעלם מאחורי ההילה. */
main,.ftr{position:relative;z-index:1}

.money-bg i{position:absolute;left:0;top:0;
  width:440px;height:440px;margin:-220px 0 0 -220px;
  border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(14,159,110,.26),transparent 74%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* מצב-נדידה, כשאין סמן פעיל. אנימציה גוברת על transform מוטבע, ולכן די
   בהוספת המחלקה כדי להחזיר את ההילה למסלול העצמאי — בלי לנקות סגנון. */
.money-bg.auto i{animation:followDrift 12s ease-in-out infinite}
@keyframes followDrift{
  0%,100%{transform:translate3d(30vw,44vh,0)}
  34%{transform:translate3d(70vw,30vh,0)}
  67%{transform:translate3d(52vw,74vh,0)}}

/* בטלפון אין עכבר — שם רואים רק את הנדידה; והילה של 440 פיקסלים על מסך
   צר הייתה צובעת חצי מסך. אותו אפקט, בקנה-המידה של המכשיר. */
@media (max-width:760px){
  .money-bg i{width:280px;height:280px;margin:-140px 0 0 -140px}}

/* ================================================================
   גלילה עם אנימציה
   ההסתרה מותנית ב-html.js-on, שנקבע בסקריפט זעיר בראש הדף — כך
   שגולש בלי JS מקבל דף מלא ולא דף ריק, ואין הבהוב לפני הציור הראשון.
   ================================================================ */
html.js-on .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .72s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
html.js-on .reveal.is-in{opacity:1;transform:none}

/* ההירו נכנס מה-CSS ולא מה-JS: הוא מעל הקיפול, ואסור שהתוכן הראשון
   שהגולש רואה יהיה תלוי בקובץ שעדיין לא ירד. */
.hero .wrap{animation:hero-in .85s cubic-bezier(.22,.61,.36,1) both}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .money-bg{display:none}
  html.js-on .reveal{opacity:1;transform:none}
  .hero .wrap{animation:none}
  /* בלי תנועה אוטומטית — הרצועות הופכות לגלילה ידנית, והתוכן עדיין נגיש. */
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
  /* הכלל הגלובלי בראש הקובץ מקצר כל אנימציה ל-‎.001ms אבל לא מבטל את
     מצב-המוצא, ולכן כל אלמנט שממתין בשקיפות/רוחב-0/קו-מקווקו חייב
     איפוס מפורש כאן — אחרת הוא היה נשאר בלתי-נראה. */
  .hero h1 .a-mark{animation:none;text-decoration-thickness:.15em}
  html.js-on .cards-stack .card.reveal .card-n,
  html.js-on .cards-stack .card.reveal .card-body h3,
  html.js-on .cards-stack .card.reveal .card-body p{opacity:1;animation:none}
  .reel > i{animation:none}
  .ripple{display:none}
  .fld input.is-bad{animation:none}
  .seal circle,.seal path{animation:none;stroke-dashoffset:0}
}
.money-bg.paused *{animation-play-state:paused}
/* ================================================================
   תפריט נגישות. נוסף 10-09-2026.
   נבנה בבית ולא כתוסף חיצוני, כי ה-CSP של הדף הוא script-src 'self'
   והוא חוסם בשקט כל ספק נגישות שנטען מדומיין אחר.
   שלוש מגבלות CSP שהקוד כאן מכבד:
     1. אפס style= בתגית. כל שינוי חזותי רוכב על מחלקה או על משתנה CSS.
     2. אפס גופן חיצוני. "גופן קריא" נופל לגופני המערכת.
     3. סמן מוגדל הוא data: URI, שמותר תחת img-src 'self' data:.
   כל המצבים נדלקים כמחלקה על <html>, ולכן אף כלל קיים בקובץ הזה
   לא משתנה כשהתפריט סגור. אפס התנגשות עם מה שכבר עובד.
   ================================================================ */

/* ---------- הכפתור הצף ---------- */
.a11y{position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:80}

/* ===== ווטסאפ צף =====
   הנגישות יושבת ב-inset-inline-end (בעברית: שמאל). הווטסאפ יושב בצד הנגדי
   כדי שהשניים לא יתנגשו, ומעל ה-CTA הדביק במובייל באותו חישוב בדיוק. */
.wa{position:fixed;inset-inline-start:1rem;bottom:1rem;z-index:78;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;border:2px solid var(--white);
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(11,31,22,.28);
  transition:transform .2s ease,box-shadow .2s ease}
.wa:hover,.wa:focus-visible{transform:scale(1.07);box-shadow:0 8px 26px rgba(11,31,22,.34)}
.wa-ico{width:29px;height:29px;fill:currentColor;display:block}
@media (max-width:760px){
  .wa{bottom:calc(5.9rem + env(safe-area-inset-bottom));width:46px;height:46px}
  .wa-ico{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.wa{transition:none}}
.a11y-fab{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--white);
  background:linear-gradient(150deg,var(--gold),var(--gold-dark));
  color:var(--on-gold);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(11,31,22,.28);padding:0;
  transition:transform .2s ease,box-shadow .2s ease}
.a11y-fab:hover{transform:scale(1.07);box-shadow:0 8px 26px rgba(11,31,22,.34)}
.a11y-ico{width:27px;height:27px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.a11y-ico circle{fill:currentColor;stroke:none}

/* מעל ה-CTA הדביק במובייל. זה בדיוק ה"לא להתנגש" שנדרש:
   הרצועה הדביקה יושבת ב-bottom:0 וברוחב מלא, ולכן הכפתור מורם מעליה. */
@media (max-width:760px){
  .a11y{bottom:calc(5.9rem + env(safe-area-inset-bottom))}
  .a11y-fab{width:46px;height:46px}
  .a11y-ico{width:24px;height:24px}
}

/* ---------- הפאנל ---------- */
.a11y-panel{
  position:absolute;bottom:calc(100% + .65rem);inset-inline-end:0;
  width:270px;max-width:calc(100vw - 2rem);
  background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:var(--r);box-shadow:0 18px 44px rgba(11,31,22,.20);
  padding:.9rem;text-align:start}
.a11y-panel[hidden]{display:none}

.a11y-top{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.75rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line)}
.a11y-ttl{font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;color:var(--gold-light);margin:0}
.a11y-close{background:none;border:0;cursor:pointer;font-size:1.05rem;
  line-height:1;color:var(--txt-dim);padding:.3rem .4rem;border-radius:6px}
.a11y-close:hover{background:var(--bg-3);color:var(--txt)}

.a11y-row{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.7rem}
.a11y-lbl{font-size:.93rem;color:var(--txt-dim);font-weight:600}
.a11y-size{display:flex;align-items:center;gap:.3rem}
.a11y-sz{width:30px;height:30px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--bg-3);
  color:var(--grn);font-size:1.1rem;font-weight:800;line-height:1;padding:0}
.a11y-sz:hover{background:var(--grn-soft)}
.a11y-val{min-width:44px;text-align:center;font-size:.86rem;
  font-weight:700;color:var(--txt-dim)}

.a11y-list{list-style:none;margin:0;padding:0;display:grid;gap:.32rem}
.a11y-t{width:100%;text-align:start;cursor:pointer;font:inherit;
  font-size:.93rem;font-weight:600;color:var(--txt);
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:9px;padding:.5rem .7rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.a11y-t:hover{border-color:var(--line-strong);background:var(--grn-soft)}
/* המחוון. aria-pressed הוא מקור האמת, והעיצוב נגזר ממנו ולא להפך. */
.a11y-t::after{content:"";width:30px;height:17px;flex:none;border-radius:99px;
  background:var(--subtle);position:relative;transition:background .18s ease}
.a11y-t[aria-pressed="true"]{background:var(--grn-soft);
  border-color:var(--line-strong);color:var(--grn)}
.a11y-t[aria-pressed="true"]::after{background:var(--gold)}
.a11y-t::before{content:"";position:absolute;width:13px;height:13px;
  border-radius:50%;background:var(--white);
  transform:translateX(0);transition:transform .18s ease;
  margin-inline-start:calc(30px - 15px);pointer-events:none;z-index:1}
.a11y-t{position:relative}
.a11y-t::before{inset-inline-end:.7rem;top:50%;margin-top:-6.5px;
  margin-inline-start:0}
.a11y-t[aria-pressed="true"]::before{transform:translateX(13px)}

.a11y-foot{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.a11y-reset{background:none;border:0;cursor:pointer;font:inherit;
  font-size:.88rem;font-weight:700;color:var(--grn);
  text-decoration:underline;padding:.2rem}
.a11y-link{font-size:.88rem;color:var(--txt-dim);text-decoration:underline}

/* ================================================================
   המצבים עצמם. כולם מחלקה על <html>.
   ================================================================ */

/* ---------- ניגודיות גבוהה ----------
   כל הדף עובר דרך משתני-התפקיד שבראש הקובץ, ולכן מספיק לדרוס אותם
   כאן ואף כלל אחר אינו נוגע. */
html.a11y-contrast{
  --bg:#fff;--bg-2:#fff;--bg-3:#fff;--bg-4:#fff;
  --band:#fff;--band-2:#fff;
  --txt:#000;--txt-dim:#000;--txt-mute:#111;--gold-light:#000;
  --line:#000;--line-strong:#000;--border:#000;--border-strong:#000;
  --gold:#00532f;--gold-dark:#00381f;--gold-bright:#00381f;
  --grn:#00532f;--grn-2:#00381f;--grn-soft:#e6efea;
  --on-gold:#fff;--alert:#00381f;--err:#a10000;
}
html.a11y-contrast .money-bg{display:none}
html.a11y-contrast .marquee-firms{background:#fff}
html.a11y-contrast .sub,html.a11y-contrast .privacy,
html.a11y-contrast .risk,html.a11y-contrast .copy{color:#000}

/* ---------- גווני אפור ----------
   לא filter על אב-קדמון: filter יוצר בלוק-מכיל חדש ומשבית
   position:fixed, וזה היה שובר את ה-CTA הדביק ואת הכפתור הזה עצמו.
   לכן הפלטה מנוטרלת דרך המשתנים, והמדיה בלבד מקבלת filter. */
html.a11y-gray{
  --green:#5a5a5a;--green-bright:#4a4a4a;--green-deep:#333;--green-dark:#222;
  --green-light:#e3e3e3;--green-faint:#f2f2f2;--green-glow:rgba(0,0,0,.12);
  --bg-alt:#f4f4f4;--border-strong:rgba(0,0,0,.34);
}
html.a11y-gray img,html.a11y-gray video{filter:grayscale(1)}

/* ---------- הדגשת קישורים ---------- */
html.a11y-links a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px}
html.a11y-links a:not(.btn):not(.skip){outline:1px dashed currentColor;
  outline-offset:3px;border-radius:3px}

/* ---------- גופן קריא ----------
   נופל לגופני המערכת בכוונה: font-src 'self' חוסם כל גופן חיצוני. */
html.a11y-font body,html.a11y-font h1,html.a11y-font h2,html.a11y-font h3,
html.a11y-font .btn,html.a11y-font input,html.a11y-font button,
html.a11y-font legend,html.a11y-font summary,html.a11y-font .a11y-ttl{
  font-family:Arial,'Segoe UI',Tahoma,sans-serif;
  letter-spacing:.012em;word-spacing:.06em}

/* ---------- עצירת תנועה ----------
   שכפול מדויק של בלוק prefers-reduced-motion שכבר קיים בקובץ, כולל
   שמונת האיפוסים. בלעדיהם כל אלמנט שממתין בשקיפות היה נשאר בלתי-נראה,
   ו"עצירת תנועה" הייתה מוחקת חצי דף. */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
  animation-duration:.001ms;transition-duration:.001ms}
html.a11y-motion{scroll-behavior:auto}
html.a11y-motion .money-bg{display:none}
html.a11y-motion.js-on .reveal{opacity:1;transform:none}
html.a11y-motion .hero .wrap{animation:none}
html.a11y-motion .marquee{overflow-x:auto}
html.a11y-motion .marquee-track{animation:none}
html.a11y-motion .hero h1 .a-mark{animation:none;text-decoration-thickness:.15em}
html.a11y-motion.js-on .cards-stack .card.reveal .card-n,
html.a11y-motion.js-on .cards-stack .card.reveal .card-body h3,
html.a11y-motion.js-on .cards-stack .card.reveal .card-body p{opacity:1;animation:none}
html.a11y-motion .reel > i{animation:none}
html.a11y-motion .ripple{display:none}
html.a11y-motion .fld input.is-bad{animation:none}
html.a11y-motion .seal circle,html.a11y-motion .seal path{animation:none;stroke-dashoffset:0}

/* ---------- סמן מוגדל ----------
   data: URI מותר תחת img-src 'self' data:. */
html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M7 3 L7 32 L14 25 L19 37 L25 34 L20 23 L30 23 Z' fill='%23000' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto}
html.a11y-cursor a,html.a11y-cursor button,html.a11y-cursor summary,
html.a11y-cursor label,html.a11y-cursor .choice{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M14 4 a3 3 0 0 1 6 0 v11 h2 a4 4 0 0 1 4 4 v9 a7 7 0 0 1-7 7 h-5 a7 7 0 0 1-7-7 v-9 a3 3 0 0 1 6 0 z' fill='%23000' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 14 3,pointer}

/* ---------- הדפסה ---------- */
@media print{.a11y{display:none}}

/* ---------- עמוד הצהרת הנגישות ----------
   כותרת בגודל h2 ולא h1: זה מסמך לקריאה, לא עמוד שיווקי. */
.legal-h1{font-size:var(--fs-h2);margin-bottom:.3em}
body[data-variant="legal"] main h2{font-size:1.22rem;margin-top:2em}
body[data-variant="legal"] main .need-list{margin-bottom:1.4em}
body[data-variant="legal"] .ftr .copy a{color:inherit;text-decoration:underline}

/* ---------- פריסת העדויות ----------
   עמודות ולא רשת: לצילומי מסך יש גבהים שונים לגמרי, ופריסת עמודות
   ממלאת אותם בלי לחתוך אף צילום ובלי להשאיר חורים. break-inside
   מונע מצילום להיחתך בין שתי עמודות. */
.testi-grid{columns:3;column-gap:1rem;margin-top:1.6rem}
.testi-grid img{width:100%;height:auto;display:block;
  margin:0 0 1rem;break-inside:avoid;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(11,31,22,.07)}
@media (max-width:900px){.testi-grid{columns:2}}
@media (max-width:520px){.testi-grid{columns:1;column-gap:0}}

/* ---------- דוח המס ----------
   רוחב מוגבל: זו תמונה גבוהה, ובלי תקרה היא הייתה בולעת מסך שלם
   ודוחפת את כל מה שאחריה מטה. */
.tax-block{margin-top:var(--sp)}
.tax-img{width:100%;max-width:420px;height:auto;display:block;
  margin:0 auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(11,31,22,.12)}
/* ההערה אינה אותיות קטנות. היא נקראת, והיא צמודה למסמך. */
.tax-note{max-width:620px;margin:1.1rem auto 0;text-align:center;
  font-size:.93rem;line-height:1.65;color:var(--txt-dim)}

/* ---------- שיעורי ההצלחה בפועל ----------
   המשפט על הפער אינו אותיות קטנות. הוא באותו גודל כמו השאר,
   כי הודאה שמוסתרת אינה הודאה. */
.rate-block{margin-top:2.2rem;padding:1.5rem 1.6rem;
  background:var(--bg-3);border:1px solid var(--line-strong);
  border-radius:var(--r);text-align:center}
.rate-block h3{margin-bottom:.7em}
.rate-lead{font-size:1.06em;font-weight:600;color:var(--txt);margin-bottom:.8em}
.rate-gap{color:var(--txt);margin-bottom:.8em}
.rate-cmp{font-size:.95rem;color:var(--txt-dim);margin-bottom:0}

/* הסבר הדראודאון. לא אותיות קטנות: זה המשפט שהופך מספר חשוד
   להוכחה של משמעת, ולכן הוא נקרא. */
.data-why{max-width:620px;margin:0 auto 1.4rem;text-align:center;
  font-size:.95rem;line-height:1.65;color:var(--txt-dim)}

/* ===== ערימת קלפים: המשיכות מהחודשים האחרונים ===== */
.wdk-block{margin-top:46px}
.wdk{margin-top:26px}
.wdk-stack{position:relative;height:330px;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}
.wdk-card{position:absolute;inset:0;margin:auto;width:min(560px,90%);height:270px;background:#fff;border:1px solid rgba(11,31,22,.12);border-radius:18px;box-shadow:0 10px 30px rgba(11,31,22,.14);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .35s ease,opacity .35s ease}
.wdk-card img{max-width:94%;max-height:94%;width:auto;height:auto;object-fit:contain;display:block;pointer-events:none}
.wdk-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.wdk-cap{font-weight:800;font-size:1.1rem}
.wdk-count{font-size:.9rem;opacity:.75;border:1px solid rgba(11,31,22,.14);border-radius:999px;padding:3px 12px}
.wdk-hint{text-align:center;font-size:.88rem;opacity:.7;margin:8px 0 0}
.wdk-stack:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:18px}
@media (max-width:760px){.wdk-stack{height:290px}.wdk-card{height:240px;width:94%}.wdk-cap{font-size:1rem}}