:root{--navy:#193f73;--blue:#2d699e;--teal:#00d1d1;--grad:linear-gradient(135deg,#2d699e,#00d1d1);--bg:#f6f9fc;--surface:#fff;--text:#14233a;--muted:#5a6b82;--line:#dde6f0;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1a2e;--surface:#13243d;--text:#eaf1fa;--muted:#9fb2c8;--line:#24385a}}
:root[data-theme="dark"]{--bg:#0d1a2e;--surface:#13243d;--text:#eaf1fa;--muted:#9fb2c8;--line:#24385a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}.back{display:inline-block;margin-bottom:22px;color:var(--blue);font-weight:700;text-decoration:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Heebo',Arial,sans-serif;line-height:1.7}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center}.logo img{height:40px;width:auto;background:#fff;border-radius:8px;padding:3px 8px}
@media(prefers-color-scheme:dark){.logo{color:#fff}}
nav a{margin-inline-start:22px;color:var(--muted);text-decoration:none;font-weight:500}
nav a:hover{color:var(--blue)}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;color:#06263a;background:var(--grad);padding:13px 28px;border-radius:12px;text-decoration:none;box-shadow:0 8px 20px rgba(0,209,209,.25)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);box-shadow:none}
.hero{background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff;padding:84px 0 96px;position:relative;overflow:hidden}
.hero svg.arc{position:absolute;inset-inline-start:-80px;top:-60px;width:520px;opacity:.18}
.hero h1{font-size:clamp(32px,5.5vw,56px);line-height:1.15;margin:0 0 18px;font-weight:800;max-width:720px}
.hero h1 span{background:linear-gradient(90deg,#7ff,#00d1d1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;max-width:600px;opacity:.9;margin:0 0 30px}
.hero .cta{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:640px}
.svcbtn{font:inherit;text-align:start;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.45);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:2px;transition:.2s}
.svcbtn b{font-size:19px}.svcbtn small{opacity:.85;font-size:14px}
.svcbtn:hover{background:rgba(255,255,255,.2)}
.svcbtn.on{background:var(--grad);color:#06263a;border-color:transparent;box-shadow:0 8px 22px rgba(0,209,209,.3)}
.panel[hidden]{display:none}.panel .grid{margin-top:8px}.panel h3.pt{font-size:24px;margin:0 0 4px;color:var(--navy)}
@media(prefers-color-scheme:dark){.panel h3.pt{color:#fff}}
section{padding:72px 0}
h2{font-size:clamp(26px,4vw,36px);color:var(--navy);margin:0 0 8px;font-weight:800}
@media(prefers-color-scheme:dark){h2{color:#fff}}
.sub{color:var(--muted);margin:0 0 36px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.ico{width:46px;height:46px;border-radius:12px;background:var(--grad);display:grid;place-items:center;margin-bottom:14px;font-size:22px}
.card h3{margin:0 0 6px;font-size:19px}
.card p,.card li{color:var(--muted);margin:0}
.pk{display:flex;flex-direction:column}
.pk.hot{border:2px solid var(--teal);position:relative}
.tag{position:absolute;top:-13px;inset-inline-start:20px;background:var(--grad);color:#06263a;font-size:13px;font-weight:700;padding:2px 12px;border-radius:99px}
.pk ul{list-style:none;padding:0;margin:16px 0 22px;flex:1}
.pk li{padding:6px 0 6px 0;border-bottom:1px dashed var(--line)}
.pk li::before{content:"✓ ";color:var(--teal);font-weight:800}
.pk .btn{text-align:center}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.logos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.lg{height:72px;border:1.5px dashed var(--line);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-weight:700;opacity:.8}
form{display:grid;gap:14px;max-width:560px}
input,textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
input:focus,textarea:focus{outline:2px solid var(--teal);border-color:transparent}
.msg{min-height:24px;font-weight:500}
footer{background:var(--navy);color:#cfe0f3;padding:28px 0;text-align:center;font-size:14px}
.wa{position:fixed;inset-inline-start:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:30}
@media(max-width:640px){nav a.h{display:none}.hero{padding:56px 0 68px}section{padding:52px 0}}
a.svcbtn{text-decoration:none}
.pt{font-size:clamp(24px,4vw,34px);margin:0 0 4px;color:var(--navy);font-weight:800}
@media(prefers-color-scheme:dark){.pt{color:#fff}}
.back{margin-top:0}

/* התאמה לרזולוציות */
.card{display:flex;flex-direction:column}
@media(min-width:641px) and (max-width:1099px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.btn{padding:12px 22px}}
@media(min-width:1600px){body{font-size:17px}.wrap{max-width:1400px}.card{padding:30px}.hero h1{max-width:860px}.hero p{max-width:720px}}
@media(min-width:2200px){body{font-size:19px}.wrap{max-width:1680px}.logo img{height:48px}.nav{height:76px}}
footer a{color:#fff;text-decoration:none;font-weight:700}
.phone{display:inline-block;margin-top:6px;color:var(--blue);font-weight:700;text-decoration:none;font-size:18px}
a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
body{min-height:100vh;display:flex;flex-direction:column}
footer{margin-top:auto}
/* לקוחות */
.logos{grid-template-columns:repeat(auto-fill,minmax(200px,240px))}
.lg.client{height:auto;aspect-ratio:3/2;border:1px solid var(--line);border-style:solid;background:#fff;opacity:1;padding:10px;overflow:hidden}
.lg.client img{width:100%;height:100%;object-fit:contain;border-radius:8px}
/* נגישות בסיסית */
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
main{display:block}
/* באנר עוגיות */
.cookie{position:fixed;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;max-width:760px;margin:0 auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cookie p{margin:0;flex:1 1 320px;font-size:15px}
.cookie a{color:var(--blue);font-weight:700}
.cookie .btn{padding:10px 22px}
/* תפריט נגישות */
.a11y-btn{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:#1a5fb4;color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:40}
.a11y-panel{position:fixed;inset-inline-end:18px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:45;width:260px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:14px;display:grid;gap:8px}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{font-size:17px;margin:0 0 4px;color:var(--text)}
.a11y-panel button,.a11y-panel a{font:inherit;font-size:15px;text-align:start;cursor:pointer;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-decoration:none}
.a11y-panel button[aria-pressed="true"]{background:#1a5fb4;color:#fff;border-color:#1a5fb4}
html.a11y-contrast{--bg:#000;--surface:#000;--text:#fff;--muted:#fff;--line:#fff;--navy:#000;--blue:#ffd400}
html.a11y-contrast .hero,html.a11y-contrast footer{background:#000;color:#fff}
html.a11y-contrast h2,html.a11y-contrast .pt,html.a11y-contrast h1{color:#fff}
html.a11y-contrast a{color:#ffd400}
html.a11y-contrast .btn{background:#ffd400;color:#000;box-shadow:none}
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px;outline:1px dashed currentColor}
html.a11y-font body,html.a11y-font input,html.a11y-font textarea,html.a11y-font button{font-family:Arial,Helvetica,sans-serif !important;letter-spacing:.02em}
html.a11y-still *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
@media(max-width:640px){.a11y-panel{inset-inline:16px;width:auto}}
.doc h2{font-size:22px;margin:28px 0 8px}.doc p,.doc li{max-width:820px}
/* רקע מונפש */
.net-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.alt{background:color-mix(in srgb,var(--surface) 72%,transparent)}
.hero{background:linear-gradient(160deg,rgba(25,63,115,.93),rgba(45,105,158,.88))}
.card{backdrop-filter:blur(2px)}
/* פתיח בהיר: הרקע המונפש נראה דרכו */
.hero{background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--bg) 25%,transparent));color:var(--text);border-bottom:1px solid var(--line)}
.hero h1{color:var(--navy)}
.hero h1 span{background:linear-gradient(90deg,#2d699e,#00b3c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--text);opacity:.85}
.svcbtn{color:var(--text);background:color-mix(in srgb,var(--surface) 85%,transparent);border:1.5px solid var(--line);box-shadow:0 6px 18px rgba(25,63,115,.08);backdrop-filter:blur(3px)}
.svcbtn:hover{background:var(--surface);border-color:var(--teal)}
.svcbtn small{color:var(--muted);opacity:1}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1{color:#fff}}
html.a11y-contrast .hero h1 span{background:none;color:#ffd400}
.lg.client.full{padding:6px;background:linear-gradient(180deg,#394260,#595463)}
.lg.client.full img{object-fit:contain;border-radius:0}
.lg.client{display:block}.lg.client img{display:block}
/* אזור הלקוחות במרכז */
#clients .wrap{text-align:center}
#clients .logos{justify-content:center}
/* קרוסלת לקוחות: זזה הצידה כל כמה שניות */
.logos-viewport{overflow:hidden;margin-inline:auto;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#logos{display:flex;gap:20px;justify-content:center;direction:ltr;will-change:transform}
#logos .lg.client{flex:0 0 220px;width:220px}
#logos.moving{justify-content:flex-start}
.logos-viewport.static{-webkit-mask-image:none;mask-image:none}
.logos-viewport.static #logos{flex-wrap:wrap}
@media(max-width:640px){#logos .lg.client{flex-basis:170px;width:170px}}
/* ===== עיצוב 2: גופנים, אייקונים, כפתורים ופתיח ===== */
body{font-family:'Assistant','Heebo',Arial,sans-serif;font-size:17px}
h1,h2,.pt,.hero h1,.card h3,.svcbtn b,.panel h3.pt{font-family:'Secular One','Assistant',sans-serif;font-weight:400;letter-spacing:0}
.hero h1{line-height:1.2}
/* אייקונים בקו, על רקע עדין במקום ריבוע צבעוני */
.ico{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--blue);border-radius:12px}
.ico svg{width:24px;height:24px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ico{color:var(--teal)}}
.svcbtn b{display:flex;align-items:center;gap:10px}
.svcbtn .si{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--blue);flex:none}
/* כפתורים: צבע אחיד במקום מעבר צבע */
.btn{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(25,63,115,.18);transition:background .2s,transform .2s}
.btn:hover{background:var(--blue);transform:translateY(-1px)}
.nav-btn{padding:8px 20px;background:var(--teal);color:#06263a}
.nav-btn:hover{background:#00b8c4;color:#06263a}
.pk .btn{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
.pk .btn:hover{background:var(--navy);color:#fff}
.pk.hot .btn{background:var(--navy);color:#fff}
.tag{background:var(--teal)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pk .btn{color:#fff;border-color:#fff}}
html.a11y-contrast .btn{background:#ffd400 !important;color:#000 !important;border-color:#ffd400 !important}
/* פתיח בשתי עמודות: טקסט ואיור */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-text h1{max-width:none}
.hero-art{width:100%;max-width:440px;justify-self:center;color:var(--blue)}
.hero-art .links{opacity:.45;animation:dash 1.6s linear infinite}
.hero-art .node rect,.hero-art .node path{fill:var(--surface);stroke:var(--blue);stroke-width:2.2}
.hero-art .led{fill:var(--teal);animation:blink 1.8s ease-in-out infinite}
.hero-art .led.l2{animation-delay:.6s}.hero-art .led.l3{animation-delay:1.2s}
.hero-art .pk circle{fill:var(--teal)}.hero-art .pk circle.b{fill:var(--blue)}
@keyframes dash{to{stroke-dashoffset:-28}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{display:none}}
html.a11y-still .hero-art .pk{display:none}
@media(prefers-reduced-motion:reduce){.hero-art .pk{display:none}.hero-art *{animation:none !important}}
.hero-text{min-width:0}
@media(max-width:900px){.hero-grid{display:block}}
/* כפתורי השירותים: אייקון למעלה בקו אחד, בלי הפרשי גובה */
.svcbtn b{align-items:flex-start;line-height:1.35}
.svcbtn .si{margin-top:-4px}
.svcbtn b > span:last-child{padding-top:6px}
.svcbtn small{padding-inline-start:46px}
.nw{white-space:nowrap}
.hero .cta{max-width:none}
.svcbtn b{font-size:18px}
