/* =============================== reveal =============================== */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.07s}
[data-reveal][data-delay="2"]{transition-delay:.14s}
[data-reveal][data-delay="3"]{transition-delay:.21s}
[data-reveal][data-delay="4"]{transition-delay:.28s}
/* בטלפון 20px הם כמעט חמישית מגובה כרטיס, והכניסה נקראת כקפיצה.
   מרחק קצר יותר ומשך קצר יותר נקראים כתנועה ולא כהמתנה. */
@media (max-width:599px){
  [data-reveal]{transform:translateY(13px);
    transition:opacity .44s var(--ease-out),transform .44s var(--ease-out)}
  [data-reveal][data-delay="1"]{transition-delay:.05s}
  [data-reveal][data-delay="2"]{transition-delay:.1s}
  [data-reveal][data-delay="3"]{transition-delay:.15s}
  [data-reveal][data-delay="4"]{transition-delay:.2s}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ========================= brand band + curves =========================
   A brand band is a full-bleed turquoise section. The curve at its foot is
   an SVG in the markup, so it inherits the next section's colour cleanly. */
.band{position:relative;background:
    radial-gradient(118% 88% at 76% -4%, var(--b-500) 0%, transparent 56%),
    linear-gradient(200deg, var(--b-600) 0%, var(--b-700) 50%, var(--b-800) 100%);
  color:var(--on-brand);isolation:isolate;overflow:hidden}
.band h1,.band h2,.band h3{color:var(--on-brand)}
.band p{color:var(--on-brand-2)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 46% at 12% 92%, rgba(27,195,214,.32) 0%, transparent 70%)}
/* ---- שכבת הקריאוּת של פס המותג ----
   הפס עצמו תכלת בהיר עכשיו, לפי בקשת הלקוח. טקסט לבן על תכלת בהיר
   יורד מתחת לניגודיות הנדרשת, ולכן מתחת לתוכן יושבת שכבה כהה דקה
   בגוון המותג. היא לא הופכת את הפס לכהה — היא רק מחזיקה את הטקסט. */
.band>.shell,.band>.sec{position:relative}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,42,49,.34) 0%,rgba(6,42,49,.26) 52%,rgba(6,42,49,.14) 100%)}
/* פס שיש בו תצלום כבר מקבל את השכבה הזאת מ-.hero-media::after, ושתי
   שכבות זו על זו מחזירות בדיוק את הכהוּת שהלקוח ביקש להוריד. */
.band:has(.hero-media)::before{content:none}
.curve{display:block;width:100%;height:clamp(42px,5vw,86px);color:var(--paper)}
.curve svg{display:block;width:100%;height:100%}

/* ================================ hero ================================ */
.hero{position:relative;padding-block:clamp(3.2rem,2rem + 5vw,5.6rem) 0}
/* ההדר צף מעל ההירו. עד 1023px הריווח שלמעלה היה קטן מגובה ההדר, והכותרת
   נכנסה מתחת ללוגו. כאן היא מתחילה תמיד אחרי ההדר, עם אוויר קבוע. */
@media (max-width:1023px){.hero{padding-top:calc(var(--hdr) + 1.9rem)}}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* ה-img עטוף ב-picture (תמונה רחבה למחשב, לגובה לטלפון). picture הוא inline
   כברירת מחדל, ואז height:100% של התמונה לא מוצא לעצמו גובה להישען עליו. */
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;
  opacity:.30;filter:saturate(.7)}
.hero-inner{position:relative;text-align:center;max-width:56rem;margin-inline:auto}
.hero h1{font-size:var(--t-display);font-weight:900;letter-spacing:-.028em;line-height:1.08;
  margin-bottom:.42em;text-wrap:balance}
.hero h1 .hl{position:relative;white-space:nowrap;color:#fff}
.hero h1 .hl{background-image:linear-gradient(transparent 62%, rgba(27,195,214,.45) 62%, rgba(27,195,214,.45) 92%, transparent 92%);
  padding-inline:.08em}
.hero-sub{font-size:var(--t-lead);line-height:1.6;color:var(--on-brand-2);
  max-width:46ch;margin-inline:auto;margin-bottom:1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* quote bar, sits at the foot of the hero the way the brief asked */
.quotebar{position:relative;margin-top:clamp(2.4rem,1.6rem + 3vw,4rem)}
.quotebar-card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:clamp(1.2rem,.9rem + 1.2vw,1.7rem);border:1px solid var(--line)}
.quotebar-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.quotebar-head h2{font-size:1.18rem;margin:0;color:var(--ink)}
.quotebar-head p{font-size:var(--t-sm);color:var(--ink-3);margin:0}

/* ---- הטופס שעל ההירו: זכוכית, לא לוח לבן ----
   לוח לבן אטום חותך את פס המותג לשניים ומכריז על עצמו כרכיב זר שהונח
   על התצלום. כאן הכרטיס הוא שכבת זכוכית: רקע לבן שקוף למחצה, טשטוש של
   מה שמאחוריו, ומסגרת דקה בהירה. התצלום והגרדיאנט ממשיכים לזרום דרכו,
   והשדות הלבנים בתוכו הם הדבר הבהיר היחיד — ולכן העין הולכת אליהם. */
.hero .quotebar-card{
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.09) 100%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px rgba(4,32,36,.42);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
  padding:clamp(1.3rem,1rem + 1.2vw,1.9rem) clamp(1.3rem,1rem + 1.5vw,2.1rem);
}
/* בדפדפן בלי backdrop-filter השקיפות לבדה משאירה את הטקסט על התצלום.
   שם הרקע נסגר לכהה, ואותה היררכיה נשמרת בלי הטשטוש. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero .quotebar-card{background:linear-gradient(180deg,rgba(7,40,44,.58),rgba(7,40,44,.68))}
}
.hero .quotebar-head h2{color:#fff}
.hero .quotebar-head p{color:var(--on-brand-2)}
.hero .quotebar-card .field label{color:#fff}
.hero .quotebar-card .field .hint{color:rgba(255,255,255,.72)}
.hero .quotebar-card .bc-form-note{color:rgba(255,255,255,.86)}
.hero .quotebar-card .field input{
  background:rgba(255,255,255,.96);border-color:transparent;border-radius:var(--r-pill);
  padding-inline:1.15rem;color:#0C3B41}
.hero .quotebar-card .field input::placeholder{color:#6F878C}
.hero .quotebar-card .field input:focus{
  background:#fff;border-color:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(27,195,214,.38)}
.hero .quotebar-card button[type=submit]{border-radius:var(--r-pill)}
.hero .quotebar-card .bc-form-status.is-ok{color:#8FE7F1}
.hero .quotebar-card .bc-form-status.is-err{color:#FFC9C5}
.hero .quotebar-card .field .err{color:#FFC9C5}
/* המצב הממוקד של הזכוכית: המסגרת מתבהרת, לא מחליפה צבע ללוח לבן. */
.hero .quotebar-card:focus-within{border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 26px 64px rgba(4,32,36,.5)}
/* בטלפון התצלום היה כמעט שקוף, והפס נקרא כגרדיאנט שטוח בלי צילום.
   עכשיו הוא נראה — אותה קומפוזיציה של המחשב, רק צרה יותר. */
@media (max-width:899px){.hero-media img{opacity:.30}}

/* =============================== trust ================================ */
.trust{background:var(--paper);padding-block:1.4rem}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem clamp(1rem,.5rem + 2.2vw,2.6rem);text-align:center}
.trust-item{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  font-weight:600;font-size:.94rem;color:var(--ink-2)}
.trust-item svg{color:var(--accent);flex:none}

/* ============================ section heads =========================== */
.s-head-c{max-width:46rem;margin-inline:auto;text-align:center;
  margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.2rem)}
.s-head-c p{color:var(--ink-2);font-size:var(--t-lead);margin-top:.3em}
.band .s-head-c p{color:var(--on-brand-2)}

/* ================================ grid ================================ */
.grid{display:grid;gap:clamp(1rem,.7rem + 1vw,1.5rem)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1023px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:899px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:599px){.grid-4{grid-template-columns:1fr}}

/* ---- plain card ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,1rem + .9vw,1.8rem);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)}
.card h3{margin-bottom:.34em}
.card p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62}
.card-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--r-pill);background:var(--b-100);color:var(--accent-strong);margin-bottom:1.05rem}
/* (hover:hover) חובה: במסך מגע ה-hover נתפס בנגיעה, והכרטיס נשאר
   מורם אחרי שהאצבע כבר עזבה. */
@media (hover:hover) and (pointer:fine){
  a.card:hover{border-color:var(--b-300);box-shadow:var(--sh-2);transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){a.card:hover{transform:none}}
.card-more{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-display);font-weight:700;font-size:.94rem;color:var(--accent)}
.card-more svg{transition:transform var(--dur-ui) var(--ease)}
@media (hover:hover) and (pointer:fine){
  a.card:hover .card-more svg{transform:translateX(-4px)}
}

/* ---- media card: photo on top, used for the services grid ---- */
.mcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .mcard:hover{border-color:var(--b-300);box-shadow:var(--sh-2);transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.mcard:hover{transform:none}}
.mcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.mcard-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .mcard:hover .mcard-img img{transform:scale(1.045)}
}
/* העיגול נחתך לחצי כשישב בתוך .mcard-img שיש לו overflow:hidden בשביל
   זום התמונה. עכשיו הוא יושב ב-.mcard-body וגולש כלפי מעלה אל התמונה,
   בצד הנגדי למספר, ולכן הוא נראה שלם ולא מתנגש בו. */
.mcard-body{position:relative;padding:1.9rem 1.4rem 1.4rem;
  display:flex;flex-direction:column;flex:1}
.mcard-ico{position:absolute;top:-24px;inset-inline-end:1.3rem;
  width:48px;height:48px;border-radius:var(--r-pill);background:var(--surface);
  display:grid;place-items:center;color:var(--accent-strong);box-shadow:var(--sh-2)}
.mcard-body h3{margin-bottom:.32em}
.mcard-body p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62;margin-bottom:0}

/* ---- split feature: image beside copy ---- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,1rem + 3vw,3.6rem);
  align-items:center}
.feat-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3}
.feat-media img{width:100%;height:100%;object-fit:cover}
.feat-copy h2{margin-bottom:.5em}
.feat-copy p{color:var(--ink-2)}
.band .feat-copy p{color:var(--on-brand-2)}
@media (max-width:899px){.feat{grid-template-columns:1fr}}

/* ---- checks ---- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.checks li{display:flex;gap:.8rem;margin:0;align-items:flex-start}
.checks svg{flex:none;margin-top:.22em;color:var(--accent)}
.band .checks svg{color:var(--accent-bright)}
.checks strong{display:block;font-family:var(--f-display);margin-bottom:.16em}
.checks span{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62}
.band .checks span{color:var(--on-brand-2)}
.band .checks strong{color:var(--on-brand)}

/* ---- numbered steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.6rem + 1.4vw,1.8rem);
  counter-reset:step}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.steps{grid-template-columns:1fr}}
.step{counter-increment:step;position:relative;padding-top:3.4rem}
.step::before{content:counter(step);position:absolute;top:0;inset-inline-start:0;
  width:46px;height:46px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:1.12rem;
  background:var(--b-100);color:var(--accent-strong)}
.step h3{font-size:1.1rem;margin-bottom:.3em}
.step p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62}
.band .step::before{background:rgba(255,255,255,.14);color:#fff}
.band .step p{color:var(--on-brand-2)}

/* ---- testimonials rail ---- */
.tst-rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scrollbar-width:thin}
.tst-rail::-webkit-scrollbar{height:6px}
.tst-rail::-webkit-scrollbar-thumb{background:var(--b-200);border-radius:var(--r-pill)}
.tst{flex:0 0 min(400px,84vw);scroll-snap-align:start;margin:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem;display:flex;flex-direction:column}
.tst-q{color:var(--b-300);display:block;margin-bottom:.7rem}
.tst blockquote{margin:0 0 1.2rem;font-size:1.02rem;line-height:1.66;color:var(--ink-2)}
.tst-by{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.tst-by .n{display:block;font-family:var(--f-display);font-weight:700;font-size:.96rem}
.tst-by .r{display:block;font-size:var(--t-xs);color:var(--ink-3)}
.tst-proof{display:inline-flex;align-items:center;gap:.35rem;background:var(--b-50);
  border:1px solid var(--b-100);border-radius:var(--r-pill);padding:.42rem .8rem;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:var(--t-xs);color:var(--accent-strong);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tst-proof:hover{background:var(--b-100);border-color:var(--b-300)}
.tst-proof svg{color:var(--accent)}

/* lightbox for the original WhatsApp screenshots */
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2rem;
  background:rgba(7,40,44,.82);opacity:0;transition:opacity .22s var(--ease)}
.lightbox.is-open{opacity:1}
.lightbox img{max-height:86vh;max-width:min(420px,92vw);width:auto;border-radius:var(--r-lg);
  box-shadow:var(--sh-3)}
.lightbox-close{position:absolute;top:1rem;inset-inline-end:1rem;width:46px;height:46px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.26)}
.lightbox-cap{position:absolute;bottom:1.2rem;inset-inline:0;text-align:center;color:#D6F1F4;
  font-size:var(--t-sm)}
/* ---- accordion ---- */
.acc{max-width:54rem;margin-inline:auto;display:grid;gap:.7rem}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:start;padding:1.15rem 1.35rem;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.acc-q:hover{background:var(--stone)}
.acc-ind{position:relative;flex:none;width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--b-100)}
.acc-ind::before,.acc-ind::after{content:"";position:absolute;inset-inline-start:50%;top:50%;
  background:var(--accent-strong);border-radius:2px;transform:translate(50%,-50%)}
.acc-ind::before{width:10px;height:2px}
.acc-ind::after{width:2px;height:10px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.acc-q[aria-expanded="true"] .acc-ind{background:var(--accent);}
.acc-q[aria-expanded="true"] .acc-ind::before{background:#fff}
.acc-q[aria-expanded="true"] .acc-ind::after{opacity:0;transform:translate(50%,-50%) rotate(90deg)}
.acc-a{padding:0 1.35rem 1.25rem}
.acc-a p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.68;margin:0}

/* ---- form ---- */
.bc-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1rem}
.bc-form-grid .field--full{grid-column:1 / -1}
@media (max-width:599px){.bc-form-grid{grid-template-columns:1fr}}
.bc-form--bar .bc-form-grid{grid-template-columns:repeat(3,1fr)}
.bc-form--bar .field--full{display:none}
.bc-form--bar .field{margin-bottom:0}
.bc-form--bar{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end}
.bc-form--bar button[type=submit]{white-space:nowrap}
.bc-form--bar .bc-form-note{grid-column:1 / -1;margin:0}
.bc-form--bar .bc-form-status{grid-column:1 / -1}
@media (max-width:899px){
  .bc-form--bar{grid-template-columns:1fr}
  .bc-form--bar .bc-form-grid{grid-template-columns:1fr;gap:0}
  .bc-form--bar .field{margin-bottom:1rem}
}
.bc-form button[type=submit]{margin-top:.5rem}
.bc-form--bar button[type=submit]{margin-top:0}
.bc-form-note{font-size:.84rem;color:var(--ink-2);margin:.9rem 0 0;line-height:1.6}
.bc-form-status{font-size:var(--t-sm);font-weight:600;margin:.7rem 0 0}
.bc-form-status.is-ok{color:var(--accent)}
.bc-form-status.is-err{color:#B3261E}
:root[data-theme="dark"] .bc-form-status.is-err,
:root:not([data-theme="light"]) .bc-form-status.is-err{color:#F2B8B5}
.bc-form.is-sent .bc-form-grid,.bc-form.is-sent button[type=submit],
.bc-form.is-sent .bc-form-note,.bc-form.is-sent .bc-consent{display:none}

/* ---- אישור מדיניות פרטיות ----
   התיבה היא input אמיתי שעוצב ישירות (appearance:none) ולא span מזויף
   ליד input מוסתר, כך שמקלדת, קורא מסך ומצב high-contrast ממשיכים
   לעבוד. הווי מצויר כשתי מסגרות מסובבות ולא כתו טקסט, כדי שלא יזוז
   בין גופנים. */
.bc-consent{margin:.15rem 0 0}
/* בפס של דף הבית התיבה יורדת מתחת לשורת השדות והכפתור ולא נדחקת
   ביניהם, אחרת הכפתור מפסיק להיות מיושר לשדות. */
.bc-form--bar .bc-consent{grid-column:1 / -1}
@media (min-width:900px){
  .bc-form--bar .bc-consent{order:1;margin:.15rem 0 0}
  .bc-form--bar .bc-form-note{order:2}
  .bc-form--bar .bc-form-status{order:4}
}
.bc-consent label{display:flex;align-items:flex-start;gap:.62rem;cursor:pointer;
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.bc-consent label>span{min-width:0}
.bc-consent input{appearance:none;-webkit-appearance:none;flex:none;position:relative;
  width:1.3rem;height:1.3rem;margin:.08rem 0 0;padding:0;
  border:1.5px solid var(--line);border-radius:7px;background:var(--surface);cursor:pointer;
  transition:background-color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.bc-consent label:hover input{border-color:var(--accent)}
.bc-consent input:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
.bc-consent input:checked{background:var(--accent);border-color:var(--accent)}
.bc-consent input:checked::after{content:"";position:absolute;left:50%;top:50%;
  width:.34rem;height:.64rem;border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:translate(-50%,-62%) rotate(45deg)}
.bc-consent input[aria-invalid="true"]{border-color:#B3261E}
.bc-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.bc-consent a:hover{color:var(--accent-hover)}
.bc-consent .err{font-size:var(--t-xs);color:#B3261E;font-weight:600;margin:.42rem 0 0}
:root[data-theme="dark"] .bc-consent .err,
:root:not([data-theme="light"]) .bc-consent .err{color:#F2B8B5}
:root[data-theme="dark"] .bc-consent input:checked::after,
:root:not([data-theme="light"]) .bc-consent input:checked::after{border-color:#06282D}
/* המצב הבהיר חייב להיאמר במפורש: בלי זה בורר ה-:not על מערכת כהה
   מנצח גם בדפדפן בהיר, והטקסט האדום הופך ורוד על לבן. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bc-consent .err{color:#B3261E}
  :root:not([data-theme="dark"]) .bc-consent input:checked::after{border-color:#fff}
  :root:not([data-theme="dark"]) .bc-form-status.is-err{color:#B3261E}
}
/* על כרטיס הזכוכית של ההירו התיבה חייבת להיות לבנה ומלאה, אחרת היא
   נבלעת בתצלום בדיוק כמו שדה טקסט שקוף. */
.hero .quotebar-card .bc-consent label{color:rgba(255,255,255,.82)}
.hero .quotebar-card .bc-consent a{color:#fff}
.hero .quotebar-card .bc-consent input{background:rgba(255,255,255,.96);border-color:transparent}
.hero .quotebar-card .bc-consent input:checked{background:var(--accent-bright);border-color:var(--accent-bright)}
.hero .quotebar-card .bc-consent input:checked::after{border-color:#06343A}
.hero .quotebar-card .bc-consent input:focus-visible{border-color:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(27,195,214,.38)}
.hero .quotebar-card .bc-consent .err{color:#FFC9C5}

/* ---- closing CTA band ---- */
.cta-band{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:center}
@media (max-width:899px){.cta-band{grid-template-columns:1fr}}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---- cookie bar ---- */
.cookie-bar{position:fixed;inset-inline:1rem;bottom:1rem;z-index:80;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);opacity:0;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:64rem;margin-inline:auto}
.cookie-bar.is-in{opacity:1;transform:none}
.cookie-inner{display:flex;align-items:center;gap:1.2rem;padding:1.05rem 1.3rem;flex-wrap:wrap}
.cookie-inner p{margin:0;font-size:var(--t-sm);color:var(--ink-2);flex:1 1 22rem;line-height:1.6}
.cookie-inner .btn{flex:none}
/* סרגל החיוג הצף מופיע מתחת ל-768px. ההודעה חייבת לשבת מעליו,
   אחרת היא מכסה בדיוק את כפתורי הוואטסאפ והטלפון. */
@media (max-width:767px){
  .cookie-bar{bottom:calc(58px + env(safe-area-inset-bottom) + .55rem)}
}
@media (max-width:719px){
  .cookie-bar{inset-inline:.55rem}
  /* כפתור הנגישות הצף יושב בפינה התחתונה, ולכן ההודעה משאירה לו
     מרזב ריק משלה במקום שהוא ייפול על הטקסט. */
  .cookie-inner{padding:.75rem .85rem;padding-inline-start:4rem;gap:.6rem}
  .cookie-inner p{font-size:.8rem;line-height:1.5;flex:1 1 100%}
  .cookie-inner .btn{width:100%;padding:.68em 1.4em;font-size:.92rem}
  /* במסך צר מוותרים על מה שאפשר לקרוא בעמוד המדיניות עצמו. */
  .cookie-more{display:none}
}

.curve-foot{color:var(--ink)}
.cta-band h2{margin-bottom:.4em}
.cta-band .side-card h2{color:var(--ink);font-size:1.24rem}
.cta-band .side-card .panel-sub{color:var(--ink-3)}
/* .band p צובע כל פסקה בתכלת של הפס. בתוך כרטיס לבן זה הופך את ההערה
   שמתחת לכפתור לבלתי קריאה, ולכן היא חוזרת לדיו הרגיל. */
.band .side-card .bc-form-note{color:var(--ink-2)}
/* על פס מותג הכפתור הראשי הוא לבן, אבל בתוך כרטיס לבן הוא נעלם.
   שם הטורקיז של המותג חוזר להיות הצבע שמושך את העין. */
.band .side-card .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-brand)}
.band .side-card .btn-primary:hover{background:var(--accent-hover);color:#fff}
:root[data-theme="dark"] .band .side-card .btn-primary,
:root:not([data-theme="light"]) .band .side-card .btn-primary{color:#06272B}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .band .side-card .btn-primary{color:#fff}
}

/* the media card pieces are <span>s inside an <a>, so give them box display */
.mcard-img{display:block}
.mcard-body{display:flex}
.mcard .card-more{display:inline-flex}

/* hero: keep the photograph as texture, never as competition for the type */
/* ---- הכהוּת שמעל התצלום ----
   היא קיימת כדי להחזיק את הטקסט, לא כדי לכהות את הפס. הערכים כאן
   ירדו יחד עם ההבהרה של פס המותג לתכלת, והגוון שלהם הוא גוון המותג
   ולא שחור: שחור על תכלת מקבל גוון אפרפר ומכבה בדיוק את מה שהוספנו. */
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg, rgba(6,48,56,.50) 0%, rgba(6,48,56,.66) 100%)}
.hero-media img{opacity:.5;filter:saturate(.82) contrast(1.02)}
/* בטלפון התצלום צר וגבוה, ולכן הוא צריך להיות בולט יותר ולא פחות —
   אחרת הפס נקרא כגרדיאנט שטוח, וזה בדיוק מה שנראה גנרי. */
@media (max-width:899px){.hero-media img{opacity:.52}}

/* ---- quote bar refinements ---- */
.bc-form--bar{align-items:end;gap:.9rem}
.bc-form--bar .bc-form-grid{gap:0 .9rem}
.bc-form--bar .field{margin-bottom:0}
.bc-form--bar button[type=submit]{padding-inline:2.4em;height:calc(1rem * 1.2 + 1.64rem + 3px)}
.bc-form--bar .bc-form-note{margin:.2rem 0 0;color:var(--ink-2);font-size:var(--t-xs)}
.bc-form--bar .bc-form-status:empty{display:none}
.quotebar-card{padding-block:clamp(1.15rem,.9rem + .9vw,1.5rem)}
.quotebar-head{margin-bottom:1rem}
@media (max-width:899px){
  .bc-form--bar button[type=submit]{height:auto;width:100%}
  .bc-form--bar .field{margin-bottom:.9rem}
}

/* ==================== כפתור צף לקבלת הצעת מחיר ====================
   דסקטופ בלבד. במובייל התחתית כבר תפוסה ב-callbar, ולכן הכפתור נעלם
   שם לגמרי (max-width:1023px) ולא רק מתכווץ.
   הוא יושב באותה פינה של כפתור הנגישות — פינה ימנית תחתונה ב-RTL —
   ולכן מוגבה מעליו ב-82px, שזה 16px תחתית + 52px גובה + 14px רווח. */
.qfab{position:fixed;inset-inline-start:16px;bottom:82px;z-index:80}
.qfab-btn{display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.3rem;border-radius:var(--r-pill);border:2px solid #fff;
  background:var(--accent);color:#fff;text-decoration:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:700;font-size:.97rem;line-height:1;
  box-shadow:var(--sh-brand)}
.qfab-btn svg{width:20px;height:20px;flex-shrink:0}
.qfab-btn:hover,.qfab-btn:focus-visible{color:#fff;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .qfab-btn:hover{background:var(--accent-hover)}
}
/* כשפאנל הנגישות פתוח הוא נפרש בדיוק על הפינה הזו. הכפתור נסוג
   במקום להיערם מתחת לפאנל. */
body:has(#a11yPanel.is-open) .qfab{opacity:0;visibility:hidden}
@media (max-width:1023px){.qfab{display:none}}
/* מצב מוסתר בזמן שההירו על המסך. מוגדר כאן ולא ב-JS כדי שברירת
   המחדל — בלי JS — תהיה כפתור גלוי. */
.qfab.is-tucked{opacity:0;visibility:hidden;transform:translateY(10px)}

/* ==========================================================================
   כפתור הביקורות של גוגל — פינה שמאלית תחתונה
   --------------------------------------------------------------------------
   הצד השמאלי פנוי: כפתור ההצעה וכפתור הנגישות יושבים שניהם ב-
   inset-inline-start, כלומר בימין בעמוד RTL. הכפתור הזה הוא הדבר היחיד
   בשמאל, ולכן הוא לא מתנגש באף אחד מהם.
   במצב מנוחה הוא מציג את הכוכבים בלבד; בריחוף ובפוקוס נפתחת התווית.
   בטלפון התווית מוצגת תמיד, כי אין שם ריחוף שיגלה אותה.
   ========================================================================== */
.gfab{position:fixed;inset-inline-end:16px;bottom:16px;z-index:80}
.gfab-btn{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.44rem .74rem .44rem .5rem;box-shadow:var(--sh-2);text-decoration:none;
  color:var(--ink);font:inherit;text-align:start;max-width:calc(100vw - 32px)}
.gfab-btn:hover,.gfab-btn:focus-visible{text-decoration:none;color:var(--ink)}
.gfab-g{flex:none;width:30px;height:30px;display:grid;place-items:center;
  background:var(--stone);border-radius:50%}
.gmark{width:17px;height:17px;display:block}
.gfab-txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.gfab-line{display:flex;align-items:center;gap:.32rem}
.gfab-num{font-family:var(--f-display);font-weight:800;font-size:.86rem;
  line-height:1;color:var(--ink)}
.gfab-label{font-family:var(--f-display);font-weight:700;font-size:.76rem;
  color:var(--ink-3);white-space:nowrap;line-height:1.1}

/* ---- כוכבים ----
   כוכב אחד = מסגרת אפורה שמעליה שכבה צהובה ברוחב חלקי. כך דירוג 4.6
   מצויר נכון בלי קובץ שני ובלי לעגל למספר שלם. */
.gstars{display:inline-flex;gap:1.5px;vertical-align:-2px}
.gstar{position:relative;display:block;width:14px;height:14px;
  background:var(--stone-2);
  -webkit-mask:var(--star-shape) center/100% 100% no-repeat;
          mask:var(--star-shape) center/100% 100% no-repeat}
/* left ולא inset-inline-start: כוכב חלקי מתמלא תמיד משמאל לימין,
   גם בעמוד עברית. זה מה שגוגל עצמה מציגה, ולכן זה מה שקריא. */
.gstar i{position:absolute;top:0;bottom:0;left:0;display:block;
  background:#FBBC05}
.gstars-sm .gstar{width:12px;height:12px}
:root{--star-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.1l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.17l-5.9 3.09 1.13-6.57L2.46 9.04l6.6-.96z'/%3E%3C/svg%3E")}

/* בטלפון הכפתור יושב מעל פס ההתקשרות הקבוע. */
@media (max-width:767px){
  .gfab{bottom:70px}
  .gfab-btn{padding:.38rem .64rem .38rem .44rem;gap:.45rem}
  .gfab-g{width:26px;height:26px}
  .gmark{width:15px;height:15px}
  .gstars-sm .gstar{width:11px;height:11px}
  .gfab-label{font-size:.71rem}
}
/* פאנל הנגישות פתוח — הכפתור מתפנה, בדיוק כמו כפתור ההצעה. */
body:has(#a11yPanel.is-open) .gfab{opacity:0;visibility:hidden}

/* ==========================================================================
   קרוסלת הביקורות
   --------------------------------------------------------------------------
   הקרוסלה היא גלילה אופקית אמיתית עם scroll-snap, ולא טרנספורם שמנוהל
   ב-JS. זה נותן החלקה באצבע בחינם, שומר על גלילה נכונה ב-RTL, וממשיך
   לעבוד גם אם ה-JS נכשל: אז זה פשוט רצועה שגוללים בה.
   ========================================================================== */
/* [hidden] חייב לגבור על display:grid, אחרת החלון פתוח לפני שנפתח. */
.rv-modal[hidden]{display:none}
.rv-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:end center;
  padding:clamp(.8rem,.4rem + 1.6vw,1.6rem);
  background:rgba(6,32,37,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@media (min-width:768px){.rv-modal{place-items:center}}
.rv-sheet{position:relative;width:min(560px,100%);max-height:min(88vh,720px);
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden}

.rv-head{display:flex;align-items:flex-start;gap:.75rem;
  padding:1.1rem 1.2rem .9rem;border-bottom:1px solid var(--line)}
.rv-head-g{flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:var(--stone);border-radius:50%}
.rv-head-g .gmark{width:22px;height:22px}
.rv-head-txt{flex:1;min-width:0}
.rv-head h2{font-size:1.16rem;margin:0 0 .22rem}
.rv-score{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:0;
  font-size:var(--t-sm);color:var(--ink-3)}
.rv-score b{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--ink)}
.rv-close{flex:none;width:36px;height:36px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);cursor:pointer;
  display:grid;place-items:center;padding:0;color:var(--ink-2)}
.rv-close:hover{background:var(--stone);color:var(--ink)}

.rv-car{flex:1;min-height:0;overflow:hidden}
.rv-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 100%;min-width:0;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.2rem;overflow-y:auto;overscroll-behavior-y:contain}
.rv-who{display:flex;align-items:center;gap:.6rem}
.rv-av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;
  background:var(--stone-2)}
.rv-av-txt{display:grid;place-items:center;font-family:var(--f-display);
  font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(145deg,var(--b-400),var(--b-700))}
.rv-id{min-width:0}
.rv-id b{display:block;font-family:var(--f-display);font-weight:700;
  font-size:1rem;line-height:1.3;color:var(--ink)}
.rv-id i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}
.rv-rate{margin:0}
.rv-text{margin:0;font-size:var(--t-body);line-height:1.72;color:var(--ink-2);
  text-wrap:pretty}

.rv-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;
  padding:.5rem 1.2rem;border-top:1px solid var(--line);background:var(--stone)}
.rv-arrow{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  cursor:pointer;color:var(--accent)}
.rv-arrow:hover{background:var(--accent-wash)}
.rv-arrow[disabled]{opacity:.38;cursor:default}
.rv-arrow:hover[disabled]{background:var(--surface)}
/* החץ "הבא" בעברית מצביע שמאלה, ולכן זה שחוזר אחורה מסובב. */
[data-rv-prev] svg{transform:rotate(180deg)}
.rv-dots{display:flex;align-items:center;gap:.4rem}
.rv-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--b-200)}
.rv-dot.is-on{background:var(--accent)}

.rv-foot{padding:1rem 1.2rem 1.15rem;border-top:1px solid var(--line)}
.rv-note{margin:.6rem 0 0;text-align:center;font-size:var(--t-xs);color:var(--ink-3)}
body.rv-lock{overflow:hidden}

/* ==========================================================================
   טלפון — אותה שפה של המחשב, לא ערימה של כרטיסים
   --------------------------------------------------------------------------
   הבעיה שתוקנה כאן: במחשב הסקשנים הם שורות — ארבעה כרטיסי שירות בשורה,
   פס אמון בשורה אחת — ובטלפון כל שורה כזאת התפרקה לערימה אנכית ארוכה.
   התוצאה היא עמוד שנגלל בלי סוף, שבו כל סקשן נראה בדיוק כמו הקודם.
   כאן השורות נשארות שורות: רצועת גלילה אופקית עם snap, שבה הכרטיס הבא
   מציץ מהקצה ואומר למשתמש שיש עוד. זה גם מקצר את העמוד בערך בשליש.
   ========================================================================== */
@media (max-width:599px){
  .grid-4{
    display:flex;gap:.85rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--gut);
    /* הרצועה נשברת מתוך ה-shell כדי שהכרטיס ייגע בקצה המסך, אחרת
       הוא נראה כמו כרטיס צר שמרחף באמצע ולא כמו רצועה. */
    margin-inline:calc(var(--gut) * -1);
    padding:.35rem var(--gut) 1rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .grid-4::-webkit-scrollbar{display:none}
  /* min-width:0 חובה: בלעדיו פריט flex מקבל מינימום לפי התוכן,
     והרצועה מרחיבה את העמוד לרוחב במקום לגלול בתוך עצמה. */
  .grid-4 > *{flex:0 0 78%;min-width:0;scroll-snap-align:start}
  .grid-4 .mcard-img{aspect-ratio:16/10}
}

/* פס האמון: במחשב שורה אחת של חמישה פריטים, ובטלפון הוא התפרק לרשימה
   ממורכזת בת ארבע שורות. כאן הוא חוזר להיות שורה — צ'יפים שנגללים. */
@media (max-width:767px){
  .trust{padding-block:1.05rem}
  .trust-row{flex-wrap:nowrap;justify-content:flex-start;gap:.45rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scrollbar-width:none;-ms-overflow-style:none}
  .trust-row::-webkit-scrollbar{display:none}
  .trust-item{flex:none;min-width:0;white-space:nowrap;
    background:var(--accent-wash);border:1px solid var(--b-100);
    border-radius:var(--r-pill);padding:.48rem .8rem;font-size:.865rem;
    color:var(--accent-ink)}
  .trust-item svg{width:17px;height:17px}
}

/* ---- ריתמוס אנכי בטלפון ----
   במחשב המרווח בין סקשנים הוא מה שמפריד ביניהם. בטלפון אותו מרווח
   בדיוק הופך לשטח ריק שגוללים בו, ומרחיק כל סקשן מהבא אחריו עד
   שהעמוד מרגיש כמו רשימה של דפים ולא כמו עמוד אחד. */
@media (max-width:599px){
  :root{--sec:3.05rem}
  .s-head-c{margin-bottom:1.7rem}
  .s-head-c p{font-size:1.02rem}
}

/* ---- משוב מגע ----
   במסך מגע אין hover, ולכן כרטיס שנלחץ לא מגיב בכלום והלחיצה מרגישה
   כאילו לא נקלטה. שינוי גודל קטן הוא כל מה שצריך, והוא עובד גם
   כשהאצבע עדיין על המסך. */
@media (hover:none){
  a.card:active,.mcard:active,.geo-row:active,.geo-all:active{transform:scale(.985)}
  .mcard,.geo-all{transition:transform var(--dur-fast) var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
  a.card:active,.mcard:active,.geo-row:active,.geo-all:active{transform:none}
}