@charset "utf-8";

/* ============================================================
   Heebo — מתארח אצלנו ולא אצל גוגל.
   הקישור ל-fonts.googleapis.com חסם רינדור ~400ms, ובנוסף חשף לגוגל את
   כתובת ה-IP של כל מבקר. הורדו רק תת-הקבוצות שהאתר באמת צריך (עברית,
   לטינית ולטינית מורחבת) בארבעת המשקלים — 12 קבצים, ‏11–29KB כל אחד.
   ============================================================ */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/heebo-hebrew-400.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: 400;
  font-display: swap;
  src: url(/fonts/heebo-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/heebo-latin-400.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: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/heebo-hebrew-500.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: 500;
  font-display: swap;
  src: url(/fonts/heebo-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/heebo-latin-500.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: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/heebo-hebrew-700.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: 700;
  font-display: swap;
  src: url(/fonts/heebo-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/heebo-latin-700.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: 'Heebo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/heebo-hebrew-800.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: 800;
  font-display: swap;
  src: url(/fonts/heebo-latin-ext-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/heebo-latin-800.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;
}

/* ============================================================
   אחד ועוד אחד — גיליון הסגנון של האתר
   כיוון ג' (המוצר כגיבור חזותי) + רצועת הלוח מ-ב' + האוויר של א'

   שני כללים מחייבים לאורך כל הקובץ:
   1. כל המידות ב-rem, לא ב-px.
   2. כל התכונות הכיווניות לוגיות (inline/block) ולא ימין/שמאל —
      כדי שהגרסה האנגלית תרוץ על אותו גיליון בדיוק, בלי גיליון שני.
   ============================================================ */

:root {
  /* פלטה — נעולה על הלוגו */
  --teal:        #017389;
  --teal-dark:   #015C6D;
  --turq:        #31A3B9;
  --coral:       #C0866D;
  --coral-dark:  #9B634B;
  --paper:       #FFF4ED;

  --ink:         #16232B;
  --ink-soft:    #45555F;
  --ink-faint:   #5D6C75;
  --line:        #DCD3CC;
  --line-soft:   #EDE5DE;
  --white:       #FFFFFF;
  --night:       #12242B;

  --wrap:        75rem;
  --radius:      0.5rem;

  --shadow-sm:   0 0.0625rem 0.125rem rgba(22, 35, 43, .08);
  --shadow-lg:   0 1.5rem 3rem rgba(22, 35, 43, .14);

  --fs-h1:       clamp(2.125rem, 1.35rem + 2.2vw, 2.875rem);
  --fs-h2:       clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-num:      clamp(1.875rem, 1.15rem + 2.2vw, 3rem);

  --sec-pad:     clamp(3rem, 1.5rem + 4vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Heebo", "Assistant", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}

img { max-inline-size: 100%; block-size: auto; display: block; }

a { color: var(--teal); text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; }
a:hover { color: var(--teal-dark); }

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }

/* ------------- עזרים ------------- */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
  z-index: 100; background: var(--teal); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
}
.skip:focus { inset-block-start: 0; color: var(--white); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 0.1875rem solid var(--turq);
  outline-offset: 0.1875rem;
  border-radius: 0.1875rem;
}

.eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-block-end: 0.75rem;
}
.arw { margin-inline-start: 0.4rem; display: inline-block; }
.sec-lede {
  font-size: 1.0625rem; color: var(--ink-soft);
  max-inline-size: 46rem; margin-block-start: 0.875rem;
}
.placeholder {
  border-inline-start: 0.1875rem solid var(--coral);
  padding-inline-start: 0.75rem;
  color: var(--ink-faint);
}

/* ------------- כפתורים ------------- */
.btn {
  display: inline-block;
  padding: 0.8125rem 1.75rem;
  border: 0.09375rem solid transparent;
  border-radius: var(--radius);
  font: inherit; font-weight: 700; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sm { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; }
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }
.btn-ghost { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-ghost:hover { background: var(--teal); color: var(--white); }

/* ============================================================
   סרגל עליון
   ============================================================ */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(0.5rem);
  border-block-end: 0.0625rem solid var(--line-soft);
}
.topbar-in { display: flex; align-items: center; gap: 1.5rem; min-block-size: 4.25rem; }

.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--ink); }
.brand img { inline-size: 2.5rem; block-size: 2.5rem; }
.brand-name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; }

/* עוטף. ה-rem שב-media query נמדד מול גופן הבסיס ההתחלתי ולא מול המוגדל,
   ולכן הגדלת טקסט ל-200% (WCAG 1.4.4) אינה מזיזה את נקודת השבירה לנייד —
   בלי עטיפה הפריטים פשוט גולשים מהמסך. עטיפה מגביהה את הכותרת ולא שוברת. */
.nav { display: flex; align-items: center; gap: 1.25rem; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.nav ul { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  padding-block: 0.375rem;
  border-block-end: 0.125rem solid transparent;
}
.nav a:hover { color: var(--teal); border-block-end-color: var(--turq); }
.nav a[aria-current="page"] { color: var(--teal); border-block-end-color: var(--teal); }
.nav-door { display: none; }

.lang {
  font-weight: 700; font-size: 0.8125rem; color: var(--ink-soft);
  border: 0.0625rem solid var(--line); border-radius: var(--radius);
  padding: 0.25rem 0.625rem; text-decoration: none; white-space: nowrap;
}
.lang:hover { border-color: var(--teal); color: var(--teal); }

.burger {
  display: none; margin-inline-start: auto;
  inline-size: 2.75rem; block-size: 2.75rem;
  background: none; border: 0; cursor: pointer; padding: 0.6875rem 0.5rem;
}
.burger span { display: block; block-size: 0.125rem; background: var(--ink); border-radius: 0.0625rem; }
.burger span + span { margin-block-start: 0.375rem; }

/* ============================================================
   גיבור
   ============================================================ */
.hero { background: var(--paper); padding-block: clamp(2rem, 1rem + 3vw, 3.25rem); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 2.5vw, 3.25rem);
}
.hero-plain .hero-in { grid-template-columns: minmax(0, 1fr); }
.hero-plain { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero-plain .hero-text { max-inline-size: 46rem; }

.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; margin-block-end: 1rem; }
.hero h1 em { font-style: normal; color: var(--teal); }
.lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  color: var(--ink-soft); max-inline-size: 30rem;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-block-start: 2rem; }

/* ---- מסגרת הצילום + מחליף התמונות ----
   הצילום מוצג *במלואו* ומוטה אחורה, ולא חתוך וצמוד לקצה.
   ההטיה עושה שתי עבודות: היא מרחיקה את המראה מ"צילום מסך גולמי",
   והיא הופכת את חוסר הקריאות של הטקסט הזעיר מפגם לבחירה. */
.hero-shot { margin: 0; position: relative; }

.slide { margin: 0; }

/* כל השקופיות יושבות באותו תא ברשת. כך גובה האזור נקבע לפי הגבוהה
   מביניהן והדף אינו קופץ בהחלפה — גם כשלשתי המערכות יחס מסך שונה.
   visibility ולא display, כדי שהמוסתרות באמת יוסתרו מקורא מסך. */
.rotator { display: grid; grid-template-rows: auto auto; }
.rotator .slide { grid-row: 1; grid-column: 1; visibility: hidden; opacity: 0; }
.rotator .slide.is-on { visibility: visible; opacity: 1; transition: opacity .4s ease; }
.rotator .rotator-controls { grid-row: 2; grid-column: 1; }
@media (prefers-reduced-motion: reduce) { .rotator .slide { transition: none; } }

.shot-link { display: block; text-decoration: none; color: inherit; }

.shot-stage {
  position: relative;
  perspective: 100rem;
  padding-block: 1rem;
  padding-inline: 0.5rem 1.75rem;   /* מקום לתווית שיוצאת מהמסגרת */
  display: grid; align-content: center;
  block-size: 100%;
}

/* --tilt מוגדר פעם אחת ומתהפך בגרסה האנגלית, כדי שהצד הקרוב לטקסט
   יהיה תמיד הצד שמתקדם אל הצופה. */
.shot-stage { --tilt: 7deg; --slide-x: 0.5rem; }
[dir="ltr"] .shot-stage { --tilt: -7deg; --slide-x: -0.5rem; }

.shot-frame {
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--white);
  overflow: hidden;
  transform: rotateY(var(--tilt)) rotateX(2.5deg) translateX(var(--slide-x));
  transform-style: preserve-3d;
  box-shadow:
    0 1.75rem 3.5rem rgba(22, 35, 43, .18),
    0 0.25rem 0.75rem rgba(22, 35, 43, .08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.shot-link:hover .shot-frame,
.shot-link:focus-visible .shot-frame {
  transform: rotateY(calc(var(--tilt) / 2)) rotateX(1deg) translateX(0);
  box-shadow: 0 2.25rem 4.5rem rgba(22, 35, 43, .22);
}
.shot-chrome {
  display: flex; gap: 0.375rem; align-items: center;
  padding: 0.5rem 0.75rem;
  background: #F3EDE8;
  border-block-end: 0.0625rem solid var(--line);
}
.shot-chrome span { inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: 50%; background: var(--line); }

/* התמונה במלואה — בלי חיתוך ובלי הצמדה לשפת החלון */
.shot-frame img { inline-size: 100%; block-size: auto; display: block; }

/* רוטטור עם הרבה שקופיות: לכל צילום יחס רוחב אחר, ובלי נעילה המסגרת קופצת
   בגובה בכל החלפה. יחס אחיד מלמעלה — הכותרת והסרגל של המערכת נשארים בפריים,
   וזה גם מה שכבר קורה במסך צר. שקופית יחידה ממשיכה להיות מוצגת במלואה.
   העיגון לימין ולא למרכז: כל הצילומים הם של מערכות בעברית, והכותרת והתפריט
   שלהן יושבים בצד ימין — עיגון למרכז היה חותך בדיוק אותם. */
.rotator-uniform .shot-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: right top; }

/* תווית שם המערכת — יושבת על פינת המסגרת, כדי שברור מה רואים */
.shot-label {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  display: flex; flex-direction: column; gap: 0.0625rem;
  background: var(--white);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  box-shadow: var(--shadow-sm);
  max-inline-size: 14rem;
}
.shot-label b { font-size: 0.9375rem; font-weight: 800; line-height: 1.25; }
.shot-label i { font-style: normal; font-size: 0.75rem; color: var(--ink-faint); line-height: 1.3; }

.slide figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--ink-faint); }

.rotator-controls {
  display: flex; align-items: center; gap: 0.75rem;
  margin-block-start: 0.75rem;
}
.dots { display: flex; gap: 0.375rem; }
.dot {
  inline-size: 0.5rem; block-size: 0.5rem; padding: 0;
  border: 0.0625rem solid var(--ink-faint); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.dot.is-on { background: var(--teal); border-color: var(--teal); }
.rot-pause {
  inline-size: 1.5rem; block-size: 1.5rem; padding: 0;
  border: 0.0625rem solid var(--line); border-radius: 50%;
  background: var(--white); cursor: pointer;
  display: grid; place-items: center;
}
.ico-pause {
  inline-size: 0.375rem; block-size: 0.5rem;
  border-inline: 0.125rem solid var(--ink-soft);
}
.rot-pause.is-paused .ico-pause {
  inline-size: 0; block-size: 0;
  border: 0.3125rem solid transparent;
  border-inline-end: 0 solid transparent;
  border-inline-start-color: var(--ink-soft);
  border-inline-start-width: 0.4375rem;
}

/* ============================================================
   פס לקוחות — שורה אחת, מונוכרום, נעה
   ============================================================ */
.customers { border-block: 0.0625rem solid var(--line-soft); background: var(--white); padding-block: 2.25rem; }
.cust-h { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-faint); }

.marquee {
  display: flex; gap: 3rem; overflow: hidden;
  margin-block: 1.25rem;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to left, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}
.marq-row {
  display: flex; align-items: center; gap: 3rem;
  flex: 0 0 auto;
  animation: marq 70s linear infinite;
}
.marquee:hover .marq-row { animation-play-state: paused; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(100%); } }
[dir="ltr"] .marq-row { animation-name: marq-ltr; }
@keyframes marq-ltr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marq-row { animation: none; }
  .marquee { overflow-x: auto; }
}
.marq-row img {
  block-size: 2.25rem; inline-size: auto; max-inline-size: none;
  filter: grayscale(1); opacity: .55;
  transition: opacity .2s;
}
.marq-row img.on-dark { filter: grayscale(1) invert(1); }
.marq-row li:hover img { opacity: 1; }

.cust-foot { font-size: 0.9375rem; font-weight: 700; }
.cust-foot a { text-decoration: none; }
.cust-foot a:hover { text-decoration: underline; }

/* ============================================================
   רשת הלקוחות — דף הלקוחות
   ============================================================ */
.logogrid { padding-block: var(--sec-pad); }
.logogrid h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
.lg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem; margin-block-start: 2rem;
}
.lg-item a, .lg-item > span {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 1.25rem 0.75rem; block-size: 100%;
  border: 0.0625rem solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.lg-item a:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.lg-logo { display: grid; place-items: center; block-size: 3rem; }
.lg-logo img { max-block-size: 3rem; inline-size: auto; filter: grayscale(1); opacity: .7; }
.lg-logo img.on-dark { filter: grayscale(1) invert(1); }
.lg-item a:hover .lg-logo img { opacity: 1; }
.lg-name { font-size: 0.875rem; font-weight: 700; text-align: center; }

/* ============================================================
   שתי הדלתות
   ============================================================ */
.doors { padding-block: var(--sec-pad); }
.doors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.door {
  display: flex; flex-direction: column;
  padding: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.door:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-0.125rem); color: inherit; }
.door-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--coral-dark); margin-block-end: 0.625rem; }
.door-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-block-end: 0.75rem; }
.door-text { color: var(--ink-soft); }
.door-more { margin-block-start: 1.5rem; font-weight: 700; color: var(--teal); display: inline-flex; align-items: center; }

/* ============================================================
   מקרי בוחן — המספר הוא הגיבור
   ============================================================ */
.cases { background: var(--paper); padding-block: var(--sec-pad); }
.cases h2 { font-size: var(--fs-h2); margin-block-end: 2.5rem; letter-spacing: -0.015em; }
.cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.case {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.case p.case-num {
  font-size: var(--fs-num); font-weight: 800; line-height: 1.05;
  color: var(--coral-dark); letter-spacing: -0.03em;
  margin-block-end: 1rem; text-wrap: balance;
}
/* ערך שאינו מספר ("חודשיים", "בנק מרכזי בחו״ל"): נכון עובדתית, אבל בגופן
   של מספר הוא נקרא כסיסמה. אותו תפקיד בכרטיס, טיפוגרפיה של אמירה ולא של נתון. */
.case p.case-num.is-word {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--teal-dark);
}
.case h3 { font-size: 1.125rem; margin-block-end: 0.625rem; }
.case p:not(.case-num) { color: var(--ink-soft); font-size: 0.9375rem; }
.case-link {
  margin-block-start: auto; padding-block-start: 1.5rem;
  font-weight: 700; font-size: 0.9375rem;
  display: inline-flex; align-items: center; text-decoration: none;
}
.case-link:hover { text-decoration: underline; }

/* ============================================================
   יכולות — טקסט וצילום לסירוגין
   ============================================================ */
.features { padding-block: var(--sec-pad); }
.features h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
.feat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  padding-block: 2.25rem;
  border-block-end: 0.0625rem solid var(--line-soft);
}
.feat:last-child { border-block-end: 0; }
.feat:not(:has(.feat-shot)) { grid-template-columns: minmax(0, 1fr); padding-block: 1.5rem; }
.feat-flip .feat-text { order: 2; }
.feat h3 { font-size: 1.25rem; margin-block-end: 0.5rem; }
.feat-text p { color: var(--ink-soft); }
.feat-shot { margin: 0; }
.feat-shot img {
  border: 0.0625rem solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.feat-shot figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--ink-faint); }

/* ============================================================
   תקנים ומספרים
   ============================================================ */
.standards { background: var(--paper); padding-block: var(--sec-pad); }
.standards h2 { font-size: var(--fs-h2); margin-block-end: 2rem; letter-spacing: -0.015em; }
.std-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; }
.std {
  background: var(--white); border: 0.0625rem solid var(--line);
  border-radius: var(--radius); padding: 1.75rem 1.25rem; text-align: center;
}
.std-val {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 800; color: var(--coral-dark); letter-spacing: -0.02em; line-height: 1.15;
}
.std-label { margin-block-start: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }

/* ============================================================
   רשת כרטיסים
   ============================================================ */
.cardgrid { padding-block: var(--sec-pad); }
.cardgrid.alt { background: var(--paper); }
.cardgrid h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
.cg-grid { display: grid; gap: 1.25rem; margin-block-start: 2rem; }
.cg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cg {
  display: flex; flex-direction: column;
  padding: 1.625rem;
  border: 0.0625rem solid var(--line); border-radius: var(--radius);
  background: var(--white); text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cg:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-0.125rem); color: inherit; }
.cg-tag {
  align-self: flex-start;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--coral-dark); background: var(--paper);
  border-radius: 999px; padding: 0.1875rem 0.625rem;
  margin-block-end: 0.75rem;
}
.cg h3 { font-size: 1.125rem; margin-block-end: 0.5rem; }
.cg p { color: var(--ink-soft); font-size: 0.9375rem; }
.cg-more { margin-block-start: auto; padding-block-start: 1.25rem; font-weight: 700; font-size: 0.9375rem; color: var(--teal); }
.cg-more:empty { padding-block-start: 0; }

/* ============================================================
   מקרה בוחן מלא
   ============================================================ */
.casestudy { padding-block: var(--sec-pad); }
.cs-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
.cs-num {
  border-inline-start: 0.25rem solid var(--coral);
  padding-inline-start: 1.5rem;
  align-self: start; position: sticky; inset-block-start: 6rem;
}
.cs-num .case-num {
  font-size: var(--fs-num); font-weight: 800; line-height: 1.05;
  color: var(--coral-dark); letter-spacing: -0.03em; text-wrap: balance;
}
.cs-num .case-num.is-word {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--teal-dark);
}
.cs-numlabel { margin-block-start: 0.5rem; color: var(--ink-faint); font-size: 0.9375rem; }
.cs-row { padding-block: 1.375rem; border-block-end: 0.0625rem solid var(--line-soft); }
.cs-row:last-child { border-block-end: 0; }
.cs-row h2 {
  font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-faint);
  margin-block-end: 0.375rem; font-weight: 700;
}
.cs-row div { color: var(--ink); }

/* ============================================================
   רצועת הלוח
   ============================================================ */
.spec { padding-block: var(--sec-pad); }
.spec-in {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center;
}
.spec h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; margin-block-end: 1rem; }
.spec-text p { color: var(--ink-soft); }
.spec-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
/* הטבלה גוללת בתוך עצמה ולא דוחפת את הדף. עם זמנים אמיתיים ("הדלקת נרות
   18:36") שבע העמודות רחבות מרוחב המסך בנייד — ובעברית עודף רוחב נחתך
   מהשמאל של כל הדף, לא רק של הטבלה. min-inline-size שומר על קריאות
   במקום לרסק שבע עמודות לתוך 375 פיקסלים. */
.spec-cal { margin: 0; overflow-x: auto; }
.spec-cal .cal { min-inline-size: 22rem; }
.cal {
  inline-size: 100%; border-collapse: collapse;
  border: 0.0625rem solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper); font-size: 0.8125rem;
}
.cal th {
  background: var(--teal); color: var(--white); font-weight: 700;
  padding: 0.5rem 0.25rem; border-inline-end: 0.0625rem solid rgba(255, 255, 255, .18);
}
.cal th.shab { background: var(--teal-dark); }
.cal td { border: 0.0625rem solid var(--line); padding: 1rem 0.375rem; text-align: center; vertical-align: top; }
.cal td.shab { background: rgba(1, 115, 137, .06); }
.d-heb { display: block; font-size: 1.25rem; font-weight: 800; color: var(--teal); }
.d-times { display: block; margin-block-start: 0.25rem; font-size: 0.6875rem; color: var(--ink-faint); }
.spec-cal figcaption { margin-block-start: 0.75rem; font-size: 0.8125rem; }

/* ============================================================
   טקסט רץ
   ============================================================ */
.rich { padding-block: var(--sec-pad); }
.rich.alt { background: var(--paper); }
.rich-in { max-inline-size: 48rem; }
.rich h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; margin-block-end: 1.25rem; }
.rich p + p { margin-block-start: 1rem; }
.rich .lead-p { font-size: 1.125rem; }
.rich p { color: var(--ink-soft); }
.rich .lead-p, .rich strong { color: var(--ink); }
ul.plain { display: grid; gap: 0.75rem; }
ul.plain li {
  color: var(--ink-soft);
  padding-inline-start: 1.25rem; position: relative;
}
ul.plain li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.7rem;
  inline-size: 0.375rem; block-size: 0.375rem;
  background: var(--coral); border-radius: 50%;
}
blockquote.pull { border-inline-start: 0.25rem solid var(--turq); padding-inline-start: 1.5rem; }
blockquote.pull p { font-size: 1.375rem; font-weight: 700; color: var(--ink); }
blockquote.pull footer { margin-block-start: 0.75rem; font-size: 0.875rem; color: var(--ink-faint); }

/* תרשים סכמטי בתוך טקסט רץ — במקום שאין בו ולא יכול להיות צילום מסך.
   ה-SVG נושא title ו-desc משלו, ולכן הוא נקרא גם כשלא רואים אותו. */
.rich-wide .rich-in { max-inline-size: 68rem; }
.dia { margin-block-start: 1.5rem; }
.dia img { inline-size: 100%; block-size: auto; display: block; border-radius: var(--radius); }
.dia svg {
  inline-size: 100%; block-size: auto; display: block;
  background: var(--white); border: 0.0625rem solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.dia figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--ink-faint); }

/* ============================================================
   קריאה לפעולה
   ============================================================ */
.contact { background: var(--teal); color: var(--white); padding-block: var(--sec-pad); }
.contact-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
.contact h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; margin-block-end: 0.75rem; }
.contact-text p { color: rgba(255, 255, 255, .89); font-size: 1.0625rem; }
.contact-direct { margin-block-start: 1.25rem; display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.contact-direct a { color: var(--white); }

/* וואטסאפ: בועת שיחה שנשענת על currentColor ולא על תמונה — כך אותו סימן עובד
   גם ברצועת הקשר הכהה וגם בפוטר, בלי קובץ נוסף ובלי בקשת רשת נוספת. */
a.wa { white-space: nowrap; }
a.wa::before {
  content: "";
  display: inline-block;
  inline-size: 0.85em;
  block-size: 0.85em;
  margin-inline-end: 0.3em;
  vertical-align: -0.08em;
  background: currentColor;
  clip-path: path("M8 0a8 8 0 0 0-6.9 12L0 16l4.2-1.1A8 8 0 1 0 8 0Z");
}

.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  background: var(--white); padding: 1.75rem; border-radius: var(--radius);
}
.f-row { display: flex; flex-direction: column; gap: 0.375rem; }
.f-row label { font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
.f-row input {
  font: inherit; font-size: 0.9375rem; padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--line); border-radius: 0.375rem;
  background: var(--white); color: var(--ink);
}
.f-row input:focus { border-color: var(--teal); }
.f-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--ink-faint); }
.f-note.is-warn { color: var(--coral-dark); font-weight: 700; }
.f-submit { grid-column: 1 / -1; margin: 0; }
.f-submit .btn { inline-size: 100%; }

/* ============================================================
   פוטר
   ============================================================ */
.foot { background: var(--night); color: #C6D2D8; padding-block-start: 3rem; font-size: 0.9375rem; }
.foot-in { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 2rem; padding-block-end: 2.5rem; }
.foot h2 { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--turq); margin-block-end: 0.875rem; font-weight: 700; }
.foot a { color: #C6D2D8; text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }
.foot li + li { margin-block-start: 0.5rem; }
.foot-brand img { margin-block-end: 0.75rem; }
.foot-name { font-weight: 800; color: var(--white); font-size: 1.0625rem; }
.foot-since { color: #8AA0AA; font-size: 0.875rem; }
.foot-contact li { color: #8AA0AA; }
.foot-legal {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  padding-block: 1.25rem; border-block-start: 0.0625rem solid rgba(255, 255, 255, .1);
  font-size: 0.8125rem; color: #7E939D;
}
.foot-press a { text-decoration: underline; }
/* קישור שמובחן בצבע בלבד נכשל ב-1.4.1 כשהניגוד מול הטקסט סביבו נמוך מ-3:1.
   קו תחתון הופך את ההבחנה ללא-תלוית-צבע, וזה גם מה שהתקן מעדיף. */
.foot-legal a { color: #C6D2D8; text-decoration: underline; }
.foot-legal a:hover { color: var(--white); }

/* ============================================================
   CTA דביק — מובייל בלבד
   ============================================================ */
.sticky-cta { display: none; }
@media (max-width: 48rem) {
  .sticky-cta {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
    background: var(--white); border-block-start: 0.0625rem solid var(--line);
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    box-shadow: 0 -0.25rem 1rem rgba(22, 35, 43, .08);
  }
  .sticky-cta[hidden] { display: none; }
  .sticky-cta .btn { inline-size: 100%; text-align: center; }
}

/* ============================================================
   ביניים
   ============================================================ */
@media (max-width: 68rem) {
  .cg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav ul { gap: 0.875rem; }
  .nav a { font-size: 0.875rem; }
}

@media (max-width: 60rem) {
  .hero-in, .spec-in, .contact-in, .cs-in { grid-template-columns: minmax(0, 1fr); }
  /* הטקסט לפני התמונה. בעמודה אחת, צילום מסך שיושב ראשון דוחף את הכותרת
     מתחת לקיפול — הגולש בנייד רואה תמונה שאי אפשר לקרוא בה דבר, ורק אחריה
     את המסר. ההוכחה החזותית באה אחרי האמירה, לא במקומה. */
  .hero-shot { order: 1; }
  .cs-num { position: static; }
  .cases-grid, .cg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat-flip .feat-text { order: 0; }
}

/* ============================================================
   מובייל — שינויים מהותיים, לא הקטנה
   ============================================================ */
@media (max-width: 48rem) {
  /* תפריט המבורגר — שתי הדלתות הן שני הפריטים הראשונים */
  .burger { display: block; }
  .nav {
    display: none; position: fixed;
    inset-block-start: 4.25rem; inset-inline: 0; inset-block-end: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto; border-block-start: 0.0625rem solid var(--line-soft);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a {
    display: block; padding-block: 0.875rem; font-size: 1.0625rem;
    border-block-end: 0.0625rem solid var(--line-soft);
  }
  .nav-door { display: block; }
  .nav-door a { font-weight: 800; color: var(--teal); }
  .lang { margin-block-start: 1.25rem; align-self: flex-start; }

  /* הכותרת מתקצרת כדי שפס הלקוחות ייכנס מעל הקיפול */
  .hero { padding-block: 1.25rem 1.5rem; }
  .hero .lede { display: none; }
  .hero-plain .lede { display: block; }
  .hero-in { gap: 1.25rem; }
  .cta-row { margin-block-start: 1rem; gap: 0.625rem; }
  .cta-row .btn { flex: 1 1 8rem; text-align: center; padding-inline: 0.75rem; }

  /* במסך צר מוותרים על ההטיה — היא רק גוזלת רוחב.
     התווית יורדת מתחת למסגרת במקום לשבת עליה. */
  .shot-stage { perspective: none; padding: 0; }
  .shot-frame { transform: none; box-shadow: 0 0.75rem 1.5rem rgba(22, 35, 43, .12); }
  .shot-label { position: static; max-inline-size: none; margin-block-start: 0.625rem; }

  /* יחס אחיד לכל השקופיות — הטקסט שבצילום ממילא אינו קריא כאן,
     והוא נקרא כמרקם של מערכת צפופה. כך אין חור בין שקופית לשקופית. */
  .shot-frame img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }

  .customers { padding-block: 1.5rem; }
  .marquee { gap: 2rem; margin-block: 1rem; }
  .marq-row { gap: 2rem; }
  .marq-row img { block-size: 1.625rem; }

  /* שתי הדלתות מוערמות, שוות משקל. לא קרוסלה */
  .doors { padding-block: 2.5rem; }
  .doors-grid { grid-template-columns: minmax(0, 1fr); }
  .door { padding: 1.5rem; }

  /* מקרי הבוחן מוערמים, המספר נשאר גדול */
  .cases-grid, .cg-3, .cg-4 { grid-template-columns: minmax(0, 1fr); }
  .case { padding: 1.5rem; }

  .form { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .cal { font-size: 0.6875rem; }
  .cal td { padding: 0.625rem 0.125rem; }
  .d-heb { font-size: 1rem; }
  .d-times { font-size: 0.5625rem; }

  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .foot-legal { flex-direction: column; gap: 0.5rem; }

  /* מקום ל-CTA הדביק */
  .foot { padding-block-end: 4rem; }
}

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

@media print {
  .topbar, .sticky-cta, .contact, .rotator-controls { display: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ==== שכבת האפליקציה — מוזרק על ידי build.py, אל תערכו כאן ==== */
#language{display:none}
body:has(#content #layout) #language{display:inline-block;position:fixed;
  top:.6rem;inset-inline-start:.6rem;z-index:50}

/* מלכודת דבש: נסתרת מהעין ומקוראי מסך גם יחד, אבל אינה display:none —
   בוטים מדלגים על שדות שהוסתרו כך. אדם לעולם לא ימלא אותה. */
.f-trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;
  overflow:hidden}

/* שדה חובה שנשאר ריק */
.form .is-bad{border-color:var(--coral-dark);outline:0.125rem solid var(--coral-dark);
  outline-offset:0.0625rem}

/* שדה ההודעה תופס את מלוא רוחב הטופס; מיושר לסגנון .f-row input שכבר קיים */
.f-wide{grid-column:1/-1}
.f-row textarea{
  font:inherit;font-size:0.9375rem;padding:0.625rem 0.75rem;
  border:0.0625rem solid var(--line);border-radius:0.375rem;
  background:var(--white);color:var(--ink);resize:vertical;
}