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

   צבעים: כחול־לילה (אמון ויציבות), שנהב (שקט ונקי), זהב עמום (ערך ואיכות,
   ומשמש גם לכפתורי הפעולה), ירוק (אישור ופעולה: WhatsApp).

   שפה עיצובית: "שכבות שקופות". שלוש שכבות השירות (קמפיין, דף נחיתה, מדידה)
   מוצגות כלוחות זכוכית בתלת־ממד, וחוט זהב עובר דרכן: הדרך של פנייה אחת.
   אותו חוט חוזר לאורך העמוד (קו ההתקדמות למעלה, קו השלבים במקטע התהליך).
   ========================================================================== */

/* ---------- גופנים ----------
   קובצי הגופנים שמורים בתיקייה fonts, והאתר מגיש אותם בעצמו: בלי פנייה לשירות חיצוני,
   ובלי קובץ עיצוב נוסף שמעכב את הצגת העמוד. הדפדפן מוריד רק את הקבצים שהטקסט צריך. */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/frank-ruhl-libre-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-950: #060F1A;
  --navy-900: #0B1B2B;
  --navy-850: #0E2134;
  --navy-800: #12283D;
  --navy-700: #1F3A55;
  --ivory: #FBF9F4;
  --sand: #F4F0E7;
  --white: #FFFFFF;
  --ink: #111C28;
  --ink-soft: #3A4652;
  --muted: #56616D;
  --line: #E4DDCD;
  --line-strong: rgba(17, 28, 40, .16);
  --on-dark: #F4EFE4;
  --on-dark-soft: #C5CED8;
  --on-dark-muted: #A3AFBC;
  --line-dark: rgba(244, 239, 228, .13);
  --gold: #C9A55C;
  --gold-hover: #D8B872;
  --gold-deep: #9B7A2F;
  --gold-dark: #866522;
  --gold-light: #DFC68D;
  --gold-line: rgba(223, 198, 141, .38);
  --emerald: #0F6B4F;
  --red: #A8321F;
  --todo-bg: #FFF4CC;
  --todo-line: #B88700;
  --todo-ink: #4A3600;

  --radius-s: 12px;
  --radius: 18px;
  --radius-l: 28px;
  --shadow: 0 1px 2px rgba(7, 19, 31, .05), 0 24px 60px rgba(7, 19, 31, .10);
  --shadow-deep: 0 40px 100px rgba(0, 0, 0, .42);
  --shadow-navy: 0 34px 70px -26px rgba(11, 27, 43, .6);
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 4.75rem; /* ב-rem, כדי שהכותרת תגדל יחד עם הטקסט כשמגדילים אותו */
  --bar-h: 4.5rem;     /* גובה פס הכפתורים הקבוע בתחתית המסך, בנייד */
  --section-y: clamp(84px, 11vw, 156px);
  --sheet: clamp(22px, 3vw, 40px); /* עיגול הפינות העליונות של כל מקטע */

  --font-body: "Heebo", "Segoe UI", Arial, sans-serif;
  /* גופן הכותרות והמשקל שלו. משפחה אחת לכל האתר: קריאה שוטפת וטעינה מהירה. */
  --font-display: var(--font-body);
  --display-weight: 800;
  /* גופן הלוגו: אות עם תגים. משמש רק לשם העסק. */
  --font-logo: "Frank Ruhl Libre", "Times New Roman", serif;

  /* עקומות התנועה: יציאה רכה לכניסות, ועקומה רגילה למעברי צבע */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* צבע ההדגשה של "ליד" בשם העסק, וצבע מסגרת המיקוד. מתחלפים באזורים כהים. */
  --hl: var(--gold-dark);
  --focus: var(--gold-dark);

  --check-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2L12.8 4.8' fill='none' stroke='%23866522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2L12.8 4.8' fill='none' stroke='%23DFC68D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check: var(--check-on-light);
  --check-bg: rgba(201, 165, 92, .18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* אזורים כהים: הדגשות בזהב בהיר */
.site-header,
.hero,
.doc-hero,
.section-dark,
.price-band,
.promise,
.site-footer {
  --hl: var(--gold-light);
  --focus: var(--gold-light);
  --check: var(--check-on-dark);
  --check-bg: rgba(223, 198, 141, .14);
}
/* כרטיס בהיר שיושב בתוך אזור כהה */
.form-card {
  --hl: var(--gold-dark);
  --focus: var(--gold-dark);
}

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

html {
  scroll-behavior: smooth;
  /* הכותרת העליונה נעוצה: קישור פנימי או מיקוד במקלדת לא יסתתרו מתחתיה */
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.2;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -.025em;
  text-wrap: balance;
}
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gold-dark); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

::selection { background: #EADBB4; color: var(--ink); }

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

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -80px;
  inset-inline-start: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--navy-900); }

/* ---------- שם העסק, כתוב בכל מקום כמו בלוגו: אות עם תגים, "ליד" בזהב ---------- */
.brand-word {
  font-family: var(--font-logo);
  font-size: 1.14em;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand-hl { color: var(--hl); }

/* ---------- סימון "להשלמה" (מופיע רק כל עוד פרט חסר בקובץ site.config.js) ---------- */
.todo {
  display: inline-block;
  padding: 1px 9px;
  border: 1.5px dashed var(--todo-line);
  border-radius: 6px;
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-size: .9em;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color .25s var(--ease),
    color .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .35s var(--ease),
    transform .35s var(--ease-out),
    opacity .25s var(--ease);
}
.btn:active { transform: scale(.98); }

.btn-gold {
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, #D8B870 0%, var(--gold) 100%);
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 12px 30px -14px rgba(201, 165, 92, .65);
}
.btn-gold:hover {
  background: linear-gradient(180deg, #E4C886 0%, var(--gold-hover) 100%);
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 38px -14px rgba(201, 165, 92, .8);
}
.btn-ghost { border-color: rgba(244, 239, 228, .34); background: transparent; color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--gold-light); background: rgba(223, 198, 141, .08); color: #fff; }

/* ---------- כותרת עליונה ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  /* מקטע הפתיחה נמשך מתחת לכותרת, כך שהיא שקופה מעליו */
  margin-bottom: calc(var(--header-h) * -1);
  color: var(--on-dark);
}
/* הרקע של הכותרת: מופיע כשגוללים */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(8, 20, 33, .93);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.site-header.is-scrolled::before,
.site-header.nav-open::before,
.no-js .site-header::before { opacity: 1; }
.site-header.nav-open::before { background: #081421; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}

/* קו התקדמות הגלילה: מתמלא מימין לשמאל */
.scroll-progress {
  position: absolute;
  bottom: -1px;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(to left, var(--gold-deep), var(--gold-light));
  transform: scaleX(0);
  transform-origin: right center;
}

/* הלוגו: השם, ומתחתיו שורה קטנה ומרווחת */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: none;
}
.brand:hover { color: var(--on-dark); }
.brand-text { display: grid; justify-items: center; line-height: 1; }
.brand-name { font-size: 2.15rem; line-height: 1; }
.brand-tag {
  margin-top: 9px;
  padding-inline-end: .34em; /* מאזן את הרווח שריווח האותיות מוסיף לפני האות הראשונה, כדי שהשורה תהיה ממורכזת מתחת לשם */
  color: var(--on-dark-muted);
  font-size: .6rem;
  letter-spacing: .34em;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 2px; }
.site-nav ul a {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--on-dark-soft);
  font-size: .97rem;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.site-nav ul a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  inset-inline: 12px;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.site-nav ul a:hover,
.site-nav ul a[aria-current] { color: #fff; }
.site-nav ul a:hover::after,
.site-nav ul a[aria-current]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(244, 239, 228, .34);
  border-radius: 50%;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.nav-toggle svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- שלושה כפתורים שנמצאים תמיד על המסך: השארת פרטים, WhatsApp וטלפון ----------
   במחשב הם בכותרת העליונה, שנעוצה לראש המסך. במסך צר הם עוברים לפס קבוע בתחתית
   (ראו בסוף הקובץ). עד שממלאים מספרים ב-site.config.js, שני האייקונים מסומנים "להשלמה". */
.quick-actions { display: flex; align-items: center; gap: 8px; }
.quick-cta { min-height: 44px; padding: 0 22px; font-size: .97rem; }
.quick-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(244, 239, 228, .34);
  border-radius: 50%;
  color: var(--on-dark);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.quick-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick-icon[href]:hover { border-color: var(--gold-light); background: rgba(255, 255, 255, .1); color: #fff; }
.quick-whatsapp[href] { border-color: var(--emerald); background: var(--emerald); color: #fff; }
.quick-whatsapp[href]:hover { border-color: #0C5A42; background: #0C5A42; }
.quick-icon.is-todo {
  border: 1.5px dashed var(--todo-line);
  background: var(--todo-bg);
  color: var(--todo-ink);
}
/* שם הכפתור (WhatsApp, טלפון): בדרך כלל רק לקוראי מסך, ומוצג כטקסט כשהכפתור מתרחב */
.quick-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* כשהטופס עצמו על המסך (main.js מוסיף את המחלקה), הכפתור הראשי מוביל למקום שהגולש כבר נמצא בו.
   במחשב הוא נעלם ושומר על מקומו, כדי שהתפריט לא יזוז. בנייד ראו בסוף הקובץ. */
.quick-actions.is-at-form .quick-cta {
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}

/* ---------- רקעים כהים: זוהר זהב עדין וגרעיניות ---------- */
.hero-bg,
.section-dark::before,
.section-dark::after,
.hero-bg::after,
.site-footer::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.section-dark::before,
.section-dark::after,
.hero-bg::after,
.site-footer::after { content: ""; }
.section-dark::after,
.hero-bg::after,
.site-footer::after {
  background: var(--grain);
  opacity: .07;
}

/* ---------- פתיחה ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* גובה מסך מלא, ועוד החלק שהמקטע הבא מכסה */
  min-height: min(calc(100svh + var(--sheet)), 1040px);
  margin: 0;
  padding-top: calc(var(--header-h) + clamp(20px, 3.4vw, 48px));
  overflow: clip;
  background: linear-gradient(180deg, #071421 0%, var(--navy-900) 44%, #0D2135 100%);
  color: var(--on-dark);
}
.hero-bg {
  background:
    radial-gradient(46% 56% at 27% 50%, rgba(201, 165, 92, .17), transparent 72%),
    radial-gradient(44% 50% at 100% 0%, rgba(31, 58, 85, .5), transparent 70%);
}

.hero-grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px clamp(28px, 4vw, 56px);
  align-items: center;
  align-content: center;
}
.hero-copy { position: relative; z-index: 2; }

.hero h1 {
  margin-bottom: .5em;
  color: #fff;
  /* הגודל מכוון כך שבמחשב כל משפט נכנס בשורה אחת, לצד ההדמיה */
  font-size: clamp(2.3rem, 5.5vw - 19px, 3.55rem);
  line-height: 1.08;
}
/* כל שורה בכותרת עולה מתוך "חלון" משלה */
.h1-line {
  display: block;
  overflow: hidden;
  margin-block: -.1em -.18em;
  padding-block: .1em .18em;
}
.h1-inner { display: block; }
/* המשפט השני הוא כותרת משנה: קטן ודק יותר, באותו צבע. ההיררכיה נבנית מגודל וממשקל, לא מצבע. */
.h1-deck {
  margin-top: .34em;
  color: var(--on-dark);
  font-size: .72em;
  font-weight: 300;
  letter-spacing: -.015em;
}

.hero-lead {
  max-width: 33em;
  margin: 0;
  color: var(--on-dark-soft);
  font-size: clamp(1.08rem, 1.45vw, 1.24rem);
  line-height: 1.65;
}

.hero-buy {
  max-width: 36em;
  margin-top: clamp(22px, 2.8vw, 34px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--line-dark);
}
.hero-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin: 0;
}
.hero-price-amount {
  color: #fff;
  font-size: clamp(2.3rem, 3.7vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.hero-price-terms { color: var(--on-dark-soft); font-size: .98rem; line-height: 1.5; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 30px);
}

/* שורת התנאים בתחתית מקטע הפתיחה */
.hero-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 3.6vw, 48px);
  /* הריפוד התחתון כולל את החפיפה עם המקטע הבא */
  padding-block: 24px calc(clamp(26px, 3.2vw, 40px) + var(--sheet));
  border-top: 1px solid var(--line-dark);
}
.hero-facts-label {
  margin: 0;
  padding-top: 3px;
  color: var(--gold-light);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .16em;
  white-space: nowrap;
}
.hero-facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-facts li {
  padding-inline: clamp(14px, 1.8vw, 28px);
  border-inline-start: 1px solid var(--line-dark);
}
.hero-facts strong {
  display: block;
  color: var(--on-dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.hero-facts li span {
  display: block;
  margin-top: 4px;
  color: var(--on-dark-muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* תווית קטנה מעל כותרת */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--hl);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .16em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 36px;
  height: 1px;
  background: currentColor;
}

/* ==========================================================================
   ההדמיה במקטע הפתיחה
   שלושה לוחות בתצוגה איזומטרית (בלי פרספקטיבה, כמו שרטוט), וחוט שעובר דרכם: הדרך של ליד
   אחד. בכל שלב הלוח הפעיל מסתובב אל הגולש ומשחק את השלב שלו: חיפוש ומודעה, דף נחיתה,
   ומדידה. שלושה סיבובים (טופס, שיחה, WhatsApp), ואחריהם ההדמיה נחה.
   המשתנים --tilt, --spin ו--spread נשלטים מ-main.js (עכבר, גלילה), וכך גם --f של כל לוח:
   0 כשהוא שוכב בערימה, 1 כשהוא מופנה אל הגולש. בלי JavaScript, או כשהגולש ביקש להפחית
   תנועה, ההדמיה נשארת בתנוחה שמוגדרת כאן, והלוחות מלאים.
   בנייד, כשהתנועה פעילה, אותם לוחות מוצגים במבט מלמעלה: ראו "התאמה למסכים קטנים".
   ========================================================================== */
/* ההדגשה של לוח כשמצביעים על התווית שלו נכנסת ויוצאת ברכות */
@property --hover {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.hero-visual {
  --s: clamp(176px, min(18vw, 30vh), 260px);  /* צלע הלוח */
  --gap: calc(var(--s) * .56);                /* המרחק בין לוח ללוח */
  --spread: 1;                                /* כמה הלוחות מתרחקים זה מזה */
  --tilt: 57deg;
  --spin: 42deg;
  --grow: .25;                                /* בכמה גדל לוח שמופנה אל הגולש */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 172px;
  align-items: center;
  column-gap: 26px;
}

.stage {
  position: relative;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 2.06);
  /* קישוט בלבד: ה"שולחן" רחב מההדמיה, ואסור שיחסום לחיצות על מה שסביבה */
  pointer-events: none;
}
/* נקודת האפס של הערימה היא החוט. הלוחות מסתובבים סביבו. */
.stack {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--s) * .1);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateZ(var(--spin));
}
.stack > * { position: absolute; top: 0; left: 0; }

/* ה"שולחן" שמתחת לערימה */
.floor {
  width: calc(var(--s) * 2.6);
  height: calc(var(--s) * 2.6);
  margin: calc(var(--s) * -1.46) 0 0 calc(var(--s) * -1.3);
  background:
    radial-gradient(closest-side, rgba(2, 8, 15, .5) 0, rgba(2, 8, 15, 0) 44%),
    radial-gradient(closest-side, rgba(201, 165, 92, .2), rgba(201, 165, 92, 0) 66%),
    repeating-linear-gradient(0deg, rgba(223, 198, 141, .14) 0 1px, transparent 1px calc(var(--s) / 5)),
    repeating-linear-gradient(90deg, rgba(223, 198, 141, .14) 0 1px, transparent 1px calc(var(--s) / 5));
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 88%);
          mask-image: radial-gradient(closest-side, #000 20%, transparent 88%);
  transform: translateZ(calc(var(--gap) * var(--spread) * -1.8));
}

.plate {
  --f: 0;      /* 0: שוכב בערימה. 1: מופנה אל הגולש */
  --glow: 0;   /* ההבהוב ברגע שהליד מגיע אל הלוח */
  --hover: 0;  /* מצביעים על התווית של הלוח */
  /* לאן הלוח זז כשהוא מופנה אל הגולש, בצירי המסך: הצידה אל מרכז הבמה, למטה או למעלה כדי
     להישאר בתוכה, ואל הגולש כדי לעבור לפני כל השאר */
  --dx: calc(var(--s) * .1);
  --dy: 0px;
  --dz: calc(var(--s) * 2.6);
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: var(--s);
  height: var(--s);
  /* החוט חוצה כל לוח בשני שלישים מגובהו, והלוח מסתובב סביב הנקודה הזאת */
  margin: calc(var(--s) * -.66) 0 0 calc(var(--s) * -.5);
  padding: 2em;
  border: 1.5px solid rgba(223, 198, 141, calc(.5 + .5 * max(var(--glow), var(--hover))));
  border-radius: 2.2em;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 46%, rgba(201, 165, 92, .09) 100%),
    rgba(14, 33, 52, calc(.82 + .16 * var(--f)));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 0 3.6em -.4em rgba(223, 198, 141, calc(.5 * max(var(--glow), var(--hover)))),
    0 calc(2.4em * var(--f)) calc(4.6em * var(--f)) calc(-1.4em * var(--f)) rgba(0, 0, 0, .75);
  color: var(--on-dark);
  font-size: calc(var(--s) / 24);
  line-height: 1.2;
  transform-origin: 50% 66%;
  /* הסיבוב ההפוך מבטל את הטיית הערימה, כך שב-f=1 הלוח עומד ישר מול הגולש. ההזזה נתונה בצירי
     המסך ומומרת לצירי הערימה, כדי שהלוח ינוע בקו ישר ולא בקשת. השורה הראשונה היא לדפדפן שלא
     מכיר sin ו-cos ב-CSS: המקדמים בה הם הסינוס והקוסינוס של 57 ו-42 מעלות. */
  transform:
    translate3d(
      calc(var(--f) * (var(--dx) * .7431 + var(--dy) * .3644 + var(--dz) * .5612)),
      calc(var(--f) * (var(--dx) * -.6691 + var(--dy) * .4047 + var(--dz) * .6233)),
      calc(var(--i) * var(--gap) * var(--spread) + var(--drop, 0) * 1px + var(--f) * (var(--dy) * -.8387 + var(--dz) * .5446)))
    rotateZ(calc(var(--spin) * -1 * var(--f)))
    rotateX(calc(var(--tilt) * -1 * var(--f)))
    scale(calc(1 + var(--grow) * var(--f)));
  transform:
    translate3d(
      calc(var(--f) * (var(--dx) * cos(var(--spin)) + var(--dy) * sin(var(--spin)) * cos(var(--tilt)) + var(--dz) * sin(var(--spin)) * sin(var(--tilt)))),
      calc(var(--f) * (var(--dy) * cos(var(--spin)) * cos(var(--tilt)) - var(--dx) * sin(var(--spin)) + var(--dz) * cos(var(--spin)) * sin(var(--tilt)))),
      calc(var(--i) * var(--gap) * var(--spread) + var(--drop, 0) * 1px + var(--f) * (var(--dz) * cos(var(--tilt)) - var(--dy) * sin(var(--tilt)))))
    rotateZ(calc(var(--spin) * -1 * var(--f)))
    rotateX(calc(var(--tilt) * -1 * var(--f)))
    scale(calc(1 + var(--grow) * var(--f)));
  transition: --hover .4s var(--ease);
}
.plate-search { --i: 1; --dy: calc(var(--s) * .3); }
.plate-page { --i: 0; --dy: calc(var(--s) * .08); }
.plate-measure { --i: -1; --dy: calc(var(--s) * -.14); }
.hero-visual:has(.layers li:nth-child(1):hover) .plate-search,
.hero-visual:has(.layers li:nth-child(2):hover) .plate-page,
.hero-visual:has(.layers li:nth-child(3):hover) .plate-measure { --hover: 1; }

/* עובי הזכוכית: שכבה נוספת, מעט מתחת לכל לוח. היא נשארת במקומה כשהלוח מסתובב אל הגולש,
   ומסמנת מאיפה הוא יצא. */
.edge {
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) * -.66) 0 0 calc(var(--s) * -.5);
  border: 1.5px solid rgba(223, 198, 141, .24);
  border-radius: calc(var(--s) * .0917);
  background: rgba(6, 15, 26, .55);
  transform: translateZ(calc(var(--i) * var(--gap) * var(--spread) - 7px + var(--drop, 0) * 1px));
}

/* תוכן הלוחות: סכמטי בכוונה. המידות ב-em, לפי גודל הלוח. */
.p-bar {
  display: block;
  flex: none;
  width: var(--w, 80%);
  height: .9em;
  border-radius: .45em;
  background: rgba(244, 239, 228, .2);
}
.p-bar-title { width: 58%; height: 1.5em; border-radius: .5em; background: rgba(244, 239, 228, .44); }
.p-bar-gold { height: 1.2em; border-radius: .5em; background: linear-gradient(90deg, rgba(223, 198, 141, .95), rgba(201, 165, 92, .8)); }
.p-tag {
  flex: none;
  padding: .12em .7em;
  border: 1px solid var(--gold-light);
  border-radius: .5em;
  background: var(--gold-light);
  color: var(--navy-950);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
}
.p-tag-line { background: transparent; color: var(--gold-light); }
.p-ico {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* האדווה של לחיצה: main.js מפעיל אותה על מה שנלחץ */
.p-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5em;
  height: 5em;
  margin: -2.5em;
  border: 1.5px solid var(--gold-light);
  border-radius: 50%;
  background: rgba(223, 198, 141, .18);
  opacity: 0;
  pointer-events: none;
}

/* לוח 1: שורת החיפוש, והמודעה שמופיעה אחרי ההקלדה */
.p-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: .8em;
  height: 4.2em;
  padding-inline: 1.3em;
  border: 1px solid rgba(244, 239, 228, .28);
  border-radius: 2.1em;
  background: rgba(255, 255, 255, .06);
}
.p-query { --caret: 0; overflow: hidden; font-size: 1.35em; font-weight: 500; white-space: nowrap; }
/* סמן הכתיבה: מוצג רק בזמן ההקלדה */
.p-query::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-inline-start: .2em;
  background: var(--gold-light);
  vertical-align: -.16em;
  opacity: var(--caret);
}
.p-ad {
  --hit: 0;   /* המודעה נלחצה */
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: .9em;
  padding: 1.2em 1.4em;
  border: 1px solid rgba(223, 198, 141, calc(.3 + .7 * var(--hit)));
  border-radius: 1.4em;
  background: rgba(223, 198, 141, calc(.04 + .1 * var(--hit)));
}
.p-ad-top { display: flex; align-items: center; gap: .8em; }
.p-biz { font-size: 1.4em; font-weight: 600; white-space: nowrap; }

/* לוח 2: דף הנחיתה */
.p-chrome {
  display: flex;
  flex: none;
  align-items: center;
  gap: .45em;
  padding-bottom: .9em;
  border-bottom: 1px solid rgba(244, 239, 228, .15);
}
.p-chrome i { width: .75em; height: .75em; border-radius: 50%; background: rgba(244, 239, 228, .3); }
.p-chrome b { flex: 1; height: 1.4em; margin-inline-start: .7em; border-radius: .7em; background: rgba(255, 255, 255, .08); }
.p-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: .8em;
  height: 3em;
  padding-inline: .9em;
  border: 1px solid rgba(244, 239, 228, .26);
  border-radius: .8em;
  background: rgba(255, 255, 255, .04);
}
.p-field em { color: var(--on-dark-muted); font-size: 1.2em; font-style: normal; }
/* מה שהוקלד בשדה: פס שמתמלא מתחילת השדה */
.p-field i { display: block; width: 44%; height: .8em; border-radius: .4em; background: rgba(244, 239, 228, .72); transform-origin: 100% 50%; }
.p-field i.is-long { width: 58%; }
.p-actions { display: flex; flex: none; align-items: center; gap: .7em; margin-top: auto; }
.p-btn {
  position: relative;
  display: grid;
  flex: 1;
  place-items: center;
  height: 3.4em;
  border-radius: 1.7em;
  background: linear-gradient(180deg, #D8B870, var(--gold));
  color: var(--navy-950);
  box-shadow: 0 .7em 1.6em -.5em rgba(201, 165, 92, .7);
}
.p-btn span { font-size: 1.3em; font-weight: 700; white-space: nowrap; }
.p-icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border: 1px solid rgba(244, 239, 228, .3);
  border-radius: 50%;
}
.p-icon svg { width: 1.6em; height: 1.6em; fill: none; stroke: var(--on-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-icon-wa { border-color: var(--emerald); background: var(--emerald); }

/* לוח 3: הדוח. כל דרך פנייה בשורה משלה, והסימון מופיע כשפנייה נרשמת. */
.p-head { display: flex; flex: none; align-items: center; justify-content: space-between; }
.p-head span { color: var(--on-dark-soft); font-size: 1.25em; }
.p-rows { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: .7em; }
.p-row {
  --on: 1;   /* נרשמה פנייה בדרך הזאת */
  display: flex;
  align-items: center;
  gap: .9em;
  height: 3.5em;
  padding-inline: 1em;
  border: 1px solid rgba(223, 198, 141, calc(.16 + .6 * var(--on)));
  border-radius: .9em;
  background: rgba(201, 165, 92, calc(.13 * var(--on)));
}
.p-row > span { font-size: 1.4em; font-weight: 500; }
.p-slot {
  display: block;
  flex: none;
  width: 2em;
  height: 2em;
  margin-inline-start: auto;
  border: 1.5px dashed rgba(223, 198, 141, .42);
  border-radius: 50%;
}
.p-tick {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 1.5px var(--gold-light);
}
.p-tick svg { width: 62%; height: 62%; fill: none; stroke: var(--navy-950); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* החוט: ארבעה קטעים לאורך ציר הגובה, בין הלוחות ומעבר להם */
.thread {
  width: 2px;
  height: calc(var(--len) * var(--gap) * var(--spread) - 6px);
  margin: calc((var(--len) * var(--gap) * var(--spread) - 6px) / -2) 0 0 -1px;
  background: var(--gold-light);
  box-shadow: 0 0 10px 1px rgba(223, 198, 141, .5);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * var(--gap) * var(--spread))) rotateX(90deg);
}
.thread::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: rotateY(90deg);
}
.thread-top { background: linear-gradient(to bottom, var(--gold-light), rgba(223, 198, 141, 0)); box-shadow: none; }
.thread-bottom { background: linear-gradient(to top, var(--gold-light) 35%, rgba(223, 198, 141, 0)); box-shadow: none; }

/* הליד עצמו: נקודת אור שנעה לאורך החוט, עם שובל קצר מעליה. מוצגת רק כשיש תנועה. */
.pulse {
  width: 0;
  height: 0;
  opacity: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--z, 1.8) * var(--gap) * var(--spread)));
}
.pulse i {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--gold-light) 48%, rgba(223, 198, 141, 0) 72%);
  box-shadow: 0 0 24px 8px rgba(223, 198, 141, .5);
  /* מבטל את סיבוב הערימה, כדי שהנקודה תישאר עגולה מול הצופה */
  transform: rotateZ(calc(var(--spin) * -1)) rotateX(calc(var(--tilt) * -1));
}
.pulse i::before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 3px;
  height: 48px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(223, 198, 141, .85), rgba(223, 198, 141, 0));
}

.lead-chip {
  --lit: 0;   /* נדלק כשהליד מגיע אל סוף הדרך */
  position: absolute;
  top: calc(50% + var(--gap) * var(--spread) * 1.53);
  top: calc(50% + var(--gap) * var(--spread) * 1.82 * sin(var(--tilt)));
  left: calc(50% - var(--s) * .1);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 13px 4px 15px;
  border: 1px solid rgba(223, 198, 141, calc(.38 + .62 * var(--lit)));
  border-radius: 999px;
  background: rgba(8, 20, 33, .78);
  box-shadow: 0 0 0 calc(6px * var(--lit)) rgba(223, 198, 141, .12), 0 0 30px rgba(223, 198, 141, calc(.3 * var(--lit)));
  color: var(--on-dark);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  /* --in: כניסת התגית בפתיחה. --callout: דהייה בתחילת הגלילה. שניהם נשלטים מ-main.js. */
  opacity: calc(var(--in, 1) * var(--callout, 1));
  translate: -50% 0;
}
.lead-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(223, 198, 141, .2);
  scale: calc(1 + .5 * var(--lit));
}

/* שלוש התוויות: כל אחת מוצמדת לפינה של הלוח שלה, ועוקבת אחריה כשההדמיה זזה.
   --act: התווית של השלב הפעיל מוארת (main.js), ובמנוחה כולן מוארות. בתווית שאינה פעילה הקו
   והנקודה מתעמעמים, והטקסט עצמו רק מעט: כך הוא נשאר קריא, בניגודיות של 4.5 לפחות. */
.layers { position: relative; align-self: stretch; opacity: var(--callout, 1); }
.layers li {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  margin-top: -11px;
  line-height: 1.4;
  opacity: calc(.85 + .15 * var(--act, 1));
  translate: 0 calc(var(--s) * -.045 - var(--i) * var(--gap) * .8387);
  translate: 0 calc(
    var(--s) * cos(var(--tilt)) * (.34 * cos(var(--spin)) - .5 * sin(var(--spin)))
    - var(--i) * var(--gap) * var(--spread) * sin(var(--tilt))
  );
}
/* קו מוביל מהתווית אל פינת הלוח */
.layers li::before {
  content: "";
  position: absolute;
  top: 11px;
  inset-inline-start: calc(-18px - var(--s) * .05);
  width: calc(8px + var(--s) * .05);
  height: 1px;
  background: linear-gradient(to left, var(--gold-light), var(--gold-line));
  opacity: calc(.25 + .75 * var(--act, 1));
}
.layers li::after {
  content: "";
  position: absolute;
  top: 8.5px;
  inset-inline-start: calc(-23px - var(--s) * .05);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: calc(.25 + .75 * var(--act, 1));
}
.layer-num {
  margin-inline-end: 6px;
  color: var(--gold-light);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.layers strong { color: var(--on-dark); font-size: .98rem; font-weight: 600; white-space: nowrap; }
.layer-desc { display: block; color: var(--on-dark-muted); font-size: .88rem; line-height: 1.45; }

/* שלוש התחנות של המבט מלמעלה: מוצגות רק בנייד וכשהתנועה פעילה (ראו "התאמה למסכים קטנים") */
.stops { display: none; }

/* ---------- רשימות עם סימון ---------- */
.check-list li {
  position: relative;
  margin-bottom: 14px;
  padding-inline-start: 34px;
}
.check-list li:last-child { margin-bottom: 0; }
.check-list li::before {
  content: "";
  position: absolute;
  top: .34em;
  inset-inline-start: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--check-bg) var(--check) no-repeat center / 12px;
}

/* ---------- מקטעים ----------
   כל מקטע הוא "גיליון" עם פינות עליונות מעוגלות, שמונח מעט על המקטע שלפניו:
   שכבה על שכבה, כמו בהדמיה שבפתיחה. */
.section,
.site-footer {
  position: relative;
  margin-top: calc(var(--sheet) * -1);
  border-radius: var(--sheet) var(--sheet) 0 0;
}
.section { padding-block: var(--section-y) calc(var(--section-y) + var(--sheet)); background: var(--ivory); }
.section-sand { background: var(--sand); }
.section-dark {
  isolation: isolate;
  overflow: clip;
  background: var(--navy-900);
  color: var(--on-dark-soft);
}
.section-dark::before {
  background:
    radial-gradient(44% 56% at 10% 0%, rgba(201, 165, 92, .13), transparent 72%),
    radial-gradient(40% 50% at 100% 100%, rgba(31, 58, 85, .5), transparent 70%);
}
.section-dark h2,
.section-dark h3 { color: #fff; }
.section-dark a { color: var(--gold-light); }
.section-dark a:hover { color: #fff; }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head h2,
.about-copy h2,
.contact-copy h2 {
  margin-bottom: .4em;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.07;
}
.section-lead {
  max-width: 34em;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.65;
}
.section-dark .section-lead { color: var(--on-dark-soft); }

/* כותרת מקטע בשני טורים: הכותרת מימין, משפט ההסבר משמאל ובתחתית */
.section-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 20px clamp(28px, 6vw, 96px);
  align-items: end;
  max-width: none;
}
.section-head-split h2 { margin-bottom: 0; }
.section-head-split .section-lead { padding-bottom: .35em; }

.panel {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.panel h3 {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
.panel-tag {
  margin-inline-start: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(201, 165, 92, .18);
  color: var(--gold-dark);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.grid-note { margin: 22px 0 0; color: var(--muted); }

/* למי זה מתאים: ארבעת סוגי העסקים כשורות, עם שם גדול ותיאור לצידו */
.type-list { border-bottom: 1px solid var(--line-strong); }
.type-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px clamp(18px, 3vw, 40px);
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line-strong);
}
.type-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--gold-dark);
}
.type-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.type-row h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.type-row p { margin: 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.5; }

/* החבילה: אובייקט אחד. שלושת החלקים למעלה, מופרדים בקו דק, והמחיר בתחתית. */
.package {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
  overflow: hidden;
}
.package-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-part {
  padding: clamp(26px, 3.2vw, 44px);
  border-inline-start: 1px solid var(--line);
}
.package-part:first-child { border-inline-start: 0; }
.package-part h3 {
  margin: 22px 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
/* שלוש השכבות מההדמיה שבפתיחה: בכל חלק מודגשת השכבה שלו */
.layer-glyph { display: block; width: 56px; height: 56px; overflow: visible; }
.layer-glyph path {
  fill: var(--white);
  stroke: rgba(134, 101, 34, .45);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.layer-glyph.is-1 path:nth-child(3),
.layer-glyph.is-2 path:nth-child(2),
.layer-glyph.is-3 path:nth-child(1) { fill: var(--gold); stroke: var(--gold-deep); }

.money-label {
  margin: 0 0 12px;
  color: var(--hl);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .14em;
}
.price-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(28px, 5vw, 80px);
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.2vw, 44px);
  background: var(--navy-900);
  color: var(--on-dark-soft);
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.6vw, 4.6rem);
  font-weight: var(--display-weight);
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.price-terms { color: var(--muted); }
.price-band .price-amount { color: #fff; }
.price-band .price-terms { color: var(--on-dark-muted); }
.price-band-terms li {
  position: relative;
  padding-block: 9px;
  padding-inline-start: 34px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
}
.price-band-terms li:last-child { border-bottom: 0; }
.price-band-terms li::before {
  content: "";
  position: absolute;
  top: calc(9px + .34em);
  inset-inline-start: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--check-bg) var(--check) no-repeat center / 12px;
}
.price-band-terms { max-width: 22em; }

/* התשלום השני, מחוץ לחבילה: סימן הפלוס מחבר בין השניים */
.money-plus {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -15px auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--gold-dark);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}
.note {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  align-items: center;
  gap: 12px clamp(28px, 5vw, 80px);
  padding: clamp(26px, 3.2vw, 44px);
  border: 1.5px dashed rgba(155, 122, 47, .55);
  border-radius: var(--radius-l);
  background: var(--ivory);
}
.note h3 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.note > p { max-width: 60ch; margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* מקטע בשני טורים: כותרת נעוצה בצד, תוכן לצידה (תהליך, שאלות נפוצות) */
.split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.split .section-head { position: sticky; top: calc(var(--header-h) + 44px); margin-bottom: 0; }

/* התהליך: חוט זהב שמתקדם מלמעלה למטה עם הגלילה */
.steps { position: relative; counter-reset: step; }
.steps li {
  position: relative;
  padding-inline-start: 92px;
  padding-bottom: 46px;
  counter-increment: step;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--navy-900);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-light);
  font-size: 1.25rem;
  font-weight: 600;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .7s var(--ease-out);
}
.steps li::after {
  content: "";
  position: absolute;
  top: 56px;
  bottom: 0;
  inset-inline-start: 27.5px;
  width: 1px;
  background: var(--line);
}
.steps li:last-child::after { display: none; }
/* החוט עצמו. הגובה (--line-h) וההתקדמות (--p) נקבעים ב-main.js, ובלי תנועה הוא לא מוצג. */
.steps::before {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline-start: 27px;
  width: 2px;
  height: var(--line-h, 0);
  border-radius: 2px;
  background: linear-gradient(var(--gold), var(--gold-deep));
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
  pointer-events: none;
}
.steps h3 { margin: 0 0 6px; padding-top: 11px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.steps p { max-width: 56ch; margin: 0; color: var(--ink-soft); }
/* עם תנועה: שלב שהחוט עוד לא הגיע אליו מוצג בקו מתאר בלבד */
.motion .steps li:not(.is-active)::before {
  border-color: var(--line);
  background: var(--ivory);
  color: var(--gold-dark);
  transform: scale(.9);
}
/* העמעום עדין בכוונה: גם שלב שעוד לא נדלק נשאר קריא (ניגודיות מעל 4.5:1) */
.motion .steps li > * { transition: opacity .6s var(--ease); }
.motion .steps li:not(.is-active) > * { opacity: .78; }

/* המלצות של לקוחות: עד שישה כרטיסים, שלושה בשורה */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* שניים או ארבעה כרטיסים: שניים בשורה, כדי שלא יישאר כרטיס בודד בשורה משלו.
   רק במסך רחב: מתחת לזה מספר הטורים נקבע ב"התאמה למסכים קטנים". */
@media (min-width: 1061px) {
  .quote-grid:has(> :nth-child(2):last-child),
  .quote-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quote-card {
  display: flex;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(223, 198, 141, .08), rgba(18, 40, 61, .55) 70%);
}
.quote-card figure { display: flex; flex: 1; flex-direction: column; margin: 0; }
.quote-mark { width: 28px; margin-bottom: 20px; fill: var(--gold-light); }
.quote-card blockquote { margin: 0 0 auto; }
.quote-card blockquote p { margin: 0; color: var(--on-dark); font-size: 1.14rem; line-height: 1.6; }
.quote-card figcaption {
  /* גובה של שתי שורות גם כשאין שורת אזור, כדי שהקווים של כרטיסים שכנים יהיו באותו גובה */
  min-height: calc(17px + 2.83em);
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  line-height: 1.45;
}
.quote-who { display: block; color: #fff; font-weight: 700; }
.quote-where { display: block; color: var(--on-dark-muted); font-size: .95rem; }
/* המלצה יחידה: כרטיס אחד לכל הרוחב, והציטוט בגודל של כותרת */
.quote-card:only-child { grid-column: 1 / -1; padding: clamp(28px, 4.6vw, 64px); }
.quote-card:only-child .quote-mark { width: clamp(30px, 3.2vw, 42px); margin-bottom: clamp(20px, 2.4vw, 30px); }
.quote-card:only-child blockquote p {
  max-width: 24em;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.32;
}
.quote-card:only-child figcaption { margin-top: clamp(28px, 4vw, 48px); }
/* במסך רחב: הציטוט מימין, ומי שאמר אותו משמאל, מעבר לקו דק */
@media (min-width: 901px) {
  .quote-card:only-child figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 80px);
  }
  .quote-card:only-child blockquote { margin: 0; }
  .quote-card:only-child figcaption {
    grid-area: 1 / 2 / -1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 13em;
    margin: 0;
    padding: 0;
    padding-inline-start: clamp(28px, 3.4vw, 48px);
    border-top: 0;
    border-inline-start: 1px solid var(--line-dark);
  }
  .quote-card:only-child .quote-who { font-size: 1.14rem; }
}

/* מי אנחנו */
.about-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
}
.about-copy > p:not(.eyebrow) { max-width: 58ch; color: var(--ink-soft); font-size: 1.08rem; }
.about-copy > .about-lead:not(.eyebrow) {
  margin-bottom: 1.1em;
  color: var(--ink);
  font-size: clamp(1.18rem, 1.75vw, 1.42rem);
  line-height: 1.6;
}
.about-copy > p:last-child { margin-bottom: 0; }
.promise {
  padding: clamp(28px, 3.4vw, 44px);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--navy-900);
  color: var(--on-dark);
  box-shadow: var(--shadow-navy);
}
.promise h3 { border-bottom-color: var(--line-dark); color: #fff; }
.promise .check-list li {
  margin: 0;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-dark);
}
.promise .check-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.promise .check-list li::before { top: calc(14px + .34em); }

/* שאלות נפוצות: שורות מופרדות בקו דק. השאלה הפתוחה מורמת ככרטיס לבן, כמו שאר הכרטיסים באתר,
   וכך ברור איזו תשובה קוראים עכשיו. */
.faq-list {
  --faq-pad: clamp(16px, 2vw, 26px); /* הריפוד בצידי כל שורה: אותו ריפוד בשורה סגורה ובכרטיס, כדי שהטקסט לא יזוז */
  border-top: 1px solid var(--line-strong);
  transition: border-color .35s var(--ease);
}
.faq-list details {
  border-bottom: 1px solid var(--line-strong);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), border-radius .35s var(--ease);
}
.faq-list details[open]:not(.is-closing) {
  border-color: transparent;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
/* הקו שמעל הכרטיס נעלם יחד עם הקו שמתחתיו */
.faq-list details:has(+ details[open]:not(.is-closing)) { border-color: transparent; }
.faq-list:has(> details:first-child[open]:not(.is-closing)) { border-top-color: transparent; }
.faq-list summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px var(--faq-pad);
  font-size: clamp(1.1rem, 1.5vw, 1.26rem);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* רק במכשיר עם עכבר: במסך מגע הצבע היה נשאר על השאלה גם אחרי שנסגרה */
@media (hover: hover) {
  .faq-list summary:hover { color: var(--gold-dark); }
}
/* סימן פלוס בתוך עיגול. כשהשאלה פתוחה הוא מסתובב והופך לאיקס. */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 38px;
  height: 38px;
  margin-inline-start: auto;
  border: 1px solid rgba(17, 28, 40, .22);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
  transition: transform .5s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease);
}
.faq-list details[open]:not(.is-closing) summary::after {
  border-color: var(--navy-900);
  background-color: var(--navy-900);
  background-image: linear-gradient(var(--gold-light), var(--gold-light)), linear-gradient(var(--gold-light), var(--gold-light));
  transform: rotate(45deg);
}
.faq-answer { overflow: hidden; }
.faq-answer-inner { padding: 0 var(--faq-pad) 26px; color: var(--ink-soft); }
.faq-answer-inner p:last-child { margin-bottom: 0; }

/* ---------- יצירת קשר ---------- */
.section-contact::before {
  background:
    radial-gradient(50% 70% at 16% 50%, rgba(201, 165, 92, .16), transparent 72%),
    radial-gradient(40% 50% at 100% 0%, rgba(31, 58, 85, .5), transparent 70%);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
/* הטקסט נשאר במקומו בזמן שגוללים לאורך הטופס */
.contact-copy { position: sticky; top: calc(var(--header-h) + 36px); padding-top: clamp(0px, 2vw, 28px); }
.contact-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.contact-lead { max-width: 30em; color: var(--on-dark-soft); font-size: clamp(1.08rem, 1.4vw, 1.22rem); }

.form-card {
  padding: clamp(26px, 3.2vw, 44px);
  border-radius: var(--radius-l);
  background: var(--ivory);
  color: var(--ink);
  box-shadow: var(--shadow-deep);
}
.section-dark .form-card h3 {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.form-todo-note {
  padding: 10px 14px;
  border: 1.5px dashed var(--todo-line);
  border-radius: 10px;
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-size: .95rem;
}

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 500; }
.field .optional { color: var(--muted); font-weight: 400; }
.field input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #7C8794;
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:hover { border-color: var(--ink-soft); }
.field input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--gold-dark);
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 5px rgba(201, 165, 92, .2);
}
.field input[dir="ltr"] { text-align: right; }
.field [aria-invalid="true"] { border-color: var(--red); }
.field-error { margin: 6px 0 0; color: var(--red); font-size: .93rem; font-weight: 500; }
.form-privacy { margin-block: 4px 16px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
/* הכרטיס בהיר אבל יושב בתוך מקטע כהה: קישורים בתוכו חוזרים לצבע של רקע בהיר */
.section-dark .form-card a { color: var(--gold-dark); }
.section-dark .form-card a:hover { color: var(--ink); }
.form-card .btn { width: 100%; }
.form-card .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.form-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--sand);
  font-weight: 500;
}
.form-status:empty { display: none; }
.form-status.is-ok { border-color: var(--emerald); }
.form-status.is-error { border-color: var(--red); }

/* ---------- תחתית ---------- */
.site-footer {
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(48px, 7vw, 88px) 40px;
  background: var(--navy-950);
  color: var(--on-dark-muted);
  font-size: .93rem;
}
/* התחתית היא טור אחד ממורכז, בכל רוחב מסך: הלוגו, קו זהב דק, הקישורים והאותיות הקטנות.
   הלוגו עצמו סימטרי (השם ממורכז מעל שורה רחבה ממנו), ולכן מקומו במרכז. */
.footer-inner { text-align: center; }
/* זוהר זהב עדין מאחורי הלוגו */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(min(110%, 760px) 52% at 50% 30%, rgba(201, 165, 92, .085), transparent 70%);
}
/* הלוגו המלא בגדול, ביחסים של קובצי הלוגו שבתיקייה logo: שם העסק, ומתחתיו "קמפיינים בגוגל"
   באותיות מרווחות. כל המידות ב-em, כך שהיחסים נשמרים בכל גודל. רוחב הלוגו כ-2.25 מגודל
   האות, ולכן בגודל המינימלי הוא נכנס גם במסך ברוחב 320 פיקסלים. */
.footer-wordmark {
  display: grid;
  justify-items: center;
  width: fit-content;
  margin: 0 auto;
  color: var(--on-dark);
  font-size: clamp(7rem, 22vw, 13rem);
  line-height: .9;
}
.footer-wordmark .brand-word { font-size: 1em; }
/* הגודל, הריווח והמרחק מהשם נמדדו מול קובץ הלוגו, כך שהיחסים זהים לו */
.footer-tag {
  margin-top: 1.07em;
  /* ריווח האותיות מוסיף רווח גם לפני האות הראשונה. ריפוד שווה בצד השני ממרכז את השורה מתחת לשם. */
  padding-inline-end: .36em;
  color: var(--on-dark-muted);
  font-size: .195em;
  line-height: 1.2;
  letter-spacing: .36em;
  white-space: nowrap;
}
/* ברק מתכתי עדין באותיות הזהב: מעבר מלמעלה למטה, כולו בתוך גוני הזהב של האתר */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-wordmark .brand-hl {
    background-image: linear-gradient(180deg, #EEDDB0 22%, var(--gold-light) 48%, var(--gold) 82%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
/* במצב ניגודיות גבוהה של מערכת ההפעלה האותיות חוזרות לצבע רגיל */
@media (forced-colors: active) {
  .footer-wordmark .brand-hl { background-image: none; color: CanvasText; }
}
.footer-meta { max-width: 40rem; margin: clamp(32px, 4vw, 44px) auto 0; }
/* בין הלוגו לשאר עובר קו זהב דק שדועך בקצותיו */
.footer-meta::before {
  content: "";
  display: block;
  width: min(300px, 70%);
  height: 1px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 28%, var(--gold-line) 72%, transparent);
}
.footer-meta p { margin: 0 0 10px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-bottom: 14px; }
.footer-links a {
  display: inline-block;
  padding-block: 8px;
  color: var(--on-dark);
  font-size: 1rem;
}
.footer-links a:hover { color: var(--gold-light); }
.footer-links a[aria-current] { color: var(--gold-light); font-weight: 500; }
.footer-meta .footer-copy { margin: 0; }

/* ==========================================================================
   עמודי מסמך: הצהרת נגישות, תקנון ופרטיות
   ראש עמוד כהה עם הכותרת, ומתחתיו "גיליון" בהיר עם טור קריאה צר.
   ========================================================================== */
.doc-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--header-h) + clamp(36px, 6vw, 72px)) calc(clamp(40px, 6vw, 72px) + var(--sheet));
  background: linear-gradient(180deg, #071421 0%, var(--navy-900) 100%);
  color: var(--on-dark);
}
.doc-hero h1 {
  margin: 0 0 .35em;
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
}
.doc-hero p {
  max-width: 36em;
  margin: 0;
  color: var(--on-dark-soft);
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.65;
}
.doc-hero .doc-updated { margin-top: 18px; color: var(--on-dark-muted); font-size: .95rem; }

.doc { padding-block: clamp(44px, 6vw, 80px) calc(clamp(56px, 8vw, 112px) + var(--sheet)); }
/* טור הקריאה: צר מספיק לשורות של פחות מ-80 תווים */
.doc-body { max-width: 42rem; }
.doc-body h2 {
  margin: 2.1em 0 .6em;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
}
.doc-body > :first-child { margin-top: 0; }
.doc-body h3 { margin: 1.7em 0 .35em; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.doc-body p,
.doc-body li { color: var(--ink-soft); }
.doc-body ul { margin: 0 0 1em; padding-inline-start: 1.3em; list-style: disc; }
.doc-body ul li { margin-bottom: .55em; padding-inline-start: .2em; }
.doc-body ul li::marker { color: var(--gold-deep); }
.doc-body a { font-weight: 500; }

/* דרכי הפנייה: מתמלאות מקובץ ההגדרות, כמו כפתורי הקשר בעמוד הראשי */
.doc-contact {
  margin-block: 1.2em 1.4em;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius);
  background: var(--sand);
}
.doc-body .doc-contact ul { margin: 0; padding: 0; list-style: none; }
.doc-body .doc-contact li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 44px;
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--line-strong);
}
.doc-body .doc-contact li:first-child { border-top: 0; }
.doc-contact-kind { min-width: 7.5rem; color: var(--ink); font-weight: 600; }
.doc-contact a[href] { display: inline-block; padding-block: 8px; }

/* ==========================================================================
   תנועה
   התנועה מרוכזת במקום אחד: מקטע הפתיחה (כניסת הטקסט וההדמיה). בשאר העמוד
   התוכן פשוט נמצא שם, ומה שזז עונה לפעולה של הגולש: החוט במקטע התהליך
   מתקדם עם הגלילה, שאלה נפתחת בלחיצה, כפתור מגיב לעכבר.

   המחלקה motion נוספת ל-html רק כש-JavaScript פעיל והגולש לא ביקש להפחית
   תנועה.
   ========================================================================== */

/* הטקסט של מקטע הפתיחה מוצג מהרגע שהעמוד מצויר, ואינו מחכה לקובצי ה-JavaScript: מי שהגיע
   ממודעה רואה מיד את ההצעה, את המחיר ואת הכפתור, גם בחיבור איטי. לכן התנועה כאן ב-CSS בלבד,
   והטקסט אינו מתחיל שקוף: הכותרת עולה מתוך ה"חלון" שלה, והשאר רק מתיישב כמה פיקסלים למעלה.
   בסוף הכניסה האנימציה מפסיקה להשפיע על האלמנט. */
.motion [data-intro] { animation: intro-settle .8s var(--ease-out) backwards; }
.motion .h1-inner { animation: intro-line .75s var(--ease-out) backwards; }
.motion .h1-deck .h1-inner { animation-delay: .08s; }
.motion .hero-lead { animation-delay: .06s; }
.motion .hero-buy { animation-delay: .12s; }
.motion .hero-facts { animation: intro-fade .8s var(--ease) .35s backwards; }
@keyframes intro-settle { from { transform: translateY(16px); } }
@keyframes intro-line { from { transform: translateY(118%); } }
@keyframes intro-fade { from { opacity: 0; } }

/* ההדמיה התלת־ממדית נכנסת מ-main.js, ולכן היא מוסתרת עד שהוא רץ */
.motion .hero-visual { opacity: 0; }
/* רשת ביטחון: אם קובצי האנימציה לא נטענו, ההדמיה מוצגת בכל זאת אחרי רגע */
.motion:not(.motion-ready) .hero-visual { animation: show-anyway .01s linear 3s forwards; }
@keyframes show-anyway { to { opacity: 1; } }

/* ==========================================================================
   התאמה למסכים קטנים
   ========================================================================== */
@media (max-width: 1200px) {
  /* בין נייד למסך רחב התפריט מצטופף מעט, כדי לפנות מקום לשלושת הכפתורים שבכותרת */
  .site-nav ul a { padding-inline: 8px; font-size: .93rem; }
  .header-inner { gap: 14px; }
  /* כאן הלוחות קטנים, ולכן לוח שמופנה אל הגולש גדל יותר, כדי שהטקסט שעליו יישאר קריא */
  .hero-visual { --grow: .35; }
}
/* כך גם בחלון רחב ונמוך, שבו גובה המסך הוא שמקטין את הלוחות */
@media (min-width: 1001px) and (max-height: 720px) {
  .hero-visual { --grow: .35; }
}

@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }

  /* שלושת הכפתורים עוברים מהכותרת לפס קבוע בתחתית המסך */
  .quick-actions {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-dark);
    background: rgba(8, 20, 33, .95);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
  .quick-cta { flex: 1; min-height: 52px; font-size: 1rem; }
  .quick-icon { width: 52px; height: 52px; }
  /* כשהטופס על המסך, הכפתור הראשי יוצא מהפס (כפתור השליחה של הטופס נמצא ממש מעליו, ושני
     כפתורי זהב צמודים מבלבלים), ושני הכפתורים האחרים מתרחבים ומציגים את שמם */
  .quick-actions.is-at-form .quick-cta { display: none; }
  .quick-actions.is-at-form .quick-icon {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    border-radius: 999px;
    font-weight: 700;
  }
  .quick-actions.is-at-form .quick-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  /* הכפתור הראשי נמצא כאן תמיד על המסך, בפס התחתון. הכפתורים הזהים שבתוך העמוד מוסתרים,
     כדי שיהיה על המסך כפתור ראשי אחד ולא שניים. */
  .hero-actions .btn-gold,
  .price-band .btn-gold { display: none; }
  /* הפס לא יסתיר אלמנט שהמיקוד עבר אליו, ולא את סוף העמוד */
  html { scroll-padding-bottom: calc(var(--bar-h) + 16px); }
  .site-footer { padding-bottom: calc(40px + var(--bar-h) + env(safe-area-inset-bottom)); }

  .js .site-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100svh - var(--header-h) - var(--bar-h));
    margin: 0;
    padding: 8px var(--gutter);
    overflow-y: auto;
    border-bottom: 1px solid var(--line-dark);
    background: #081421;
    box-shadow: 0 30px 50px rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .45s var(--ease-out), visibility 0s linear .45s;
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav ul a {
    padding: 15px 2px;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
    color: var(--on-dark);
    font-size: 1.15rem;
    font-weight: 500;
  }
  /* אחרי הקישור האחרון אין קו: התפריט נסגר בקו התחתון של עצמו, בלי שורה ריקה ביניהם */
  .js .site-nav ul li:last-child a { border-bottom: 0; }
  .js .site-nav ul a::after { display: none; }
  .js .site-nav ul a[aria-current] { color: var(--gold-light); }

  /* בלי JavaScript התפריט נשאר גלוי ונשבר לשורה נוספת */
  .no-js .site-header { height: auto; margin-bottom: 0; }
  .no-js .nav-toggle { display: none; }
  .no-js .header-inner,
  .no-js .site-nav,
  .no-js .site-nav ul { flex-wrap: wrap; }
  .no-js .header-inner { padding-block: 10px; }
  .no-js .hero { padding-top: clamp(28px, 5vw, 48px); }

  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* מספר אי־זוגי של כרטיסים: האחרון נפרש על שני הטורים, ולא נשאר לבד בחצי שורה */
  .quote-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual {
    --s: clamp(176px, 30vw, 240px);
    --grow: .3;
    justify-content: center;
    margin-top: 12px;
  }
  .hero h1 { font-size: clamp(2.05rem, 7.4vw, 3.5rem); }

  .hero-facts { grid-template-columns: minmax(0, 1fr); }
  .hero-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hero-facts li:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 900px) {
  .split,
  .about-grid,
  .contact-grid,
  .package-parts,
  .section-head-split,
  .note { grid-template-columns: minmax(0, 1fr); }

  .split .section-head,
  .contact-copy { position: static; }
  .section-head-split .section-lead { padding-bottom: 0; }
  .package-part { border-inline-start: 0; border-top: 1px solid var(--line); }
  .package-part:first-child { border-top: 0; }
  .price-band { grid-template-columns: auto minmax(0, 1fr); }
  .price-band .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  /* בנייד בלי תנועה: הערימה, והתוויות יורדות אל מתחתיה כרשימה רגילה */
  .hero-visual {
    --s: clamp(164px, 52vw, 228px);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .layers { width: 100%; margin-top: 18px; opacity: 1; }
  .layers li {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    margin: 0;
    padding-block: 13px;
    border-top: 1px solid var(--line-dark);
    opacity: 1;
    translate: none;
  }
  .layers li::before,
  .layers li::after { display: none; }
  .layer-num { grid-row: span 2; margin: 0; padding-top: 3px; }

  /* בנייד כשהתנועה פעילה: אותם לוחות במבט מלמעלה. שלוש תחנות, מתחתיהן השלב הנוכחי מתוך הרשימה,
     ומתחתיו הלוחות כערימה שטוחה: הלוח שסיים מתרומם, והבא מתגלה מתחתיו (main.js). כך הטקסט שעל
     הלוח גדול וישר, וההדמיה נמוכה יותר. הרשימה נשארת שלמה לקורא מסך, ורק שלב אחד ממנה נראה. */
  .motion .hero-visual {
    --s: min(calc(100vw - 2 * var(--gutter)), 312px);
    row-gap: 12px;
  }
  .motion .stops {
    --p: 0;   /* ההתקדמות לאורך הקו: 0 בתחנה הראשונה, 1 באחרונה */
    position: relative;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--s);
  }
  .stops-line,
  .stops-line::after { position: absolute; top: 50%; inset-inline: 22px; height: 2px; margin-top: -1px; }
  .stops-line { background: var(--gold-line); }
  .stops-line::after {
    content: "";
    inset-inline: 0;
    background: var(--gold-light);
    box-shadow: 0 0 10px 1px rgba(223, 198, 141, .5);
    transform: scaleX(var(--p));
    transform-origin: 100% 50%;
  }
  /* הליד: אותה נקודת אור, שנעה כאן לאורך הקו מתחנה לתחנה. היא עוברת מאחורי התחנות ולא
     מעליהן, כדי שלא תכסה את הספרה: בתחנה שאליה הגיעה רואים רק את ההילה שלה סביב העיגול. */
  .stops-dot {
    position: absolute;
    top: 50%;
    right: 22px;
    z-index: 0;
    width: 16px;
    height: 16px;
    margin: -8px -8px 0 0;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 22%, var(--gold-light) 48%, rgba(223, 198, 141, 0) 72%);
    box-shadow: 0 0 24px 8px rgba(223, 198, 141, .5);
    transform: translateX(calc((var(--s) - 44px) * -1 * var(--p)));
    pointer-events: none;
  }
  .stop {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold-light);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color .25s var(--ease);
  }
  .stop::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border: 1.5px solid var(--gold-line);
    border-radius: 50%;
    background-color: var(--navy-850);
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
  }
  /* התחנה שהליד נמצא בה מתמלאת בזהב, והספרה שלה כהה */
  .stop[aria-current="true"] { color: var(--navy-950); }
  .stop[aria-current="true"]::before { border-color: var(--gold-light); background-color: var(--gold-light); }
  .stop:focus-visible { border-radius: 50%; }

  .motion .layers { order: 2; display: grid; width: var(--s); margin-top: 0; text-align: center; }
  .motion .layers li { grid-area: 1 / 1; display: block; padding: 0; border: 0; opacity: var(--act, 0); }
  /* עד ש-main.js רץ מוצג השלב הראשון */
  .motion .layers li:first-child { --act: 1; }
  .motion .layer-num { display: none; }

  .motion .stage {
    order: 3;
    display: grid;
    justify-items: center;
    row-gap: 14px;
    width: var(--s);
    height: auto;
  }
  .motion .stack {
    position: relative;
    top: auto;
    left: auto;
    width: var(--s);
    height: calc(var(--s) * .88 + 26px);
    transform: none;
    transform-style: flat;
  }
  .motion .floor,
  .motion .thread,
  .motion .edge,
  .motion .pulse { display: none; }
  .motion .plate {
    height: calc(var(--s) * .88);
    margin: 0;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 46%, rgba(201, 165, 92, .09) 100%),
      var(--navy-850);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1.6em 3.2em -1.6em rgba(0, 0, 0, .8);
    transform: none;
    transform-origin: 50% 100%;
  }
  .motion .plate-search { z-index: 3; }
  .motion .plate-page { z-index: 2; }
  .motion .plate-measure { z-index: 1; }
  .motion .lead-chip { position: static; opacity: var(--in, 1); translate: none; }

  /* המעבר מרשימת השכבות אל "על השולחן": הרשימה נסגרת בקו משלה, צמוד לשורה האחרונה, ואחרי
     רווח נפתחת הקבוצה הבאה בתווית עם קו זהב קצר, כמו התווית שבראש המקטע. בלי זה נשאר בין
     שתי הרשימות קו בודד שתלוי באוויר, והתווית נראית כמו שורה ריקה. */
  .layers li:last-child { border-bottom: 1px solid var(--line-dark); }
  .motion .layers li:last-child { border-bottom: 0; }
  .hero-facts { margin-top: 0; padding-top: 32px; border-top: 0; }
  .hero-facts-label { display: flex; align-items: center; gap: 14px; }
  .hero-facts-label::before {
    content: "";
    flex: none;
    width: 36px;
    height: 1px;
    background: currentColor;
  }
}

@media (max-width: 560px) {
  :root { --header-h: 4.125rem; }
  .brand-name { font-size: 1.95rem; }
  .brand-tag { display: none; }

  .hero-actions .btn,
  .price-band .btn { width: 100%; }
  .hero-price-terms br { display: none; }

  /* בנייד השם והתיאור של כל סוג עסק זה מתחת לזה, לצד האייקון */
  .type-row { grid-template-columns: auto minmax(0, 1fr); }
  .type-icon { grid-row: span 2; width: 48px; height: 48px; }
  .type-icon svg { width: 24px; height: 24px; }
  .quote-grid,
  .price-band { grid-template-columns: minmax(0, 1fr); }
  .quote-card figcaption { min-height: 0; }
  .steps li { padding-inline-start: 72px; }
  .steps li::before { width: 48px; height: 48px; font-size: 1.1rem; }
  .steps li::after { top: 48px; inset-inline-start: 23.5px; }
  .steps::before { top: 24px; inset-inline-start: 23px; }
  .steps h3 { padding-top: 8px; font-size: 1.25rem; }
  .faq-list summary { padding-block: 20px; }
  /* הטופס מצטמצם כך שכולו, כולל כפתור השליחה, נכנס במסך של טלפון בלי גלילה.
     גודל האות בשדות נשאר מעל 16 פיקסלים, אחרת iOS מגדיל את התצוגה כשנוגעים בשדה. */
  .form-card { padding: 20px 18px; border-radius: 22px; }
  .section-dark .form-card h3 { margin-bottom: 10px; font-size: 1.4rem; }
  .form-todo-note { margin-bottom: 12px; padding: 8px 12px; font-size: .88rem; line-height: 1.5; }
  .field { margin-bottom: 11px; }
  .field label { margin-bottom: 3px; line-height: 1.4; }
  .field input { padding: 10px 14px; line-height: 1.5; }
  .form-privacy { margin-block: 2px 12px; font-size: .86rem; line-height: 1.5; }
  .form-card .btn { min-height: 52px; }
}

@media (max-width: 420px) {
  .hero-facts ul { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hero-facts li { padding: 12px 0; border-inline-start: 0; border-top: 1px solid var(--line-dark); }
  /* השורה הראשונה באה ישר אחרי התווית, בלי קו ביניהן */
  .hero-facts li:first-child { padding-top: 0; border-top: 0; }
}

/* מסך נמוך: הטופס מצטופף עוד מעט, כדי שכפתור השליחה ייכנס במסך בלי גלילה.
   הראשון למחשב נייד קטן, והשני לטלפון קטן שסרגלי הדפדפן תופסים בו חלק מהגובה. */
@media (min-width: 561px) and (max-height: 720px) {
  .form-card { padding-block: 24px; }
  .field { margin-bottom: 12px; }
}
@media (max-width: 560px) and (max-height: 600px) {
  html { scroll-padding-top: calc(var(--header-h) + 8px); }
  .form-card { padding-block: 14px; }
  .section-dark .form-card h3 { margin-bottom: 6px; font-size: 1.25rem; }
  .field { margin-bottom: 8px; }
  .form-privacy { margin-block: 0 8px; }
  .form-card .btn { min-height: 48px; }
}

/* מסך צר וגם נמוך: טלפון במצב שוכב, או תצוגה שהוגדלה ל-200%.
   הכותרת העליונה נגללת עם העמוד ופס הכפתורים מצטמצם, כדי להשאיר מקום לתוכן. */
@media (max-width: 1060px) and (max-height: 480px) {
  :root { --bar-h: 3.75rem; }
  html { scroll-padding-top: 16px; }
  .site-header { position: relative; }
  .quick-actions { padding-block: 8px calc(8px + env(safe-area-inset-bottom)); }
  .quick-cta { min-height: 44px; }
  .quick-icon { width: 44px; height: 44px; }
}