/* ===================================================================== Supply Verify AI — מערכת עיצוב האתר (עיצוב 3.0 · 02.08.2026) --------------------------------------------------------------------- קובץ אחד לכל העמודים. הפרדת המוצרים חיה ב*תוכן ובניווט*; האחדות חיה כאן — אותם רכיבים בדיוק, ורק צבע ההדגשה מתחלף לפי data-product על תגית : data-product="delivery" → טורקיז־מנטה (אימות אספקה) data-product="invoices" → הירוק של הלוגו (איסוף חשבוניות) ===================================================================== */ /* ---------- 1. אסימוני עיצוב ---------- */ :root{ /* בסיס כהה — משותף לכל העמודים */ --bg:#061518; --bg-alt:#081e23; --surface:#0b242b; --surface-2:#0e2d35; --ink:#e9f5f2; --muted:#9ab6b0; --muted-2:#7fa19b; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14); /* צבעי מותג קבועים */ --brand-teal:#007384; --brand-green:#7BCA39; --brand-cyan:#00C2CB; --ink-deep:#12333f; /* ניטרליים לאזהרה/שגיאה — זהים בשני המוצרים */ --amber:#f5b942; --red:#ff8189; --red-soft:rgba(255,129,137,.14); /* מידות */ --r:22px; --r-sm:16px; --r-xs:12px; --sh-1:0 1px 2px rgba(0,0,0,.24),0 12px 32px rgba(0,0,0,.26); --sh-2:0 2px 8px rgba(0,0,0,.3),0 28px 66px rgba(0,0,0,.44); --ease:cubic-bezier(.22,.8,.3,1); --nav-h:92px; } /* צבע ההדגשה — המקום היחיד שבו שני המוצרים נבדלים */ html[data-product="delivery"]{ --acc:#2ee8c0; --acc-2:#43d6f0; --acc-deep:#0fbf9a; --acc-ink:#04302a; --grad:linear-gradient(120deg,#39f0c8,#3ecfe8); --grad-deep:linear-gradient(135deg,#0fbf9a,#0d6b75); --acc-a08:rgba(46,232,192,.08); --acc-a12:rgba(46,232,192,.12); --acc-a18:rgba(46,232,192,.18); --acc-a35:rgba(46,232,192,.35); --acc-glow:rgba(46,232,192,.34); --hero-bg:radial-gradient(1200px 700px at 78% -14%,#0c4a55 0%,#052e34 46%,#03161a 100%); } html[data-product="invoices"]{ --acc:#5ae28c; --acc-2:#98e1b3; --acc-deep:#178640; --acc-ink:#0a1f12; --grad:linear-gradient(120deg,#98e1b3,#5ae28c); --grad-deep:linear-gradient(135deg,#178640,#126832); --acc-a08:rgba(158,224,85,.08); --acc-a12:rgba(158,224,85,.12); --acc-a18:rgba(158,224,85,.18); --acc-a35:rgba(158,224,85,.35); --acc-glow:rgba(90,226,140,.32); --hero-bg:radial-gradient(1200px 700px at 78% -14%,#24422f 0%,#15261b 46%,#070f0a 100%); --bg:#070f0a; --bg-alt:#0c1810; --surface:#122118; --surface-2:#192a1f; --muted:#9cb4a5; } /* ---------- 2. בסיס ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink); background:var(--bg);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img,svg{max-width:100%} button,input,select,textarea{font-family:inherit} ::selection{background:var(--acc-a35)} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} section{padding:56px 0;scroll-margin-top:var(--nav-h);position:relative} h1,h2,h3,h4{text-wrap:balance} .nowrap{white-space:nowrap} .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* דילוג לתוכן — הפריט הראשון בסדר המקלדת */ .skip{position:absolute;top:-100px;inset-inline-start:16px;z-index:200;background:var(--acc); color:var(--acc-ink);font-weight:800;padding:12px 22px;border-radius:0 0 14px 14px;transition:top .2s} .skip:focus{top:0} /* מיקוד גלוי — לכל דבר לחיץ, בלי יוצא מן הכלל */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--acc);outline-offset:3px;border-radius:6px} /* ---------- 3. כפתורים ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:800;border-radius:999px;padding:15px 30px;font-size:16px;cursor:pointer;border:none; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; overflow:hidden;white-space:nowrap;text-align:center} .btn-p{background:var(--grad);color:var(--acc-ink); box-shadow:0 12px 30px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.5)} .btn-p::before{content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); transform:translateX(160%);transition:transform .7s var(--ease)} .btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 42px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.5)} .btn-p:hover::before{transform:translateX(-160%)} .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .btn-ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)} .btn-wa{background:linear-gradient(120deg,#2fce8e,#25D366);color:#053f30; box-shadow:0 12px 30px rgba(37,211,102,.32),inset 0 1px 0 rgba(255,255,255,.5)} .btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,211,102,.44)} .btn-nav{padding:10px 22px;font-size:14.5px} .btn-sm{padding:11px 20px;font-size:14.5px} /* ---------- 4. ניווט + מתג המוצר ---------- */ .progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:80;pointer-events:none} .progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0); transform-origin:right;transition:transform .1s linear} nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:14px 0;transition:padding .3s var(--ease)} .navshell{display:flex;align-items:center;gap:14px;border-radius:999px;padding:9px 10px; padding-inline-start:18px;border:1px solid rgba(255,255,255,.11); background:rgba(5,30,36,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:.35s var(--ease)} nav.scrolled{padding:8px 0} nav.scrolled .navshell{background:rgba(6,25,30,.88);box-shadow:0 8px 30px rgba(0,0,0,.42)} .logo{display:flex;align-items:center;flex:0 0 auto} .logo img{display:block;height:32px;width:auto} @media(max-width:520px){.logo img{height:25px}} /* מתג המוצר — שני השירותים תמיד גלויים, הנוכחי מודגש */ .pswitch{display:flex;gap:3px;background:rgba(255,255,255,.06);border:1px solid var(--line); border-radius:999px;padding:3px;flex:0 0 auto} .pswitch a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px; font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;transition:.22s var(--ease)} .pswitch a:hover{color:var(--ink);background:rgba(255,255,255,.06)} .pswitch a[aria-current="page"]{background:var(--acc-a18);color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc-a35)} .pswitch .pemoji{font-size:14px;line-height:1} .navlinks{display:flex;gap:2px;font-weight:600;font-size:14px;margin-inline-start:auto} .navlinks a{padding:8px 12px;border-radius:999px;color:#dcefeb;opacity:.82;transition:.2s} .navlinks a:hover{opacity:1;background:var(--acc-a12)} .navlinks a.cur{opacity:1;background:var(--acc-a18);color:var(--acc)} .navend{display:flex;align-items:center;gap:9px;flex:0 0 auto} .burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);cursor:pointer;flex-direction:column;align-items:center; justify-content:center;gap:5px;padding:0} .burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:.3s var(--ease)} nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} nav.menu-open .burger span:nth-child(2){opacity:0} nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobilemenu{display:none;position:fixed;top:74px;right:16px;left:16px;z-index:59; background:rgba(8,26,31,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--sh-2);padding:12px; flex-direction:column;gap:2px;transform:translateY(-12px);opacity:0;pointer-events:none; transition:.3s var(--ease);max-height:calc(100vh - 96px);overflow-y:auto;visibility:hidden} .mobilemenu a{padding:12px 14px;border-radius:14px;font-weight:700;font-size:15.5px;line-height:1.45} .mobilemenu a:hover{background:var(--acc-a12)} .mobilemenu .mm-sep{height:1px;background:var(--line);margin:8px 4px} .mobilemenu .mm-lbl{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--muted-2); text-transform:uppercase;padding:4px 14px} .mobilemenu a[aria-current="page"]{background:var(--acc-a18);color:var(--acc)} .mobilemenu .btn{margin-top:10px} .mobilemenu.open{transform:none;opacity:1;pointer-events:auto;visibility:visible} @media(max-width:1080px){.navlinks{display:none}} @media(max-width:1080px){.pswitch{margin-inline-start:auto}} /* הבורגר והתפריט עוברים באותה נקודה שבה navlinks נעלם (1080), אחרת נוצר טווח 761-1080 בלי ניווט כלל: iPad לאורך וכל חלון שהוצר. */ @media(max-width:1080px){ .burger{display:flex} .mobilemenu{display:flex} .navend{margin-inline-start:auto} } @media(max-width:760px){ .pswitch,.nav-cta{display:none} } /* ---------- 5. כותרות סקציה ---------- */ .shead{text-align:center;max-width:730px;margin:0 auto 32px} .kick{display:inline-flex;align-items:center;gap:10px;color:var(--acc);font-weight:800; font-size:12.5px;letter-spacing:.14em;margin-bottom:12px;text-transform:uppercase} .kick::before,.kick::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-deep)} h2.sec{font-size:clamp(29px,4vw,45px);font-weight:900;line-height:1.18;letter-spacing:-.4px;margin-bottom:12px} p.sub{color:var(--muted);font-size:17px;text-wrap:pretty} .shead-side{text-align:right;max-width:none;margin:0 0 8px} .shead-side .kick::after{display:none} /* ---------- 6. אזור פתיחה ---------- */ .hero{position:relative;background:var(--hero-bg);color:#fff;padding:132px 0 14px; overflow:hidden;isolation:isolate} .gridtex{position:absolute;inset:0;z-index:-2; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(1000px 640px at 65% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(1000px 640px at 65% 0%,#000 30%,transparent 75%)} .aur{position:absolute;border-radius:50%;filter:blur(85px);pointer-events:none;z-index:-1} .a1{width:470px;height:470px;background:var(--acc-a18);top:-150px;inset-inline-start:-130px; animation:drift 11s ease-in-out infinite} .a2{width:420px;height:420px;background:rgba(67,214,240,.12);bottom:-70px;inset-inline-end:2%; animation:drift 13s ease-in-out infinite reverse} @keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,26px)}} .herogrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative} .hero .kicker{display:inline-flex;gap:9px;align-items:center;background:var(--acc-a12); border:1px solid var(--acc-a35);color:var(--acc);font-size:13px;font-weight:700; border-radius:999px;padding:7px 16px;margin-bottom:22px} .hero .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--acc); box-shadow:0 0 0 4px var(--acc-a18);animation:pulse 2.2s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--acc-a18)}50%{box-shadow:0 0 0 7px var(--acc-a08)}} .hero h1{font-size:clamp(35px,5.2vw,56px);font-weight:900;line-height:1.12; letter-spacing:-.6px;margin-bottom:18px} .hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lead{font-size:18.5px;color:#c2dbd7;max-width:520px;margin-bottom:28px;text-wrap:pretty} .heroctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px} .trustline{display:flex;gap:9px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px;font-size:13px;color:#cfe6e2} .hero .wave{display:block;position:relative;margin-top:18px;margin-bottom:-1px;width:100%;height:54px} .hero .wave path{fill:var(--bg)} /* ---------- 7. אייקוני ערוצים ---------- */ .bic{width:17px;height:17px;display:inline-block;vertical-align:middle;flex:0 0 auto} .bic.wa{fill:#25D366}.bic.tg{fill:#37AEE2}.bic.web{fill:var(--acc-2)}.bic.mail{fill:#EA4335} .fi-multi{display:flex;gap:5px;align-items:center;justify-content:center} /* ===================================================================== 8. ההדמיה — שלושה ממשקים אמיתיים במסגרת טלפון אחת הכיול מול המסכים החיים: capture.html / portal.html (בהיר, ‎#eef2f3, כותרת ‎#0d6b75→#0a545c) · וואטסאפ ‎#efeae2/#008069 · טלגרם ‎#07191d. ===================================================================== */ .demo{display:flex;flex-direction:column;align-items:center;gap:16px} .demoswitch{position:relative;display:inline-flex;gap:3px;background:rgba(255,255,255,.06); border:1px solid var(--line);border-radius:999px;padding:4px;z-index:2} /* המחוון ממוקם ב-JS לפי offsetLeft/offsetTop — ולכן חייב להיות מעוגן ל-left, לא ל-inset-inline-start. ב-RTL האחרון מתרגם ל-right והמחוון בורח מהמסך. */ .demoswitch .dthumb{position:absolute;top:0;left:0;border-radius:999px; background:var(--acc-a18);box-shadow:inset 0 0 0 1px var(--acc-a35);z-index:0; transition:transform .34s var(--ease),width .34s var(--ease),height .34s var(--ease)} .dtab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;background:none; border:none;border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:700; color:var(--muted);cursor:pointer;transition:color .22s;white-space:nowrap} .dtab:hover{color:var(--ink)} .dtab[aria-selected="true"]{color:var(--acc)} .dtab .bic{width:15px;height:15px} .phonewrap{--ds:1;position:relative;width:calc(302px * var(--ds));height:calc(600px * var(--ds)); margin-inline:auto} .phone{position:absolute;top:0;inset-inline-end:0;width:302px;height:600px; transform:scale(var(--ds));transform-origin:top right; background:#0a1619;border-radius:44px;padding:11px;border:1px solid rgba(255,255,255,.13); box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 80px var(--acc-a12),inset 0 1px 0 rgba(255,255,255,.08)} html[dir="rtl"] .phone{transform-origin:top right} .phone .island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:88px;height:24px; background:#04090a;border-radius:999px;z-index:9} .screen{border-radius:34px;overflow:hidden;height:578px;position:relative} .ui{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden; transition:opacity .3s var(--ease)} .ui.on{opacity:1;visibility:visible} .demo-cap{font-size:13.5px;color:var(--muted);text-align:center;max-width:330px;line-height:1.6} /* בועות — כלל אחד שמונע את החיתוך שהיה בגרסה הקודמת */ .bub{max-width:88%;border-radius:14px;padding:8px 11px;font-size:11.9px;line-height:1.55; opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease); overflow-wrap:anywhere;word-break:normal;hyphens:none} .bub.show{opacity:1;transform:none} .bub .b{font-weight:700} .bub .red{color:#c4322f;font-weight:700} .bub .green{color:#0b8f6d;font-weight:700} /* -- ממשק וואטסאפ -- */ .ui-wa{background:#efeae2} .wa-h{background:#008069;color:#fff;padding:36px 12px 10px;display:flex;align-items:center;gap:9px;flex:0 0 auto} .wa-h .av{width:31px;height:31px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto} .wa-h .av img{width:78%;height:78%;display:block} .wa-h .nm{font-size:12.6px;font-weight:700;line-height:1.3} .wa-h .st{font-size:9.8px;opacity:.85} .wa-h .hdric{margin-inline-start:auto;width:16px;height:16px;fill:#fff;opacity:.9} .chatbody{flex:1;padding:12px 9px;display:flex;flex-direction:column;justify-content:flex-end; gap:7px;overflow:hidden} .ui-wa .bub{box-shadow:0 1px 1px rgba(0,0,0,.08);color:#111b21} .ui-wa .bub.out{align-self:flex-start;background:#d9fdd3;border-bottom-right-radius:4px} .ui-wa .bub.in{align-self:flex-end;background:#fff;border-bottom-left-radius:4px} .doc{display:flex;align-items:center;gap:8px;background:#c9f0c1;border-radius:9px;padding:6px 8px; margin-bottom:5px;font-size:10.6px;line-height:1.35} .doc .dic{width:26px;height:33px;background:#fff;border-radius:4px;display:grid;place-items:center; font-size:13px;flex:0 0 auto} .tick{color:#53bdeb;font-size:10px} .typ{align-self:flex-end;border-radius:14px;padding:9px 13px;display:none;gap:5px} .typ.show{display:flex} .typ i{width:6px;height:6px;border-radius:50%;animation:tp 1s infinite} .typ i:nth-child(2){animation-delay:.18s}.typ i:nth-child(3){animation-delay:.36s} @keyframes tp{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}} .ui-wa .typ{background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08)} .ui-wa .typ i{background:#8696a0} /* -- ממשק טלגרם -- */ .ui-tg{background:#07191d} .tg-h{background:rgba(255,255,255,.045);padding:36px 12px 10px;display:flex;align-items:center;gap:10px; border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto} .tg-h .av{width:32px;height:32px;border-radius:50%;background:var(--grad-deep);display:grid; place-items:center;box-shadow:0 0 0 2px var(--acc-a35);flex:0 0 auto} .tg-h .av img{width:100%;height:100%;border-radius:inherit;display:block} .tg-h .nm{font-size:12.6px;font-weight:700;color:#fff;line-height:1.3} .tg-h .st{font-size:10px;color:var(--acc)} .tg-h .hdric{margin-inline-start:auto;width:17px;height:17px;fill:#54c8f0;opacity:.95} .ui-tg .bub.out{align-self:flex-start;background:#123f46;color:#dcf7f0;border-bottom-right-radius:5px} .ui-tg .bub.in{align-self:flex-end;background:#eafaf6;color:#0c2f33;border-bottom-left-radius:5px; box-shadow:0 3px 10px rgba(0,0,0,.25)} .photo{display:flex;align-items:center;gap:8px;background:#0d3138;border-radius:10px;padding:6px 8px; margin-bottom:6px;font-size:10.6px;line-height:1.35} .photo .th{width:30px;height:39px;background:linear-gradient(160deg,#f2efe6,#ddd7c5);border-radius:5px; position:relative;flex:0 0 auto} .photo .th::before{content:"";position:absolute;inset:5px 5px auto 5px;height:2.5px;background:#9a917c; border-radius:2px;box-shadow:0 5px 0 #b6ad97,0 10px 0 #b6ad97,0 15px 0 #b6ad97} .kbrow{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px} .kb{background:#fff;border:1px solid #bfe0d8;color:#0a5560;border-radius:8px;font-size:10.2px; font-weight:700;padding:4px 7px;line-height:1.35} .ui-tg .typ{background:#eafaf6} .ui-tg .typ i{background:#5ea99d} /* -- ממשק הווב — משוחזר מ-capture.html האמיתי -- */ .ui-web{background:#eef2f3;color:#14312f;font-family:-apple-system,"Segoe UI",Arial,sans-serif} .web-h{background:linear-gradient(135deg,#0d6b75,#0a545c);color:#fff;padding:34px 14px 13px; text-align:center;box-shadow:0 4px 18px rgba(13,107,117,.28);flex:0 0 auto} .web-h h4{font-size:15px;font-weight:800;margin:0 0 5px} .web-h .wbadge{display:inline-block;background:rgba(255,255,255,.18);border-radius:20px; padding:3px 11px;font-size:10.5px;font-weight:600} .web-body{flex:1;padding:13px 12px;overflow:hidden;display:flex;flex-direction:column;gap:9px} .wcard{background:#fff;border:1px solid #e3ebec;border-radius:16px;padding:14px; box-shadow:0 3px 14px rgba(0,0,0,.05);opacity:0;transform:translateY(12px); transition:opacity .45s var(--ease),transform .45s var(--ease)} .wcard.show{opacity:1;transform:none} .wbtn{display:block;width:100%;border:none;border-radius:14px;padding:12px;font-size:13.5px; font-weight:800;text-align:center;margin-bottom:9px;line-height:1.3} .wbtn:last-child{margin-bottom:0} .wbtn.pri{background:linear-gradient(135deg,#0d6b75,#0a545c);color:#fff; box-shadow:0 6px 18px rgba(13,107,117,.32)} .wbtn.sec{background:#eef5f6;color:#0d6b75} .wbtn.dan{background:#fdecec;color:#b42318} .wsteps{display:flex;justify-content:space-between;margin-bottom:11px} .wstep{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1} .wstep .dot{width:26px;height:26px;border-radius:50%;background:#eef5f6;color:#6b7c7e; font-size:12px;font-weight:800;display:grid;place-items:center;transition:.3s} .wstep.on .dot{background:linear-gradient(135deg,#0d6b75,#0a545c);color:#fff} .wstep .lbl{font-size:10px;color:#6b7c7e;font-weight:600} .wbar-wrap{height:10px;border-radius:20px;background:#eef5f6;overflow:hidden;margin-bottom:9px} .wbar{height:100%;width:8%;border-radius:20px;background:linear-gradient(90deg,#0d6b75,#0a545c); transition:width .7s var(--ease)} .wmsg{font-size:12.5px;font-weight:700;color:#14312f;text-align:center} .wsubmsg{font-size:10.5px;color:#6b7c7e;text-align:center;margin-top:3px} .wpill{display:inline-block;border-radius:20px;padding:4px 11px;font-size:10.5px;font-weight:800; margin-bottom:8px} .wpill.amber{background:#fdf6e3;color:#8a6d00} .wpill.red{background:#fdecec;color:#b42318} .wtitle{font-size:13.5px;font-weight:800;margin-bottom:3px} .wnote{font-size:10.8px;color:#6b7c7e;line-height:1.5;margin-bottom:10px} .witem{border:1px solid #e3ebec;border-radius:14px;padding:10px;margin-bottom:8px} .witem .inm{font-size:12.3px;font-weight:700;margin-bottom:7px} .wqrow{display:flex;align-items:center;gap:7px;margin-bottom:6px} .wqrow .lbl{font-size:11px;color:#6b7c7e;font-weight:700;min-width:44px} .wqbtn{width:26px;height:26px;border-radius:9px;background:#eef5f6;color:#0d6b75;border:none; font-size:15px;font-weight:800;display:grid;place-items:center;line-height:1} .wqval{width:42px;height:26px;border:1.5px solid #e3ebec;border-radius:9px;text-align:center; font-size:12px;font-weight:800;background:#fff;display:grid;place-items:center} .wseg{display:flex;gap:0;border:1.5px solid #e3ebec;border-radius:11px;overflow:hidden;margin-bottom:7px} .wseg span{flex:1;text-align:center;font-size:10.6px;font-weight:700;padding:6px 2px;color:#6b7c7e; border-inline-end:1px solid #e3ebec} .wseg span:last-child{border-inline-end:none} .wseg span.on{background:#0d6b75;color:#fff} .wmiss{font-size:11px;font-weight:800;color:#b42318} .wmiss.ok{color:#6b7c7e;font-weight:600} .wdone{text-align:center;padding:8px 0} .wdone .mark{width:56px;height:56px;border-radius:50%;background:#e7f6ec;color:#1a7f37;font-size:30px; font-weight:900;display:grid;place-items:center;margin:0 auto 10px} .wdone h5{font-size:14.5px;font-weight:800;margin-bottom:5px;color:#14312f} .wdone p{font-size:11.5px;color:#6b7c7e;line-height:1.6} .web-foot{padding:8px 12px 12px;text-align:center;flex:0 0 auto} .web-foot .pb{font-size:9px;color:#6b7c7e;margin-bottom:3px} .web-foot img{height:14px;opacity:.72} /* קנה מידה במובייל — משנה גם את קופסת הפריסה, בלי גלישה אופקית */ @media(max-width:1120px){.phonewrap{--ds:.94}} @media(max-width:980px){ .herogrid{grid-template-columns:1fr;gap:30px} .hero{padding-top:142px} .demo{margin-top:6px} } @media(max-width:420px){.phonewrap{--ds:.86}} @media(max-width:340px){.phonewrap{--ds:.76}} /* ---------- 9. חשיפה בגלילה ---------- */ .rv{opacity:0;transform:translateY(26px);transition:opacity .68s var(--ease),transform .68s var(--ease)} .rv.vis{opacity:1;transform:none} .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s} .d4{transition-delay:.28s}.d5{transition-delay:.35s} /* ---------- 10. כרטיסים ---------- */ .cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px; box-shadow:var(--sh-1);text-align:center; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--acc-a35)} .pcard .ic{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:24px; margin:0 auto 16px} .ic.t-amber{background:rgba(245,185,66,.16)} .ic.t-red{background:var(--red-soft)} .ic.t-acc{background:var(--acc-a12)} .pcard h3{font-size:18px;font-weight:800;margin-bottom:7px} .pcard p{color:var(--muted);font-size:14.8px} .steps{background:var(--bg-alt)} .steprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:18px;position:relative} .steprow::before{content:"";position:absolute;top:46px;right:6%;left:6%;height:2px; background:linear-gradient(90deg,transparent,var(--acc-a35) 18% 82%,transparent);z-index:0} @media(max-width:1020px){.steprow::before{display:none}} .step{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:24px;box-shadow:var(--sh-1); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .step::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;border-radius:3px 3px 0 0; background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .step:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--acc-a35)} .step:hover::before{transform:scaleX(1)} .step .tops{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .step .num{width:41px;height:41px;border-radius:13px;background:var(--grad);color:var(--acc-ink); font-weight:900;display:grid;place-items:center;font-size:17px;box-shadow:0 8px 18px var(--acc-glow)} .step .em{font-size:27px} .step h3{font-size:17px;font-weight:800;margin-bottom:6px} .step p{font-size:14.2px;color:var(--muted)} .chanrow{display:flex;gap:7px;align-items:center;margin-top:13px} .chanrow .cb{width:29px;height:29px;border-radius:9px;background:var(--acc-a12);display:grid; place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .chanrow .cb .bic{width:15px;height:15px} /* ---------- 11. לשוניות היכולות ---------- */ .tabswrap{display:flex;justify-content:center;margin-bottom:26px} .tabs{position:relative;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px; background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:26px;padding:6px} .thumb{position:absolute;top:0;left:0;border-radius:999px;background:var(--acc-a18); box-shadow:inset 0 0 0 1px var(--acc-a35);z-index:0; transition:transform .35s var(--ease),width .35s var(--ease),height .35s var(--ease)} .tab{position:relative;z-index:1;background:transparent;border:none;border-radius:999px; padding:10px 17px;font-size:14.2px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .25s} .tab:hover{color:var(--acc)} .tab[aria-selected="true"]{color:var(--acc)} .panel{display:none} .panel.act{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;animation:fadein .42s var(--ease)} @media(max-width:980px){.panel.act{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.panel.act{grid-template-columns:1fr}} @keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .feat{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:20px; display:flex;gap:13px;align-items:flex-start;box-shadow:var(--sh-1); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .feat:hover{transform:translateY(-4px);border-color:var(--acc-a35);box-shadow:var(--sh-2)} .feat .fi{flex:0 0 auto;width:43px;height:43px;border-radius:13px;background:var(--acc-a12); display:grid;place-items:center;font-size:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .feat h3{font-size:15.5px;font-weight:800;margin-bottom:3px} .feat p{font-size:13.7px;color:var(--muted)} /* ---------- 12. פסים כהים (אבטחה / אמינות / CTA) ---------- */ .band{background:radial-gradient(820px 500px at 80% -20%,#0c4a55,#052e34 55%,#03161a); color:#fff;border-radius:32px;padding:44px 46px;position:relative;overflow:hidden; isolation:isolate;border:1px solid var(--line)} html[data-product="invoices"] .band{background:radial-gradient(820px 500px at 80% -20%,#1d5340,#0d3a33 55%,#04191c)} .band::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%; background:var(--acc-a12);filter:blur(70px);top:-140px;inset-inline-end:-90px;z-index:-1} .band::after{content:"";position:absolute;inset:0;z-index:-1; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(620px 420px at 80% 0%,#000,transparent 80%); mask-image:radial-gradient(620px 420px at 80% 0%,#000,transparent 80%)} .band .shead{margin-bottom:26px} .secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px} .sec-i{background:rgba(255,255,255,.055);border:1px solid var(--line-2);border-radius:16px; padding:16px 17px;font-size:14px;font-weight:500;display:flex;gap:12px;align-items:center; transition:.3s var(--ease)} .sec-i:hover{background:var(--acc-a12);border-color:var(--acc-a35);transform:translateY(-3px)} .sec-i .s{width:33px;height:33px;border-radius:10px;background:var(--acc-a12);display:grid; place-items:center;font-size:16px;flex:0 0 auto} @media(max-width:700px){.band{padding:36px 22px;border-radius:24px}} /* אקורדיון הפירוט הטכני */ .tech{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)} .tech summary{cursor:pointer;padding:15px 20px;font-size:14.5px;font-weight:700;color:var(--acc); list-style:none;display:flex;align-items:center;gap:9px;border-radius:16px} .tech summary::-webkit-details-marker{display:none} .tech summary::before{content:"+";font-size:18px;font-weight:900;line-height:1} .tech[open] summary::before{content:"–"} .tech .techbody{padding:0 20px 18px;font-size:13.8px;color:var(--muted);line-height:1.85} .tech .techbody ul{list-style:none;display:grid;gap:7px} .tech .techbody li{padding-inline-start:16px;position:relative} .tech .techbody li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:6px; height:6px;border-radius:50%;background:var(--acc-deep)} /* ---------- 13. פס CTA באמצע העמוד ---------- */ .midcta{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:30px 34px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; box-shadow:var(--sh-1);position:relative;overflow:hidden} .midcta::before{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:230px;height:230px; border-radius:50%;background:var(--acc-a08);filter:blur(50px)} .midcta h3{font-size:clamp(19px,2.4vw,25px);font-weight:900;margin-bottom:5px} .midcta p{color:var(--muted);font-size:14.8px;max-width:540px} .midcta .mc-btns{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto} /* ---------- 14. פיצול תוכן/מוקאפ ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}} .ticklist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:20px} .ticklist li{display:flex;gap:12px;align-items:flex-start;font-size:15.3px} .ticklist .tk{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--acc-a12); color:var(--acc);display:grid;place-items:center;font-size:13px;font-weight:900;margin-top:2px} .mockwrap{position:relative;padding-bottom:24px} .win{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--sh-2); overflow:hidden;font-size:12.5px;transform:rotate(-1.3deg);transition:transform .45s var(--ease)} .mockwrap:hover .win{transform:rotate(0)} .winbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f0f7f4; border-bottom:1px solid var(--line)} .winbar i{width:11px;height:11px;border-radius:50%} .winbar i:nth-child(1){background:#f26d63}.winbar i:nth-child(2){background:#f5c04b} .winbar i:nth-child(3){background:#48c774} .winbar .t{margin-inline-start:auto;font-weight:700;color:#074049;font-size:12.5px} .tabsline{display:flex;gap:2px;background:#e9f2ef;padding:8px 12px 0} .stab{background:#f7fbfa;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0; padding:5px 12px;font-size:11.5px;font-weight:600;color:#6b7c7e} .stab.on{background:#fff;color:#0d6b75;border-top:2.5px solid var(--acc-deep)} .win table{width:100%;border-collapse:collapse} .win th{background:#f2f9f7;color:#074049;font-weight:700;padding:9px 10px;text-align:right; border-bottom:1px solid var(--line);font-size:12px} .win td{padding:9px 10px;border-bottom:1px solid #eef4f2;color:#29504b} .win tr.band-row td{background:#f6fbf9} .win td.neg{color:#c4322f;font-weight:700} .win tr.credit td{background:#fdf1f1} .fcb{position:absolute;bottom:0;inset-inline-start:-8px;display:flex;align-items:center;gap:9px; background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 15px;font-size:12.8px; font-weight:700;color:#074049;box-shadow:var(--sh-2);animation:hover 7s ease-in-out infinite;z-index:2} .fcb .fic{width:29px;height:29px;border-radius:9px;background:linear-gradient(135deg,#e2f6f1,#c8ede4); display:grid;place-items:center;font-size:15px} @keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} /* גרסת מובייל לטבלה — רשימה אנכית קריאה במקום טבלה מוקטנת */ .mobrows{display:none;flex-direction:column;gap:9px} .mobrow{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px} .mobrow .r1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px} .mobrow .sup{font-size:14.5px;font-weight:800} .mobrow .amt{font-size:14.5px;font-weight:800;color:var(--acc)} .mobrow .r2{display:flex;gap:12px;font-size:12.3px;color:var(--muted);flex-wrap:wrap} .mobrow.credit .amt,.mobrow.credit .sup{color:var(--red)} /* ---------- 15. קהלים ---------- */ .aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px} .acard{border-radius:var(--r);padding:28px 22px;background:var(--surface);border:1px solid var(--line); position:relative;overflow:hidden;text-align:center;box-shadow:var(--sh-1); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .acard::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:var(--grad); transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .acard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .acard:hover::before{transform:scaleX(1)} .acard .em{width:54px;height:54px;border-radius:17px;background:var(--acc-a12);display:grid; place-items:center;font-size:26px;margin:0 auto 14px} .acard h3{font-size:16.5px;font-weight:800;margin-bottom:6px} .acard p{font-size:14px;color:var(--muted)} /* ---------- 16. תמחור ---------- */ .pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px; max-width:940px;margin:0 auto} .pcell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px; box-shadow:var(--sh-1)} .pcell .pi{width:46px;height:46px;border-radius:14px;background:var(--acc-a12);display:grid; place-items:center;font-size:21px;margin-bottom:14px} .pcell h3{font-size:17px;font-weight:800;margin-bottom:6px} .pcell p{font-size:14.2px;color:var(--muted)} .pricenote{max-width:720px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 24px} .pricenote strong{color:var(--ink)} /* ---------- 17. שאלות נפוצות ---------- */ .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); transition:border-color .3s} .qa[open]{border-color:var(--acc-a35)} .qa summary{cursor:pointer;list-style:none;padding:18px 22px;font-size:16px;font-weight:700; display:flex;align-items:flex-start;gap:12px;border-radius:var(--r-sm);line-height:1.5} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-inline-start:auto; margin-top:7px;border-inline-end:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc); transform:rotate(45deg);transition:transform .3s var(--ease)} .qa[open] summary::after{transform:rotate(-135deg)} .qa .ans{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.85;text-wrap:pretty} .qa .ans a{color:var(--acc);text-decoration:underline;text-underline-offset:3px} /* ---------- 18. טופס ההצטרפות ---------- */ .cta{background:radial-gradient(950px 580px at 50% -25%,#0c4a55,#052e34 52%,#03161a); border-radius:34px;color:#fff;padding:48px 40px;position:relative;overflow:hidden;isolation:isolate} html[data-product="invoices"] .cta{background:radial-gradient(950px 580px at 50% -25%,#1d5340,#0d3a33 52%,#04191c)} .cta::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%; background:var(--acc-a12);filter:blur(85px);top:-190px;left:50%;transform:translateX(-50%);z-index:-1} .cta h2{font-size:clamp(27px,4vw,42px);font-weight:900;margin-bottom:12px;text-align:center} .suhead{margin-bottom:30px} .suhead p{color:#a9cbc6;font-size:16.5px;max-width:540px;margin:0 auto;text-align:center;text-wrap:pretty} .sform{max-width:660px;margin:0 auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13); border-radius:24px;padding:30px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px} @media(max-width:560px){.sgrid{grid-template-columns:1fr}} .slab{display:block;font-size:13.5px;font-weight:700;color:#c6e2dd;margin-bottom:7px;text-align:right} .sin{display:block;width:100%;padding:13px 15px;border:1.5px solid rgba(255,255,255,.16); border-radius:13px;font-size:15px;background:rgba(255,255,255,.06);color:#fff; transition:border-color .2s,box-shadow .2s,background .2s; scroll-margin-top:120px} /* מונע שדה שנחתך מתחת לתפריט הדביק בוולידציה */ .sin::placeholder{color:rgba(255,255,255,.3)} .sin:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3.5px var(--acc-a18); background:rgba(255,255,255,.09)} .sin:focus-visible{outline:none} .svclab{margin:22px 0 11px;font-size:14.5px;font-weight:800;color:#e8f6f3;text-align:center} .svcopts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;scroll-margin-top:120px} @media(max-width:560px){.svcopts{grid-template-columns:1fr}} .svc{position:relative;cursor:pointer} .svc input{position:absolute;opacity:0;inset:0;cursor:pointer} .svc .box{position:relative;height:100%;border:1.5px solid rgba(255,255,255,.17);border-radius:16px; padding:17px 12px 14px;text-align:center;transition:.22s var(--ease);background:rgba(255,255,255,.04)} .svc .box .ic{font-size:24px;margin-bottom:7px} .svc .box h3{margin:0 0 4px;font-size:14.3px;font-weight:800;color:#fff;line-height:1.4} .svc .box p{margin:0;font-size:12.4px;color:#9fc5bf;line-height:1.5} .svc:hover .box{border-color:var(--acc-a35)} .svc input:checked+.box{border-color:var(--acc);background:var(--acc-a12); box-shadow:0 0 0 1px var(--acc),0 10px 26px var(--acc-a18)} .svc input:checked+.box::before{content:"✓";position:absolute;top:9px;inset-inline-start:9px; width:21px;height:21px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-weight:900; font-size:12px;display:grid;place-items:center} .svc input:focus-visible+.box{outline:3px solid var(--acc);outline-offset:3px} .branches{margin-top:15px;display:none;flex-direction:column;gap:11px} .branches.open{display:flex} .brow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.2);border-radius:16px;padding:13px 15px} .brrm{background:var(--red-soft);color:#ffb6bc;border:1px solid rgba(255,129,137,.36);border-radius:12px; padding:11px 15px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s} .brrm:hover{background:rgba(255,129,137,.26)} .brbtn{width:100%;margin-top:12px;background:transparent;color:var(--acc); border:1.5px dashed var(--acc-a35);border-radius:14px;padding:13px;font-size:14.5px;font-weight:700; cursor:pointer;transition:.2s} .brbtn:hover{background:var(--acc-a08)} .ssub{width:100%;margin-top:17px;font-size:17px;padding:16px} .mini{margin-top:15px;font-size:13.3px;color:#8db3ad;text-align:center;line-height:1.7} .mini a{color:var(--acc);text-decoration:underline;text-underline-offset:3px} /* ---------- 19. פוטר ---------- */ footer{padding:52px 0 30px;color:var(--muted);font-size:14px;background:var(--bg-alt); border-top:1px solid var(--line);margin-top:56px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px} @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:520px){.fgrid{grid-template-columns:1fr;gap:24px;text-align:center}} .fcol h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);margin-bottom:14px} .fcol ul{list-style:none;display:flex;flex-direction:column;gap:9px} .fcol a:hover{color:var(--acc)} .fbrand img{height:28px;margin-bottom:14px} @media(max-width:520px){.fbrand img{margin-inline:auto}} .fbrand p{font-size:14px;line-height:1.75;max-width:320px} @media(max-width:520px){.fbrand p{margin-inline:auto}} .fcontact{display:flex;flex-direction:column;gap:10px;margin-top:16px} .fcontact a,.fcontact span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600} @media(max-width:520px){.fcontact a,.fcontact span{justify-content:center}} .fcontact .fi{width:30px;height:30px;border-radius:9px;background:var(--acc-a12);display:grid; place-items:center;font-size:14px;flex:0 0 auto} .fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between; align-items:center;gap:16px;flex-wrap:wrap;font-size:13.2px} @media(max-width:640px){.fbot{justify-content:center;text-align:center;flex-direction:column;gap:10px}} .fbot .flegal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center} .fbot .flegal a:hover{color:var(--acc)} /* ---------- 20. כפתור וואטסאפ צף ---------- */ .wafab{position:fixed;bottom:20px;inset-inline-start:20px;z-index:70;display:inline-flex; align-items:center;gap:10px;background:#25D366;color:#053f30;font-weight:800;font-size:14.5px; padding:13px 19px;border-radius:999px;box-shadow:0 10px 30px rgba(37,211,102,.42); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .wafab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(37,211,102,.52)} .wafab svg{width:21px;height:21px;fill:#053f30} @media(max-width:520px){.wafab{padding:13px;bottom:16px;inset-inline-start:16px} .wafab .walabel{display:none}} /* ---------- 21. עמודים משפטיים ---------- */ .legal{padding-top:132px} .legal .wrap{max-width:820px} .legal h1{font-size:clamp(30px,4.4vw,42px);font-weight:900;margin-bottom:10px;line-height:1.2} .legal .updated{color:var(--muted-2);font-size:14px;margin-bottom:12px} .legal .lead{color:var(--muted);font-size:16.5px;margin-bottom:30px;text-wrap:pretty} .legal h2{font-size:22px;font-weight:800;margin:34px 0 12px;padding-top:8px;scroll-margin-top:var(--nav-h)} .legal h3{font-size:17px;font-weight:800;margin:22px 0 8px} .legal p{color:var(--muted);font-size:15.5px;line-height:1.9;margin-bottom:12px;text-wrap:pretty} .legal ul,.legal ol{color:var(--muted);font-size:15.5px;line-height:1.9; margin:0 0 14px;padding-inline-start:22px} .legal li{margin-bottom:7px} .legal a{color:var(--acc);text-decoration:underline;text-underline-offset:3px} .legal table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:14.5px} .legal th{background:var(--surface-2);color:var(--ink);font-weight:700;text-align:right; padding:11px 13px;border:1px solid var(--line)} .legal td{padding:11px 13px;border:1px solid var(--line);color:var(--muted);vertical-align:top} .draftbar{background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.4);border-radius:var(--r-sm); padding:18px 22px;margin-bottom:30px;font-size:14.8px;color:#f7d489;line-height:1.75} .draftbar strong{color:#ffe1a3} /* כל מקום שדורש נתון אמיתי מההנהלה — בולט ובלתי אפשרי לפספס */ .fill{display:inline;background:rgba(245,185,66,.18); box-shadow:0 0 0 1px rgba(245,185,66,.6) inset;border-radius:6px;padding:1px 8px; color:#ffd98a;font-weight:700;font-size:.94em;direction:rtl; overflow-wrap:anywhere;word-break:normal; -webkit-box-decoration-break:clone;box-decoration-break:clone} /* ---------- 22. מובייל — קצב הדוק ---------- */ @media(max-width:640px){ :root{--nav-h:78px} section{padding:46px 0} .shead{margin-bottom:24px} h2.sec{font-size:clamp(25px,7vw,33px)} p.sub{font-size:15.5px} nav{padding:10px 0} nav.scrolled{padding:6px 0} .navshell{padding:7px 8px;padding-inline-start:14px} .hero{padding-top:120px;padding-bottom:20px} .hero .kicker{margin-bottom:18px} .hero p.lead{font-size:16.5px;margin-bottom:24px} .hero .wave{margin-top:20px;height:48px} /* כפתורי הפתיחה — רוחב מלא ומוערמים, בלי מדרגות */ .heroctas{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:22px} .heroctas .btn{width:100%} .trustline{justify-content:flex-start} .pcard{padding:22px 18px} .cards3,.steprow,.aud,.pricegrid{gap:13px} .panel.act{gap:12px} .feat{padding:17px} .tabswrap{margin-bottom:22px} .midcta{padding:24px 20px;flex-direction:column;align-items:stretch;text-align:center} .midcta .mc-btns{flex-direction:column} .midcta .mc-btns .btn{width:100%} .band .shead{margin-bottom:22px} .acard{padding:22px 18px} .cta{padding:40px 16px;border-radius:26px} .suhead{margin-bottom:24px} .sform{padding:20px 15px} .qa summary{padding:15px 17px;font-size:15px} .qa .ans{padding:0 17px 17px;font-size:14.5px} /* המוקאפ המוטה מוחלף ברשימה אנכית קריאה */ .win,.fcb{display:none} .mockwrap{padding-bottom:0} .mobrows{display:flex} .split{gap:30px} footer{padding:40px 0 26px;margin-top:44px} .legal{padding-top:112px} .legal h2{font-size:20px} } /* ---------- 23. העדפת תנועה מופחתת ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important; transition-duration:.001s !important} html{scroll-behavior:auto} .rv{opacity:1;transform:none} .bub,.wcard{opacity:1;transform:none} } /* ---------- 24. טבלאות בעמודים המשפטיים — גלילה אופקית במקום גלישה ---------- */ .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 18px; border-radius:10px;max-width:100%} .tblwrap table{margin:0;min-width:480px} @media(max-width:640px){ .tblwrap{border:1px solid var(--line);border-radius:12px} .tblwrap table{min-width:520px;font-size:13.8px} .tblwrap th,.tblwrap td{padding:9px 11px} } /* ---------- 25. תיקוני מובייל שנמצאו באימות בדפדפן ---------- */ .pshort{display:none} @media(max-width:760px){ /* המתג נשאר גלוי גם בטלפון — אבל מציג רק את המוצר *השני*, כהזמנה לעבור */ .pswitch{display:flex;background:none;border:none;padding:0;margin-inline-start:auto} .pswitch a[aria-current="page"]{display:none} .pswitch a{background:var(--acc-a12);color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc-a35);font-size:13px;padding:8px 13px} .navend{margin-inline-start:0} } @media(max-width:430px){ .pfull{display:none} .pshort{display:inline} .pswitch a{font-size:12.5px;padding:8px 11px} } @media(max-width:640px){ /* שורת הצ'יפים — שורה אחת נגללת במקום מדרגות מרושלות */ .trustline{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; margin-inline:-24px;padding:0 24px 4px} .trustline::-webkit-scrollbar{display:none} .trustline .chip{flex:0 0 auto} } /* ---------- 26. כיול סופי של הכותרת הראשית והצ'יפים במובייל ---------- */ /* השורה הראשונה של ה-h1 היא יחידה אחת (בלי מקף בסוף שורה) — ולכן גודל הגופן חייב להיות קטן מספיק כדי שהיא תיכנס גם במסך של 360px. */ .hero h1{font-size:clamp(28px,4.9vw,54px)} @media(max-width:640px){ .trustline{-webkit-mask-image:linear-gradient(270deg,#000 82%,transparent); mask-image:linear-gradient(270deg,#000 82%,transparent)} } @media(max-width:360px){.hero h1{font-size:26px}} /* המקף שייך לסוף השורה הראשונה במסך רחב, ולתחילת השנייה במסך צר — כך שלעולם אין מקף תלוי בסוף שורה, בשום רוחב. */ .dash-m{display:none} @media(max-width:560px){ .hero h1 .nowrap{white-space:normal} .dash-d{display:none} .dash-m{display:inline} } @media(max-width:400px){ .logo img{height:22px} .navshell{gap:8px;padding-inline-start:12px} .burger{width:38px;height:38px} } /* פריט ב-grid לא מתכווץ מתחת ל-min-content כברירת מחדל — ושורת הצ'יפים הנגללת (flex-wrap:nowrap) הפכה בכך את עמודת הטקסט לרחבה מהמסך. */ .herogrid > *{min-width:0} .trustline{min-width:0;max-width:100%} /* ---------- 27. תיקוני פריסה שנמצאו בסקירת הצילומים ---------- */ /* שש יכולות בשלוש עמודות (במקום 4+2 עקום) */ .secgrid{grid-template-columns:repeat(auto-fit,minmax(298px,1fr))} .sec-i{align-items:flex-start;line-height:1.6} .sec-i > span:not(.s){min-width:0} .sec-i .s{margin-top:1px} /* כפתור הוואטסאפ הצף לא יושב על שורת הקרדיט בתחתית */ footer{padding-bottom:86px} @media(max-width:640px){footer{padding-bottom:78px}} /* כפתור הוואטסאפ הצף הוסר עד שיהיה מספר אמיתי — מחזירים את ריווח הפוטר */ footer{padding-bottom:32px} @media(max-width:640px){footer{padding-bottom:28px}}