/* ============================================================
   ErgoKid — דף נחיתה KidBase
   ------------------------------------------------------------
   שיטת הגודל: העיצוב בפיגמה בנוי על מסגרת של 1920px.
   ב-html מוגדר 1rem = 10px ברוחב 1920, והוא קטן יחד עם החלון,
   כך שכל מידה מהפיגמה נכתבת פשוט כ-rem (64px = 6.4rem)
   והפרופורציות נשמרות בכל מסך דסקטופ.
   טקסט רץ מקבל רצפה בפיקסלים (max) כדי לא לרדת מתחת לקריא.
   מתחת ל-1100px עוברים לפריסה מוערמת (ראו בסוף הקובץ).
   ============================================================ */

/* ---------- בסיס ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(5.4px, calc(100vw / 192), 10px);
  scroll-behavior: smooth;
  scroll-padding-top: 10rem;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;   /* קישוטים שיוצאים מהמסך לא ייצרו גלילה אופקית */
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: max(16px, 2.4rem);
  line-height: 1.4;
  color: var(--ink);
  /* דפוס הקווים — אריח SVG חוזר (32×96rem), רציף לכל אורך הדף.
     ההסטה של 16rem מיישרת את עמודת המשושים למרכז המסך כמו בפיגמה. */
  background: var(--paper) url('../assets/img/deco/pattern.svg') repeat;
  background-size: 32rem 96rem;
  background-position: calc(50% + 16rem) 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong { font-weight: 700; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100px; right: 16px; z-index: 100;
  padding: 10px 16px; border-radius: 12px;
  background: var(--blue); color: var(--paper); text-decoration: none;
}
.skip-link:focus { top: 16px; }

.container {
  width: min(156rem, 100% - 4rem);
  margin-inline: auto;
}

/* ---------- טיפוגרפיה ---------- */
.h2 {
  font-weight: 700;
  font-size: max(30px, 6.4rem);
  line-height: 1;
}
.center { text-align: center; }
.lead { font-size: max(16px, 2.4rem); line-height: 1.4; }

.section-head {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--title-gap);
  text-align: center;
}

/* ---------- כפתור ---------- */
/* ב-RTL הטקסט מימין והחץ משמאל — לכן בקוד הטקסט בא ראשון.
   הפרופורציות של כל הכפתורים נגזרות מכפתור ההירו (טקסט 24 / חץ 36 /
   שוליים 10): החץ = 1.5× הטקסט, השוליים סביבו ≈ 0.42× הטקסט.
   כך כפתור קטן הוא פשוט הקטנה של הגדול, בלי "שומן" למעלה ולמטה. */
.btn {
  --fs: max(14px, 1.524rem);
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: calc(var(--fs) * 1.04);
  padding: calc(var(--fs) * .42) calc(var(--fs) * .83) calc(var(--fs) * .42) calc(var(--fs) * .42);
  border: 0; border-radius: 5rem;
  background: var(--blue);
  color: #FFFDFD;
  font-size: var(--fs);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(0 1.2rem 1.2rem rgba(46, 46, 47, 0.10));
  transition: background-color .3s ease;
}
/* אזור לחיצה של 44px לפחות, גם כשהכפתור עצמו נמוך יותר */
.btn::before { content: ""; position: absolute; inset: -5px -2px; }
.btn:hover { background: var(--blue-dark); }

.btn__icon {
  flex: none;
  width: calc(var(--fs) * 1.5); height: calc(var(--fs) * 1.5);
  color: var(--paper);
}

/* ---- אנימציית הריחוף (הווריאנט מהפיגמה) ----
   בריחוף החץ גולש לצד השני של הכפתור והטקסט מפנה לו מקום.
   המרחקים מחושבים ב-JS לכל כפתור (‎--icon-shift / --text-shift),
   כי הם תלויים ברוחב הטקסט. */
.btn > span,
.btn__icon { transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) {
  .btn:hover .btn__icon,
  .btn:focus-visible .btn__icon { transform: translateX(var(--icon-shift, 0px)); }
  .btn:hover > span,
  .btn:focus-visible > span { transform: translateX(calc(var(--text-shift, 0px) * -1)); }
}

.btn--sm { width: max(190px, 23.05rem); }
.btn--auto { width: auto; }
.btn--lg {
  --fs: max(18px, 2.4rem);
  filter: drop-shadow(0 1.5rem 1.5rem rgba(46, 46, 47, 0.10));
}

.btn--light { background: var(--paper); color: var(--blue); }
.btn--light .btn__icon { color: var(--blue); }
.btn--light:hover { background: #fff; }

/* ============================================================
   הדר
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding-top: 4.6rem;
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  padding-block: 1.2rem;
  background: rgba(255, 253, 250, 0.94);
  box-shadow: 0 6px 24px rgba(46, 46, 47, 0.08);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex; align-items: center;
  width: min(172.9rem, 100% - 3.2rem);
  margin-inline: auto;
}
.site-header__logo img { width: max(90px, 11.1rem); }

.site-nav { margin-inline-start: 7.6rem; }
.site-nav ul { display: flex; gap: 4rem; }
.site-nav ul a {
  font-size: max(15px, 2rem);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(var(--blue), var(--blue)) no-repeat right bottom / 0 2px;
  transition: background-size .25s ease, color .25s ease;
}
.site-nav ul a:hover { color: var(--blue); background-size: 100% 2px; }

.site-header__cta { margin-inline-start: auto; }

.nav-toggle { display: none; }
.site-nav__extra { display: none; }

/* ============================================================
   שכבת קישוט
   ============================================================ */
.page { position: relative; }
.page > section { position: relative; }
/* מרווח אחיד בין מסך למסך. המסכים עצמם בלי ריפוד אנכי — הקופסה שלהם
   עוטפת את התוכן, כך שהרווח הגלוי זהה בכל המעברים */
.page > section + section { margin-top: var(--section-space); }

.deco {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ring {
  position: absolute;
  width: 259.6rem; height: 259.6rem;
  background: no-repeat center / contain;
}
.ring--green { left: 64rem;   top: -28.1rem; background-image: url('../assets/img/deco/ring-green.svg'); }
.ring--blue  { left: -33.8rem; top: 291.6rem; background-image: url('../assets/img/deco/ring-blue.svg'); }
.ring--peach { left: -127rem;  top: 576.9rem; background-image: url('../assets/img/deco/ring-peach.svg'); }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(7.5rem);
}
.glow--1 { left: -26.2rem; top: -8.7rem;  width: 52.4rem; height: 52.4rem; background: rgba(122, 178, 89, .10); }
.glow--2 { left: 168.8rem; top: 63rem;    width: 52.4rem; height: 52.4rem; background: rgba(27, 111, 163, .10); }
.glow--3 { left: 155rem;   top: 636.5rem; width: 58.9rem; height: 58.9rem; background: rgba(122, 178, 89, .12); }
.glow--4 { left: 166.7rem; top: 873.7rem; width: 58.9rem; height: 58.9rem; background: rgba(27, 111, 163, .12); }

/* ---- קוביות: עומק בגלילה ----
   המעטפת (.cube) מחזיקה מיקום, זווית בסיס וריחוף איטי.
   התמונה שבפנים מקבלת מ-JS scale / הזזה / טשטוש לפי מיקומה במסך:
   נכנסת חדה וקטנה, ובזמן הגלילה "מתקרבת למצלמה" — גדלה, עולה
   מהר יותר מהדף ומיטשטשת. בלי JS נשאר הטשטוש הסטטי של הפיגמה. */
.cube {
  position: absolute; z-index: 2;
  width: 37.3rem;
  animation: cube-float 9s ease-in-out infinite alternate;
}
.cube img {
  width: 100%;
  filter: blur(var(--blur, 1rem));
  transform-origin: 50% 60%;
  will-change: transform, filter;
}
.cube--1 { left: -4.1rem;  top: 14.8rem;  width: 14.6rem; rotate: -18deg; --blur: .3rem; animation-duration: 7s; }
.cube--2 { left: 161.4rem; top: 75.8rem;  rotate: 18deg; animation-delay: -3s; }
.cube--3 { left: 0;        top: 189rem;   width: 27rem; rotate: -14deg; mix-blend-mode: multiply; animation-duration: 11s; }
.cube--4 { left: 167.5rem; top: 654rem; rotate: 16deg; mix-blend-mode: multiply; animation-delay: -5s; }
.cube--5 { left: 176.3rem; top: 892.3rem; rotate: 20deg; animation-duration: 10s; animation-delay: -2s; }

@keyframes cube-float {
  from { translate: 0 -1.2rem; }
  to   { translate: 0 1.2rem; }
}

/* ============================================================
   אנימציות כניסה לכל המסכים (data-reveal)
   ------------------------------------------------------------
   למסך יש reveal-pre ב-HTML; כשהוא נכנס לתצוגה js/main.js מחליף אותו
   ב-is-revealed, וכל אלמנט עם data-reveal מקבל animation עם השהיה (--d).
   keyframes מגדירים רק את נקודת ההתחלה ("from") — הסוף הוא המצב הרגיל
   של האלמנט, כך שלא נדרסים ה-translate / filter / clip שלו.
   fill-mode: backwards — מחזיק את מצב ההתחלה בזמן ההשהיה, ואחרי הסוף
   האלמנט חוזר להיות "רגיל" (hover ומעברים ממשיכים לעבוד).
   ============================================================ */
.js .reveal-pre [data-reveal] { opacity: 0; }
.is-revealed [data-reveal] {
  animation-name: var(--reveal, reveal-up);
  animation-duration: var(--dur, 1.2s);
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-delay: var(--d, 0s);
  animation-fill-mode: backwards;
}
[data-reveal="text"]  { --reveal: reveal-text; }
[data-reveal="up"]    { --reveal: reveal-up; }
[data-reveal="pop"]   { --reveal: reveal-pop; --dur: 1s; }
[data-reveal="rise"]  { --reveal: reveal-rise; --dur: 1.5s; }
[data-reveal="card"]  { --reveal: reveal-card; --dur: 1.4s; }
[data-reveal="image"] { --reveal: reveal-image; --dur: 1.6s; }
[data-reveal="fade"]  { --reveal: reveal-fade; }

/* טקסט: עולה מעט, מטושטש, ומתחדד */
@keyframes reveal-text  { from { opacity: 0; transform: translateY(2.4rem); filter: blur(.5rem); } }
/* כפתורים, קלפים ורשימות: עלייה נקייה (בלי blur — יש להם צל ב-filter) */
@keyframes reveal-up    { from { opacity: 0; transform: translateY(3.2rem); } }
/* תגיות קטנות: "צצות" */
@keyframes reveal-pop   { from { opacity: 0; transform: translateY(1.6rem) scale(.92); } }
/* איורים ומוצרים: עולים מלמטה ומתפקסים, כמו הכיסא במסך המוצר */
@keyframes reveal-rise  { from { opacity: 0; transform: translateY(5rem) scale(.96); } }
/* הקלפים הכתומים: עולים ונפתחים מעט */
@keyframes reveal-card  { from { opacity: 0; transform: translateY(4rem) scale(.98); } }
/* תמונות: "וילון" שנפתח מלמטה למעלה, עם זום עדין שמתייצב */
@keyframes reveal-image {
  from { opacity: 0; clip-path: inset(22% 0 0 0 round var(--reveal-r, var(--radius-lg))); transform: scale(1.05); }
  to   { clip-path: inset(0 0 0 0 round var(--reveal-r, var(--radius-lg))); }
}
@keyframes reveal-fade  { from { opacity: 0; } }

/* ============================================================
   1. גיבור
   ============================================================ */
.hero {
  min-height: 92.2rem;   /* עד תחתית איור הילד (45.8 + 46.4) — כך המרווח למסך הבא אחיד */
}
.hero__content {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 16.6rem;
  text-align: center;
}
.hero__title {
  display: flex; flex-direction: column; align-items: center;
  font-weight: 700;
  font-size: 14rem;
  line-height: 1;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--brand {
  display: flex; align-items: center; gap: 2.5rem;
  margin-bottom: -2.1rem;
}
.hero__wordmark { width: 42.9rem; margin-top: -1.5rem; }

.hero__lead {
  width: min(63.8rem, 100%);
  margin-top: 2.5rem;
  font-size: max(18px, 3.2rem);
  line-height: 1.3;
}
.hero__lead strong { color: var(--blue); }
.hero__lead--tagline { margin-top: 1.2rem; font-weight: 700; }
.hero .btn--lg { margin-top: 6rem; }

.hero__kid {
  position: absolute; left: 2.1rem; top: 45.8rem;
  width: 67.8rem;
}
/* צל רך מתחת לילד ("צל לילדים" + "טישטוש לצל") */
.hero__kid::after {
  content: ""; position: absolute; z-index: -1;
  left: 6rem; right: 6rem; top: 91%; height: 4rem;
  border-radius: 50%;
  background: rgba(46, 46, 47, 0.15);
  filter: blur(1.5rem);
}

/* ============================================================
   2. הבעיה
   ============================================================ */
.problem {
  display: flex; align-items: center; gap: 15rem;
}
.problem__text {
  flex: none; width: 77rem; min-height: 61rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.problem__text .btn { margin-top: auto; }
.problem__body { width: min(67.6rem, 100%); margin-top: var(--title-gap); margin-bottom: var(--cta-gap); }
.problem__body p + p { margin-top: var(--text-gap); }
.problem__text .h2 { width: 100%; }

.problem__signs { position: relative; flex: none; width: 63.8rem; }
.signs { display: flex; flex-wrap: wrap; gap: 2rem; }
.sign {
  display: flex; align-items: center; justify-content: center;
  min-height: 8.7rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}
.sign--full { width: 100%; }
.sign--w375 { width: 37.5rem; }
.sign--w243 { width: 24.3rem; }
/* שני הצ'יפים הקצרים צמודים לשמאל, כמו בעיצוב, ומשאירים מקום לאיור */
.sign--w373 { width: 37.3rem; margin-inline-start: auto; }

.problem__girl {
  position: absolute; left: 41.3rem; top: 18.7rem;
  width: 24.2rem;
  z-index: 1;
}
.problem__girl-shadow {
  position: absolute; left: 44.8rem; top: 46.4rem;
  width: 15.4rem; height: 1.9rem;
  border-radius: 50%;
  background: rgba(46, 46, 47, 0.15);
  filter: blur(.8rem);
}

/* ============================================================
   3 + 6. קלפי הפרומו הכתומים
   ============================================================ */
.promo__card {
  position: relative;
  min-height: 66.3rem;
  /* ריווח אנכי קבוע — כשהטקסט ארוך הקלף גדל ולא נצמד לשוליים */
  padding-block: 8rem;
  display: flex; align-items: center;
  border-radius: var(--radius-lg);
  background: var(--orange);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.promo__photo {
  position: absolute; top: 0; left: 0;
  width: 70.45rem; height: 100%;
  object-fit: cover;
  /* הקשת נמצאת בצד ימין של הקובץ — כשהקלף גדל חותכים משמאל כדי שהקשת תישאר שלמה */
  object-position: right center;
}
.promo__watermark {
  position: absolute; z-index: 1;
  max-width: none;
  opacity: .2;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.promo__product { position: absolute; z-index: 2; max-width: none; }
.promo__text {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--paper);
}
.promo__text .h2 { margin-bottom: var(--title-gap); }
.promo__body { margin-bottom: var(--cta-gap); }
.promo__body p + p { margin-top: var(--text-gap); }
.tint { color: #E6F0F6; }

/* KidBase — תמונה משמאל, טקסט מימין */
.promo--kidbase .promo__text { margin-inline-start: 12.8rem; width: 71.8rem; }
.promo--kidbase .h2 { white-space: nowrap; }
.promo--kidbase .promo__body { width: min(49.8rem, 100%); }
/* הכיסא נמדד לפי גובה הקלף (בפיגמה: 61.1 מתוך 66.3rem, 4.1rem מלמעלה),
   כך שכשהטקסט מגדיל את הקלף — הכיסא גדל איתו באותה פרופורציה וממורכז באותה נקודה */
.promo--kidbase .promo__product { left: 48.1rem; top: 6.2%; width: auto; height: 92.2%; translate: -50% 0; }
.promo--kidbase .promo__watermark { left: 38rem; top: -38rem; width: 190rem; rotate: 14.7deg; }

.promo__feet {
  position: absolute; left: 146.8rem; top: 55.8rem;
  width: 40rem;
  filter: blur(.6rem);
  opacity: .85;
  pointer-events: none;
}

/* גומיית התנועה — מראה: תמונה מימין, טקסט משמאל */
.promo--band .promo__card { justify-content: flex-end; }
.promo--band .promo__photo { left: auto; right: 0; transform: scaleX(-1); }
.promo--band .promo__text { margin-inline-end: 7.6rem; width: 60.2rem; }
.promo--band .promo__body { width: min(57.5rem, 100%); }
.promo--band .promo__product { left: 75.5rem; top: 1.7rem; width: 67.6rem; }
.promo--band .promo__watermark { left: -22rem; top: -30rem; width: 190rem; rotate: 16deg; }

/* ============================================================
   3.5 KidBase מקרוב — נתוני המוצר
   ------------------------------------------------------------
   שלוש עמודות: נתונים מימין | הכיסא הגדול במרכז | נתונים משמאל.
   כל נתון "מחובר" לכיסא בקו דק עם נקודה, כמו בהשראות.
   ============================================================ */
.specs {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
}

.specs__stage {
  display: grid;
  grid-template-columns: 40rem 1fr 40rem;
  grid-template-rows: repeat(2, auto);
  column-gap: 4rem; row-gap: 6rem;
  align-items: center;
  width: 100%;
}
/* ב-RTL העמודה הראשונה היא הימנית */
.spec--tech { grid-area: 1 / 1; }
.spec--fit  { grid-area: 2 / 1; }
.specs__product { grid-area: 1 / 2 / 3 / 3; }
.spec--size { grid-area: 1 / 3; }
.spec--tip  { grid-area: 2 / 3; }

/* ---- הכיסא: עיגול רך ומסלול מקווקו ---- */
.specs__product {
  position: relative;
  align-self: stretch;
  display: grid; place-items: center;
  margin: 0;
  isolation: isolate;
}
.specs__product::before,
.specs__product::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
.specs__product::before {
  width: 62rem; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, #fff 0%, var(--tint-blue) 72%);
  box-shadow: var(--shadow);
}
.specs__product::after {
  width: 74rem; aspect-ratio: 1;
  border: 2px dashed rgba(27, 111, 163, 0.25);
}
/* שתי התמונות באותו תא, באותה מסגרת (יחס של תמונת הבסיס האחד).
   object-fit: contain שומר על התמונה השנייה בלי עיוות, והן מתחלפות ב-crossfade */
.specs__chair {
  grid-area: 1 / 1;
  width: 64rem; height: auto;
  aspect-ratio: 574 / 611;
  object-fit: contain;
  translate: 0 1.5rem;
  filter: drop-shadow(0 2.4rem 2rem rgba(46, 46, 47, 0.18));
  transition: opacity .5s ease, scale .6s cubic-bezier(.2, .8, .2, 1),
              transform 1.6s cubic-bezier(.16, 1, .3, 1), filter 1.4s ease;
}
.specs__chair:not(.is-active) { opacity: 0; scale: .96; }

.spec__stack-btn { margin-top: 2.4rem; }

/* ---- נתון בודד: כותרת + טקסט ---- */
.spec { position: relative; }
.spec__title {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: max(18px, 3.2rem);
  line-height: 1.2;
  color: var(--blue);
}
.spec__note { margin-top: 1.6rem; font-size: max(15px, 2rem); color: var(--gray); }

/* קווי החיבור — שכבת SVG מעל הבמה; הנתיבים מחושבים ב-js/main.js */
.specs__stage { position: relative; }
.specs__links {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity .3s ease;
}
.specs__links.is-hidden { opacity: 0; }
.specs__links path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.specs__links .dot { fill: var(--blue); }
/* הקטע האחרון נכנס למוצר ו"דועך" — מצטמק ושקוף בהדרגה (גרדיאנט ב-JS) */
.specs__links .fade { stroke: none; }

/* בדסקטופ הכרטיסים הם חלק מהגריד; בנייד הם עמודה מתחת לכיסא הדביק */
.specs__cards { display: contents; }
.specs__hotspot { display: none; }

/* כיסאות מתאימים */
.spec__chairs { display: flex; gap: 1.6rem; margin-top: 1.6rem; }
.spec__chairs li {
  display: flex; align-items: center; gap: 1.2rem;
  flex: 1;
  padding: 1rem 1.6rem 1rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: max(15px, 2rem);
  line-height: 1.2;
}
.spec__chairs img { height: 6.4rem; width: auto; mix-blend-mode: multiply; }

/* ---- המידות: כפתור שפותח כרטיס צף עם השרטוט ---- */
.spec__toggle { margin-top: 2.4rem; }

/* הכרטיס צף מעל הטיפ שמתחתיו, כך שהפתיחה לא מזיזה את שאר המסך */
.spec__panel {
  position: absolute; z-index: 10;
  top: calc(100% + 2rem); right: 0;
  width: 48rem;
  padding: 4rem 3.2rem 3.6rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 2rem 5rem rgba(46, 46, 47, 0.16);
}
.spec__panel:not([hidden]) { animation: panel-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in {
  from { opacity: 0; translate: 0 -1.2rem; scale: .98; }
}

.spec__close {
  position: absolute; top: 1.6rem; left: 1.6rem;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--tint-blue);
  cursor: pointer;
  transition: background-color .2s ease;
}
.spec__close:hover { background: #D5E6F1; }
/* ה-X מצויר בשני קווים */
.spec__close::before,
.spec__close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--blue);
  translate: -50% -50%;
  rotate: 45deg;
}
.spec__close::after { rotate: -45deg; }

.spec__drawing { display: block; width: min(34rem, 100%); height: auto; margin: 0 auto; overflow: visible; }
.spec__drawing .base { fill: var(--tint-blue); stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.spec__drawing .slot { fill: var(--paper); stroke: var(--blue); stroke-width: 2; }
.spec__drawing .dim { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.spec__drawing .dim__ext { stroke-dasharray: 4 5; opacity: .5; }
.spec__drawing .dim__label { fill: var(--ink); font-family: var(--font); font-weight: 700; font-size: 19px; text-anchor: middle; }

.spec__numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 2.8rem 0 0;
}
.spec__numbers div {
  display: flex; flex-direction: column-reverse; align-items: center; gap: .6rem;
  text-align: center;
}
.spec__numbers div + div { border-inline-start: 1px solid rgba(46, 46, 47, 0.12); }
.spec__numbers dt { margin-top: .4rem; font-size: max(15px, 2rem); color: var(--gray); }
.spec__numbers dd {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  margin: 0;
  font-weight: 700;
  font-size: max(30px, 6.4rem);
  line-height: 1;
  color: var(--blue);
}
.spec__numbers dd span { font-size: max(15px, 2rem); line-height: 1; }
.spec__panel .spec__note { text-align: center; }

/* ---- אנימציית כניסה (js מוסיף is-pre ואז מסיר אותו כשהמסך נכנס לתצוגה) ----
   רצף: כותרת → עיגול וטבעת → הכיסא "מתפקס" למקום → הקווים מצטיירים
   מהכותרות אל הכיסא, בשתי שורות → הדעיכה בקצה → הטקסטים.
   עקומת expo-out: תנועה מהירה בהתחלה ונחיתה רכה מאוד. */
.specs { --intro-ease: cubic-bezier(.16, 1, .3, 1); }

.specs > .h2 { transition: opacity 1s ease, translate 1.2s var(--intro-ease), filter 1s ease; }
.js .specs.is-pre > .h2 { opacity: 0; translate: 0 3rem; filter: blur(.6rem); }

.specs__product::before { transition: opacity 1.2s ease, scale 1.6s var(--intro-ease); }
.js .specs.is-pre .specs__product::before { opacity: 0; scale: .82; }

/* הטבעת המקווקוות נכנסת בסיבוב, וממשיכה להסתובב לאט מאוד כל הזמן */
.specs__product::after {
  transition: opacity 1.4s ease, scale 1.8s var(--intro-ease);
  animation: orbit-spin 120s linear infinite;
}
.js .specs.is-pre .specs__product::after { opacity: 0; scale: 1.12; }
@keyframes orbit-spin { to { rotate: 360deg; } }

/* הכיסא עולה מלמטה מטושטש ו"מתפקס" — כמו מצלמה שמכוונת פוקוס */
.js .specs.is-pre .specs__chair.is-active {
  opacity: 0;
  transform: translateY(6rem) scale(.94);
  filter: drop-shadow(0 2.4rem 2rem rgba(46, 46, 47, 0)) blur(1.2rem);
}

/* הקווים: pathLength=1, כך ש-dashoffset 1→0 "מצייר" את הקו מהכותרת אל הכיסא */
.specs__links path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); }
.specs__links .dot { transform-box: fill-box; transform-origin: center; transition: scale .7s var(--intro-ease), opacity .4s ease; }
.specs__links .fade { transition: opacity 1s ease; }
.js .specs.is-pre .specs__links path { stroke-dashoffset: 1; }
.js .specs.is-pre .specs__links .dot { scale: 0; opacity: 0; }
.js .specs.is-pre .specs__links .fade { opacity: 0; }

.spec { transition: opacity 1s ease, translate 1.2s var(--intro-ease); }
.js .specs.is-pre .specs__stage .spec { opacity: 0; translate: 0 2.4rem; }

/* ההשהיות — רק בזמן הכניסה */
.specs.is-entering .specs__product::before { transition-delay: .15s; }
.specs.is-entering .specs__product::after  { transition-delay: .3s; }
.specs.is-entering .specs__chair.is-active { transition-delay: .35s; transition-duration: 1.1s, .6s, 1.6s, 1.4s; }
.specs.is-entering .specs__links .dot  { transition-delay: calc(1.05s + var(--i) * .25s); }
.specs.is-entering .specs__links path  { transition-delay: calc(1.15s + var(--i) * .25s); }
.specs.is-entering .specs__links .fade { transition-delay: calc(2.25s + var(--i) * .25s); }
.specs.is-entering .spec--tech,
.specs.is-entering .spec--size { transition-delay: 1s; }
.specs.is-entering .spec--fit,
.specs.is-entering .spec--tip  { transition-delay: 1.25s; }

/* ============================================================
   4. וידאו
   ============================================================ */
.video {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
}
.video__frame {
  display: grid; place-items: center;
  width: 100%; height: 65.6rem;
  border-radius: var(--radius-lg);
  background: #C4C4C4;
  overflow: hidden;
}
.video__frame > * { grid-area: 1 / 1; }
.video__player {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #C4C4C4;
}
.video__frame.is-playing .video__play { display: none; }
.video__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 8rem; height: 8rem; min-width: 48px; min-height: 48px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .85); cursor: pointer;
  box-shadow: 0 .4rem 2rem rgb(0 0 0 / .15);
}
.video__play img { width: 4rem; min-width: 32px; }
.video__kid {
  position: absolute; left: 140.8rem; top: 56.1rem;   /* 85.5 פחות הריפוד העליון (29.4) שהוסר */
  width: 28.7rem;
}

/* ============================================================
   5. החשיבה שמאחורי כל פרט
   ============================================================ */
.features {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
}
.features .section-head { width: min(113rem, 100%); }
.features__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  width: 100%;
}

/* קשת עליונה של גוף הקלף — "Rectangle 7" מהפיגמה */
.feature__body::before,
.plan__body::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  aspect-ratio: 375 / 23.24;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 23.24' preserveAspectRatio='none'%3E%3Cpath d='M0 23.24S112.06 0 187.5 0 375 23.24 375 23.24z' fill='%23FFFDFA'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.feature {
  display: flex; flex-direction: column;
  min-height: 45.9rem;
  filter: drop-shadow(0 1.5rem 1.5rem rgba(46, 46, 47, 0.10));
}
.feature__head {
  position: relative;
  height: 25.8rem;
  padding: 6.8rem 2rem 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--blue);
  overflow: hidden;
  isolation: isolate;
}
.feature__head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--photo) center / cover no-repeat;
  opacity: .2;
}
.feature__head h3 {
  font-weight: 700;
  font-size: max(22px, 4rem);
  line-height: 1;
  color: var(--paper);
  text-align: center;
}
.feature__body {
  position: relative;
  flex: 1;
  margin-top: -9.4rem;
  padding: 7.9rem 2.8rem 4rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper);
  text-align: center;
}

/* ============================================================
   7. חבילות
   ============================================================ */
.pricing {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
}
.pricing .section-head { width: min(98.4rem, 100%); }
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  width: 100%;
  padding-bottom: 2.4rem;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 70.1rem;
  filter: drop-shadow(0 1.5rem 1.5rem rgba(46, 46, 47, 0.10));
}
.plan__head {
  height: 33.8rem;
  padding: 6.8rem 2rem 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--blue);
}
.plan__head h3 {
  font-weight: 700;
  font-size: max(22px, 4rem);
  line-height: 1.2;
  color: var(--paper);
  text-align: center;
}
.plan__badge { color: var(--yellow); }
.plan__body {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  margin-top: -11.6rem;
  padding: 1.6rem 4.6rem 7rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper);
  text-align: center;
}
.plan__body::before { aspect-ratio: 507 / 37.73; }
.plan__tagline { font-weight: 700; font-size: max(19px, 3.2rem); line-height: 1.4; }
.plan__price {
  margin-top: .8rem;
  font-weight: 700;
  font-size: 9.6rem;
  line-height: 1;
  color: var(--blue);
  white-space: nowrap;
}
.plan__list { margin-top: 3.4rem; }
.plan--featured .plan__list { margin-top: 1.4rem; max-width: 37.5rem; }
.plan--featured .plan__price { margin-top: 0; }
.plan__cta {
  position: absolute; left: 50%; bottom: -2.2rem;
  translate: -50% 0;
}

/* ============================================================
   8. נעים להכיר
   ============================================================ */
/* על אותו קונטיינר של כל האתר: הטקסט צמוד לקצה הימני, התמונה לשמאלי —
   באותה חלוקה כמו מסך הבעיה (77rem טקסט / 63.8rem תמונה) */
.about {
  display: flex; align-items: center; justify-content: space-between; gap: 6rem;
}
.about__text { flex: 0 1 77rem; display: flex; flex-direction: column; align-items: flex-start; }
.about__text .h2 { margin-bottom: var(--title-gap); }
.about__text p { width: min(70rem, 100%); }
.about__text p + p { margin-top: var(--text-gap); }
.brand-word { color: var(--blue); }
.about__photo {
  flex: none;
  width: 63.8rem; aspect-ratio: 559 / 626; height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ============================================================
   8.5 המלצות — קרוסלה ממורכזת
   ------------------------------------------------------------
   ההמלצה הפעילה במרכז, גדולה ובצבע מלא; השכנות קטנות, אפורות
   וחצי-שקופות. js/main.js מזיז את המסילה כך שהפעילה תמיד במרכז.
   ============================================================ */
.quotes {
  display: flex; flex-direction: column; gap: var(--head-gap);
}

.quotes__viewport {
  overflow: hidden;
  padding-block: 3rem 4rem;   /* מקום לצל של הכרטיסים */
}
.quotes__track {
  position: relative;          /* offsetParent של הכרטיסים — לחישוב המרכוז */
  display: flex; align-items: center; gap: 3rem;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.quote {
  flex: none;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 58rem; min-height: 38rem;
  padding: 6rem 4.8rem 4rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
  opacity: .45;
  scale: .82;
  filter: grayscale(1);
  cursor: pointer;
  /* transition — מוגדר למטה, יחד עם אנימציית הכניסה */
}
.quote.is-active {
  opacity: 1; scale: 1; filter: none;
  cursor: default;
  box-shadow: 0 2.4rem 5rem rgba(46, 46, 47, 0.12);
}
.quote:not(.is-active):hover { opacity: .65; }

/* מירכאות גדולות ודקורטיביות בפינה */
.quote::before {
  content: "”";
  position: absolute; top: .6rem; inset-inline-start: 4rem;
  font-size: 14rem; line-height: 1;
  font-weight: 700;
  color: var(--blue);
  opacity: .18;
  pointer-events: none;
}
.quote blockquote { margin: 0; }
.quote blockquote p { line-height: 1.5; }

.quote footer { display: flex; align-items: center; gap: 1.6rem; margin-top: 3.2rem; }
.quote__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 6.4rem; height: 6.4rem;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--paper);
  font-weight: 700;
  font-size: max(18px, 2.8rem);
}
.quote:nth-child(5n+2) .quote__avatar { background: var(--orange); }
.quote:nth-child(5n+3) .quote__avatar { background: var(--green); }
.quote:nth-child(5n+4) .quote__avatar { background: var(--yellow); color: var(--ink); }
.quote:nth-child(5n+5) .quote__avatar { background: var(--red); }
.quote__name { display: block; font-weight: 700; }
.quote__role { display: block; font-size: max(15px, 2rem); color: var(--gray); }

/* פס התקדמות + חיצים (כמו בהשראה) */
.quotes__controls { display: flex; align-items: center; gap: 4rem; width: min(124rem, 100% - 4rem); }
.quotes__progress {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(46, 46, 47, 0.12);
  overflow: hidden;
}
.quotes__progress span {
  display: block; height: 100%;
  width: var(--p, 20%);
  background: var(--blue);
  transition: width .9s cubic-bezier(.16, 1, .3, 1);
}
.quotes__arrows { display: flex; gap: 1.2rem; }
.quotes__arrow {
  display: grid; place-items: center;
  width: max(44px, 5.6rem); height: max(44px, 5.6rem);
  padding: 0; border: 0;
  background: none;
  color: var(--blue);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.quotes__arrow svg { width: 100%; height: 100%; }
.quotes__arrow:hover { color: var(--blue-dark); transform: scale(1.06); }
/* החץ במקור מצביע שמאלה = "הבא" ב-RTL; "הקודם" מסובב */
.quotes__arrow--prev svg { rotate: 180deg; }

/* ---- אנימציית כניסה (אותה שפה כמו "KidBase מקרוב") ----
   הכותרת עולה ומתחדדת → ההמלצה המרכזית עולה למקום → השכנות אחריה →
   פס ההתקדמות "נמתח" מימין → החיצים נכנסים */
.quotes .h2 { transition: opacity 1s ease, translate 1.2s cubic-bezier(.16, 1, .3, 1), filter 1s ease; }
.js .quotes.is-pre .h2 { opacity: 0; translate: 0 3rem; filter: blur(.6rem); }

.quote { transition: scale .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, filter .6s ease, box-shadow .6s ease, translate 1.3s cubic-bezier(.16, 1, .3, 1); }
.js .quotes.is-pre .quote { opacity: 0; translate: 0 6rem; }
.quotes.is-entering .quote { transition-duration: .9s, 1s, .6s, .6s, 1.3s; }
.quotes.is-entering .quote.is-active { transition-delay: .25s; }
.quotes.is-entering .quote:not(.is-active) { transition-delay: .5s; }

.quotes__progress { transform-origin: right center; transition: scale 1.4s cubic-bezier(.65, 0, .35, 1); }
.js .quotes.is-pre .quotes__progress { scale: 0 1; }
.quotes.is-entering .quotes__progress { transition-delay: .7s; }

.quotes__arrows { transition: opacity .8s ease, translate 1s cubic-bezier(.16, 1, .3, 1); }
.js .quotes.is-pre .quotes__arrows { opacity: 0; translate: -2rem 0; }
.quotes.is-entering .quotes__arrows { transition-delay: 1s; }

/* ============================================================
   9. שאלות נפוצות
   ============================================================ */
.faq {
  display: flex; flex-direction: column; gap: var(--head-gap);
}
.faq__head { display: flex; align-items: flex-end; gap: 16.6rem; }
.faq__head > div { flex: 1; display: flex; flex-direction: column; gap: var(--title-gap); }
/* הקוביות מההירו, גדולות יותר (בהירו ~18rem).
   "יושבות" על השאלה הראשונה: המרווח השלילי מבטל את ה-gap (5rem) ואת
   השוליים השקופים בתחתית הקובץ (~1.1rem), ושוקע עוד קצת לתוך הקלף. */
.faq__blocks {
  flex: none; width: 30rem;
  position: relative; z-index: 1;
  margin-bottom: -6.6rem;
  margin-inline-end: 4rem;   /* ב-RTL: פנימה מהפינה המעוגלת של הקלף */
}
.faq__list {
  display: flex; flex-direction: column; gap: 2.5rem;
  width: min(119.3rem, 100%);
  align-self: flex-end;   /* ב-RTL זה צד שמאל, כמו בעיצוב */
}
.faq__item {
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem;
  font-weight: 700;
  font-size: max(18px, 3.2rem);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: max(36px, 5rem); height: max(36px, 5rem);
  background: url('../assets/img/icons/faq-toggle.svg') center / contain no-repeat;
  transition: rotate .55s cubic-bezier(.65, 0, .35, 1);
}
.faq__item[open] summary::after { rotate: 180deg; }
/* בזמן הסגירה המונפשת ה-details עדיין "פתוח" — האייקון כבר חוזר */
.faq__item.is-closing summary::after { rotate: 0deg; }
.faq__item p { margin-top: 2.5rem; }

/* ============================================================
   10. יצירת קשר
   ============================================================ */
/* הילדה הקופצת עומדת על הפס ובולטת מעליו — המרווח נמדד עד ראש שלה */
.contact { --overhang: 23rem; }
.page > .contact { margin-top: calc(var(--section-space) + var(--overhang)); }
.contact {
  min-height: 117.1rem;
  color: var(--paper);
}
/* הפס הכחול: הכחול של האתר ב-92% אטימות — פסי הרקע של הדף ממשיכים דרכו בעדינות, והטקסט הלבן עומד בניגודיות AA (4.6:1). הקשתות נחתכות במסכה. */
.contact::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(27, 111, 163, 0.92);
  -webkit-mask: url('../assets/img/deco/band-mask.svg') no-repeat 0 0 / 100% 100%;
          mask: url('../assets/img/deco/band-mask.svg') no-repeat 0 0 / 100% 100%;
}
.contact__girl {
  position: absolute; left: 50%; top: -23rem;
  width: 37.4rem;
  translate: -50% 0;
}
/* האותיות הגדולות ברקע — מיזוג saturation כמו בפיגמה */
.contact__letters {
  position: absolute; left: -1.5rem; top: 75.3rem;
  width: 195.3rem; max-width: none;
  mix-blend-mode: saturation;
  pointer-events: none;
}
.contact__inner {
  position: relative;
  width: min(103.4rem, 100% - 4rem);
  margin-inline: auto;
  padding-top: 16rem;
}
.section-head--light { color: var(--paper); }

.form {
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  margin-top: 7.5rem;
}
.field {
  display: flex; align-items: center; gap: 2.5rem;
  width: 100%;
  min-height: 7.5rem;
  padding-inline: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: box-shadow .2s ease;
}
.field:focus-within { box-shadow: var(--shadow), 0 0 0 3px var(--orange); }
.field__icon { flex: none; width: max(15px, 1.8rem); }
.field input,
.field textarea {
  flex: 1; min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0; outline: 0;
  background: transparent;
  font-size: max(16px, 2.4rem);
  line-height: 1.4;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink); opacity: 1; }
.field--area { align-items: flex-start; min-height: 12.2rem; padding-block: 1rem; }
.field--area .field__icon { margin-top: 1.1rem; }
.field--area textarea { resize: none; min-height: 10.2rem; }
.field.is-invalid { box-shadow: var(--shadow), 0 0 0 3px var(--red); }

.form .btn { margin-top: 2.5rem; }
.form__status:empty { display: none; }
.form__status {
  padding: .8rem 2rem;
  border-radius: var(--radius-md);
  background: rgba(255, 253, 250, .16);
  font-size: max(16px, 2rem);
  text-align: center;
}

/* לא left:-9999px — ב-RTL זה מותח את אזור הגלילה 10,000px שמאלה והדף נראה ריק */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* ============================================================
   פוטר
   ============================================================ */
.site-footer {
  position: relative;
  margin-top: -5.8rem;
  padding-block: 5rem;
  color: var(--gray);
}
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
}
.site-footer__inner > * { flex: 1; }
.site-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; }
.site-footer__links a,
.site-footer__brand a { text-decoration: none; }
.site-footer__links a:hover,
.site-footer__brand a:hover { color: var(--blue); text-decoration: underline; }
.site-footer__brand {
  display: flex; flex-direction: column; align-items: center; gap: 3.3rem;
  text-align: center;
}
.site-footer__brand img { width: max(150px, 21.1rem); }
/* הצד השמאלי: חצי מהקישורים, ומשמאלם אייקוני הקשר — באותו גובה כמו הצד הימני */
.site-footer__end { display: flex; align-items: center; justify-content: flex-end; gap: 4rem; }
.site-footer__end .site-footer__links { align-items: flex-end; }
.site-footer__social { display: flex; align-items: center; gap: 2rem; }
.site-footer__social li[hidden] { display: none; }
.site-footer__social a {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  margin: -7px;
  transition: opacity .2s ease;
}
.site-footer__social a:hover { opacity: .7; }
.site-footer__social img { width: max(24px, 3rem); }

/* ---------- וואטסאפ צף ---------- */
.whatsapp {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 50;
  width: max(52px, 6rem);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(46, 46, 47, 0.18);
  transition: transform .2s ease;
}
.whatsapp:hover { transform: scale(1.08); }
.whatsapp img { width: 100%; }

/* ============================================================
   טאבלט ומובייל — מתחת ל-1100px
   ------------------------------------------------------------
   כאן 1rem חוזר להיות 10px קבוע, והפריסה עוברת לעמודה אחת.
   ============================================================ */
@media (max-width: 1099px) {
  html { font-size: 10px; scroll-padding-top: 8rem; }
  :root { --section-space: 10rem; --head-gap: 3.2rem; --title-gap: 1.6rem; --text-gap: 1.2rem; --cta-gap: 3.2rem; }
  [data-reveal="image"] { --reveal-r: 3rem; }   /* בנייד פינות התמונות קטנות יותר */
  body { font-size: 1.7rem; }
  .container { width: min(72rem, 100% - 3.2rem); }
  .h2 { font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1.1; }
  .lead { font-size: 1.7rem; }
  .btn--sm { --fs: 1.5rem; width: auto; min-width: 21rem; }

  .deco, .promo__feet, .promo__watermark { display: none; }

  /* הדר + תפריט נפתח */
  .site-header { padding-block: 1.2rem; background: rgba(255, 253, 250, 0.94); box-shadow: 0 6px 24px rgba(46, 46, 47, 0.08); }
  /* סדר בנייד: תפריט מימין, לוגו באמצע, סל משמאל */
  .site-header__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    width: calc(100% - 3.2rem);
  }
  .site-header__inner > * { grid-row: 1; }
  .nav-toggle { grid-column: 1; justify-self: start; }
  .site-header__logo { grid-column: 2; }
  .site-header__inner .cart-btn { grid-column: 3; justify-self: end; margin: 0; }
  .site-header__logo img { width: 9rem; }
  .site-header__cta { display: none; }
  .nav-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: var(--ink); content: "";
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-toggle__bar { position: relative; }
  .nav-toggle__bar::before { position: absolute; top: -8px; }
  .nav-toggle__bar::after  { position: absolute; top: 8px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-8px) rotate(-45deg); }

  /* תפריט מסך מלא: שכבה מטושטשת מתחת לפקדי ההדר */
  html.is-menu-open { overflow: hidden; }
  html.is-menu-open .whatsapp { opacity: 0; visibility: hidden; }
  .site-header.is-menu-open { background: transparent; box-shadow: none; backdrop-filter: none; }
  .site-nav {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column;
    margin: 0;
    padding: 10.4rem 2.4rem max(2.4rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: rgba(255, 253, 250, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li {
    border-bottom: 1px solid rgba(46, 46, 47, 0.12);
    opacity: 0; transform: translateY(1.6rem);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .site-nav.is-open li { opacity: 1; transform: none; }
  .site-nav.is-open li:nth-child(2) { transition-delay: .05s; }
  .site-nav.is-open li:nth-child(3) { transition-delay: .1s; }
  .site-nav.is-open li:nth-child(4) { transition-delay: .15s; }
  .site-nav.is-open li:nth-child(5) { transition-delay: .2s; }
  .site-nav ul a {
    display: block; padding: 1.6rem 0;
    font-size: 3rem; font-weight: 700; line-height: 1.2;
    background: none;
  }
  .site-nav ul a.is-active { color: var(--blue); }

  .site-nav__extra {
    display: flex; flex-direction: column; gap: 1.6rem;
    margin-top: auto; padding-top: 2.4rem;
    opacity: 0; transform: translateY(1.6rem);
    transition: opacity .4s ease .25s, transform .5s cubic-bezier(.16, 1, .3, 1) .25s;
  }
  .site-nav.is-open .site-nav__extra { opacity: 1; transform: none; }
  .site-nav__preview {
    height: min(26vh, 24rem); margin: 0;
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow);
  }
  .site-nav__preview img {
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity .25s ease;
  }
  .site-nav__preview img.is-swapping { opacity: 0; }
  .site-nav__cta { width: 100%; }

  /* גיבור */
  .hero { min-height: 0; }
  .hero__content { padding: 12rem 1.6rem 0; }
  .hero__title { font-size: clamp(3.4rem, 9.5vw, 7.2rem); }
  .hero__line { white-space: normal; }
  .hero__line--brand { flex-wrap: wrap; justify-content: center; gap: 1rem 1.6rem; margin-bottom: 0; }
  .hero__wordmark { width: clamp(14rem, 36vw, 26rem); margin-top: 0; }
  .hero__lead { font-size: 1.9rem; }
  .hero .btn--lg { margin-top: 3.2rem; --fs: 1.9rem; }
  .hero__kid { position: relative; left: auto; top: auto; width: min(46rem, 90%); margin: 3.2rem auto 0; }

  /* הבעיה — כותרת, ואז הילדה במרכז עם הסימנים סביבה, ורק אחר כך הטקסט והכפתור.
     problem__text "נפתח" (display: contents) כדי שאפשר יהיה לשבץ את הסימנים בין הכותרת לטקסט */
  .problem { flex-direction: column; align-items: stretch; gap: var(--head-gap); }
  .problem__text { display: contents; }
  .problem__text .h2 { order: 1; }
  .problem__signs { order: 2; width: 100%; }
  .problem__body { order: 3; width: 100%; margin: 0; }
  .problem__text .btn { order: 4; align-self: flex-start; }

  /* 3 סימנים מכל צד, הילדה בעמודה האמצעית */
  .problem__signs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr);
    grid-template-areas: "a g b" "c g d" "e g f";
    gap: 1.2rem .8rem;
    align-items: center;
  }
  .signs { display: contents; }
  .sign { min-height: 7.6rem; padding: 1rem .8rem; width: auto; margin: 0; border-radius: 2rem; line-height: 1.25; }
  .sign:nth-child(1) { grid-area: a; }
  .sign:nth-child(2) { grid-area: b; }
  .sign:nth-child(3) { grid-area: c; }
  .sign:nth-child(4) { grid-area: d; }
  .sign:nth-child(5) { grid-area: e; }
  .sign:nth-child(6) { grid-area: f; }
  /* הילדה רחבה מהעמודה שלה ועולה מעט על הקוביות (כמו בדסקטופ).
     בצד הפנימי של כל קוביה יש ריווח נוסף, כך שהילדה לא מסתירה טקסט */
  .problem__girl { grid-area: g; position: relative; z-index: 2; left: auto; top: auto; width: calc(100% + 7.2rem); max-width: none; margin: 0 -3.6rem; }
  .sign { padding-inline: .6rem; }
  .sign:nth-child(odd)  { padding-inline-end: 3.2rem; }
  .sign:nth-child(even) { padding-inline-start: 3.2rem; }
  .problem__girl-shadow { display: none; }

  /* קלפי פרומו — מוצר למעלה, טקסט למטה */
  .promo__card { flex-direction: column; align-items: stretch; min-height: 0; padding-block: 0; }
  /* בתמונה עצמה "אפויים" הקשת והפינות הכתומות של הדסקטופ. בנייד מגדילים אותה
     סביב מרכז האזור הנקי, כך שהם נחתכים והצילום ממלא את כל רוחב הקלף */
  .promo__photo { position: relative; width: 100%; height: 30rem; order: -2; object-position: center; scale: 1.25; transform-origin: 47% 50%; clip-path: inset(10% 0); }
  .promo--band .promo__photo { transform: scaleX(-1); transform-origin: 53% 50%; }
  .promo .promo__product { position: absolute; left: 50%; top: 2rem; width: auto; height: 28rem; translate: -50% 0; }
  .promo .promo__text { width: auto; margin: 0; padding: 3.2rem 2.4rem 4rem; }
  .promo--kidbase .h2 { white-space: normal; }
  .promo__text .h2 { margin-bottom: 1.6rem; }
  .promo__body { margin-bottom: 3.2rem; }

  /* KidBase מקרוב — נייד: מוצר דביק.
     הכיסא נתפס בחלק העליון של המסך, הכרטיסים עוברים מתחתיו בגלילה,
     ונקודת ציון על הכיסא עוברת למקום שהכרטיס הפעיל מדבר עליו (js/main.js). */
  .specs { gap: var(--head-gap); }
  .specs__stage { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
  .specs__links { display: none; }

  .specs__product {
    position: sticky; top: var(--header-h, 6.8rem); z-index: 3;
    height: 44svh;
    margin-inline: -1.6rem;
    /* רקע אטום שנמוג בתחתית — הכרטיסים "נבלעים" מתחת לכיסא */
    background: linear-gradient(var(--paper) 93%, rgba(255, 253, 250, 0));
  }
  .specs__product::before { width: min(30rem, 33svh); }
  .specs__product::after { width: min(35rem, 39svh); }
  .specs__chair { width: auto; height: 34svh; translate: 0 .8rem; }

  .specs__cards { display: flex; flex-direction: column; gap: 2rem; }
  .specs__cards > .spec {
    padding: 2.4rem 2rem 2.8rem;
    border-radius: 3rem;
    background: var(--paper);
    box-shadow: var(--shadow);
    opacity: .4; scale: .97;
    transition: opacity .4s ease, scale .4s ease, translate 1.2s cubic-bezier(.16, 1, .3, 1);
  }
  .specs__cards > .spec.is-current { opacity: 1; scale: 1; }

  .spec__title { font-size: 2.1rem; margin-bottom: .6rem; }
  .spec__note, .spec__chairs li, .spec__numbers dt, .spec__numbers dd span { font-size: 1.5rem; }
  .spec__chairs li { flex: 1 1 0; min-width: 0; gap: .8rem; padding: .8rem 1.2rem .8rem .8rem; }
  .spec__chairs img { height: 5.6rem; }

  /* בנייד השרטוט מוצג ישירות בכרטיס "מידות", בלי כפתור */
  .spec__toggle, .spec__close { display: none; }
  .spec__panel, .spec__panel[hidden] {
    display: block; position: static;
    width: auto; margin-top: 1.6rem; padding: 0;
    background: none; box-shadow: none; animation: none;
  }
  .spec__drawing { width: min(28rem, 100%); }
  .spec__numbers dd { font-size: 3.6rem; }

  .specs__hotspot {
    display: block;
    position: absolute; z-index: 2;
    width: 1.6rem; height: 1.6rem;
    margin: -.8rem 0 0 -.8rem;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 .3rem var(--paper), 0 .4rem 1rem rgba(46, 46, 47, .25);
    opacity: 0; scale: .4;
    transition: opacity .3s ease, scale .3s ease;
  }
  .specs__hotspot.is-on { opacity: 1; scale: 1; }
  .specs__hotspot::after {
    content: ""; position: absolute; inset: -.7rem;
    border: 2px solid var(--blue);
    border-radius: 50%;
    animation: hotspot-pulse 1.8s ease-out infinite;
  }
  @keyframes hotspot-pulse {
    from { opacity: .8; scale: .6; }
    to   { opacity: 0;  scale: 1.6; }
  }

  /* וידאו */
  .video { left: 0; gap: var(--head-gap); }
  /* 4:5, ובמסכים נמוכים מוגבל כך שהכותרת והסרטון נכנסים יחד במסך אחד */
  .video__frame { width: min(100%, 42rem, (100svh - 20rem) * .8); height: auto; aspect-ratio: 4 / 5; border-radius: 3rem; }
  .video__kid { left: auto; right: -1rem; top: auto; bottom: -2rem; width: 11rem; }

  /* מאפיינים */
  .features { gap: var(--head-gap); }
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .feature { min-height: 0; }
  .feature__head { height: 16rem; padding-top: 4.4rem; border-radius: 3rem 3rem 0 0; }
  .feature__head h3 { font-size: 2.4rem; }
  .feature__body { margin-top: -4rem; padding: 3.2rem 2rem 3.2rem; border-radius: 0 0 3rem 3rem; }

  /* חבילות */
  .pricing { gap: var(--head-gap); }
  .pricing__grid { grid-template-columns: 1fr; gap: 5.6rem; max-width: 48rem; }
  .plan { min-height: 0; }
  .plan__head { height: 20rem; padding-top: 4.4rem; border-radius: 3rem 3rem 0 0; }
  .plan__head h3 { font-size: 2.8rem; }
  .plan__body { margin-top: -5rem; padding: 1.6rem 2.4rem 5.6rem; border-radius: 0 0 3rem 3rem; }
  .plan__tagline { font-size: 2.1rem; }
  .plan__price { font-size: 6.4rem; }
  .plan__list, .plan--featured .plan__list { margin-top: 2rem; }

  /* אודות */
  .about { flex-direction: column-reverse; gap: var(--head-gap); }
  .about__text { flex: none; }
  .about__photo { width: min(44rem, 100%); border-radius: 3rem; }

  /* המלצות */
  .quotes { gap: var(--head-gap); }
  .quotes__viewport { padding-block: 2rem 3rem; }
  .quotes__track { gap: 1.6rem; }
  .quote { width: min(30rem, 80vw); min-height: 0; padding: 4.4rem 2.4rem 2.8rem; border-radius: 3rem; scale: .9; }
  .quote.is-active { scale: 1; }
  .quote::before { top: 0; inset-inline-start: 2.4rem; font-size: 9rem; }
  .quote footer { margin-top: 2rem; gap: 1.2rem; }
  .quote__avatar { width: 4.8rem; height: 4.8rem; font-size: 2.2rem; }
  .quote__role { font-size: 1.5rem; }
  .quotes__controls { width: min(72rem, 100% - 3.2rem); gap: 2.4rem; }
  .quotes__arrow { width: 44px; height: 44px; }

  /* שאלות */
  .faq { gap: var(--head-gap); }
  .faq__head { flex-direction: column; align-items: flex-start; gap: 2.4rem; }
  .faq__head > div { gap: 1.2rem; }
  .faq__blocks { width: 20rem; align-self: flex-end; margin-bottom: -4.4rem; margin-inline-end: 2.4rem; }
  .faq__list { width: 100%; gap: 1.6rem; }
  .faq__item { padding: 1.8rem 2rem; border-radius: 2.4rem; }
  .faq__item summary { font-size: 1.9rem; gap: 1.6rem; }
  .faq__item p { margin-top: 1.2rem; }

  /* יצירת קשר */
  .contact { min-height: 0; padding-bottom: 14rem; }
  .contact { --overhang: 14rem; }
  /* במסך צר המסכה נמתחת לגובה, והקשת העליונה (כפולה בעומקה) נראתה תלולה — כאן היא באותה צורה כמו התחתונה */
  .contact::before {
    -webkit-mask-image: url("../assets/img/deco/band-mask-mobile.svg");
            mask-image: url("../assets/img/deco/band-mask-mobile.svg");
  }
  .contact__girl { top: -14rem; width: 20rem; }
  .contact__letters { top: auto; bottom: 2rem; left: 50%; width: 130%; translate: -50% 0; }
  .contact__inner { width: min(64rem, 100% - 3.2rem); padding-top: 9rem; }
  .form { margin-top: 3.2rem; gap: 1.6rem; }
  .field { min-height: 5.6rem; padding-inline: 1.8rem; gap: 1.4rem; border-radius: 1.8rem; }
  .field__icon { width: 1.8rem; }
  .field input, .field textarea { font-size: 1.7rem; }
  .field--area { min-height: 12rem; }
  .field--area .field__icon { margin-top: 1.2rem; }

  /* פוטר */
  .site-footer { margin-top: 0; padding-block: 4rem 10rem; }
  .site-footer__inner { flex-direction: column; gap: 3.2rem; }
  .site-footer__links { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem 2.4rem; order: 2; }
  .site-footer__brand { gap: 1.6rem; order: 1; }
  /* בנייד שני חצאי הקישורים מתחברים לבלוק אחד ממורכז, והאייקונים אחריהם */
  .site-footer__end { display: contents; }
  .site-footer__end .site-footer__links { align-items: center; order: 3; margin-top: -2rem; }
  .site-footer__social { justify-content: center; gap: 2.4rem; order: 4; }

  .whatsapp { right: 1.6rem; bottom: 1.6rem; }
}

@media (max-width: 599px) {
  .features__grid { grid-template-columns: 1fr; }
  .promo__photo { height: 24rem; }
  .promo .promo__product { height: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- תצוגה מקדימה ממערכת הניהול (?preview=1) ---------- */
.is-preview body::after {
  content: 'תצוגה מקדימה — השינויים עוד לא נשמרו';
  position: fixed; bottom: 16px; left: 16px; z-index: 9999;
  padding: 8px 16px; border-radius: 999px;
  background: var(--orange); color: #fff;
  font: 700 14px/1.4 var(--font);
  box-shadow: var(--shadow);
  pointer-events: none;
}