/* =========================================================
   דן ארד · אתר אישי
   טוקנים מתוך קולקציית "Dan Arad Colors" · מצב Warm Light
   ========================================================= */

:root{
  /* --- surfaces --- */
  /* כרומה הורדה ל-75% מהמקור, עם L ו-h נעולים על הערכים המקוריים.
     נמדד ב-LCH ולא ב-HSL, שמשקר בבהירויות האלה. alt: C 6.0 -> 4.5. */
  --surface-body:        #F9F7F3;
  --surface-body-alt:    #F1ECE4;
  --surface-card:        #FFFFFF;
  --surface-cta:         var(--accent-deep);
  --surface-footer:      var(--surface-body-alt);

  /* --- text --- */
  --text-primary:        #1D2025;
  --text-secondary:      #55564F;
  /* הוכהה מהערך הקודם: על הרקע החדש הוא נחת על 4.51 מול סף של 4.5.
     עכשיו 4.86 ו-5.27, בלי הבדל שנראה בעין. */
  --text-muted:          #66675E;
  /* הוכהה מ---8A6F2E כדי לעבור AA על שני גווני הרקע (4.47 → 4.95) */
  --text-accent:         #7A6229;
  --text-on-dark:        #FFFFFF;
  --text-on-dark-2:      #EFE8DB;

  /* --- action --- */
  --action-primary:      #C2A14D;
  --action-hover:        #D4B563;
  --action-pressed:      #A8894B;
  --action-secondary:    var(--accent-deep);
  --action-secondary-hover:   #2E4566;
  --action-secondary-pressed: #14202F;
  --action-text:         var(--accent-deep);
  /* מקור האמת היחיד לנייבי. --surface-cta, --action-text
     ו---action-secondary כולם נגזרים ממנו. */
  --accent-deep:         #1B2A41;
  /* הטיק של "פחות מתאים": היה #cfc9ba, יחס 1.65 על כרטיס לבן.
     הוא אייקון שנושא משמעות ולכן נמדד מול 3.0. עכשיו 3.34. */
  --tick-no:             #948C78;
  /* הירוק של וואטסאפ. צבע מותג חיצוני, מוחזק בטוקן ולא כהקס נודד. */
  --wa-green:            #25D366;
  --wa-green-hover:      #1FBE5B;

  /* --- borders --- */
  --border-subtle:       #DED8C9;
  --nav-bg:              rgba(249,247,243,.78);

  /* --- typefaces ---
     עברית: Heebo לכל הטקסט.
     אנגלית: Fraunces לכותרות ו-Hanken Grotesk לגוף — ראה [dir="ltr"] למטה. */
  --font-head: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- type scale --- */
  --f-h1:        52px;  --lh-h1: 62px;
  --f-feature:   44px;  --lh-feature: 52px;
  --f-h2:        32px;  --lh-h2: 40px;
  --f-h3:        22px;  --lh-h3: 30px;
  --f-lead:      20px;  --lh-lead: 32px;
  --f-body:      18px;  --lh-body: 30px;
  --f-card:      16px;  --lh-card: 26px;
  --f-caption:   14px;  --lh-caption: 21px;
  --f-eyebrow:   13px;  --lh-eyebrow: 16px;

  /* --- spacing scale --- כל ערכי הריווח באתר נגזרים מהסולם הזה */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px;
  --sp-11:64px; --sp-12:80px; --sp-13:96px;

  /* --- rhythm --- */
  --pad-section: var(--sp-13);
  --wrap:        1240px;   /* מסילת התוכן. הרקעים תמיד ברוחב מלא */
  /* תקרת אורך שורה. 880 נתן 98 תווים בשורה, מעל התקרה הקריאה של 75.
     680 מוריד ל-65. לאנגלית יש ערך משלה למטה, היא רחבה יותר לתו. */
  --wrap-narrow: 680px;
  /* רדיוסים הודקו: 16/20 קראו ישן. 8/10 שומרים על הריכוך בלי העגלגלות. */
  --radius:      8px;
  --nav-h:       68px;

  /* אין טוקני elevation: המשטחים שטוחים ומופרדים ב-1px.
     הצללים היחידים שנשארו הם הניווט בגלילה ופאנל המובייל,
     ושניהם מרחפים מעל תוכן ולכן חייבים הפרדה. */

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ========== reset ========== */
*,*::before,*::after{ box-sizing:border-box; }
/* אין overflow-x כאן ולא על body: כל ערך שאינו visible יוצר הקשר גלילה
   ושובר את position:sticky של הניווט. מקורות הגלישה עצמם תוקנו במקום. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--f-body); line-height:var(--lh-body);
  color:var(--text-primary); background:var(--surface-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,blockquote,figure{ margin:0; }
button{ font:inherit; color:inherit; }

/* היה --action-primary, ניגודיות 2.31 מול הרקעים. הסף לטבעת פוקוס
   הוא 3.0. --accent-deep נותן 13.51. */
:focus-visible{ outline:3px solid var(--accent-deep); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--surface-cta); color:#fff; padding:var(--sp-3) var(--sp-5); border-radius:0 0 6px 0;
}
.skip-link:focus{ inset-inline-start:0; }

/* ========== type ========== */
/* כל מה שנחשב כותרת יורש את --font-head. הרשימה מרוכזת כאן
   כדי שהחלפת גופן תהיה שינוי במקום אחד. */
.h1,.h-feature,.h2,.h3,
.card__title,.step__title,.row__title,
.card__num,.footer__name,.nav__brand{ font-family:var(--font-head); }

.h1{ font-size:var(--f-h1); line-height:var(--lh-h1); font-weight:800; letter-spacing:-.015em; }
.h-feature{ font-size:var(--f-feature); line-height:var(--lh-feature); font-weight:800; letter-spacing:-.015em; }
.h2{ font-size:var(--f-h2); line-height:var(--lh-h2); font-weight:700; letter-spacing:-.01em; }
.h3{ font-size:var(--f-h3); line-height:var(--lh-h3); font-weight:700; }
.lead{ font-size:var(--f-lead); line-height:var(--lh-lead); color:var(--text-secondary); }
.body{ font-size:var(--f-body); line-height:var(--lh-body); color:var(--text-secondary); }
.body + .body{ margin-top:var(--sp-5); }
.eyebrow{
  font-size:var(--f-eyebrow); line-height:var(--lh-eyebrow); font-weight:700;
  letter-spacing:.14em; color:var(--text-accent);
}
.trust{ font-size:var(--f-caption); line-height:var(--lh-caption); color:var(--text-muted); }

/* אלמנות: מילה בודדת שנופלת לבד לשורה האחרונה. text-wrap:pretty מטפל בזה
   ברמת הדפדפן ובכל רוחב, במקום   קשיחים שנשברים ברגע שהטקסט מתעדכן.
   דפדפן שלא תומך גולש כרגיל, בלי רגרסיה. */
.lead,.trust,.body,.card__body,.step__body,.row__body,.cta__sub,.cta__note,
.faq__a,.sec-head__sub,.ticks li{ text-wrap:pretty; }

/* T-group מכיל מקף, והדפדפן רשאי לשבור שורה עליו. U+2011 לא קיים
   ב-Hanken Grotesk, ב-Heebo ולא ב-Fraunces, ולכן היה נופל לפונט מערכת. */
.nb{ white-space:nowrap; }

.center{ text-align:center; }

/* ========== layout ========== */
/* מסילת התוכן. הרקעים תמיד ברוחב מלא — רק התוכן מוגבל ל---wrap וממורכז. */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-6); }

/* פסקאות רצות: העמודה ממורכזת במסילה, הטקסט בתוכה מיושר לתחילת השורה.
   מרכוז של פרוזה בת שלוש-ארבע שורות מאבד לעין את תחילת השורה בכל מעבר.
   הכותרות נשארות ממורכזות — הן שורה אחת ולא נסרקות. */
.prose{ max-width:var(--wrap-narrow); margin-inline:auto; text-align:start; }
.prose + .prose{ margin-top:var(--sp-5); }

/* המרווח מקצה המסך ועד לקצה מסילת התוכן — משמש ליישור ההירו לניווט.
   --sbw הוא רוחב פס הגלילה, נמדד ב-JS. בלעדיו 100vw כולל את פס הגלילה
   וכל אלמנט שמסתמך עליו גולש אופקית ומזיז את כל העמוד. */
:root{
  --sbw: 0px;
  --vw: calc(100vw - var(--sbw));
  --rail-gap:max(24px, calc((var(--vw) - var(--wrap)) / 2 + 24px));
}

.section{ padding-block:var(--pad-section); }
.section--body{ background:var(--surface-body); }
.section--alt{ background:var(--surface-body-alt); }

/* קו הפרדה עדין בין באנדים באותו גוון — לא נראה כשהגוונים שונים */
.section + .section{ box-shadow:inset 0 1px 0 rgba(29,32,37,.045); }

.sec-head{ margin-bottom:var(--sp-9); }
.sec-head .eyebrow{ margin-bottom:var(--sp-3); display:block; }
.sec-head .h2 + .sec-head__sub{ margin-top:var(--sp-3); }
.sec-head__sub{ font-size:var(--f-body); color:var(--text-secondary); }
.sec-head--sub{ margin-top:var(--sp-12); }

.grid{ display:grid; gap:var(--sp-6); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

/* ========== nav ========== */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  /* לא זהב: הזהב הוא אקצנט ולא מסגרת. קו שיער בכחול המותג נותן קצה
     בראש העמוד, והצל ב-.is-scrolled מרים את הניווט מעל התוכן בגלילה. */
  border-bottom:1px solid rgba(27,42,65,.12);
  transition:box-shadow .3s var(--ease);
}
.nav.is-scrolled{ box-shadow:0 6px 22px rgba(28,26,20,.10); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-6);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
}
.nav__brand{ font-size:22px; font-weight:700; text-decoration:none; color:var(--text-primary); letter-spacing:-.01em; }
.nav__links{ display:flex; align-items:center; gap:var(--sp-6); }
/* padding-block 8: body מוריש line-height 30px, אז הגובה יוצא 46 —
   מעל יעד המגע של 44. הכלל הזה ספציפי מ---btn--sm ולכן שולט גם על
   כפתור ה-CTA ועל מתג השפה, ושלושתם יוצאים באותו גובה. */
.nav__links a{
  font-size:15px; text-decoration:none; color:var(--text-secondary);
  position:relative; padding-block:var(--sp-2); display:inline-flex; align-items:center;
  transition:color .18s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; inset-inline:0; bottom:2px; height:2px;
  background:var(--action-primary); transform:scaleX(0); transform-origin:center;
  transition:transform .26s var(--ease);
}
.nav__links a:not(.nav__cta):hover{ color:var(--text-primary); }
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-current::after{ transform:scaleX(1); }
.nav__links a.is-current{ color:var(--text-primary); font-weight:500; }
/* .nav__links a ספציפי מ---btn--primary וגנב לכפתור את צבע הטקסט:
   הוא קיבל --text-secondary במקום --action-text, מה שנתן 3.0 על הזהב
   במקום 5.85. הסלקטור הזה מחזיר את הבעלות ל-.btn. */
.nav__links a.nav__cta{ color:var(--action-text); }
.nav__cta{ margin-inline-start:var(--sp-2); }

/* מתג שפה — נקרא כפריט ניווט, לא ככפתור פעולה, כדי שלא יתחרה ב-CTA */
.nav__lang{
  font-size:14px !important; font-weight:500;
  padding-inline:var(--sp-3); border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--border-subtle);
  transition:color .18s var(--ease), box-shadow .18s var(--ease);
}
.nav__lang::after{ display:none !important; }
.nav__lang:hover{ color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--action-primary); }

.nav__burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:var(--sp-3) var(--sp-2); flex-direction:column; justify-content:space-between;
}
.nav__burger span{ display:block; height:2px; background:var(--text-primary); border-radius:2px; transition:transform .28s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ========== buttons — הרכיבים היחידים עם hover ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  /* 11 ולא 16: body מוריש line-height 30px מוחלט, אז 16 הביא את הכפתור
     ל-62px לטקסט של 16px. עכשיו 52, ועדיין מעל יעד מגע של 44. */
  padding:11px var(--sp-7); border:0; border-radius:4px; cursor:pointer;
  font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--action-primary); color:var(--action-text); }
.btn--primary:hover{ background:var(--action-hover); }
.btn--primary:active{ background:var(--action-pressed); }
.btn--secondary{ background:var(--action-secondary); color:#fff; }
.btn--secondary:hover{ background:var(--action-secondary-hover); }
.btn--secondary:active{ background:var(--action-secondary-pressed); }
.btn--sm{ padding:9px var(--sp-5); font-size:14px; }
.btn--block{ width:100%; }

/* שתי וריאציות בלבד: זהב (ראשי) ונייבי (בהירו). הוואטסאפ הירוק בוטל. */
.btn__icon{ width:20px; height:20px; flex:0 0 20px; }
.btn--sm .btn__icon{ width:16px; height:16px; flex:0 0 16px; }

.hero__actions{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

/* ========== hero ========== */
/* RTL: הטקסט מימין והתמונה משמאל. ההירו נשאר על רקע מלא,
   והתוכן יושב במסילה מרכזית כמו שאר העמוד. */
.hero{
  display:flex; align-items:center;
  min-height:calc(100svh - var(--nav-h) - 1px);
  background:var(--surface-body-alt);
  padding-block:clamp(48px,6vh,72px);
  overflow:hidden;
}
.hero__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--sp-6);
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(380px,28vw,500px);
  gap:clamp(64px,6vw,104px);
  align-items:center;
}
.hero__media{
  grid-column:2; grid-row:1;
  position:relative; overflow:hidden;
  width:100%; aspect-ratio:4/5;
  border:1px solid rgba(122,98,41,.14);
  border-radius:6px;
  background:var(--surface-card);
}
/* ========== אנגלית: זוג גופנים משלה ==========
   Fraunces לכותרות — סריף עם אופי אדיטוריאלי שמתיישב עם הקרם והזהב.
   Hanken Grotesk לגוף — גרוטסק נקי וקריא.
   הטקסט העברי שנשאר בעמוד (מתג השפה) ממשיך ב-Heebo. */
[dir="ltr"]{
  --font-head:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
[dir="ltr"] [lang="he"]{ font-family:'Heebo', system-ui, sans-serif; }

/* Fraunces הוא סריף בעל ניגודיות גבוהה. במשקלים כבדים הוא נסתם ומסורבל;
   האלגנטיות שלו נמצאת ב-400-500 בגדלים גדולים, עם optical size גבוה
   שמדק את הקווים. לכן הכותרות באנגלית קלות בהרבה מהעברית. */
/* ה-opsz נשאר על auto ולא נכפה ידנית: ב-Fraunces ערך opsz גבוה מדקק
   את הקווים, וזה מה שגרם לכותרות להיראות קלות מ-Regular.
   auto ממפה את ה-opsz לגודל הפונט בפועל ומחזיר עובי טבעי. */
[dir="ltr"] .h1,
[dir="ltr"] .h-feature{
  font-weight:400; letter-spacing:-.015em;
  font-optical-sizing:auto;
}
[dir="ltr"] .h2{ font-weight:500; letter-spacing:-.01em; font-optical-sizing:auto; }
[dir="ltr"] .h3,
[dir="ltr"] .card__title,
[dir="ltr"] .step__title,
[dir="ltr"] .row__title,
[dir="ltr"] .footer__name{ font-weight:500; }

/* מילה אחת באיטליק בתוך הכותרת — המהלך האופייני של Fraunces.
   אותו צבע, לא אקצנט: ההדגשה היא בצורת האות ולא בגוון. */
[dir="ltr"] .h1 em,
[dir="ltr"] .h-feature em{ font-style:italic; font-weight:400; }

/* eyebrow באנגלית עולה לרישיות עם ריווח אותיות — לא אפשרי בעברית */
[dir="ltr"] .eyebrow{ text-transform:uppercase; letter-spacing:.12em; }

/* המספרים הגדולים בכרטיסים: ספרות בגובה אחיד, לא ספרות ישנות */
[dir="ltr"] .card__num{ font-weight:500; font-variant-numeric:lining-nums; letter-spacing:0; }

/* השורות מתקצרות מעט כי לסריף יש נוכחות אנכית גדולה יותר */
/* האנגלית רחבה יותר לתו, ולכן אותה עמודה נותנת לה שורות ארוכות יותר. */
[dir="ltr"]{ --lh-h1:60px; --lh-feature:50px; --wrap-narrow:620px; }
@media (max-width:860px){ [dir="ltr"]{ --lh-h1:42px; --lh-feature:36px; } }

/* דן מסתכל שמאלה במקור. בעברית התמונה משמאל והטקסט מימין, ולכן היא מתהפכת
   כדי שהמבט יפנה פנימה אל הכיתוב. באנגלית התמונה מימין והמקור כבר נכון. */
[dir="rtl"] .hero__media img{ transform:scale(-1.12,1.12); }
.js .hero__media{ opacity:0; }
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  transform:scale(1.12);
  transform-origin:50% 30%;
}
.hero__body{
  grid-column:1; grid-row:1;
  display:flex; align-items:center; justify-content:flex-start;
}
.hero__text{ max-width:620px; }
.js .hero__text > *{ opacity:0; }
.hero__text .h1{ margin-bottom:var(--sp-6); }
.hero__text .lead{ margin-bottom:var(--sp-4); }
.hero__text .trust{ margin-bottom:var(--sp-7); }

/* כניסת ההירו בטעינה */
@keyframes riseIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@keyframes mediaIn{ from{ opacity:0; transform:scale(1.05) } to{ opacity:1; transform:none } }
.is-ready .hero__text > *{ animation:riseIn .85s var(--ease-out) var(--d,0ms) both; }
.is-ready .hero__media{ animation:mediaIn 1.1s var(--ease-out) 60ms both; }

/* ========== page hero (עמודי משנה) ========== */
.page-hero{
  background:var(--surface-body-alt);
  padding:var(--sp-13) 0 var(--sp-12);
}
.page-hero .eyebrow{ display:block; margin-bottom:var(--sp-3); }
.page-hero .lead{ margin-top:var(--sp-4); }

/* ========== cards — משטחים, לא כפתורים ========== */
.card{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius); padding:var(--sp-7);
}
.card__title{ font-size:var(--f-h3); line-height:var(--lh-h3); font-weight:700; }
.card__body{ font-size:var(--f-card); line-height:var(--lh-card); color:var(--text-secondary); margin-top:var(--sp-2); }
.card--benefit .card__num{
  display:block; font-size:42px; line-height:1; font-weight:800;
  /* היה --action-primary, ניגודיות 2.47 על כרטיס לבן. הסף לטקסט גדול
     הוא 3.0, כלומר זה נכשל. --accent-deep נותן 14.44. */
  color:var(--accent-deep); margin-bottom:var(--sp-3); letter-spacing:-.02em;
}

/* fit cards */
.card--fit .card__title{ margin-bottom:var(--sp-6); }
.ticks li{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  font-size:var(--f-card); line-height:var(--lh-card);
  color:var(--text-secondary); padding-block:var(--sp-2);
}
.ticks li + li{ border-top:1px solid rgba(29,32,37,.055); }
.tick{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; margin-top:var(--sp-1); position:relative; }
.tick--yes{ background:var(--accent-deep); }
.tick--no{ background:var(--tick-no); }
.tick--yes::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);
}
.tick--no::before,.tick--no::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:9px; height:2px; background:#fff; border-radius:1px;
}
.tick--no::before{ transform:rotate(45deg); }
.tick--no::after{ transform:rotate(-45deg); }
.card--yes{ border-color:var(--accent-deep); }

/* quote cards */
.card--quote{ display:flex; flex-direction:column; }
.quote{
  font-size:var(--f-card); line-height:27px; color:var(--text-primary);
  font-style:italic; flex:1 1 auto; margin:0;
}
/* שורת הייחוס נצמדת לתחתית הכרטיס דרך flex:1 על הציטוט, כך שהשורות
   מיושרות בין הכרטיסים בלי קשר לאורך הציטוט.
   end = הפינה הנגדית לכיוון הקריאה: שמאל בעברית, ימין באנגלית. */
.quote__by{
  font-size:var(--f-caption); color:var(--text-muted); margin-top:var(--sp-5);
  font-style:normal; text-align:end;
}

/* ========== timeline ==========
   RTL: עמודה 1 היא הימנית. בעיצוב העיגולים מימין — לכן ה-rail בעמודה 1. */
.timeline{ --rail-w:56px; --step-gap:var(--sp-4); position:relative; display:flex; flex-direction:column; gap:var(--step-gap); }
.step{ display:grid; grid-template-columns:var(--rail-w) 1fr; gap:var(--sp-6); align-items:stretch; }

.step__rail{ grid-column:1; position:relative; display:grid; place-items:center; }
.step__num{
  width:var(--rail-w); height:var(--rail-w); border-radius:50%;
  background:var(--action-primary); color:var(--action-text);
  display:grid; place-items:center; font-weight:700; font-size:18px;
  position:relative; z-index:1;
}
/* חץ קטן שנכנס לתוך כל עיגול חוץ מהראשון — מסמן את כיוון ההתקדמות */
.step:not(:first-child) .step__num::before{
  content:''; position:absolute;
  bottom:calc(100% + 8px); inset-inline:0; margin-inline:auto;
  width:9px; height:9px;
  /* גבולות פיזיים בכוונה: logical properties מתהפכים ב-RTL
     והחץ היה מצביע אלכסונית שמאלה במקום למטה */
  border-right:2px solid var(--action-primary);
  border-bottom:2px solid var(--action-primary);
  transform:rotate(45deg);
  opacity:.8;
}
/* קטע קו מעל העיגול ומתחתיו — יחד קו רציף בין השלבים */
.step__rail::before,
.step__rail::after{
  content:''; position:absolute; inset-inline:0; margin-inline:auto;
  width:2px; background:var(--action-primary); opacity:.4;
}
.step__rail::before{ top:0; height:calc(50% - (var(--rail-w) / 2)); }
.step__rail::after{ top:calc(50% + (var(--rail-w) / 2)); bottom:calc(var(--step-gap) * -1); }
.step:first-child .step__rail::before{ content:none; }
.step:last-child  .step__rail::after{ content:none; }

.step__card{
  grid-column:2;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius); padding:var(--sp-6) var(--sp-7);
}
.step.is-active .step__card{ border-color:var(--accent-deep); }
.step__title{ font-size:var(--f-h3); line-height:var(--lh-h3); font-weight:700; }
.step__body{ font-size:var(--f-card); line-height:var(--lh-card); color:var(--text-secondary); margin-top:var(--sp-1); }

/* ========== method rows ========== */
/* תגי ההסמכה — קבצי PNG אמיתיים. גובה קבוע, הרוחב נגזר מהיחס. */
.badges{ display:flex; justify-content:center; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-9); }
.badge{ width:auto; height:64px; }
.badge--sm{ width:auto; height:32px; display:inline-block; vertical-align:middle; }

/* שורות מובנות, לא פסקאות רצות — נפתחות על כל מסילת התוכן */
.rows{ display:flex; flex-direction:column; gap:var(--sp-6); }
/* 2px ולא 3: משקל קו אחיד באתר — 1px למשטחים, 2px לאקצנטים. */
.row{ border-inline-start:2px solid var(--action-primary); padding-inline-start:var(--sp-6); }
.row__title{ font-size:var(--f-h3); line-height:var(--lh-h3); font-weight:700; }
.row__body{ font-size:var(--f-card); line-height:var(--lh-card); color:var(--text-secondary); margin-top:var(--sp-1); max-width:var(--wrap-narrow); }

.accred{
  margin-top:var(--sp-10); font-size:var(--f-caption); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2); flex-wrap:wrap;
}

/* ========== faq ========== */
.faq{ display:flex; flex-direction:column; gap:var(--sp-3); }
.faq__item{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .25s var(--ease);
}
.faq__item.is-open{ border-color:var(--accent-deep); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-6); background:transparent; border:0; cursor:pointer; text-align:start;
  font-size:var(--f-body); font-weight:700; color:var(--text-primary);
  transition:color .18s var(--ease);
}
.faq__q:hover{ color:var(--text-accent); }
.faq__icon{ position:relative; flex:0 0 16px; width:16px; height:16px; }
.faq__icon::before,.faq__icon::after{
  /* האייקון הוא מה שמזהה את השורה כנפתחת, ולכן הוא רכיב ממשק שנמדד
     מול 3.0. בזהב הוא נתן 2.47. --accent-deep נותן 14.44. */
  content:''; position:absolute; inset:0; margin:auto; background:var(--accent-deep);
  transition:transform .28s var(--ease);
}
.faq__icon::before{ width:16px; height:2px; }
.faq__icon::after{ width:2px; height:16px; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:scaleY(0); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > p{
  overflow:hidden; font-size:var(--f-body); line-height:var(--lh-body);
  color:var(--text-secondary); padding-inline:var(--sp-6); max-width:var(--wrap-narrow);
}
.faq__item.is-open .faq__a > p{ padding-bottom:var(--sp-6); }

/* ========== cta ========== */
.cta{
  background:var(--surface-cta); padding-block:var(--sp-13); color:var(--text-on-dark);
}
.cta__panel{ text-align:center; max-width:800px; margin-inline:auto; }
.cta__sub{ color:var(--text-on-dark-2); margin:var(--sp-5) 0 var(--sp-7); font-size:var(--f-lead); line-height:var(--lh-lead); }
.cta__note{ margin-top:var(--sp-5); font-size:var(--f-caption); color:var(--text-on-dark-2); opacity:.72; }

/* ========== footer ========== */
.footer{
  background:var(--surface-footer); padding:var(--sp-11) 0 var(--sp-7);
}
.footer__grid{ display:flex; justify-content:space-between; gap:var(--sp-7); flex-wrap:wrap; }
.footer__name{ font-size:var(--f-h3); font-weight:700; }
.footer__tag{ font-size:var(--f-caption); color:var(--text-muted); margin-top:var(--sp-1); }
.footer__contact li{ margin-bottom:var(--sp-2); }
.footer__contact a{
  font-size:var(--f-caption); color:var(--text-secondary); text-decoration:none;
  transition:color .18s var(--ease);
}
.footer__contact a:hover{ color:var(--text-accent); text-decoration:underline; text-underline-offset:3px; }
.footer__trust{
  text-align:center; font-size:var(--f-caption); color:var(--text-muted);
  margin-top:var(--sp-9); display:flex; align-items:center; justify-content:center; gap:var(--sp-2); flex-wrap:wrap;
}
.footer__legal{
  text-align:center; font-size:13px; color:var(--text-muted);
  margin-top:var(--sp-6); padding-top:var(--sp-6);
  border-top:1px solid var(--border-subtle);
  max-width:var(--wrap); margin-inline:auto;
}

/* ========== floating whatsapp ========== */
.wa-float{
  position:fixed; inset-inline-start:24px; bottom:24px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:var(--wa-green); color:#fff; display:grid; place-items:center;
  transition:transform .3s var(--ease-out), background .2s var(--ease), opacity .3s var(--ease);
}
.js .wa-float{ opacity:0; transform:translateY(12px) scale(.9); }
.js .wa-float.is-in{ opacity:1; transform:none; }
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ background:var(--wa-green-hover); }

/* anchor offset under sticky nav */
[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }

/* ========== responsive ========== */
@media (max-width:1024px){
  :root{ --pad-section:var(--sp-12); }
  .hero{ min-height:0; padding-block:var(--sp-7) var(--sp-11); }
  .hero__inner{ grid-template-columns:1fr; gap:var(--sp-8); }
  .hero__media{
    grid-column:1; grid-row:1;
    width:min(100%,560px); justify-self:center;
    aspect-ratio:4/3;
  }
  .hero__media img{ object-position:center 8%; transform:none; }
  [dir="rtl"] .hero__media img{ transform:scaleX(-1); }
  .hero__body{
    grid-column:1; grid-row:2;
  }

}

@media (max-width:860px){
  :root{
    --f-h1:34px;  --lh-h1:44px;
    --f-feature:28px; --lh-feature:38px;
    --f-h2:24px;  --lh-h2:32px;
    --f-h3:20px;  --lh-h3:28px;
    --f-lead:17px; --lh-lead:28px;
    --f-body:16px; --lh-body:27px;
    --pad-section:var(--sp-11);
    --nav-h:58px;
  }
  .grid--3,.grid--2{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:var(--sp-7); }
  .sec-head--sub{ margin-top:var(--sp-11); }
  .card{ padding:var(--sp-6); }

  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface-body); border-bottom:1px solid var(--border-subtle);
    padding:var(--sp-2) var(--sp-6) var(--sp-6);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .24s var(--ease), transform .24s var(--ease);
    max-height:calc(100vh - var(--nav-h)); overflow:auto;
    box-shadow:0 12px 24px rgba(28,26,20,.08);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:var(--sp-4) 0; font-size:17px; border-bottom:1px solid var(--border-subtle); }
  .nav__links a:not(.nav__cta)::after{ display:none; }
  .nav__lang{ box-shadow:none; padding-inline:0; }
  .nav__cta{ margin:var(--sp-4) 0 0; width:100%; justify-content:center; border-bottom:0 !important; padding:var(--sp-3) var(--sp-4); }

  .hero__actions{ width:100%; }
  .hero__actions .btn,
  .cta__panel > .btn{ width:100%; }

  .timeline{ --rail-w:44px; }
  .step{ grid-template-columns:var(--rail-w) 1fr; gap:var(--sp-4); }
  .step__num{ font-size:16px; }
  .step:not(:first-child) .step__num::before{ bottom:calc(100% + 6px); width:8px; height:8px; }


  .cta{ padding-block:var(--sp-11); }
  .wa-float{ width:52px; height:52px; inset-inline-start:16px; bottom:16px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .hero__text > *,.js .hero__media,.js .wa-float{ opacity:1 !important; transform:none !important; }
}

@media print{
  .nav,.wa-float{ display:none; }
  .hero__text > *,.hero__media{ opacity:1; transform:none; }
}