/* =========================================================
   ניסיון "אתר נקי" (רק בדף ניסיון-אתר-נקי.html)
   פחות מערכות קישוט במקביל, כדי שהעין תנוח
   ========================================================= */

/* השירותים: בלי סימני החיתוך בפינות. במקומם קווי המסגרת מימין ומשמאל נמשכים לכל אורך האזור, כמו קווי הגריד */
.svc-acc .acc::after{ display:none; }
.svc-acc::before{
  display:block; background:none; -webkit-mask-image:none; mask-image:none;
  border-left:1px solid rgb(20 20 20 / .14); border-right:1px solid rgb(20 20 20 / .14);
}
@media (max-width: 900px){ .svc-acc::before{ display:none; } }

/* השאלות הנפוצות: בלי סימני החיתוך */
.faq-cell::after{ display:none; }

/* הכותרות הקטנות: בלי הכוכבית */
.tag .tag-star{ display:none !important; }

/* שמות הפרויקטים: אפור, והנבחר שחור (בלי גרדיאנט) */
.vf-list li.on .t{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; }

/* הכותרות: הופעה רכה, אות אחרי אות, אותה תנועה בכל האתר (heading-reveal.js) */
hr-w{ display:inline-block; white-space:nowrap; }
/* אפשרות ב+ג: כל אות מתחילה קצת לא במקום ומתיישרת לשורה מדויקת */
hr-c{
  display:inline-block; opacity:0; transform:translate(var(--x, 0), var(--y, .3em)) rotate(var(--r, 0deg));
  transition:opacity calc(.6s * var(--hr-k, 1)) cubic-bezier(.33,0,.2,1), transform calc(1.3s * var(--hr-k, 1)) cubic-bezier(.16,1,.3,1);
  transition-delay:calc((380ms + var(--i, 0) * 24ms) * var(--hr-k, 1));   /* --hr-k: קצב לפי מהירות הגלילה (heading-reveal.js) */   /* אחרי הכותרת הקטנה */
}
/* הטקסט שבצד: נכנס אחרי הכותרת */
.hr-side{ opacity:0; translate:0 12px; }
.hr-side.hr-in{ opacity:1; translate:0 0; transition:opacity calc(.9s * var(--hr-k, 1)) cubic-bezier(.33,0,.2,1), translate calc(1.1s * var(--hr-k, 1)) cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--sd, 1100ms) * var(--hr-k, 1)); }
.hr-in hr-c{ opacity:1; transform:none; }
/* הכותרת הקטנה נכנסת ראשונה: הופעה רכה עם החלקה קצרה מהצד של הקריאה */
.tag.hr-eb{ opacity:0; translate:14px 0; transition:opacity calc(.7s * var(--hr-k, 1)) cubic-bezier(.33,0,.2,1), translate calc(.9s * var(--hr-k, 1)) cubic-bezier(.16,1,.3,1); }
.tag.hr-eb.hr-in{ opacity:1; translate:0 0; }
.tag.hr-eb .tag-t{ clip-path:none !important; transition:none !important; }
/* הסמן מעל הכותרות: חץ רגיל, לא סמן הקלדה */
h2, .ab-title{ cursor:default; }
@media (prefers-reduced-motion: reduce){ .hr-side{ opacity:1; translate:none; } .tag.hr-eb{ opacity:1; translate:none; transition:none; } hr-c{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   אפשרויות להדר (בכתובת: ?hdr=a / b / c). בלי הרקע סביב התפריט, והקישורים במשקל Light
   ========================================================= */
html[data-hdr] .nav{ background:none !important; border-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0; gap:4px; }
html[data-hdr] .nav a{ font-weight:300; opacity:.72; background:none !important; color:inherit !important; position:relative; padding:9px 14px; transition:opacity .3s; }
html[data-hdr] .nav a:hover, html[data-hdr] .nav a[aria-current="page"]{ opacity:1; }
/* א: טקסט נקי, והפריט הפעיל מסומן בנקודה הקטנה של הלוגו */
html[data-hdr="a"] .nav a[aria-current="page"], html[data-hdr="c"] .nav a[aria-current="page"]{ font-weight:400; }
html[data-hdr="a"] .nav a::after, html[data-hdr="c"] .nav a::after{
  content:""; position:absolute; left:50%; bottom:1px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--grad); opacity:0; transform:scale(.4); transition:opacity .35s, transform .45s cubic-bezier(.16,1,.3,1);
}
html[data-hdr="a"] .nav a[aria-current="page"]::after, html[data-hdr="c"] .nav a[aria-current="page"]::after,
html[data-hdr="a"] .nav a:hover::after, html[data-hdr="c"] .nav a:hover::after{ opacity:1; transform:none; }
/* ב: קו דק מתחת לפריט, כמו הקישורים "בואו נדבר" באתר */
html[data-hdr="b"] .nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.16,1,.3,1);
}
html[data-hdr="b"] .nav a:hover::after, html[data-hdr="b"] .nav a[aria-current="page"]::after{ transform:none; }
/* ג: כמו א, אבל רק ארבעה קישורים עיקריים (פחות פריטים = פחות עומס). השאר זמינים בגלילה ובתפריט במובייל */
html[data-hdr="c"] .nav a[href="#"], html[data-hdr="c"] .nav a[href="#testimonials"], html[data-hdr="c"] .nav a[href="#process"], html[data-hdr="c"] .nav a[href="#faq"]{ display:none; }
html[data-hdr="c"] .nav{ gap:14px; }

/* =========================================================
   Discovery רק ב-Light או Bold (לבקשת שרה, בלי Regular/Medium בשום מקום):
   משפחה עם שני משקלים בלבד. כל מה שהוגדר עד 549 (כולל 400/500) מוצג Light, ומ-550 (600/700) מוצג Bold
   ========================================================= */
@font-face{ font-family:"Discovery LB"; src:url("../fonts/DiscoveryFs-Light.woff2") format("woff2"); font-weight:100 549; font-style:normal; font-display:swap; }
@font-face{ font-family:"Discovery LB"; src:url("../fonts/DiscoveryFs-Bold.woff2") format("woff2"); font-weight:550 900; font-style:normal; font-display:swap; }
:root{ --font-he:"Discovery LB", system-ui, sans-serif; --font-en:"Discovery LB", system-ui, sans-serif; }
body, button, input, textarea, select{ font-synthesis:none; }

/* השאלות (faqSmooth ב-faq.js): התשובה תמיד בפריסה (ריקה כשסגור) כדי שתיפתח בגובה מונפש, והשאלה מתכווצת ברצף */
.faq-cell .fc-a{ display:block; overflow:hidden; }
.faq-cell .fc-q{ transition:font-size .6s cubic-bezier(.16,1,.3,1), opacity .5s, margin .6s cubic-bezier(.16,1,.3,1); }

/* הפתיחה: הכתם הצבעוני מאחורי הטלפון עומד במקום (עדיין נגרר אחרי העכבר). נמדד: הסיבוב האיטי שלו,
   עם טשטוש 56px ושכבת גרעיניות מעליו, חייב את כרטיס המסך לטשטש מחדש בכל פריים, וזה מה שגרם להחלפת הטלפונים לקפוץ */
.stage::before, .stage::after{ animation:none !important; }

/* הפתיחה: פסקה קצרה וגדולה יותר, שבאמת קוראים */
.hero-copy .lead{ font-size:clamp(19px, 1.45vw, 23px) !important; line-height:1.6 !important; max-width:30ch !important; opacity:.88; }
@media (max-width: 600px){ .hero-copy .lead{ font-size:18px !important; } }

/* נייד · פרויקטים: האזור בגובה מסך אחד, ובמסכים נמוכים הכפתור "לאתר החי" נחתך. העינית מתכווצת לפי המקום שנשאר,
   והמסגרת עצמה קטנה יותר כשהמסך נמוך, כך שהכותרת, השמות, העינית, התיאור והכפתור תמיד נכנסים */
@media (max-width: 900px){
  .projects.vf{ --frame-w:min(calc(100vw - 48px), calc((100svh - 470px) * 1.6)) !important; }
  .vf-window{ height:auto !important; flex:1 1 0 !important; min-height:calc(var(--frame-h) + 28px) !important; max-height:calc(var(--frame-h) + 170px) !important; }
}

/* נייד · שירותים: הכרטיסים נפתחים אחד אחרי השני לפי הגלילה (heading-reveal.js), וכל כרטיס שנפתח נשאר פתוח,
   כך שמה שמעל לא מתכווץ והדף לא קופץ */
@media (max-width: 900px){
  .svc-acc .pn.m-open{ --on:1 !important; background:#fff; }   /* important: concept.js כותב --on:0 לכל כרטיס שאינו הפעיל */
  .svc-acc .pn.m-open .vt{ display:none; }
  .svc-acc .pn.m-open .pn-n{ color:#141414; }
  .svc-acc .pn.m-open .pn-art{ display:flex; margin-top:14px; height:190px; opacity:1; transform:none; transition:opacity .7s .15s, transform 1s .15s cubic-bezier(.16,1,.3,1); }
  .svc-acc .pn.m-open .pn-bd{ display:grid; margin-top:16px; gap:10px; opacity:1; transform:none; transition:opacity .6s .3s, transform .9s .3s cubic-bezier(.16,1,.3,1); }
  @starting-style{
    .svc-acc .pn.m-open .pn-art{ opacity:0; transform:translateY(16px) scale(.97); }
    .svc-acc .pn.m-open .pn-bd{ opacity:0; transform:translateY(16px); }
  }
}

/* נייד · אודות מסודר: קודם "קצת עליי", About Sara והתמונה, אחר כך הכותרת, הפסקאות, המספרים והקישור.
   התמונה נמוגה בעדינות בתחתית (ולא נחתכת באזור הכהה), והתגיות המרחפות והחותמת לא מוצגות בנייד (נערמו זו על זו) */
@media (max-width: 900px){
  .ab-stage{ order:0 !important; margin-top:24px !important; height:min(118vw, 560px) !important; }
  .ab-copy h2{ order:1 !important; margin-top:12px !important; }
  .ab-lead{ order:2 !important; } .ab-lead + .ab-lead{ order:3 !important; }
  .ab-stats{ order:4 !important; } .ab-cta{ order:5 !important; margin-bottom:84px !important; }
  .ab-figure .inner{ -webkit-mask-image:linear-gradient(#000 74%, transparent 98%) !important; mask-image:linear-gradient(#000 74%, transparent 98%) !important; }
  .ab-card, .ab-badge{ display:none !important; }
  .ab-figure{ translate:-50% 0 !important; }   /* התמונה כולה בתוך הבמה, כך שהנמיגה בתחתית נראית (קודם היא נחתכה בקו ישר) */
}

/* טאבלט · פוטר: השם הגדול בשורה אחת (main.js: footOneLine), הקישורים בשתי עמודות, פרטי הקשר מיושרים לימין כמו שאר הטקסט */
@media (min-width: 601px) and (max-width: 900px){
  .f-word{ white-space:nowrap !important; }
  .f-word .w{ display:inline-block !important; }
}
@media (min-width: 601px) and (max-width: 1100px){
  .f-cols{ grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) !important; column-gap:clamp(32px, 6vw, 64px) !important; }
  .f-cols nav.f-col ul{ grid-template-columns:1fr 1fr; column-gap:24px; }
  .f-cols > .f-col:not(nav){ text-align:right !important; }
  .f-cols > .f-col:not(nav) ul{ align-items:flex-start !important; }
  .f-cols .f-links{ border-top:1px solid rgb(var(--ink-rgb) / .12); padding-top:28px; }
}

/* אודות: בלי התגיות סביב התמונה (גם במחשב). כשהן עמדו במקום הן נראו מפוזרות, והפוקוס צריך להיות בטקסט שמימין */
.ab-card{ display:none !important; }

/* =========================================================
   "צרו איתי קשר" בהדר (בכל העמודים): במעבר עכבר הכפתור מתמלא בצבעוני המגורען שלנו, מימין לשמאל,
   הגרעיניות זזה, והקו התחתון חוזר מימין לשמאל
   ========================================================= */
.site-header .head-cta.btn-ghost{ position:relative; isolation:isolate; padding-inline:16px !important; border-radius:999px !important; transition:color .35s; }
.site-header .head-cta.btn-ghost::before{
  content:""; inset:0 !important; height:auto !important; border-radius:999px; z-index:-1;
  /* אותו גרדיאנט חי כמו בשאר הכפתורים: ארבעה כתמי צבע שזזים כל אחד במסלול משלו, עם גרעיניות */
  --mesh-live:
    radial-gradient(circle at var(--c1x) var(--c1y), var(--g-o), transparent 58%),
    radial-gradient(circle at var(--c2x) var(--c2y), var(--g-p), transparent 60%),
    radial-gradient(circle at var(--c3x) var(--c3y), var(--g-v), transparent 62%),
    radial-gradient(circle at var(--c4x) var(--c4y), var(--g-i), transparent 58%),
    linear-gradient(var(--g-p), var(--g-p));
  background:var(--grain), var(--mesh-live) !important; background-blend-mode:overlay, normal, normal, normal, normal, normal; background-size:140px, auto, auto, auto, auto, auto;
  opacity:1 !important; transform:none !important; clip-path:inset(0 0 0 100% round 999px);
  transition:clip-path .6s cubic-bezier(.16,1,.3,1); animation:var(--mesh-anim) !important; animation-play-state:paused !important;
}
.site-header .head-cta.btn-ghost::after{ transform-origin:100% 0 !important; inset-inline:16px !important; }
.site-header .head-cta.btn-ghost:hover{ color:#fff !important; }
.site-header .head-cta.btn-ghost:hover::before{ clip-path:inset(0 0 0 0 round 999px); animation-play-state:running !important; }   /* הכתמים זזים רק במעבר עכבר */
.site-header .head-cta.btn-ghost:hover::after{ opacity:0; transition:opacity .25s; }
.site-header .head-cta.btn-ghost .lk-t{ animation:none !important; -webkit-text-fill-color:currentColor !important; }
.site-header .head-cta.btn-ghost:hover .arr-long{ color:#fff; animation:none !important; transform:translateX(-4px); transition:transform .5s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce){ .site-header .head-cta.btn-ghost:hover::before{ animation:none !important; } }

/* עמודים פנימיים: האזור הבהיר מסתיים בפינות מעוגלות מעל הפוטר הכהה, כמו בעמוד הבית (inner.js עוטף את התוכן ב-.pg-sheet) */
html.inner-page body{ padding-top:0 !important; background:#0F0F0F !important; }
.pg-sheet{ position:relative; background:var(--paper, #F7F6F2); padding-top:calc(var(--header-h, 84px) + 12px); padding-bottom:clamp(48px, 6vw, 96px); border-radius:0 0 36px 36px; }
html.inner-page .site-footer{ margin-top:0 !important; }
@media (max-width: 900px){ .pg-sheet{ border-radius:0 0 26px 26px; } }

/* הפוטר: הכרטיס הצבעוני מופיע מיד (בלי מלבן שחור לפניו), ורק התוכן שבתוכו נכנס, אחד אחרי השני */
.f-cta{ opacity:1 !important; transform:none !important; }
.f-cta > *{ opacity:var(--rv, 0); transform:translateY(calc((1 - var(--rv, 0)) * 18px)); transition:opacity .5s cubic-bezier(.33,0,.2,1), transform .7s cubic-bezier(.16,1,.3,1); }
.f-cta > :nth-child(2){ transition-delay:.06s; } .f-cta > :nth-child(3){ transition-delay:.12s; }
/* הכותרת Let’s make order. נכנסת באנימציה הקבועה של הכותרות (האותיות מתחילות קצת לא במקום ומתיישרות, heading-reveal.js), ולכן העמודה שלה לא נכנסת בנוסף */
.f-cta > .f-cta-main{ opacity:1; transform:none; }
/* השם הגדול: האותיות עולות מהר יותר */
.f-word .ch i{ transition:transform .75s cubic-bezier(.16,1,.3,1) !important; transition-delay:calc(var(--i) * 24ms) !important; }
@media (prefers-reduced-motion: reduce){ .f-cta > *{ opacity:1; transform:none; transition:none; } }

/* הפוטר: המשפט "אתרים מסודרים, שקל לנהל לבד." גדול יותר, בשני גוונים כמו הכותרות באתר (אפור ואז שחור), כדי שהאזור לא ירגיש ריק */
.f-tag{ font-size:clamp(30px, 2.9vw, 48px) !important; line-height:1.12 !important; font-weight:700 !important; max-width:12ch !important; letter-spacing:-.01em; }
.f-tag span{ display:block; color:#8B8A86; font-weight:300 !important; }

/* הפתיחה: הכתם הצבעוני מאחורי הטלפון קטן ורך יותר, כדי שהפוקוס יהיה על הטלפון ולא על הצבע (לבקשת שרה) */
.stage::before, .stage::after, .hues-hero{ width:calc(var(--ph, 500px) * 1.18) !important; }
.hues-hero{ opacity:.22 !important; }
.stage::before{ opacity:.11 !important; }
/* הכתם נדלק רק אחרי שהטלפון מתחיל להופיע (hero-motion.js מוסיף glow-wait בתחילת הכניסה ומוריד אותו עם הטלפון) */
html.glow-wait .hues-hero, html.glow-wait .stage::before, html.glow-wait .stage::after,
html.hero-enter .hues-hero, html.hero-enter .stage::before, html.hero-enter .stage::after{ opacity:0 !important; }
.hues-hero, .stage::before, .stage::after{ transition:opacity 1.6s cubic-bezier(.33,0,.2,1); }