/* מוכרים — site.css
   צבעי המותג נדגמו מקובץ הלוגו (mokrim-UPLOAD, 13.10.2026) ויושבים בארבעת המשתנים הראשונים. */

@font-face{
  font-family:"Noto Sans Hebrew";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;
  src:url(../fonts/noto-sans-hebrew-heb.woff2) format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:"Noto Sans Hebrew";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;
  src:url(../fonts/noto-sans-hebrew-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── מותג: מהלוגו ── */
  --brand:#0c6fe4;      /* הכחול המרכזי (אמצע המעבר בלוגו): כפתורים, קישורים */
  --brand-dk:#064fa8;   /* הקצה הכהה של המעבר: ריחוף, טקסט כחול על רקע תכלת */
  --sky:#1887fe;        /* הקצה הבהיר של המעבר: הדגשות עדינות */
  --navy:#0a1420;       /* הכהה של הלוגו: כותרות */

  --sky-50:color-mix(in srgb,var(--sky) 10%,#fff);
  --sky-100:color-mix(in srgb,var(--sky) 22%,#fff);
  --sky-200:color-mix(in srgb,var(--sky) 42%,#fff);
  --bg:#fff;
  --ink:#1e2835;
  --muted:#59636e;
  --line:#e4e8ee;

  --f:"Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r:14px;
  --r-lg:24px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(5.5rem,11vw,10rem);
  --hdr-h:72px;

  --ik-accent:var(--brand);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.ic{width:1.25em;height:1.25em;flex:none}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.cta :focus-visible{outline-color:#fff}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:100;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

h1,h2{
  color:var(--navy);font-weight:800;font-stretch:84%;letter-spacing:-.012em;text-wrap:balance;
}
h2{font-size:clamp(2rem,4.7vw,3.5rem);line-height:1.08}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-block-end:18px;
  font-size:.9375rem;font-weight:600;color:var(--brand);
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--sky);border-radius:2px}

/* ── כפתורים ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 26px;border:1px solid transparent;border-radius:var(--r);
  font-weight:600;font-size:1.0625rem;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .5s var(--spring);
}
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 14px 28px -16px var(--brand)}
.btn-primary:hover{background:var(--brand-dk)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 18px 40px -20px rgba(0,0,0,.55)}
.btn-light:hover{background:var(--sky-50)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.9375rem;border-radius:12px}
.btn-lg{min-height:64px;padding:0 34px;font-size:1.1875rem}

/* ── Header ── */
.hdr{
  position:sticky;inset-block-start:0;z-index:50;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-block-end:1px solid transparent;transition:border-color .3s;
}
.hdr.is-scrolled{border-color:var(--line)}
.hdr-row{display:flex;align-items:center;gap:28px;height:var(--hdr-h)}
.logo{display:inline-flex;align-items:center;text-decoration:none;margin-inline-end:auto}
.logo img{height:40px;width:auto}
.hdr-nav{display:none;gap:28px;font-size:1rem;font-weight:500;color:var(--ink)}

/* ── 1 · Hero ── */
.hero{position:relative;padding-block:clamp(3rem,8vw,6.5rem) clamp(4rem,9vw,7rem)}
.hero-grid{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
h1{font-size:clamp(2.75rem,7.6vw,5.5rem);line-height:1.02}
h1 span{display:block}
.h1-q{color:var(--brand);padding-block-end:.08em}
.h1-a{padding-block-end:.12em}
.ik-js .h1-a[data-reveal]{transition-delay:.12s}
.hero-text{margin-block-start:clamp(1.5rem,3vw,2.25rem);max-width:34rem}
.hero-text p{font-size:1.125rem;color:var(--muted)}
.hero-text .lede{font-size:clamp(1.2rem,2.2vw,1.4rem);line-height:1.45;font-weight:500;color:var(--navy);margin-block-end:.75rem}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-block-start:2.25rem}
.more{font-weight:600;color:var(--navy);align-items:center}
.more .ic{width:1.1em;height:1.1em;rotate:-90deg;transition:translate .35s var(--ease)}
.more:hover .ic{translate:0 3px}

.hero-viz{width:100%;max-width:380px;margin-inline:auto}
.viz{width:100%;height:auto;overflow:visible}
.ring{stroke:var(--sky);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.r1{stroke-opacity:.95}.r2{stroke-opacity:.7}.r3{stroke-opacity:.45}.r4{stroke-opacity:.25}
.dot{transform-box:fill-box;transform-origin:center;stroke:#fff;stroke-width:3}
.d1,.d3{fill:var(--navy)}
.d2,.d4{fill:var(--sky)}
.core-halo{fill:var(--sky-100)}
.core{fill:var(--brand)}
.core-ic{color:#fff}
.viz-rings,.viz-dots{transition:translate .6s var(--ease)}

.ik-js .hero-viz .ring{opacity:0;transform:scale(.55);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.ik-js .hero-viz .dot{opacity:0;transform:scale(0);transition:opacity .3s,transform .6s var(--spring)}
.ik-js .hero-viz .viz-core{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease),transform .7s var(--spring)}
.ik-js .hero-viz.is-in .ring,.ik-js .hero-viz.is-in .dot,.ik-js .hero-viz.is-in .viz-core{opacity:1;transform:none}
.hero-viz .r1{transition-delay:.25s}.hero-viz .r2{transition-delay:.4s}.hero-viz .r3{transition-delay:.55s}.hero-viz .r4{transition-delay:.7s}
.hero-viz .d1{transition-delay:.7s}.hero-viz .d2{transition-delay:.95s}.hero-viz .d3{transition-delay:1.2s}.hero-viz .d4{transition-delay:1.45s}

/* ── 2 · השירות ── */
.svc{padding-block:var(--sec) clamp(1.5rem,4vw,3rem)}
.sec-head{display:grid;gap:1.75rem}
.sec-text{display:grid;gap:1rem;max-width:36rem;font-size:1.125rem;color:var(--muted)}

/* שלושה מרכיבים, כל אחד עם האיור שלו. הצדדים מתחלפים, והחוט עובר מאיור לאיור. */
.flow{position:relative;padding-block:clamp(4.5rem,9vw,7.5rem) clamp(5rem,10vw,8rem)}
.steps{display:grid;gap:clamp(4.5rem,10vw,8.5rem)}
.step{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(14px,5vw,5rem);align-items:stretch}
.step:nth-child(even){grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.step:nth-child(even) .step-viz{order:-1}
.step-text{align-self:center}
.step-ic{
  width:44px;height:44px;padding:10px;border-radius:12px;background:var(--sky-50);color:var(--brand);
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
.step.is-lit .step-ic{background:var(--brand);color:#fff}
.step h3{
  margin-block:.9rem .5rem;font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.15;font-weight:800;font-stretch:86%;
  color:var(--navy);text-wrap:balance;
}
.step p{font-size:clamp(.9375rem,1.5vw,1.125rem);line-height:1.6;color:var(--muted);max-width:30rem}

.step-viz{
  position:relative;z-index:1;display:grid;place-items:center;justify-self:center;width:100%;max-width:440px;
  min-height:clamp(190px,34vw,400px);padding:6%;border-radius:var(--r-lg);background:var(--sky-50);
}
.viz-svg{width:100%;max-width:330px;height:auto;overflow:visible}
.step-node{
  position:absolute;inset-block-start:0;inset-inline-start:50%;translate:50% -50%;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:2px solid var(--sky-200);color:var(--muted);
  font-size:.875rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),scale .6s var(--spring);
}
.step.is-lit .step-node{background:var(--brand);border-color:var(--brand);color:#fff;scale:1.12}

/* החוט */
.thread{display:none}
.ik-js .thread{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.thread-ghost{stroke:var(--sky-200);stroke-width:1.5;stroke-dasharray:2 7}
.thread-line{stroke:var(--brand);stroke-width:2.5}
.thread-tip{fill:var(--brand);stroke:#fff;stroke-width:3;opacity:0;transition:opacity .3s}
.thread.is-on .thread-tip{opacity:1}

/* האיורים — המצב הסופי הוא ברירת המחדל; בלי JS או בלי תנועה רואים אותו מיד */
.v-card{fill:#fff;stroke:var(--line)}
.viz-photo .v-card,.viz-ad .v-card,.v-main .v-card{filter:drop-shadow(0 14px 16px rgba(10,20,32,.1))}
.v-sky{fill:var(--sky-100)}
.v-car{color:var(--brand);opacity:.85}
.v-title{fill:var(--navy)}
.v-line{fill:var(--sky-200)}
.v-chip{fill:var(--sky-100)}
.v-thumb{fill:var(--sky-50);stroke:var(--sky-200);stroke-width:1.5}
.v-thumb.is-on{stroke:var(--brand);stroke-width:2.5}
.v-brackets path{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-sweep{fill:rgba(255,255,255,.85);transform:translateX(-90px) skewX(-14deg)}
.v-badge circle{fill:var(--brand)}
.v-badge use{color:#fff}
.v-rings circle{fill:none;stroke:var(--sky);stroke-width:1.2;stroke-opacity:.45}
.v-ping{fill:var(--brand);stroke:#fff;stroke-width:3}
.v-ping:nth-child(even){fill:var(--navy)}
.v-g1{transform:translate(-58px,8px) rotate(-10deg)}
.v-g2{transform:translate(58px,8px) rotate(10deg)}
.v-brackets,.v-thumb,.v-w,.v-chip,.v-badge,.v-rings circle,.v-ghost,.v-main,.v-ping{transform-box:fill-box;transform-origin:center}
.v-w{transform-origin:100% 50%}

.v-brackets{transition:opacity .4s var(--ease) .15s,transform .7s var(--ease) .15s}
.v-thumb,.v-chip{transition:opacity .4s var(--ease),transform .6s var(--spring)}
.v-thumb:nth-child(1){transition-delay:.55s}.v-thumb:nth-child(2){transition-delay:.65s}.v-thumb:nth-child(3){transition-delay:.75s}
.v-chip:nth-child(1){transition-delay:.8s}.v-chip:nth-child(2){transition-delay:.88s}.v-chip:nth-child(3){transition-delay:.96s}
.v-w{transition:transform .7s var(--ease)}
.v-w:nth-child(1){transition-delay:.15s}.v-w:nth-child(2){transition-delay:.3s}
.v-w:nth-child(3){transition-delay:.45s}.v-w:nth-child(4){transition-delay:.6s}
.v-badge{transition:opacity .3s 1s,transform .6s var(--spring) 1s}
.v-rings circle{transition:opacity .7s var(--ease),transform 1s var(--ease)}
.v-rings circle:nth-child(2){transition-delay:.12s}
.v-rings circle:nth-child(3){transition-delay:.24s}
.v-ghost{transition:opacity .4s var(--ease) .1s,transform .9s var(--ease) .1s}
.v-main{transition:transform .8s var(--ease)}
.v-ping{transition:opacity .3s,transform .6s var(--spring)}
.v-ping:nth-child(1){transition-delay:.6s}.v-ping:nth-child(2){transition-delay:.72s}
.v-ping:nth-child(3){transition-delay:.84s}.v-ping:nth-child(4){transition-delay:.96s}
.step.is-lit .v-sweep{animation:v-sweep 1.3s var(--ease) .25s}
@keyframes v-sweep{from{transform:translateX(250px) skewX(-14deg)}to{transform:translateX(-90px) skewX(-14deg)}}

/* לפני שהחוט מגיע לאיור */
.ik-js .step:not(.is-lit) .v-brackets{opacity:0;transform:scale(1.18)}
.ik-js .step:not(.is-lit) .v-thumb,.ik-js .step:not(.is-lit) .v-chip{opacity:0;transform:translateY(10px) scale(.8)}
.ik-js .step:not(.is-lit) .v-w{transform:scaleX(0)}
.ik-js .step:not(.is-lit) .v-badge,.ik-js .step:not(.is-lit) .v-ping{opacity:0;transform:scale(0)}
.ik-js .step:not(.is-lit) .v-rings circle{opacity:0;transform:scale(.6)}
.ik-js .step:not(.is-lit) .v-ghost{opacity:0;transform:none}
.ik-js .step:not(.is-lit) .v-main{transform:scale(1.12)}
.ik-js .step:not(.is-lit) .step-viz *{transition-delay:0s}

/* ── לפני / אחרי ── */
.ba{padding-block:0 var(--sec)}
.ba-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ba-copy>p:not(.eyebrow){margin-block-start:1.25rem;max-width:30rem;font-size:1.125rem;color:var(--muted)}

.cmp-switch{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-block-start:2rem;
  padding:4px;border-radius:14px;background:var(--sky-50);border:1px solid var(--line);
}
.cmp-switch button{
  position:relative;z-index:1;min-width:104px;min-height:46px;padding:0 20px;border:0;background:none;border-radius:10px;
  font-weight:600;color:var(--muted);cursor:pointer;transition:color .3s,transform .5s var(--spring);
}
.cmp-switch button[aria-pressed="true"]{color:#fff}
.cmp-thumb{
  position:absolute;inset-block:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:10px;background:var(--brand);
  transition:translate .45s var(--ease);
}
.cmp-switch:has([data-cmp-show="after"][aria-pressed="true"]) .cmp-thumb{translate:-100% 0}

.cmp-pager{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:1.25rem}
.cmp-pager[hidden]{display:none}
.cmp-pager button{
  min-width:46px;min-height:46px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);cursor:pointer;transition:border-color .25s,color .25s;
}
.cmp-pager button:hover{border-color:var(--brand);color:var(--brand)}
.cmp-pager button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand-dk);background:var(--sky-50)}

.cmp{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--sky-50);cursor:pointer}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.cmp[data-show="after"] .cmp-before,.cmp[data-show="before"] .cmp-after{opacity:0;transform:scale(1.035)}
.cmp-tag{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;padding:6px 14px;border-radius:10px;
  background:rgba(255,255,255,.94);color:var(--navy);font-size:.9375rem;font-weight:600;
}
.cmp[data-show="after"] .cmp-tag{background:var(--brand);color:#fff}

/* ── 3 · יצירת קשר ── */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  margin-inline:clamp(10px,2vw,24px);border-radius:clamp(22px,3vw,36px);
  padding-block:clamp(5rem,11vw,9rem);text-align:center;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,var(--brand),var(--brand-dk));
}
.cta-rings{
  position:absolute;z-index:-1;inset-inline-start:50%;inset-block-start:50%;width:min(1100px,190vw);max-width:none;
  margin-inline-start:calc(min(1100px,190vw) / -2);margin-block-start:calc(min(1100px,190vw) / -2);
  color:#fff;opacity:.16;stroke-width:1.2;pointer-events:none;
}
.cta h2{color:#fff;font-size:clamp(2.2rem,5.6vw,4.25rem);max-width:16ch;margin-inline:auto}
.cta p{margin:1.5rem auto 2.5rem;max-width:30rem;font-size:clamp(1.1rem,2vw,1.3rem);color:#fff}

/* ── Footer ── */
.ftr{padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;font-size:.9375rem;color:var(--muted)}
.ftr-logo{display:block;width:fit-content;margin-inline:auto;margin-block-end:2.25rem}
.ftr-logo img{height:112px;width:auto}
.ftr-row{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding-block-start:1.5rem}
.ftr-row::before{content:"";position:absolute;inset-block-start:0;inset-inline:var(--gut);height:1px;background:var(--line)}
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}
.ftr-links a{display:inline-flex;min-height:32px;align-items:center}

/* ── וואטסאפ צף ── */
.fab{
  position:fixed;z-index:60;inset-block-end:20px;inset-inline-end:20px;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:#fff;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--navy) 70%,transparent);
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .35s var(--ease),translate .45s var(--ease),visibility 0s .45s,background-color .25s,transform .5s var(--spring);
}
.fab.is-on{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.fab:hover{background:var(--brand-dk)}
.fab .ic{width:28px;height:28px}

/* ── עמודים משפטיים ── */
.doc{padding-block:clamp(2.5rem,6vw,5rem) var(--sec)}
.doc-wrap{max-width:46rem}
.doc h1{font-size:clamp(2.25rem,5.5vw,3.5rem);line-height:1.08}
.doc-meta{margin-block-start:.75rem;color:var(--muted);font-size:.9375rem}
.doc h2{font-size:clamp(1.35rem,2.6vw,1.6rem);font-stretch:90%;line-height:1.25;margin-block:2.75rem .75rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line)}
.doc h3{font-size:1.125rem;color:var(--navy);margin-block:1.5rem .4rem}
.doc p{margin-block-end:.9rem}
.doc ul{list-style:disc;padding-inline-start:1.3em;margin-block-end:1rem}
.doc li{margin-block-end:.4rem}
.doc li::marker{color:var(--sky)}
.doc a{color:var(--brand);text-underline-offset:3px}
.doc-back{display:inline-flex;margin-block-end:2rem;font-weight:600;color:var(--navy)}
.doc-back .ic{rotate:180deg}
.draft{
  margin-block:1.75rem 0;padding:14px 18px;border-radius:12px;background:#fff7d6;border:1px solid #ecd47a;color:#4d3d00;font-size:.9375rem;
}
mark.todo{background:#ffe66b;color:#3a2e00;padding:.08em .35em;border-radius:5px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── Desktop ── */
@media (min-width:860px){
  .hdr-nav{display:flex}
  .hero{min-height:calc(100svh - var(--hdr-h));display:grid;align-items:center}
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero-viz{max-width:520px}
  .sec-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:4rem}
  .sec-head{margin-block-end:0}
  .step,.step:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ba-grid{grid-template-columns:.8fr 1.2fr}
  .ftr-row{flex-direction:row;justify-content:space-between;text-align:start}
  .ftr-logo{margin-inline:0}
}
@media (max-width:859.98px){
  .fab{display:none} /* the header button is always on screen here, and a floating one covers text */
}
@media (max-width:420px){
  .hdr-row{gap:12px}
  .logo img{height:32px}
  .hero-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .ik-js .hero-viz .ring,.ik-js .hero-viz .dot,.ik-js .hero-viz .viz-core{opacity:1;transform:none}
}