:root{
  --navy:#1B517E;
  --purple:#8C53C6;
  --purple-dark:#7A44B4;
  --lilac:#EEE5F7;
  --surface:#F5F3F7;
  --ink:#1E2736;
  --muted:#6B6485;
  --line:#EEEEEE;
  --radius:14px;
  --shadow:0 1px 3px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.03);
  --shadow-btn:0 6px 18px rgba(16,24,40,.12);
  --gutter:40px;
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:#fff;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:100%;max-width:1920px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:940px;margin-inline:auto}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:17px var(--gutter);
  gap:16px;
  transition:padding .28s var(--ease), box-shadow .28s var(--ease);
}
.site-header .logo{height:72px;width:auto;transition:height .28s var(--ease)}
.pill{
  display:inline-block;
  background:var(--purple);color:#fff;
  font-size:17.5px;font-weight:700;
  padding:10px 23px;border-radius:999px;
  text-decoration:none;white-space:nowrap;
  transition:background .15s ease;
}
.pill:hover{background:var(--purple-dark)}

/* ---------- buttons ---------- */
.btn{
  -webkit-appearance:none;appearance:none;
  display:inline-block;text-decoration:none;text-align:center;
  font-size:19px;font-weight:700;line-height:1.35;
  padding:16px 30px;border-radius:10px;border:0;cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.16)}
.btn-white{background:#fff;color:var(--ink)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-dark)}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;text-align:center;padding:120px var(--gutter) 119px}
.hero .eyebrow{font-size:20px;font-weight:400;color:rgba(255,255,255,.78);margin:0 0 14px}
.hero h1{font-size:78px;font-weight:800;line-height:1.05;margin:0 0 10px;letter-spacing:-.5px}
.hero h2{font-size:37px;font-weight:700;margin:0 0 8px}
.hero .lede{font-size:22.5px;color:rgba(255,255,255,.85);margin:0 0 49px}
.hero .btn{width:auto;max-width:600px}

/* ---------- sections ---------- */
section{padding:60px 0 72px}
.section-surface{background:var(--surface)}
h2.section-title{
  font-size:44.5px;font-weight:800;line-height:1.25;
  text-align:center;margin:0 0 52px;color:var(--ink);
}
.section-sub{text-align:center;color:var(--muted);font-size:20px;margin:-38px 0 44px}

/* ---------- pain cards ---------- */
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pain-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 22px;
  display:flex;align-items:flex-start;gap:14px;
}
.pain-card svg{flex:0 0 auto;width:26px;height:26px;stroke:var(--purple);margin-top:2px}
.pain-card p{margin:0;font-size:20px;line-height:1.6;color:var(--ink)}

.callout{
  max-width:840px;margin:52px auto 0;
  background:var(--lilac);border-radius:16px;
  padding:34px 40px;text-align:center;
}
.callout p{margin:0;font-size:18.5px;color:var(--ink)}
.callout .punch{margin-top:16px;font-size:24px;font-weight:700;color:var(--purple)}

/* ---------- benefits ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px;text-align:center;
}
.benefit-card svg{width:40px;height:40px;stroke:var(--purple);margin:0 auto 26px}
.benefit-card .b-art{width:100%;max-width:200px;height:auto;display:block;stroke:none;margin:0 auto 14px}
.benefit-card h3{margin:0 0 8px;font-size:22.5px;font-weight:700;color:var(--ink)}
.benefit-card p{margin:0;font-size:17.5px;line-height:1.6;color:var(--muted)}
.center-cta{text-align:center;margin-top:40px}
.center-cta .btn{width:auto;max-width:600px}

/* ---------- how it works ---------- */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:960px;margin:0 auto}
.step{flex:1 1 0;text-align:center;padding:0 12px}
.step .emoji{font-size:36px;line-height:1;margin-bottom:22px}
.step h3{margin:0 0 14px;font-size:21px;font-weight:700;color:var(--ink)}
.step p{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.step-arrow{flex:0 0 auto;font-size:30px;color:#5A6170;padding-top:64px}

/* ---------- about ---------- */
.about{display:flex;align-items:flex-start;gap:44px;max-width:940px;margin:0 auto}
.about img{flex:0 0 190px;width:190px}
.about-text{flex:1 1 auto;text-align:right}
.about-text h2{margin:0 0 26px;font-size:34px;font-weight:800;color:var(--ink)}
.about-text .lead{margin:0 0 26px;font-size:21px;color:var(--ink)}
.about-text p{margin:0;font-size:18.5px;line-height:1.75;color:var(--muted)}

/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.tst{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px 34px;
}
.tst .quote-icon{width:22px;height:22px;fill:var(--purple);margin-bottom:18px}
.tst .body{margin:0;font-size:17.5px;line-height:24px;color:var(--ink)}
.tst hr{border:0;border-top:1px solid var(--line);margin:26px 0 20px}
.tst .who{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-direction:row-reverse}
.tst .who-text{text-align:right;flex:1 1 auto}
.tst .name{font-size:20px;font-weight:700;color:var(--ink)}
.tst .role{font-size:15.5px;color:#7A6F72;margin-top:4px}
.tst .who img{flex:0 0 auto;width:102px;height:88px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:4px;background:#fff}
.tst.extra{display:none}
.tst-grid.open .tst.extra{display:block}
.more-row{text-align:center;margin-top:34px}
.more-btn{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:20px;font-weight:700;color:var(--purple);
  display:inline-flex;align-items:center;gap:10px;padding:8px 10px;
}
.more-btn .chev{width:20px;height:20px;transition:transform .2s ease;display:inline-block}
.more-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---------- faq ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:15px 22px;
  font-size:20px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:0 0 auto;font-size:20px;line-height:1}
.faq summary .txt{flex:1 1 auto;text-align:right}
.faq summary .chev{flex:0 0 auto;width:20px;height:20px;color:#6B7085;transition:transform .2s ease}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq details[open] summary{border:1px solid var(--purple);border-radius:10px;margin:6px}
.faq .answer{padding:0 28px 24px;font-size:17.5px;line-height:1.8;color:var(--muted);text-align:right}
.faq details[open] .answer{padding-top:6px}

/* ---------- offer ---------- */
.offer-head{text-align:center;margin-bottom:46px}
.offer-head .eyebrow{font-size:20px;color:var(--muted);margin:0 0 14px}
.offer-head h2{margin:0;font-size:44.5px;font-weight:800;color:var(--ink)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;max-width:1180px;margin:0 auto}
.offer-list h3{margin:0 0 26px;font-size:29px;font-weight:700;color:var(--ink)}
.offer-list ul{list-style:none;margin:0;padding:0}
.offer-list li{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;font-size:20px;line-height:1.5;color:var(--ink)}
.offer-list li svg{flex:0 0 auto;width:23px;height:23px;stroke:var(--purple);margin-top:2px}
.offer-visual{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px}
.offer-visual svg{width:100%;height:auto;display:block}
.price-box{
  max-width:250px;margin:34px auto 0;
  background:var(--purple);color:#fff;border-radius:16px;
  padding:16px 20px;text-align:center;text-decoration:none;display:block;
  box-shadow:var(--shadow-btn);
  transition:transform .15s ease,box-shadow .15s ease;
}
.price-box:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(140,83,198,.4)}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:16px;flex-direction:row-reverse}
.price-now{font-size:40px;font-weight:800;line-height:1}
.price-old{font-size:20px;color:rgba(255,255,255,.62);text-decoration:line-through}
.price-only{margin-top:6px;font-size:16.5px;color:rgba(255,255,255,.92)}
.price-cta{margin-top:8px;font-size:17px;font-weight:700}

/* ---------- final cta ---------- */
.final{background:var(--navy);color:#fff;text-align:center;padding:78px var(--gutter) 92px}
.final h2{margin:0 0 20px;font-size:42px;font-weight:800}
.final p{margin:0 0 44px;font-size:20px;color:rgba(255,255,255,.85)}
.final .btn{width:auto;max-width:600px}

/* ---------- contact ---------- */
.contact{text-align:center;padding:78px 0 86px}
.contact h2{margin:0 0 44px;font-size:30px;font-weight:700;color:var(--ink)}
.contact-row{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.contact-item{display:inline-flex;align-items:center;gap:12px;font-size:22px;font-weight:700;text-decoration:none;color:var(--ink)}
.contact-item svg{width:25px;height:25px;stroke:var(--purple)}
.contact-item.mail{color:var(--purple);text-decoration:underline;text-underline-offset:4px}
.contact-note{margin:50px 0 0;font-size:23px;font-weight:700;color:var(--purple)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:26px var(--gutter)}
.footer-row{display:flex;align-items:center;justify-content:flex-end;gap:14px;font-size:17px;color:var(--ink)}
.footer-row a{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.footer-row a.mail{color:var(--purple);font-weight:700}
.footer-row svg{width:18px;height:18px;stroke:currentColor;opacity:.75}
.footer-sep{color:#C9CBD1}

/* ---------- side dots ---------- */
.dots{position:fixed;left:auto;right:16px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.dots i{width:7px;height:7px;border-radius:50%;background:#2B2F36;display:block;opacity:.85}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .steps{max-width:100%}
}
@media (max-width:768px){
  :root{--gutter:16px}
  .site-header .logo{height:48px}
  .hero h1{font-size:44px}
  .hero h2{font-size:26px}
  .hero .lede{font-size:18px}
  .hero .eyebrow{font-size:16px}
  .hero{padding:64px 16px 72px}
  .hero .lede{margin-bottom:38px}
  .btn{font-size:17px;padding:14px 18px}
  .hero .btn,.center-cta .btn,.final .btn{width:100%;max-width:none}
  section{padding:52px 0}
  h2.section-title{font-size:30px;margin-bottom:34px}
  .section-sub{font-size:17px}
  .about-text h2{font-size:26px}
  .offer-head h2{font-size:27px}
  .offer-list h3{font-size:22px}
  .offer-list li{font-size:17px}
  .offer-head .eyebrow{font-size:16px}
  .pill{font-size:15px;padding:8px 18px}
  .final h2{font-size:28px}
  .contact h2{font-size:23px}
  .pain-card p{font-size:17px}
  .benefit-card h3{font-size:20px}
  .benefit-card p{font-size:16px}
  .callout p{font-size:17px}
  .callout .punch{font-size:20px}
  .tst .body{font-size:16px;line-height:1.7}
  .faq summary{font-size:17px;padding:13px 16px}
  .faq .answer{font-size:16px}
  .price-now{font-size:36px}
  .contact-item{font-size:18px}
  .contact-note{font-size:17px}
  .section-sub{margin:-24px 0 30px}
  .pain-grid,.benefit-grid,.tst-grid,.offer-grid{grid-template-columns:1fr}
  .benefit-card{padding:24px 20px}
  .benefit-card .b-art{max-width:196px;margin-bottom:16px}
  .callout{padding:26px 22px}
  .steps{flex-direction:column;gap:30px}
  .step-arrow{padding-top:0;transform:rotate(-90deg);align-self:center}
  .about{flex-direction:column;align-items:center;text-align:center;gap:26px}
  .about img{flex:0 0 auto;width:150px}
  .about-text{text-align:center}
  .tst{padding:24px 22px}
  .tst .who{flex-direction:column;align-items:flex-start;gap:14px}
  .tst .who img{width:96px}
  .offer-grid{gap:30px}
  .final{padding:56px 16px 64px}
  .contact-row{gap:22px;flex-direction:column}
  .footer-row{flex-wrap:wrap;justify-content:center;text-align:center}
  .dots{display:none}
}

/* ============================================================
   שכבת התנועה — נוספה מעל העיצוב הקיים, לא במקומו
   ============================================================ */

@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes slideArrow{0%,100%{translate:0 0;opacity:.6}50%{translate:-9px 0;opacity:1}}
@keyframes slideArrowV{0%,100%{translate:0 0;opacity:.6}50%{translate:0 9px;opacity:1}}
@keyframes bounceUp{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes shine{from{transform:translateX(-170%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}
@keyframes answerIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,44px) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(64px,-40px) scale(1.09)}}

/* ---------- חשיפה בגלילה ---------- */
html.js .reveal{
  opacity:0;translate:0 26px;
  transition:opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.js .reveal.in{opacity:1;translate:0 0}

/* ---------- הדר, פס התקדמות ונקודות ---------- */
.site-header{position:sticky}
.site-header.scrolled{padding-top:11px;padding-bottom:11px;box-shadow:0 6px 22px rgba(16,24,40,.09)}
.site-header.scrolled .logo{height:58px}
.site-header picture{display:block;min-width:0}
.progress{position:absolute;inset:auto 0 0 0;height:3px;pointer-events:none;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--purple))}
.pill{transition:background var(--t-fast) ease, transform var(--t) var(--ease-back), box-shadow var(--t) var(--ease)}
.pill:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 22px rgba(140,83,198,.38)}
.pill:active{transform:translateY(-1px) scale(.99)}
.dots i{transition:width var(--t) var(--ease-back), height var(--t) var(--ease-back), background var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.dots i.active{width:11px;height:11px;background:var(--purple);opacity:1;box-shadow:0 0 0 4px rgba(140,83,198,.18)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero::before{width:520px;height:520px;top:-190px;right:-130px;
  background:radial-gradient(circle,rgba(140,83,198,.34),rgba(140,83,198,0) 68%);
  animation:drift1 18s ease-in-out infinite}
.hero::after{width:640px;height:640px;bottom:-280px;left:-170px;
  background:radial-gradient(circle,rgba(255,255,255,.17),rgba(255,255,255,0) 66%);
  animation:drift2 24s ease-in-out infinite}
html.js .hero .eyebrow,html.js .hero h1,html.js .hero h2,html.js .hero .lede,html.js .hero .btn{
  animation:rise .75s var(--ease) backwards}
html.js .hero h1{animation-delay:.09s}
html.js .hero h2{animation-delay:.18s}
html.js .hero .lede{animation-delay:.27s}
html.js .hero .btn{animation-delay:.36s}

/* ---------- כפתורים ---------- */
.btn{position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease-back), box-shadow var(--t) var(--ease),
             background var(--t-fast) ease, color var(--t-fast) ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transform:translateX(-170%) skewX(-18deg);pointer-events:none}
.btn-white::after{background:linear-gradient(90deg,rgba(27,81,126,0),rgba(27,81,126,.16),rgba(27,81,126,0))}
.hero .btn::after{animation:shine 3.6s var(--ease) 1.8s infinite}
.btn .arr{display:inline-block;transition:transform var(--t) var(--ease-back)}
.btn:hover{transform:translateY(-4px) scale(1.035)}
.btn:hover::after{animation:shine .75s var(--ease)}
.btn:hover .arr{transform:translateX(-7px)}
.btn:active{transform:translateY(-1px) scale(.99);transition-duration:.09s}
.btn-purple:hover{box-shadow:0 14px 30px rgba(140,83,198,.42)}

/* ---------- קישורים: אפקט מעברי ---------- */
.lnk{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:0 2px;
  background-position:100% calc(100% - 1px);
  text-decoration:none;
  transition:background-size var(--t) var(--ease), color var(--t-fast) ease, transform var(--t) var(--ease);
}
.lnk:hover{background-size:100% 2px;color:var(--purple);transform:translateY(-2px)}
.contact-item.mail.lnk{text-decoration:underline;text-underline-offset:4px;
  transition:background-size var(--t) var(--ease), color var(--t-fast) ease,
             transform var(--t) var(--ease), text-decoration-color var(--t-fast) ease}
.contact-item.mail.lnk:hover{text-decoration-color:transparent;color:var(--purple-dark)}
.lnk svg{transition:transform var(--t) var(--ease-back)}
.lnk:hover svg{transform:scale(1.18) rotate(-8deg)}
.more-btn .chev{animation:bounceUp 1.8s ease-in-out infinite}
.more-btn[aria-expanded="true"] .chev{animation:none}

/* ---------- כרטיסים ---------- */
html.is-scrolling body{pointer-events:none}
.pain-card,.benefit-card,.tst{
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease)}
.pain-card:hover,.benefit-card:hover,.tst:hover{
  transform:translateY(-6px);box-shadow:0 16px 36px rgba(16,24,40,.11);border-color:rgba(140,83,198,.45)}
.pain-card svg,.benefit-card svg,.tst .quote-icon{transition:transform var(--t) var(--ease-back)}
.pain-card:hover svg{transform:scale(1.2) rotate(-9deg)}
.benefit-card:hover svg{transform:scale(1.18) rotate(7deg)}
.benefit-card:hover .b-art{transform:translateY(-4px) scale(1.03)}
.tst:hover .quote-icon{transform:scale(1.25) rotate(-7deg)}
.tst-grid.open .tst.extra{animation:rise .55s var(--ease) backwards}
.tst-grid.open .tst.extra:nth-of-type(6){animation-delay:.08s}
.tst-grid.open .tst.extra:nth-of-type(7){animation-delay:.16s}
.tst-grid.open .tst.extra:nth-of-type(8){animation-delay:.24s}
.offer-list li{transition:transform var(--t) var(--ease)}
.offer-list li:hover{transform:translateX(-6px)}
.offer-list li svg{transition:transform var(--t) var(--ease-back)}
.offer-list li:hover svg{transform:scale(1.25)}

/* ---------- שלבים ---------- */
.step .emoji{animation:float 3.2s ease-in-out infinite}
.steps .step:nth-child(3) .emoji{animation-delay:.45s}
.steps .step:nth-child(5) .emoji{animation-delay:.9s}
.step-arrow{animation:slideArrow 2.4s ease-in-out infinite}
.steps .step-arrow:nth-child(4){animation-delay:.3s}

/* ---------- שאלות נפוצות ---------- */
.faq details{transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease)}
.faq details:hover{box-shadow:0 10px 26px rgba(16,24,40,.09);border-color:rgba(140,83,198,.35)}
.faq summary{transition:background var(--t-fast) ease}
.faq summary:hover{background:var(--lilac)}
.faq summary .q{display:inline-block;transition:transform var(--t) var(--ease-back)}
.faq summary:hover .q{transform:scale(1.3) rotate(-10deg)}
.faq details[open] .answer{animation:answerIn .35s var(--ease)}

/* ---------- תיבת המחיר ---------- */
.price-box{position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease-back), box-shadow var(--t) var(--ease)}
.price-box::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34),rgba(255,255,255,0));
  transform:translateX(-170%) skewX(-18deg);pointer-events:none;
  animation:shine 4.2s var(--ease) 2.2s infinite}
.price-box:hover{transform:translateY(-5px) scale(1.035);box-shadow:0 18px 40px rgba(140,83,198,.45)}
.price-box:hover::after{animation:shine .8s var(--ease)}
.price-cta .hand{display:inline-block;animation:bounceUp 1.6s ease-in-out infinite}
.contact-note{transition:transform var(--t) var(--ease)}

@media (max-width:768px){
  .step-arrow{animation-name:slideArrowV}
  .hero::before{width:320px;height:320px;top:-130px;right:-90px}
  .hero::after{width:380px;height:380px;bottom:-190px;left:-120px}
}

/* ============================================================
   אזור פתיחה בהיר עם תרשים אוטומציה מתחלף (2026-10-14, נבחר מתוך lab.html)
   ============================================================ */
@property --on{syntax:'<number>';inherits:true;initial-value:0}
@property --p{syntax:'<number>';inherits:true;initial-value:0}

.hero.lab{background:var(--surface);color:var(--ink);text-align:right;padding:84px var(--gutter) 92px}
.hero.lab::before{background:radial-gradient(circle,rgba(140,83,198,.16),rgba(140,83,198,0) 68%)}
.hero.lab::after{background:radial-gradient(circle,rgba(27,81,126,.12),rgba(27,81,126,0) 66%)}
.lab-grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.lab-copy{min-width:0}
.hero.lab .eyebrow{color:var(--muted)}
.hero.lab h1{color:var(--navy)}
.hero.lab h2{color:var(--ink)}
.hero.lab .lede{color:var(--muted);max-width:30ch}
.hero.lab .btn{max-width:600px}

/* במה + בורר */
.stage{min-width:0;text-align:right;display:flex;flex-direction:column;gap:18px}
html.js .hero .stage{animation:rise .75s var(--ease) .3s backwards}
.variant{min-height:420px;display:flex;flex-direction:column;justify-content:center}

.ui-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(27,81,126,.08)}
.ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lilac);color:var(--purple)}
.ico svg{width:24px;height:24px}

/* ---------- תרשים אוטומציה חי ---------- */
.flow{position:relative;max-width:560px;width:100%;margin:0 auto}
.fcard{width:72%;display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-color:color-mix(in srgb,var(--navy) calc(var(--on)*100%),var(--line));
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(27,81,126,calc(.06 + var(--on)*.14));
  scale:calc(1 + var(--on)*.025)}
.fcard.r{margin-inline-start:0;margin-inline-end:auto}
.fcard.l{margin-inline-start:auto;margin-inline-end:0}
.fcard .txt{min-width:0;flex:1}
.fcard b{display:block;font-size:18px;font-weight:800;color:var(--ink)}
.fcard small{display:block;font-size:14.5px;color:var(--muted)}
.chip{flex:none;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--lilac);color:var(--purple);
  opacity:calc(.25 + var(--on)*.75)}
.chip.ok{background:#E3F4EA;color:#1E7A46}
.fa{animation:litA 7s linear infinite}
.fb{animation:litB 7s linear infinite}
.fc{animation:litC 7s linear infinite}
.fb .ico svg{animation:spin 2.4s linear infinite}
@keyframes litA{0%{--on:0}4%{--on:1}24%{--on:1}30%{--on:0}100%{--on:0}}
@keyframes litB{0%,40%{--on:0}45%{--on:1}62%{--on:1}68%{--on:0}100%{--on:0}}
@keyframes litC{0%,78%{--on:0}83%{--on:1}95%{--on:1}100%{--on:0}}
@keyframes spin{to{rotate:360deg}}
.fconn{position:relative;height:64px}
.fconn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fconn path{fill:none;stroke:var(--navy);stroke-opacity:.32;stroke-width:2;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;
  animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-11}}
/* הנקודה נעה בדיוק על העקומה: x=smoothstep, y=הבזייה של המסלול */
.fconn .dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 0 5px rgba(140,83,198,.18),0 0 16px rgba(140,83,198,.6);
  translate:-50% -50%;opacity:calc(var(--p) * (1 - var(--p)) * 4.4);
  --s:calc(var(--p)*var(--p)*(3 - 2*var(--p)));
  top:calc((84*var(--p) - 84*var(--p)*var(--p) + 56*var(--p)*var(--p)*var(--p)) / 56 * 100%)}
.c1 .dot{left:calc(64% - 28%*var(--s));animation:runA 7s linear infinite}
.c2 .dot{left:calc(36% + 28%*var(--s));animation:runB 7s linear infinite}
@keyframes runA{0%,24%{--p:0}42%{--p:1}100%{--p:1}}
@keyframes runB{0%,62%{--p:0}80%{--p:1}100%{--p:1}}
.flow-note{margin:22px auto 0;text-align:center;font-size:15px;color:var(--muted)}
.flow-note strong{color:var(--navy)}

/* ---------- תרשים מתחלף ---------- */
#cycleFlow .txt,#cycleNote{transition:opacity .22s ease}
#cycleFlow.swap .txt,#cycleNote.swap{opacity:0}
/* גרסה קומפקטית של התרשים — לבקשת המשתמשת: "גדול מדי, להקטין מעט ולצופף" */
#v-cycle{min-height:0}
#v-cycle .flow{max-width:480px}
#v-cycle .fcard{padding:10px 14px;gap:11px}
#v-cycle .fcard b{font-size:16px;line-height:1.3}
#v-cycle .fcard small{font-size:13.5px;line-height:1.35}
#v-cycle .ico{width:34px;height:34px;border-radius:10px}
#v-cycle .ico svg{width:19px;height:19px}
#v-cycle .chip{font-size:12px;padding:3px 9px}
#v-cycle .fconn{height:40px}
#v-cycle .dot{width:11px;height:11px}
.cycle-note{max-width:400px;min-height:2.8em;margin-top:14px;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink)}
.cycle-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.cycle-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#D5CDE2;cursor:pointer;
  transition:width var(--t) var(--ease),background var(--t-fast) ease}
.cycle-dots button[aria-current="true"]{width:24px;background:var(--purple)}
.cycle-dots button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ---------- "החל מ-" מתחת לכפתור הפתיחה ---------- */
.from-price{margin:16px 0 0;font-size:17px;color:var(--muted)}
.from-price a{text-decoration:none}
.from-price b{color:var(--navy);font-weight:800}
.from-price a:hover{color:var(--navy)}
html.js .hero .from-price{animation:rise .75s var(--ease) .45s backwards}

/* ---------- מחירון ---------- */
.price-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1380px;margin:0 auto 44px;align-items:start}
.pgroup{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 10px}
.pgroup h3{margin:0 0 6px;font-size:23px;font-weight:800;color:var(--navy)}
.pgroup ul{list-style:none;margin:0;padding:0}
.pgroup li{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.pgroup li:first-child{border-top:0}
.pi{min-width:0}
.pi b{display:block;font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
.pi small{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pp{flex:none;font-size:23px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp s{display:block;font-size:16.5px;font-weight:500;color:var(--muted);text-align:left}
.pp-text{font-size:16px;font-weight:700;color:var(--purple);padding-top:3px}
.pgroup li.hot{background:var(--lilac);border-radius:12px;padding:16px 14px;margin:0 -14px;border-top-color:transparent}
.pgroup li.hot+li{border-top-color:transparent}
.hot .pp{color:var(--purple)}
.ptag{display:inline-block;vertical-align:2px;margin-inline-start:6px;font-size:12.5px;font-weight:700;color:#fff;background:var(--purple);
  border-radius:999px;padding:2px 9px;text-decoration:none}
@media (max-width:1100px){.price-groups{grid-template-columns:minmax(0,1fr);max-width:760px}}
@media (max-width:768px){
  .pgroup{padding:20px 18px 6px}
  .pgroup h3{font-size:20px}
  .pi b{font-size:16.5px}
  .pi small{font-size:14.5px}
  .pp{font-size:20px}
}
#v-cycle.paused .fcard,#v-cycle.paused .dot,#v-cycle.paused .fb .ico svg{animation-play-state:paused}

@media (max-width:1100px){
  .lab-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero.lab{text-align:center}
  .hero.lab .lede{margin-inline:auto}
}
@media (max-width:768px){
  .hero.lab{padding:48px 16px 60px}
  .variant{min-height:0}
  .fcard{width:84%;padding:13px 14px;gap:11px}
  .fcard b{font-size:16px}
  .fcard small{font-size:13px}
  .ico{width:38px;height:38px}
  .fconn svg{scale:.5715 1}
  .c1 .dot{left:calc(58% - 16%*var(--s))}
  .c2 .dot{left:calc(42% + 16%*var(--s))}
}

/* ---------- חבילות (10% הנחה מסכום המחירים המלאים) ---------- */
.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1000px;margin:0 auto 26px}
.pack{display:flex;flex-direction:column;background:#fff;border:2px solid var(--lilac);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 24px 22px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pack:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(140,83,198,.16)}
.pack-tag{align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:var(--purple);border-radius:999px;padding:2px 10px}
.pack h3{margin:8px 0 2px;font-size:23px;font-weight:800;color:var(--navy)}
.pack-for{margin:0 0 12px;font-size:16px;color:var(--muted)}
.pack ul{list-style:none;margin:0 0 16px;padding:0;font-size:16.5px;line-height:1.45;color:var(--ink)}
.pack li{display:flex;gap:8px;padding:5px 0}
.pack li::before{content:"✓";flex:none;color:var(--purple);font-weight:800}
.pack-sub{display:block;font-size:14.5px;color:var(--muted)}
.pack-launch{display:block;margin-top:2px;font-size:15.5px}
.pack-launch s{color:var(--muted)}
.pack-launch b{color:var(--purple);font-weight:800}
.pack-price{margin-top:auto;display:flex;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.pack-price strong{font-size:34px;font-weight:800;line-height:1;color:var(--purple);font-variant-numeric:tabular-nums}
.pack-price s{font-size:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.pack-price small{margin-inline-start:auto;font-size:18px;font-weight:700;color:var(--purple-dark);background:var(--lilac);border-radius:999px;padding:5px 14px;white-space:nowrap}
/* תוספת מתחת לחבילות (כתיבת הקופי של ציפי): מסגרת מקווקוות עם פלוס שמחבר אותה לחבילות */
.addon{position:relative;max-width:1000px;margin:40px auto 30px;border:2px dashed var(--purple);border-radius:var(--radius);background:#fff;padding:30px 26px 22px;text-align:center}
.addon-plus{position:absolute;top:-22px;left:50%;translate:-50% 0;width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;font-size:26px;font-weight:800;line-height:40px}
.addon-kicker{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--purple)}
.addon h3{margin:0;font-size:22px;font-weight:800;color:var(--navy)}
.addon-fields{margin:4px 0 12px;font-size:15.5px;color:var(--muted)}
.addon-price{white-space:nowrap}
.addon-price s{font-size:19px;color:var(--muted)}
.addon-price b{margin:0 6px;font-size:30px;font-weight:800;color:var(--purple)}
.addon-price small{margin-inline-start:10px;font-size:17px;font-weight:700;color:#fff;background:#C23E64;border-radius:999px;padding:2px 9px;vertical-align:middle}
.ring-box{display:flex;align-items:center;gap:22px;max-width:1000px;margin:36px auto 26px;border:2px solid var(--purple);border-radius:var(--radius);background:#fff;padding:24px 26px;box-shadow:0 8px 24px rgba(140,83,198,.12)}
.ring-icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--lilac);display:grid;place-items:center}
.ring-icon svg{width:34px;height:34px;stroke:var(--purple)}
.ring-txt{flex:1}
.ring-txt h3{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--navy)}
.ring-txt p{margin:0;font-size:16.5px;line-height:1.55}
.ring-txt .ring-note{margin-top:6px;font-weight:700;color:var(--purple)}
.ring-price{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.ring-price b{font-size:32px;font-weight:800;color:var(--purple);line-height:1.1}
.ring-price small{font-size:15px;font-weight:700;color:var(--muted)}
.ring-once{margin:4px 0 10px;font-size:14px;font-weight:700;color:#1E7A50;background:#E6F5EC;border-radius:999px;padding:3px 11px;white-space:nowrap}
@media (max-width:700px){.ring-box{flex-direction:column;text-align:center;gap:12px}}
.or-single{display:block;margin:6px auto 16px;line-height:1.4;text-align:center;font-size:21px;font-weight:800;color:var(--navy)}
@media (max-width:768px){
  .packs{grid-template-columns:minmax(0,1fr);gap:12px}
  .pack{padding:16px 18px 18px}
  .pack h3{font-size:20px}
  .pack ul{font-size:15.5px}
  .pack-price strong{font-size:30px}
  .pack-price{flex-wrap:wrap;row-gap:8px}
  .pack-price small{font-size:16.5px;padding:4px 12px}
  .or-single{font-size:19px}
}

/* ---------- פס הטבת ההשקה בראש המחירון ---------- */

.promo{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:26px;align-items:center;
  max-width:1000px;margin:0 auto 26px;padding:14px 26px 14px 22px;border-radius:var(--radius);
  background:var(--lilac);text-decoration:none;color:var(--ink);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.promo:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(140,83,198,.22)}
.promo-art{background:#fff;border-radius:10px;padding:6px;min-width:0}
.promo-art svg{display:block;width:100%;height:auto}
.promo-txt{min-width:0}
.promo-tag{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;background:var(--purple);border-radius:999px;padding:2px 10px}
.promo-txt b{display:block;margin:6px 0 6px;font-size:21px;font-weight:800;color:var(--navy)}
.promo-txt ul{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.promo-txt li::before{content:"✓";color:var(--purple);font-weight:800;margin-inline-end:7px}
.promo-price{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.promo-price s{font-size:17px;color:var(--muted)}
/* מחיר ישן מחוק: אפור כהה וקו אדום עבה, כדי שיורגש בלי להתחרות במחיר החדש */
.pp s,.pack-launch s,.pack-price s,.addon-price s,.promo-price s,.zp-price s{color:#4F4A66;text-decoration-color:#E0475B;text-decoration-thickness:2px}
.promo-price strong{font-size:36px;font-weight:800;line-height:1;color:var(--purple)}
.promo-cta{margin-top:8px;font-size:15px;font-weight:700;color:#fff;background:var(--purple);border-radius:999px;padding:6px 16px;white-space:nowrap}
@media (max-width:768px){
  .promo{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;text-align:center}
  .promo-art{max-width:240px;margin:0 auto}
}

/* ---------- "מה תרוויחו" — ריווח צפוף (לבקשה חוזרת של המשתמשת) ---------- */
#benefits{padding:34px 0 38px}
#benefits h2.section-title{margin-bottom:24px}
#benefits .benefit-grid{gap:14px}
#benefits .benefit-card{padding:16px 18px 18px}
#benefits .benefit-card .b-art{max-width:150px;margin:0 auto 6px}
#benefits .benefit-card h3{margin:0 0 4px;font-size:20px}
#benefits .benefit-card p{font-size:16.5px;line-height:1.45}
#benefits .center-cta{margin-top:22px}
@media (max-width:768px){
  #benefits{padding:28px 0 32px}
  #benefits h2.section-title{margin-bottom:18px}
  #benefits .benefit-card{padding:14px 16px 16px}
  #benefits .benefit-card .b-art{max-width:130px}
  #benefits .benefit-card h3{font-size:18.5px}
  #benefits .benefit-card p{font-size:15.5px}
}

/* ============================================================
   ריווח צפוף לכל הדף (2026-10-14, לבקשת המשתמשת: "הכל מדי מרווח").
   בלוק אחד שדורס את הריווחים המקוריים; הערכים המכוילים למעלה לא נמחקו.
   ============================================================ */
section{padding:30px 0 34px}
h2.section-title{font-size:38px;margin-bottom:22px}
.section-sub{margin:-14px 0 18px;font-size:18px}
.site-header{padding-top:10px;padding-bottom:10px}
.site-header .logo{height:60px}
.site-header.scrolled .logo{height:50px}
/* פתיחה */
.hero.lab{padding:40px var(--gutter) 44px}
.lab-grid{gap:36px}
.hero .eyebrow{margin-bottom:6px}
.hero h1{margin-bottom:4px}
.hero h2{margin-bottom:4px}
.hero .lede{margin-bottom:24px}
.from-price{margin-top:10px}
/* כאבים */
.pain-grid{gap:10px}
.pain-card{padding:11px 16px;gap:12px}
.pain-card p{font-size:18px;line-height:1.45}
.callout{margin-top:20px;padding:16px 24px}
.callout .punch{margin-top:6px;font-size:22px}
/* יתרונות */
#benefits{padding:30px 0 34px}
#benefits h2.section-title{margin-bottom:20px}
/* איך זה עובד */
.step .emoji{margin-bottom:8px;font-size:32px}
.step h3{margin-bottom:4px}
.step p{line-height:1.45}
.step-arrow{padding-top:30px}
/* אודות */
.about{gap:28px}
.about img{flex-basis:140px;width:140px}
.about-text h2{margin-bottom:8px;font-size:30px}
.about-text .lead{margin-bottom:8px}
.about-text p{line-height:1.6}
/* המלצות */
.tst-grid{gap:14px}
.tst{padding:18px 22px}
.tst .quote-icon{margin-bottom:8px}
.tst hr{margin:14px 0 12px}
.more-row{margin-top:14px}
/* שאלות */
.faq details{margin-bottom:8px}
/* מחירון */
.promo{margin-bottom:16px;padding-top:10px;padding-bottom:10px}
.price-groups{gap:16px;margin-bottom:22px}
.pgroup{padding:18px 20px 6px}
.pgroup li{padding:10px 0}
.pi small{margin-top:5px;line-height:1.45}
.center-cta{margin-top:22px}
/* סיום ויצירת קשר */
.final{padding:36px var(--gutter) 40px}
.final h2{margin-bottom:8px}
.final p{margin-bottom:20px}
.contact{padding:32px 0 34px}
.contact h2{margin-bottom:18px}
.contact-note{margin-top:20px}
.site-footer{padding:16px var(--gutter)}
@media (max-width:768px){
  section{padding:24px 0 28px}
  h2.section-title{font-size:27px;margin-bottom:16px}
  .site-header .logo{height:44px}
  .hero.lab{padding:28px 16px 32px}
  .lab-grid{gap:24px}
  .hero .lede{margin-bottom:18px}
  .pain-card p{font-size:16px}
  .callout{padding:14px 16px}
  .callout .punch{font-size:19px}
  #benefits{padding:24px 0 28px}
  .steps{gap:14px}
  .about{gap:14px}
  .about img{width:110px}
  .about-text h2{font-size:24px}
  .tst{padding:16px 16px}
  .final{padding:28px 16px 32px}
  .contact{padding:26px 0 28px}
  .contact-row{gap:12px}
}

/* ============================================================
   צמצום נוסף + המלצות קומפקטיות (2026-10-15, "הכל מדי מדי מרווח")
   ============================================================ */
section{padding:20px 0 22px}
#benefits{padding:20px 0 22px}
h2.section-title{font-size:34px;margin-bottom:14px}
.section-sub{margin:-8px 0 12px}
.hero.lab{padding:24px var(--gutter) 28px}
.lab-grid{gap:28px}
.hero .lede{margin-bottom:16px}
.pain-grid{gap:7px}
.pain-card{padding:8px 14px}
.callout{margin-top:12px;padding:12px 20px}
.final{padding:24px var(--gutter) 26px}
.contact{padding:20px 0 22px}
.contact h2{margin-bottom:12px}
.contact-note{margin-top:12px}
.price-groups{gap:20px;margin-bottom:14px}
/* כל שירות בטבלת המחירים כאריח נפרד ובהיר, עם רווח קטן בין אריח לאריח — שהקבוצה לא תיראה כמלבן אחד ארוך */
.pgroup{padding-bottom:20px}
.pgroup ul{display:grid;gap:10px;margin-top:12px}
.pgroup li,.pgroup li:first-child{padding:14px 16px;border:1px solid #ECE4F5;border-radius:12px;background:#FBF9FD}
.center-cta{margin-top:14px}
.faq details{margin-bottom:6px}
.faq summary{padding:10px 18px;font-size:18px}
/* המלצות */
.tst-grid{gap:10px}
.tst{padding:12px 16px}
.tst .quote-icon{width:11px;height:11px;margin-bottom:3px}
.tst .body{font-size:15.5px;line-height:22px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.tst.expanded .body{display:block;overflow:visible}
.tst .read-more{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;padding:2px 0 0;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--purple);text-decoration:underline;text-underline-offset:3px;
}
.tst hr{margin:8px 0}
.tst .who{gap:12px}
.tst .name{font-size:17px}
.tst .role{font-size:14px;margin-top:1px}
.tst .who img{width:56px;height:48px;padding:2px}
.more-row{margin-top:6px}
.more-btn{font-size:18px;padding:4px 8px}
/* השאלה של התרחיש — ככותרת מעל התרשים */
.cycle-note.cycle-q{max-width:480px;text-align:center;min-height:2.7em;margin:0 auto 12px;font-size:21px;line-height:1.35;font-weight:800;color:var(--navy)}
/* "פתרונות החל מ-₪147" — כמו לינק */
.from-price{font-size:20px}
.from-price a{color:var(--purple);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.from-price a b{color:inherit}
.from-price a:hover{color:var(--navy)}
@media (max-width:768px){
  section{padding:16px 0 18px}
  #benefits{padding:16px 0 18px}
  h2.section-title{font-size:24px;margin-bottom:12px}
  .hero.lab{padding:18px 16px 22px}
  .lab-grid{gap:18px}
  .tst{padding:10px 12px}
  .cycle-note.cycle-q{font-size:18px}
  .final{padding:20px 16px 22px}
  .contact{padding:18px 0 20px}
}

/* ============================================================
   רווח של כ-4 שורות בין מקטע למקטע (2026-10-15, הוכפל לבקשת המשתמשת), וגם לפני "אם גם אתם מרגישים"
   ============================================================ */
section,#benefits{padding:70px 0 50px}
.callout{margin-top:112px}
.final{padding-top:70px;padding-bottom:50px}
.contact{padding-top:70px;padding-bottom:50px}
.hero.lab{padding-bottom:54px}
@media (max-width:768px){
  section,#benefits{padding:56px 0 40px}
  .callout{margin-top:88px}
  .final{padding-top:56px;padding-bottom:40px}
  .contact{padding-top:56px;padding-bottom:40px}
  .hero.lab{padding-bottom:41px}
}

/* ---------- כיבוי מוחלט למי שביקש פחות תנועה ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1!important;translate:none!important}
  .btn::after,.price-box::after,.svc-anim .svc-card::after,.pigeon{display:none}
  .fcard{--on:1}
  .fconn .dot{display:none}
}
/* ---------- חלונית השארת פרטים (נשלחת ברקע לטופס הגוגל) ---------- */
.lead-dlg{
  width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:0;border-radius:18px;
  background:#fff;color:var(--ink);
  box-shadow:0 24px 60px rgba(27,81,126,.28);
  overflow:auto;overflow-x:clip;overscroll-behavior:contain;
}
.lead-dlg::backdrop{background:rgba(30,39,54,.55);backdrop-filter:blur(3px)}
.lead-dlg[open]{animation:lead-in var(--t) var(--ease)}
@keyframes lead-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lead-inner{position:relative;padding:34px 34px 30px}
.lead-x{
  position:absolute;top:14px;left:14px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--surface);color:var(--muted);font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--t-fast) ease,color var(--t-fast) ease;
}
.lead-x:hover{background:var(--lilac);color:var(--purple)}
.lead-dlg h2{margin:0 0 10px 44px;font-size:24px;font-weight:800;line-height:1.3;color:var(--navy)}
.lead-steps{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:14.5px;font-weight:500;color:var(--muted)}
.lead-steps i{flex:1;height:5px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.lead-steps i::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:50%;background:var(--purple);border-radius:inherit;transition:width var(--t) var(--ease)}
.lead-dlg[data-step="2"] .lead-steps i::after{width:100%}
.lead-dlg[data-step="done"] .lead-steps{display:none}
.lead-dlg .nowrap{white-space:nowrap}
.lead-step[hidden]{display:none}
.lead-intro{margin:-6px 0 22px;padding:14px 16px;border-radius:12px;background:var(--lilac);font-size:16.5px;line-height:1.6}
.lead-f{display:block;margin:0 0 18px}
.lead-f>span{display:block;margin:0 0 7px;font-size:16.5px;font-weight:700;line-height:1.45}
.lead-f>span small{font-weight:400;color:var(--muted);font-size:14.5px}
.lead-f>span b{color:var(--purple)}
.lead-dlg input[type=text],.lead-dlg input[type=email],.lead-dlg input[type=tel],.lead-dlg select,.lead-dlg textarea{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  padding:12px 14px;border:1.5px solid #DCD6E4;border-radius:10px;background:#fff;
  transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
.lead-dlg textarea{min-height:96px;resize:vertical;line-height:1.55}
.lead-dlg select{
  -webkit-appearance:none;appearance:none;padding-left:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6485' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center/18px;
}
.lead-dlg input[type=email],.lead-dlg input[type=tel]{direction:ltr;text-align:right}
.lead-dlg input:focus,.lead-dlg select:focus,.lead-dlg textarea:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 4px rgba(140,83,198,.16)}
.lead-dlg .bad input,.lead-dlg .bad select{border-color:#C8364A}
.lead-err{display:none;margin:6px 0 0;font-size:14.5px;font-weight:500;color:#C8364A}
.lead-dlg .bad .lead-err{display:block}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.lead-stars{display:flex;gap:4px;margin:0;padding:0;border:0}
.lead-stars input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lead-stars label{cursor:pointer;padding:3px;border-radius:8px;color:#D9D3E2;transition:color var(--t-fast) ease,transform var(--t-fast) ease}
.lead-stars label:hover{transform:scale(1.12)}
.lead-stars label.lit{color:#F5B301}
/* מסגרת כהה לכוכבים — שיהיו מורגשים גם בניגודיות נמוכה (התקן דורש 3:1 לרכיבים גרפיים) */
.lead-stars svg{stroke:#857A99;stroke-width:1.4;stroke-linejoin:round}
.lead-stars label.lit svg{stroke:#9A6500}
.lead-rate-out{display:block;margin-top:4px;font-size:14.5px;color:var(--muted)}
.lead-stars svg{display:block;width:34px;height:34px;fill:currentColor}
.lead-stars input:focus-visible+label{outline:2px solid var(--purple);outline-offset:2px}
.lead-actions{display:flex;gap:12px;align-items:center;margin-top:24px}
.lead-actions .btn{flex:1;padding:14px 24px}
.lead-back{flex:none!important;background:none;border:0;box-shadow:none;font:inherit;font-size:17px;font-weight:700;color:var(--muted);cursor:pointer;padding:14px 8px}
.lead-back:hover{color:var(--purple)}
.lead-dlg .btn[disabled]{opacity:.65;cursor:progress;transform:none}
.lead-fail{display:none;margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#FBEAEC;color:#9E2234;font-size:15.5px;line-height:1.55}
.lead-fail.on{display:block}
.services-line{margin:8px 0 0;font-size:17px;font-weight:500;color:var(--muted)}
@media (max-width:768px){.services-line{font-size:15px}}
.lead-consent{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.lead-fail a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lead-done{text-align:center;padding:12px 0 6px}
.lead-done svg{width:64px;height:64px;margin:0 auto 18px;stroke:var(--purple)}
.lead-done h3{margin:0 0 10px;font-size:25px;font-weight:800;color:var(--navy)}
.lead-done p{margin:0 0 6px;font-size:18px;line-height:1.6}
.lead-done .tel{color:var(--muted);font-size:17px}
.lead-done .btn{margin-top:22px}
/* מוסתר בלי הזזה הצידה: ‎left:-9999px‎ בדף מימין לשמאל יוצר גלילה אופקית של אלפי פיקסלים */
.lead-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
@media (max-width:768px){
  .lead-inner{padding:28px 18px 22px}
  .lead-dlg h2{font-size:21px}
  .lead-row{grid-template-columns:1fr}
  .lead-stars svg{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.lead-dlg[open]{animation:none}}

/* ============================================================
   אתר מרובה עמודים — תפריט, פתיחת עמוד פנימי, כרטיסי שירות,
   טופס יצירת קשר בתוך העמוד, ופוטר
   ============================================================ */

/* ---------- תפריט ---------- */
.logo-link{display:block;flex:0 0 auto;min-width:0}
.main-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:4px 26px;flex-wrap:wrap}
.main-nav a{font-size:17.5px;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 2px;
  border-bottom:2px solid transparent;transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.main-nav a:hover{color:var(--purple)}
.main-nav a[aria-current="page"]{color:var(--purple);font-weight:700;border-bottom-color:var(--purple)}
.main-nav .nav-contact{display:none}
.nav-toggle{display:none;-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:11px 9px;border-radius:10px;flex-direction:column;justify-content:space-between}
.nav-toggle i{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:transform var(--t) var(--ease),opacity var(--t-fast) ease}
.nav-toggle:hover{background:var(--lilac)}
.nav-open .nav-toggle i:nth-child(1){transform:translateY(8.75px) rotate(45deg)}
.nav-open .nav-toggle i:nth-child(2){opacity:0}
.nav-open .nav-toggle i:nth-child(3){transform:translateY(-8.75px) rotate(-45deg)}

@media (max-width:1180px){
  .nav-toggle{display:flex}
  .site-header .pill{margin-inline-start:auto}
  .main-nav{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:6px var(--gutter) 16px;box-shadow:0 16px 28px rgba(16,24,40,.12);border-top:1px solid var(--line)}
  .nav-open .main-nav{display:flex}
  .main-nav a{padding:13px 4px;font-size:18px;border-bottom:1px solid var(--line)}
  .main-nav a[aria-current="page"]{border-bottom-color:var(--line)}
}
@media (max-width:480px){
  .site-header .pill{display:none}
  .main-nav .nav-contact{display:block;color:var(--purple);font-weight:700;border-bottom:0}
  .nav-toggle{margin-inline-start:auto}
}

/* ---------- פתיחה של עמוד פנימי ---------- */
.hero.page-hero{padding:64px var(--gutter) 66px}
.page-hero h1{font-size:56px}
.page-hero .lede{margin:0 auto;max-width:720px}
@media (max-width:768px){
  .hero.page-hero{padding:44px 16px 48px}
  .page-hero h1{font-size:36px}
}

/* ---------- טקסט רציף (הסברים, פרטיות, נגישות) ---------- */
.prose{font-size:19px;line-height:1.75}
.prose h2{margin:34px 0 10px;font-size:28px;font-weight:800;color:var(--navy)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-inline-start:24px}
.prose li{margin-bottom:6px}
.prose a{color:var(--purple);font-weight:500}
.prose-date{color:var(--muted);font-size:16px}
@media (max-width:768px){
  .prose{font-size:17px}
  .prose h2{font-size:23px}
}

/* ---------- כרטיסי שירות ותרחישים ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1100px;margin:0 auto}
.svc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1300px}
.svc-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 28px;
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) ease}
a.svc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,81,126,.12);border-color:#DDCBF1}
.svc-emoji{display:block;font-size:38px;line-height:1;margin-bottom:14px}
.svc-card h3{margin:0 0 10px;font-size:25px;font-weight:800;color:var(--navy)}
.svc-card p{margin:0;font-size:18px;line-height:1.6}
.svc-card ul{margin:0;padding-inline-start:20px;font-size:17.5px;line-height:1.6}
.svc-card li{margin-bottom:8px}
.svc-more{display:inline-block;margin-top:16px;font-size:18px;font-weight:700;color:var(--purple)}
.from-price-link{font-size:20px;color:var(--navy);text-decoration:none}
/* בדף הבית (בפתיחה ומתחת לכרטיסי השירותים): הקישור למחירון כתגית לילך בולטת */
a.price-pill{display:inline-block;margin-top:10px;padding:12px 26px;border:2px solid #DCCBEE;border-radius:999px;background:var(--lilac);
  color:var(--navy);text-decoration:none;font-size:21px;font-weight:700;box-shadow:0 6px 16px rgba(140,83,198,.18);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.price-pill b{color:var(--purple);font-size:24px;font-weight:800}
a.price-pill:hover{color:var(--navy);transform:translateY(-2px);box-shadow:0 10px 22px rgba(140,83,198,.28)}
@media (max-width:768px){a.price-pill{padding:10px 18px;font-size:18px}a.price-pill b{font-size:21px}}
.scen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1300px;margin:0 auto}
.scen-card{background:#fff;border-radius:var(--radius);padding:24px 26px;border:1px solid var(--line);box-shadow:var(--shadow)}
.scen-q{margin:0 0 10px;font-size:20px;font-weight:700;color:var(--navy)}
.scen-a{margin:0;font-size:17.5px;line-height:1.6}
.scen-group+.scen-group{margin-top:44px}
.scen-group-title{max-width:1300px;margin:0 auto 16px;font-size:24px;font-weight:800;color:var(--navy)}
.about-more{margin-top:18px}
.about-more a{color:var(--purple);font-weight:700;text-decoration:none}
a.more-btn{text-decoration:none}
@media (max-width:1100px){
  .svc-grid-3,.scen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .scen-group+.scen-group{margin-top:30px}
  .scen-group-title{font-size:21px}
  .svc-grid,.svc-grid-3,.scen-grid{grid-template-columns:1fr}
  .svc-card{padding:24px 20px}
  .svc-card h3{font-size:22px}
}

/* ---------- כרטיסי השירותים בעמוד הבית: אייקונים חיים ---------- */
/* כפתור "לפרטים": כפתור סגול מלא, בתחתית הכרטיס ובאותו גובה בשלושתם (הכרטיסים נמתחים לגובה השורה) */
#services .svc-card{display:flex;flex-direction:column;align-items:flex-start}
#services .svc-card p{margin-bottom:24px}
#services .svc-more{margin-top:auto;padding:12px 28px;border-radius:999px;background:var(--purple);color:#fff;font-size:19px;font-weight:800;
  box-shadow:0 8px 20px rgba(140,83,198,.35);transition:background var(--t) ease,box-shadow var(--t) ease}
#services .svc-card:hover .svc-more{background:var(--purple-dark);box-shadow:0 12px 26px rgba(140,83,198,.45)}
.svc-anim .svc-card{position:relative;overflow:hidden}
.svc-anim .svc-card::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,rgba(140,83,198,0),rgba(140,83,198,.09),rgba(140,83,198,0));
  transform:translateX(-170%) skewX(-18deg);pointer-events:none}
.svc-anim .svc-card:hover::after{animation:shine .9s var(--ease)}
.svc-anim .svc-emoji{position:relative;display:inline-block;transform-origin:50% 50%}
.svc-anim .svc-emoji>span:first-child{display:inline-block}
.svc-anim .svc-more .arr{display:inline-block;transition:transform var(--t) var(--ease-back)}
.svc-anim .svc-card:hover .svc-more .arr{transform:translateX(-7px)}
/* שלושה גלגלי שיניים משתלבים (12, 9 ו-7 שיניים): כל גלגל מסתובב הפוך לשכן שלו, ומשך הסיבוב
   יחסי למספר השיניים כדי שיישארו משולבים. במעבר עכבר כולם מאיצים פי 4 */
.ico-gear .gears{display:block;overflow:visible}
.ico-gear .gears g[class]{transform-box:fill-box;transform-origin:50% 50%;animation:spin calc(var(--n) * 1s) linear infinite}
.ico-gear .g1{--n:12}
.ico-gear .g2{--n:9;animation-direction:reverse}
.ico-gear .g3{--n:7}
.svc-card:hover .ico-gear .gears g[class]{animation-duration:calc(var(--n) * .25s)}
/* יונת דואר שמגיעה משמאל למעלה, מפילה מכתב לתיבה וממשיכה ימינה החוצה */
.svc-anim .svc-emoji{height:60px;display:inline-flex;align-items:center}
.pigeon{position:absolute;top:14px;right:72px;width:40px;height:44px;pointer-events:none;
  opacity:0;animation:pigeonFly 6s var(--ease) .8s infinite}
.pigeon .bird{position:absolute;top:0;left:4px;font-size:30px;line-height:1;transform:scaleX(-1);
  animation:flap .35s ease-in-out infinite alternate}
.pigeon .env{position:absolute;top:24px;left:14px;font-size:15px;line-height:1;animation:letterDrop 6s ease-in .8s infinite}
.ico-mail>span{animation:mailJolt 6s ease-out .8s infinite}
@keyframes pigeonFly{
  0%{opacity:0;right:calc(100% - 30px);top:-30px}
  6%{opacity:1}
  34%,46%{opacity:1;right:72px;top:14px}
  62%{opacity:1;right:-50px;top:-50px}
  63%,100%{opacity:0;right:-50px;top:-50px}}
@keyframes flap{from{rotate:-8deg;translate:0 0}to{rotate:6deg;translate:0 -3px}}
@keyframes letterDrop{0%,36%{opacity:1;translate:0 0;scale:1}44%{opacity:1;translate:24px 18px;scale:.7}
  48%,100%{opacity:0;translate:28px 22px;scale:.5}}
@keyframes mailJolt{0%,43%{translate:0 0;rotate:0deg}47%{translate:0 3px;rotate:-6deg}54%{translate:0 -4px;rotate:4deg}
  62%,100%{translate:0 0;rotate:0deg}}
/* הלוגו של וואטס-מייל בעיגול, עם "מקליד..." */
.ico-chat img{display:block;width:60px;height:60px;border-radius:50%;box-shadow:0 4px 12px rgba(27,81,126,.22);
  animation:float 3.2s ease-in-out infinite}
.ico-chat .typing{position:absolute;top:-2px;left:-34px;display:flex;gap:3px;padding:5px 7px;
  background:var(--lilac);border-radius:10px 10px 10px 2px}
.ico-chat .typing i{width:5px;height:5px;border-radius:50%;background:var(--purple);animation:typeDot 1.2s ease-in-out infinite}
.ico-chat .typing i:nth-child(2){animation-delay:.15s}
.ico-chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes typeDot{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}

/* ---------- עמוד יצירת קשר: הטופס בתוך העמוד ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:56px;max-width:1200px;margin:0 auto;align-items:start}
.lead-dlg.lead-page{width:auto;max-height:none;margin:0;overflow:visible;overflow-x:clip;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(27,81,126,.12);scroll-margin-top:110px}
.lead-page .lead-dlg h2,.lead-page h2{margin-left:0}
.lead-done h3:focus{outline:0}
.contact-side{padding:24px 0 0}
.contact-side .contact-row{flex-direction:column;align-items:center;gap:22px}
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:20px}
}

/* ---------- פוטר ---------- */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px var(--gutter) 26px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;font-size:16.5px;font-weight:500}
.footer-nav a{text-decoration:none;color:var(--ink)}
.footer-nav a[aria-current="page"]{color:var(--purple);font-weight:700}
.site-footer .footer-row{justify-content:center}
.footer-legal{margin:0;display:flex;gap:12px;font-size:14.5px;color:var(--muted)}
.footer-legal a{text-decoration:none;color:inherit}
.footer-credit{margin:0;font-size:14px;color:var(--muted)}
.price-note{max-width:1100px;margin:0 auto;padding:18px var(--gutter);font-size:13.5px;line-height:1.6;color:var(--muted);text-align:center}
.about-text p+p{margin-top:14px}
#fields{text-align:center}

/* ---------- עמוד וואטס-מייל ---------- */
.wm-cover{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 18px 44px rgba(27,81,126,.22)}
.wm-list{list-style:none;padding:0!important}
.wm-list li{position:relative;padding-inline-start:30px}
.wm-list li::before{position:absolute;inset-inline-start:0;top:0;font-weight:800}
.wm-yes li::before{content:"✓";color:var(--purple)}
.wm-no li::before{content:"✕";color:#C8364A}
/* "למה לבחור": כשהכרטיס נחשף (lines-in, ב-site.js) השורות נכנסות אחת אחרי השנייה מימין והסימן שלהן קופץ,
   וכשגוללים חזרה למעלה הן יוצאות באותה דרך.
   הרשימה השנייה מתחילה אחרי שהראשונה כמעט נגמרת */
html.js #wm-what .wm-list li{opacity:0;translate:28px 0;transition:opacity .5s var(--ease),translate .6s var(--ease-back);
  transition-delay:calc(var(--li) * 220ms + var(--li0,250ms))}
html.js #wm-what .wm-list li::before{scale:0;transition:scale .45s var(--ease-back);transition-delay:calc(var(--li) * 220ms + var(--li0,250ms) + 150ms)}
html.js #wm-what .lines-in .wm-list li{opacity:1;translate:0 0}
html.js #wm-what .lines-in .wm-list li::before{scale:1}
#wm-what .svc-card + .svc-card{--li0:1300ms}
#wm-what .wm-list li:nth-child(1){--li:0}
#wm-what .wm-list li:nth-child(2){--li:1}
#wm-what .wm-list li:nth-child(3){--li:2}
#wm-what .wm-list li:nth-child(4){--li:3}
#wm-what .wm-list li:nth-child(5){--li:4}
#wm-what .wm-list li:nth-child(n+6){--li:5}
@media (prefers-reduced-motion:reduce){html.js #wm-what .wm-list li{opacity:1;translate:none}html.js #wm-what .wm-list li::before{scale:1}}
.tst-grid[hidden],.more-btn[hidden]{display:none}
/* רכבת ההמלצות (וואטס-מייל): שתי שורות שנעות בכיוונים הפוכים ונעצרות במעבר עכבר; הכרטיס גדל ומקבל הברקה */
.train{display:grid;gap:18px;margin-inline:calc(50% - 50vw);padding-block:12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.train-row{display:flex;width:max-content;gap:18px;animation:trainMove var(--dur,60s) linear infinite}
.train-row.rev{animation-direction:reverse}
.train-row:hover{animation-play-state:paused}
@keyframes trainMove{from{translate:0 0}to{translate:50% 0}}
.tcard{position:relative;overflow:hidden;width:300px;flex:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px 12px;
  box-shadow:0 6px 18px rgba(27,81,126,.08);display:flex;flex-direction:column;gap:6px;text-align:right;
  transition:scale .35s var(--ease-back),box-shadow .35s}
.tcard:hover{scale:1.07;z-index:2;box-shadow:0 18px 40px rgba(140,83,198,.25)}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  translate:-120% 0;pointer-events:none}
.tcard:hover::after{transition:translate .8s ease;translate:120% 0}
.tcard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard:hover p{-webkit-line-clamp:12}
.tcard .nm{margin-top:auto;font-weight:700;color:var(--purple);font-size:14.5px}
.tcard .stars{color:#F5B301;letter-spacing:2px;font-size:13px;line-height:1}
@media (max-width:600px){.tcard{width:250px}}
@media (prefers-reduced-motion:reduce){.train-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.train{margin-inline:0;-webkit-mask-image:none;mask-image:none}}
.wm-shot{margin:0 auto;max-width:1000px;text-align:center}
.wm-shot img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 18px 44px rgba(27,81,126,.12)}
.wm-shot figcaption{margin-top:14px;font-size:18px;font-weight:700;color:var(--navy)}
.wm-price{max-width:520px;margin:0 auto;text-align:center;background:var(--lilac);border-radius:var(--radius);padding:30px 30px 32px}
.wm-price-now{margin:0 0 14px;font-size:22px;font-weight:700;color:var(--navy)}
.wm-price-now strong{font-size:56px;font-weight:800;line-height:1;color:var(--purple);font-variant-numeric:tabular-nums}
.wm-price ul{list-style:none;margin:0 0 24px;padding:0;font-size:18px;line-height:1.6}
.wm-price li::before{content:"✓ ";color:var(--purple);font-weight:800}
@media (max-width:768px){
  .wm-price{padding:22px 18px 24px}
  .wm-price-now strong{font-size:46px}
  .wm-price ul{font-size:16.5px}
  .wm-price .btn{width:100%}
}

/* ---------- עמוד המחירים: וואטס-מייל לצד תיבת המחיר ---------- */
.price-wm{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;max-width:1100px;margin:0 auto}
.price-wm .wm-price{margin:0;max-width:none}
@media (max-width:768px){
  .price-wm{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---------- פתיחה אחידה בכל העמודים (2026-10-18): טקסט מימין, תמונה או תרשים משמאל ---------- */
.hero-logo{display:block;width:100%;max-width:210px;height:auto;margin:0 auto;border-radius:28px;
  box-shadow:0 18px 44px rgba(27,81,126,.16)}
.pay-art{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}
/* דף הבית: מחשב שהמערכות קופצות ממנו. כל מערכת יוצאת ממסך המחשב, נוחתת במקומה במעגל ומתחברת בקו מקווקו.
   אחרי כמה שניות כולן נבלעות חזרה והסבב מתחיל מחדש (12 שניות). תיבת המייל המונפשת שהייתה מועמדת לכאן שמורה ב-ideas/inbox-animation.html */
.cmp{--T:12s;--ox:50;--oy:46;position:relative;width:min(440px,100%);aspect-ratio:1;margin:0 auto;container-type:inline-size;direction:ltr}
.cmp-laptop{position:absolute;left:29%;top:33%;width:42%;height:auto;z-index:1;filter:drop-shadow(0 14px 26px rgba(27,81,126,.2))}
.cmp-gear g g{transform-box:fill-box;transform-origin:50% 50%;animation:cmpSpin 4s linear infinite}
@keyframes cmpSpin{to{rotate:360deg}}
.cmp-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.cmp-lines line{stroke:#C9A9E8;stroke-width:.5;stroke-dasharray:1.4 1.4;stroke-linecap:round;opacity:0;
  animation:cmpLine var(--T) linear infinite,cmpFlow 1s linear infinite;animation-delay:calc(var(--i) * .25s),0s}
@keyframes cmpLine{0%,10%{opacity:0}16%,78%{opacity:1}84%,100%{opacity:0}}
@keyframes cmpFlow{to{stroke-dashoffset:-2.8}}
.cmp-item{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;z-index:2;
  opacity:0;animation:cmpPop var(--T) infinite;animation-delay:calc(var(--i) * .25s)}
/* יוצא ממרכז המסך אל המקום שלו, עם קפיצה קטנה בנחיתה, ובסוף הסבב חוזר פנימה */
@keyframes cmpPop{
  0%{opacity:0;translate:calc((var(--ox) - var(--x)) * 1cqw) calc((var(--oy) - var(--y)) * 1cqw);scale:.15;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  3%{opacity:1}
  10%{opacity:1;translate:0 0;scale:1}
  80%{opacity:1;translate:0 0;scale:1;animation-timing-function:cubic-bezier(.55,0,.8,.3)}
  88%,100%{opacity:0;translate:calc((var(--ox) - var(--x)) * 1cqw) calc((var(--oy) - var(--y)) * 1cqw);scale:.15}}
.cmp-bub{width:100%;height:100%;border-radius:50%;background:#fff;border:1px solid #ECE6F4;box-shadow:0 6px 16px rgba(27,81,126,.14);
  display:grid;place-items:center;overflow:hidden;animation:cmpBob 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.cmp-bub svg{width:56%;height:auto;display:block}
.cmp-bub img{width:62%;height:auto;display:block;border-radius:8px}
@keyframes cmpBob{50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.cmp-item,.cmp-lines line{animation:none;opacity:1}.cmp-bub,.cmp-gear g g{animation:none}}
/* עמוד אוטומציה עסקית: תיבת מייל שמתמלאת בבלגן, אוטומציה ממיינת לתיקיות, ונשארת תיבה נקייה. מחזור של 11 שניות */
.ibx{position:relative;width:min(380px,100%);aspect-ratio:19/15;margin:0 auto;direction:ltr}
.ibx-win{position:absolute;inset:8% 6% 0 6%;background:#fff;border-radius:18px;
  box-shadow:0 18px 40px rgba(27,81,126,.16),0 2px 6px rgba(27,81,126,.06);overflow:visible}
.ibx-bar{height:14%;display:flex;align-items:center;gap:6px;padding:0 6%;border-bottom:1px solid #EEE8F5}
.ibx-bar i{width:9px;height:9px;border-radius:50%;background:#E2D9EE}
.ibx-bar i:first-child{background:#F3A0A0}
.ibx-tray{position:absolute;top:2%;right:4%;width:20%;aspect-ratio:1;z-index:3}
.ibx-tray svg{width:100%;height:100%;display:block}
.ibx-badge{position:absolute;top:-10%;right:-14%;min-width:30px;height:24px;padding:0 6px;border-radius:12px;
  background:#E5484D;color:#fff;font:800 13px/24px 'Heebo',system-ui,sans-serif;text-align:center;
  box-shadow:0 3px 8px rgba(229,72,77,.4);font-variant-numeric:tabular-nums;transition:background .3s,transform .3s}
.ibx.calm .ibx-badge{background:#2BA36F;box-shadow:0 3px 8px rgba(43,163,111,.35)}
.ibx.shake .ibx-win{animation:ibxShake .32s linear infinite}
@keyframes ibxShake{25%{translate:-2px 1px;rotate:-.6deg}75%{translate:2px -1px;rotate:.6deg}}
.ibx-env{position:absolute;left:0;top:0;width:15%;aspect-ratio:34/24;z-index:2;opacity:0;will-change:transform,opacity}
.ibx-env svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 5px rgba(27,81,126,.18))}
.ibx-folders{position:absolute;left:6%;right:6%;bottom:9%;display:flex;justify-content:space-around;z-index:1}
.ibx-folder{position:relative;width:22%;aspect-ratio:5/4;opacity:0;translate:0 10px;transition:opacity .4s,translate .4s var(--ease-back,ease)}
.ibx-folder svg{width:100%;height:100%;display:block}
.ibx-folder b{position:absolute;right:-8%;top:-12%;width:42%;aspect-ratio:1;border-radius:50%;background:#2BA36F;
  display:grid;place-items:center;scale:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1)}
.ibx-folder b svg{width:62%;height:62%}
.ibx.sort .ibx-folder,.ibx.calm .ibx-folder{opacity:1;translate:0 0}
.ibx.calm .ibx-folder b{scale:1}
.ibx.calm .ibx-folder:nth-child(2) b{transition-delay:.12s}
.ibx.calm .ibx-folder:nth-child(3) b{transition-delay:.24s}
.ibx-gear{position:absolute;left:50%;top:44%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;z-index:4;opacity:0;scale:.4;
  transition:opacity .35s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.ibx-gear svg{width:100%;height:100%;display:block;animation:spin 1.2s linear infinite}
.ibx.sort .ibx-gear{opacity:1;scale:1}
.ibx-calm{position:absolute;left:50%;top:40%;width:20%;aspect-ratio:1;margin:-10% 0 0 -10%;border-radius:50%;
  background:#EAF7F0;display:grid;place-items:center;opacity:0;scale:.6;transition:opacity .4s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.ibx-calm svg{width:50%;height:50%}
.ibx.calm .ibx-calm{opacity:1;scale:1;transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.ibx-env{display:none}.ibx .ibx-folder{opacity:1;translate:0 0}.ibx .ibx-folder b,.ibx .ibx-calm{scale:1;opacity:1}}
/* לקוחות: לוגואים קטנים שרוקדים במעגל. הטבעת מסתובבת, וכל לוגו מסתובב הפוך כדי להישאר ישר */
.logo-orbit{--r:150px;--s:92px;position:relative;width:400px;max-width:100%;aspect-ratio:1;margin:0 auto}
.logo-orbit::before{content:"";position:absolute;inset:calc(50% - var(--r));border:2px dashed #DDCBF1;border-radius:50%}
.orbit-center{position:absolute;inset:34%;border-radius:50%;background:var(--lilac);display:grid;place-items:center;text-align:center;
  font-size:17px;font-weight:800;line-height:1.35;color:var(--purple);box-shadow:0 10px 28px rgba(140,83,198,.18)}
.orbit-ring{position:absolute;inset:0;animation:orbitSpin 36s linear infinite;animation-delay:var(--spin0,0s)}
.orbit-item{position:absolute;top:50%;left:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.orbit-logo{position:absolute;width:var(--s);height:var(--s);left:calc(var(--s) / -2);top:calc(var(--s) / -2);
  border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(27,81,126,.14);
  display:grid;place-items:center;overflow:hidden;
  transform:rotate(calc(var(--a) * -1));animation:orbitSpin 36s linear infinite reverse;animation-delay:var(--spin0,0s)}
/* הלוגו ממלא את כל העיגול (נחתך לעיגול), ומוגדל מעט כדי שהריקוד לא יחשוף פינה לבנה */
.orbit-logo img{width:100%;height:100%;object-fit:cover;scale:1.12;animation:orbitDance 1.8s ease-in-out infinite;animation-delay:var(--d)}
/* בלוגואים הרחבים נשאר בעיגול הצד הימני, שבו מתחיל הכיתוב העברי */
.orbit-logo img[src*="client-ligdol"],.orbit-logo img[src*="client-eliach"],.orbit-logo img[src*="client-lishkat"]{object-position:right center}
@keyframes orbitSpin{to{rotate:360deg}}
@keyframes orbitDance{0%,50%,100%{translate:0 0;rotate:0deg}25%{translate:0 -5px;rotate:-9deg}75%{translate:0 -5px;rotate:9deg}}
/* עמוד הבית: כותרת וכפתור ההמלצות מימין, מעגל הלוגואים משמאל */
.tst-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:1000px;margin:0 auto}
.tst-teaser h2.section-title,.tst-teaser .center-cta{text-align:right;margin-bottom:0}
.tst-teaser .center-cta{margin-top:28px}
@media (max-width:768px){
  .tst-teaser{grid-template-columns:minmax(0,1fr);gap:24px}
  .tst-teaser h2.section-title,.tst-teaser .center-cta{text-align:center}
  .hero-logo{max-width:140px}
  .logo-orbit{--r:112px;--s:72px;width:300px}
  .orbit-center{font-size:14px}
}

/* ---------- התפריט תמיד גלוי (2026-10-18): במסך צר — שורה נגללת לרוחב מתחת ללוגו, בלי כפתור המבורגר ---------- */
@media (max-width:1180px){
  .site-header{flex-wrap:wrap;row-gap:4px}
  .nav-toggle{display:none}
  .main-nav,.nav-open .main-nav{display:flex;position:static;order:3;flex:1 1 100%;flex-direction:row;flex-wrap:nowrap;
    justify-content:flex-start;gap:0 18px;overflow-x:auto;scrollbar-width:none;
    background:none;box-shadow:none;border-top:1px solid var(--line);padding:4px 0 0}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{flex:none;padding:6px 2px;font-size:16px;white-space:nowrap;border-bottom:2px solid transparent}
  .main-nav a:first-child{margin-inline-start:auto}
  .main-nav a:last-child{margin-inline-end:auto}
  .main-nav a[aria-current="page"]{border-bottom-color:var(--purple)}
}
/* בטלפון כל הקישורים גלויים, בשתי שורות, בלי גלילה לרוחב */
@media (max-width:600px){
  .main-nav,.nav-open .main-nav{flex-wrap:wrap;justify-content:center;gap:0 14px;overflow:visible}
  .main-nav a{padding:4px 1px;font-size:15px}
  .main-nav a:first-child,.main-nav a:last-child{margin-inline:0}
}

/* צרו קשר: טופס בחלון אחד (2026-10-18). שורת הפתיחה נעלמת אחרי השליחה */
.lead-dlg[data-step="done"] .lead-inner > .lead-intro{display:none}

/* קישור לחבילות (מרשימת תפוצה): שהכותרת לא תוסתר מתחת להדר הדביק */
#packs,#prices,#wm{scroll-margin-top:140px}

/* הלוגו בהדר — גדול יותר (2026-10-18, לבקשת המשתמשת) */
.site-header .logo{height:84px}
.site-header.scrolled .logo{height:66px}
@media (max-width:768px){
  .site-header .logo{height:58px}
  .site-header.scrolled .logo{height:50px}
}
#lead{scroll-margin-top:140px}

/* וואטס-מייל: בפתיחה רק המרכז של התמונה (המחשב והכיתוב), בלי שולי הרקע הכחול, ובגודל ‎×1.2 */
.hero .wm-cover{display:block;width:100%;max-width:335px;aspect-ratio:740/772;object-fit:cover;object-position:50% 50%;margin:0 auto}
/* וואטס-מייל: הילה צבעונית שמסתובבת לאט מאחורי התמונות, ובתמונת הפתיחה גם הגדלה והקטנה עדינה */
@property --wm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.wm-glow{position:relative;isolation:isolate}
.wm-glow::before{content:"";position:absolute;inset:-12px;z-index:-1;border-radius:calc(var(--radius) + 12px);
  background:conic-gradient(from var(--wm-a),#8C53C6,#1B517E,#25D366,#C9A9E8,#8C53C6);
  filter:blur(20px);opacity:.6;animation:wmGlow 7s linear infinite,wmGlowPulse 3.5s ease-in-out infinite}
.wm-glow img{position:relative}
.hero .wm-glow{max-width:335px;margin:0 auto}
.wm-breathe{animation:wmBreathe 6s ease-in-out infinite}
@keyframes wmGlow{to{--wm-a:360deg}}
@keyframes wmGlowPulse{50%{opacity:.85}}
@keyframes wmBreathe{50%{scale:1.04}}
@media (prefers-reduced-motion:reduce){.wm-glow::before,.wm-breathe{animation:none}}

/* מחירים: אוטומציות לעסקים — אין מחירון, מזמינים לשיחה */
.talk-big{margin:0 0 8px;font-size:30px;font-weight:800;color:var(--purple)}
.talk-sub{margin:0 0 22px;font-size:19px;line-height:1.6;color:var(--ink)}
@media (max-width:768px){
  .talk-big{font-size:25px}
  .talk-sub{font-size:17px}
}

/* מילים שאסור לשבור ביניהן שורה (למשל לב בסוף משפט) */
.nowrap{white-space:nowrap}
/* "בליעה"ר" קטן אחרי שנות הניסיון (דף הבית ואודות) */
.bli{font-size:.72em;color:var(--muted);font-weight:500;white-space:nowrap}
/* "מחכה לעזור גם לעסק שלך...": בטלפון בשורה אחת, וכשבכל זאת נשבר — שתי שורות מאוזנות */
.contact-note{text-wrap:balance}
@media (max-width:768px){.contact-note{font-size:clamp(14px,3.9vw,17px)}}

/* הלוגו הרחב (המונפש) בתחתית העמוד — עבר מההדר, שבו יש עכשיו לוגו ריבועי (2026-10-20) */
.footer-logo{display:block;line-height:0}
.footer-logo img{height:110px;width:auto;max-width:100%}
@media (max-width:768px){.footer-logo img{height:72px}}

/* וואטס-מייל בתפריט העליון: תווית ירקרקה עם הסמל העגול ותגית "מוצר הדגל!" — כדי שייראה כמוצר בפני עצמו (2026-10-20) */
.main-nav a.nav-wm{position:relative;display:inline-flex;align-items:center;gap:7px;background:#EAF8EF;border-radius:999px;
  padding:4px 12px 4px 6px;border-bottom-color:transparent;transition:background .2s}
.main-nav a.nav-wm:hover{background:#DDF3E5}
.main-nav a.nav-wm[aria-current="page"]{border-bottom-color:transparent;box-shadow:inset 0 0 0 1.5px var(--purple)}
.nav-wm img{width:22px;height:22px;border-radius:50%;flex:none}
.nav-wm-tag{position:absolute;top:-11px;inset-inline-end:-10px;background:var(--purple);color:#fff;font-size:11px;font-weight:700;
  line-height:1;padding:3px 6px;border-radius:999px;transform:rotate(6deg);white-space:nowrap;pointer-events:none}
@media (max-width:1180px){
  .main-nav,.nav-open .main-nav{padding-top:14px}
  .main-nav a.nav-wm{padding:3px 10px 3px 5px}
}
@media (max-width:600px){
  .main-nav,.nav-open .main-nav{row-gap:12px}
  .main-nav a.nav-wm{padding:2px 9px 2px 4px}
  .nav-wm img{width:20px;height:20px}
}

/* רשימת תפוצה: כותרת פתיחה שהיא שאלה ארוכה, והמלצות קצרות עם שורה מודגשת */
.hero h1.h1-q{font-size:46px;line-height:1.2;letter-spacing:0}
.tst .body b{color:var(--purple);font-weight:700}
@media (min-width:769px){
  .tst-grid.tst-3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .hero h1.h1-q{font-size:30px}
}

/* ---------- רשימת תפוצה: ראש עמוס — בועות כאב קטנות מתנגשות, ואז מתנפצות אחת-אחת ---------- */
.b2-wrap{max-width:520px;width:100%;margin:0 auto}
.b2{position:relative;height:380px;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(140,83,198,.13),rgba(27,81,126,.07) 55%,rgba(255,255,255,0) 76%)}
.b2-b{position:absolute;left:0;top:0;z-index:2;will-change:transform}
/* בועת קצף: לבנבנה ושקופה, מרכז כמעט ריק, שוליים לבנים עם ברק בצבעי קשת */
.b2-in{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;padding:10px;text-align:center;
  font-size:15px;line-height:1.2;font-weight:800;color:var(--navy);text-shadow:0 1px 2px rgba(255,255,255,.9);
  border:1.5px solid rgba(255,255,255,.95);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.42) 0,rgba(255,255,255,.5) 58%,rgba(255,255,255,.78) 80%,rgba(255,255,255,.95) 100%);
  box-shadow:inset -6px -9px 18px rgba(183,148,224,.22),inset 7px 7px 16px rgba(150,205,235,.2),0 8px 22px rgba(27,81,126,.1);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:b2In .5s var(--ease-back) backwards}
.b2-in::before{content:"";position:absolute;top:12%;left:19%;width:20%;height:11%;border-radius:50%;background:rgba(255,255,255,.98);rotate:-32deg;
  box-shadow:0 0 6px rgba(255,255,255,.9)}
.b2-in::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:.75;
  background:conic-gradient(from 210deg,rgba(255,170,220,.55),rgba(160,215,255,.55),rgba(190,250,215,.5),rgba(255,235,170,.5),rgba(255,170,220,.55));
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 74%,#000 100%);mask:radial-gradient(circle,transparent 64%,#000 74%,#000 100%)}
@keyframes b2In{from{scale:0;opacity:0}}
/* ההתנפצות: "טיפות שעפות" */
.b2-b.pop .b2-in{animation:b2Burst .2s ease-out forwards;animation-delay:0s!important} /* בלי ההשהיה של הכניסה */
@keyframes b2Burst{0%{scale:1}50%{scale:1.12;opacity:1}100%{scale:1.18;opacity:0;filter:blur(2px)}}
.b2-fx{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3}
.b2-fx i{position:absolute;left:0;top:0;display:block}
.b2-fx .dr{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 22%,rgba(183,148,224,.9) 58%,rgba(110,160,215,.95));
  box-shadow:0 0 0 1px rgba(255,255,255,.85),0 2px 5px rgba(27,81,126,.2)}
.b2-fx .sp{height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(140,83,198,0),rgba(140,83,198,.8));transform-origin:0 50%}
.b2-fx .fl{border-radius:50%;border:3px solid rgba(255,255,255,.98);box-shadow:0 0 18px rgba(150,205,240,.85),inset 0 0 14px rgba(183,148,224,.55)}
/* הווי שנשאר במקום הבועה */
/* ".b2 .b2-ok" ולא ".b2-ok" — שלא יתנגש עם מחלקה באותו שם באיורים אחרים */
.b2 .b2-ok{opacity:1;position:absolute;width:34px;height:34px;margin:-17px;border-radius:50%;display:grid;place-items:center;
  background:#E3F4EA;color:#1E7A46;font-size:17px;font-weight:800;font-style:normal;box-shadow:0 4px 12px rgba(30,122,70,.18);
  z-index:1;animation:b2Ok .45s var(--ease-back) .12s backwards,b2OkOut .7s ease 2.2s forwards;transition:opacity .5s ease}
@keyframes b2Ok{from{scale:0}}
/* כל וי דועך לבד אחרי כשתי שניות, כדי שלא ייערמו בזמן שבועות חדשות נכנסות */
@keyframes b2OkOut{to{opacity:0;scale:.6}}
.ml-flow{max-width:520px;margin-top:34px}
#pain .callout{margin-top:28px}
/* כשמגיע ה"שקט" גם הווים נעלמים, והמסך נשאר נקי */
.b2.calm .b2-ok,.b2.reset .b2-ok{opacity:0}
.b2-calm{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;width:max-content;max-width:90%;text-align:center;
  font-size:24px;font-weight:800;color:var(--navy);opacity:0;scale:.9;transition:opacity .6s ease,scale .6s var(--ease)}
.b2-calm small{display:block;margin-top:4px;font-size:16px;font-weight:500;color:var(--muted)}
.b2.calm .b2-calm{opacity:1;scale:1}
@media (max-width:768px){
  .b2{height:330px}
  .b2-in{font-size:13px;padding:8px}
  .b2-calm{font-size:20px}
}

/* ---------- כפתור "עצירת תנועה" (נגישות: עצירה של כל מה שזז לבד, לפי התקן) ---------- */
.motion-btn{position:fixed;left:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  font:inherit;font-size:14.5px;font-weight:700;color:var(--navy);background:#fff;border:1px solid #DCCBEE;border-radius:999px;
  box-shadow:0 6px 16px rgba(16,24,40,.12);cursor:pointer}
.motion-btn:hover{border-color:var(--purple);color:var(--purple-dark)}
/* מבטלים (ולא מקפיאים) — הקפאה הייתה עוצרת אנימציות כניסה בנקודת ההתחלה, כשהטקסט עוד שקוף */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation:none!important}
html.no-motion .fconn .dot{display:none}
html.no-motion .fcard{--on:1}
/* כמו בבלוקים של prefers-reduced-motion: מה שמופיע רק דרך אנימציה — מוצג במצבו הסופי */
html.no-motion .reveal{opacity:1!important;translate:none!important}
html.no-motion .btn::after,html.no-motion .price-box::after,html.no-motion .svc-anim .svc-card::after,html.no-motion .pigeon{display:none}
html.no-motion .cmp-item,html.no-motion .cmp-lines line{opacity:1}
html.no-motion #wm-what .wm-list li{opacity:1;translate:none}html.no-motion #wm-what .wm-list li::before{scale:1}
html.no-motion .train-row{flex-wrap:wrap;width:auto;justify-content:center}html.no-motion .train{margin-inline:0;-webkit-mask-image:none;mask-image:none}
html.no-motion .ibx-env{display:none}html.no-motion .ibx .ibx-folder{opacity:1;translate:0 0}html.no-motion .ibx .ibx-folder b,html.no-motion .ibx .ibx-calm{scale:1;opacity:1}
@media (prefers-reduced-motion:reduce){.motion-btn{display:none}}
@media print{.motion-btn{display:none}}