/* ============================================================
   סטודיו זז — style.css
   שלד: reset · משתנים · פונט · טיפוגרפיה · גריד ·
   פנס · preloader · סמן · וואטסאפ צף · reduced-motion
   ============================================================ */

/* ---------- פונט: פעמון (כבד — כותרות) + פעמון לייט (גוף) ---------- */
@font-face {
  font-family: 'Paamon';
  src: url('../fonts/paamon.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paamon Light';
  src: url('../fonts/paamon-light-aaa.woff2') format('woff2');
  /* טווח מלא — כדי שהדפדפן לא ייצר bold סינתטי על הפנים הקלות */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- משתנים ---------- */
:root {
  --bg: #000000;
  --fg: #FFFFFF;
  --accent: #7C3AED;      /* סגול — דגש ראשי */
  --lime: #C4FF3D;        /* ליים — כפתורים והמילה "זז" */
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.12);

  --font-heading: 'Paamon', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Paamon Light', 'Paamon', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-w: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --section-y: clamp(4rem, 10vw, 9rem);

  --fs-h1: clamp(2.5rem, 8vw, 7rem);
  --fs-h2: clamp(2rem, 5vw, 4.5rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body: clamp(1rem, 1.1vw, 1.2rem);

  /* פנס */
  --spot-r: 350px;
  --sx: 50vw;
  --sy: 50vh;

  /* סמן */
  --cursor-size: 12px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.is-loading { overflow: hidden; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { padding: 0; list-style: none; }
strong { font-weight: 700; }

/* Lenis — CSS מומלץ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* בלי JS — הכול סטטי, אין preloader */
.no-js .preloader,
.no-js .cursor { display: none; }

/* ---------- טיפוגרפיה ----------
   'Paamon' הכבד: h1/h2/h3, לוגו, preloader, והמספרים הגדולים בנתונים.
   כל השאר יורש את 'Paamon Light' מה-body. */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
strong { font-family: var(--font-heading); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { max-width: 65ch; }
.zaz { color: var(--lime); }

/* מספרים / אנגלית בתוך עברית */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
bdi { unicode-bidi: isolate; }

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

/* ---------- גריד ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.grid > * { grid-column: span 12; }
@media (min-width: 768px) {
  .stats .grid > * { grid-column: span 4; }
}

/* ---------- סקשנים (שלד בלבד) ---------- */
main { position: relative; z-index: 1; }
.header, .footer { position: relative; z-index: 1; }
.section { padding-block: var(--section-y); }
.section__title { margin-bottom: 1.5rem; }
.scene { min-height: 50vh; }

/* ---------- כפתורים (בסיס) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9em 1.8em; border-radius: 999px;
  font-weight: 700; line-height: 1;
  border: 1px solid transparent;
}
.btn--lime { background: var(--lime); color: #000; }
.btn--ghost { border-color: var(--line); color: var(--fg); }

/* ============================================================
   פנס (spotlight)
   שכבה קבועה מאחורי התוכן. הנקודות נחשפות דרך מסכה עגולה
   שממוקמת ב---sx / --sy (מתעדכן ב-JS).
   ============================================================ */
.spotlight {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.spotlight__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(var(--spot-r) circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
          mask-image: radial-gradient(var(--spot-r) circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
}
.spotlight__glow {
  position: absolute; inset: 0;
  background: radial-gradient(var(--spot-r) circle at var(--sx) var(--sy), rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0.06) 45%, transparent 100%);
}

/* ============================================================
   Preloader — "זז..."
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
}
.preloader__word {
  display: flex; direction: rtl;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 20vw, 14rem);
  font-weight: 700; line-height: 1;
  overflow: hidden; padding-block: 0.1em;
}
.preloader__char { display: inline-block; opacity: 0; will-change: transform, opacity; }
.preloader__char--z { color: var(--lime); }
.preloader__char--dot { color: var(--fg); }

/* ============================================================
   סמן מותאם
   ============================================================ */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: var(--cursor-size); height: var(--cursor-size);
  border-radius: 50%;
  background: var(--fg);
  mix-blend-mode: difference;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: width .3s ease, height .3s ease, background-color .3s ease, opacity .3s ease;
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }
.cursor__label {
  font-size: 0.9rem; font-weight: 700; color: #000;
  opacity: 0; transition: opacity .2s ease;
  white-space: nowrap;
}
/* הובר על לינק / כפתור — הסמן גדל */
.cursor.is-hover { width: 48px; height: 48px; }
/* הובר על כרטיס פרויקט — "לחץ" */
.cursor.is-label { width: 90px; height: 90px; background: var(--lime); mix-blend-mode: normal; }
.cursor.is-label .cursor__label { opacity: 1; }

/* ============================================================
   וואטסאפ צף — פינה שמאלית תחתונה, פעימה כל 4 שניות
   ============================================================ */
.whatsapp-float {
  position: fixed; bottom: max(1.25rem, env(safe-area-inset-bottom)); left: max(1.25rem, env(safe-area-inset-left)); z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #000;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.whatsapp-float.is-visible { opacity: 1; visibility: visible; pointer-events: auto; animation: wa-pulse 4s ease-out infinite; }
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  22%, 100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
}

/* ============================================================
   1. תפריט עליון
   שקוף על ההירו · זכוכית אחרי 80px (JS מוסיף --glass) ·
   מסתתר בגלילה למטה (JS מוסיף --hidden)
   ============================================================ */
.header {
  position: fixed; top: 0; right: 0; left: 0; z-index: 950;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.header--glass {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.header--hidden { transform: translateY(-110%); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem); height: 76px;
}
.logo { color: var(--lime); font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav a { position: relative; font-weight: 700; opacity: 0.85; transition: opacity 0.25s ease; }
/* קו תחתון שנמתח מימין בהובר */
.nav a:not(.btn)::after {
  content: ''; position: absolute; right: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--lime);
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav a:hover { opacity: 1; }
.nav a:not(.btn):hover::after { width: 100%; }
.nav__cta { display: none; }

/* כפתור עם מילוי בהובר — שכבה שעולה מלמטה */
.btn--fill { position: relative; overflow: hidden; transition: border-color 0.35s ease; }
.btn--fill .btn__label { position: relative; z-index: 1; transition: color 0.35s ease; }
.btn--fill::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn--fill:hover::before, .btn--fill:focus-visible::before { transform: translateY(0); }
.btn--lime.btn--fill::before { background: #000; }
.btn--lime.btn--fill:hover, .btn--lime.btn--fill:focus-visible { border-color: var(--lime); }
.btn--lime.btn--fill:hover .btn__label, .btn--lime.btn--fill:focus-visible .btn__label { color: var(--lime); }
.btn--ghost.btn--fill::before { background: var(--lime); }
.btn--ghost.btn--fill:hover, .btn--ghost.btn--fill:focus-visible { border-color: var(--lime); }
.btn--ghost.btn--fill:hover .btn__label, .btn--ghost.btn--fill:focus-visible .btn__label { color: #000; }

/* כפתור תפריט — זמין בכל רוחב מסך */
.nav-toggle {
  display: flex; position: relative; z-index: 960;
  width: 48px; height: 48px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-toggle__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nav-toggle__label { display: none; }
.nav-toggle__line {
  width: 26px; height: 2px; background: var(--fg);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-toggle.is-open .nav-toggle__line:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__line:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* מובייל: תפריט מסך מלא */
@media (max-width: 840px) {
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 0; z-index: 940;
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 2rem; padding: var(--gutter);
    visibility: hidden; pointer-events: none;
    clip-path: inset(0 0 100% 0);
  }
  .nav.is-open { visibility: visible; pointer-events: auto; }
  .nav a:not(.btn) { font-size: clamp(2.2rem, 10vw, 3.5rem); line-height: 1.15; opacity: 1; }
  .nav a:not(.btn)::after { bottom: 0; height: 3px; }
  .nav__cta { display: inline-flex; margin-top: 1rem; }

  /* בלי JS — תפריט רגיל, בלי המבורגר */
  .no-js .nav {
    position: static; visibility: visible; pointer-events: auto; clip-path: none;
    flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .no-js .nav a:not(.btn) { font-size: 0.95rem; }
}
/* בלי JS אין כפתור שאין לו פעולה */
.no-js .nav-toggle { display: none; }
/* נעילת גלילה כשהתפריט פתוח (fallback בלי Lenis) */
html.menu-open, html.menu-open body { overflow: hidden; }

/* ============================================================
   NAV OVERLAY — Full Screen Menu
   נפתח מלמטה למעלה כדי להרגיש כמו תנועה אחת רציפה.
   ============================================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 58, 237, 0.32), transparent 32%),
    radial-gradient(circle at 15% 90%, rgba(196, 255, 61, 0.12), transparent 24%),
    #1a0533;
  display: flex;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.5s;
}
.nav-overlay.is-open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay.is-closing {
  visibility: visible;
  transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
.nav-overlay__brand { display: flex; align-items: center; }
.nav-overlay__logo {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}
.nav-overlay__close {
  display: flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #ffffff;
}
.nav-overlay__nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, 0.8vh, 10px);
  padding: 6px 20px;
  overflow-y: auto;
}
.nav-overlay__link {
  font-family: var(--font-heading);
  font-size: clamp(26px, 5.4vh, 48px);
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(40px) scale(0.88) rotate(-1deg);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, letter-spacing 0.3s ease;
}
.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.15s),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.15s),
    color 0.3s ease,
    letter-spacing 0.3s ease;
}
.nav-overlay.is-closing .nav-overlay__link {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}
.nav-overlay.is-open .nav-overlay__link:is(:hover, :focus-visible) {
  transform: scale(1.14) rotate(-1deg);
  color: var(--lime);
  letter-spacing: 0.05em;
}
.nav-overlay__close { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; }
.nav-overlay__close:is(:hover, :focus-visible) { color: var(--lime); transform: rotate(90deg) scale(1.12); }
.nav-overlay__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 32px 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.nav-overlay__footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-overlay__footer a:hover,
.nav-overlay__footer a:focus-visible { color: var(--lime); }
.nav-overlay__sep { opacity: 0.5; }
@media (min-width: 768px) {
  .nav-overlay__top { padding: 12px 40px; }
  .nav-overlay__logo { height: 56px; }
  .nav-overlay__nav { gap: clamp(3px, 1.1vh, 12px); }
  .nav-overlay__link { font-size: clamp(30px, 5.8vh, 64px); }
  .nav-overlay__footer { padding: 28px 40px; }
}
@media (min-width: 841px) {
  .nav-toggle {
    width: auto;
    min-width: 48px;
    padding-inline: 12px;
    flex-direction: row;
    gap: 9px;
  }
  .nav-toggle__label {
    display: inline;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
  }
}

/* ============================================================
   2. הירו
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 7rem 6rem;
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__canvas canvas { width: 100% !important; height: 100% !important; }
.hero__content { position: relative; z-index: 1; }

.hero__kicker {
  color: var(--muted); font-weight: 700;
  letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.hero__title { margin-bottom: 1.75rem; }
.nowrap { white-space: nowrap; }
.hero__word { color: var(--lime); display: inline-block; white-space: nowrap; }
/* אותיות המילה המתחלפת — flip תלת-ממדי */
.wchar { display: inline-block; will-change: transform; backface-visibility: hidden; }
/* מסכה לאנימציית הכניסה: כל אות עולה מתוך "חלון" חתוך */
.mask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.char { display: inline-block; will-change: transform; }

.hero__sub {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero__note { color: var(--muted); font-size: 0.95rem; }

/* אינדיקטור גלילה: טקסט מסתובב סביב חץ, מגנטי לעכבר (JS) */
.scroll-hint {
  position: absolute; bottom: 1.75rem; left: calc(50% - 55px); z-index: 2;
  width: 110px; height: 110px;
  display: grid; place-items: center;
}
.scroll-hint__ring {
  position: absolute; inset: 0;
  animation: hint-spin 14s linear infinite;
}
/* כל אות ממוקמת בראש המעגל ומסובבת סביב המרכז */
.scroll-hint__ring .rchar {
  position: absolute; inset: 0;
  text-align: center; line-height: 1;
  font-size: 0.72rem; font-weight: 700;
  color: var(--fg); opacity: 0.85;
}
.scroll-hint__arrow { color: var(--lime); font-size: 1.5rem; line-height: 1; }
@keyframes hint-spin { to { transform: rotate(360deg); } }
@media (max-width: 840px) {
  .scroll-hint { width: 90px; height: 90px; left: calc(50% - 45px); bottom: 1.25rem; }
}

/* ============================================================
   3. פס נע (Marquee)
   שתי שורות בכיוונים הפוכים. JS משכפל את הפס ומזיז אותו לפי
   מהירות הגלילה. השורה השנייה — טקסט קווי (outline).
   ============================================================ */
.marquee {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.marquee__row { overflow: hidden; padding-block: 0.15em; }
.marquee__row + .marquee__row { margin-top: 0.35rem; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__text {
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  padding-inline-end: 0.45em;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
}
/* שורה שנייה: אותיות קוויות, שקופות מבפנים */
.marquee__row--reverse .marquee__text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}
/* הכוכבית מסתובבת */
.marquee__star {
  display: inline-block;
  color: var(--lime);
  -webkit-text-stroke: 0px;
  animation: star-spin 3.5s linear infinite;
}
.marquee__row--reverse .marquee__star { color: var(--accent); }
@keyframes star-spin { to { transform: rotate(360deg); } }
/* בלי JS — שורה סטטית שנשברת לשורות */
.no-js .marquee__text { white-space: normal; }

/* ============================================================
   4. שלושה נתונים
   כרטיס זכוכית על שחור. ה"מעטפת" (padding 1px) היא גבול
   conic-gradient שמסתובב דרך המשתנה --stat-angle.
   ============================================================ */
@property --stat-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.stat {
  position: relative;
  padding: 1px;
  border-radius: 22px;
  background: conic-gradient(from var(--stat-angle),
    rgba(124, 58, 237, 0.95), rgba(124, 58, 237, 0.06) 25%,
    rgba(196, 255, 61, 0.8) 50%, rgba(124, 58, 237, 0.06) 75%,
    rgba(124, 58, 237, 0.95));
  animation: stat-border-spin 5s linear infinite;
  will-change: transform;
}
@keyframes stat-border-spin { to { --stat-angle: 360deg; } }
.stat__inner {
  height: 100%;
  border-radius: 21px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 55%), rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.stat__num { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.3; margin-bottom: 0.9rem; }
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  line-height: 1;
  color: var(--lime);
  margin-bottom: 0.35rem;
}
.stat p { color: var(--muted); }

/* ============================================================
   5. פורטפוליו — שורות פרויקטים
   רקע הפרויקט מופיע מאחורי כל הסקשן בהובר; שאר השורות מתעמעמות.
   ============================================================ */
.work { position: relative; overflow: hidden; }
.work .container { position: relative; z-index: 1; }
.work .section__title { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* קו תחתון מתחת ל"זז" — נמשך בגלילה (JS מזיז את --draw) */
.zaz--draw { position: relative; --draw: 1; }
.zaz--draw::after {
  content: '';
  position: absolute; right: 0; left: 0; bottom: -0.05em;
  height: 0.08em;
  background: var(--lime);
  transform: scaleX(var(--draw, 1));
  transform-origin: 100% 50%;
}

/* רקעי פרויקטים: תמונה מעל gradient (ה-gradient הוא fallback ל-placeholder) */
.work__bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.work__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.work__bg[data-bg="hotspot"] {
  background-image: url('../assets/work/hotspot.webp'), linear-gradient(135deg, #2a0a66, #7C3AED 55%, #120428);
}
.work__bg[data-bg="ohel-binyamin"] {
  background-image: url('../assets/work/ohel.webp'), linear-gradient(135deg, #C4FF3D, #0F2A05 70%);
}
/* שכבת האפלה — כדי שהטקסט יישאר קריא מעל התמונה */
.work__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
}
.work__bg.is-active { opacity: 1; transform: scale(1); }

/* שורת פרויקט */
.work__list { border-bottom: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title meta'
    'desc  desc';
  align-items: end;
  column-gap: var(--gap);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  transition: opacity 0.45s ease;
}
.work-row__title {
  grid-area: title;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  transition: color 0.35s ease;
}
.work-row__meta { grid-area: meta; color: var(--muted); font-size: 0.95rem; padding-bottom: 0.4em; }
.work-row__desc { grid-area: desc; color: var(--muted); margin-top: 0.75rem; max-width: 48ch; }
/* הובר: השורה הפעילה נצבעת ליים, השאר מתעמעמות */
.work__list.is-peeking .work-row:not(.is-hot) { opacity: 1; }
.work-row.is-hot .work-row__title { color: var(--lime); }

/* כרטיסי פרויקטים: סטאק קטן שמציג את התמונות עצמן גם במסכי מגע */
.work-cards {
  margin-top: clamp(2.75rem, 7vw, 6rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.work-cards__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.work-cards__eyebrow {
  color: var(--lime);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.work-cards__hint { color: var(--muted); font-size: 0.9rem; }
.work-cards__stage {
  position: relative;
  width: min(100%, 760px);
  height: clamp(17rem, 45vw, 31rem);
  margin-inline: auto;
  perspective: 1400px;
  isolation: isolate;
}
.work-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1.25rem;
  background: #111;
  color: var(--fg);
  text-align: right;
  opacity: 0.72;
  pointer-events: none;
  transform: translateY(1.4rem) scale(0.92) rotate(4deg);
  transform-origin: 50% 100%;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.work-card[data-card="hotspot"] { transform: translate(-3%, 1.4rem) scale(0.92) rotate(-4deg); }
.work-card.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1) rotate(0);
  box-shadow: 0 30px 90px rgba(124, 58, 237, 0.22);
  cursor: pointer;
}
.work-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
.work-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.work-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 26%, rgba(0, 0, 0, 0.86) 100%);
}
.work-card__content {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  left: clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  gap: 0.15rem;
}
.work-card__index { color: var(--lime); font-size: 0.8rem; letter-spacing: 0.08em; }
.work-card__title { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1; }
.work-card__cta { color: rgba(255, 255, 255, 0.78); font-size: clamp(0.9rem, 1.4vw, 1.1rem); }
.work-cards__dots { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.5rem; }
.work-cards__dot {
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.work-cards__dot.is-active { border-color: var(--lime); background: var(--lime); transform: scale(1.35); }
.work-cards__dot:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

/* "?" — סימן שאלה גדול שמתנדנד */
.work-row__mark {
  display: inline-block;
  color: var(--lime);
  margin-inline-end: 0.15em;
  transform-origin: 50% 12%;
  animation: mark-swing 2.2s ease-in-out infinite;
}
@keyframes mark-swing {
  0%, 100% { transform: rotate(-11deg); }
  50%      { transform: rotate(11deg); }
}

/* מובייל: המטא עוברת מעל השם */
@media (max-width: 767px) {
  .work-row {
    grid-template-columns: 1fr;
    grid-template-areas: 'meta' 'title' 'desc';
    align-items: start;
  }
  .work-row__meta { padding-bottom: 0.2em; }
  .work-cards__head { align-items: start; flex-direction: column; gap: 0.25rem; }
  .work-cards__stage { height: clamp(16rem, 74vw, 24rem); }
  .work-card__title { font-size: clamp(2.25rem, 12vw, 3.5rem); }
}

/* ============================================================
   מערכת reveal — מסכות למילים/אותיות (initReveals ב-main.js)
   ============================================================ */
/* מסכה: חלון חתוך שהמילה עולה מתוכו. padding+margin שליליים —
   כדי שרגליים של ך/ן/ף וניקוד לא ייחתכו */
.rmask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.1em 0.02em 0.18em; margin: -0.1em -0.02em -0.18em;
}
.rw { display: inline-block; will-change: transform; }
/* מילה בפיצול אותיות — לא נשברת באמצע שורה */
.rword { display: inline-block; white-space: nowrap; }

/* ============================================================
   6. "למה לספר כשאפשר להראות" — סגול עמוק, גלים, חלקיקים
   ============================================================ */
.show {
  position: relative; z-index: 2;
  background: #1a0533;
  padding-block: 0;
  min-height: 240vh; /* מרחב גלילה למורף של החלקיקים (sticky בפנים) */
}
.show__wave {
  position: absolute; right: 0; left: 0; width: 100%;
  height: clamp(44px, 8vw, 120px);
  pointer-events: none; display: block;
}
.show__wave--top { top: 1px; transform: translateY(-100%); }
.show__wave--bottom { bottom: 1px; transform: translateY(100%) scaleY(-1); }
.show__sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(3rem, 8vh, 5rem);
}
.show__content { width: 100%; }
.show__text {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  margin-top: 0.5rem;
}
.scene--show {
  position: relative; width: 100%;
  height: min(50svh, 480px);
  margin-block: clamp(0.5rem, 2vh, 1.5rem);
}
.scene canvas { width: 100% !important; height: 100% !important; }
.show__sub { color: var(--muted); }

/* ============================================================
   7. "התוצאה?" — חזרה לשחור, מעטפות → תיבת "ליד"
   ============================================================ */
.leads {
  position: relative;
  padding-block: 0;
  min-height: 220vh; /* מרחב גלילה לשאיבת המעטפות */
}
.leads__sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  overflow: hidden;
}
.scene--leads { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.leads__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100svh;
  padding-block: clamp(5rem, 14vh, 8rem);
}
.leads__text {
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  line-height: 1.55;
  max-width: 30ch;
}
/* "מכניס." — רקע ליים שנמתח מימין לשמאל כשהמעטפות מגיעות */
.leads__win {
  position: relative; display: inline-block; isolation: isolate;
  padding-inline: 0.12em;
  transition: color 0.4s ease 0.2s;
}
.leads__win::before {
  content: ''; position: absolute; inset: 0.02em -0.04em;
  background: var(--lime);
  transform: scaleX(0); transform-origin: 100% 50%;
  z-index: -1;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.leads__win.is-on { color: #000; }
.leads__win.is-on::before { transform: scaleX(1); }
/* בלי JS / תנועה מופחתת — הרקע מוצג מיד */
.no-js .leads__win, html.reduced-motion .leads__win { color: #000; }
.no-js .leads__win::before, html.reduced-motion .leads__win::before { transform: scaleX(1); }

/* ============================================================
   8. בתכל'ס — טקסט גדול, צביעה בגלילה ופנס מוגבר
   ============================================================ */
.why { --why-size: clamp(1.75rem, 3.8vw, 3.6rem); }
.why .section__title { max-width: 18ch; margin-bottom: clamp(3rem, 8vw, 7rem); }
.why__text { font-size: var(--why-size); line-height: 1.35; }
.why__text p { position: relative; max-width: 32ch; margin-bottom: 1.2em; }
.why__text .rw { will-change: auto; }
.why__text .why__final { color: var(--lime); font-size: calc(var(--why-size) * 2); line-height: 1.1; max-width: 17ch; margin-block: 0.9em 0; }

/* ============================================================
   9. אדם אחד — שני צדדים לאותו כרטיס, CSS 3D בלבד
   ============================================================ */
.about { border-block: 1px solid var(--line); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.about__text, .about__visual { min-width: 0; }
.about__text .section__title { max-width: 15ch; margin-bottom: 2rem; }
.about__text > p { color: rgba(255, 255, 255, 0.78); margin-bottom: 1.5rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.about__visual { text-align: center; }
.studio-card { display: block; position: relative; width: min(100%, 440px); aspect-ratio: 4 / 5; margin-inline: auto; padding: 0; perspective: 1200px; border-radius: 28px; touch-action: manipulation; }
.studio-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 12px; }
.studio-card__tilt, .studio-card__rotor { display: block; position: absolute; inset: 0; transform-style: preserve-3d; }
.studio-card__rotor { transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.studio-card.is-flipped .studio-card__rotor { transform: rotateY(180deg); }
.studio-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.22); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 80px rgba(124, 58, 237, 0.15); }
.studio-card__face--front { background: radial-gradient(ellipse at 20% 0%, #42246c, #170c27 65%); }
.studio-card__number { font-family: var(--font-heading); font-size: clamp(9rem, 21vw, 19rem); line-height: 0.85; color: var(--lime); }
.studio-card__label { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); margin-top: 0.5em; }
.studio-card__face--back { transform: rotateY(180deg); background: var(--lime); color: #000; border-color: var(--lime); }
.studio-card__speed { font-family: var(--font-heading); font-size: clamp(3.5rem, 6vw, 5.6rem); line-height: 1.05; position: relative; z-index: 1; }
.studio-card__streaks { position: absolute; inset: 12% -50%; transform: rotate(-28deg); background: repeating-linear-gradient(0deg, transparent 0 42px, rgba(0, 0, 0, 0.09) 42px 44px); }
.studio-card__hint { color: var(--muted); font-size: 0.95rem; margin: 1.75rem auto 0; }
.chat-bubble { position: relative; width: fit-content; max-width: 100%; background: #d9fdd3; color: #102519; border-radius: 18px 3px 18px 18px; padding: 1rem 1.4rem 0.55rem; margin: 2rem 0 0; transform-origin: 100% 0; }
.chat-bubble::before { content: ''; position: absolute; right: -10px; top: 0; border-top: 14px solid #d9fdd3; border-right: 12px solid transparent; }
.chat-bubble p { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.chat-bubble__meta { display: flex; direction: ltr; gap: 0.4rem; align-items: center; font-size: 0.75rem; color: #54665a; margin-top: 0.35rem; }
.chat-bubble__checks { color: #087dac; font-family: system-ui, sans-serif; font-size: 1rem; letter-spacing: -0.25em; padding-right: 0.25em; }

/* ============================================================
   10. שישה שלבים — קו ועיגולים קבועים מימין, כרטיסים נכנסים משמאל
   ============================================================ */
.process .section__title { max-width: 14ch; margin-bottom: clamp(3rem, 7vw, 6rem); }
.process__timeline { --dot-size: 56px; --rail-gap: clamp(1rem, 4vw, 4rem); position: relative; max-width: 1080px; margin-inline-start: auto; }
.process__track { position: absolute; right: calc(var(--dot-size) / 2 - 1px); top: 3rem; bottom: 3rem; width: 2px; background: #333; }
.process__fill { position: absolute; inset: 0; background: var(--lime); transform-origin: top; }
.process__list { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.step { position: relative; padding-inline-start: calc(var(--dot-size) + var(--rail-gap)); }
.step__dot { position: absolute; z-index: 2; right: 0; top: calc(3rem - var(--dot-size) / 2); width: var(--dot-size); height: var(--dot-size); display: grid; place-items: center; border: 1px solid #555; border-radius: 50%; background: #080808; color: #aaa; font-family: var(--font-heading); font-size: 1.3rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.step__dot.is-lit { background: var(--lime); color: #000; border-color: var(--lime); box-shadow: 0 0 26px rgba(196, 255, 61, 0.22); }
.step__card { position: relative; border: 1px solid var(--line); background: rgba(15, 15, 15, 0.94); border-radius: 20px; padding: clamp(1.4rem, 4vw, 3rem); }
.step__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; margin-bottom: 1.25rem; }
.step__day { display: block; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1.1; }
.step__name { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.step__card p { color: rgba(255, 255, 255, 0.75); font-size: clamp(1.05rem, 1.45vw, 1.3rem); }
.step--launch .step__card { background: var(--lime); color: #000; border-color: var(--lime); }
.step--launch .step__card p { color: #26320c; }
.process__confetti { position: absolute; inset: -90px 0; width: 100%; height: calc(100% + 180px); pointer-events: none; z-index: 3; }
.no-js .step__dot, .reduced-motion .step__dot { background: var(--lime); color: #000; border-color: var(--lime); }
.no-js .studio-card, .reduced-motion .studio-card { aspect-ratio: auto; cursor: default; }
.no-js .studio-card__tilt, .no-js .studio-card__rotor,
.reduced-motion .studio-card__tilt, .reduced-motion .studio-card__rotor { position: relative; transform: none; }
.no-js .studio-card__rotor, .reduced-motion .studio-card__rotor { display: grid; gap: 1rem; }
.no-js .studio-card__face, .reduced-motion .studio-card__face { position: relative; transform: none; min-height: 280px; padding: 2rem; }
.no-js .studio-card__number, .reduced-motion .studio-card__number { font-size: 8rem; }
.no-js .studio-card__speed, .reduced-motion .studio-card__speed { font-size: 3.5rem; }
.no-js .studio-card__hint, .reduced-motion .studio-card__hint { display: none; }
@media (max-width: 767px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__visual { grid-row: 1; }
  .studio-card { width: min(85%, 340px); }
  .studio-card__number { font-size: 10rem; }
  .studio-card__speed { font-size: 3.8rem; }
  .process__timeline { --dot-size: 40px; --rail-gap: 14px; }
  .step__dot { font-size: 1rem; }
  .step__title { display: block; }
  .step__day { margin-bottom: 0.25rem; }
  .step__card { padding: 1.2rem; border-radius: 14px; }
}

/* ---------- שאלות: קווים דקים, תזוזה ימינה ופתיחה בגובה טבעי ---------- */
.faq .section__title { max-width: 12ch; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.faq__list { max-width: 1050px; margin-inline-start: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0.5rem; list-style: none; cursor: pointer; font-family: var(--font-heading); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__question { display: inline-block; transition: transform 0.3s ease, color 0.3s ease; }
.faq__item summary:is(:hover, :focus-visible) .faq__question { transform: translateX(8px); color: var(--lime); }
.faq__plus { flex: 0 0 1.2em; text-align: center; font-family: var(--font-body); font-size: 2rem; line-height: 1; transition: transform 0.4s ease; }
.faq__item[open]:not(.is-closing) .faq__plus { transform: rotate(45deg); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding: 0.25rem 0.5rem 1.8rem 2.5rem; color: var(--muted); font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

/* ---------- טופס: כותרת ענקית ושדות עם קו תחתון בלבד ---------- */
.contact { border-top: 1px solid var(--line); }
.contact__title { font-size: clamp(3.5rem, 17vw, 15rem); line-height: 1.05; margin-bottom: 1rem; white-space: nowrap; }
.contact__question { display: inline-block; transform-origin: 50% 20%; animation: contact-swing 3.5s ease-in-out infinite; }
@keyframes contact-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.contact__sub { max-width: 42ch; font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--muted); }
.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); }
.form__field { position: relative; min-width: 0; padding-top: 1.4rem; align-self: start; }
.form__field input, .form__field textarea { display: block; width: 100%; padding: 0.7rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.4); border-radius: 0; background: transparent; outline: none; font-size: 1.25rem; box-shadow: none; }
.form__field input { height: 3.5rem; }
.form__field input[type="tel"] { text-align: right; }
.form__field textarea { resize: vertical; min-height: 6rem; max-height: 14rem; }
.form__field label { position: absolute; top: 2.1rem; right: 0; pointer-events: none; transform-origin: right top; font-size: 1.25rem; color: var(--muted); transition: transform 0.25s ease, color 0.25s ease; }
.form__field:focus-within label, .form__field :is(input, textarea):not(:placeholder-shown) + label { transform: translateY(-1.7rem) scale(0.8); color: var(--fg); }
.form__field:focus-within label { color: var(--lime); }
.form__line { display: block; position: relative; height: 2px; margin-top: -2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform 0.35s ease; pointer-events: none; }
.form__field:focus-within .form__line { transform: scaleX(1); }
.form__field [aria-invalid="true"] { border-bottom-color: #ff9caa; }
.form__field--message { grid-column: 1 / -1; }
.form__actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 3rem; padding-top: 0.5rem; }
.form__submit { min-height: 64px; padding-inline: 2.2em; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.form__submit:disabled { opacity: 0.65; cursor: wait; }
.contact__whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; font-size: 1.25rem; }
.contact__whatsapp span { display: inline-block; transition: transform 0.3s ease; }
.contact__whatsapp:is(:hover, :focus-visible) span { transform: translateX(8px); }
.form__consent, .form__status { grid-column: 1 / -1; }
.form__consent { color: var(--muted); font-size: 1rem; margin-top: -1rem; }
.form__error, .form__status { color: #ff9caa; font-size: 1rem; }
.form__error { padding-top: 0.5rem; }
.form__status:empty { display: none; }
.form__success { min-height: 350px; padding-block: 5rem; overflow: hidden; }
.form__success h3 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.2; color: var(--lime); }
.form__rocket { display: inline-block; }
[hidden] { display: none !important; }

/* ---------- פוטר: לוגו רחב, זוהר סגול ושלוש עמודות ---------- */
.footer { isolation: isolate; overflow: hidden; padding-block: 3rem 4rem; border-top: 1px solid var(--line); }
.footer__glow { position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 950px); height: 65%; top: 10%; left: 15%; border-radius: 50%; background: var(--accent); opacity: 0.32; filter: blur(120px); }
.footer__logo { display: flex; align-items: center; justify-content: center; width: 100%; font-size: clamp(12rem, 90vw, 84rem); line-height: 0.95; }
.footer__logo span { display: inline-block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.footer__logo:is(:hover, :focus-visible) span:first-child { transform: translateX(0.055em); }
.footer__logo:is(:hover, :focus-visible) span:last-child { transform: translateX(-0.055em); }
.footer__tagline { text-align: center; max-width: none; font-size: clamp(1.25rem, 3vw, 2.5rem); margin-block: 1.5rem 5rem; }
.footer__columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.footer__column h3 { margin-bottom: 0.7rem; }
.footer__link { position: relative; display: inline-block; padding-block: 0.35rem; max-width: 100%; overflow-wrap: anywhere; }
.footer__link::after { content: ''; position: absolute; bottom: 0.15rem; right: 0; width: 100%; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform 0.35s ease; }
.footer__link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.footer__small { color: var(--muted); font-size: 1rem; }
.footer__small h3 { color: var(--fg); }
.footer__small p { margin-top: 1rem; }
:is(.faq, .contact, .footer, .whatsapp-float) :is(a, button, summary):focus-visible, .whatsapp-float:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
@media (max-width: 767px) {
  .contact__title { font-size: clamp(3.5rem, 20vw, 9rem); }
  .form { grid-template-columns: 1fr; gap: 1.75rem; }
  .form__actions { gap: 1rem 1.5rem; }
  .form__submit { width: 100%; }
  .contact__whatsapp { margin-inline: auto; }
  .form__consent { margin-top: 0; }
  .footer__columns { grid-template-columns: 1fr; gap: 2rem; }
  .footer__tagline { margin-bottom: 3rem; }
}

/* ============================================================
   מובייל / מגע — אין סמן מותאם
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ============================================================
   prefers-reduced-motion — הכול סטטי
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .preloader { display: none; }
  .preloader__char { opacity: 1; }
  .cursor { display: none; }
  .has-cursor, .has-cursor * { cursor: auto !important; }
  .spotlight { --sx: 50vw; --sy: 50vh; }
  .whatsapp-float.is-visible, .contact__question { animation: none; }
  .faq__item summary:is(:hover, :focus-visible) .faq__question,
  .contact__whatsapp:is(:hover, :focus-visible) span,
  .footer__logo:is(:hover, :focus-visible) span { transform: none; }
  .header--hidden { transform: none; }
  .scroll-hint__ring { animation: none; }
  /* פס נע: שורה אחת סטטית שנשברת לשורות */
  .marquee__track { width: 100%; }
  .marquee__text { white-space: normal; }
  .marquee__row--reverse { display: none; }
  /* סקשנים 6–7: בלי sticky ובלי גלילה מיותרת — תוכן סטטי רגיל */
  .show, .leads { min-height: 0; padding-block: var(--section-y); }
  .show__sticky, .leads__sticky { position: static; min-height: 0; padding-block: 0; }
  .leads__content { min-height: 0; gap: 2rem; }
}

/* תיקוני איכות: תוכן יציב, מיקוד גלוי, ומידות שאינן תלויות בקנבס. */
:root { --muted: #b8b8b8; }
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--lime); outline-offset: 5px;
}
.header:focus-within { transform: none; }
section, main { scroll-margin-top: 90px; }
.skip-link {
  position: fixed; z-index: 2000; top: 1rem; right: 1rem;
  padding: 0.7rem 1.3rem; background: var(--lime); color: #000;
  border-radius: 6px; transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid > *, .work-row > * { min-width: 0; }
.hero { padding-block: 7rem 9rem; }
.hero__title-visual {
  display: block;
  min-height: 2.24em;
  line-height: 1.12;
  /* כותרת הגיבור היא מוקד העין: הגדלה + הילה סגולה שמפרידה מהרקע התלת־ממדי */
  font-size: clamp(3.2rem, 10.4vw, 9.25rem);
  -webkit-text-stroke: 1.25px rgba(0, 0, 0, 0.48);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.98),
    0 0 5px rgba(0, 0, 0, 1),
    0 0 20px rgba(0, 0, 0, 1),
    0 0 42px rgba(124, 58, 237, 0.78),
    0 0 78px rgba(196, 255, 61, 0.2);
  transform-origin: 50% 60%;
  animation: hero-title-float 5.8s ease-in-out -1.2s infinite;
  will-change: transform;
}
/* ריחוף איטי ועדין — הכותרת מרגישה חיה בלי להפוך לאפקט מסיח */
@keyframes hero-title-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-0.45deg); }
}
.hero__canvas { opacity: 0.70; }
.hero__sub, .hero__note, .hero__kicker { color: #d4d4d4; }
.hero .mask { overflow: visible; }
:is(.wchar, .char, .rw, .stat, .preloader__char) { will-change: auto; }
.studio-card__speed { font-size: clamp(2rem, 5.5vw, 5.6rem); }
.studio-card__face { padding: 1rem; }
.scene--show { min-height: 0; }
[data-scene] canvas { width: 100%; height: 100%; }
.work__bg::after { background: rgba(0, 0, 0, 0.85); }
/* פוקוס על כפתור בתוך reveal חייב להיות גלוי גם לפני גלילה אליו. */
[data-reveal]:focus-within { opacity: 1 !important; visibility: visible !important; }
@media (max-width: 840px) {
  .nav { height: 100dvh; overflow-y: auto; gap: clamp(1rem, 4vh, 2rem); padding-block: 90px 2rem; }
  .nav.is-open { clip-path: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay.is-open,
  .nav-overlay.is-closing,
  .nav-overlay__link,
  .nav-overlay.is-open .nav-overlay__link {
    transition-duration: 0.001ms;
  }
  .nav-overlay.is-open .nav-overlay__link:is(:hover, :focus-visible),
  .nav-overlay__close:is(:hover, :focus-visible) { transform: none; }
}
@media (max-width: 767px) {
  .hero__canvas { opacity: 0.58; }
  .hero__actions { gap: 0.75rem; }
  .hero__actions .btn { width: 100%; padding-inline: 1rem; }
  .hero__note { max-width: 100%; }
  .stat__inner { background: #101010; backdrop-filter: none; }
  .stat { animation: none; }
  .spotlight { display: none; }
  .studio-card__tilt, [data-magnetic] { transform: none !important; }
  .scene--show { height: min(42svh, 360px); }
}
/* תנועה מופחתת נשארת קריאה גם כשההעדפה משתנה באמצע אנימציה. */
.reduced-motion .spotlight, .reduced-motion .cursor { display: none; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; }
.reduced-motion :is([data-reveal], .rw, .char, .wchar, .hero, .hero__content, .stat) { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.reduced-motion :is(.rmask, .mask) { overflow: visible !important; }
.reduced-motion .marquee__track, .no-js .marquee__track { width: 100%; transform: none !important; will-change: auto; }
.reduced-motion .marquee__text, .no-js .marquee__text { flex: 0 1 100%; min-width: 0; width: 100%; white-space: normal; padding-inline: var(--gutter); }
.reduced-motion .marquee__text[aria-hidden], .no-js .marquee__row--reverse, .reduced-motion .marquee__row--reverse { display: none; }
.reduced-motion .show, .reduced-motion .leads, .no-js .show, .no-js .leads { min-height: 0; padding-block: var(--section-y); }
.reduced-motion .show__sticky, .reduced-motion .leads__sticky, .no-js .show__sticky, .no-js .leads__sticky { position: relative; min-height: 0; padding-block: 0; }
.reduced-motion .leads__sticky { display: flex; flex-direction: column; }
.reduced-motion .leads__content { min-height: 0; gap: 2rem; padding-block: 2rem; order: -1; }
.reduced-motion .scene--leads { position: relative; height: 360px; min-height: 0; }
.reduced-motion .studio-card.is-flipped .studio-card__rotor { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .spotlight { display: none; }
  .marquee__text { flex: 0 1 100%; min-width: 0; width: 100%; }
}
/* מסכות כניסה שיוצאות מהגאטר אינן יוצרות גלילה אופקית של מסמך RTL. */
html, body { overflow-x: clip; }