@charset "UTF-8";
/* ==========================================================================
   NDM Design System v1.0  —  נועם שיווק דיגיטלי
   Global, site-wide. Keeps the existing brand identity (dark + red/gold),
   raises execution: one type scale, one spacing rhythm, real SVG icons,
   AA-verified contrast, RTL-native logical properties.

   Loaded on every page via the child theme. Fonts are self-hosted.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand — verified contrast on --ndm-bg (#07070a):
     red 4.61:1 · red-2 6.54:1 · gold 10.65:1 — all pass WCAG AA */
  --ndm-red:        #e63022;   /* text + accents on dark */
  --ndm-red-cta:    #e02e20;   /* button fill: white text = 4.58:1 (AA) */
  --ndm-red-2:      #ff5a4d;
  --ndm-red-3:      #b8241a;
  --ndm-gold:       #f2b134;

  /* Surfaces */
  --ndm-bg:         #07070a;
  --ndm-bg-2:       #0e0e12;
  --ndm-bg-3:       #16161b;
  --ndm-card:       rgba(255,255,255,.055);
  --ndm-card-hover: rgba(255,255,255,.09);
  --ndm-border:     rgba(255,255,255,.12);
  --ndm-border-2:   rgba(255,255,255,.20);

  /* Text */
  --ndm-text:       #ffffff;
  --ndm-text-2:     rgba(255,255,255,.86);
  --ndm-text-3:     rgba(255,255,255,.62);

  /* Elevation */
  --ndm-shadow:     0 18px 48px -24px rgba(0,0,0,.8);
  --ndm-shadow-lg:  0 30px 70px -30px rgba(230,48,34,.35);

  /* Geometry */
  --ndm-radius-sm:  12px;
  --ndm-radius:     20px;
  --ndm-radius-lg:  28px;
  --ndm-max:        1220px;

  /* Motion — 150–300ms per UX guideline */
  --ndm-ease:       cubic-bezier(.16,1,.3,1);
  --ndm-fast:       .18s;
  --ndm-base:       .28s;

  /* Fluid type scale (1.25 ratio, clamped) */
  --ndm-fs-xs:   clamp(.78rem, .76rem + .10vw, .86rem);
  --ndm-fs-sm:   clamp(.88rem, .85rem + .15vw, .97rem);
  --ndm-fs-base: clamp(1rem,   .97rem + .18vw, 1.12rem);
  --ndm-fs-lg:   clamp(1.15rem, 1.08rem + .34vw, 1.38rem);
  --ndm-fs-xl:   clamp(1.35rem, 1.22rem + .62vw, 1.85rem);
  --ndm-fs-2xl:  clamp(1.65rem, 1.40rem + 1.15vw, 2.55rem);
  --ndm-fs-3xl:  clamp(2.05rem, 1.60rem + 2.05vw, 3.60rem);
  --ndm-fs-4xl:  clamp(2.45rem, 1.75rem + 3.15vw, 4.75rem);

  /* 8pt spacing rhythm */
  --ndm-s1: .5rem;  --ndm-s2: 1rem;   --ndm-s3: 1.5rem;
  --ndm-s4: 2rem;   --ndm-s5: 3rem;   --ndm-s6: 4rem;
  --ndm-sec-y: clamp(3.5rem, 7.5vw, 6.5rem);
}

/* ---------- 2. Typography primitives ----------
   Hebrew needs a slightly taller line-height than Latin for comfortable
   reading; display sizes get negative tracking to stay optically tight. */
.ndm-display,
.ndm-h1, .ndm-h2, .ndm-h3 {
  font-family: 'Rubik', 'Heebo', system-ui, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
.ndm-display { font-size: var(--ndm-fs-4xl); font-weight: 900; }
.ndm-h1      { font-size: var(--ndm-fs-3xl); }
.ndm-h2      { font-size: var(--ndm-fs-2xl); line-height: 1.18; }
.ndm-h3      { font-size: var(--ndm-fs-xl);  line-height: 1.28; font-weight: 700; }

.ndm-lead,
.ndm-body {
  font-family: 'Heebo', system-ui, Arial, sans-serif;
  color: var(--ndm-text-2);
  margin: 0;
  text-wrap: pretty;
}
.ndm-lead { font-size: var(--ndm-fs-lg);  line-height: 1.62; }
.ndm-body { font-size: var(--ndm-fs-base); line-height: 1.75; }

.ndm-eyebrow {
  font-family: 'Rubik', 'Heebo', sans-serif;
  font-size: var(--ndm-fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ndm-gold);
  text-transform: none; /* Hebrew has no case — never uppercase it */
}

/* ---------- 3. Layout ---------- */
.ndm-wrap {
  width: min(100%, var(--ndm-max));
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 56px);
  position: relative;
  z-index: 1;
}
.ndm-section {
  padding-block: var(--ndm-sec-y);
  position: relative;
  /* Skip offscreen paint work — big TBT/INP win on long pages */
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}
.ndm-grid { display: grid; gap: var(--ndm-s3); }
.ndm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ndm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ndm-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- 4. Surfaces ---------- */
.ndm-card {
  background: var(--ndm-card);
  border: 1px solid var(--ndm-border);
  border-radius: var(--ndm-radius);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  box-shadow: var(--ndm-shadow);
  transition: background var(--ndm-base) var(--ndm-ease),
              border-color var(--ndm-base) var(--ndm-ease),
              transform var(--ndm-base) var(--ndm-ease);
}
.ndm-card:hover {
  background: var(--ndm-card-hover);
  border-color: var(--ndm-border-2);
  transform: translateY(-3px);
}

/* ---------- 5. Buttons — 44px min touch target ---------- */
.ndm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding-inline: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Rubik', 'Heebo', sans-serif;
  font-size: var(--ndm-fs-base);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ndm-fast) var(--ndm-ease),
              box-shadow var(--ndm-base) var(--ndm-ease),
              background var(--ndm-base) var(--ndm-ease);
}
.ndm-btn:active { transform: translateY(1px) scale(.99); }

.ndm-btn-primary {
  background: linear-gradient(135deg, var(--ndm-red-cta), var(--ndm-red-3));
  color: #fff;                       /* 4.58:1 on --ndm-red-cta — AA */
  box-shadow: var(--ndm-shadow-lg);
}
.ndm-btn-primary:hover { box-shadow: 0 26px 60px -22px rgba(230,48,34,.55); }

.ndm-btn-ghost {
  background: transparent;
  color: var(--ndm-text);
  border-color: var(--ndm-border-2);
}
.ndm-btn-ghost:hover { background: var(--ndm-card-hover); }

/* ---------- 6. Icon system — replaces emoji icons ----------
   Emoji render differently per OS/browser, can't be recolored, and are
   announced literally by screen readers. Real SVG instead. */
.ndm-icon {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ndm-icon-badge {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 16px;
  color: var(--ndm-red-2);
  background: linear-gradient(140deg, rgba(230,48,34,.16), rgba(242,177,52,.09));
  border: 1px solid var(--ndm-red-border, rgba(230,48,34,.4));
}

/* Header mobile-submenu icons (were emoji, now SVG in a 28px chip) */
.msub__ico { font-size: 0; }
.msub__ico .ndm-icon { width: 17px; height: 17px; }

/* ---------- 7. Stat / metric ---------- */
.ndm-stat-value {
  font-family: 'Rubik', 'Heebo', sans-serif;
  font-size: var(--ndm-fs-2xl);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(120deg, var(--ndm-gold), var(--ndm-red-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Gradient text is decorative only — the label carries the meaning */
}
.ndm-stat-label {
  font-size: var(--ndm-fs-sm);
  color: var(--ndm-text-3);
  margin-top: .35rem;
}

/* ---------- 8. Accessibility ---------- */
.ndm-scope :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ndm-gold);
  outline-offset: 3px;
  border-radius: var(--ndm-radius-sm);
}
.ndm-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ndm-scope *,
  .ndm-scope *::before,
  .ndm-scope *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ndm-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 9. Scroll reveal ---------- */
.ndm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ndm-ease), transform .7s var(--ndm-ease);
}
.ndm-reveal.ndm-in { opacity: 1; transform: none; }

/* ---------- 10. Global safety nets ----------
   Applied site-wide (all 23 pages), independent of Elementor markup. */

/* Never let a page scroll sideways on mobile */
html, body { overflow-x: clip; }

/* Reserve image space so late-loading media can't shift layout (CLS) */
img, video, iframe { max-width: 100%; height: auto; }

/* Elementor accordions/toggles: visible focus ring for keyboard users */
.elementor-accordion-title:focus-visible,
.elementor-toggle-title:focus-visible,
.elementor-tab-title:focus-visible {
  outline: 3px solid var(--ndm-gold);
  outline-offset: 2px;
}

/* Any remaining tap target across the site meets the 44px minimum */
.elementor-button,
.elementor-widget-button a { min-height: 44px; }