:root {
  --blue:#0ea5e9; --blue-dark:#0284c7; --cyan:#38bdf8;
  /* 🔵 FAB-A11Y (26.08.2026) — ‎#0ea5e9‎ הוא כחול המותג, אבל טקסט לבן עליו
     נותן 2.77:1. ת"י 5568 מאמץ WCAG 2.0 AA ודורש 4.5:1 לטקסט רגיל — כלומר
     כל מצב "פעיל" באתר (בורר השפה, בורר המחזור, משבצת התור הנבחרת) נכשל.
     ‎--blue-solid‎ הוא אותו גוון בדיוק, מוכהה עד 4.52:1. משמש **רק** כרקע
     שנושא טקסט לבן; ‎--blue‎ נשאר לגבולות, זוהרים והדגשות. */
  --blue-solid:#0b7eb2;
  --blue-glow:rgba(14,165,233,0.16); --blue-border:rgba(14,165,233,0.34);
  --bg:#141517; --bg-soft:#191a1e; --bg-card:#1d1f24; --bg-card2:#222428;
  --border:rgba(255,255,255,0.07); --border-h:rgba(56,189,248,0.45);
  --text:#9aa3b8; --text-bright:#d8e0f0; --heading:#eef2ff; --radius:14px;
}
html{background:var(--bg) radial-gradient(1000px 620px at 18% 8%,rgba(30,134,214,0.10),transparent 60%) no-repeat}
html::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(900px 560px at 85% 75%,rgba(41,196,245,0.07),transparent 62%)}
html[data-theme="light"]{background:#fff radial-gradient(1000px 620px at 18% 8%,rgba(30,134,214,0.06),transparent 60%) no-repeat}
html[data-theme="light"]::after{background:radial-gradient(900px 560px at 85% 75%,rgba(41,196,245,0.05),transparent 62%)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Rubik',sans-serif;background:transparent;color:var(--text);overflow-x:hidden;line-height:1.7}
h1,h2,h3,.stat-num{font-family:'Heebo','Rubik',sans-serif}
h1{letter-spacing:-0.04em}h2{letter-spacing:-0.03em}h3{letter-spacing:-0.02em}

/* NETWORK BACKGROUND */
#networkCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .9s ease}

/* NAVBAR */
.navbar{position:fixed;top:0;width:100%;background:rgba(21,22,25,0.88);backdrop-filter:blur(22px);border-bottom:1px solid var(--border);z-index:9999;display:flex;flex-direction:column;padding:0;transition:background 0.45s ease,backdrop-filter 0.45s ease,border-color 0.45s ease}
.navbar.navbar--top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.navbar.navbar--top .navbar-links{background:transparent;border:none;width:auto;padding:4px 32px 8px;margin:0}
.navbar.navbar--top .navbar-links a:not(.navbar-cta){background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.00) 100%);border:1px solid rgba(255,255,255,0.10);border-bottom-color:rgba(255,255,255,0.04);border-radius:10px;color:#e2eaf8;box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.08),0 2px 12px rgba(0,0,0,0.10);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%)}
.navbar.navbar--top .navbar-links a:not(.navbar-cta):hover{background:linear-gradient(180deg,rgba(14,165,233,0.22) 0%,rgba(14,165,233,0.08) 100%);border-color:rgba(56,189,248,0.55);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 6px 22px rgba(14,165,233,0.30);text-shadow:0 0 10px rgba(255,255,255,0.80),0 0 22px rgba(56,189,248,0.55);transform:translateY(-1px)}
.navbar-row-top{display:flex;align-items:center;justify-content:space-between;padding:8px 32px;min-height:56px}
.navbar-logo{display:flex;align-items:center}.navbar-logo a{display:flex;align-items:center;line-height:0}
.navbar-logo img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(14,165,233,0.45))}
.navbar-links{display:flex;gap:4px;align-items:center;justify-content:center;padding:4px 32px 8px;border-top:1px solid rgba(255,255,255,0.05)}
.navbar-links a{padding:8px 16px;border-radius:8px;color:var(--text);font-size:15px;font-weight:500;text-decoration:none;transition:all 0.2s;border:1px solid transparent}
.navbar-links a:hover{background:linear-gradient(135deg,rgba(15,60,110,0.38),rgba(41,150,214,0.2));color:#c8e6f8;transform:translateY(-2px);box-shadow:0 4px 14px rgba(20,90,165,0.22),inset 0 1px 0 rgba(140,200,230,0.12)}
.navbar-cta{background:linear-gradient(145deg,#0f3a6e 0%,#0ea5e9 45%,#38bdf8 80%,#5cd3f7 100%)!important;color:#f0faff!important;padding:10px 22px!important;border-radius:10px!important;font-weight:700!important;border:1px solid rgba(90,190,240,0.4)!important;box-shadow:0 2px 18px rgba(14,165,233,0.45),inset 0 1px 0 rgba(165,225,250,0.25);display:inline-flex!important;align-items:center!important;gap:7px!important;text-shadow:0 1px 2px rgba(5,25,55,0.45)}
.navbar-cta:hover{color:#fff!important;transform:translateY(-3px) scale(1.04);box-shadow:0 10px 32px rgba(14,165,233,0.58),inset 0 1px 0 rgba(190,235,252,0.3)!important}
.hamburger{display:none;width:34px;height:34px;color:var(--text-bright);cursor:pointer;background:none;border:none;padding:0;line-height:1;align-items:center;justify-content:center;flex-shrink:0}
.hamburger svg{width:100%;height:100%;display:block}

/* theme + language switches (navbar) */
.nav-ctl{display:flex;align-items:center;gap:10px}
.ctl-group{display:flex;align-items:center;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:99px;padding:3px;gap:2px}
/* 🔵 FAB-A11Y — הגובה היה 23px. יעד הפעלה מינימלי הוא 24×24 (WCAG 2.5.8),
   ופיקסל אחד חסר הוא בדיוק סוג הדבר שנופל בביקורת. ‎6px‎ במקום ‎5px‎. */
.ctl-group button{font-family:'Rubik',sans-serif;font-size:12.5px;font-weight:600;color:var(--text);background:none;border:none;border-radius:99px;padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;line-height:1}
.ctl-group button.on{background:var(--blue-solid);color:#fff;box-shadow:0 2px 10px rgba(14,165,233,0.45)}
.ctl-group button:not(.on):hover{color:var(--heading)}
.ctl-group svg{display:block}

/* HERO */
.hero{padding:168px 24px 64px;text-align:center;position:relative;overflow:hidden}
.hero-visual{position:relative;display:grid;place-items:center;margin-bottom:8px;opacity:0;animation:logoUp 1.2s cubic-bezier(0.22,1,0.36,1) 0.1s forwards}
.hero-visual img{height:300px;width:auto;max-width:88vw;filter:drop-shadow(0 16px 70px rgba(14,165,233,0.72)) drop-shadow(0 0 38px rgba(56,189,248,0.38))}

@keyframes logoUp{from{opacity:0;transform:translateY(28px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-sep{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;width:100%;max-width:700px;margin:26px auto 40px;opacity:0;animation:fadeUp 0.8s ease 0.45s forwards}
.hero-sep-line{flex:1;height:1px;background:linear-gradient(to var(--dir,left),transparent 0%,rgba(14,165,233,0.75) 55%,rgba(92,211,247,1) 100%);box-shadow:0 0 6px rgba(56,189,248,0.5)}
.hero-sep-line:first-child{--dir:right}.hero-sep-line:last-child{--dir:left}
.hero-sep-gem{position:relative;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.hero-sep-gem::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(14,165,233,0.28) 0%,rgba(56,189,248,0.12) 100%);border:1.5px solid rgba(92,211,247,0.85);transform:rotate(45deg);border-radius:5px;box-shadow:0 0 28px rgba(14,165,233,0.8),0 0 60px rgba(14,165,233,0.3),inset 0 1px 0 rgba(255,255,255,0.30)}
.hero-sep-gem::after{content:"";position:absolute;width:9px;height:9px;background:#5cd3f7;border-radius:50%;box-shadow:0 0 14px rgba(56,189,248,1),0 0 28px rgba(14,165,233,0.9)}
.hero-sep-gem-ring{position:absolute;inset:-10px;border:1px solid rgba(56,189,248,0.35);transform:rotate(45deg);border-radius:7px;animation:sepPulse 2.8s ease-in-out infinite}
@keyframes sepPulse{0%,100%{opacity:0.25;transform:rotate(45deg) scale(1)}50%{opacity:0.8;transform:rotate(45deg) scale(1.15)}}
.hero-glass-pill{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.00) 100%);border:1px solid rgba(255,255,255,0.18);border-bottom-color:rgba(255,255,255,0.05);color:#b8d4f0;border-radius:999px;padding:7px 18px;font-size:13px;font-weight:600;margin-bottom:22px;letter-spacing:0.3px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 2px 12px rgba(0,0,0,0.2);opacity:0;animation:fadeUp 0.8s ease 0.5s forwards}
.hero-glass-pill svg{color:#5cd3f7}
.hero h1{font-size:clamp(3rem,7.5vw,5.4rem);font-weight:900;color:var(--heading);line-height:1.13;margin-bottom:20px;opacity:0;animation:fadeUp 0.8s ease 0.55s forwards;text-shadow:0 2px 6px rgba(0,0,0,1),0 4px 20px rgba(0,0,0,0.95),0 8px 40px rgba(0,0,0,0.85)}
.hero h1 span{color:#38bdf8;text-shadow:0 0 28px rgba(56,189,248,0.80),0 0 60px rgba(14,165,233,0.45),0 2px 8px rgba(0,0,0,0.99)}
.hero-sub{font-size:1.1rem;color:#c8d8ec;max-width:560px;margin:0 auto 40px;font-weight:500;opacity:0;animation:fadeUp 0.8s ease 0.7s forwards;text-shadow:0 1px 4px rgba(0,0,0,1),0 3px 16px rgba(0,0,0,0.95)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.8s ease 0.85s forwards}
.hero-cta .btn{min-width:220px;justify-content:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:12px;font-family:'Rubik',sans-serif;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:all 0.25s ease}
.btn-primary{background:linear-gradient(145deg,#0f3a6e 0%,#0ea5e9 45%,#38bdf8 82%,#5cd3f7 100%);background-size:220% 100%;color:#f0faff;border:1px solid rgba(90,190,240,0.4);box-shadow:0 4px 22px rgba(14,165,233,0.45),inset 0 1px 0 rgba(165,225,250,0.22);text-shadow:0 1px 2px rgba(5,25,55,0.45)}
.btn-primary:hover{color:#fff;transform:translateY(-4px) scale(1.04);box-shadow:0 16px 44px rgba(14,165,233,0.65),0 0 0 3px rgba(56,189,248,0.22),inset 0 1px 0 rgba(190,235,252,0.3)}
.btn-outline{background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.00) 100%);color:#dce8f8;border:1px solid rgba(255,255,255,0.22);border-bottom-color:rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 4px 18px rgba(0,0,0,0.25)}
.btn-outline:hover{background:rgba(14,165,233,0.15);border-color:rgba(56,189,248,0.5);color:#5cd3f7;transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(56,189,248,0.28),0 8px 28px rgba(14,165,233,0.28)}
@keyframes ctaFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.022)}}
.btn-primary{will-change:transform;animation:ctaFloat 2.4s cubic-bezier(0.45,0,0.55,1) infinite;position:relative}
.navbar-cta{animation:none!important;position:relative} /* 2026-08-16, Nir: הכפתור בתפריט לא מרחף */
.navbar-cta::after,.btn-primary::after{content:'';position:absolute;inset:-4px;border-radius:14px;background:linear-gradient(145deg,#0f3a6e,#0ea5e9,#5cd3f7);filter:blur(14px);opacity:0.22;z-index:-1;pointer-events:none}
.navbar-cta:hover,.btn-primary:hover{animation:none!important;transform:translateY(-4px) scale(1.04)!important}
.btn-no-pulse,.btn-no-pulse::after{animation:none!important}

.hero-stats{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--border);opacity:0;animation:fadeUp 0.8s ease 1s forwards}
.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 36px;gap:10px;position:relative;transition:transform .3s ease}
.stat-item:hover{transform:translateY(-5px)}
.stat-item:not(:last-child)::after{content:'';position:absolute;left:0;top:12%;height:76%;width:1px;background:linear-gradient(to bottom,transparent,rgba(70,140,220,0.45) 35%,rgba(70,140,220,0.45) 65%,transparent)}
.stat-num{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.55rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#5cd3f7,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:12.5px;color:var(--text);font-weight:500;text-align:center;line-height:1.45;max-width:110px}

/* PHRASE ROTATOR */
.phrase-section{margin-top:52px;display:flex;justify-content:center;padding:0 24px}
.phrase-card{position:relative;max-width:660px;width:100%;background:rgba(10,16,30,0.82);border:1px solid rgba(14,165,233,0.18);border-radius:18px;padding:28px 40px 24px;text-align:center;overflow:hidden;box-shadow:0 2px 40px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.04)}
.phrase-card::before{content:'';position:absolute;top:0;right:20%;left:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,0.55),transparent)}
.phrase-progress{position:absolute;top:0;right:0;height:2px;width:0%;background:linear-gradient(90deg,transparent,#0ea5e9,#38bdf8)}
html[dir="ltr"] .phrase-progress{right:auto;left:0}
.phrase-quote{font-family:Georgia,serif;font-size:2.2rem;line-height:0.4;color:rgba(14,165,233,0.2);display:block;margin-bottom:12px;user-select:none}
.phrase-stage{min-height:56px;display:flex;align-items:center;justify-content:center}
.phrase-text{font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:600;color:var(--heading);line-height:1.55;transition:opacity .5s ease,transform .5s ease}
.phrase-text.show{opacity:1;transform:none}
.phrase-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.phrase-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.14);cursor:pointer;transition:all .3s}
.phrase-dots span.on{background:#38bdf8;box-shadow:0 0 10px rgba(56,189,248,0.8)}

/* SECTIONS */
.section-wrap{padding:60px 24px;max-width:1080px;margin:0 auto}
.section-header{text-align:center;margin-bottom:40px}
.section-label{display:inline-block;background:var(--blue-glow);color:#5cd3f7;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:5px 14px;border-radius:999px;border:1px solid var(--blue-border);margin-bottom:14px}
.section-header h2{font-size:2.5rem;font-weight:900;color:var(--heading);margin-bottom:10px}
.section-header p{color:var(--text);font-size:1rem;max-width:500px;margin:0 auto}

/* FEATURE CARDS (service-card skeleton) */
#features{background:transparent}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.service-card{position:relative;overflow:hidden;border-radius:18px;padding:28px 24px;transition:all .4s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,0.10);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55)}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,0.55),transparent);opacity:0.5;transition:opacity .35s ease}
.service-card::after{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:80%;background:radial-gradient(circle,rgba(14,165,233,0.16) 0%,transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.service-card:hover::before,.service-card:hover::after{opacity:1}
.service-card:hover{border-color:rgba(56,189,248,0.45);transform:translateY(-10px) scale(1.02);box-shadow:0 26px 55px -18px rgba(0,0,0,0.75),0 0 0 1px rgba(56,189,248,0.28),0 10px 40px -14px rgba(14,165,233,0.35);background:linear-gradient(160deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.04) 55%,rgba(255,255,255,0.02) 100%)}
.service-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(145deg,#38bdf8 0%,#0ea5e9 42%,#0d4f8c 100%);color:#f0f9ff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;border:1px solid rgba(92,211,247,0.4);box-shadow:0 8px 20px -6px rgba(14,165,233,0.55),inset 0 1px 0 rgba(255,255,255,0.45),inset 0 -3px 8px rgba(6,40,80,0.5);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.service-card:hover .service-icon{transform:translateY(-3px) scale(1.08) rotate(-3deg)}
.service-card h3{font-size:17px;font-weight:700;color:var(--heading);margin-bottom:9px}
.service-card p{font-size:14.5px;color:#a4b1c8;line-height:1.68}

/* BOOKING SHOWCASE */
#booking{background:transparent}
.bk-flex{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.bk-points{display:flex;flex-direction:column;gap:14px;margin:22px 0 28px}
.bk-point{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-bright);line-height:1.55}
.bk-point svg{flex-shrink:0;margin-top:3px;color:#5cd3f7}
.bk-side h2{font-size:2.2rem;font-weight:900;color:var(--heading);line-height:1.2;margin-bottom:12px}
.bk-side>p{font-size:1rem;color:var(--text)}
/* mini booking mock */
.bk-mock{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(155deg,rgba(255,255,255,0.055),rgba(255,255,255,0.018));border:1px solid rgba(92,211,247,0.16);box-shadow:0 30px 70px rgba(0,0,0,0.42),inset 0 1px 0 rgba(255,255,255,0.05);padding:22px 20px}
.bk-mock::before{content:'';position:absolute;top:0;right:15%;left:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,0.6),transparent)}
.bkm-head{text-align:center;margin-bottom:14px}
.bkm-ava{width:44px;height:44px;border-radius:13px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;color:#fff;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 40%),linear-gradient(145deg,#0ea5e9,#6366f1);box-shadow:0 8px 22px -6px rgba(14,165,233,.6)}
.bkm-name{font-size:15.5px;font-weight:700;color:var(--heading)}
.bkm-sub{font-size:11.5px;color:var(--text)}
.bkm-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.bkm-dow{font-size:9.5px;font-weight:600;color:#64748b;text-align:center;padding-bottom:3px}
.bkm-d{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:500;color:#dbeafe;background:rgba(255,255,255,.04);border:1px solid rgba(92,211,247,.12)}
.bkm-d.off{background:transparent;border-color:transparent;color:#3b4a63}
.bkm-d.sel{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(14,165,233,.5)}
.bkm-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bkm-slot{padding:9px 4px;border-radius:10px;font-size:12.5px;font-weight:600;text-align:center;color:#dbeafe;background:rgba(255,255,255,.045);border:1px solid rgba(92,211,247,.13);direction:ltr}
.bkm-slot.sel{background:var(--blue-solid);border-color:var(--blue-solid);color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.5)}
@media(max-width:860px){.bk-flex{grid-template-columns:1fr;gap:30px}.bk-mock{max-width:400px;margin:0 auto}}

/* WHY */
#why{background:transparent}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.why-card{position:relative;overflow:hidden;border-radius:18px;padding:30px 26px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;gap:12px;background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,0.10);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55)}
.why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,0.55),transparent);opacity:0.5}
.why-card::after{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:80%;background:radial-gradient(circle,rgba(14,165,233,0.16) 0%,transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.why-card:hover::after{opacity:1}
.why-card:hover{border-color:rgba(56,189,248,0.45);transform:translateY(-10px) scale(1.02);box-shadow:0 26px 55px -18px rgba(0,0,0,0.75),0 0 0 1px rgba(56,189,248,0.28);background:linear-gradient(160deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.04) 55%,rgba(255,255,255,0.02) 100%)}
.why-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(145deg,#38bdf8 0%,#0ea5e9 42%,#0d4f8c 100%);color:#f0f9ff;display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(92,211,247,0.4);box-shadow:0 8px 20px -6px rgba(14,165,233,0.55),inset 0 1px 0 rgba(255,255,255,0.45)}
.why-card h3{font-size:16.5px;font-weight:700;color:var(--heading)}
.why-card p{font-size:14.5px;color:#a4b1c8;line-height:1.65}

/* PRICING TEASER */
#pricing{background:transparent}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:900px;margin:0 auto}
.price-card{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:30px 26px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.price-card:hover{border-color:rgba(56,189,248,0.45);transform:translateY(-8px);box-shadow:0 26px 55px -18px rgba(0,0,0,0.75),0 0 0 1px rgba(56,189,248,0.28)}
.price-card.pop{border-color:rgba(56,189,248,0.5);box-shadow:0 0 0 1px rgba(56,189,248,0.35),0 20px 55px -18px rgba(14,165,233,0.4)}
.price-pop{position:absolute;top:14px;inset-inline-end:14px;font-size:11px;font-weight:700;color:#141517;background:linear-gradient(135deg,#5cd3f7,#38bdf8);border-radius:20px;padding:3px 10px}
.price-name{font-size:15px;font-weight:700;color:#5cd3f7;letter-spacing:.04em;margin-bottom:8px}
.price-amount{font-size:2.6rem;font-weight:900;color:var(--heading);font-family:'Heebo',sans-serif;line-height:1}
.price-amount small{font-size:1rem;font-weight:600;color:var(--text)}
.price-tag{font-size:13px;color:var(--text);margin:10px 0 16px}
.price-cta{display:inline-flex;padding:10px 26px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;color:#dce8f8;border:1px solid rgba(255,255,255,0.22);transition:all .25s}
.price-cta:hover{background:rgba(14,165,233,0.15);border-color:rgba(56,189,248,0.5);color:#5cd3f7;transform:translateY(-2px)}
.price-card.pop .price-cta{background:linear-gradient(145deg,#0f3a6e 0%,#0ea5e9 45%,#38bdf8 100%);color:#fff;border-color:rgba(90,190,240,0.4);box-shadow:0 4px 18px rgba(14,165,233,0.45)}
.price-note{text-align:center;margin-top:22px;font-size:13.5px;color:var(--text)}
.price-note b{color:#5cd3f7}
html[data-theme="light"] .price-note b{color:#087fa3}   /* 4.59:1 על לבן (היה 1.73) */
html[data-theme="light"] .price-note a{color:#0b7caf}
/* שטח נגיעה לקישורי טקסט עצמאיים (שורת CTA בתוך div, לא בתוך פסקה).
   הם פטורים מ-2.5.8 כקישורים בתוך משפט, אבל 15–16px גובה זה קטן באמת ביד. */
.price-note a,.cx-row dd a,.faq-link{display:inline-block;padding-block:5px}
.faq-link{color:var(--blue);font-weight:600}
html[data-theme="light"] .faq-link{color:#0a75a6}

/* FAQ */
#faq{background:transparent}
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.08);border-radius:0;overflow:hidden;box-shadow:none;transition:border-color .25s}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,0.08)}
.faq-item:hover{border-bottom-color:rgba(56,189,248,0.30)}
.faq-item.open{border-bottom-color:rgba(56,189,248,0.40);box-shadow:none}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 6px;cursor:pointer;font-size:15.5px;font-weight:600;color:var(--text-bright);gap:12px;user-select:none}
.faq-q:hover{color:#5cd3f7}
.faq-arrow{width:26px;height:26px;background:transparent;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#5cd3f7;transition:transform .3s,background .2s}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:rgba(56,189,248,0.14);color:#5cd3f7;border:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;font-size:14.5px;color:var(--text);line-height:1.7;padding:0 6px}
.faq-item.open .faq-a{max-height:220px;padding:0 6px 20px}

/* CTA */
#contact{background:transparent;padding:60px 24px;text-align:center}
#contact h2{font-size:2.6rem;font-weight:900;color:var(--heading);margin-bottom:12px}
#contact p{color:var(--text);font-size:1.05rem;margin-bottom:36px}
.cta-grid{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.cta-row-1{display:flex;gap:12px}
.cta-row-1>*{flex:1;justify-content:center}
@media(max-width:520px){.cta-row-1{flex-direction:column}}

footer{background:rgba(6,10,18,0.88);color:#4b586d;text-align:center;padding:26px;font-size:14px;border-top:1px solid rgba(255,255,255,0.05)}
/* שטח הנגיעה של קישורי הפוטר היה 16px גובה. הם קישורים בתוך משפט ולכן
   פטורים מ-2.5.8, אבל בנייד זה פשוט קשה לפגוע — ‎padding-block‎ מרחיב
   את שטח הנגיעה בלי לשנות את מראה השורה. */
footer a{color:#0ea5e9;text-decoration:none;display:inline-block;padding-block:5px}
html[data-theme="light"] footer a{color:#0a75a6}   /* 4.71:1 על #f2f6fa (היה 2.55) */

/* Focus visible */
a:focus-visible,button:focus-visible{outline:2px solid #38bdf8;outline-offset:3px;border-radius:4px}
/* 🟠 FAB-A11Y (26.08.2026) — קישור "דלג לתוכן הראשי" (WCAG 2.4.1).
   קודם הוא היה קיים **רק בעמוד הבית**, עם ‎style=""‎ אינליין ו-‎onfocus/onblur‎
   ב-JS. מי שמנווט במקלדת בכל עמוד אחר נאלץ לעבור את כל 7 קישורי הניווט לפני
   שהגיע לתוכן, ומי שה-JS שלו נכשל לא ראה את הקישור גם בעמוד הבית. עכשיו זו
   מחלקה אחת שעובדת על ‎:focus‎ טהור ומופיעה בכל עמוד. */
.skip-link{position:fixed;top:-64px;inset-inline-start:0;z-index:100000;background:var(--blue-solid);color:#fff;
  padding:10px 20px;font-weight:700;font-size:15px;text-decoration:none;border-radius:0 0 10px 0;
  transition:top .18s ease;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:-6px}
html[dir="ltr"] .skip-link{border-radius:0 0 0 10px}

/* ═══════════ LIGHT MODE — accessibility first ═══════════ */
html[data-theme="light"]{background:#fff}
/* 🔴 FAB-A11Y (26.08.2026) — **משתני הצבע לא הוגדרו מחדש בתמה הבהירה.**
   ‎--text:#9aa3b8‎ נשאר מ-‎:root‎, ולכן כל אלמנט שהשתמש בו נצבע אפור-כחלחל
   על רקע לבן: **2.52:1**. זה לא היה באג נקודתי אלא **17 סלקטורים בעמוד
   אחד** — הכשל הכי נפוץ בכל האתר. התמה הבהירה כיסתה חלק מהמקרים בכללים
   ספציפיים (‎body‎, ‎.hero-sub‎, ‎.ffld label‎…) ופספסה את כל השאר.
   מכאן והלאה המשתנים עצמם מוגדרים בשתי התמות. */
html[data-theme="light"]{
  --text:#5d7287;          /* 4.60:1 על לבן  (היה 2.52) */
  --text-bright:#33506b;   /* 8.19:1 */
  --heading:#0A2A47;       /* 14.6:1 */
  --blue:#0b7caf;          /* 4.65:1 כטקסט על לבן · 4.60:1 כרקע מתחת לטקסט לבן */
}
html[data-theme="light"] body{color:#5C7891}
html[data-theme="light"] #networkCanvas{display:block;opacity:0.75}
html[data-theme="light"] .navbar{background:rgba(255,255,255,0.92);border-bottom-color:#E3E9EF}
html[data-theme="light"] .navbar.navbar--top{background:transparent}
html[data-theme="light"] .navbar-links{border-top-color:#eef2f7}
html[data-theme="light"] .navbar-links a{color:#5C7891}
html[data-theme="light"] .navbar-links a:hover{background:rgba(14,165,233,0.08);color:#0A2A47;box-shadow:none}
html[data-theme="light"] .navbar.navbar--top .navbar-links a:not(.navbar-cta){background:#fff;border-color:#E3E9EF;color:#0A2A47;box-shadow:0 2px 10px rgba(10,42,71,0.06);backdrop-filter:none}
html[data-theme="light"] .navbar.navbar--top .navbar-links a:not(.navbar-cta):hover{background:rgba(14,165,233,0.08);border-color:rgba(14,165,233,0.4);color:#0A2A47;text-shadow:none;box-shadow:0 4px 14px rgba(14,165,233,0.15)}
html[data-theme="light"] .navbar-logo img{filter:none}
html[data-theme="light"] .hamburger{color:#0A2A47}
html[data-theme="light"] .ctl-group{background:#f2f6fa;border-color:#E3E9EF}
html[data-theme="light"] .ctl-group button{color:#58738b}
html[data-theme="light"] .ctl-group button.on{color:#fff}
html[data-theme="light"] .hero{background:radial-gradient(900px 420px at 50% -8%,rgba(14,165,233,.07),transparent 60%)}
html[data-theme="light"] .hero h1{color:#0A2A47;text-shadow:none}
html[data-theme="light"] .hero h1 span{color:#0ea5e9;text-shadow:none}
html[data-theme="light"] .hero-sub{color:#5C7891;text-shadow:none}
html[data-theme="light"] .hero-visual img{filter:drop-shadow(0 18px 50px rgba(14,165,233,0.25))}
html[data-theme="light"] .hero-glass-pill{background:#fff;border-color:#E3E9EF;color:#0b7caf;box-shadow:0 2px 12px rgba(10,42,71,0.07)}
html[data-theme="light"] .hero-stats{border-top-color:#E3E9EF}
html[data-theme="light"] .stat-label{color:#5C7891}
html[data-theme="light"] .btn-outline{background:#fff;color:#0A2A47;border-color:#d7e0e9;box-shadow:0 3px 12px rgba(10,42,71,0.08)}
html[data-theme="light"] .btn-outline:hover{background:rgba(14,165,233,0.07);border-color:rgba(14,165,233,0.45);color:#0ea5e9}
html[data-theme="light"] .phrase-card{background:#fff;border-color:#E3E9EF;box-shadow:0 10px 36px rgba(10,42,71,0.09)}
html[data-theme="light"] .phrase-text{color:#0A2A47}
html[data-theme="light"] .phrase-dots span{background:#dbe4ec}
html[data-theme="light"] .phrase-dots span.on{background:#0ea5e9;box-shadow:none}
html[data-theme="light"] .section-header h2{color:#0A2A47}
html[data-theme="light"] .section-header p{color:#5C7891}
html[data-theme="light"] .section-label{background:rgba(14,165,233,0.08);color:#0a75a6;border-color:rgba(14,165,233,0.25)}
html[data-theme="light"] #features,html[data-theme="light"] #why,html[data-theme="light"] #faq{background:transparent}
html[data-theme="light"] #booking,html[data-theme="light"] #pricing,html[data-theme="light"] #contact{background:transparent}
html[data-theme="light"] .service-card,html[data-theme="light"] .why-card,html[data-theme="light"] .price-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#E3E9EF;box-shadow:0 8px 26px -12px rgba(10,42,71,0.12)}
html[data-theme="light"] .service-card:hover,html[data-theme="light"] .why-card:hover,html[data-theme="light"] .price-card:hover{background:#fff;border-color:rgba(14,165,233,0.45);box-shadow:0 20px 44px -16px rgba(10,42,71,0.18),0 0 0 1px rgba(14,165,233,0.2)}
html[data-theme="light"] .service-card h3,html[data-theme="light"] .why-card h3{color:#0A2A47}
html[data-theme="light"] .service-card p,html[data-theme="light"] .why-card p{color:#5C7891}
html[data-theme="light"] .bk-side h2{color:#0A2A47}
html[data-theme="light"] .bk-point{color:#33506b}
html[data-theme="light"] .bk-mock{background:#fff;border-color:#E3E9EF;box-shadow:0 22px 55px rgba(10,42,71,0.14)}
html[data-theme="light"] .bkm-name{color:#0A2A47}
html[data-theme="light"] .bkm-d{color:#33506b;background:#f2f6fa;border-color:#E3E9EF}
html[data-theme="light"] .bkm-d.off{background:transparent;border-color:transparent;color:#5b7994}
html[data-theme="light"] .bkm-d.sel{color:#fff}
html[data-theme="light"] .bkm-slot{color:#33506b;background:#f2f6fa;border-color:#E3E9EF}
/* 🔴 FAB-A11Y — כאן היה ‎{color:#fff}‎ **בלבד**: השורה שמעל קובעת רקע
   ‎#f2f6fa‎ לכל ‎.bkm-slot‎, והמשבצת הנבחרת לא החזירה לעצמה רקע כחול בתמה
   הבהירה. התוצאה: טקסט לבן על אפור בהיר, **1.08:1** — כלומר המשבצת
   שמסמנת את השעה שנבחרה הייתה בפועל בלתי קריאה. באג ויזואלי, לא רק תקן. */
html[data-theme="light"] .bkm-slot.sel{background:var(--blue-solid);border-color:var(--blue-solid);color:#fff}
html[data-theme="light"] .price-amount{color:#0A2A47}
html[data-theme="light"] .price-name{color:#0b7caf}
html[data-theme="light"] .price-pop{color:#fff;background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
html[data-theme="light"] .price-cta{color:#0A2A47;border-color:#d7e0e9}
html[data-theme="light"] .price-cta:hover{color:#0ea5e9}
html[data-theme="light"] .faq-item{background:transparent;border:0;border-bottom:1px solid #E3E9EF;box-shadow:none}
html[data-theme="light"] .faq-item:first-child{border-top:1px solid #E3E9EF}
html[data-theme="light"] .faq-q{color:#0A2A47}
html[data-theme="light"] .faq-q:hover{color:#0ea5e9}
html[data-theme="light"] .faq-a{color:#5C7891}
html[data-theme="light"] #contact h2{color:#0A2A47}
html[data-theme="light"] footer{background:#f2f6fa;color:#5d7287;border-top-color:#E3E9EF}

/* MOBILE */
@media (max-width:768px){
  .navbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(21,22,25,0.97)}
  html[data-theme="light"] .navbar{background:rgba(255,255,255,0.98)}
  .navbar.navbar--top{background:transparent}
  .navbar-row-top{padding:0 14px;min-height:56px}
  /* 2026-08-18: התפריט הנפתח עבר לבלוק MOBILE NAV DRAWER בתחתית הקובץ */
  .hamburger{display:flex;width:30px;height:30px}   /* 2026-08-18: מיושר לגובה הלוגו במובייל */
  .navbar-logo img{height:30px!important}
  .nav-ctl{gap:6px}
  .ctl-group button{padding:6px 9px;font-size:11.5px}
  .hero{padding-top:82px}   /* 2026-08-18 (ניר): הנאבבר במובייל הוא שורה אחת (56px) — 120px השאירו בור ריק */
  .hero h1{font-size:2.1rem}
  .hero-visual img{height:auto;max-height:190px;max-width:88vw}
  .service-card,.why-card,.faq-item,.price-card{transition:opacity .35s ease,transform .35s ease,border-color .3s}
  .hero-stats{flex-wrap:wrap}.stat-item{padding:8px 18px}
  .section-wrap{padding:46px 18px}
}


/* active page in navbar (subpages) */
.nav-active{color:#ffffff!important;background:linear-gradient(180deg,rgba(14,165,233,0.30) 0%,rgba(14,165,233,0.12) 100%)!important;border:1px solid rgba(92,211,247,0.70)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.30),0 0 20px rgba(14,165,233,0.45)!important;text-shadow:0 0 12px rgba(255,255,255,0.90),0 0 28px rgba(56,189,248,0.70)!important;transform:none!important;position:relative!important}
/* 2026-08-16 (Nir): קו ההדגשה מתחת לפריט הפעיל הוסר */
html[data-theme="light"] .nav-active{color:#0A2A47!important;background:rgba(14,165,233,0.12)!important;border-color:rgba(14,165,233,0.45)!important;box-shadow:none!important;text-shadow:none!important}

/* ═══════════ SUBPAGE COMPONENTS (pricing / pages / about / contact / 404) ═══════════ */
.page-head{padding:150px 24px 10px;text-align:center}
.page-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;color:var(--heading);margin-bottom:14px;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.page-head .ph-sub{font-size:1.05rem;color:#c8d8ec;max-width:560px;margin:0 auto;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.9)}
html[data-theme="light"] .page-head h1{color:#0A2A47;text-shadow:none}
html[data-theme="light"] .page-head .ph-sub{color:#5C7891;text-shadow:none}

/* billing cycle toggle */
.cycle-sw{display:flex;justify-content:center;margin:26px 0 8px}
.cycle-sw .inner{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:99px;padding:4px;gap:3px}
.cycle-sw button{font-family:'Rubik',sans-serif;font-size:14px;font-weight:600;color:var(--text);background:none;border:none;border-radius:99px;padding:9px 22px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:7px}
.cycle-sw button.on{background:var(--blue-solid);color:#fff;box-shadow:0 2px 12px rgba(14,165,233,.5)}
.cycle-sw .save{font-size:11px;font-weight:700;background:rgba(56,189,248,.18);color:#5cd3f7;border-radius:20px;padding:2px 8px}
.cycle-sw button.on .save{background:rgba(255,255,255,.2);color:#fff}
html[data-theme="light"] .cycle-sw .inner{background:#f2f6fa;border-color:#E3E9EF}
html[data-theme="light"] .cycle-sw button{color:#58738b}
html[data-theme="light"] .cycle-sw button.on{color:#fff}
html[data-theme="light"] .cycle-sw .save{background:rgba(11,126,178,.12);color:#065f7a}   /* 5.66:1 (היה #5cd3f7 = 1.41) */
html[data-theme="light"] .cycle-sw button.on .save{background:rgba(255,255,255,.24);color:#fff}

/* pricing page cards (extends .price-card) */
.pp-feats{list-style:none;margin:18px 0 22px;padding:0;text-align:start;display:flex;flex-direction:column;gap:10px}
.pp-feats li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-bright);line-height:1.5}
.pp-feats li svg{flex-shrink:0;margin-top:3px;color:#5cd3f7}
.pp-feats li.dim{color:var(--text)}
html[data-theme="light"] .pp-feats li{color:#33506b}
.price-year-note{font-size:12px;color:var(--text);margin-top:6px;min-height:16px}

/* comparison table */
/* ---- plan-comparison table (2026-08-16 redesign): the exact card language —
   same gradient surface, 18px radius, inset highlight, blue-cyan checks, and a
   glowing Pro column mirroring .price-card.pop. Width matches .price-grid (900px). */
.cmp-wrap{max-width:900px;margin:40px auto 0;background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,0.10);border-radius:18px;overflow-x:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55)}
html[data-theme="light"] .cmp-wrap{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#E3E9EF;box-shadow:0 8px 26px -12px rgba(10,42,71,.12)}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:14px 18px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.06);font-size:13.5px}
html[data-theme="light"] .cmp th,html[data-theme="light"] .cmp td{border-bottom-color:#eef2f7}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
.cmp thead th{font-size:15px;font-weight:700;color:var(--heading);background:rgba(14,165,233,.07);padding:16px 18px}
.cmp tbody th{text-align:start;font-weight:500;color:var(--text-bright)}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:rgba(56,189,248,.04)}
html[data-theme="light"] .cmp tbody th{color:#33506b}
html[data-theme="light"] .cmp thead th{color:#0A2A47;background:rgba(14,165,233,.06)}
.cmp td{color:var(--text)}
.cmp td .yes{display:inline-flex;color:#5cd3f7}
.cmp td .yes svg{display:block}
.cmp td b{color:var(--heading);font-size:14px}
html[data-theme="light"] .cmp td b{color:#0A2A47}
html[data-theme="light"] .cmp td .yes{color:#0ea5e9}
/* Pro column (3rd) — the "popular" glow, mirroring .price-card.pop */
.cmp th:nth-child(3),.cmp td:nth-child(3){background:rgba(56,189,248,.06);border-inline-start:1px solid rgba(56,189,248,.22);border-inline-end:1px solid rgba(56,189,248,.22)}
.cmp thead th:nth-child(3){background:rgba(56,189,248,.13)}
.cmp tbody tr:hover td:nth-child(3){background:rgba(56,189,248,.10)}
html[data-theme="light"] .cmp th:nth-child(3),html[data-theme="light"] .cmp td:nth-child(3){background:rgba(14,165,233,.05);border-inline-start-color:rgba(14,165,233,.18);border-inline-end-color:rgba(14,165,233,.18)}
html[data-theme="light"] .cmp thead th:nth-child(3){background:rgba(14,165,233,.10)}
.cmp-pop{display:block;margin:5px auto 0;width:fit-content;font-size:10.5px;font-weight:700;color:#141517;background:linear-gradient(135deg,#5cd3f7,#38bdf8);border-radius:20px;padding:2px 9px;line-height:1.5}
html[data-theme="light"] .cmp-pop{color:#fff;background:linear-gradient(135deg,#0ea5e9,#38bdf8)}

/* forms (contact + pages lead) */
.form-card{max-width:560px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:30px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 40px -18px rgba(0,0,0,.6)}
html[data-theme="light"] .form-card{background:#fff;border-color:#E3E9EF;box-shadow:0 12px 34px -14px rgba(10,42,71,.14)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.ffld{display:flex;flex-direction:column;gap:6px}
.ffld label{font-size:12.5px;font-weight:600;color:var(--text)}
html[data-theme="light"] .ffld label{color:#5C7891}
.ffld input,.ffld textarea,.ffld select{background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:11px;padding:12px 14px;color:var(--heading);font-family:'Rubik',sans-serif;font-size:14.5px;transition:border-color .2s}
/* 🟠 FAB-A11Y — ‎outline:none‎ בלי חלופה נראית. שינוי צבע גבול לבדו אינו
   מספיק ל-2.4.7: הוא נעלם למי שרואה ניגודיות נמוכה, ואינו קיים כלל במצב
   ניגודיות גבוהה של מערכת ההפעלה. נוספה טבעת מפורשת. */
.ffld input:focus,.ffld textarea:focus,.ffld select:focus{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.ffld textarea{min-height:120px;resize:vertical}
html[data-theme="light"] .ffld input,html[data-theme="light"] .ffld textarea,html[data-theme="light"] .ffld select{background:#f8fafc;border-color:#E3E9EF;color:#0A2A47}
.form-send{width:100%;justify-content:center;margin-top:18px;border:none;font-size:16px}
.form-ok{display:none;text-align:center;padding:36px 16px}
.form-ok .ic{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.3);color:#4ade80;font-size:26px}
.form-ok h3{color:var(--heading);font-size:20px;margin-bottom:8px}
html[data-theme="light"] .form-ok h3{color:#0A2A47}
.form-ok p{color:var(--text);font-size:14px}

/* how-it-works steps (pages.html) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:step}
.step-card{position:relative;border-radius:18px;padding:30px 26px 26px;transition:all .4s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,0.10);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55)}
html[data-theme="light"] .step-card{background:#fff;border-color:#E3E9EF;box-shadow:0 8px 26px -12px rgba(10,42,71,.12)}
.step-n{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:#fff;background:linear-gradient(145deg,#38bdf8 0%,#0ea5e9 60%,#0d4f8c 100%);margin-bottom:16px;box-shadow:0 8px 20px -6px rgba(14,165,233,.55);font-family:'Heebo',sans-serif}
.step-card h3{font-size:16.5px;font-weight:700;color:var(--heading);margin-bottom:8px}
html[data-theme="light"] .step-card h3{color:#0A2A47}
.step-card p{font-size:14px;color:#a4b1c8;line-height:1.65}
html[data-theme="light"] .step-card p{color:#5C7891}

/* pages.html example mockups */
.px-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.px-card{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);background:linear-gradient(160deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.025) 55%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 16px 40px -18px rgba(0,0,0,0.55);transition:transform .35s ease,box-shadow .35s ease}
.px-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(168,85,247,.30)}
html[data-theme="light"] .px-card{border-color:#E3E9EF;box-shadow:0 12px 34px -14px rgba(10,42,71,.16)}
.px-top{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff}
.px-top .av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.px-top .nm{font-size:14.5px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.px-body{padding:14px 16px 18px;background:var(--bg-card)}
html[data-theme="light"] .px-body{background:#fff}
.px-line{height:8px;border-radius:6px;background:rgba(255,255,255,.09);margin-bottom:8px}
html[data-theme="light"] .px-line{background:#eef2f7}
.px-line.w60{width:60%}.px-line.w80{width:80%}
.px-btn{margin-top:12px;height:32px;border-radius:9px;background:linear-gradient(145deg,#0ea5e9,#38bdf8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:700}
.px-tag{display:inline-block;font-size:11.5px;font-weight:600;color:#5cd3f7;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.25);border-radius:20px;padding:3px 10px;margin-top:10px}
html[data-theme="light"] .px-tag{color:#0ea5e9;background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.22)}

/* contact info cards */
/* quick-link buttons (2026-08-16 v2, Nir: "פשוט כפתורים יפים") — compact glass
   pills with a small gradient icon dot; lift + cyan glow on hover */
.ci-grid{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.ci-card{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(160deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 100%);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,0.10);border-radius:999px;padding:10px 20px 10px 12px;color:var(--text-bright);font-size:14px;font-weight:600;text-decoration:none;transition:all .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 8px 22px -12px rgba(0,0,0,0.5)}
.ci-dot{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#38bdf8 0%,#0ea5e9 42%,#0d4f8c 100%);color:#f0f9ff;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(92,211,247,0.4);box-shadow:0 4px 12px -4px rgba(14,165,233,0.55),inset 0 1px 0 rgba(255,255,255,0.4);flex:none}
.ci-card:hover{border-color:rgba(56,189,248,.5);color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 10px 26px -10px rgba(14,165,233,.4)}
html[data-theme="light"] .ci-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#E3E9EF;color:#33506b;box-shadow:0 6px 18px -10px rgba(10,42,71,.1)}
html[data-theme="light"] .ci-card:hover{color:#0A2A47;border-color:rgba(14,165,233,.4);box-shadow:0 10px 24px -10px rgba(14,165,233,.25)}

/* ── עמודי ביטול מנוי והצהרת נגישות (FAB-CANCEL / FAB-A11Y, 26.08.2026) ──
   נבנים על שלד ‎contact.html‎ שניר בחר: ‎.page-head‎ → ‎.form-card‎ → ‎.ci-grid‎.
   המחלקות כאן הן **רק** לתוכן שבתוך הכרטיסים — כותרות משנה, רשימה ושורות
   הגדרה. הצבעים, הרדיוסים והמרווחים נלקחים מאותם טוקנים של הכרטיסים
   הקיימים כדי שהעמודים ייקראו כחלק מאותו אתר ולא כתוספת. */
.cx-h{font-size:19px;font-weight:800;color:var(--heading);margin-bottom:10px;letter-spacing:-.02em}
.cx-p{color:var(--text);font-size:14.5px;line-height:1.85}
.cx-p strong{color:var(--text-bright);font-weight:700}
.cx-cta{margin-top:18px;width:100%;justify-content:center}
/* ⚠️ בלי opacity: הוא מכפיל את הניגודיות בערכו ומפיל טקסט תקין מתחת ל-4.5:1.
   טקסט משני מקבל גוון משלו, לא שקיפות. */
.cx-note{font-size:13px;color:var(--text);margin-top:12px}
.cx-sec{max-width:560px;margin:38px auto 14px;font-size:15px;font-weight:800;color:var(--heading);
  letter-spacing:.02em;padding-bottom:9px;border-bottom:1px solid var(--border)}
.cx-list{max-width:560px;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:13px}
.cx-list li{position:relative;padding-inline-start:22px;color:var(--text);font-size:14.5px;line-height:1.85}
.cx-list li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(145deg,#38bdf8 0%,#0ea5e9 42%,#0d4f8c 100%);
  box-shadow:0 2px 8px -2px rgba(14,165,233,.6)}
.cx-list li strong{color:var(--text-bright);font-weight:700}
.cx-seller{margin-top:0}
.cx-dl{display:flex;flex-direction:column;gap:0}
.cx-row{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
.cx-row:last-child{border-bottom:none}
.cx-row dt{flex:0 0 128px;font-size:12.5px;font-weight:600;color:var(--text)}
.cx-row dd{flex:1;font-size:14.5px;font-weight:600;color:var(--text-bright);word-break:break-word}
.cx-row dd a{color:var(--blue);text-decoration:none}
.cx-row dd a:hover{text-decoration:underline}
html[data-theme="light"] .cx-p strong,html[data-theme="light"] .cx-list li strong,
html[data-theme="light"] .cx-row dd{color:#0A2A47}
html[data-theme="light"] .cx-h,html[data-theme="light"] .cx-sec{color:#0A2A47}
html[data-theme="light"] .cx-sec,html[data-theme="light"] .cx-row{border-color:#E3E9EF}
@media(max-width:560px){
  .cx-row{flex-direction:column;gap:3px}
  .cx-row dt{flex:none}
}

/* about */
.about-body{max-width:680px;margin:0 auto;font-size:16px;line-height:1.9;color:var(--text-bright)}
.about-body p{margin-bottom:18px}
.about-body b{color:var(--heading)}
html[data-theme="light"] .about-body{color:#33506b}
html[data-theme="light"] .about-body b{color:#0A2A47}

/* 404 */
.nf-wrap{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 24px 60px}
.nf-code{font-size:clamp(5rem,16vw,9rem);font-weight:900;font-family:'Heebo',sans-serif;line-height:1;background:linear-gradient(135deg,#5cd3f7,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 10px 40px rgba(14,165,233,.4))}
.nf-wrap h1{font-size:1.6rem;color:var(--heading);margin:14px 0 8px}
html[data-theme="light"] .nf-wrap h1{color:#0A2A47}
.nf-wrap p{color:var(--text);margin-bottom:28px}


/* ── FAB-HERO LOCKUP (2026-08-16): the hero logo rebuilt as the brand's HTML
   horizontal lockup (brand/brand.css) — mark image + live-text wordmark, so it
   is pixel-crisp on every DPR (the old 357px PNG upscaled to 300px CSS = blur
   on retina). Fonts: Archivo (wordmark) + Heebo (Hebrew tagline). */
.fab-hero{display:flex;align-items:center;justify-content:center;gap:26px;direction:ltr}
.fab-hero img{height:170px;width:auto;flex:none;filter:drop-shadow(0 16px 60px rgba(30,134,214,0.55)) drop-shadow(0 0 34px rgba(41,196,245,0.30))}
.fab-hero .fab-text{border-right:3px solid #29C4F5;padding-right:26px;text-align:right}
html[dir="ltr"] .fab-hero{flex-direction:row-reverse}
html[dir="ltr"] .fab-hero .fab-text{border-right:0;padding-right:0;border-left:3px solid #29C4F5;padding-left:26px;text-align:left}
.fab-hero .fab-name{font-family:'Archivo','Heebo',Rubik,sans-serif;font-size:68px;font-weight:800;letter-spacing:-0.02em;line-height:0.95;color:#fff}
.fab-hero .fab-tagline{font-family:'Heebo',Rubik,sans-serif;font-size:17px;font-weight:700;letter-spacing:0.04em;color:#29C4F5;margin-top:12px;direction:rtl;text-align:right}
html[dir="ltr"] .fab-hero .fab-tagline{direction:ltr;text-align:left}
html[data-lang-en] .fab-hero .fab-tagline{direction:ltr}
html[data-theme="light"] .fab-hero .fab-name{color:#0A2A47}
html[data-theme="light"] .fab-hero .fab-tagline{color:#1E86D6}
html[data-theme="light"] .fab-hero .fab-text{border-color:#1E86D6}
html[data-theme="light"] .fab-hero img{filter:drop-shadow(0 18px 50px rgba(30,134,214,0.25))}
@media (max-width:768px){
  .fab-hero{gap:18px}
  .fab-hero img{height:104px}
  .fab-hero .fab-text{border-right-width:3px;padding-right:18px}
  html[dir="ltr"] .fab-hero .fab-text{border-left-width:3px;padding-left:18px;border-right:0;padding-right:0}
  .fab-hero .fab-name{font-size:40px}
  .fab-hero .fab-tagline{font-size:13px;margin-top:6px}
}

/* ── PAGES THEME (2026-08-16, request #5): pages.html gets its own accent —
   violet — so Fabnir Pages reads as its own product inside the family. */
body.theme-pages .page-head .section-label,body.theme-pages .section-label{color:#c084fc;border-color:rgba(168,85,247,0.35);background:rgba(168,85,247,0.10)}
body.theme-pages .btn-primary{background:linear-gradient(145deg,#5b21b6 0%,#8b5cf6 45%,#a78bfa 100%);border-color:rgba(167,139,250,0.4);box-shadow:0 4px 18px rgba(139,92,246,0.45)}
body.theme-pages .service-card:hover,body.theme-pages .why-card:hover{border-color:rgba(168,85,247,0.45)}
body.theme-pages .faq-q:hover{color:#c084fc}
body.theme-pages .faq-arrow{color:#c084fc}
body.theme-pages .faq-item:hover{border-bottom-color:rgba(168,85,247,0.35)}
body.theme-pages .navbar-links a.nav-active{color:#c084fc}
html[data-theme="light"] body.theme-pages .section-label{color:#7c3aed;background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.25)}

/* ── HOMEPAGE PAGES-PROMO (2026-08-16, request #6) ── */
#pages-promo .pp-band{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;padding:38px 40px;border-radius:22px;background:linear-gradient(160deg,rgba(139,92,246,0.10) 0%,rgba(255,255,255,0.03) 45%,rgba(255,255,255,0.01) 100%);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(167,139,250,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 18px 44px -20px rgba(88,28,135,0.5)}
#pages-promo .pp-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:0.08em;color:#c084fc;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.3);border-radius:20px;padding:4px 12px;margin-bottom:14px}
#pages-promo h2{font-size:clamp(22px,3vw,32px);color:var(--heading);margin:0 0 10px;line-height:1.3}
#pages-promo p{margin:0 0 18px;font-size:15px;line-height:1.75}
#pages-promo .pp-points{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
#pages-promo .pp-points li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text-bright)}
#pages-promo .pp-points svg{flex-shrink:0;margin-top:3px;color:#c084fc}
#pages-promo .pp-cta{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;color:#fff;background:linear-gradient(145deg,#5b21b6 0%,#8b5cf6 45%,#a78bfa 100%);border:1px solid rgba(167,139,250,0.4);box-shadow:0 4px 18px rgba(139,92,246,0.45);transition:transform .25s,box-shadow .25s}
#pages-promo .pp-cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(139,92,246,0.55)}
/* 2026-08-18 (ניר): המשבצת הריקה הוחלפה במניפת צילומי אמת של שלושת דפי הדוגמה */
#pages-promo .pp-visual{display:block;text-decoration:none;position:relative;outline:none}
#pages-promo .pp-stack{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:10/8.4}
#pages-promo .pp-shot{position:absolute;width:64%;border-radius:12px;overflow:hidden;border:1px solid rgba(167,139,250,0.35);background:#16171c;box-shadow:0 18px 40px -14px rgba(0,0,0,0.65),0 6px 18px rgba(88,28,135,0.25);transition:transform .45s cubic-bezier(.22,1,.36,1)}
#pages-promo .pp-shot img{width:100%;height:auto;aspect-ratio:76/56;object-fit:cover;object-position:top;display:block}  /* height:auto — מאפס את ה-height attribute כדי ש-aspect-ratio יחתוך */  /* ה-thumb הוא צילום עמוד מלא — חיתוך לראש הדף */
#pages-promo .pp-shot .pp-mini-bar{display:flex;align-items:center;gap:5px;background:#1b1c21;padding:6px 9px;direction:ltr}
#pages-promo .pp-shot .pp-mini-bar i{width:7px;height:7px;border-radius:50%;background:#3a3d46;display:block}
#pages-promo .pp-shot .pp-mini-bar i:nth-child(1){background:#ff5f57}#pages-promo .pp-shot .pp-mini-bar i:nth-child(2){background:#febc2e}#pages-promo .pp-shot .pp-mini-bar i:nth-child(3){background:#28c840}
#pages-promo .pp-shot.s1{top:4%;inset-inline-start:0;transform:rotate(4deg);z-index:1}
#pages-promo .pp-shot.s2{top:0;inset-inline-end:0;transform:rotate(-3deg);z-index:2}
#pages-promo .pp-shot.s3{bottom:9%;inset-inline-start:18%;transform:rotate(-1deg);z-index:3;box-shadow:0 26px 54px -16px rgba(0,0,0,0.75),0 10px 26px rgba(88,28,135,0.35)}
#pages-promo .pp-visual:hover .pp-shot.s1{transform:rotate(5.5deg) translateY(-4px)}
#pages-promo .pp-visual:hover .pp-shot.s2{transform:rotate(-4.5deg) translateY(-4px)}
#pages-promo .pp-visual:hover .pp-shot.s3{transform:rotate(0deg) translateY(-6px) scale(1.02)}
#pages-promo .pp-stack-cta{position:absolute;bottom:-2%;inset-inline-end:2%;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:99px;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c3aed,#a78bfa);border:1px solid rgba(196,181,253,0.5);box-shadow:0 8px 22px rgba(124,58,237,0.45);transition:transform .3s}
#pages-promo .pp-visual:hover .pp-stack-cta{transform:translateY(-2px) scale(1.04)}
html[data-theme="light"] #pages-promo .pp-band{background:linear-gradient(160deg,rgba(124,58,237,0.06),#fff 55%);border-color:rgba(124,58,237,0.18);box-shadow:0 14px 34px -18px rgba(76,29,149,0.18)}
html[data-theme="light"] #pages-promo .pp-points li{color:#33506b}
html[data-theme="light"] #pages-promo .pp-shot{border-color:rgba(124,58,237,0.25);background:#fff;box-shadow:0 16px 34px -14px rgba(30,15,60,0.25),0 6px 16px rgba(124,58,237,0.12)}
html[data-theme="light"] #pages-promo .pp-shot .pp-mini-bar{background:#dde3ec}
html[data-theme="light"] #pages-promo .pp-frame .b{background:#eef2f7}
@media (max-width:820px){#pages-promo .pp-band{grid-template-columns:1fr;padding:26px 22px}#pages-promo .pp-stack{max-width:330px;margin-top:8px}}


/* navbar login (2026-08-16, request Nir): the quiet twin of the CTA — every
   SaaS site pairs "sign in" next to "start free". Outlined, calm, premium. */
.navbar-login{display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:9px 18px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--text-bright)!important;border:1px solid rgba(148,163,184,0.35);background:rgba(255,255,255,0.04);transition:all .25s;margin-inline-start:14px}
.navbar-login:hover{border-color:rgba(56,189,248,0.55);color:#5cd3f7!important;background:rgba(56,189,248,0.08);transform:translateY(-1px);box-shadow:0 4px 16px rgba(14,165,233,0.18)}
html[data-theme="light"] .navbar-login{color:#33506b!important;border-color:#d7e0e9;background:#fff}
html[data-theme="light"] .navbar-login:hover{color:#0ea5e9!important;border-color:rgba(14,165,233,0.45);background:rgba(14,165,233,0.05)}
@media (max-width:768px){.navbar-login{width:100%;justify-content:center;margin-inline-start:0;padding:13px}}


/* navbar layout v2 (2026-08-16, Nir): theme+language pills sit BESIDE the logo;
   the sign-in button owns the opposite corner of the top row. The drawer copy
   of sign-in exists for mobile only. */
.nav-brand-group{display:flex;align-items:center;gap:18px}
.navbar-login--top{margin-inline-start:0}
.navbar-login--drawer{display:none!important}
@media (max-width:768px){
  .nav-brand-group{gap:8px}
  .nav-ctl{gap:5px}
  .ctl-group{padding:2px}
  .navbar-login--top{display:none!important}   /* corner is tight on mobile — login lives in the drawer */
  .navbar-login--drawer{display:inline-flex!important;width:100%;justify-content:center;margin-inline-start:0;padding:13px}
}

/* navbar layout v3 (2026-08-16): pills join the sign-in button in the corner;
   the logo stands alone on the brand side */
.nav-corner{display:flex;align-items:center;gap:12px}
@media (max-width:768px){.nav-corner{gap:6px}}


/* ═══ PAGES THEME — FULL VIOLET PASS (2026-08-16, Nir: אחידות!) ══════════════
   Every blue accent inside pages.html content flips to the Pages violet:
   icon tiles, step numbers, checks, pills, outline-button hovers, focus rings.
   (The global navbar/CTA chrome stays brand-blue site-wide.) */
body.theme-pages .why-icon,body.theme-pages .service-icon{background:linear-gradient(145deg,#a78bfa 0%,#8b5cf6 42%,#4c1d95 100%);border-color:rgba(196,181,253,0.4);box-shadow:0 8px 20px -6px rgba(139,92,246,0.55),inset 0 1px 0 rgba(255,255,255,0.45)}
body.theme-pages .step-n{background:linear-gradient(145deg,#a78bfa 0%,#8b5cf6 60%,#4c1d95 100%);box-shadow:0 8px 20px -6px rgba(139,92,246,.55)}
body.theme-pages .hero-glass-pill svg{color:#c084fc}
body.theme-pages .btn-outline:hover{background:rgba(139,92,246,0.15);border-color:rgba(167,139,250,0.5);color:#c084fc;box-shadow:inset 0 1px 0 rgba(167,139,250,0.28),0 8px 28px rgba(139,92,246,0.28)}
body.theme-pages .px-btn{background:linear-gradient(145deg,#5b21b6 0%,#8b5cf6 45%,#a78bfa 100%);border-color:rgba(167,139,250,0.4);box-shadow:0 4px 14px rgba(139,92,246,0.45)}
body.theme-pages .px-tag{color:#c084fc;background:rgba(168,85,247,0.12);border-color:rgba(168,85,247,0.3)}
body.theme-pages .ffld input:focus,body.theme-pages .ffld select:focus,body.theme-pages .ffld textarea:focus{border-color:rgba(167,139,250,0.6);box-shadow:0 0 0 3px rgba(139,92,246,0.15);outline-color:#a78bfa}
body.theme-pages .form-send{background:linear-gradient(145deg,#5b21b6 0%,#8b5cf6 45%,#a78bfa 100%);box-shadow:0 4px 18px rgba(139,92,246,0.45)}
body.theme-pages .form-send::after{background:linear-gradient(145deg,#4c1d95,#8b5cf6,#c4b5fd)}
body.theme-pages .btn-primary::after{background:linear-gradient(145deg,#4c1d95,#8b5cf6,#c4b5fd)}
body.theme-pages a:not(.navbar-cta):not(.navbar-login):not(.btn){color:inherit}
html[data-theme="light"] body.theme-pages .why-icon,html[data-theme="light"] body.theme-pages .service-icon{background:linear-gradient(145deg,#a78bfa 0%,#7c3aed 42%,#4c1d95 100%)}
html[data-theme="light"] body.theme-pages .step-n{background:linear-gradient(145deg,#a78bfa 0%,#7c3aed 60%,#4c1d95 100%)}
html[data-theme="light"] body.theme-pages .btn-outline:hover{background:rgba(124,58,237,0.07);border-color:rgba(124,58,237,0.45);color:#7c3aed}
html[data-theme="light"] body.theme-pages .px-tag{color:#7c3aed;background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.25)}


/* ═══ PAGES DEMOS (2026-08-17): the conversion section — real full-page demo
   shots inside browser frames; click opens a scrollable lightbox of the full
   page. This replaces the old placeholder px-cards. ═══ */
.pxd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:8px}
.pxd-card{cursor:pointer;outline:none;transition:transform .3s}
.pxd-card:hover{transform:translateY(-6px)}
.pxd-card:focus-visible .pxd-frame{box-shadow:0 0 0 3px rgba(167,139,250,.55)}
.pxd-frame{position:relative;border-radius:14px;overflow:hidden;background:#0e0f12;box-shadow:0 18px 44px -18px rgba(0,0,0,.65);transition:box-shadow .3s}
.pxd-card:hover .pxd-frame{box-shadow:0 26px 60px -18px rgba(139,92,246,.45)}
.pxd-bar{display:flex;align-items:center;gap:6px;background:#1b1c21;padding:9px 12px;direction:ltr}
.pxd-bar .d{width:10px;height:10px;border-radius:50%}
.pxd-bar .r{background:#ff5f57}.pxd-bar .y{background:#febc2e}.pxd-bar .g{background:#28c840}
.pxd-url{flex:1;text-align:center;font-size:11px;color:#8b93a5;background:rgba(255,255,255,.06);border-radius:6px;padding:3px 12px;margin-inline-start:6px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxd-shot{position:relative;aspect-ratio:760/560;overflow:hidden}
.pxd-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease}
.pxd-card:hover .pxd-shot img{transform:scale(1.03)}
.pxd-hover{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,rgba(10,10,14,0) 0%,rgba(76,29,149,.88) 100%);opacity:0;transition:opacity .3s;pointer-events:none}
.pxd-card:hover .pxd-hover{opacity:1}
.pxd-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 4px 0;flex-wrap:wrap}
.pxd-meta b{display:block;font-size:15px;color:var(--heading)}
.pxd-meta small{color:var(--text);font-size:12.5px}
.pxd-chip{font-size:11px;font-weight:600;color:var(--c,#c084fc);background:color-mix(in srgb,var(--c,#c084fc) 14%,transparent);border-radius:20px;padding:4px 11px;white-space:nowrap}
/* 🟠 FAB-A11Y — הצ'יפים צובעים טקסט בגוון שלהם על רקע של אותו גוון ב-14%.
   בתמה הכהה הרקע כמעט שחור והיחס עובר; בתמה הבהירה הרקע יוצא כמעט לבן
   והטקסט הצבעוני נותר 1.9–2.5:1. ‎--c-ink‎ הוא אותו גוון מוכהה, ומוגדר
   ליד הצבע עצמו ב-HTML. */
html[data-theme="light"] .pxd-chip{color:var(--c-ink,var(--c,#7c3aed));background:color-mix(in srgb,var(--c,#c084fc) 12%,#fff)}
/* ⚠️ FAB-A11Y — היה כאן ‎opacity:.85‎. שקיפות על טקסט מכפילה את הניגודיות
   בערכה: ‎--text‎ תקין ב-4.60:1 יורד ל-3.9. טקסט משני מקבל גוון, לא שקיפות. */
.pxd-note{text-align:center;margin-top:26px;font-size:12.5px;color:var(--text)}
html[data-theme="light"] .pxd-frame{background:#e8ecf2;box-shadow:0 14px 34px -16px rgba(10,42,71,.25)}
html[data-theme="light"] .pxd-bar{background:#dde3ec}
html[data-theme="light"] .pxd-url{color:#5C7891;background:#fff}
html[data-theme="light"] .pxd-meta b{color:#0A2A47}

/* lightbox */
.pxd-lb{position:fixed;inset:0;z-index:11000;background:rgba(8,8,12,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pxd-lb.open{opacity:1;visibility:visible}
.pxd-lb-in{width:min(1000px,96vw);height:min(88vh,1000px);display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.9);transform:translateY(14px) scale(.985);transition:transform .3s}
.pxd-lb.open .pxd-lb-in{transform:none}
.pxd-bar.big{padding:12px 14px;flex:none}
.pxd-bar.big .pxd-url{font-size:12.5px;padding:5px 14px}
.pxd-x{margin-inline-start:8px;width:28px;height:28px;border-radius:8px;border:0;background:rgba(255,255,255,.08);color:#cbd5e1;font-size:14px;cursor:pointer;flex:none;transition:background .2s}
.pxd-x:hover{background:rgba(255,95,87,.85);color:#fff}
.pxd-lb-scroll{flex:1;overflow-y:auto;background:#fff;overscroll-behavior:contain;scrollbar-width:thin}
.pxd-lb-scroll img{width:100%;display:block}
@media (max-width:640px){.pxd-lb{padding:10px}.pxd-lb-in{width:100%;height:94vh}}


/* ═══════════ MOBILE NAV DRAWER (2026-08-18, בקשת ניר) ═══════════════════════
   מועתק מהתפריט של אתר FiberFix: מגירה שנשלפת מהצד של כפתור ההמבורגר —
   שמאל בעברית (RTL), ימין באנגלית (LTR) — עם פריטים ככפתורים מלאים.
   כפתורי השפה והתמה יורדים לתחתית המגירה: shared.js מזיז את אלמנט ‎.nav-ctl‎
   עצמו (לא משכפל — אותם ID-ים ש-fabSetTheme/fabApplyLang מסתמכים עליהם).
   כל הבלוק בתוך @media(max-width:768px) — הדסקטופ לא נגע. ══════════════════ */
.nav-scrim{display:none}
.nav-drawer-ctl{display:none}

@media (max-width:768px){
  .navbar-row-top{position:relative;z-index:3}

  /* ההצללה על חצי המסך שלא מכוסה — לחיצה עליה סוגרת */
  .nav-scrim{display:block;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:1;
    background:rgba(6,9,16,0.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
  .nav-scrim.active{opacity:1;visibility:visible}
  html[data-theme="light"] .nav-scrim{background:rgba(10,42,71,0.30)}

  /* המגירה עצמה */
  .navbar .navbar-links,
  .navbar.navbar--top .navbar-links{
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;
    position:fixed!important;top:56px!important;bottom:0!important;
    inset-inline-end:0!important;inset-inline-start:auto!important;
    width:min(78vw,320px)!important;height:auto!important;
    background:linear-gradient(180deg,rgba(24,26,31,0.99) 0%,rgba(15,16,20,0.99) 100%)!important;
    border:0!important;border-inline-start:1px solid rgba(56,189,248,0.24)!important;
    border-start-start-radius:18px!important;
    box-shadow:0 0 60px rgba(0,0,0,0.55),0 0 28px rgba(14,165,233,0.08)!important;
    padding:14px 13px 18px!important;margin:0!important;gap:7px!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    transform:translateX(-106%)!important;                       /* RTL: נסתר משמאל */
    transition:transform .32s cubic-bezier(.22,1,.36,1)!important;
    animation:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    z-index:2!important}
  html[dir="ltr"] .navbar .navbar-links,
  html[dir="ltr"] .navbar.navbar--top .navbar-links{transform:translateX(106%)!important}  /* LTR: נסתר מימין */
  .navbar .navbar-links.active,
  .navbar.navbar--top .navbar-links.active,
  html[dir="ltr"] .navbar .navbar-links.active,
  html[dir="ltr"] .navbar.navbar--top .navbar-links.active{transform:translateX(0)!important}
  html[data-theme="light"] .navbar .navbar-links,
  html[data-theme="light"] .navbar.navbar--top .navbar-links{
    background:linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%)!important;
    border-inline-start-color:rgba(14,165,233,0.28)!important;
    box-shadow:0 0 50px rgba(10,42,71,0.18)!important}

  /* פריטי התפריט — כפתורים אטומים, לא קישורים שקופים */
  .navbar .navbar-links a:not(.navbar-cta):not(.navbar-login){
    width:100%!important;text-align:center!important;
    background:rgba(255,255,255,0.045)!important;
    border:1px solid rgba(148,180,255,0.12)!important;
    border-radius:12px!important;
    padding:13px!important;font-size:15.5px!important;font-weight:600!important;
    color:#dce8f8!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)!important;
    text-shadow:none!important;transform:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .navbar .navbar-links a:not(.navbar-cta):not(.navbar-login):active{
    background:rgba(14,165,233,0.20)!important;border-color:rgba(56,189,248,0.50)!important;color:#fff!important}
  html[data-theme="light"] .navbar .navbar-links a:not(.navbar-cta):not(.navbar-login){
    background:#fff!important;border-color:#E3E9EF!important;color:#0A2A47!important;
    box-shadow:0 1px 4px rgba(10,42,71,0.05)!important}
  html[data-theme="light"] .navbar .navbar-links a:not(.navbar-cta):not(.navbar-login):active{
    background:rgba(14,165,233,0.10)!important;border-color:rgba(14,165,233,0.45)!important}

  /* הדף הפעיל */
  .navbar .navbar-links a.nav-active:not(.navbar-cta){
    background:linear-gradient(135deg,rgba(14,165,233,0.30) 0%,rgba(56,189,248,0.16) 100%)!important;
    border-color:rgba(92,211,247,0.60)!important;color:#fff!important;
    box-shadow:0 2px 16px rgba(14,165,233,0.28),inset 0 1px 0 rgba(255,255,255,0.16)!important;
    text-shadow:none!important}
  body.theme-pages .navbar .navbar-links a.nav-active:not(.navbar-cta){
    background:linear-gradient(135deg,rgba(139,92,246,0.30) 0%,rgba(196,181,253,0.16) 100%)!important;
    border-color:rgba(167,139,250,0.60)!important;
    box-shadow:0 2px 16px rgba(139,92,246,0.28),inset 0 1px 0 rgba(255,255,255,0.16)!important}
  html[data-theme="light"] .navbar .navbar-links a.nav-active:not(.navbar-cta){
    background:rgba(14,165,233,0.12)!important;border-color:rgba(14,165,233,0.45)!important;color:#0A2A47!important;
    box-shadow:none!important}

  /* התחברות + CTA בתוך המגירה */
  .navbar .navbar-links .navbar-login--drawer{
    width:100%!important;justify-content:center!important;margin:5px 0 0!important;
    padding:12px!important;border-radius:12px!important;font-size:15px!important}
  .navbar .navbar-links .navbar-cta{
    margin:5px 0 0!important;width:100%!important;justify-content:center!important;
    padding:13px!important;font-size:15.5px!important;border-radius:12px!important;transform:none!important}

  /* מגש שפה + תמה בתחתית המגירה */
  /* 2026-08-18 (ניר): המגש עלה לראש המגירה, שתי הקבוצות זו לצד זו, פילים קטנים */
  .nav-drawer-ctl{display:block;margin:0 0 12px;padding:0 0 12px;
    border-bottom:1px solid rgba(148,180,255,0.14)}
  .nav-drawer-ctl:empty{display:none}
  html[data-theme="light"] .nav-drawer-ctl{border-bottom-color:#E7EDF3}
  .nav-drawer-ctl .nav-ctl{display:flex;flex-direction:row;align-items:center;gap:7px;width:100%}
  /* 2026-08-18 (ניר): ארבעת הכפתורים בגודל זהה — שתי הקבוצות חולקות את הרוחב שווה בשווה */
  .nav-drawer-ctl .ctl-group{flex:1 1 0;border-radius:10px;padding:3px;gap:3px;
    background:rgba(255,255,255,0.045);border:1px solid rgba(148,180,255,0.12)}
  .nav-drawer-ctl .ctl-group button{flex:1 1 0;justify-content:center;height:30px;padding:0 6px;font-size:12px;border-radius:8px}
  html[data-theme="light"] .nav-drawer-ctl .ctl-group{background:#f4f8fb;border-color:#E3E9EF}
  /* התחברות — בראש המגירה, מתחת לכפתורים */
  .nav-drawer-ctl .navbar-login--drawer{display:inline-flex!important;width:100%;justify-content:center;
    margin:14px 0 0!important;padding:11px!important;border-radius:11px!important;font-size:14.5px!important}  /* 18.08: ריווח מהפילים */

  /* נעילת גלילת הרקע כשהמגירה פתוחה */
  body.nav-open{overflow:hidden}
}

/* ── אייקון התחברות פרמיום בפס העליון, לצד ההמבורגר (2026-08-18, ניר) — מובייל בלבד ── */
.nav-login-ic{display:none}
@media (max-width:768px){
  .nav-corner{display:none}  /* הפינה מתרוקנת במובייל — הפילים במגירה וההתחברות הפכה לאייקון */
  /* 2026-08-18 (ניר): כמו ההמבורגר — אייקון קווי נקי, בלי רקע ובלי מסגרת, אותו צבע ואותו משקל קו */
  .nav-login-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
    color:var(--text-bright);text-decoration:none;margin-inline-end:8px;margin-inline-start:auto;  /* מצמיד אותו להמבורגר בקצה */
    background:none;border:none;transition:transform .2s,color .2s}
  .nav-login-ic:active{transform:scale(0.92);color:#38bdf8}
  .nav-login-ic svg{display:block;width:26px;height:26px}  /* מסה אופטית זהה לקווי ההמבורגר */
  html[data-theme="light"] .nav-login-ic{color:#0A2A47}
}