/* ==========================================================================
   site.css — שלד האתר: הטוקנים, הכותרת, המגירה, הפוטר, הכפתורים,
   השכבה האמביינטית, המשטח הכהה, סרגל הפעולות ואנימציות החשיפה.

   כל עמוד חדש באתר טוען את הקובץ הזה ומוסיף מעליו רק את מה שייחודי לו,
   בתוך <style> משלו. הסדר חשוב: ה-<link> קודם, ה-<style> אחריו, ולכן
   כלל שנכתב בעמוד גובר על כלל זהה מכאן.

   מה שלא נמצא כאן: index.html עדיין נושא את השלד שלו בפנים. הפורמט שלו
   שונה (כללים רב-שורתיים) ומיזוג בטוח שלו דורש השוואה ברמת הכלל ולא
   ברמת השורה. עד שזה ייעשה, tools/check-shell.ps1 משווה בין השניים
   ומתריע כשהם נפרדים.

   נוצר ב-10.9.2026 מתוך השלד שהיה משוכפל בשלושת עמודי השירות. אומת אז
   ששלושתם זהים ברמת הכלל, 243 כללים, ושההבדל היחיד ביניהם היה הערות.
   ========================================================================== */
:root{
  --white:#ffffff;
  --band:#e4ecf2;
  --band-2:#d6e2ea;

  --navy:#01334c;          /* brand */
  --navy-2:#012a3f;
  --teal:#147092;          /* brand accent: large text and decoration */
  --teal-deep:#0f5b76;     /* small text only */
  --acc:#2fa5d6;
  --ink:#0b2230;
  --text:#41586a;
  --text-2:#455b69;
  --line:#cfdce5;
  --line-2:#b6c8d4;

  --grad-page:linear-gradient(180deg,#dde8f0 0%,#d7e3ed 45%,#d1dfe9 100%);
  --grad-card:linear-gradient(165deg,#ffffff 0%,#f9fcfd 100%);

  --font:"Open Sans","Segoe UI","Arial Hebrew","Helvetica Neue",system-ui,-apple-system,"Noto Sans Hebrew",Arial,sans-serif;

  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
  --card-ico:54px;

  --gut:clamp(20px,5vw,72px);
  --max:1280px;
  --ease:cubic-bezier(.16,.84,.28,1);
  --bar:0px;
  --shadow:0 1px 2px rgba(11,34,48,.06),0 8px 24px -12px rgba(11,34,48,.14);
  --shadow-lg:0 2px 4px rgba(11,34,48,.07),0 18px 44px -18px rgba(11,34,48,.24);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:light;background:var(--grad-page)}
section[id]{scroll-margin-top:96px}
body{
  background:transparent;color:var(--text);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;padding-bottom:var(--bar);
}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
img{max-width:100%;display:block}

.skip{
  position:absolute;inset-inline-start:-9999px;top:12px;z-index:300;
  background:var(--navy);color:#fff;padding:12px 22px;font-weight:700;
  text-decoration:none;border-radius:var(--r-sm);
}
.skip:focus{inset-inline-start:16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}

h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.22;letter-spacing:-.012em}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;font-weight:700;color:var(--teal-deep)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal-deep);border-radius:var(--r-pill)}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--text);max-width:62ch}
/* Hebrew does not hyphenate: balance headings, keep paragraphs off orphans. */
h1,h2,h3,.eyebrow{text-wrap:balance}
p,li,.lead{text-wrap:pretty}

/* ============ header ============ */
header{
  position:fixed;top:0;inset-inline:0;z-index:150;
  border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg);
  overflow:hidden;transition:box-shadow .4s;
}
header.stuck{box-shadow:0 8px 26px rgba(1,26,40,.26)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.brand{flex:none;display:block;line-height:0}
.brand img{height:25px;width:auto}
.navlinks{display:flex;gap:32px}
.navlinks a{
  color:#c3dbe7;text-decoration:none;font-size:15.5px;font-weight:600;
  position:relative;padding:6px 2px;transition:color .25s;border-radius:var(--r-xs);
}
.navlinks a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:2px;background:#62c6ec;border-radius:var(--r-pill);transition:width .35s var(--ease)}
.navlinks a:hover{color:#fff}
.navlinks a:hover::after{width:100%}
/* אייקון בית בתפריט העליון. קיים רק בעמודים פנימיים: בדף הבית הוא היה
   מוביל לעצמו. הקו התחתון של פריטי התפריט לא חל עליו, כי הוא סמל ולא
   מילה, והקו היה נראה כמו תקלה. במגירה בנייד יש כבר "דף הבית" בטקסט. */
.navlinks .nav-home{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;padding:0;margin-inline-end:-8px;
  border-radius:var(--r-pill);background:transparent;
  color:#c3dbe7;transition:color .25s var(--ease),background-color .25s var(--ease);
}
.navlinks .nav-home::after{content:none}   /* קו תחתון על סמל נראה כמו תקלה */
.navlinks .nav-home svg{transition:transform .25s var(--ease)}
.navlinks .nav-home:hover{color:#fff;background:rgba(255,255,255,.10)}
.navlinks .nav-home:hover svg{transform:translateY(-1px)}
.navlinks .nav-home:focus-visible{outline:2px solid #62c6ec;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.navlinks .nav-home svg{transition:none}.navlinks .nav-home:hover svg{transform:none}}
/* the page you are on: the underline is already drawn */
.navlinks a[aria-current="page"]{color:#fff}
.navlinks a[aria-current="page"]::after{width:100%}
.nav-right{display:flex;align-items:center;gap:12px;flex:none}
.nav-cta{
  flex:none;font-size:14.5px;font-weight:700;text-decoration:none;color:var(--navy);background:#fff;
  padding:11px 22px;border-radius:var(--r-md);transition:all .3s var(--ease);white-space:nowrap;
}
.nav-cta:hover{background:#d8ecf6;transform:translateY(-1px)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  font-weight:700;font-size:16.5px;padding:15px 30px;border:1px solid transparent;
  border-radius:var(--r-md);transition:all .3s var(--ease);min-height:54px;cursor:pointer;
  font-family:var(--font);
}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:var(--white)}
.btn-ghost:hover{border-color:var(--navy);background:var(--band);transform:translateY(-2px)}
/* גרסאות הכפתור שיושבות על משטח כהה. עד עכשיו הן חיו רק ב-CSS של עמודי
   השירות, ולכן כפתור על רקע נייבי בעמוד חדש נראה כמו קישור כחול. */
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#d8ecf6;transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(-5px)}   /* inline-start = leftwards in RTL */

/* ============ ambient icon layer ============ */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;display:block;color:var(--navy);animation:float 22s ease-in-out infinite;will-change:transform,opacity}
.ambient i svg{display:block;width:100%;height:100%}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.13}
  50%{transform:translate3d(0,-26px,0) rotate(4deg);opacity:.22}
}
@media (prefers-reduced-motion:reduce){.ambient i{opacity:.17!important;transform:none!important}}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.05)}
@media (max-width:760px){
  .ambient i{transform:scale(.72)}
  .ambient i:nth-child(n+9){display:none}
}

/* ============ sections ============ */
.sec{padding:88px 0}
.sec-head{max-width:820px;margin-bottom:46px}
.sec-head h2{font-size:clamp(26px,3.3vw,42px);margin:16px 0 18px;font-weight:600}

/* ============ ONE dark surface ============
   Identical to index.html: navy ground, texture layer, gradient wash. */
.dark,header,.drawer,footer{background:var(--navy);overflow:hidden}
.dark,footer{position:relative}
.dark::before,header::before,footer::before,.drawer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/img/texture.jpg") center/cover no-repeat;
  opacity:.15;mix-blend-mode:luminosity;
}
.dark::after,header::after,footer::after,.drawer::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(1,51,76,.9),rgba(1,42,63,.96));
}
.dark .wrap,footer .wrap,.nav,.drawer a{position:relative;z-index:2}
.btn-solid,.ab-call{position:relative;overflow:hidden;isolation:isolate;background:var(--navy)}
.btn-solid::before,.ab-call::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/img/texture.jpg") center/cover no-repeat;
  opacity:.15;mix-blend-mode:luminosity;
}
.btn-solid::after,.ab-call::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(1,51,76,.9),rgba(1,42,63,.96));
}
.dark{color:#e9f2f7;padding:88px 0}
.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#7fd0f0}
.dark .eyebrow::before{background:#7fd0f0}
.dark .lead{color:#b9d3e0}

.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.why{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);padding:32px 26px;position:relative;overflow:hidden;
  text-align:start;display:flex;flex-direction:column;transition:all .45s var(--ease);
}
.why-head{
  display:grid;grid-template-columns:var(--card-ico) 1fr;
  align-items:center;gap:16px;min-height:var(--card-ico);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.16);
}
.why::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(to left,transparent,#7fd0f0 50%,transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
.why:hover::before{opacity:1}
.why:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  border-color:rgba(127,208,240,.34);transform:translateY(-4px);
  box-shadow:0 22px 48px -24px rgba(0,0,0,.7);
}
.why-ico{
  align-self:start;width:var(--card-ico);height:var(--card-ico);
  border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(127,208,240,.24),rgba(127,208,240,.06));
  border:1px solid rgba(127,208,240,.26);color:#9adcf5;transition:all .45s var(--ease);
}
.why:hover .why-ico{
  background:linear-gradient(145deg,rgba(127,208,240,.4),rgba(127,208,240,.13));
  border-color:rgba(127,208,240,.52);color:#c4ecfb;
}
.why-ico svg{width:28px;height:28px}
.why h3{font-size:19px;margin:0;font-weight:700;line-height:1.32;letter-spacing:-.01em}
.why p{font-size:15.5px;color:#b9d3e0;line-height:1.75;margin:0;text-align:center;text-wrap:balance}

/* ============ process ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.step{
  background:var(--grad-card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:32px 26px;text-align:start;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.step-head{
  display:grid;grid-template-columns:var(--card-ico) 1fr;
  align-items:center;gap:16px;min-height:var(--card-ico);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.step-num{
  align-self:start;width:var(--card-ico);height:var(--card-ico);
  display:grid;place-items:center;font-size:34px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--teal);transition:color .4s var(--ease);
}
.step:hover .step-num{color:var(--navy)}
.step h3{font-size:19px;margin:0;font-weight:700;line-height:1.32}
.step p{font-size:15px;color:var(--text);line-height:1.68;margin:0;text-align:center;text-wrap:balance}

/* ============ footer ============ */
footer{
  color:#b9d3e0;padding:56px 0 30px;
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-top img{height:52px;width:auto;margin-bottom:16px}
.foot-top p{font-size:15px;max-width:42ch;line-height:1.7;color:#b9d3e0}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.foot-col a,.foot-col p{display:block;color:#b9d3e0;text-decoration:none;font-size:14.5px;margin-bottom:9px;transition:color .25s;border-radius:var(--r-xs)}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#8fb2c4}

/* ============ floating ============ */
.wa{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:160;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:12px 19px;border-radius:var(--r-md);font-size:15px;font-weight:700;
  box-shadow:var(--shadow-lg);transition:all .3s var(--ease);
}
.wa:hover{border-color:#25d366;transform:translateY(-2px)}
.wa svg{color:#25d366;flex:none}
.actionbar{display:none}

/* ============ mobile menu ============ */
.burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.26);background:transparent;
  border-radius:var(--r-md);cursor:pointer;color:#eaf3f8;transition:all .25s;
}
.burger:hover{background:rgba(255,255,255,.12)}
.burger svg{pointer-events:none}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .lines{display:none}
.drawer{
  display:none;position:fixed;inset-inline:0;top:62px;z-index:149;
  border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(1,26,40,.35);padding:10px 0 16px;
  max-height:calc(100dvh - 62px);overflow-y:auto;
}
.drawer.open{display:block}
.drawer a{
  display:block;padding:14px var(--gut);color:#dbeaf2;text-decoration:none;
  font-size:17px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.12);min-height:52px;
}
.drawer a:last-child{border-bottom:0}
.drawer a:hover,.drawer a:focus-visible{background:rgba(255,255,255,.09);color:#fff}

/* ============ motion ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.ld{opacity:0;transform:translateY(20px);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}.d5{animation-delay:.46s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.ld{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   responsive של השלד. הכללים האלה חיו עד עכשיו רק בתוך כל עמוד, ולכן
   עמוד חדש שטוען רק את site.css קיבל תפריט דסקטופ גם בטלפון. מה שכאן
   נוגע אך ורק לשלד: התפריט, המגירה, הפוטר, סרגל הפעולות והבועה הצפה.
   כללי רספונסיביות של תוכן העמוד נשארים בעמוד עצמו.
   ========================================================================== */
@media (max-width:1000px){
  .navlinks{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  :root{--bar:calc(73px + env(safe-area-inset-bottom))}
  body{font-size:16.5px}
  section[id]{scroll-margin-top:76px}
  .nav{height:62px;gap:10px}
  .nav-cta{display:none}
  .brand img{height:22px}
  .sec,.dark{padding:60px 0}
  .sec-head{margin-bottom:34px}
  .wa{display:none}
  footer{padding:32px 0 22px}
  .foot-top{flex-direction:column;align-items:center;text-align:center;gap:18px;padding-bottom:18px}
  .foot-top img{height:44px;margin:0 auto 12px}
  .foot-top p{max-width:34ch;margin-inline:auto;font-size:14px;line-height:1.6}
  .foot-cols{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 14px}
  .foot-col{display:contents}
  .foot-col h4{display:none}
  .foot-col a,.foot-col p{display:inline-block;padding:4px 0;margin:0;font-size:13px}
  .foot-bot{flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:16px}
  .actionbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;inset-inline:0;bottom:0;z-index:170;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#fff;
    border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
    box-shadow:0 -8px 26px rgba(1,26,40,.10);
  }
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:var(--r-md);text-decoration:none;font-size:16px;font-weight:700}
  .ab-call{background:var(--navy);color:#fff}
  .ab-wa{background:var(--white);border:1px solid var(--line-2);color:var(--ink)}
  .ab-wa svg{color:#25d366}
}