/* ============================================================
   אביתר רון — אתר תדמית. בנייה מאפס.
   שפת המוזיקה (spec/שפת-המוזיקה.md) + כללי אתר-השירות (spec/מחקר.md)
   + תיקוני אביתר 6.10.26 (spec/תיקוני-אביתר.txt) — מובייל-תחילה (390px).

   פלטה — נשאבה בפועל ב-PIL מ-hero-900.jpg (חשיפה כפולה: גבר + עץ):
     --bone    #ebeddd  עצם חמה עם קאסט ירקרק (H71 S30 L90) — הבסיס. לא קרם נייטרלי.
     --ink     #1d1916  הזית-הכמעט-שחור
     --rust    #7a4128  האוכרה החמה, מועמקת לטקסט קטן
     --field   #4f5f49  הירוק של השדה/המרווה — פעם אחת, בפתיח בלבד
     --amber   #f7b26d  המבטא היחיד. פעם אחת בכל סקשן כהה. לא מפוזר.
   משקלים: 300 ו-400 בלבד. אין 600, אין 800, אין "מודגש" — ההיררכיה מהגודל.
   רדיוס 3px. 999px אך ורק לגלולה השקטה היחידה. אפס ניווט. אפס CTA דביק.

   ★ מעברי המסכים: כל מסך הוא position:sticky בחפיסה — הבא מחליק מעל הקודם
     ומכסה אותו, ולא דוחף אותו למעלה.
   ============================================================ */

/* ── פונטים (מקומיים בלבד. Assistant = פונט משתנה, קובץ אחד ל-300 ול-400) ── */
@font-face{font-family:Assistant;font-style:normal;font-weight:300 400;font-display:swap;
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  src:url("./fonts/assistant-var-hebrew.woff2") format("woff2")}
@font-face{font-family:Assistant;font-style:normal;font-weight:300 400;font-display:swap;
  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;
  src:url("./fonts/assistant-var-latin.woff2") format("woff2")}
@font-face{font-family:"Suez One";font-style:normal;font-weight:400;font-display:swap;
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  src:url("./fonts/suez-hebrew.woff2") format("woff2")}
@font-face{font-family:"Suez One";font-style:normal;font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
  src:url("./fonts/suez-latin.woff2") format("woff2")}
@font-face{font-family:"Playpen Sans Hebrew";font-style:normal;font-weight:300;font-display:swap;
  src:url("./fonts/hand.woff2") format("woff2")}
@font-face{font-family:Arizonia;font-style:normal;font-weight:400;font-display:swap;
  src:url("./fonts/arizonia-sub.woff2") format("woff2")}

/* ── טוקנים ── */
:root{
  --bone:#ebeddd;
  --bone-deep:#dee0cd;
  --ink:#1d1916;
  --ink-soft:#4a443c;
  --rust:#7a4128;
  --field:#4f5f49;
  --amber:#f7b26d;
  --on-dark-soft:#a9ae9b;
  /* חול חם בהיר — צבע הכרטיסים במסך "אז מה אני עושה?". בהיר, חם, לא לבן ולא כהה:
     הוא מפריד את הכרטיסים מרקע הדיו בלי לצעוק. נשאב מהעצם החמה של הפלטה ומוחמם. */
  --sand:#d9d2b4;
  --sand-ink:#3a3428;
  --hair:rgba(29,25,22,.15);
  --hair-d:rgba(235,237,221,.20);
  --font:Assistant,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Suez One",Assistant,Georgia,serif;
  --hand:"Playpen Sans Hebrew",cursive;
  --lift:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,.84,.44,1);
  --pop:cubic-bezier(.2,1.42,.42,1);
  --rail:clamp(1.5rem,6vw,5rem);
  --maxw:1200px;
  --r:3px;
  /* רוחב הכרטיס ביחס למסך (vw ולא %) — כדי שהריפוד שממרכז אותו יהיה מדויק:
     padding הוא % מרוחב ההורה, ו-flex-basis הוא % מתיבת-התוכן שלו. אותה יחידה = מרכוז מדויק. */
  --tcard:86vw;
  /* מסכת התמונה — 8 עצירות. התמונה נמססת לתוך הדף: בלי מסגרת, בלי כותרת. */
  --mask-v:linear-gradient(to bottom,
      transparent 0%,rgba(0,0,0,.30) 4%,rgba(0,0,0,.78) 10%,#000 20%,
      #000 80%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.30) 96%,transparent 100%);
  --mask-h-r:linear-gradient(to right,
      #000 0%,#000 16%,rgba(0,0,0,.92) 34%,rgba(0,0,0,.68) 52%,
      rgba(0,0,0,.40) 70%,rgba(0,0,0,.16) 86%,transparent 100%);
  --mask-h-l:linear-gradient(to left,
      #000 0%,#000 16%,rgba(0,0,0,.92) 34%,rgba(0,0,0,.68) 52%,
      rgba(0,0,0,.40) 70%,rgba(0,0,0,.16) 86%,transparent 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;color-scheme:light;scroll-behavior:auto}
html,body{margin:0;padding:0}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .3vw,1.0625rem);
  line-height:1.75;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:400}                       /* שני משקלים בלבד */
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
button{font:inherit;color:inherit}
a,button,[role="button"]{touch-action:manipulation}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:var(--r)}
:focus:not(:focus-visible){outline:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail)}
.skip{position:absolute;top:0;inset-inline-start:0;z-index:200;background:var(--ink);
      color:var(--bone);padding:.7rem 1.1rem;border-start-end-radius:var(--r);
      transform:translateY(-120%)}
.skip:focus{transform:none}

/* ══ טיפוגרפיה ══════════════════════════════════════════════ */
h1{font-family:var(--display);font-size:clamp(2.3rem,11.5vw,5.75rem);
   line-height:0.98;letter-spacing:-.01em}
h2{font-family:var(--display);font-size:clamp(1.6rem,7vw,2.75rem);
   line-height:1.06;letter-spacing:-.005em;max-width:20em}
.lead{color:var(--ink-soft);font-weight:300;
      font-size:clamp(1.05rem,4.2vw,1.5rem);line-height:1.5}
.kick{font-size:.75rem;letter-spacing:.14em;font-weight:400;color:var(--rust);
      margin-bottom:1.1rem;display:block}
.sub{color:var(--ink-soft);font-size:clamp(1rem,3.9vw,1.2rem);margin-top:.7rem}
.voice{font-weight:300;font-size:clamp(1.05rem,4.2vw,1.4rem);line-height:1.5;
       margin-top:clamp(1.8rem,5vw,2.6rem);max-width:34ch}
.hand{font-family:var(--hand);line-height:1.45}

/* חשיפת מסכה לשורות הכותרת (נעטף ב-JS) */
.split .ln{display:block;overflow:hidden;padding:.16em 0;margin:-.16em 0}
.split .ln-i{display:block;transform:translateY(105%);
             transition:transform .95s var(--lift) var(--d,0s)}
.split .ln:nth-child(1){--d:.30s}
.split .ln:nth-child(2){--d:.42s}
.in .split .ln-i{transform:none}

/* חשיפות · כניסה אחת בלבד, .9s, השהיות מדורגות */
.rv,.rv-hero{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--lift) var(--d,0s),transform .9s var(--lift) var(--d,0s)}
.in .rv,.in .rv-hero{opacity:1;transform:none}
.in .rv:nth-child(2){--d:.10s}
.in .rv:nth-child(3){--d:.20s}
.in .rv:nth-child(4){--d:.30s}
.in .rv:nth-child(5){--d:.40s}
.d2{--d:.52s}
.d3{--d:.64s}

/* ══ הגלולה השקטה — היחידה בכל האתר · וב"ה בפינה הימנית העליונה ══ */
.pillbar{position:absolute;top:0;inset-inline:0;z-index:40;display:flex;
  align-items:flex-start;justify-content:space-between;
  padding:calc(.7rem + env(safe-area-inset-top,0px)) var(--rail);pointer-events:none}
.bh{font-size:.72rem;font-weight:400;letter-spacing:.06em;color:var(--ink-soft);
  line-height:1;padding-block:.4rem;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;pointer-events:auto;
  padding:.3rem 1rem .3rem .7rem;border:1px solid var(--hair);border-radius:999px;
  background:rgba(235,237,221,.94);
  opacity:0;transform:translateY(-6px);
  transition:opacity .7s var(--lift) .1s,transform .7s var(--lift) .1s,background .25s var(--lift)}
body.at-hero .pill,html:not(.js) .pill{opacity:1;transform:none}
.pill .mark{width:26px;height:auto;flex:none;color:var(--rust)}
.pill .wm{font-family:Arizonia,cursive;font-size:1.15rem;line-height:1;color:var(--ink)}

/* ══ החפיסה · מעבר מסכים בשכבות — הבא מחליק מעל הקודם ══ */
.scene{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
       justify-content:center;overflow:clip;background:var(--bone);
       border-start-start-radius:var(--r);border-start-end-radius:var(--r);
       box-shadow:0 -20px 44px -14px rgba(29,25,22,.20)}
.scene.band-dark{box-shadow:0 -20px 44px -14px rgba(29,25,22,.30)}
#intro{box-shadow:none}
@supports not (min-height:100svh){.scene{min-height:100vh}}

/* ══ מסך 0 · פתיחה — הלוגו בלבד, ואז השם נכתב מתחתיו ══ */
.scene-intro{align-items:center;justify-content:center;text-align:center}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:clamp(.9rem,3vh,1.5rem);
  will-change:transform,opacity;padding-inline:var(--rail)}
.intro-mark{width:clamp(190px,64vw,400px);height:auto;color:var(--rust);
  opacity:0;transform:scale(.95);
  transition:opacity 1s var(--lift),transform 1.7s var(--slow)}
.intro-name{font-family:Arizonia,cursive;color:var(--ink);
  font-size:clamp(1.9rem,9.5vw,3.1rem);line-height:1.1;font-weight:400}
.intro-name-i{display:block;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--lift) .5s}
.intro-go .intro-mark{opacity:1;transform:none}
.intro-go .intro-name-i{clip-path:inset(0 0 0 0)}
/* רמז הגלילה של מסך הפתיחה — נכנס אחרי שהשם נגמר לכתוב */
.intro-cue{margin-top:clamp(.9rem,2.6vh,1.5rem);opacity:0;transform:translateY(6px);
  transition:opacity .8s var(--lift) 1.3s,transform .8s var(--lift) 1.3s}
.intro-go .intro-cue{opacity:1;transform:none}
html:not(.js) .intro-mark,html:not(.js) .intro-name-i{opacity:1;transform:none;clip-path:none}
html:not(.js) .intro-cue{opacity:1;transform:none}

/* ══ כתיבה מילה-אחרי-מילה — אותה טכניקה של השם במסך הפתיחה (clip-path) ══
   בעברית הכתיבה נפתחת מהקצה הימני של כל מילה ומתקדמת שמאלה. */
.write .w{display:inline-block;clip-path:inset(0 0 0 100%);
  transition:clip-path 1.1s var(--lift) var(--d,0s)}
.write .w:nth-child(1){--d:.10s}
.write .w:nth-child(2){--d:.46s}
.write .w:nth-child(3){--d:.82s}
.write .w:nth-child(4){--d:1.18s}
.in .write .w{clip-path:inset(0 0 0 0)}
html:not(.js) .write .w{clip-path:none}

/* ══ מסך 1 · פתיח — רשת העבודות חדה, בלי שום ערפל. הכותרת יושבת עליה. ══
   ★ אין כאן blur, אין backdrop-filter ואין צעיף גרדיאנט. התמונות חדות לחלוטין;
   הכותרת נקראת מפני שהרשת מונמכת בשקיפות ובסטורציה, לא מפני שמטשטשים אותה. */
.hero-grid{position:absolute;inset:-10% -6%;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);
  align-content:center;filter:saturate(.92) contrast(.96);
  opacity:0;transform:scale(1.08);will-change:transform,opacity;
  transition:opacity 1.1s var(--lift),transform 1.8s var(--slow)}
.in .hero-grid{opacity:.40;transform:scale(1)}
.hero-grid .col{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,34px);will-change:translate}
.hero-grid img{width:100%;border-radius:var(--r);background:var(--bone-deep)}
.hero-grid .col:nth-child(1){transform:translateY(-4%) rotate(-2.2deg)}
.hero-grid .col:nth-child(2){transform:translateY(3%) rotate(1.4deg)}
.hero-grid .col:nth-child(3){transform:translateY(-2%) rotate(-1.1deg)}
.hero{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(4.6rem,11vh,6.5rem) var(--rail) clamp(1.6rem,4vh,2.6rem)}
.hero h1{max-width:100%}
.hero .ai{color:var(--field)}
.hero .lead{margin-top:clamp(1rem,2.8vh,1.4rem);max-width:32ch}

/* רמז גלילה אחד — חץ שזז כלפי מטה */
.cue{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  margin-top:clamp(1.2rem,3.4vh,2rem);padding:.5rem 1.1rem;min-height:56px;min-width:56px;
  color:var(--ink-soft);font-size:.8rem;letter-spacing:.16em;
  transition:color .3s var(--lift)}
.cue-mark{display:block;width:30px;height:50px}
.cue-arrow{width:30px;height:50px;display:block;overflow:visible}
.cue-arrow .ca-line{fill:none;stroke:rgba(29,25,22,.34);stroke-width:1.5;stroke-linecap:round}
.cue-arrow .ca-head{fill:none;stroke:var(--field);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cue-txt{line-height:1}

/* ══ מסך 2 · אז מה אני עושה? — סקשן מוצמד, הגלילה האנכית מזיזה את הנושאים הצידה ══
   ★ אותו מנגנון בדיוק כמו חפיסת העבודות (למטה): הסקשן גבוה (מסך אחד + ריצת גלילה
   לכל נושא), התוכן שבתוכו מוצמד למסך (position:sticky), והגלילה שנבלעת כאן
   מתורגמת לתזוזה אופקית של המסילה. שום אירוע לא נחטף — הגלילה נשארת הגלילה
   האמיתית של הדף, ולכן היא הפיכה, כפתור "אחורה" וקישורי העוגן עובדים, וגלילה
   למעלה חוזרת אחורה ומשחררת. ארבעת הנושאים חייבים להיראות במלואם לפני שממשיכים.
   כיוון: RTL — הנושא הראשון בצד ימין, וההתקדמות שמאלה.
   --tcard × 100svh: כל נושא מקבל בערך מסך גלילה אחד לנשימה. */
.scene.do-pinned{position:relative;top:auto;min-height:0;display:block;
  height:calc(100svh * 3.7);background:var(--ink)}
@supports not (height:100svh){.scene.do-pinned{height:370vh}}
.do-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:clip;background:var(--ink);color:var(--bone)}
@supports not (height:100svh){.do-pin{height:100vh}}
.topics{flex:0 0 auto;overflow:hidden;direction:rtl;
  margin:clamp(1.4rem,4.5vw,2.2rem) 0 0;overscroll-behavior-x:contain;
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.topics.is-dragging{cursor:grabbing}
.topics-track{position:relative;display:flex;align-items:stretch;width:100%;
  gap:clamp(14px,4vw,30px);
  padding-inline:calc((100% - var(--tcard)) / 2);
  will-change:transform}
.topic{direction:rtl;flex:0 0 var(--tcard);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:.9rem;
  min-height:clamp(232px,36svh,300px);padding:clamp(1.2rem,5vw,1.8rem);
  background:var(--sand);border:1px solid rgba(29,25,22,.10);border-radius:var(--r)}
.do-foot{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail);
  margin-top:clamp(1.2rem,4vw,1.8rem);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.do-foot .thint{margin-top:0}
/* מסילת ההתקדמות של הנושאים — ארבעה מקטעים, הפעיל נצבע בענבר (המבטא של הסקשן). */
.topics-rail{display:flex;align-items:center;gap:.4rem}
.topics-rail i{display:block;width:12px;height:3px;border-radius:3px;background:var(--hair-d);
  transition:width .4s var(--lift),background .4s var(--lift)}
.topics-rail i.on{width:26px;background:var(--amber)}
.t-icon{display:block;color:var(--rust)}
.t-icon svg{width:clamp(44px,12vw,56px);height:auto;display:block;margin-inline:auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t-icon svg.g{stroke-width:2.4}      /* ה-G צריך להיות ברור יותר */
.t-icon svg.rb{stroke-width:1.7}
.t-name{font-family:var(--display);font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1.15;
  color:var(--ink)}
.t-line{color:var(--sand-ink);font-size:clamp(.95rem,3.7vw,1.05rem);line-height:1.6;
  margin-top:.15rem;max-width:32ch;margin-inline:auto}

/* רמז גלילה אופקי — המראה של הקודם: החץ משמאל... (ב-RTL: החץ מימין ופונה ימינה) */
.thint{display:flex;align-items:center;gap:.7rem;margin-top:clamp(1.2rem,4vw,1.8rem);
  color:var(--bone-deep);font-size:.78rem;letter-spacing:.14em}
.thint-rail{display:block;width:clamp(52px,16vw,78px);height:1px;background:var(--hair-d);
  position:relative;overflow:hidden}
.thint-rail i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;
  background:var(--amber)}
.thint-arrow{width:26px;height:12px;fill:none;stroke:var(--amber);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ══ מעבר · כל הדף מתמלא, "עבודות שלי" קופץ ══
   ★ גם כאן אין צעיף ואין טשטוש: התמונות חדות, והמילה מעליהן. */
.works-head{position:relative;min-height:44svh;display:grid;place-items:center;
  overflow:clip;background:var(--bone);padding-block:clamp(2.4rem,8vw,4.4rem)}
.fill{position:absolute;inset:-10% -6%;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,34px);align-content:center;pointer-events:none;
  opacity:0;transform:scale(1.06);
  transition:opacity .9s var(--lift),transform 1.6s var(--slow)}
.in .fill{opacity:.34;transform:scale(1)}
.fill-col{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,34px)}
.fill-col img{width:100%;border-radius:var(--r);background:var(--bone-deep)}
.fill-col:nth-child(1){transform:translateY(-3%) rotate(-1.6deg)}
.fill-col:nth-child(2){transform:translateY(2%) rotate(1.2deg)}
.fill-col:nth-child(3){transform:translateY(-2%) rotate(-1deg)}
.pop{position:relative;z-index:2;font-family:var(--display);
  font-size:clamp(2.4rem,13vw,4.6rem);line-height:1;text-align:center;
  opacity:0;transform:scale(.86);
  transition:opacity .5s var(--lift),transform .85s var(--pop)}
.in .pop{opacity:1;transform:none}

/* ══ מסך · העבודות — חפיסת קלפים אופקית (סגנון טינדר) שנעה מהגלילה האנכית ══
   ★ המבנה: הסקשן גבוה (מסך אחד + ריצת גלילה לכל עבודה), התוכן מוצמד למסך
   (position:sticky), ובפנים מסילה שמחליקה הצידה. הגלילה עצמה נשארת גלילה
   אמיתית של הדף — אין כאן overflow-x, אין scroll-snap ואין חטיפת אירועים:
   גלילה למעלה מחזירה אחורה, כפתור "אחורה" וקישורי עוגן עובדים, וה-iOS
   מבצע rubber-band רגיל. לכן גם אין מלכודת — תמיד יש סוף מוגדר.
   --deck-step: כמה מסך גלילה מקדם עבודה אחת · 4 עבודות → 100svh × 3.8, כלומר
   ~0.93 מסך גלילה לכל עבודה (בערך פי 1.5 מהריצה הקודמת) — איטי מספיק כדי
   שאי אפשר יהיה לדלג על עבודה. ה-JS קורא offsetHeight, כך שהגובה והחישוב
   נשארים מסונכרנים תמיד. */
.scene.works-deck{position:relative;top:auto;min-height:0;display:block;
  height:calc(100svh * 3.8);background:var(--bone);
  border-start-start-radius:var(--r);border-start-end-radius:var(--r);
  box-shadow:0 -20px 44px -14px rgba(29,25,22,.20)}
@supports not (height:100svh){.scene.works-deck{height:380vh}}
.deck-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  overflow:clip;background:var(--bone);
  padding-block:clamp(2.6rem,7vh,3.6rem) clamp(3.6rem,9.5vh,4.8rem)}
@supports not (height:100svh){.deck-pin{height:100vh}}
.deck{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;direction:rtl;
  overflow:hidden;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  overscroll-behavior-x:contain}
.deck.is-dragging{cursor:grabbing}
/* המסילה: רוחב 100%, והכרטיסים גולשים ממנה החוצה. התנועה היא transform בלבד. */
.deck-track{position:relative;display:flex;align-items:stretch;
  width:100%;height:100%;will-change:transform}
.deck-card{direction:rtl;flex:0 0 100%;display:flex;min-width:0}
/* ההטיה/העומק הוסרו כליל: הכרטיסים הם מלבנים נקיים ורגילים — אין הטיה, אין
   קנה-מידה ואין דהייה. כל התוכן גלוי במלואו, חד. */
.deck-card .work-in{transform:none;opacity:1}
/* רמז ההחלקה + מסילת ההתקדמות — גרסה בהירה, על רקע העצם */
.deck-foot{position:absolute;inset-inline:0;bottom:clamp(.7rem,2.4vh,1.3rem);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;pointer-events:none}
.deck-foot .thint{margin-top:0}
.thint-light{color:var(--ink-soft)}
.thint-light .thint-arrow{stroke:var(--rust)}
.thint-light .thint-rail{background:var(--hair)}
.thint-light .thint-rail i{background:var(--rust)}
/* ארבעה מקטעים — אחד לכל עבודה. הפעיל מתארך ונצבע בחלודה. */
.deck-rail{display:flex;align-items:center;gap:.4rem}
.deck-rail i{display:block;width:12px;height:3px;border-radius:3px;background:var(--hair);
  transition:width .4s var(--lift),background .4s var(--lift)}
.deck-rail i.on{width:26px;background:var(--rust)}
.work-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail);
  flex:1 1 auto;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(1rem,3.4vh,1.8rem)}
.work-shot{position:relative;min-height:0;overflow:hidden;background:var(--bone-deep);
  border-radius:var(--r);border:1px solid rgba(29,25,22,.12)}
.work-shot picture{position:absolute;inset:0;display:block}
.work-shot img{position:absolute;inset:0;width:100%;height:100%;
               object-fit:cover;object-position:top center}
.work-txt{padding-block:clamp(.4rem,1.4vh,1rem)}
.wk-name{font-family:var(--display);font-size:clamp(1.35rem,6vw,2rem);line-height:1.15}
.wk-line{color:var(--ink-soft);margin-top:.5rem;font-size:clamp(1rem,4vw,1.15rem);line-height:1.6}
.wk-fact{color:var(--ink-soft);margin-top:.5rem;font-size:clamp(.92rem,3.5vw,1rem);line-height:1.6}
.wk-fact b{color:var(--ink)}
.wk-link{margin-top:.7rem}
.wk-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);
           border-bottom:1px solid rgba(29,25,22,.3);
           transition:border-color .25s var(--lift)}
.wk-link a::after{content:" ←"}

/* הצ'אט של הבוט — אובייקט העבודה, לא צילום מסך מזויף */
.chat{position:absolute;inset:0;display:flex;flex-direction:column;
      background:#141a15;color:#e6e9e2;font-size:clamp(.78rem,3vw,.95rem)}
.chat-top{display:flex;align-items:center;gap:.5em;padding:.85em .9em;background:#20281f;flex:none}
.chat-av{width:2em;height:2em;flex:none;background:#8fbf9f;color:#141a15;display:grid;
         place-items:center;font-size:.8em;border-radius:var(--r)}
.chat-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.chat-meta i{font-style:normal;color:#9aa392;font-size:.82em}
.chat-live{margin-inline-start:auto;flex:none;font-size:.68em;color:#8fbf9f;
           border:1px solid rgba(143,191,159,.4);border-radius:var(--r);padding:.1em .5em}
.chat-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
           gap:.5em;padding:1em .9em;min-height:0}
.cb{max-width:82%;padding:.55em .8em;border-radius:var(--r);background:#232c22;
    font-size:1em;line-height:1.45;align-self:flex-start}
.cb.out{background:#1d5c46;align-self:flex-end}
.cb .t{display:block;text-align:end;font-size:.78em;opacity:.78;margin-top:.15em}

/* ══ רקע דיו — הפיסוק של העמוד ══ */
.band-dark{background:var(--ink);color:var(--bone)}
.band-dark .kick{color:var(--amber)}      /* המבטא היחיד של הסקשן. פעם אחת. */
.band-dark .lead,.band-dark .voice{color:var(--bone-deep)}
.band-dark .sub{color:var(--on-dark-soft)}
/* ══ כפתור — הפעולה היחידה. גלולה. ══ */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;
     margin-top:clamp(1.6rem,5vh,2.4rem)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.7rem 1.7rem;border-radius:var(--r);background:var(--bone);color:var(--ink);
  font-size:.98rem;font-weight:400;
  transition:transform .16s var(--lift),background .25s var(--lift)}
.btn:active{transform:scale(.97)}

/* ══ מסך סיום · 2026 — התמונה שלו בשדה (מטושטשת בעדינות) מתחת לשכבת ירוק-עמוק
   אחידה. הרגע השקט של העמוד: מסך מלא, נשימה אחת, פעולה אחת.
   ★ השכבה האחידה (ולא גרדיאנט) היא שמבטיחה ניגודיות ≥4.5:1 גם בנקודה
   הבהירה ביותר של התמונה — ולכן הטקסט נקרא בלי שום צעיף נוסף. ══ */
.scene-welcome{align-items:center;text-align:center;
  background:#131c15;color:var(--bone);
  padding-block:clamp(4rem,11vh,6rem) clamp(4.4rem,11vh,5.6rem)}
.wel-bg{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.wel-bg img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;
  object-fit:cover;object-position:50% 34%;
  filter:blur(12px) saturate(1.12)}
.wel-wash{position:absolute;inset:0;background:rgba(17,25,18,.78)}
.wel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:clamp(.8rem,2.4vh,1.4rem)}
.wel-h{font-size:clamp(2rem,9.4vw,3.5rem);line-height:1.06;max-width:100%;color:var(--bone)}
.wel-lead{margin:0;font-size:clamp(1.1rem,4.6vw,1.45rem);color:var(--bone-deep)}
/* כתב יד בעברית — המשפט היחיד בכתב יד בכל האתר. ענבר = המבטא היחיד של המסך. */
.wel-hand{color:var(--amber);font-size:clamp(1.35rem,6.2vw,1.9rem);line-height:1.5;
  margin:clamp(.5rem,1.8vh,1.1rem) 0 0;max-width:30ch}
.scene-welcome .cta{justify-content:center;margin-top:clamp(1.3rem,4.2vh,2rem)}
.scene-welcome .btn{min-height:56px;padding-inline:clamp(1.7rem,6vw,2.3rem)}
.wel-mail{position:absolute;inset-inline:0;bottom:clamp(1rem,3.4vh,1.9rem);z-index:1;
  text-align:center;font-size:.9rem}
.wel-mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--bone-deep);
  border-bottom:1px solid var(--hair-d)}

/* ══ פוטר ══ */
.foot{padding-block:clamp(1.6rem,4vw,2.2rem);border-top:1px solid var(--hair)}
.foot-note{font-size:.8rem;color:var(--ink-soft)}
.foot-note a{color:var(--ink);border-bottom:1px solid rgba(29,25,22,.3)}
.foot-legal{margin:.7rem 0 0;font-size:.82rem;line-height:1.9}
/* קישורי המשפט הקטן — יעד מגע ≥44px בלי לשנות את הפריסה (ריפוד אנכי על inline) */
.foot-legal a{padding-block:14px}

/* ══ מחשב ══ */
@media (min-width:880px){
  .hero .ln{white-space:nowrap}
  .hero-grid{opacity:0}
  .in .hero-grid{opacity:.34}
  .work-in{max-width:1140px}
  .intro-mark{width:clamp(240px,30vw,400px)}
  .wel-h{font-size:clamp(2.6rem,5.4vw,3.6rem)}
}
@media (min-width:760px){
  :root{--tcard:min(460px,46vw)}
  .topic{min-height:400px;padding:clamp(1.6rem,2.6vw,2.2rem)}
  .t-icon svg{width:64px}
}
@media (min-width:1000px){
  .deck-pin{padding-block:clamp(3.4rem,8vh,5rem) clamp(4.4rem,10vh,5.6rem)}
  .work-in{grid-template-columns:1.25fr .75fr;grid-template-rows:minmax(0,1fr);
    align-items:center;gap:clamp(2rem,4vw,3.4rem)}
  .work-shot{height:100%;align-self:stretch}
}
@media (max-width:759px){
  .hero-grid{grid-template-columns:repeat(2,1fr);gap:12px;inset:-8% -8%}
  .hero-grid .col{gap:12px}
  .fill{grid-template-columns:repeat(2,1fr);gap:12px;inset:-8% -8%}
  .fill-col{gap:12px}
}

/* ══ תנועה — נשימה איטית בלבד. הכל transform/opacity. ══ */
@keyframes driftA{0%,100%{translate:0 0}50%{translate:0 -18px}}
@keyframes driftB{0%,100%{translate:0 0}50%{translate:0 22px}}
.hero-grid .col:nth-child(1){animation:driftA 14s ease-in-out infinite}
.hero-grid .col:nth-child(2){animation:driftB 17s ease-in-out infinite}
.hero-grid .col:nth-child(3){animation:driftA 20s ease-in-out infinite}
/* החץ: ריחוף עדין כלפי מטה. זה כל רמז הגלילה. */
@keyframes cueDrop{
  0%{transform:translateY(-3px);opacity:.45}
  45%{transform:translateY(4px);opacity:1}
  100%{transform:translateY(11px);opacity:.35}}
.cue-arrow{animation:cueDrop 2.6s var(--lift) infinite}
.cue-arrow .ca-line{animation:cueLine 2.6s var(--lift) infinite}
@keyframes cueLine{0%,100%{opacity:.5}45%{opacity:1}}
/* מסילת הרמז האופקי: נקודה שנעה משמאל לימין — המראה של הקודם */
@keyframes railSide{0%{left:0;opacity:0}18%{opacity:1}78%{opacity:1}
  100%{left:100%;opacity:0}}
.thint-rail i{animation:railSide 2.6s var(--lift) infinite}
@keyframes thintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.thint-arrow{animation:thintNudge 2.6s var(--lift) infinite}

/* ══ hover — רק עם עכבר אמיתי ══ */
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:rgba(235,237,221,.85)}
  .cue:hover{color:var(--ink)}
  .btn:hover{transform:translateY(-2px)}
  .alt a:hover{border-bottom-color:var(--amber)}
  .wk-link a:hover{border-bottom-color:var(--ink)}
}

/* ══════════ prefers-reduced-motion — מלא ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-hero,.split .ln-i,.fill,.pop,.write .w{opacity:1 !important;
    transform:none !important;clip-path:none !important}
  .intro-cue{opacity:1 !important;transform:none !important}
  .thint-rail i{left:50%}
}
@media (prefers-reduced-motion:reduce){
  /* ★ אין הצמדה ואין גלילה שחוטפת כלום — העבודות נערמות לערימה קריאה,
     מלמעלה למטה, בדיוק כמו כל שאר העמוד. */
  .scene.works-deck{position:static;min-height:0;height:auto !important;box-shadow:none;
    padding-block:clamp(1.8rem,6vw,2.8rem)}
  .deck-pin{position:static;height:auto;overflow:visible;padding-block:0}
  .deck{display:block;overflow:visible;height:auto;touch-action:auto;cursor:auto}
  .deck-track{display:block;width:auto;height:auto;transform:none !important}
  .deck-card{display:block;transform:none !important;opacity:1 !important;
    padding-block:clamp(1.6rem,5vw,2.4rem);border-top:1px solid var(--hair)}
  .deck-card:first-child{border-top:0}
  .deck .work-in{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;
    gap:clamp(1rem,3.4vw,1.6rem);transform:none !important;opacity:1 !important}
  .deck .work-shot{aspect-ratio:16/10;height:auto;align-self:auto}
  .deck-foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* ★ מסך "אז מה אני עושה?" — אין הצמדה ואין חטיפה: ארבעת הנושאים נערמים
     לערימה קריאה, אחד מתחת לשני, בדיוק כמו שאר העמוד. */
  .scene.do-pinned{position:static;min-height:0;height:auto !important;box-shadow:none;
    padding-block:clamp(2rem,7vw,3rem)}
  .do-pin{position:static;height:auto;overflow:visible;display:block;padding-block:0}
  .topics{overflow:visible}
  .topics-track{display:flex;flex-direction:column;width:auto;transform:none !important;
    padding-inline:var(--rail);gap:clamp(.9rem,3vw,1.2rem)}
  .topic{flex:none;width:auto;min-height:0;padding:clamp(1.2rem,5vw,1.6rem)}
  .topics-rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-grid{opacity:.40 !important;transform:none !important}
  .hero-grid .col{animation:none !important}
}
@media (prefers-reduced-motion:reduce){
  .cue-arrow{animation:none !important}
  .thint-arrow{animation:none !important}
}
@media (prefers-reduced-motion:reduce){
  html,.topics{scroll-behavior:auto}
}
@media (prefers-reduced-transparency:reduce){
  .pill{background:var(--bone);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ══════════ בלי JS — אין הצמדה ואין תנועה. העבודות פשוט נערמות. ══════════ */
html:not(.js) .scene.works-deck{position:static;height:auto;box-shadow:none;
  padding-block:clamp(1.8rem,6vw,2.8rem)}
html:not(.js) .deck-pin{position:static;height:auto;overflow:visible;padding-block:0}
html:not(.js) .deck{display:block;overflow:visible;height:auto;touch-action:auto}
html:not(.js) .deck-track{display:block;width:auto;height:auto;transform:none !important}
html:not(.js) .deck-card{display:block;padding-block:clamp(1.6rem,5vw,2.4rem);
  border-top:1px solid var(--hair)}
html:not(.js) .deck-card:first-child{border-top:0}
html:not(.js) .deck .work-in{display:grid;grid-template-columns:1fr;
  grid-template-rows:auto auto;gap:clamp(1rem,3.4vw,1.6rem)}
html:not(.js) .deck .work-shot{aspect-ratio:16/10;height:auto;align-self:auto}
html:not(.js) .deck-foot{display:none}
/* בלי JS — גם מסך הנושאים נערם לערימה קריאה */
html:not(.js) .scene.do-pinned{position:static;height:auto;box-shadow:none;
  padding-block:clamp(2rem,7vw,3rem)}
html:not(.js) .do-pin{position:static;height:auto;overflow:visible;display:block}
html:not(.js) .topics{overflow:visible}
html:not(.js) .topics-track{display:flex;flex-direction:column;width:auto;
  padding-inline:var(--rail);gap:clamp(.9rem,3vw,1.2rem)}
html:not(.js) .topic{flex:none;width:auto;min-height:0}
html:not(.js) .topics-rail{display:none}

/* ══════════════════════════════════════════════════════════════════════
   סבב 5 · תפריט שקט + ארבעה דפי שירות                          (אביתר 7.10.26)
   ──────────────────────────────────────────────────────────────────────
   · תפריט המבורגר אחד בפינת הגלולה. רדיוס 3px — לא גלולה שנייה (999px
     נשאר שמור לגלולה השקטה היחידה). שקט, בלי בר דביק, בלי מסגרת כבדה.
   · ארבעת הכרטיסים ב"אז מה אני עושה?" הפכו לקישורים לדפי השירות.
   · ארבעה דפי שירות, מבנה אחד: פתיחה · "במילים אחרות" · פאנץ' על רקע
     דיו (הפיסוק) · מה אני עושה · "מוזמן להיכנס ולהתרשם" · ריבועים ·
     פעולה אחת (וואטסאפ) · חזרה לעמוד הראשי.
     שני משקלי פונט בלבד (300/400). בלי JS בדפים האלה — התנועה בכניסה
     היא אנימציית CSS חד-פעמית, ומכובדת prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ── תפריט המבורגר — בקר אחד, בצד שמאל של הגלולה ──
   ★ הוא נראה מהרגע הראשון, בלי תלות בגלילה: הגלולה (הלוגו) נשארת נסתרת
   במסך הפתיחה בדיוק כמו שאושר, אבל הבקר הזה הוא הדרך אל דפי השירות —
   ולכן הוא מופיע מיד עם הטעינה ונעלם עם שאר הפס כשגוללים. אין בר דביק. */
.bar-end{display:flex;align-items:center;gap:.5rem;pointer-events:auto}
@keyframes hbIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hb{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--hair);border-radius:var(--r);
  background:rgba(235,237,221,.94);color:var(--rust);cursor:pointer;
  animation:hbIn .7s var(--lift) .3s both}
.hb svg{width:20px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
.hb[aria-expanded="true"]{background:rgba(235,237,221,1)}

/* ── פאנל התפריט — קבוע, ונפתח מתחת לבקר עצמו ── */
.smenu{position:fixed;inset:0;z-index:130}
.smenu[hidden]{display:none}
.smenu-scrim{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  border:0;background:rgba(29,25,22,.36);opacity:0;cursor:pointer;
  transition:opacity .32s var(--lift)}
.smenu-panel{position:absolute;
  top:calc(.7rem + env(safe-area-inset-top,0px) + 52px);
  inset-inline-end:var(--rail);width:min(320px,calc(100% - 2 * var(--rail)));
  background:var(--bone);border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:0 24px 48px -18px rgba(29,25,22,.35);
  padding:1.1rem 1.2rem 1.15rem;
  opacity:0;transform:translateY(-8px);
  transition:opacity .32s var(--lift),transform .32s var(--lift)}
.smenu.is-open .smenu-scrim{opacity:1}
.smenu.is-open .smenu-panel{opacity:1;transform:none}
.smenu-kick{font-size:.72rem;font-weight:400;letter-spacing:.14em;color:var(--rust);
  margin-bottom:.7rem}
.smenu-list{list-style:none;margin:0;padding:0}
.smenu-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:52px;padding-block:.35rem;color:var(--ink);
  border-top:1px solid var(--hair);font-family:var(--display);
  font-size:1.12rem;line-height:1.2}
.smenu-list li:first-child a{border-top:0}
.smenu-list a::after{content:"←";color:var(--rust);flex:none;
  font-family:var(--font);font-size:.95rem}

/* ── ארבעת הכרטיסים — עכשיו קישורים. הסימן היחיד: חץ קטן בפינה ── */
a.topic{text-decoration:none;color:inherit;position:relative;cursor:pointer;
  transition:background .3s var(--lift),transform .3s var(--lift)}
.t-go{position:absolute;inset-inline-end:clamp(1.1rem,4.5vw,1.7rem);
  bottom:clamp(1.1rem,4.5vw,1.7rem);color:var(--rust);opacity:.55;line-height:0;
  transition:opacity .3s var(--lift),transform .3s var(--lift)}
.t-go svg{width:24px;height:14px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
a.topic:focus-visible .t-go{opacity:1}

/* ── דפי השירות ── */
.svc-main{display:block;background:var(--bone)}
.svc-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail)}
.svc-hero{padding:clamp(5.4rem,15vh,7.4rem) 0 clamp(2.2rem,6vh,3rem)}
.svc-h1{font-family:var(--display);font-size:clamp(1.85rem,8.6vw,3.5rem);
  line-height:1.09;letter-spacing:-.005em;max-width:25ch}
.svc-more{margin-top:clamp(1.3rem,4vh,1.8rem);color:var(--ink-soft);
  font-size:clamp(1rem,3.9vw,1.12rem);letter-spacing:.02em}
/* הפאנץ' — פס דיו אחד. זה כל הפיסוק של העמוד. */
.svc-punch{padding-block:clamp(3.2rem,11vh,5rem)}
.svc-punch h2{font-family:var(--display);font-size:clamp(1.6rem,7.4vw,2.9rem);
  line-height:1.1;max-width:23ch;color:var(--bone)}
.svc-lead{padding-top:clamp(2.4rem,7vh,3.4rem);color:var(--ink-soft);
  font-size:clamp(1.05rem,4.2vw,1.35rem);line-height:1.6;max-width:38ch}
.svc-inv{margin-top:clamp(1.4rem,4.4vh,2rem);color:var(--ink);
  font-size:clamp(1.1rem,4.4vw,1.3rem)}
/* הריבועים */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,3.2vw,1.5rem);width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--rail);
  padding-block:clamp(1.1rem,3vh,1.6rem) clamp(2.4rem,7vh,3.4rem)}
.svc-grid-one{grid-template-columns:1fr;max-width:620px}
/* ארבעה פריטים — 2×2 במובייל ובטאבלט, ושורה אחת של ארבעה במסך רחב.
   בלי כרטיס בודד שנשאר לבד בסוף השורה. */
.svc-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.scard{display:block;color:inherit;text-decoration:none}
.scard-shot{display:block;position:relative;border-radius:var(--r);
  overflow:hidden;background:var(--bone-deep)}
.scard-shot img{width:100%;height:auto;display:block}
.scard-name{display:flex;align-items:baseline;gap:.45rem;margin-top:.6rem;
  font-size:clamp(.95rem,3.6vw,1.06rem);line-height:1.35;color:var(--ink)}
/* החץ הוא סימן של קישור — ולכן הוא מופיע רק על ריבוע שהוא קישור. */
a.scard .scard-name::after{content:"←";color:var(--rust);flex:none;
  transition:transform .25s var(--lift)}
a.scard:hover .scard-name::after{transform:translateX(-3px)}
/* הריבוע של הבוט — השיחה עצמה, לא קישור */
.scard-chat{position:relative;display:block;aspect-ratio:1/1;
  border-radius:var(--r);overflow:hidden;background:#141a15}
/* פריטים בלי קישור — אותו כרטיס חול של מסך "אז מה אני עושה?" */
.svc-item{background:var(--sand);border:1px solid rgba(29,25,22,.10);
  border-radius:var(--r);padding:clamp(1.05rem,4.4vw,1.5rem);
  display:flex;flex-direction:column;gap:.45rem;justify-content:center;
  min-height:min(40vw,186px)}
.svc-item-h{font-family:var(--display);font-size:clamp(1.05rem,4.4vw,1.2rem);
  line-height:1.2;color:var(--ink)}
.svc-item-p{color:var(--sand-ink);font-size:clamp(.9rem,3.5vw,1rem);line-height:1.55}
/* ── הכיכר — ארבעת הפריטים על טבעת אחת, וחץ מכל ריבוע לבא אחריו ──
   מובייל (ברירת מחדל): הטבעת עומדת לאורך. שני מסלולים אנכיים בצדדים, קשת בקצה,
   והחצים יושבים בפערים שבין הפריטים — כך הכיכר נשארת קריאה וכל פריט מקבל רוחב מלא. */
.rbx{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail);
  padding-block:clamp(1.1rem,3vh,1.6rem) clamp(2.4rem,7vh,3.4rem)}
.rbx-stage{position:relative;direction:ltr;display:flex;flex-direction:column;width:100%;
  padding-block:1.9rem}
.rbx .svc-item{direction:rtl;margin-inline:10%}
.rbx-ring,.rbx-loop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  fill:none;stroke:var(--rust);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rbx-ring{display:none}
.rbx-ring path,.rbx-loop path{vector-effect:non-scaling-stroke;opacity:.78}
.rbx-ring .rbx-tip{opacity:1}
.rbx-gap{position:relative;flex:none;height:clamp(2.2rem,7.4vw,2.9rem)}
.rbx-ar{position:absolute;top:50%;width:14px;height:16px;color:var(--rust);opacity:.72;
  transform:translateY(-50%)}
.rbx-ar svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rbx-ar--d{left:94%;transform:translate(-50%,-50%)}
.rbx-ar--u{left:6%;transform:translate(-50%,-50%)}
/* ── דסקטופ: כיכר אמיתית — ארבעה ריבועים בארבע נקודות, קשתות ביניהם ── */
@media (min-width:900px){
  .rbx-stage{display:grid;max-width:660px;margin-inline:auto;aspect-ratio:1/1;
    padding-block:0;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr))}
  .rbx-ring{display:block}
  .rbx-loop,.rbx-gap{display:none}
  .rbx .svc-item{margin-inline:0;min-height:0;height:100%;
    padding:clamp(1rem,2.4vw,1.45rem)}
  .rbx-c1{grid-area:1/2}
  .rbx-c2{grid-area:2/3}
  .rbx-c3{grid-area:3/2}
  .rbx-c4{grid-area:2/1}
}
/* סיום — פעולה אחת, וחזרה */
.svc-close{display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  text-align:center;padding-block:clamp(2.1rem,6.6vh,3.2rem) clamp(2.4rem,7vh,3.4rem)}
.svc-close .cta{justify-content:center;margin-top:0}
.svc-back{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);
  font-size:.95rem;border-bottom:1px solid var(--hair)}
/* עוד אצלי — שורה אחת שקטה, לא ניווט */
.svc-others{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.2rem 1.1rem;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(1.3rem,4vh,1.9rem) var(--rail);
  border-top:1px solid var(--hair)}
.svc-others-k{font-size:.78rem;letter-spacing:.14em;color:var(--ink-soft)}
.svc-others a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink-soft);font-size:.95rem;border-bottom:1px solid var(--hair)}
/* הכניסה של דפי השירות — פעם אחת, בלי JS */
@keyframes svcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.svc .sr{opacity:0;animation:svcIn .9s var(--lift) var(--sr-d,0s) forwards}
.svc .sr-1{--sr-d:.10s}
.svc .sr-2{--sr-d:.22s}
.svc .sr-3{--sr-d:.34s}
.svc .sr-4{--sr-d:.46s}
.svc .back{display:inline-flex;align-items:center;min-height:44px;padding-inline:.2rem;
  color:var(--ink-soft);font-size:.92rem;border-bottom:1px solid var(--hair)}
@media (min-width:760px){
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-grid-one{grid-template-columns:1fr}
  .svc-item{min-height:200px}
  .scard-chat{aspect-ratio:4/3}
}
@media (hover:hover) and (pointer:fine){
  .hb:hover{background:rgba(235,237,221,.85)}
  .smenu-list a:hover{color:var(--rust)}
  a.topic:hover{background:#e1dbc0;transform:translateY(-2px)}
  a.topic:hover .t-go{opacity:1;transform:translateX(-3px)}
  a.scard:hover .scard-name{color:var(--rust)}
  .svc-back:hover,.svc-others a:hover,.svc .back:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .svc .sr{opacity:1;animation:none;transform:none}
}