/* ============================================================
   O Studio — Design System (Light)
   שפה: לבן נקי, ליקוויד גלאס לבן, הגרפיקה (חלקיקים/גרפים) שחורה —
   והכחול מופיע רק בנגיעות ממוקדות. היפוך של ערכת ה-Raycast הכהה.
   ============================================================ */

:root {
  /* ============ סולם טיפוגרפי אחד (v39) ============
     מבנה לפי ה-HIG: לכל step גודל + גובה שורה + משקל + tracking.
     ה-tracking עוקב אחרי הטבלה של אפל: השלילי מרוכז ב-15–23px,
     חוזר ל-~0 בכותרות ענק, וחיובי קל מתחת ל-14px (שם זה משפר קריאות).
     לפני v39 היו בקובץ 39 גדלי טקסט שונים — בלי שום סולם. */
  --t-display:   clamp(2.5rem, 5.3vw, 4.75rem);   /* 40 → 76px */
  --lh-display:  1.05;
  --tr-display:  -0.021em;

  --t-title-1:   clamp(1.875rem, 3.05vw, 2.75rem);/* 30 → 44px */
  --lh-title-1:  1.1;
  --tr-title-1:  -0.019em;

  --t-title-2:   clamp(1.5rem, 2.2vw, 2rem);      /* 24 → 32px */
  --lh-title-2:  1.15;
  --tr-title-2:  -0.016em;

  --t-title-3:   1.5rem;                          /* 24px */
  --lh-title-3:  1.3;
  --tr-title-3:  -0.012em;

  --t-lead:      clamp(1.125rem, 1.4vw, 1.3125rem); /* 18 → 21px */
  --lh-lead:     1.5;
  --tr-lead:     -0.006em;

  --t-body:      1.0625rem;                       /* 17px */
  --lh-body:     1.6;

  --t-callout:   1rem;                            /* 16px */
  --lh-callout:  1.55;

  --t-footnote:  0.9375rem;                       /* 15px */
  --lh-footnote: 1.5;
  --tr-footnote: 0.006em;

  --t-caption:   0.8125rem;                       /* 13px */
  --lh-caption:  1.4;
  --tr-caption:  0.01em;

  --t-stat:      clamp(1.625rem, 2vw, 2rem);      /* מספרים גדולים — step משלהם */
  --t-stat-sm:   1.5rem;
  --t-micro:     0.75rem;                         /* 12px — הרצפה. אין מתחת */
  --lh-micro:    1.3;
  --tr-micro:    0.016em;

  /* ============ סולם מרווחים — רשת 8 (אפל) ============ */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px; --s9: 96px;  --s10: 128px;

  /* צבעים — לבן נקי */
  --bg:        #F5F5F7;   /* רקע העמוד — אפור-בהיר בסגנון אפל, לא לבן בוהק (v31) */
  --bg-soft:   #F5F5F7;   /* legacy */
  --bg-white:  #FBFBFD;   /* אזורים "לבנים" — כמעט-לבן של אפל */
  --bg-tint:   #E9EFF9;   /* אזור תכלת — הגוון הכחול בעוצמה נמוכה */
  --bg-2:      #EDF1F8;
  --ink:       #1D1D1F;   /* כותרות / טקסט ראשי — השחור של אפל, רך יותר */
  --ink-2:     #2C2C30;
  --body:      #515154;   /* טקסט גוף — אפור ניטרלי (אפל: secondary) */
  --muted:     #86868B;   /* משני */
  --line:      rgba(13,18,32,.08);
  --line-2:    rgba(13,18,32,.15);
  --line-dark: rgba(13,18,32,.10);

  /* פלטת כחול בלבד — גוון אחד וגווניו (מכויל לקריאות על לבן) */
  --blue:      #3B68F5;   /* כחול ראשי */
  --blue-deep: #2749C8;   /* כחול עמוק */
  --sky:       #6E9BFF;   /* כחול בהיר */
  --violet:    #5E88FF;   /* legacy — ממופה לכחול */
  --ice:       rgba(59,104,245,.10);   /* תגית/אייקון — רקע כחול שקוף */

  /* "גרדיאנט זוהר" — אותו כחול בעוצמות שונות, לא מעבר-צבע */
  --grad: linear-gradient(120deg, var(--sky), var(--blue));

  /* זכוכית נוזלית לבנה — חצי-שקופה, מטשטשת את מה שמאחוריה */
  --glass:      rgba(255,255,255,.58);
  --glass-strong: rgba(255,255,255,.75);
  --glass-brd:  rgba(13,18,32,.08);
  /* הבהקת קצה עליון — האור נופל מלמעלה */
  --rim:        inset 0 1px 0 rgba(255,255,255,.9);
  --depth:      0 10px 30px rgba(18,29,63,.07);

  /* טיפוגרפיה — IBM Plex בכל האתר: Sans Hebrew לכותרות ולגוף, Mono למספרים/תגיות */
  --font: 'Heebo', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Heebo', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* עומק — צללים רכים כחלחלים, כמו Stripe */
  --shadow-s: 0 1px 2px rgba(18,29,63,.06), 0 2px 10px rgba(18,29,63,.05);
  --shadow-m: 0 4px 12px rgba(18,29,63,.07), 0 18px 42px rgba(18,29,63,.09);
  --shadow-l: 0 24px 60px rgba(18,29,63,.13);

  --radius: 16px;
  --radius-s: 10px;

  --nav-h: 68px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: var(--t-body);
}

/* גרעין פילם עדין מעל הכל — תחושת פרימיום, שובר את ה"דיגיטלי מדי" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .018; /* עדין מאוד — לא מלכלך את הלבן */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

.mono { font-family: var(--mono); }

/* קישור דילוג — מוצג רק בפוקוס מקלדת */
.skip-link {
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 99px;
  font-weight: 600;
  font-size: var(--t-footnote);
  transform: translateY(-200%);
  transition: transform .2s ease;
  letter-spacing: var(--tr-footnote);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--blue-deep); outline-offset: 2px; }

body.no-scroll { overflow: hidden; }

/* ===== Layout ===== */
.container {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}
.container-narrow { width: min(760px, 100% - 48px); }

.section { padding: clamp(80px, 7vw, 128px) 0; position: relative; }
.section-soft { background: var(--bg-soft); }

/* טיפת צבע מאחורי הזכוכית — כדי שהליקוויד גלאס ייקרא על לבן,
   חייבת להיות "גרפיקה" עדינה שהכרטיסים מטשטשים דרכם (הלקח מ-v7/v14) */
#products, #pricing, #faq { position: relative; }
#products {
  background:
    radial-gradient(560px 340px at 16% 18%, rgba(99,140,255,.07), transparent 70%),
    radial-gradient(640px 380px at 86% 78%, rgba(99,140,255,.05), transparent 70%);
}
#pricing {
  background:
    radial-gradient(600px 360px at 50% 30%, rgba(99,140,255,.06), transparent 70%),
    radial-gradient(520px 320px at 12% 82%, rgba(13,18,32,.03), transparent 70%);
}
#faq {
  background:
    radial-gradient(560px 340px at 82% 22%, rgba(99,140,255,.05), transparent 70%),
    var(--bg-white);
}

[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ===== Typography ===== */
/* IBM Plex Sans Hebrew — המשקל המקסימלי הוא 700 */
h1, h2, h3, h4, .logo { font-family: var(--font-display); font-weight: 700; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }

/* כותרות באנגלית בתוך העמוד ה-RTL: קוראות LTR; היישור נקבע לפי ההקשר */
.en { direction: ltr; unicode-bidi: isolate; }
.custom-hero-copy .en { text-align: right; }

/* שבירת שורות מאוזנת — בלי מילה בודדת שנופלת לשורה שנייה */
h1, h2 { text-wrap: balance; }

h1 { font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
h2 { font-size: var(--t-title-1);
  line-height: var(--lh-title-1);
  letter-spacing: var(--tr-title-1);
}
h3 { font-size: var(--t-title-3); letter-spacing: var(--tr-title-3);
  line-height: var(--lh-title-3);
}

.lead {
  font-size: var(--t-lead);
  color: var(--body);
  max-width: 34em;
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}

/* ה-eyebrows (השורה הקטנה עם הקו והנקודות מעל כל כותרת) הוסרו ב-v40 —
   עופק: "תוריד מכל האתר את סוג השורות האלה, הכל נראה AI". לא להחזיר. */

/* ההדגשה בכותרות — כחול מלא, בלי זוהר (זוהר על לבן נראה מרוח) */
.grad-text { color: var(--blue); }

/* ראשי סקשנים ממורכזים — עברית ואנגלית חיות יחד בלי יישור שבור */
.section-head { max-width: 640px; margin-inline: auto; margin-bottom: var(--s8); text-align: center; }
.section-sub { color: var(--body); margin-top: var(--s4); font-size: var(--t-lead); margin-inline: auto; max-width: 40em;
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}

/* ===== Buttons ===== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 99px;
  font-weight: 600;
  font-size: var(--t-callout);
  line-height: 1;
  /* ease-out חד (v41) — הכפתור מגיב מיד ומתיישב, בלי overshoot קפיצי */
  transition: transform .16s var(--ease-out), box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: scale(.97); transition-duration: .08s; filter: brightness(.94); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.btn-sm { padding: 10px 20px; font-size: var(--t-footnote);
  letter-spacing: var(--tr-footnote);
}
.btn-block { width: 100%; }

/* כפתור ראשי — שחור על לבן (ההיפוך של לבן-על-שחור) */
.btn-dark {
  background: linear-gradient(180deg, #232A3A, #0B0F19);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(11,15,25,.25);
}
.btn-dark:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(11,15,25,.34); }

.btn-blue {
  /* v41: הקצה העליון היה #547FFF — לבן עליו 3.6:1. עכשיו 4.5:1 ומעלה לכל אורך הגרדיאנט */
  background: linear-gradient(180deg, #3E6BF7, #3157E6);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 26px rgba(59,104,245,.38);
}
.btn-blue:hover { background: linear-gradient(180deg, #4A75FF, var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 32px rgba(59,104,245,.5); }

.btn-outline {
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-s);
}
.btn-outline:hover { border-color: rgba(13,18,32,.3); background: #fff; }

.btn-ghost-light { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.btn-ghost-light:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }

/* קישור-חץ: בעברית קדימה = שמאלה */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--t-callout);
  color: var(--blue);
  line-height: var(--lh-callout);
}
.arrow-link::after {
  content: "←";
  transition: transform .18s ease;
}
.arrow-link:hover::after { transform: translateX(-4px); }
.arrow-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.arrow-link-light { color: var(--sky); }

/* ===== Pills ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  border: 1px solid rgba(13,18,32,.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); /* זכוכית — מטשטש את מה שמאחורי */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.pill-live { background: rgba(59,104,245,.10); color: var(--blue-deep); }
.pill-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(59,104,245,.8); }
.pill-soon { background: var(--ice); color: var(--blue-deep); }
/* התג צף בתוך הכרטיס (לא על הקצה — overflow:hidden של הזכוכית חותך שם) */
.pill-featured {
  position: absolute;
  top: 18px;
  inset-inline-start: auto;
  inset-inline-end: 18px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59,104,245,.35);
}

/* ===== Nav ===== */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  /* Liquid Glass — הערכים של apple.com: 72% לבן, blur 20, saturate 180% */
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: var(--line);
}

.nav-inner {
  position: relative; /* עוגן ללוגו הממורכז */
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* הלוגו — במרכז הנאב, מוגדל */
.nav .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav .logo-lockup { height: 20px; }

/* הלוגו הוא נכס וקטורי אחד (logo.svg) — הפרופורציות נעולות בתוך ה-SVG,
   כאן קובעים לו רק גובה. לא לפרק אותו לסמל+טקסט: זה מה שמעוות אותו. */
.logo { display: inline-flex; align-items: center; }
.logo-lockup { height: 22px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 30px;
}
.nav-links a {
  position: relative;
  font-size: var(--t-callout);
  font-weight: 500;
  color: var(--body);
  transition: color .15s ease;
  line-height: var(--lh-callout);
  padding: 10px 0; /* אזור לחיצה 44px (HIG) — הנאב ממורכז אנכית, שום דבר לא זז */
}
.nav-links a:hover { color: var(--ink); }

/* scrollspy — הסקשן הנוכחי מסומן */
.nav-links a[aria-current="true"] { color: var(--ink); }
.nav-links a[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  inset-inline: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.nav-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-contact { font-size: var(--t-callout);
  line-height: var(--lh-callout);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
}
.nav-burger span {
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: none;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 88px) 0 0;
  overflow: hidden;
  background: transparent; /* שקוף — כדי שקנבס הגל (z-index שלילי) ייראה מאחור */
}
/* הרקע לבן נקי — הגל (דיו שחור) הוא הגרפיקה היחידה */

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* הגל נמס אל הלבן לפני אזור חלון הדמו */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 82%);
}

/* בוטל — רקע לבן נקי, בלי טקסטורה */
.hero-grid { display: none; }

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .lead { margin-top: 22px;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-cta-center { justify-content: center; }

.hero-points {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-footnote);
  font-weight: 500;
  color: var(--body);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 16px;
  box-shadow: var(--shadow-s);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.hero-points li::before {
  content: "";
  width: 15px; height: 15px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat,
    var(--blue);
}

/* חלון דמו — זכוכית לבנה, ממשק בהיר, הגרפים דיו שחור + נגיעה כחולה */
.hero-window-wrap { margin-top: 72px; position: relative; }
.hero-window {
  direction: ltr;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--rim), var(--shadow-l);
  overflow: hidden;
  max-width: 880px;
  margin-inline: auto;
  animation: floatWin 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes floatWin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hw-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(13,18,32,.025);
}
.hw-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(13,18,32,.12); }
.hw-title {
  margin: 0 auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--muted);
  background: rgba(13,18,32,.035);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 14px;
  letter-spacing: var(--tr-micro);
}
.hw-body { display: flex; min-height: 300px; }
.hw-side {
  width: 64px;
  border-inline-end: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hw-side-item {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(13,18,32,.05);
}
.hw-side-item.active { background: var(--ice); box-shadow: inset 0 0 0 1.5px var(--blue); }
/* אור כחלחל עדין מוכל בתוך החלון (overflow:hidden חותך אותו) */
.hw-main {
  flex: 1;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(99,140,255,.06), transparent 55%),
    radial-gradient(90% 90% at 95% 120%, rgba(99,140,255,.04), transparent 55%);
}
.hw-row { height: 11px; border-radius: 6px; background: rgba(13,18,32,.06); }
.hw-row.w40 { width: 40%; } .hw-row.w60 { width: 60%; }
.hw-row.w75 { width: 75%; } .hw-row.w90 { width: 90%; }
.hw-cards { display: flex; gap: 14px; margin: 6px 0; }
.hw-card {
  flex: 1;
  height: 88px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: flex-end;
  background: rgba(255,255,255,.5);
}
/* הגרפים = דיו שחור — כמו הגל */
.hw-spark {
  width: 100%; height: 42px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(13,18,32,.72), rgba(13,18,32,.05));
  clip-path: polygon(0 70%, 18% 55%, 36% 62%, 55% 30%, 74% 42%, 100% 12%, 100% 100%, 0 100%);
}
/* גרף אחד כחול — הנגיעה הממוקדת בתוך החלון */
.hw-spark.s2 { clip-path: polygon(0 85%, 20% 60%, 42% 70%, 60% 38%, 82% 50%, 100% 22%, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(59,104,245,.8), rgba(59,104,245,.06)); }
.hw-spark.s3 { clip-path: polygon(0 60%, 22% 68%, 40% 45%, 62% 55%, 80% 28%, 100% 35%, 100% 100%, 0 100%); }

/* ===== Cards ===== */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  position: relative;
  /* זכוכית לבנה עם טיפת אור כחלחל מהמרכז */
  background:
    radial-gradient(75% 65% at 50% 44%, var(--card-glow, rgba(99,140,255,.045)), transparent 72%),
    var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--rim), var(--depth);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .35s ease;
}
/* פס עליון כחול שנדלק ב-hover — הנגיעה */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 16%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--card-line, rgba(59,104,245,.75)), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: var(--rim), 0 18px 44px rgba(18,29,63,.12);
    background:
      radial-gradient(80% 70% at 50% 44%, var(--card-glow-hi, rgba(99,140,255,.08)), transparent 72%),
      var(--glass-strong);
  }
  .card:hover::before { opacity: .7; }
}

.product-card { display: flex; flex-direction: column; gap: 10px; }
.product-card p { color: var(--body); font-size: var(--t-callout); flex: 1;
  line-height: var(--lh-callout);
}
.product-card .arrow-link { margin-top: 8px; }

/* כרטיסי מוצר — ליקוויד גלאס לבן עם "טיפת כחול" בפנים:
   הכרטיס זכוכית לבנה, ומקור אור כחלחל עדין הוא ::after —
   blob מטושטש שחי *בתוך* הזכוכית, חתוך ב-overflow:hidden.
   האלמנטים הפנימיים (מיני-חלון, אייקון, תגיות) הם זכוכית בעצמם. */
.product-card {
  overflow: hidden;
  background: rgba(255,255,255,.6);
  border-color: var(--card-brd);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 40px rgba(18,29,63,.08);
}
/* מקור האור — בתוך הכרטיס, מאחורי התוכן */
.product-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; top: -34%;
  width: 130%; height: 88%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--card-hue-hi), var(--card-hue) 46%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  transition: opacity .35s ease;
  opacity: .85;
}
.product-card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    background: rgba(255,255,255,.72);
    border-color: var(--card-brd-hi);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 20px 48px rgba(18,29,63,.12);
  }
  .product-card:hover::after { opacity: 1; }
}

/* טיפת כחול עדינה בכל הכרטיסים — הזכוכית עצמה לבנה */
.product-card {
  --card-hue-hi: rgba(99,140,255,.14); --card-hue: rgba(99,140,255,.055);
  --card-halo: rgba(99,140,255,.2); --card-brd: rgba(13,18,32,.08); --card-brd-hi: rgba(13,18,32,.14);
  --card-line: rgba(59,104,245,.75);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
/* אייקון אפליקציה בסגנון אפל — ריבוע מעוגל זכוכיתי עם הבהקה */
.card-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3); /* זכוכית על אור הכרטיס */
  border: 1px solid rgba(13,18,32,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(18,29,63,.08);
  color: var(--ink-2);
}
.card-icon svg { width: 22px; height: 22px; }

.card-tag {
  font-size: var(--t-micro);
  color: var(--muted);
  letter-spacing: var(--tr-micro);
  line-height: var(--lh-micro);
}

/* מיני-חלון דקורטיבי בראש כרטיס מוצר — זכוכית לבנה, גרפיקה דיו שחור */
.mini-win {
  border: 1px solid rgba(13,18,32,.08);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: 20px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.mw-bar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(13,18,32,.025);
}
.mw-bar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(13,18,32,.14); }
.mw-body { height: 108px; padding: 14px; }

.mw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mw-grid i { border-radius: 6px; background: rgba(13,18,32,.06); }
.mw-grid i:first-child { background: linear-gradient(120deg, rgba(13,18,32,.7), rgba(13,18,32,.35)); opacity: .85; }

.mw-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
/* עמודות הגרף = דיו שחור */
.mw-chart i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(13,18,32,.8), rgba(13,18,32,.3));
  opacity: .6;
}
/* עמודה אחת כחולה — הנגיעה הממוקדת */
.mw-chart i:nth-child(4) { opacity: 1; background: linear-gradient(180deg, var(--sky), var(--blue)); }

.mw-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.mw-list i { height: 11px; border-radius: 6px; background: rgba(13,18,32,.06); }
.mw-list i:nth-child(1) { width: 85%; background: rgba(13,18,32,.14); }
.mw-list i:nth-child(2) { width: 65%; }
.mw-list i:nth-child(3) { width: 75%; }
.mw-list i:nth-child(4) { width: 45%; }

/* ===== Steps — ציר זמן אופקי ===== */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
/* הקו המחבר — נעצר מאחורי העיגולים */
.steps::before {
  content: "";
  position: absolute;
  top: 22px;
  inset-inline-start: 22px;
  inset-inline-end: calc(33.333% - 22px);
  height: 2px;
  background: linear-gradient(to left, transparent, rgba(13,18,32,.18) 50%, transparent);
}
.step-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--rim), 0 4px 12px rgba(18,29,63,.08);
  color: var(--ink-2);
  font-size: var(--t-footnote);
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: var(--tr-footnote);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--body); font-size: var(--t-callout); max-width: 30ch;
  line-height: var(--lh-callout);
}

/* ===== אזורים שחורים — מחלקים את הדף לאזורים (שחור על האתר הלבן) ===== */
.section-dark, .final-cta {
  background: #05060B;
  color: #fff;
  overflow: hidden;
}
/* בתוך האזור השחור — ההדגשה חוזרת לכחול זוהר */
.section-dark .grad-text, .final-cta .grad-text {
  color: #7DA7FF;
  text-shadow: 0 0 10px rgba(78,124,255,.5), 0 0 32px rgba(78,124,255,.28);
}

/* בוטל — שום טקסטורה על הרקע */
.dark-dots { display: none; }

.dark-glow { display: none; } /* בוטל — אין צבע שדולף על הרקע */
.glow-2 { inset-inline-end: auto; inset-inline-start: -220px; top: auto; bottom: -320px; }

.lead-light {
  font-size: var(--t-lead);
  color: rgba(255,255,255,.68);
  max-width: 32em;
  margin-top: 18px;
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}

/* ===== Custom development — סקשן מוגדל ===== */
.custom-section { padding: 120px 0; }
.glow-3 { display: none; }

.custom-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 108px;
}
.custom-hero-copy h2 {
  color: #fff;
  font-size: var(--t-title-1);
  margin: 14px 0 22px;
  line-height: var(--lh-title-1);
  letter-spacing: var(--tr-title-1);
}
.custom-hero-copy .hero-cta { margin-top: 30px; }

.custom-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
}
.custom-badges li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-footnote);
  color: rgba(255,255,255,.72);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.custom-badges li::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat,
    var(--blue);
}

/* אזור האובייקט התלת-ממדי */
.custom-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 360px;
}
/* זוהר צמוד לאובייקט בלבד — אור לבן, נקרא כאור של הבלוב על השחור */
.custom-visual::before {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.05) 45%, transparent 64%);
  filter: blur(26px);
}
.custom-visual canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* fallback — טבעת זוהרת סטטית אם אין WebGL */
.cv-fallback {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(circle at 66% 70%, rgba(110,160,255,.12), transparent 62%);
  opacity: 0;
}
.custom-visual.no-webgl .cv-fallback { opacity: 1; }

/* התהליך */
.custom-process-head { text-align: center; margin-bottom: 52px; }
.custom-process-head h3 {
  color: #fff;
  font-size: var(--t-title-2);
  letter-spacing: var(--tr-title-2);
  line-height: var(--lh-title-2);
}

.custom-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* כרטיסי התהליך — זכוכית כהה על השחור */
.custom-flow li {
  position: relative;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.42);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.custom-flow li::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .custom-flow li:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 46px rgba(0,0,0,.5);
  }
  .custom-flow li:hover::before { transform: scaleX(1); }
}
.cf-num {
  display: block;
  font-size: var(--t-title-3);
  font-weight: 500;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
  letter-spacing: var(--tr-title-3);
}
.custom-flow h4 { color: #fff; font-size: var(--t-callout); line-height: var(--lh-callout); font-weight: 700; margin-bottom: var(--s2); }
.custom-flow p { color: rgba(255,255,255,.58); font-size: var(--t-callout); line-height: var(--lh-callout); }

/* התמחור הוסר ב-v30. ה-CSS שלו נמחק ב-v39 — היה מת לגמרי. שמור ב-git ב-v29 */

/* ===== FAQ ===== */
.faq-list { display: grid; gap: 14px; }

.faq-item {
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-s);
  padding: 0 24px;
  box-shadow: var(--rim), 0 6px 22px rgba(18,29,63,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--rim), 0 12px 34px rgba(18,29,63,.1); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

.faq-icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ice);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .2s ease;
}
.faq-icon::before { width: 10px; height: 2px; }
.faq-icon::after { width: 2px; height: 10px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); }

.faq-item p {
  color: var(--body);
  font-size: var(--t-callout);
  padding-bottom: 20px;
  max-width: 60ch;
  line-height: var(--lh-callout);
}

/* ===== Final CTA ===== */
.final-cta { text-align: center; }
.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta .hero-cta { margin-top: 32px; }

/* ===== Footer ===== */
.footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 64px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand p {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
}
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h3 {
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.footer-col a {
  font-size: var(--t-callout);
  color: var(--muted);
  transition: color .15s ease;
  line-height: var(--lh-callout);
}
.footer-col a:hover { color: var(--blue); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  font-size: var(--t-footnote);
  color: var(--muted);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}

/* ===== Modal — שיחת אפיון ===== */
.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  width: min(440px, calc(100% - 40px));
  box-shadow: var(--shadow-l);
  color: var(--ink);
  background: #fff;
}
.modal::backdrop {
  background: rgba(15, 20, 40, .35);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.modal-card {
  position: relative;
  padding: 34px 32px 26px;
  display: grid;
  gap: 14px;
}
.modal-sub { color: var(--body); font-size: var(--t-callout); margin-bottom: 6px;
  line-height: var(--lh-callout);
}
.modal-close {
  position: absolute;
  top: 11px;
  inset-inline-end: 11px;
  width: 40px; height: 40px; /* אותו מרכז כמו 34px ב-14px, אזור לחיצה גדול יותר */
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--bg-2); color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* שדה מלכודת לבוטים — מחוץ למסך, לא display:none (בוטים מזהים את זה) */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.field { display: grid; gap: 6px; }
.field label { font-size: var(--t-footnote); font-weight: 600;
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.field-opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: #F8FAFD;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 104, 245, .18);
}
.field textarea { resize: vertical; min-height: 84px; }

.modal-alt { font-size: var(--t-footnote); color: var(--muted); text-align: center;
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.modal-alt a { color: var(--blue); font-weight: 600; }

/* ===== עמודים משפטיים ===== */
.legal { padding: calc(var(--nav-h) + 64px) 0 96px; }
.legal h1 { font-size: var(--t-title-1); margin: 6px 0 10px;
  line-height: var(--lh-title-1);
  letter-spacing: var(--tr-title-1);
}
.legal-updated { color: var(--muted); font-size: var(--t-caption); font-family: var(--mono); margin-bottom: 30px;
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}
/* תיבת אזהרה — טיוטה הטעונה אישור עו"ד */
.legal-notice {
  background: rgba(59,104,245,.06);
  border: 1px solid rgba(59,104,245,.25);
  border-radius: var(--radius-s);
  padding: 14px 18px;
  color: #2745A8;
  font-size: var(--t-footnote);
  margin-bottom: 40px;
}
.legal h2 { font-size: var(--t-title-3); margin: 38px 0 12px;
  line-height: var(--lh-title-3);
  letter-spacing: var(--tr-title-3);
}
.legal h3 { font-size: var(--t-body); margin: 22px 0 8px;
  line-height: var(--lh-body);
}
.legal p, .legal li { color: var(--body); font-size: var(--t-body); line-height: var(--lh-body); }
.legal p { margin-bottom: 12px; }
.legal ul, .legal ol { padding-inline-start: 22px; margin: 0 0 14px; display: grid; gap: 6px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal a { color: var(--blue); }
.legal strong { color: var(--ink-2); }

/* הודעת סטטוס של הטופס */
.form-status {
  text-align: center;
  font-size: var(--t-caption);
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: rgba(59,104,245,.07);
  border: 1px solid rgba(59,104,245,.25);
  color: #2745A8;
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}
.form-status.error {
  background: rgba(214,66,66,.06);
  border-color: rgba(214,66,66,.3);
  color: #B03030;
}

/* שורת משפט קטן מתחת לתמחור + הסכמה במודאל */
.pricing-legal, .field-consent {
  color: var(--muted);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}
.pricing-legal { text-align: center; margin-top: 26px; }
.pricing-legal a, .field-consent a { color: var(--body); text-decoration: underline; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .arrow-link::after { transition: none; }
  .hero-window { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* במסכים צרים אין מקום ללוגו ממורכז בין הקישורים — חוזר לזרימה רגילה */
@media (max-width: 1120px) {
  .nav .logo { position: static; transform: none; }
  .nav .logo-lockup { height: 18px; }
}

@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }

  .custom-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 80px;
  }
  .custom-hero-copy { order: 2; }
  .custom-visual { order: 1; max-width: 420px; margin-inline: auto; width: 100%; min-height: 300px; }
  .custom-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 840px) {
  .section { padding: 72px 0; }
  .container { width: min(1160px, 100% - 40px); }

  /* תפריט מובייל */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; font-size: var(--t-callout); border-bottom: 1px solid var(--line);
  line-height: var(--lh-callout);
}
  .nav-links a:last-child { border-bottom: 0; }
  .nav-burger { display: flex; }
  .nav-contact { display: none;
  font-size: var(--t-callout);
  line-height: var(--lh-callout);
}
  .nav-inner { gap: 16px; }

  .cards-3 { grid-template-columns: 1fr; }

  /* ציר זמן אנכי במובייל */
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before {
    top: 22px;
    bottom: 44px;
    inset-inline-start: 21px;
    inset-inline-end: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(13,18,32,.04), rgba(13,18,32,.18) 50%, rgba(13,18,32,.04));
  }
  .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
  .step-marker { margin-bottom: 0;
  font-size: var(--t-footnote);
  letter-spacing: var(--tr-footnote);
}

  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero-points { gap: 16px; }
  .hero-window-wrap { margin-top: 52px; }
  .hw-body { min-height: 220px; }
  .hw-side { width: 52px; }
  .hw-main { padding: 18px; }
  .hw-cards { flex-direction: column; }
  .hw-card { height: 64px; }

  .custom-strip { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .custom-section { padding: 80px 0; }
  .custom-flow { grid-template-columns: 1fr; }
  .custom-visual { min-height: 260px; }
}

@media (max-width: 400px) {
  .container { width: min(1160px, 100% - 32px); }
  .hero-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .hero-cta .arrow-link { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr }
}

/* ===== Hero — חץ גלילה אל פס האפליקציה (החלון הצף עבר לפס עצמו) ===== */
.hero { padding-bottom: 56px; }
.hero-canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.hero-scroll {
  display: block;
  width: 26px; height: 42px;
  margin: 64px auto 0;
  border: 1.5px solid rgba(13,18,32,.22);
  border-radius: 99px;
  position: relative;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-scroll span {
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--blue);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(14px); opacity: .2; }
}

/* ===== Featured app — פס האפליקציה הראשית ===== */
.featured-section {
  padding-top: 16px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(99,140,255,.07), transparent 70%),
    var(--bg);
}
/* מיכל זכוכית אחד = "הפס". בפנים: חלון וידאו + פרטים והורדה */
.featured {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 36px;
  border-radius: 24px;
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(99,140,255,.10), transparent 60%),
    rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--rim), 0 30px 80px rgba(18,29,63,.12);
}

/* חלון הוידאו — ממשיך את שפת חלון הדמו, עם כפתור הפעלה */
.featured-media { min-width: 0; }
.video-frame {
  position: relative;
  direction: ltr;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--rim), var(--shadow-m);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
}
.video-poster { flex: 1; display: flex; flex-direction: column; }
.video-poster .hw-body { flex: 1; min-height: 0; }
.video-frame video, .video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #000;
}
.video-frame.is-playing .video-poster,
.video-frame.is-playing .video-play,
.video-frame.is-playing .hw-bar { display: none; }

/* כיסוי + כפתור הפעלה. הכחול = הנגיעה */
.video-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55));
  cursor: pointer;
  transition: background .25s ease;
}
.video-play:hover { background: linear-gradient(180deg, rgba(255,255,255,.1) 30%, rgba(255,255,255,.7)); }
.video-play:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.video-play-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #5B84FF, var(--blue));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 34px rgba(59,104,245,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-play-btn svg { width: 30px; height: 30px; margin-left: 3px; }
.video-play:hover .video-play-btn { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 40px rgba(59,104,245,.55); }
.video-play-label {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 14px;
  box-shadow: var(--shadow-s);
  letter-spacing: var(--tr-caption);
}

/* פרטי האפליקציה */
.featured-copy { min-width: 0; }
.featured-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.featured-title h2 { font-size: var(--t-title-2); line-height: var(--lh-title-2);
  letter-spacing: var(--tr-title-2);
}
.featured-title .card-tag { margin-top: 4px; }
.app-icon {
  flex: none;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 17px;
  background: linear-gradient(180deg, #1B2233, var(--ink));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(11,15,25,.3);
}
.app-icon svg { width: 28px; height: 28px; }

.featured-lead { color: var(--body); font-size: var(--t-lead); line-height: var(--lh-lead); margin-top: 18px;
  letter-spacing: var(--tr-lead);
}

.featured-points {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.featured-points li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-callout); font-weight: 500; color: var(--ink-2);
  line-height: var(--lh-callout);
}
.featured-points li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat,
    var(--blue);
}

.featured-actions {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 28px;
}
.btn-download { gap: 10px; padding-inline: 24px 28px; }
.btn-download svg { width: 20px; height: 20px; }
.spec {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s5);
}
.spec div { display: flex; align-items: baseline; gap: var(--s2); }
.spec dt { color: var(--muted); flex: none; }
.spec dd { color: var(--ink-2); font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.spec, .spec dt, .spec dd {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
}
.featured-meta {
  margin-top: 14px;
  font-size: var(--t-caption);
  color: var(--muted);
  letter-spacing: var(--tr-caption);
  line-height: var(--lh-caption);
}
.featured-meta a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Coming soon — כרטיסים "רפאים" עם סרט פינתי ===== */
.soon-card { --card-hue-hi: rgba(99,140,255,.08); --card-hue: rgba(99,140,255,.03); }
.soon-card .mini-win, .soon-card .card-icon { opacity: .7; }
.soon-card h3 { color: var(--ink-2); }
/* סרט אלכסוני בפינה — דיו שחור, נחתך ע"י overflow:hidden של הזכוכית */
.ribbon {
  position: absolute;
  z-index: 2;
  top: 22px;
  inset-inline-start: -34px;
  transform: rotate(45deg);
  width: 150px;
  padding: 6px 0;
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  color: #fff;
  background: var(--ink);
  box-shadow: 0 4px 12px rgba(11,15,25,.22);
}

.soon-note { text-align: center; margin-top: 44px; color: var(--body);
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.soon-note .arrow-link { margin-inline-start: 6px; }

@media (max-width: 1024px) {
  .featured { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
}
@media (max-width: 720px) {
  .hero { padding-bottom: 36px; }
  .hero-scroll { margin-top: 44px; }
  .featured { padding: 18px; border-radius: 20px; }
  .video-frame { aspect-ratio: 16 / 11; }
  .video-play-btn { width: 60px; height: 60px; }
  .featured-title h2 { font-size: var(--t-title-2);
  line-height: var(--lh-title-2);
  letter-spacing: var(--tr-title-2);
}
  .app-icon { width: 52px; height: 52px; border-radius: 15px; }
}

/* ===== ZePo — סמל, לוגוטייפ, תג בטא, מספרים ===== */
/* צבעי המותג של ZePo (מקוד המוצר). משמשים רק לסמל וללוגוטייפ — לא לפלטת האתר */
:root {
  --zepo-blue: #4995EB;
  --zepo-deep: #20469B;
}
/* הסמל: Z לבן על ריבוע כחול מעוגל (המצב המותר על רקע עמוס) */
.app-icon-zepo {
  background: linear-gradient(180deg, #5CA3F2, var(--zepo-blue));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(73,149,235,.4);
}
.app-icon-zepo svg { width: 30px; height: 29px; }

/* לוגוטייפ: Ze כחול כהה, Po כחול בהיר, Bold */
.zepo-wordmark { display: flex; align-items: center; }
.zepo-wordmark .pill-beta { margin-inline-start: 12px; }
.zw-ze { color: var(--zepo-deep); }
.zw-po { color: var(--zepo-blue); }
.pill-beta {
  font-size: var(--t-micro);
  padding: 3px 9px;
  background: var(--ice);
  color: var(--blue-deep);
  letter-spacing: var(--tr-micro);
  vertical-align: middle;
}

.featured-points li strong { color: var(--ink); font-weight: 700; }
.featured-note {
  margin-top: 12px;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  max-width: 44ch;
  letter-spacing: var(--tr-caption);
}

/* שורת מספרים בתחתית פס האפליקציה — מספרים במונו, דיו שחור, נגיעה כחולה אחת */
.featured-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.featured-stats li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--rim), 0 8px 24px rgba(18,29,63,.06);
}
.stat-num { font-size: var(--t-stat); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; direction: ltr; text-align: right; }
.stat-label { font-size: var(--t-footnote); color: var(--body);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.featured-stats li:last-child .stat-num { color: var(--blue); }

/* "בקרוב" עכשיו על לבן — צריך משהו מאחורי הזכוכית */
.soon-section {
  background:
    radial-gradient(50% 45% at 50% 60%, rgba(99,140,255,.06), transparent 70%),
    var(--bg);
}

@media (max-width: 1024px) {
  .featured-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .featured-stats { gap: 12px; }
  .featured-stats li { padding: 14px 16px; }
  .stat-num { font-size: var(--t-stat-sm); }
}
@media (max-width: 400px) {
  .featured-stats { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   v31 — רגוע יותר. פלטה בסגנון אפל: הבסיס אפור-בהיר (#F5F5F7),
   לא לבן בוהק. Heebo במקום IBM Plex Sans. פחות מלל, יותר היררכיה.
   אזורי צבע: אפור → לבן → תכלת → אפור → שחור → לבן → שחור → אפור
   ============================================================ */

/* ---- אזורים ---- */
.zone-white { background: var(--bg-white); }
.section-soft { background: var(--bg-tint); }            /* "איך זה עובד" — תכלת עדינה */
.featured-section {
  padding-top: 24px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(59,104,245,.06), transparent 70%),
    var(--bg-white);
}
.soon-section { background: var(--bg); }                  /* "בקרוב" — חוזר לאפור */
.footer { background: var(--bg); }

/* מעבר רך בין אזורים — קו עדין למעלה */
.zone-white, .section-soft, .soon-section { border-top: 1px solid rgba(29,29,31,.06); }

/* ---- טיפוגרפיה: Heebo, היררכיה ברורה ---- */
body { font-size: var(--t-body); line-height: var(--lh-body); }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
h1 { font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
h2 { font-weight: 700;
  font-size: var(--t-title-1);
  line-height: var(--lh-title-1);
  letter-spacing: var(--tr-title-1);
}
h3 { font-size: var(--t-title-3); font-weight: 700;
  line-height: var(--lh-title-3);
  letter-spacing: var(--tr-title-3);
}
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 400; max-width: 30em;
  letter-spacing: var(--tr-lead);
}
.section-sub { font-size: var(--t-lead); max-width: 34em;
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}

/* טקסט משני קטן וחלש; טקסט ראשי כהה ומודגש — ככה העין יודעת מה לקרוא */
.step p, .custom-flow p, .product-card p, .faq-item p { font-size: var(--t-callout); line-height: var(--lh-callout); }
.step h3, .custom-flow h4 { margin-bottom: 6px; }

/* ---- פס ZePo ---- */
.featured { gap: 44px; padding: 40px; background: rgba(255,255,255,.85); }
.featured-lead { font-size: var(--t-lead); margin-top: 16px; max-width: 30em;
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}
.featured-points { margin-top: 22px; gap: 11px; }
.featured-points li { font-size: var(--t-callout); font-weight: 500;
  line-height: var(--lh-callout);
}
.featured-meta { direction: ltr; text-align: right;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}     /* מחרוזת לטינית — אי LTR מיושר לימין */
.featured-copy .en { text-align: right; }
.featured-note { font-size: var(--t-caption); max-width: 40ch;
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}
.featured-stats li { background: rgba(255,255,255,.85); }
.stat-label { font-size: var(--t-footnote); font-weight: 500;
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}

/* ---- כרטיסים על אפור: לבנים יותר, ברורים יותר ---- */
.card, .product-card { background: rgba(255,255,255,.82); }
.product-card:hover { background: rgba(255,255,255,.95); }
.hero-points li { background: rgba(255,255,255,.85);
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.faq-item { background: rgba(255,255,255,.85); }

/* ---- פוטר: שורה תחתונה בשתי שורות, בלי ערבוב שפות ---- */
.footer-bottom { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  font-size: var(--t-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}
.footer-bottom .en-line { font-size: var(--t-caption); color: var(--muted);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
}

/* ---- הירו: פחות מלל, פחות זוהר ---- */
.hero .lead { margin-top: var(--s5); max-width: 26em;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}
.hero-points { margin-top: var(--s6); }

/* קרחת רכה מאחורי טקסט ההירו — הגל נמשך מסביב, לא מתחת למילים */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 42%;
  width: min(900px, 96vw); height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--bg) 35%, rgba(245,245,247,.85) 55%, transparent 78%);
  pointer-events: none;
}

/* ---- הירו מהודק (v32): פחות אלמנטים, מרווחים קצרים יותר ---- */
.hero .hero .lead { margin-top: var(--s5); text-wrap: balance; max-width: 30em; font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
}
.hero-cta { margin-top: var(--s7); gap: var(--s5); }
.hero-points { margin-top: var(--s6); gap: var(--s3); }
.hero-points li { font-size: var(--t-footnote); padding: 6px 14px;
  line-height: var(--lh-footnote);
  letter-spacing: var(--tr-footnote);
}


/* ============================================================
   v38 — פס ההירו מקבל אוויר.
   הבעיה: ההירו היה 619px מול 827px של פס ZePo מתחתיו — הפס הדק ביותר
   מבין פסי התוכן, ולכן נראה מעוך. התיקון הוא **מרווחים בלבד**:
   גודל הכותרת, הפסקה, הכפתורים והתגיות לא השתנו בכלל.
   יעד: ~1000px ב-1440 — הפס הפותח הוא הגדול ביותר.
   ============================================================ */
.hero {
  padding-top: calc(var(--nav-h) + 216px);
  padding-bottom: 200px;
}
/* התוכן יושב מתחת לרכס הגל — אם מזיזים אותו למעלה, הפסקה והקישור
   נבלעים בתוך הנקודות הצפופות. נוסה, נכשל, אל תחזור על זה. */
.hero::before { top: 45%; height: 560px; }

@media (max-width: 1024px) {
  .hero { padding-top: calc(var(--nav-h) + 160px); padding-bottom: 175px; }
  .hero::before { height: 460px; }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(var(--nav-h) + 96px); padding-bottom: 104px; }
  .hero::before { height: 400px; }
}


/* ============================================================
   v41 — ליטוש בשיטת אפל: השכבה הבלתי-נראית.
   שום שינוי בזהות (זכוכית, חלקיקים, חלונות-ממשק, גדלים, מרווחים).
   מה כן: עקומות תנועה ease-out חדות במקום spring, hover רק לעכבר אמיתי,
   כניסה מדורגת לכרטיסים, נאב Liquid Glass בערכי apple.com, טקסט משני
   בניגודיות של secondaryLabel של אפל, אזורי לחיצה 44px, טבעות פוקוס,
   צבע בחירה, דיאלוג ותפריט שנכנסים ויוצאים בתנועה, FAQ שנפתח ברכות.
   ============================================================ */

:root {
  /* עקומות אחידות לכל האתר (HIG/Emil: ease-out לכניסה, ease-in-out לתזוזה) */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* טקסט משני: #86868B נתן 3.3:1 על האפור (מתחת ל-4.5 של WCAG לטקסט קטן).
     #6E6E73 הוא secondaryLabel של אפל במצב בהיר — 4.9:1 על #F5F5F7. */
  --muted: #6E6E73;
}

/* ---- משטחי הדפדפן — שייכים לפלטה, לא לברירת המחדל ---- */
html { color-scheme: light; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(59,104,245,.22); color: var(--ink); }
.section-dark ::selection, .final-cta ::selection { background: rgba(125,167,255,.38); color: #fff; }
input, textarea { caret-color: var(--blue); accent-color: var(--blue); }

/* פוקוס מקלדת אחיד — כל קישור/כפתור/summary, גם בלי כלל משלו */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.section-dark a:focus-visible, .section-dark button:focus-visible,
.final-cta a:focus-visible, .final-cta button:focus-visible { outline-color: var(--sky); }

/* קו תחתון בקישורי טקסט — מרווח ועובי קבועים */
.field-consent a, .legal a, .featured-meta a, .faq-item p a {
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
/* קישור המייל ב-FAQ ירש את צבע הגוף ולא נראה כקישור */
.faq-item p a { color: var(--blue); font-weight: 500; }

/* מספרים בטבלאות/סטטים — ספרות ברוחב אחיד */
.stat-num, .spec dd, .cf-num, .step-marker, .legal-updated { font-variant-numeric: tabular-nums; }

/* ---- אזורי לחיצה (HIG: 44×44) בלי להזיז פיקסל ---- */
.arrow-link { padding-block: 6px; margin-block: -6px; }
.footer-col a { padding-block: 3px; margin-block: -3px; }

/* ---- hover רק לעכבר אמיתי — במגע ה-hover נתקע אחרי לחיצה ---- */
.arrow-link:hover::after { transform: none; }
.video-play:hover .video-play-btn { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover::after { transform: translateX(-4px); }
  .video-play:hover .video-play-btn {
    transform: scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 40px rgba(59,104,245,.55);
  }
}
.arrow-link::after { transition: transform .18s var(--ease-out); }
.card { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease, background .35s ease; }
.custom-flow li { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease; }
.video-play-btn { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }

/* ---- כניסה מדורגת: אחים באותה שורה נכנסים אחד אחרי השני (40–60ms) ---- */
.cards-3 > .reveal:nth-child(2)  { transition-delay: 60ms; }
.cards-3 > .reveal:nth-child(3)  { transition-delay: 120ms; }
.steps > .reveal:nth-child(2)    { transition-delay: 70ms; }
.steps > .reveal:nth-child(3)    { transition-delay: 140ms; }
.faq-list > .reveal:nth-child(2) { transition-delay: 40ms; }
.faq-list > .reveal:nth-child(3) { transition-delay: 80ms; }
.faq-list > .reveal:nth-child(4) { transition-delay: 120ms; }
.faq-list > .reveal:nth-child(5) { transition-delay: 160ms; }
.faq-list > .reveal:nth-child(6) { transition-delay: 200ms; }
.featured-stats.reveal.in > li { animation: statIn .5s var(--ease-out) both; }
.featured-stats.reveal.in > li:nth-child(2) { animation-delay: 50ms; }
.featured-stats.reveal.in > li:nth-child(3) { animation-delay: 100ms; }
.featured-stats.reveal.in > li:nth-child(4) { animation-delay: 150ms; }
@keyframes statIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- FAQ: התשובה נכנסת ברכות במקום לקפוץ ---- */
.faq-item[open] > p { animation: faqIn .28s var(--ease-out) both; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.faq-icon::before, .faq-icon::after { transition: transform .2s var(--ease-out); }

/* ---- הדיאלוג: נכנס ויוצא כמו sheet של אפל (מרכז, scale .97 → 1, 200ms) ---- */
.modal {
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition:
    opacity .2s var(--ease-out),
    transform .2s var(--ease-out),
    overlay .2s allow-discrete,
    display .2s allow-discrete;
}
.modal[open] { opacity: 1; transform: none; }
@starting-style {
  .modal[open] { opacity: 0; transform: translateY(8px) scale(.97); }
}
.modal::backdrop {
  opacity: 0;
  transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
}
.modal[open]::backdrop { opacity: 1; }
@starting-style {
  .modal[open]::backdrop { opacity: 0; }
}

/* ---- תפריט מובייל: נפתח ברכות מלמעלה ---- */
@media (max-width: 840px) {
  .nav-links.open { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  @starting-style {
    .nav-links.open { opacity: 0; transform: translateY(-6px); }
  }
}

/* ---- reduced-motion: בלי תזוזה, רק מעברי שקיפות קצרים ---- */
@media (prefers-reduced-motion: reduce) {
  .cards-3 > .reveal, .steps > .reveal, .faq-list > .reveal { transition-delay: 0ms; }
  .featured-stats.reveal.in > li, .faq-item[open] > p { animation: none; }
  .modal { transform: none; transition: opacity .15s ease, overlay .15s allow-discrete, display .15s allow-discrete; }
  .nav-links.open { transition: none; }
  .custom-flow li, .video-play-btn { transition: none; }
}