/* ══════════════════════════════════════════════════════════
   FELDMAN SYSTEMS — Premium Design System
   Palette locked: F4F7FA · FFFFFF · 0A1128 · 0F172A · 334155
                   00D2FF · 0F5C96 · E2E8F0
   Headings: Heebo · Body: Assistant · RTL
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --primary:#0A1128;
  --primary-2:#0F172A;
  --text:#334155;
  --accent:#00D2FF;
  /* One accent cannot serve both surfaces. #00D2FF measures 10.4:1 on the navy
     sections — bright, cold, premium — but only 1.8:1 on white, which is why the
     old teal was pushed darker and ended up muddy. So: cyan on dark, deep ocean
     blue on light. Same family, each legible where it lives. */
  --accent-2:#00D2FF;     /* accents on DARK surfaces — 10.4:1 on navy */
  --border:#E2E8F0;
  /* #489FDF stays the brand blue for glows, icons and accents. Buttons carry
     white label text, and white on #489FDF measures 2.88:1 — WCAG AA wants 4.5.
     #2A72AD measures 5.11:1 and reads as the same blue at a glance. */
  --btn:#2A72AD;          /* buttons / CTAs — passes AA with white text */
  --btn-lt:#489FDF;       /* brand blue — glows, icons, decorative only */
  --btn-45:rgba(42,114,173,.45);
  --eye-ink:#0F5C96;      /* accents on LIGHT surfaces — 7.0:1 on white */

  /* derived (opacity only — no new hues) */
  --a-08:rgba(0,210,255,.08);
  --a-14:rgba(0,210,255,.14);
  --a-28:rgba(0,210,255,.28);
  --a-45:rgba(0,210,255,.45);
  --g-10:rgba(15,92,150,.10);   /* soft blue tint for chips on light */
  --g-40:rgba(0,210,255,.40);   /* cyan glow on dark */
  --b-30:rgba(15,92,150,.30);   /* hairline blue border on light */
  --m-check:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6.5 9.2 17.3 4 12.1"/></svg>');
  --ink-04:rgba(10,17,40,.04);
  --ink-08:rgba(10,17,40,.08);
  --ink-14:rgba(10,17,40,.14);
  --lite-08:rgba(226,232,240,.08);
  --lite-16:rgba(226,232,240,.16);
  --lite-70:rgba(226,232,240,.70);
  --veil:rgba(255,255,255,.82);

  --sh-s:0 1px 2px var(--ink-04),0 2px 8px var(--ink-04);
  --sh-m:0 6px 16px var(--ink-04),0 14px 32px var(--ink-08);
  --sh-l:0 14px 30px var(--ink-08),0 34px 68px var(--ink-14);
  --sh-a:0 14px 40px -12px var(--btn-45);

  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:44px;--s6:64px;--s7:84px;--s8:112px;--s9:148px;

  --r-s:14px;--r-m:20px;--r-l:28px;--r-xl:36px;--r-f:999px;

  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.4,0,.2,1);
  --nav-h:74px;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* The host WordPress theme sets html{overflow-x:hidden}, which turns the root
   into a scroll container and breaks position:sticky (pinned steps section).
   `clip` gives the same overflow protection without that side effect. */
html{overflow-x:clip!important;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 28px);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.8;font-weight:400;
  /* `clip` prevents sideways overflow WITHOUT creating a scroll container,
     which would break position:sticky (the pinned steps section). */
  overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  direction:rtl;text-align:right;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

h1,h2,h3,h4{font-family:'Assistant',system-ui,Arial,sans-serif;color:var(--primary);line-height:1.12;font-weight:800;letter-spacing:normal}
h1{font-size:clamp(34px,4.9vw,62px);font-weight:900}
h2{font-size:clamp(28px,3.5vw,46px)}
h3{font-size:20px;font-weight:700;line-height:1.32}
h4{font-size:16px;font-weight:700;color:var(--primary-2)}
.h3-lg{font-size:clamp(23px,2.5vw,32px);line-height:1.24}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.wrap-n{width:min(860px,92vw)}
.sec{padding:var(--s8) 0;position:relative}
@media(max-width:900px){.sec{padding:var(--s6) 0}}

.skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:300;background:var(--surface);
  padding:12px 22px;border-radius:var(--r-f);box-shadow:var(--sh-m);color:var(--primary);font-weight:700}
.skip:focus{inset-inline-start:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* subtle grain overlay for depth */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(var(--ink-04) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:multiply}

/* scroll progress */
.progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--btn-lt));box-shadow:0 0 14px var(--a-45)}

/* ═══════ NAV ═══════ */
.nav{position:fixed;inset-inline:0;top:0;z-index:150;padding:34px 0 0;transition:padding .4s var(--e)}
.nav.on{padding:14px 0 0}
/* WP admin bar offset (logged-in preview only) */
body.admin-bar-showing .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar-showing .nav{top:46px}}
.nav-in{width:min(var(--wrap),95vw);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;gap:var(--s3);
  background:var(--veil);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--border);border-radius:var(--r-f);padding-inline:22px 10px;box-shadow:var(--sh-s);
  transition:box-shadow .4s var(--e),background .4s var(--e),border-color .4s var(--e)}
.nav.on .nav-in{box-shadow:var(--sh-m);background:var(--surface);border-color:var(--a-28)}
/* The logo is one inlined SVG symbol reused in both places. Its wordmark is set to
   `currentColor`, so the same asset serves the white header and the navy footer by
   changing `color` — no second file, no swapping src, and the multi-colour brand
   mark stays exactly as supplied. */
.brand{flex:0 0 auto;display:flex;align-items:center;color:#063049}
.lg{display:block;height:34px;width:auto;aspect-ratio:1069.703/145.19}
.nav-links{display:flex;gap:2px;flex:1 1 auto;justify-content:center}
.nav-links a{position:relative;padding:9px 15px;border-radius:var(--r-f);font-size:15.5px;font-weight:600;
  font-family:'Assistant',sans-serif;color:var(--primary);transition:color .3s var(--e-io)}
.nav-links a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e)}
.nav-links a:hover::after,.nav-links a.cur::after{transform:scaleX(1)}
.nav-act{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-f);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--primary);border-radius:2px;transition:transform .35s var(--e),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:4px;width:min(var(--wrap),95vw);margin:10px auto 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:14px;box-shadow:var(--sh-m)}
.mnav.open{display:flex;animation:drop .4s var(--e)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
.mnav a{padding:14px 16px;border-radius:var(--r-s);font-weight:600;font-family:'Assistant',sans-serif;color:var(--primary)}
.mnav a:hover{background:var(--a-08)}
.mnav .btn{margin-top:6px;justify-content:center}
@media(max-width:1120px){.nav-links{display:none}.burger{display:flex}.nav-act .btn{display:none}}

/* ── mega menu ── */
.has-fsmega{position:relative}
.fsmega-trig{position:relative;display:flex;align-items:center;gap:5px;padding:9px 15px;border-radius:var(--r-f);
  font-size:15.5px;font-weight:600;font-family:'Assistant',sans-serif;color:var(--primary);cursor:pointer;
  transition:color .3s var(--e-io)}
.fsmega-trig::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e)}
.fsmega-ar{width:13px;height:13px;transition:transform .35s var(--e)}
.has-fsmega:hover .fsmega-trig::after,.fsmega-trig[aria-expanded="true"]::after{transform:scaleX(1)}
.fsmega-trig[aria-expanded="true"] .fsmega-ar{transform:rotate(180deg)}

.fsmega{position:absolute;top:calc(100% + 16px);inset-inline-start:50%;transform:translate(50%,10px);
  width:min(760px,88vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-l);padding:26px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--e-io),transform .3s var(--e-io),visibility .3s}
.fsmega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(50%,0)}
.fsmega-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px 22px}
.fsmega-col{display:flex;flex-direction:column;gap:2px}
.fsmega-h{font-family:'Assistant',sans-serif;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--eye-ink);margin-bottom:6px}
.fsmega-h2{margin-top:14px}
.fsmega-item{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:var(--r-s);
  transition:background .25s var(--e-io)}
.fsmega-item:hover{background:var(--a-08)}
.fsmega-item b{display:block;font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;color:var(--primary)}
.fsmega-item em{display:block;font-size:12.5px;color:var(--text);font-style:normal;margin-top:1px;line-height:1.4}
.fsmega-item-sm em{display:none}
.fsmega-ic{flex:0 0 auto;width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border)}
.fsmega-ic svg{width:16px;height:16px;fill:none;stroke:var(--primary-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fsmega-item:hover .fsmega-ic{background:var(--accent);border-color:var(--accent)}
.fsmega-item:hover .fsmega-ic svg{stroke:var(--primary)}

.fsmega-promo{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;min-height:220px;
  border:1px solid var(--border)}
.fsmega-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.fsmega-promo:hover img{transform:scale(1.06)}
.fsmega-promo-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  padding:18px;background:linear-gradient(0deg,rgba(10,17,40,.92) 10%,rgba(10,17,40,.15) 70%,transparent)}
.fsmega-promo-in b{font-family:'Assistant',sans-serif;color:#FFFFFF;font-size:16px;font-weight:800;line-height:1.25}
.fsmega-promo-in em{color:var(--lite-70);font-size:12.5px;font-style:normal;line-height:1.4}
.fsmega-promo-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--accent);
  font-family:'Assistant',sans-serif;font-size:13px;font-weight:700}
.fsmega-promo-cta svg{width:14px;height:14px}

@media(max-width:1120px){.has-fsmega{display:none}}

/* ── nav: 8 items → tighter spacing ── */
.nav-links a,.fsmega-trig{padding:9px 11px;font-size:15px}
.nav-links a::after,.fsmega-trig::after{inset-inline:11px}
@media(max-width:1380px){.nav-links a,.fsmega-trig{padding:9px 8px;font-size:14.5px}}

/* ── nav actions: divider · BUY NOW · wishlist · cart ── */
.nav-sep{width:1px;height:26px;background:var(--border);flex:0 0 auto;margin-inline:4px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:var(--r-f);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;transition:background .25s var(--e-io)}
.icon-btn:hover{background:var(--a-08)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:var(--primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn b{position:absolute;top:1px;inset-inline-start:1px;min-width:17px;height:17px;border-radius:var(--r-f);
  background:var(--btn);color:#FFFFFF;font-family:'Assistant',sans-serif;font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
@media(max-width:1120px){.nav-sep,.icon-btn{display:none}}

/* ── shop mega: wider, 4 columns ── */
.fsmega-shop{width:min(940px,92vw)}
.fsmega-shop .fsmega-in{grid-template-columns:1fr 1fr 1.15fr}
.fsmega-quick{display:flex;gap:8px;margin-bottom:14px;grid-column:1/-1}
.fsmega-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-f);
  background:var(--bg);border:1px solid var(--border);font-family:'Assistant',sans-serif;font-size:13.5px;
  font-weight:700;color:var(--primary);transition:border-color .25s var(--e-io),background .25s var(--e-io)}
.fsmega-chip:hover{background:var(--a-08);border-color:var(--a-28)}
.fsmega-chip i{width:6px;height:6px;border-radius:50%;background:var(--eye-ink);flex:0 0 auto}
.fsmega-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 20px;
  border-radius:var(--r-f);background:var(--btn);color:#FFFFFF;font-family:'Assistant',sans-serif;
  font-size:14.5px;font-weight:800;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.fsmega-cta:hover{transform:translateY(-2px);box-shadow:var(--sh-a)}

/* ═══════ BUTTONS ═══════ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;min-height:52px;border-radius:var(--r-f);font-family:'Assistant',sans-serif;
  font-weight:700;font-size:16px;white-space:nowrap;border:1px solid transparent;overflow:hidden;
  transition:transform .3s var(--e),box-shadow .3s var(--e),background-color .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.btn>span{position:relative;z-index:2}
.btn-sm{padding:11px 22px;min-height:44px;font-size:15px}
.btn-lg{padding:17px 36px;min-height:58px;font-size:17px}

.btn-pri{background-color:var(--btn);color:#FFFFFF;border-color:var(--btn);box-shadow:var(--sh-a)}
.btn-pri::before{content:"";position:absolute;inset:0;z-index:1;background:var(--primary);
  transform:translateY(101%);transition:transform .42s var(--e)}
.btn-pri:hover{color:#FFFFFF;border-color:var(--primary);transform:translateY(-3px);box-shadow:0 18px 44px -14px var(--btn-45)}
.btn-pri:hover::before{transform:translateY(0)}

.btn-gho{background-color:transparent;color:var(--primary);border-color:var(--primary)}
.btn-gho::before{content:"";position:absolute;inset:0;z-index:1;background:var(--primary);
  transform:translateY(101%);transition:transform .42s var(--e)}
.btn-gho:hover{color:#FFFFFF;transform:translateY(-3px)}
.btn-gho:hover::before{transform:translateY(0)}
.btn .ar{width:17px;height:17px;position:relative;z-index:2;transition:transform .35s var(--e)}
.btn:hover .ar{transform:translateX(-5px)}

.sec-dark .btn-gho,.cta .btn-gho{color:#FFFFFF;border-color:var(--lite-16)}
.sec-dark .btn-gho::before,.cta .btn-gho::before{background:var(--btn)}
.sec-dark .btn-gho:hover,.cta .btn-gho:hover{color:#FFFFFF;border-color:var(--btn)}

/* ═══════ HERO ═══════ */
.hero{position:relative;padding:calc(var(--nav-h) + 96px) 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(70px)}
.orb-1{width:620px;height:620px;top:-14%;inset-inline-end:-8%;background:var(--a-28);animation:float1 20s var(--e-io) infinite alternate}
.orb-2{width:520px;height:520px;top:32%;inset-inline-start:-10%;background:var(--g-10);animation:float2 24s var(--e-io) infinite alternate}
@keyframes float1{to{transform:translate3d(-50px,60px,0) scale(1.12)}}
@keyframes float2{to{transform:translate3d(60px,-40px,0) scale(1.08)}}
.mesh{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--ink-04) 1px,transparent 1px),linear-gradient(90deg,var(--ink-04) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(circle at 62% 34%,#000,transparent 68%);
  mask-image:radial-gradient(circle at 62% 34%,#000,transparent 68%)}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--s6);align-items:center;padding-bottom:var(--s7)}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-f);padding:9px 18px;font-size:14px;font-weight:600;color:var(--primary-2);
  box-shadow:var(--sh-s);margin-bottom:var(--s3)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--eye-ink);position:relative;flex-shrink:0}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--eye-ink);animation:png 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes png{70%,100%{transform:scale(2.8);opacity:0}}

.hero h1{margin-bottom:var(--s3)}
.hero h1 .ln{display:block}
/* headings: flat brand colour — no gradient (gradients to be reintroduced per-heading later) */
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--primary)}
.lead{font-size:19.5px;max-width:56ch;margin-bottom:var(--s4);color:var(--text)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:var(--s6)}

.kpi{display:flex;gap:var(--s6);flex-wrap:wrap}
.kpi div{display:flex;flex-direction:column}
.kpi dt{font-family:'Assistant',sans-serif;font-size:34px;font-weight:900;line-height:1;color:var(--primary)}
.kpi dd{font-size:14.5px;color:var(--text);margin-top:5px}

/* hero visual: controller + orbit */
.hero-vis{position:relative;display:block}
.ctrl{position:relative;width:100%;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--sh-l);z-index:2;will-change:transform}
.ctrl img{width:100%;height:auto;object-fit:contain;display:block}
.ctrl-glow{position:absolute;inset:-26%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--a-45),transparent 66%);filter:blur(46px);animation:pulseGlow 5.5s var(--e-io) infinite alternate}
@keyframes pulseGlow{to{opacity:.55;transform:scale(1.1)}}
.ctrl-tag{position:absolute;inset-inline-start:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(10,17,40,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--lite-16);border-radius:var(--r-f);padding:8px 15px;
  font-size:12.5px;font-weight:700;font-family:'Assistant',sans-serif;color:#FFFFFF;letter-spacing:.04em}
.ctrl-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px var(--g-40);animation:blink 2.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

.orbit{position:absolute;inset:0;z-index:1;pointer-events:none}
.node{position:absolute;width:52px;height:52px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-m);
  animation:bob 6s var(--e-io) infinite alternate}
.node svg{width:22px;height:22px;fill:none;stroke:var(--accent-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.n1{top:4%;inset-inline-end:6%;animation-delay:0s}
.n2{top:26%;inset-inline-start:-2%;animation-delay:.6s}
.n3{bottom:22%;inset-inline-end:-1%;animation-delay:1.2s}
.n4{bottom:2%;inset-inline-start:12%;animation-delay:1.8s}
.n5{top:52%;inset-inline-end:-4%;animation-delay:2.4s}
@keyframes bob{to{transform:translateY(-14px)}}

@media(max-width:1000px){
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  .hero-grid{grid-template-columns:1fr;gap:var(--s5);padding-bottom:var(--s6)}
  .hero-vis{min-height:auto;order:-1}
  .ctrl{width:min(360px,80%)}
  .node{width:44px;height:44px}
}

/* ═══════ ECOSYSTEM STRIP ═══════ */
.eco{position:relative;z-index:2;border-top:1px solid var(--border);background:var(--surface);padding:var(--s5) 0}
.eco-cap{text-align:center;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:var(--s3)}
.eco-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.eco-item{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-s);padding:11px 17px;transition:transform .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e)}
.eco-item svg{width:20px;height:20px;fill:none;stroke:var(--primary-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eco-item img{width:22px;height:22px;object-fit:contain}
.eco-item b{font-family:'Assistant',sans-serif;font-size:14px;font-weight:700;color:var(--primary-2)}
.eco-item:hover{transform:translateY(-4px);border-color:var(--a-45);box-shadow:var(--sh-m)}

/* ═══════ SECTION HEAD ═══════ */
.head{max-width:none;margin-bottom:var(--s6)}
/* headings may run wider than body copy; paragraphs keep a readable measure */
.head h2{max-width:1000px}
.head p{max-width:780px}
.head-c{margin-inline:auto;text-align:center}
.head-c h2,.head-c p{margin-inline:auto}
.eye{display:inline-block;font-family:'Assistant',sans-serif;font-size:13px;font-weight:800;
  color:var(--eye-ink);letter-spacing:.14em;margin-bottom:var(--s2)}
.head h2{margin-bottom:var(--s2)}
.head p{font-size:18.5px}

/* ═══════ SECTION DARK ═══════ */
.sec-dark{background:var(--primary);position:relative;
  /* clip ולא hidden: hidden הופך את הסקשן ל-scroll container ומבטל
     position:sticky של כל צאצא — בדיוק מה ששבר את נעיצת הגלריה
     במובייל. clip חותך אותו דבר בלי ליצור scroll container.       */
  overflow:clip}
.sec-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 84% 6%,var(--a-14),transparent 62%),
             radial-gradient(680px 500px at 8% 84%,var(--g-10),transparent 62%)}
.sec-dark>*{position:relative;z-index:1}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#FFFFFF}
.sec-dark p,.sec-dark li{color:var(--lite-70)}
.sec-dark .eye{color:var(--accent-2)}
.sec-dark .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFFFFF}

/* ═══════ CORE GRID ═══════ */
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cc{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:30px 26px;box-shadow:var(--sh-s);overflow:hidden;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.cc:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:var(--a-28)}
.cc-lg{grid-column:span 2;grid-row:span 2;display:flex;align-items:flex-end;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 14%,#1B2A52 0%,#101B3A 46%,transparent 78%),
    linear-gradient(158deg,#0C1530 0%,#070C1E 100%);
  border-color:transparent;min-height:300px}
/* A black product on a black card has nowhere to go. It now stands on a lit stage:
   a cool spotlight behind it, a floor ellipse under it, and the shot itself pushed
   up in brightness so the chamfers and the LED actually read. */
.cc-stage{position:absolute;inset-inline:0;top:0;height:56%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 46%,rgba(0,210,255,.24) 0%,rgba(0,150,220,.10) 45%,transparent 72%),
    radial-gradient(70% 26% at 50% 84%,rgba(0,210,255,.16) 0%,transparent 70%);
  transition:opacity .6s var(--e),transform .8s var(--e)}
.cc-stage::after{content:"";position:absolute;inset-inline:18%;bottom:6%;height:12px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,210,255,.5),transparent 76%);filter:blur(7px)}
.cc-hero{position:absolute;inset-inline:0;top:0;height:56%;z-index:1;pointer-events:none}
.cc-hero img{width:100%;height:100%;object-fit:contain;object-position:center 46%;
  filter:brightness(1.34) contrast(1.2) saturate(1.06)
         drop-shadow(0 0 30px rgba(0,210,255,.20));
  /* The photo carries its own near-black backdrop, which showed as a rectangle
     over the card. A radial mask could not fix it: with `contain` the painted image
     is far smaller than the element, so the mask's opaque core still covered the
     whole frame. `screen` solves it at the source — dark pixels blended over a dark
     card produce the card, so the backdrop disappears and only the lit product and
     its LED survive. */
  mix-blend-mode:screen;
  transition:transform 1.1s var(--e),filter .6s var(--e)}
.cc-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,17,40,.30) 0%,rgba(10,17,40,.66) 42%,rgba(10,17,40,.94) 76%,var(--primary-2) 100%)}
/* A scrim tied to the copy, not to the image: the product shot is bright metal,
   and a gradient keyed to the image height alone still left the heading sitting
   on a light area. This one follows the text wherever it lands. */
.cc-lg .cc-body::before{content:"";position:absolute;inset:-40px -30px -34px;z-index:-1;
  background:linear-gradient(to top,var(--primary-2) 22%,rgba(10,17,40,.88) 58%,rgba(10,17,40,.45) 82%,transparent 100%)}
.cc-lg:hover .cc-hero img{transform:translateY(-10px) scale(1.05);
  filter:brightness(1.5) contrast(1.22) saturate(1.1)
         drop-shadow(0 0 44px rgba(0,210,255,.34))}
.cc-lg:hover .cc-stage{opacity:1;transform:scale(1.06)}
.cc-lg .cc-body{position:relative;z-index:2}
.cc-lg h3,.cc-lg p{color:#FFFFFF}
.cc-lg p{color:var(--lite-70);max-width:52ch}
.cc-lg .ic{background:var(--a-14);border-color:var(--a-28)}
.cc-lg .ic svg{stroke:var(--accent)}
.cc-shine{position:absolute;top:-40%;inset-inline-end:-16%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,var(--a-28),transparent 68%);filter:blur(40px);pointer-events:none;
  transition:transform .8s var(--e)}
.cc-lg:hover .cc-shine{transform:scale(1.16) translate(-20px,20px)}
.ic{width:52px;height:52px;border-radius:var(--r-s);display:grid;place-items:center;margin-bottom:18px;
  background:var(--a-08);border:1px solid var(--a-14);
  transition:transform .5s var(--e),background .5s var(--e)}
.ic svg{width:23px;height:23px;fill:none;stroke:var(--primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cc:hover .ic{transform:scale(1.09) rotate(-5deg);background:var(--a-28)}
.cc h3{margin-bottom:9px}
.cc p{font-size:15.5px;line-height:1.75}
.mini{margin-top:16px;display:grid;gap:7px}
.mini li{position:relative;padding-inline-start:20px;font-size:14.5px;color:var(--lite-70)}
.mini li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:1000px){.core-grid{grid-template-columns:repeat(2,1fr)}.cc-lg{grid-column:span 2;grid-row:auto}}
@media(max-width:680px){.core-grid{grid-template-columns:1fr}.cc-lg{grid-column:span 1}}

/* ═══════ EXPANDING GALLERY ═══════ */
.gal{display:flex;gap:12px;width:min(1340px,95vw);margin:0 auto;height:520px}
.gp{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--lite-08);cursor:pointer;
  transition:flex-grow .65s var(--e),border-color .5s var(--e)}
/* The six source photos do not match: two are dark architectural interiors, four
   are bright daylight rooms and product shots. Closed cards therefore read as a
   mixed bag rather than one set. A shared grade fixes that at the presentation
   layer — desaturate, darken and lift contrast, then tint everything toward the
   site navy so all six sit in the same colour family. The open card releases
   most of the grade so the photo is seen properly once it matters. */
/* `multiply`, not `color`. A colour blend keeps each pixel's luminance and only
   swaps its hue, so on the bright shots (white kitchen, pale door) the light
   areas stayed light and just went grey — the milky film. Multiplying by navy
   drives those same pixels down toward the navy itself, which reads as depth
   rather than haze, and leaves the already-dark shots almost untouched. */
.gp::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(0deg,rgba(22,34,70,.66),rgba(22,34,70,.66)),var(--bg);
  background-blend-mode:multiply;
  background-size:cover;background-position:center;
  transition:transform .9s var(--e),filter .6s var(--e),background-image .5s var(--e);
  filter:saturate(.74) contrast(1.06) brightness(.88)}
.gp::after{content:"";position:absolute;inset:0;transition:background .6s var(--e);
  background:linear-gradient(to top,rgba(10,17,40,.58) 0%,rgba(11,19,45,.20) 60%,rgba(11,19,45,.10) 100%)}
.gp>*{position:relative;z-index:2}
.gp.is-open{flex-grow:4.6;border-color:var(--a-28)}
/* open: the photograph, clean. No tint, no veil — the grade exists to unify the
   closed strip, and once a card is open the image has earned full fidelity. */
.gp.is-open::before{filter:none;transform:scale(1.03);
  background-image:var(--bg);background-blend-mode:normal}
/* contrast for the copy comes from a scrim that hugs the text, not from washing
   the whole frame */
.gp.is-open::after{background:
  radial-gradient(52% 38% at 50% 52%,rgba(8,14,34,.80) 0%,rgba(8,14,34,.52) 52%,rgba(8,14,34,0) 82%),
  linear-gradient(to top,rgba(8,14,34,.42) 0%,rgba(8,14,34,0) 34%)}
.gp:not(.is-open):hover::before{filter:saturate(.85) contrast(1.04) brightness(.95)}
/* :hover and .is-open carry equal specificity, so the later rule won and the grade
   crept back onto the open card while the pointer sat on it. Scope hover to the
   closed cards, which are the only ones that have a grade to lift. */

/* collapsed: icon pinned bottom-centre */
.gp-ic{position:absolute;inset-inline-start:50%;bottom:24px;transform:translateX(50%);
  width:46px;height:46px;border-radius:var(--r-s);display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid var(--lite-16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:opacity .4s var(--e),transform .5s var(--e);z-index:3}
.gp-ic svg{width:21px;height:21px;fill:none;stroke:#FFFFFF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gp.is-open .gp-ic{opacity:0;transform:translateX(50%) scale(.8);pointer-events:none}

/* Centred with PHYSICAL left + a negative self-translate. The logical
   `inset-inline-start:50%` with `translate(50%,…)` resolved against the RTL
   direction and pushed the pill to the card's right edge — measured 66px off
   centre on a 134px card, with 20px hanging outside and clipped by the card's
   `overflow:hidden`. That is why the words looked cut in half.
   Sized up too: at 16px in a 520px-tall card the label was easy to miss, and a
   closed card has to announce what it is before anyone hovers it. */
.gp-lab{position:absolute;
  left:50%;right:auto;top:50%;bottom:auto;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:'Assistant',sans-serif;
  font-size:23px;font-weight:800;letter-spacing:.01em;color:#FFFFFF;
  white-space:nowrap;padding:22px 11px;border-radius:var(--r-f);
  background:rgba(10,17,40,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 28px -10px rgba(10,17,40,.6);
  text-shadow:0 2px 14px rgba(10,17,40,.9);
  transition:opacity .35s var(--e)}
.gp.is-open .gp-lab{opacity:0}

/* open panel content: icon → title → text → button, centred */
.gp-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px 32px;text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--e) .14s,transform .5s var(--e) .14s;pointer-events:none}
.gp.is-open .gp-in{opacity:1;transform:none;pointer-events:auto}
.gp-in .gp-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-s);
  background:var(--btn);box-shadow:0 10px 30px -8px var(--btn-45)}
.gp-in .gp-mark svg{width:24px;height:24px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gp-in b{display:block;font-family:'Assistant',sans-serif;font-size:clamp(22px,2.1vw,30px);font-weight:800;
  color:#FFFFFF;line-height:1.2;text-shadow:0 2px 16px rgba(10,17,40,.55)}
.gp-in em{display:block;font-style:normal;font-size:16px;line-height:1.65;color:#FFFFFF;
  max-width:44ch;text-shadow:0 1px 12px rgba(10,17,40,.6)}
.gp-more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:12px 26px;border-radius:var(--r-f);
  border:1.5px solid rgba(255,255,255,.85);color:#FFFFFF;font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s var(--e-io),color .3s var(--e-io),border-color .3s var(--e-io)}
.gp-more:hover{background:var(--btn);color:#FFFFFF;border-color:var(--btn)}
.gp-more svg{width:14px;height:14px}

@media(max-width:900px){
  /* הגלריה ננעצת ומתחלפת בגלילה, ולכן כל שש השורות חייבות להיכנס
     למסך יחד. 5 סגורות (72) + פתוחה (296) + מרווחים = 696px —
     נכנס בנוחות ב-844 של אייפון אחרי ההדר. הגבהים הישנים
     (96/330) הגיעו ל-860 ולא היו נעצים בכלל.                     */
  .gal{flex-direction:column;height:auto;gap:8px}
  .gp{height:72px;flex:none;transition:height .6s var(--e)}
  .gp.is-open{height:296px}
  .gal-pin{position:sticky;top:calc(var(--nav-h) + 10px)}
  .gal-steps{position:relative;display:flex;gap:5px;justify-content:center;margin-top:14px}
  .gal-steps i{width:16px;height:3px;border-radius:3px;background:var(--lite-16);
    transition:background .35s var(--e-io),width .35s var(--e-io)}
  .gal-steps i.on{width:26px;background:var(--accent)}
  /* stacked cards on small screens: horizontal label, reset the desktop centring */
  .gp-lab{writing-mode:horizontal-tb;transform:none;left:auto;right:auto;
    inset-inline-start:auto;inset-inline-end:88px;bottom:auto;top:26px;font-size:19px;padding:9px 16px}
  .gp-ic{inset-inline-start:auto;inset-inline-end:24px;transform:none;top:26px;bottom:auto}
  .gp.is-open .gp-ic{inset-inline-start:auto;inset-inline-end:24px;top:26px}
  .gp-in{inset-inline:24px;bottom:24px}
  .gp-in b{font-size:21px}
  .gp-in em{font-size:15px}
}

/* ═══════ AUDIENCE ═══════ */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:var(--s8)}
.ac{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:34px 28px;box-shadow:var(--sh-s);overflow:hidden;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.ac::after{content:"";position:absolute;inset-inline-start:0;top:0;width:3px;height:0;
  background:linear-gradient(180deg,var(--accent),transparent);transition:height .6s var(--e)}
.ac:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:var(--a-28)}
.ac:hover::after{height:100%}
.ac-n{display:block;font-family:'Assistant',sans-serif;font-size:46px;font-weight:900;line-height:1;margin-bottom:16px;
  color:var(--btn)}   /* #00D2FF on white is 1.80:1 — fails even the 3:1 large-text bar */
.ac h3{margin-bottom:10px}
.ac p{font-size:15.5px;margin-bottom:16px}
.ac-tag{display:inline-block;font-size:13px;font-weight:700;font-family:'Assistant',sans-serif;
  color:var(--eye-ink);background:var(--g-10);border-radius:var(--r-f);padding:6px 14px}
@media(max-width:900px){.aud{grid-template-columns:1fr;margin-bottom:var(--s6)}}

/* ═══════ SPLIT ═══════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.split+.split{margin-top:var(--s8)}
.split-copy .eye{margin-bottom:var(--s2)}
.split-copy h2,.split-copy h3{margin-bottom:var(--s3)}
.split-copy p{margin-bottom:var(--s3)}
.fig{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-l)}
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--e)}
.fig:hover img{transform:scale(1.04)}
.fig-fr{position:absolute;inset:0;pointer-events:none;border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--a-28),inset 0 -70px 90px -60px var(--a-45)}
.fig-d{border-color:var(--lite-16)}
.fig figcaption{position:absolute;inset-inline-start:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(10,17,40,.76);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--lite-16);border-radius:var(--r-f);padding:8px 16px;
  font-size:13px;font-weight:700;font-family:'Assistant',sans-serif;color:#FFFFFF}
.fig figcaption i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:blink 2.6s ease-in-out infinite}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--s4)}
  .split+.split{margin-top:var(--s6)}
  .split-flip .fig{order:2}
}

.ticks{display:grid;gap:12px;margin-bottom:var(--s4)}
.ticks li{position:relative;padding-inline-start:34px;font-size:16.5px;color:var(--primary-2);font-weight:500}
.sec-dark .ticks li{color:var(--lite-70)}
/* The tick used to be two rotated CSS borders. `border-inline-start` resolves to
   the RIGHT border under RTL, so the shape came out mirrored — it read as a chevron
   or an arrow, not a check. A real checkmark glyph as a mask has no direction to
   get wrong, and it sits dead-centre in the ring. */
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:4px;width:22px;height:22px;border-radius:50%;
  background:var(--g-10);border:1px solid var(--b-30)}
.ticks li::after{content:"";position:absolute;inset-inline-start:0;top:4px;width:22px;height:22px;
  background-color:var(--eye-ink);
  -webkit-mask:var(--m-check) center/12px 12px no-repeat;
          mask:var(--m-check) center/12px 12px no-repeat}
/* on the navy sections the deep blue disappears — the ring and the check both lift */
.sec-dark .ticks li::before{background:rgba(0,210,255,.12);border-color:rgba(0,210,255,.34)}
.sec-dark .ticks li::after{background-color:var(--accent-2)}

/* ═══════ PROOF ═══════ */
.proof{display:grid;grid-template-columns:1.08fr .92fr;gap:20px;margin-bottom:var(--s5)}
@media(max-width:900px){.proof{grid-template-columns:1fr}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:var(--s8)}
.mc{background:var(--primary-2);border:1px solid var(--lite-08);border-radius:var(--r-m);padding:24px 20px;
  transition:transform .5s var(--e),border-color .5s var(--e)}
.mc:hover{transform:translateY(-6px);border-color:var(--a-45)}
.mc b{display:block;font-family:'Assistant',sans-serif;font-size:30px;font-weight:900;color:var(--accent);line-height:1;margin-bottom:9px}
.mc span{font-size:14.5px;color:var(--lite-70);line-height:1.6}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr);margin-bottom:var(--s6)}}

/* ═══════ PROCESS RAIL ═══════ */
.rail{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;position:relative;padding-top:6px}
/* dashed track */
.rail::before{content:"";position:absolute;top:32px;inset-inline:34px;height:2px;
  background-image:linear-gradient(90deg,var(--border) 0 8px,transparent 8px 16px);background-size:16px 2px}
/* scroll-linked fill + travelling comet head */
.rail::after{content:"";position:absolute;top:31px;inset-inline-start:34px;height:4px;border-radius:4px;
  width:calc((100% - 68px) * var(--p,0));background:linear-gradient(90deg,var(--btn),var(--accent));
  box-shadow:0 0 18px var(--btn-45),0 0 42px var(--btn-45)}
.rail-head{position:absolute;top:26px;inset-inline-start:calc(34px + (100% - 68px) * var(--p,0));width:14px;height:14px;
  border-radius:50%;background:#FFFFFF;border:3px solid var(--btn);z-index:3;
  box-shadow:0 0 0 6px rgba(72,159,223,.18),0 0 26px var(--btn-45);opacity:0;
  transition:opacity .4s var(--e)}
.rail.live .rail-head{opacity:1}

.rs{position:relative;text-align:center}
.rs-n{position:relative;z-index:2;width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);
  font-family:'Assistant',sans-serif;font-weight:800;font-size:16px;color:var(--primary);box-shadow:var(--sh-s);
  transition:background .5s var(--e),border-color .5s var(--e),color .5s var(--e),transform .5s var(--e),box-shadow .5s var(--e)}
/* halo ring that scales in when the step activates */
.rs-n::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--btn);
  opacity:0;transform:scale(.75);transition:opacity .55s var(--e),transform .55s var(--e)}
.rs h3{margin-bottom:5px;font-size:15.5px;transition:color .5s var(--e)}
.rs p{font-size:13.5px;line-height:1.55;color:var(--text)}
/* activated state — set by JS as the line passes each node */
.rs.on .rs-n{background:var(--btn);border-color:var(--btn);color:#FFFFFF;
  transform:translateY(-4px) scale(1.06);box-shadow:0 16px 36px -12px var(--btn-45)}
.rs.on .rs-n::before{opacity:.55;transform:scale(1)}
.rs.on h3{color:var(--btn)}
.rs:hover .rs-n{transform:translateY(-6px) scale(1.1);box-shadow:0 18px 40px -12px var(--btn-45)}

@media(max-width:1100px){
  .rail{grid-template-columns:repeat(4,1fr);gap:28px}
  .rail::before,.rail::after,.rail-head{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rail::after{--p:1}
  .rail-head{display:none}
  .rs .rs-n{background:var(--btn);border-color:var(--btn);color:#FFFFFF}
}
@media(max-width:620px){.rail{grid-template-columns:repeat(2,1fr)}}

/* ═══════ ACCORDION ═══════ */
.acc{display:grid;gap:12px}
.ai{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--sh-s);transition:border-color .35s var(--e),box-shadow .35s var(--e)}
.ai.open{border-color:var(--a-28);box-shadow:var(--sh-m)}
.ab{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;
  font-family:'Assistant',sans-serif;font-weight:700;font-size:17px;color:var(--primary);min-height:68px}
.ab i{position:relative;width:30px;height:30px;border-radius:50%;background:var(--a-08);flex-shrink:0;
  transition:background .35s var(--e),transform .4s var(--e)}
.ab i::before,.ab i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--primary);border-radius:2px;transition:opacity .3s var(--e),background .3s var(--e)}
.ab i::before{width:12px;height:2px}
.ab i::after{width:2px;height:12px}
.ai.open .ab i{background:var(--accent);transform:rotate(90deg)}
.ai.open .ab i::after{opacity:0}
.ap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e)}
.ai.open .ap{grid-template-rows:1fr}
.ap>p{overflow:hidden;padding:0 26px;font-size:16.5px;transition:padding .45s var(--e)}
.ai.open .ap>p{padding:0 26px 24px}

/* ═══════ CTA ═══════ */
.cta{position:relative;border-radius:var(--r-xl);padding:var(--s8) var(--s5);text-align:center;overflow:hidden;
  background:linear-gradient(158deg,var(--primary) 0%,var(--primary-2) 60%,var(--primary) 100%);box-shadow:var(--sh-l)}
.cta-glow{position:absolute;top:-52%;inset-inline-start:50%;transform:translateX(50%);width:780px;height:780px;
  border-radius:50%;background:radial-gradient(circle,var(--a-45),transparent 66%);filter:blur(56px);pointer-events:none}
.cta>*{position:relative;z-index:1}
.cta .eye{color:var(--accent-2)}
.cta h2{color:#FFFFFF;margin-bottom:var(--s2)}
.cta p{color:var(--lite-70);font-size:18.5px;max-width:58ch;margin:0 auto var(--s5)}
.cta-act{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--s3)}
.cta-note{font-size:14.5px !important;color:var(--lite-70) !important;margin:0 !important}
@media(max-width:760px){.cta{padding:var(--s7) var(--s3)}.cta-act .btn{width:100%}}

/* ═══════ FOOTER ═══════ */
.ft{background:var(--primary);padding:var(--s7) 0 var(--s4);position:relative;overflow:hidden}
.ft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 400px at 88% 0%,var(--a-08),transparent 60%)}
.ft>*{position:relative;z-index:1}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s7)}
.ft-brand .lg{height:36px;width:auto;margin-bottom:18px;color:#FFFFFF}
/* the white plate existed only because the old logo was a JPG with a white
   background — the SVG is transparent, so it sits on the navy directly */
.ft-brand p{font-size:15.5px;color:var(--lite-70);max-width:46ch}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ft-col h4,.ft-col h3{color:#FFFFFF;margin-bottom:5px;font-size:15px}
.ft-col a,.ft-col span{font-size:15.5px;color:var(--lite-70);transition:color .3s var(--e)}
.ft-col a:hover{color:var(--accent)}
.ft-bot{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--lite-16)}
.ft-bot span{font-size:14px;color:var(--lite-70)}
.ft-legal{display:flex;gap:18px;flex-wrap:wrap}
.ft-legal a{font-size:14px;color:var(--lite-70);transition:color .3s var(--e)}
.ft-legal a:hover{color:var(--accent)}
@media(max-width:880px){.ft-grid{grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s5)}}

/* ═══════ WHATSAPP ═══════ */
.wa{position:fixed;inset-inline-start:22px;bottom:22px;z-index:140;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--eye-ink);color:#FFFFFF;box-shadow:0 12px 32px -8px rgba(15,92,150,.45);
  transition:transform .35s var(--e),background .35s var(--e)}
.wa svg{width:28px;height:28px}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--eye-ink);
  animation:ring 2.8s var(--e-io) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.wa:hover{transform:scale(1.1) translateY(-3px);background:var(--primary)}

/* ═══════ REVEAL ═══════ */
.rv{opacity:0;transform:translateY(26px);filter:blur(7px)}
.rv.in{opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--e),transform .8s var(--e),filter .8s var(--e)}

/* ═══════ REDUCED MOTION ═══════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1 !important;transform:none !important;filter:none !important}
  .gp{flex-grow:1 !important}
  .gp-in{opacity:1 !important;transform:none !important}
  .gp-lab{opacity:0 !important}
}


/* gallery backgrounds */
.gp[data-i="0"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-villa-dusk.jpg")}
.gp[data-i="1"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-smart-kitchen.jpg")}
.gp[data-i="2"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-office-smart.jpg")}
.gp[data-i="3"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-hero-living-room.jpg")}
.gp[data-i="4"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-entryway-panel.jpg")}
.gp[data-i="5"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/07/feldman-devices-set.jpg")}


/* ═══════ SCROLL-PINNED STEPS ═══════ */
/* The heading now sits inside .steps-stick, so heading and slide travel as one
   composition. Previously the heading was outside, scrolled away while the slides
   stayed pinned, and left a lone slide centred in a 945px box — 479px of measured
   dead space between the nav and the content. `top` also has to clear the fixed
   nav, or the pinned block slides underneath it. */
.steps{padding-top:0;padding-bottom:0}
.steps-track{position:relative;height:280vh}
.steps-stick{position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.6vh,34px);
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(28px,4vh,56px)}
.steps-head{margin-bottom:0}
.steps-head h2{margin-bottom:0}
.steps-grid{display:grid;grid-template-columns:56px 1fr 1fr;gap:var(--s5);align-items:center;width:min(var(--wrap),92vw)}

/* 01 / 02 / 03 vertical indicator */
.steps-nums{display:flex;flex-direction:column;align-items:center;gap:0}
.steps-nums li{display:flex;flex-direction:column;align-items:center;gap:0}
.steps-nums li span{font-family:'Assistant',sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--lite-70);opacity:.45;
  transition:opacity .5s var(--e),color .5s var(--e)}
.steps-nums li::after{content:"";width:1px;height:64px;margin:12px 0;background:var(--lite-16);
  transition:background .5s var(--e)}
.steps-nums li:last-child::after{display:none}
.steps-nums li.on span{opacity:1;color:#FFFFFF}
.steps-nums li.done::after{background:var(--btn)}

/* stacked copy panes */
.steps-copy{position:relative;min-height:330px}
.step-pane{position:absolute;inset-inline:0;top:0;opacity:0;transform:translateY(26px);
  pointer-events:none;transition:opacity .55s var(--e),transform .55s var(--e)}
.step-pane.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.step-tag{display:inline-flex;align-items:center;gap:9px;font-family:'Assistant',sans-serif;font-size:13.5px;
  font-weight:700;letter-spacing:.06em;color:var(--lite-70);margin-bottom:var(--s2)}
.step-tag svg{width:18px;height:18px;fill:none;stroke:var(--btn);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step-pane h3{font-size:clamp(27px,3.1vw,40px);font-weight:900;color:#FFFFFF;line-height:1.16;margin-bottom:14px}
.step-pane p{font-size:17px;line-height:1.75;color:var(--lite-70);max-width:46ch;margin-bottom:var(--s3)}

/* stacked media */
.steps-media{position:relative;aspect-ratio:4/3.2;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--lite-16);box-shadow:var(--sh-l)}
.step-fig{position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .7s var(--e),transform .9s var(--e)}
.step-fig.on{opacity:1;transform:none}
.step-fig img{width:100%;height:100%;object-fit:cover}

@media(max-width:960px){
  /* no pinning on small screens — plain stacked cards */
  .steps-track{height:auto}
  .steps-stick{position:static;height:auto;padding:var(--s4) 0}
  .steps-grid{grid-template-columns:1fr;gap:var(--s4)}
  .steps-nums{display:none}
  .steps-copy{min-height:0;display:flex;flex-direction:column;gap:var(--s5)}
  .step-pane{position:relative!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
  .steps-media{aspect-ratio:16/11}
  .step-fig{position:absolute}
  .step-fig:not(.on){opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .step-pane,.step-fig{transition:none}
}

/* ═══════ FEATURED PRODUCTS ═══════ */
.prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.prod-head .head{margin-bottom:0;text-align:right}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:980px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.prod-grid{grid-template-columns:1fr}}
.pc{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.pc:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:var(--btn)}
.pc-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.pc:hover .pc-media img{transform:scale(1.07)}
.pc-badge{position:absolute;top:14px;inset-inline-end:14px;z-index:2;padding:6px 13px;border-radius:var(--r-f);
  background:var(--btn);color:#FFFFFF;font-family:'Assistant',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.pc-body{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px;flex:1 1 auto}
.pc-body h3{font-size:17px;line-height:1.3}
.pc-body p{font-size:14px;line-height:1.6;color:var(--text);flex:1 1 auto}
.pc-tags{display:flex;flex-wrap:wrap;gap:6px}
.pc-tags span{font-size:11.5px;font-weight:700;font-family:'Assistant',sans-serif;color:var(--eye-ink);
  background:var(--g-10);border-radius:var(--r-f);padding:4px 10px}
.pc-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;padding:12px 18px;
  border-radius:var(--r-f);background:var(--btn);color:#FFFFFF;font-family:'Assistant',sans-serif;
  font-size:14px;font-weight:800;transition:filter .3s var(--e-io)}
.pc-cta:hover{filter:brightness(1.08)}
.pc-cta svg{width:14px;height:14px}
@media(max-width:700px){.prod-head{flex-direction:column;align-items:flex-start}}


/* ═══════ SHOWREEL VIDEO ═══════ */
.reel{position:relative;padding:var(--s8) 0}
.reel-frame{position:relative;width:min(1180px,92vw);margin-inline:auto;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-l);background:var(--primary);
  aspect-ratio:16/9}
.reel-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  display:block;background:var(--primary)}
.reel-facade img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e),filter .5s var(--e)}
.reel-facade:hover img{transform:scale(1.03);filter:brightness(1.04)}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.reel-play{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:var(--btn);color:#FFFFFF;box-shadow:0 18px 50px -12px var(--btn-45);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.reel-play::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);opacity:.65}
.reel-facade:hover .reel-play{transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 24px 60px -12px var(--btn-45)}
.reel-play svg{width:34px;height:34px;margin-left:5px}   /* physical: optical centring of a right-pointing glyph */
.reel-cap{position:absolute;inset-inline-start:26px;bottom:22px;z-index:2;display:flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:var(--r-f);background:rgba(10,17,40,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--lite-16)}
.reel-cap i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:0 0 auto;
  animation:blink 2.6s ease-in-out infinite}
.reel-cap span{font-family:'Assistant',sans-serif;font-size:13.5px;font-weight:700;color:#FFFFFF}
.reel-sound{position:absolute;inset-inline-end:22px;top:22px;z-index:3;width:44px;height:44px;border-radius:var(--r-f);
  display:grid;place-items:center;background:rgba(10,17,40,.55);border:1px solid var(--lite-16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s var(--e-io)}
.reel-sound:hover{background:var(--btn);border-color:var(--btn)}
.reel-sound svg{width:19px;height:19px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.reel{padding:var(--s6) 0}.reel-cap{inset-inline-start:14px;bottom:14px;padding:8px 14px}}


/* ── custom play cursor, video frame only ──
   Two nested elements on purpose. The outer one carries ONLY the pointer
   position and has no transition, so tracking is 1:1 with the mouse. The inner
   one carries the show/hide scale and is free to ease. Both were on a single
   transform before, with `transition:transform .25s` — which meant every mouse
   move became a 250ms eased tween, so the badge crawled after the pointer and
   only settled when the mouse stopped.
   Anchored with physical left/top, not inset-inline-start: the JS measures the
   offset from the frame's LEFT edge, but the page is RTL, so the logical
   property resolved to the RIGHT edge and threw the badge a full frame-width
   off — which is why it only appeared near certain corners. */
.reel-cursor{
  position:absolute;left:0;top:0;width:0;height:0;
  z-index:5;pointer-events:none;
  transform:translate3d(var(--cx,-400px),var(--cy,-400px),0);
  will-change:transform;
}
.reel-cursor-in{
  position:absolute;left:-39px;top:-39px;width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;background:var(--btn);color:#FFFFFF;
  box-shadow:0 14px 40px -10px var(--btn-45);
  opacity:0;transform:scale(.4);
  transition:opacity .2s var(--e-io),transform .3s var(--e);
}
.reel-cursor-in::after{content:"";position:absolute;inset:-11px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6)}
.reel-cursor svg{width:30px;height:30px;margin-left:4px}  /* physical: the glyph points right */
.reel-frame.cur-on .reel-cursor-in{opacity:1;transform:scale(1)}
/* while the pointer is inside, hide the arrow and the static button */
@media(hover:hover) and (pointer:fine){
  .reel-frame,.reel-frame *{cursor:none}   /* the caption and sound chips too, not just the button */
  .reel-frame.cur-on .reel-play{opacity:0;transform:translate(-50%,-50%) scale(.75)}
}
/* touch devices keep the static button and the normal cursor */
@media(hover:none),(pointer:coarse){.reel-cursor{display:none}}

/* ── controller card: lift the black product off the dark card ── */
.cc-hero::before{content:"";position:absolute;inset-inline:8%;top:-6%;height:96%;z-index:0;
  background:radial-gradient(closest-side,rgba(72,159,223,.28),transparent 72%);filter:blur(18px)}
.cc-hero img{position:relative;z-index:1;filter:brightness(1.85) contrast(1.06) saturate(1.05)}
.cc-lg:hover .cc-hero img{filter:brightness(2) contrast(1.08) saturate(1.08)}
.cc-hero::after{background:linear-gradient(to bottom,rgba(10,17,40,.12) 0%,rgba(10,17,40,.62) 68%,var(--primary-2) 100%)}


/* ═══════ HERO SHOT ═══════ */
/* The photo is its own layer, not the section's background-image. As a section
   background at `cover` it was scaled to the full ~1900px viewport, which blew
   the monitor far past its natural size and pushed the rig out of frame. Sized
   to a fixed height instead, the whole setup — monitor, phone, mini-PC — stays
   inside the frame at a sane scale.
   The source JPG (1433x800) has a vignette baked into its edges: corner
   luminance measures ~175 against a ~245 centre. Rather than darken the section
   to hide it, a soft mask feathers those edges to transparent, so the shot
   dissolves into the page and no shadow reads as "inner shadow on the
   container". Content sits between x 8-60% and y 10-89% of the source, so the
   feathers stay clear of the devices. */
/* Optical alignment: the copy is inside .wrap, so it clears the viewport edge by
   the wrap gutter. The photo was pinned to left:0, so it ran flush to the edge —
   air on the right, none on the left. Matching the gutter is not enough on its
   own: the source JPG carries ~8% of empty backdrop before the monitor starts,
   so aligning the *file* to the gutter would push the *monitor* 8% further in
   and the imbalance would just flip. The offset below subtracts that 8% so the
   monitor's edge — not the file's edge — lands on the same gutter as the text. */
.hero-shot{
  --shot-h:700px;                       /* drives width too: the file is 1433x800 */
  --shot-w:calc(var(--shot-h) * 1.77683);
  --gutter:calc((100% - min(var(--wrap),92vw)) / 2);
  position:relative;
  background:var(--bg);
  padding:0;
  overflow:clip;              /* clip, not hidden — hidden creates a scroll container */
}
.hero-shot .hero-bg{display:none}          /* blobs would muddy the photo */
.hero-shot::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:50%;transform:translateY(-50%);   /* physical left: the shot faces right */
  left:max(0px, calc(var(--gutter) - var(--shot-w) * .079));
  height:var(--shot-h);
  width:var(--shot-w);
  background:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-hero-wide-v2.webp") left center/contain no-repeat;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 62%,transparent 78%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 62%,transparent 78%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 91%,transparent 100%);
  mask-composite:intersect;
}
.hero-shot .hero-grid{
  grid-template-columns:1fr;gap:0;
  min-height:clamp(560px,40vw,760px);
  align-content:center;
  padding:calc(var(--nav-h) + 64px) 0 var(--s6);
}
.hero-shot .hero-copy{
  position:relative;z-index:3;
  justify-self:start;        /* inline-start = right in RTL */
  width:min(540px,46%);
}
.hero-shot .eco{position:relative;z-index:3}

@media(max-width:1180px){
  .hero-shot{--shot-h:520px}
  .hero-shot .hero-copy{width:min(500px,56%)}
}
/* mobile — the shot drops below the copy instead of behind it, so nothing
   competes with the headline for contrast */
@media(max-width:760px){
  .hero-shot::before{
    left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);
    height:auto;width:132%;aspect-ratio:1433/800;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 100%);
    mask-composite:add;
  }
  .hero-shot .hero-grid{min-height:0;padding:calc(var(--nav-h) + 48px) 0 300px}
  .hero-shot .hero-copy{width:100%}
}


/* Hero copy is above the fold — it must never depend on a scroll reveal.
   If JS is slow, blocked, or the observer misfires, the headline still shows. */
.hero-shot .hero-copy .rv,
.hero-shot .hero-copy .rv.in{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}


/* ═══════ KNOWLEDGE CENTER ═══════ */
.kc-tabs{display:flex;gap:6px;margin:0 0 var(--s5);padding:6px;border-radius:var(--r-f);
  background:var(--surface);border:1px solid var(--border);width:fit-content;box-shadow:var(--sh-s)}
.kc-tab{padding:11px 26px;border:0;border-radius:var(--r-f);background:none;cursor:pointer;
  font-family:'Assistant',sans-serif;font-size:15.5px;font-weight:700;color:var(--text);
  transition:background .3s var(--e-io),color .3s var(--e-io)}
.kc-tab:hover{color:var(--primary)}
.kc-tab.is-on{background:var(--btn);color:#FFFFFF;box-shadow:0 10px 26px -10px var(--btn-45)}

.kc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.kc-grid[hidden]{display:none}

.kc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);color:inherit;
  transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.kc:hover{transform:translateY(-6px);box-shadow:var(--sh-l);border-color:var(--btn)}
.kc-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.kc-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e)}
.kc:hover .kc-img img{transform:scale(1.05)}

.kc-score{position:absolute;top:14px;left:14px;display:inline-flex;align-items:baseline;gap:1px;
  direction:ltr;   /* a rating is a number, not a sentence — RTL flipped "4.5/5" into "5/4.5" */
  padding:7px 13px;border-radius:var(--r-f);background:var(--btn);color:#FFFFFF;
  font-family:'Assistant',sans-serif;font-size:16px;font-weight:800;line-height:1;
  box-shadow:0 12px 30px -10px var(--btn-45)}
.kc-score em{font-style:normal;font-size:11px;font-weight:600;opacity:.8}

.kc-body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--s4) var(--s4) calc(var(--s4) - 4px)}
.kc-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kc-tag{font-style:normal;font-family:'Assistant',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.02em;color:var(--btn);background:rgba(42,114,173,.12);
  padding:5px 12px;border-radius:var(--r-f)}
.kc-meta em{font-style:normal;font-size:13px;color:var(--text);opacity:.7}
.kc-body b{font-family:'Assistant',sans-serif;font-size:20px;font-weight:800;line-height:1.35;
  color:var(--primary);margin-bottom:10px}
.kc-ex{font-size:15.5px;line-height:1.75;color:var(--text)}

.kc-pc{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.kc-pc i{font-style:normal;position:relative;padding-inline-start:24px;font-size:14px;line-height:1.5;color:var(--text)}
.kc-pc i::before{position:absolute;inset-inline-start:0;top:1px;width:16px;height:16px;
  display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:800;line-height:1}
.kc-pro::before{content:"+";background:rgba(15,92,150,.13);color:var(--eye-ink)}
.kc-con::before{content:"−";background:rgba(10,17,40,.08);color:var(--primary)}

.kc-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:var(--s4);
  font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;color:var(--btn)}
.kc-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e)}
.kc:hover .kc-go svg{transform:translateX(-4px)}   /* physical: RTL reading runs right→left */

@media(max-width:980px){.kc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){
  .kc-grid{grid-template-columns:1fr}
  .kc-tabs{width:100%}
  .kc-tab{flex:1 1 0;padding:11px 10px}
}


/* ═══════ VERTICAL RHYTHM ═══════ */
/* Every section carried an identical 112px top and bottom, which reads as a list
   rather than a hierarchy — nothing tells the eye which sections belong together.
   Related sections now sit closer; the closing CTA gets extra room to land. */
.sec-tight{padding-top:var(--s6)}
#audience,#about,#process,#know{padding-top:var(--s6)}
#contact{padding-top:var(--s9,140px)}

/* ═══════ TRUST STRIP (under the 7-step rail) ═══════ */
/* The rail is ~150px inside a 625px section; the remainder was empty. */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px var(--s4);
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border)}
.trust li{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--text)}
.trust svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--eye-ink);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  padding:3px;border-radius:50%;background:rgba(15,92,150,.11);box-sizing:content-box}

/* ═══════ TESTIMONIALS ═══════ */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.tst{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);padding:var(--s5) var(--s4) var(--s4);box-shadow:var(--sh-s);margin:0;
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.tst:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.tst-stars{font-size:17px;letter-spacing:2px;color:#E8A33D;margin-bottom:14px;direction:ltr}
.tst blockquote{margin:0 0 var(--s4);padding:0;border:0;   /* WoodMart puts a rule on bare blockquotes */
  font-size:16.5px;line-height:1.8;color:var(--text)}
.tst blockquote::before{content:"”";display:block;font-family:'Assistant',sans-serif;font-size:46px;
  line-height:.55;color:var(--btn);opacity:.28;margin-bottom:8px}
.tst figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;
  padding-top:var(--s3);border-top:1px solid var(--border)}
.tst figcaption b{font-family:'Assistant',sans-serif;font-size:16px;font-weight:800;color:var(--primary)}
.tst figcaption span{font-size:14px;color:var(--text);opacity:.75}

@media(max-width:980px){.tst-grid{grid-template-columns:1fr}}


/* ═══════ ECOSYSTEM MARQUEE ═══════ */
/* Two identical tracks side by side; the pair slides left by exactly one track
   width and resets. Because copy #2 sits precisely where copy #1 started, the
   reset is invisible and the loop never shows a seam. */
.eco{padding:var(--s5) 0 calc(var(--s5) - 4px)}
.eco-cap{margin-bottom:var(--s3)}
/* The tooltip pops upward, and the strip clips its overflow — so the strip carries
   top padding to give the bubble room, cancelled by an equal negative margin so the
   section's height does not change. */
.marq{position:relative;overflow:hidden;direction:ltr;padding-top:104px;margin-top:-104px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
/* `direction:ltr` belongs on the CONTAINER, not the strip. On the strip it still
   left the strip right-anchored by the RTL parent, so translating left dragged its
   right edge inward and opened a hole on the right. Anchored left, the same
   translate pulls the next copy in from the right and the line stays solid. */
.marq-inner{display:flex;width:max-content;
  animation:marq 46s linear infinite;will-change:transform}
.marq-list{display:flex;gap:12px;padding:0 6px;margin:0;list-style:none}
.marq:hover .marq-inner{animation-play-state:paused}   /* let people read a name */
/* one quarter of four copies = exactly one copy */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-25%)}}

.eco-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-f);
  padding:11px 18px;box-shadow:var(--sh-s);
  transition:border-color .3s var(--e-io),box-shadow .3s var(--e-io)}
.eco-item:hover{border-color:var(--btn);box-shadow:var(--sh-m)}
.eco-item b{font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;color:var(--primary-2);white-space:nowrap}

/* Official marks, tinted to each brand's own colour. The glyph is pulled in as a
   CSS mask rather than an <img> so a single monochrome source can carry the real
   brand hex — and so the file stays cached and out of the HTML. */
.eco-ic{flex:0 0 auto;width:22px;height:22px;display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.eco-ha    .eco-ic{color:#18BCF2;-webkit-mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/homeassistant.svg);mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/homeassistant.svg)}
.eco-gh    .eco-ic{color:#4285F4;-webkit-mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/googlehome.svg);mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/googlehome.svg)}
.eco-hk    .eco-ic{color:#F5842B;-webkit-mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/apple.svg);mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/apple.svg)}
.eco-zigbee .eco-ic{color:#EB0443;-webkit-mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/zigbee.svg);mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/zigbee.svg)}
.eco-mqtt  .eco-ic{color:#660066;-webkit-mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/mqtt.svg);mask-image:url(https://cdn.jsdelivr.net/npm/simple-icons@15/icons/mqtt.svg)}

/* No official mark available in a licensable set for these four — drawn as clean
   geometric stand-ins in each brand's documented colour. Replace with the real
   SVG from each brand's press kit before the site goes live. */
.eco-alexa .eco-ic{color:#00CAFF;-webkit-mask-image:var(--m-ring);mask-image:var(--m-ring)}
.eco-matter .eco-ic{color:#F7941D;-webkit-mask-image:var(--m-star);mask-image:var(--m-star)}
.eco-tuya  .eco-ic{color:#FF4800;-webkit-mask-image:var(--m-grid);mask-image:var(--m-grid)}
.eco-zwave .eco-ic{color:#1B4E9B;-webkit-mask-image:var(--m-wave);mask-image:var(--m-wave)}
.eco-thread .eco-ic{color:#7B3FE4;-webkit-mask-image:var(--m-node);mask-image:var(--m-node)}
:root{
  --m-ring:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 2.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8Zm0 3.1a5.3 5.3 0 1 0 0 10.6 5.3 5.3 0 0 0 0-10.6Z"/></svg>');
  --m-star:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1.6c.7 0 1.3.6 1.3 1.3v5l3.6-3.5a1.3 1.3 0 1 1 1.8 1.8l-3.5 3.6h5a1.3 1.3 0 1 1 0 2.6h-5l3.5 3.6a1.3 1.3 0 1 1-1.8 1.8l-3.6-3.5v5a1.3 1.3 0 1 1-2.6 0v-5l-3.6 3.5a1.3 1.3 0 1 1-1.8-1.8l3.5-3.6h-5a1.3 1.3 0 1 1 0-2.6h5L5.3 6.2a1.3 1.3 0 1 1 1.8-1.8l3.6 3.5v-5c0-.7.6-1.3 1.3-1.3Z"/></svg>');
  --m-grid:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 2.6h5.6c.8 0 1.4.6 1.4 1.4v5.6c0 .8-.6 1.4-1.4 1.4H4c-.8 0-1.4-.6-1.4-1.4V4c0-.8.6-1.4 1.4-1.4Zm10.4 0H20c.8 0 1.4.6 1.4 1.4v5.6c0 .8-.6 1.4-1.4 1.4h-5.6c-.8 0-1.4-.6-1.4-1.4V4c0-.8.6-1.4 1.4-1.4ZM4 13h5.6c.8 0 1.4.6 1.4 1.4V20c0 .8-.6 1.4-1.4 1.4H4c-.8 0-1.4-.6-1.4-1.4v-5.6c0-.8.6-1.4 1.4-1.4Zm10.4 0H20c.8 0 1.4.6 1.4 1.4V20c0 .8-.6 1.4-1.4 1.4h-5.6c-.8 0-1.4-.6-1.4-1.4v-5.6c0-.8.6-1.4 1.4-1.4Z"/></svg>');
  --m-wave:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M2 12a10 10 0 0 1 3-7.1l1.8 1.8A7.5 7.5 0 0 0 4.6 12H2Zm5.6 0a6.4 6.4 0 0 1 1.9-4.5l1.8 1.8A3.9 3.9 0 0 0 10.2 12H7.6ZM22 12a10 10 0 0 1-3 7.1l-1.8-1.8a7.5 7.5 0 0 0 2.2-5.3H22Zm-5.6 0a6.4 6.4 0 0 1-1.9 4.5l-1.8-1.8a3.9 3.9 0 0 0 1.1-2.7h2.6ZM12 9.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Z"/></svg>');
  --m-node:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1.8 21 7v10l-9 5.2L3 17V7l9-5.2Zm0 3L5.6 8.5v7L12 19.2l6.4-3.7v-7L12 4.8Zm0 4a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Z"/></svg>');
}
@media(prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marq-inner{animation:none;flex-wrap:wrap;justify-content:center}
  .marq-list[aria-hidden="true"]{display:none}
}


/* ═══════ ECOSYSTEM TOOLTIPS ═══════ */
/* A chip on its own tells you a name and nothing more. On hover — and on keyboard
   focus — it explains what the thing actually is, in one sentence. */
.eco-item{position:relative}
.eco-item::before{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 13px);left:50%;
  transform:translateX(-50%) translateY(6px);
  width:max-content;max-width:270px;
  direction:rtl;text-align:right;
  font-family:'Assistant',sans-serif;font-size:13.5px;line-height:1.6;font-weight:500;
  color:#FFFFFF;background:var(--primary);
  padding:11px 15px;border-radius:14px;
  box-shadow:0 12px 34px -10px rgba(10,17,40,.55);
  opacity:0;visibility:hidden;pointer-events:none;z-index:6;
  transition:opacity .2s var(--e-io),transform .24s var(--e),visibility .2s}
.eco-item::after{
  content:"";position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--primary);
  opacity:0;visibility:hidden;pointer-events:none;z-index:6;
  transition:opacity .2s var(--e-io),visibility .2s}
.eco-item:hover::before,.eco-item:focus-visible::before,
.eco-item:hover::after,.eco-item:focus-visible::after{opacity:1;visibility:visible}
.eco-item:hover::before,.eco-item:focus-visible::before{transform:translateX(-50%) translateY(0)}
.eco-item:focus-visible{outline:2px solid var(--btn);outline-offset:3px}

/* the sentence is repeated in the flow for screen readers, which cannot read
   generated content from `attr()` */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(hover:none){.eco-item::before,.eco-item::after{display:none}}


/* ═══════ MEGA-MENU PROMO CARD ═══════ */
/* The card computed a 999px radius, not the 20px it is given: WoodMart forces a
   pill radius onto links inside its menus. On a 201x415 box that curves the bottom
   corners so far inward that the CTA line sat outside the visible shape and got
   clipped — which is why the sentence was unreadable. `!important` here is aimed at
   a specific theme rule, not used as a general habit. */
.fsmega a.fsmega-promo{border-radius:20px !important;overflow:hidden}
.fsmega a.fsmega-promo img{border-radius:0 !important}
/* the scrim now reaches the very bottom edge and starts fading much higher, so the
   CTA always has something solid behind it whatever the photo does */
.fsmega .fsmega-promo-in{
  padding:20px 18px 22px;
  background:linear-gradient(0deg,
    rgba(10,17,40,.97) 0%,
    rgba(10,17,40,.92) 30%,
    rgba(10,17,40,.55) 58%,
    rgba(10,17,40,.12) 80%,
    transparent 100%)}
.fsmega .fsmega-promo-in b{font-size:16.5px;line-height:1.3;text-shadow:0 1px 8px rgba(10,17,40,.7)}
.fsmega .fsmega-promo-in em{color:rgba(226,232,240,.86)}
.fsmega .fsmega-promo-cta{
  margin-top:9px;color:#7FE6FF;font-size:13.5px;
  text-shadow:0 1px 8px rgba(10,17,40,.8)}
.fsmega a.fsmega-promo:hover .fsmega-promo-cta{color:#FFFFFF}


/* ═══════ CORE CARD — the satellites answer the hub ═══════ */
/* Hovering the controller is the moment the section's idea lands: one brain, the
   rest depend on it. The four surrounding cards recede and tilt toward it, so the
   hierarchy is felt rather than just written. */
.core-grid:has(.cc-lg:hover) .cc:not(.cc-lg){
  transform:scale(.975);opacity:.72;border-color:var(--border)}
.core-grid:has(.cc-lg:hover) .cc:not(.cc-lg) .ic{transform:scale(.94)}
.cc:not(.cc-lg){transition:transform .5s var(--e),opacity .5s var(--e),
  box-shadow .5s var(--e),border-color .5s var(--e)}
.cc .ic{transition:transform .5s var(--e),background .5s var(--e)}

/* the LED line under the device breathes while the card is idle */
.cc-lg .cc-stage::after{animation:stagePulse 4.6s var(--e-io) infinite}
@keyframes stagePulse{0%,100%{opacity:.55;transform:scaleX(.92)}50%{opacity:1;transform:scaleX(1.04)}}
.cc-lg:hover .cc-stage::after{animation-duration:2.6s}

/* keep the copy anchored while the product moves above it */
.cc-lg .cc-body{position:relative;z-index:2}
.cc-lg .mini li{color:rgba(226,232,240,.82)}

@media(prefers-reduced-motion:reduce){
  .cc-lg .cc-stage::after{animation:none}
  .core-grid:has(.cc-lg:hover) .cc:not(.cc-lg){transform:none;opacity:1}
  .cc-lg:hover .cc-hero img{transform:none}
}


/* ═══════════════════════════════════════════════════════════
   MOBILE PASS — driven by real device screenshots (Samsung, 945px wide)
   The desktop rhythm was simply scaled down before; these are corrections to
   specific things that were measured as broken on a phone.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── 1. spacing. 112px between sections is desktop breathing room; on a phone
        it is dead scrolling. Roughly halved, and the gaps between related
        sections cut further. ── */
  .sec{padding:var(--s6) 0}
  #audience,#about,#process,#know,#says{padding-top:var(--s5)}
  #contact{padding-top:var(--s6)}
  .head{margin-bottom:var(--s4)}
  .head h2{font-size:clamp(25px,7.2vw,33px);line-height:1.22}
  .head p{font-size:16.5px}

  /* ── 2. the hero shot was pushed below a 300px reserve and ended up mostly
        off-screen — only a sliver of the monitor was visible. It now sits in a
        fixed band under the copy, fully in frame. ── */
  .hero-shot .hero-grid{min-height:0;padding:calc(var(--nav-h) + 28px) 0 clamp(210px,58vw,300px)}
  .hero-shot::before{
    left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);
    width:118%;height:clamp(200px,56vw,290px);
    background-position:center bottom;background-size:contain;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%);
  }
  .hero-shot .hero-copy{width:100%}
  .hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.16}
  .hero-copy p{font-size:16.5px}
  .eco{padding:var(--s4) 0}

  /* ── 3. video: a static, centred, smaller play button. The pointer-following
        cursor is a desktop idea and there is no pointer here. ── */
  .reel-play{width:60px;height:60px;
    inset-inline-start:auto;left:50%;transform:translate(-50%,-50%)}
  .reel-play svg{width:24px;height:24px;margin-left:3px}
  .reel-play::after{inset:-9px;border-width:1.2px}
  .reel-cursor{display:none!important}

  /* ── 4. cards were tall enough that each one needed its own scroll ── */
  .cc{padding:22px 18px}
  .cc h3{font-size:19px}
  .cc p{font-size:15.5px}
  .cc-lg{min-height:0}
  .cc-lg .cc-hero,.cc-lg .cc-stage{height:44%}
  .kc-body{padding:18px 18px 14px}
  .kc-body b{font-size:18px}
  .tst{padding:var(--s4) 20px 20px}
  .ac{padding:24px 20px}
  .ac-n{font-size:38px;margin-bottom:10px}
}

/* ── 5. when the phone asks for reduced motion the marquee stops, and the
      fallback has to stand on its own instead of leaving a near-empty strip ── */
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .marq{overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:none;mask-image:none;padding-top:0;margin-top:0}
  .marq-inner{flex-wrap:nowrap;width:max-content;animation:none}
  .marq-list[aria-hidden="true"]{display:none}
  .eco-item{scroll-snap-align:start}
  .marq-inner{scroll-snap-type:x proximity}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS 2 — measured at 430×932, real device screenshots
   Baseline before this block: document height 21,118px (desktop is 15,817).
   Three offenders carried most of it: #shop 3,835 · #know 2,012 · #says 1,326
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── A. חנות — קרוסלה במקום מגדל.
        שישה כרטיסי מוצר בטור אנכי = 3,835px, כמעט חמישה מסכים מלאים רק כדי
        לעבור על החנות. בשורה נגללת הם תופסים גובה של כרטיס אחד. הכרטיס הבא
        מציץ מהצד ~80px, וזה הרמז שאומר "אפשר להחליק" בלי חיצים ובלי הסבר. ── */
  .prod-grid{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 4px 16px;margin-inline:-4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .prod-grid::-webkit-scrollbar{display:none}
  .prod-grid .pc{flex:0 0 78vw;max-width:308px;scroll-snap-align:start}
  .pc-media{aspect-ratio:16/11}
  .pc-body{padding:16px 16px 18px;gap:8px}
  .pc-body h3{font-size:16px;line-height:1.32}
  .pc-body p{font-size:13.5px}
  .pc:hover{transform:none}

  /* ── B. המלצות — אותו היגיון, שלושה כרטיסים של 334px ── */
  .tst-grid{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 4px 16px;margin-inline:-4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .tst-grid::-webkit-scrollbar{display:none}
  .tst-grid .tst{flex:0 0 84vw;max-width:340px;scroll-snap-align:start}

  /* ── C. כרטיסי הליבה — אנימציית ההערמה שביקשת.
        הכרטיס הראשון (מחשב הבקרה) נשאר במקומו; ארבעת הכרטיסים שאחריו נעוצים
        בזה אחר זה, כל אחד עולה על קודמו ומשאיר סרט של 14px שמראה שהוא שם.
        אחרי הרביעי הערימה משתחררת והגלילה ממשיכה לסקשן הבא.
        ה-top המדורג הוא מה שיוצר את הסרט; ה-z-index העולה הוא מה שקובע
        שהחדש מכסה את הישן ולא להפך. ── */
  .core-grid{display:block}
  .core-grid .cc{margin-bottom:16px}
  .core-grid .cc:last-child{margin-bottom:0}
  .core-grid .cc:not(.cc-lg){
    position:sticky;
    opacity:1;transform:none;
    box-shadow:0 -18px 44px -24px rgba(8,14,34,.55),0 16px 36px -26px rgba(8,14,34,.30);
  }
  .core-grid .cc:nth-child(2){z-index:2;top:calc(var(--nav-h) + 12px)}
  .core-grid .cc:nth-child(3){z-index:3;top:calc(var(--nav-h) + 26px)}
  .core-grid .cc:nth-child(4){z-index:4;top:calc(var(--nav-h) + 40px)}
  .core-grid .cc:nth-child(5){z-index:5;top:calc(var(--nav-h) + 54px)}
  .core-grid .cc:not(.cc-lg):hover{transform:none;box-shadow:0 -18px 44px -24px rgba(8,14,34,.55),0 16px 36px -26px rgba(8,14,34,.30)}

  /* ── D. מחשב הבקרה — שחור על שחור, ובמסך קטן המוצר עצמו קטן יותר ולכן
        נבלע. הכרטיס מקבל גובה אמיתי, הבמה גדלה, וההבהרה חזקה יותר מהדסקטופ.
        זה עדיין טריק של mix-blend-mode — צילום עם רקע שקוף יפתור את זה נכון. ── */
  .cc-lg{min-height:430px}
  .cc-lg .cc-hero,.cc-lg .cc-stage{height:50%}
  .cc-lg .cc-stage{opacity:1}
  .cc-lg .cc-hero img{
    filter:brightness(2.2) contrast(1.12) saturate(1.06)
           drop-shadow(0 0 26px rgba(0,210,255,.30));
  }

  /* ── E. קיצוצים נקודתיים בגובה ── */
  .sec{padding:52px 0}
  .kc-img{aspect-ratio:16/10}
  .kc-body{padding:16px 16px 14px}
  .steps-media{aspect-ratio:16/9}
  .step-pane p{margin-bottom:var(--s2)}
  #shop .head{margin-bottom:var(--s3)}
}

/* מי שביקש פחות תנועה מקבל רשימה נגללת רגילה, בלי snap כופה */
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .prod-grid,.tst-grid{scroll-snap-type:none}
  .core-grid .cc:not(.cc-lg){position:static;box-shadow:var(--sh-s)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASS 3 — from the second batch of device screenshots (bottom of the page)
   ═══════════════════════════════════════════════════════════════════════════ */

/* האקורדיון: הפאנל מתכווץ ל-0fr כמו שצריך, אבל לפסקה שבתוכו נשאר
   margin-bottom של 20px — ומרג'ין תופס מקום גם כשהמסלול עצמו אפס. התוצאה:
   כל שאלה סגורה יושבת על רצועה ריקה של 20px, שש פעמים. הריווח כשפתוח מגיע
   מה-padding ב-.ai.open, אז אין מה לאבד כאן. (באג בדסקטופ גם, לא רק במובייל.) */
.ap>p{margin:0}

/* הלוגו בפוטר — הגנה מפורשת: לבן על נייבי, בלי משטח לבן מאחוריו */
.ft-brand{background:transparent}
.ft-brand .lg{color:#FFFFFF;background:transparent}

@media(max-width:760px){
  /* הפוטר תפס 906px — שלוש עמודות שנערמות עם רווח של 64px ביניהן.
     המותג נשאר ברוחב מלא, ושתי עמודות הקישורים יושבות זו לצד זו. */
  .ft-grid{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);margin-bottom:var(--s4)}
  .ft-brand{grid-column:1 / -1}
  .ft-col{gap:9px}
  .ft-col a,.ft-col span{font-size:15px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ההירו במובייל — קומפוזיציה מחדש. הדסקטופ לא נגוע: כל שורה כאן חיה בתוך
   media query, ואף כלל של הדסקטופ לא שונה.
   ═══════════════════════════════════════════════════════════════════════════

   מה היה לא בסדר, שלושה דברים נפרדים:

   1. סדר. הלקוח קיבל כותרת ענקית, פסקה, שני כפתורים ושלושה מספרים — וראה את
      המוצר רק אחרי ~1,300px של גלילה. במובייל המוצר צריך להיות הדבר הראשון.

   2. הקרופ. הקובץ feldman-hero-wide.jpg נבנה לדסקטופ: המוצר תופס את 7%–53%
      השמאליים של הפריים והשאר רקע סטודיו ריק, כי בדסקטופ הטקסט יושב בחצי הימני
      וממלא אותו. במובייל הצגתי את כל הפריים, אז המוצר נדחק שמאלה ומימין נשאר
      ואקום. הפתרון הוא חלון של 55.8% מרוחב הקובץ (background-size:auto 100%
      בתוך מסגרת 1:1), ממוקם ב-5% — כך מרכז המוצר נוחת על 49.8% מרוחב החלון.
      אין קובץ חדש, אין הורדה נוספת: אותה תמונה, חלון אחר.

   3. הנתונים. שלושה פריטי flex עם gap של 64px נשברו ל-2+1 עם חלל ענק באמצע.
      עכשיו גריד של שלוש עמודות שוות. */
@media(max-width:760px){

  .hero-shot::before{display:none}

  .hero-shot .hero-grid{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--nav-h) + 16px) 0 28px;
  }

  /* ::before ולא ::after — כך המוצר הוא האלמנט הראשון בגריד, לפני הטקסט */
  .hero-shot .hero-grid::before{
    content:"";display:block;order:-1;
    width:100%;aspect-ratio:1/1;margin:0 0 20px;
    background:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-hero-mobile-v2.webp") center center/contain no-repeat;
    /* הריכוך אפוי בקובץ עצמו: שוליו כבר בדיוק #F4F7FA, ולכן אין מסכת CSS */
  }

  .hero-shot .hero-copy{width:100%;text-align:center}
  .hero-shot .hero-copy .pill{margin-inline:auto}

  .hero-shot .hero-cta{flex-direction:column;align-items:stretch;gap:11px;margin-bottom:26px}
  .hero-shot .hero-cta .btn{width:100%;justify-content:center}

  .hero-shot .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
  .hero-shot .kpi div{align-items:center}
  .hero-shot .kpi dt{font-size:25px}
  .hero-shot .kpi dd{font-size:11.5px;line-height:1.35;margin-top:3px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   שבעת השלבים במובייל — ציר זמן אנכי. הדסקטופ לא נגוע.
   ═══════════════════════════════════════════════════════════════════════════

   מה היה: בשורה @media(max-width:1100px) הקוד המקווקו, הקו המתמלא והנקודה
   הנוסעת כולם מקבלים display:none. כלומר מתחת ל-1100px לא היו שלבים בכלל —
   היו שבעה עיגולים בשתי עמודות בלי שום דבר שמחבר ביניהם, והלקוח לא יכול היה
   לדעת שמדובר ברצף.

   מה יש עכשיו: אותו מנגנון של הדסקטופ, מסובב 90 מעלות. טור אחד, מסגרת של
   48px בצד ימין שבה יושבים המספרים, כותרת והסבר משמאלם, וקו שמחבר כל עיגול
   לזה שאחריו. הקו מתמלא כלפי מטה לפי אותו --p שה-JS כבר מחשב לדסקטופ —
   לא נגעתי ב-JS בכלל.

   החישוב: כל מקטע i מקבל --seg = clamp(0, p*7 - 0.55 - i, 1). ה-0.55 מסונכרן
   עם התנאי שבו ה-JS מדליק כל עיגול (p >= (i+0.55)/7), כך שהקו מגיע לעיגול
   בדיוק ברגע שהוא נדלק ולא לפני. נמדד בפועל ב-p=0.42: מקטעים 0 ו-1 מלאים,
   מקטע 2 על 39%, השאר ריקים.

   השלב הנוכחי: העיגול האחרון שנדלק הוא זה שאחריו יש עיגול שעוד לא נדלק —
   .rs.on:has(+ .rs:not(.on)). בלי JS נוסף, ובלי לשבור כלום אם :has לא נתמך. */
@media(max-width:760px){
  .rail{display:grid;grid-template-columns:1fr;gap:0;padding-top:4px}
  .rail::before,.rail::after,.rail-head{display:none}

  .rs{position:relative;display:grid;grid-template-columns:48px 1fr;gap:2px 16px;
      text-align:right;padding-bottom:26px;align-items:start}
  .rs:last-child{padding-bottom:0}
  .rs-n{grid-column:1;grid-row:1 / span 2;width:48px;height:48px;margin:0;font-size:15px}
  .rs h3{grid-column:2;grid-row:1;font-size:17px;margin:0 0 3px;
         min-height:48px;display:flex;align-items:center}
  .rs p{grid-column:2;grid-row:2;font-size:14.5px;line-height:1.6}

  .rs:nth-child(1){--i:0}.rs:nth-child(2){--i:1}.rs:nth-child(3){--i:2}.rs:nth-child(4){--i:3}
  .rs:nth-child(5){--i:4}.rs:nth-child(6){--i:5}.rs:nth-child(7){--i:6}
  .rs{--seg:clamp(0, calc(var(--p,0) * 7 - 0.55 - var(--i)), 1)}

  /* המסלול המקווקו — מתחתית העיגול ועד ראש העיגול הבא */
  .rs:not(:last-child)::before{content:"";position:absolute;top:52px;bottom:2px;right:23px;width:2px;
    background-image:linear-gradient(180deg,var(--border) 0 7px,transparent 7px 14px);
    background-size:2px 14px}
  /* הקו שמתמלא */
  .rs:not(:last-child)::after{content:"";position:absolute;top:52px;right:22px;width:4px;border-radius:4px;
    height:calc((100% - 54px) * var(--seg));
    background:linear-gradient(180deg,var(--btn),var(--accent));
    box-shadow:0 0 16px var(--btn-45)}

  /* השלב שאתה עליו עכשיו — טבעת פועמת סביב העיגול */
  .rs.on:has(+ .rs:not(.on)) .rs-n,
  .rs.on:last-child .rs-n{transform:scale(1.1)}
  .rs.on:has(+ .rs:not(.on)) .rs-n::after,
  .rs.on:last-child .rs-n::after{content:"";position:absolute;inset:-10px;border-radius:50%;
    border:2px solid var(--btn);animation:stepPulse 1.9s ease-in-out infinite}
}
@keyframes stepPulse{0%{transform:scale(.86);opacity:.75}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}

/* הפחתת אנימציות: ה-JS לא רץ ולכן --p נשאר 0. הקו נצבע מלא, בלי פעימה. */
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .rs{--seg:1}
  .rs .rs-n::after{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   הדר, סרגל תחתון ופוטר — מובייל. הדסקטופ לא נגוע.
   ═══════════════════════════════════════════════════════════════════════════ */

/* הסרגל התחתון לא קיים כלל בדסקטופ */
.tabbar{display:none}

@media(max-width:760px){

  /* ── הדר ──────────────────────────────────────────────────────────────
     היה: הלוגו מימין עם מרווח, וכפתור התפריט נדבק לקצה השמאלי בלי מרווח.
     עכשיו: row-reverse מעביר את הלוגו שמאלה ואת התפריט ימינה כפי שביקשת,
     space-between דוחף אותם לשני הקצוות, ו-padding-inline זהה נותן להם
     בדיוק אותו מרווח מהקצה משני הצדדים. שניהם גם הוקטנו מעט. */
  .nav-in{flex-direction:row-reverse;justify-content:space-between;
          gap:12px;padding-inline:18px}
  .nav-in .brand{margin:0}
  .nav .lg{height:27px}
  .burger{width:40px;height:40px;gap:4.5px}
  .burger span{width:19px}

  /* ── סרגל תחתון ─────────────────────────────────────────────────────── */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;inset-inline:0;bottom:0;z-index:145;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
    border-top:1px solid var(--border);
    box-shadow:0 -6px 24px -14px rgba(8,14,34,.28);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;min-height:58px;padding:9px 3px 8px;background:none;border:0;cursor:pointer;
    font-family:'Assistant',sans-serif;font-size:11px;font-weight:700;color:var(--primary);
    transition:color .25s var(--e),background .25s var(--e)}
  .tabbar a:active,.tabbar button:active{background:var(--g-10)}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .tabbar svg.fill{fill:currentColor;stroke:none}
  /* הוואטסאפ נשאר בכחול המותג — אין ירוק באתר הזה */
  .tabbar a[href*="wa.me"]{color:var(--btn)}

  /* הכפתור הצף מתאחד לתוך הסרגל, אחרת שניהם נלחמים על אותה פינה */
  .wa{display:none}
  /* מקום לסרגל כדי שלא יכסה את סוף הפוטר */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}

  /* ── פוטר ───────────────────────────────────────────────────────────── */
  .ft{padding-top:var(--s5)}                    /* היה חלל מת מעל הלוגו */
  .ft-brand{text-align:center}
  .ft-brand .lg{height:46px;margin:0 auto 14px} /* גדול יותר, ממורכז, גבוה יותר */
  .ft-brand p{margin-inline:auto}


  .ft-bot{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .ft-legal{justify-content:center}
}

/* הקרדיט מוצג בשני הגדלים */
.ft-credit{font-size:13.5px;color:var(--lite-70)}
.ft-credit a{color:var(--accent-2);font-weight:700}
.ft-credit a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════════════
   שורות פרטי הקשר בפוטר — גלובלי, לא רק מובייל.
   הכללים האלה נכתבו בטעות בתוך media query של מובייל. בדסקטופ ה-svg נשארו בלי
   width/height והדפדפן צייר אותם בגודל הטבעי שלהם — טלפון ומעטפה בגובה 150px+.
   הבלוק הזה זהה למה שהיה, רק בלי התנאי.
   ═══════════════════════════════════════════════════════════════════════════ */
.ft-c{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.ft-c > svg{flex:0 0 auto;width:17px;height:17px;margin-top:3px;
  fill:none;stroke:var(--accent-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft-c b{display:block;font-family:'Assistant',sans-serif;font-size:12.5px;font-weight:800;
  color:#FFFFFF;margin-bottom:1px}
.ft-c a,.ft-c span{display:block;font-size:14.5px;color:var(--lite-70);line-height:1.55}
.ft-c a:hover{color:var(--accent-2)}
.ft-addr{white-space:nowrap}          /* "בני ברק, הרב קוק 48" בשורה אחת */
.ft-waze{margin-top:3px;font-size:13px;font-weight:700;color:var(--accent-2)!important}
.ft-closed{opacity:.72}

/* ═══════════════════════════════════════════════════════════════════════════
   ההדר — זכוכית חלבית גם אחרי גלילה.
   ההדר כבר היה זכוכית במצב ההתחלתי (--veil הוא לבן ב-82% + blur), אבל ברגע
   שגללת .nav.on החליף את הרקע ל-var(--surface) שהוא לבן אטום — ולכן בכל צילום
   מסך שלך הוא נראה כמו גלולה לבנה סגורה. עכשיו הוא נשאר שקוף-חלבי גם בגלילה:
   התוכן זז מתחתיו ורואים אותו מטושטש, בלי לפגוע בקריאות הלוגו והתפריט.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav.on .nav-in{
  background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:saturate(190%) blur(26px);
          backdrop-filter:saturate(190%) blur(26px);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 10px 34px -18px rgba(8,14,34,.30),inset 0 1px 0 rgba(255,255,255,.65);
}
/* דפדפן בלי backdrop-filter יקבל רקע אטום, אחרת הטקסט לא ייקרא */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-in,.nav.on .nav-in{background:var(--surface)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   הידוק רווחים + הגלילה האופקית הנעוצה — מובייל בלבד
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── רווחים: 52px → 36px, ועוד יידוק בכותרות וברווחים הפנימיים ──────── */
  .sec{padding:36px 0}
  #audience,#about,#process,#know,#says{padding-top:30px}
  #contact{padding-top:40px}
  .head{margin-bottom:22px}
  .head p{margin-top:8px}
  .ft{padding-top:34px}
  .eco{padding:24px 0}
  .hero-shot .hero-grid{padding-bottom:20px}
  .prod-head{margin-bottom:18px}
  .kc-tabs{margin-bottom:18px}
  .trust{margin-top:22px}

  /* ── הגלילה האופקית הנעוצה ────────────────────────────────────────────
     .hpin הוא המסלול הגבוה; .hpin-in נעוץ בתוכו ומחזיק את שורת הכרטיסים.
     גובה המסלול נקבע ב-JS לפי המרחק האופקי בפועל. */
  .hpin{position:relative}
  .hpin-in{position:sticky;top:calc(var(--nav-h) + 26px)}

  /* פס התקדמות — בלי זה נעיצה מרגישה כמו תקלה ולא כמו אפקט */
  .hpin-bar{position:relative;height:3px;margin:14px auto 0;width:64%;
    border-radius:3px;background:var(--g-10);overflow:hidden}
  .hpin-bar i{position:absolute;inset:0;transform-origin:right center;transform:scaleX(0);
    border-radius:3px;background:linear-gradient(90deg,var(--btn),var(--accent-2))}
}

/* מי שביקש פחות תנועה מקבל את הקרוסלה הרגילה, בלי נעיצה ובלי פס */
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .hpin{height:auto!important}
  .hpin-in{position:static}
  .hpin-bar{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   מגה־מניו — הסרת הפיל האפור + שפיץ שמצביע על הפריט
   ───────────────────────────────────────────────────────────────────────────
   שלושת פריטי המגה בנויים כ-<button>, וה-reset שלנו (button{background:none})
   נדרס ע"י CSS של ערכת הנושא שנטענת אחרינו — לכן הם קיבלו רקע #F3F3F3 עם
   פינות מלאות ונראו כמו כפתורים מודגשים בלי סיבה. כאן מאפסים במפורש;
   סימון ה-hover נשאר רק הקו הטורקיז התחתון שכבר קיים בקוד.

   בנוסף: הרווח בין ההדר לפאנל גדל ל-30px (היו 12px בפועל מתחתית סרגל
   ההדר — לא מספיק לשפיץ), ונוסף משולש חד ממורכז מתחת לפריט הפעיל.
   הפאנל כבר ממורכז מדויק על ה-trigger (נמדד: סטייה 0px בשלושתם), ולכן
   left:50% על השפיץ מצביע בדיוק על מרכז הפריט.
   רצועת גישור שקופה מכסה את הרווח כדי שהתפריט לא ייסגר במעבר העכבר.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-links .fsmega-trig,
.nav-links .fsmega-trig:hover,
.nav-links .fsmega-trig:focus,
.nav-links .fsmega-trig:active,
.nav-links .fsmega-trig[aria-expanded="true"]{
  background:transparent;background-color:transparent;
  border:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.nav-links .fsmega-trig:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.nav-links .fsmega{top:calc(100% + 30px)}

/* גשר שקוף על הרווח — פעיל רק כשהפאנל פתוח (pointer-events מגיע מהפאנל) */
.nav-links .fsmega::before{content:"";position:absolute;top:-30px;left:0;right:0;height:30px}

/* השפיץ — ריבוע 11px מסובב 45°, רק שתי הצלעות העליונות מקבלות קו גבול,
   כך שהקו של מסגרת הפאנל ממשיך ברצף אל תוך המשולש */
.nav-links .fsmega::after{content:"";position:absolute;top:-6px;left:50%;
  width:11px;height:11px;margin-left:-5.5px;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
  border-top-left-radius:2px;
  transform:rotate(45deg)}

/* מסכי דסקטופ צרים — פאנל "בית חכם" הוא הימני ביותר ולכן הראשון שגולש מהמסך.
   נמדד: ברוחב 1130px (הצר ביותר לפני שהמגה נעלם) הרוחב הבטוח המרבי הוא 695px,
   וברוחב 1200px — 714px. 680px עומד בשניהם. פאנל החנות רחב יותר אבל יושב
   שמאלה ולכן נשאר בטוח ב-940px (רוחב בטוח 1089px ב-1130). */
@media(max-width:1440px){
  .nav-links .fsmega{width:min(680px,86vw)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   מגה־מניו "מרכז ידע" — מאמרים | סקירות + פס יצירת קשר
   ───────────────────────────────────────────────────────────────────────────
   מבנה: שתי עמודות שוות — מאמרים בימין, סקירות בשמאל, מופרדות בקו דק —
   כל פריט עם תמונה ממוזערת 56px, כותרת ושורת מטא. בתחתית כל עמודה כפתור
   "לכל ה…", ומתחת לשתיהן פס full-bleed עם שם החברה, טלפון וכפתור וואטסאפ.
   הפס יוצא מהריפוד של הפאנל (margin שלילי 26px) ולכן מקבל את רדיוס הפינות
   הפנימי: 36px מסגרת פחות 1px גבול = 35px.
   ═══════════════════════════════════════════════════════════════════════════ */
.fsmega-know .fsmega-in{grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
.fsmega-know .km-col{display:flex;flex-direction:column;min-width:0}
.fsmega-know .km-col + .km-col{border-inline-start:1px solid var(--border);padding-inline-start:24px}

.fsmega-know .km-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.fsmega-know .km-head .fsmega-h{margin:0}
.fsmega-know .km-sub{font-size:11.5px;color:var(--text);opacity:.72;white-space:nowrap}

.fsmega-know .km-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r-s);
  transition:background .28s var(--e-io)}
.fsmega-know .km-item:hover{background:var(--a-08)}
.fsmega-know .km-th{flex:0 0 auto;width:56px;height:56px;border-radius:12px;overflow:hidden;
  background:var(--bg);
  /* חלק מצילומי המוצר הם על רקע לבן — בלי קצה מוגדר האריח נבלע בפאנל
     ונראה כמו תמונה שלא נטענה. הטבעת הפנימית היא מה שנותן לו גבול. */
  box-shadow:inset 0 0 0 1px var(--ink-14),0 2px 6px -3px var(--ink-14)}
.fsmega-know .km-th img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--e)}
.fsmega-know .km-item:hover .km-th img{transform:scale(1.08)}
.fsmega-know .km-tx{min-width:0}
.fsmega-know .km-tx b{display:block;font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;
  line-height:1.35;color:var(--primary)}
.fsmega-know .km-tx em{display:block;font-style:normal;font-size:12px;line-height:1.4;
  color:var(--text);opacity:.8;margin-top:3px}

.fsmega-know .km-all{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding:11px 18px;border-radius:var(--r-f);
  border:1px solid var(--border);background:var(--surface);
  font-family:'Assistant',sans-serif;font-size:13.5px;font-weight:700;color:var(--primary);
  transition:border-color .28s var(--e-io),background .28s var(--e-io),box-shadow .28s var(--e-io)}
.fsmega-know .km-all svg{width:14px;height:14px;transition:transform .3s var(--e)}
.fsmega-know .km-all:hover{border-color:var(--a-28);background:var(--a-08);box-shadow:0 6px 18px -12px var(--btn-45)}
.fsmega-know .km-all:hover svg{transform:translateX(-3px)}

/* פס תחתון */
.fsmega-know .km-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  margin:22px -26px -26px;padding:15px 28px;
  border-top:1px solid var(--border);background:var(--bg);
  border-end-start-radius:35px;border-end-end-radius:35px}
.fsmega-know .km-brand{display:flex;align-items:center;gap:12px;min-width:0}
.fsmega-know .km-brand-mark{flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Assistant',sans-serif;font-size:17px;font-weight:800;color:#FFFFFF;
  background:linear-gradient(140deg,var(--btn),var(--primary));
  box-shadow:0 8px 18px -10px var(--btn-45)}
.fsmega-know .km-brand-tx b{display:block;font-family:'Assistant',sans-serif;font-size:14px;font-weight:800;
  color:var(--primary);line-height:1.3}
.fsmega-know .km-brand-tx em{display:block;font-style:normal;font-size:12px;color:var(--text);
  opacity:.8;margin-top:2px}

.fsmega-know .km-acts{display:flex;align-items:center;gap:10px}
.fsmega-know .km-tel,.fsmega-know .km-wa{display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-f);
  font-family:'Assistant',sans-serif;font-size:13.5px;font-weight:700;
  transition:background .28s var(--e-io),border-color .28s var(--e-io),
             color .28s var(--e-io),transform .28s var(--e),box-shadow .28s var(--e-io)}
.fsmega-know .km-tel svg,.fsmega-know .km-wa svg{width:16px;height:16px;flex:0 0 auto}

.fsmega-know .km-tel{border:1px solid var(--border);background:var(--surface);color:var(--primary)}
.fsmega-know .km-tel svg{fill:none;stroke:var(--eye-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fsmega-know .km-tel:hover{border-color:var(--a-28);background:var(--a-08)}

.fsmega-know .km-wa{border:1px solid transparent;background:var(--btn);color:#FFFFFF}
.fsmega-know .km-wa svg{fill:#FFFFFF}
.fsmega-know .km-wa:hover{transform:translateY(-2px);box-shadow:var(--sh-a)}

/* ═══════════════════════════════════════════════════════════════════════════
   כפתור וואטסאפ צף — צד שמאל + ירוק מותג
   ───────────────────────────────────────────────────────────────────────────
   היה inset-inline-start:22px, שבעמוד RTL מתורגם ל-right ולכן הכפתור ישב
   בימין. כאן קובעים מיקום פיזי (left) כדי שלא יתהפך עם כיוון הכתיבה.
   הצבע הוא היוצא-דופן היחיד ממערכת הצבעים: #25D366 הוא צבע המותג של
   וואטסאפ, וזיהוי מיידי שלו שווה יותר מהאחידות. הכפתור עצמו בולט היטב
   מול רקע העמוד (#F4F7FA), והלוגו הפנימי פטור מדרישת הניגודיות כסמל מותג.
   במובייל הכפתור ממילא מוסתר — שם הוואטסאפ יושב בסרגל התחתון.
   ═══════════════════════════════════════════════════════════════════════════ */
.wa{inset-inline-start:auto;inset-inline-end:auto;left:22px;right:auto;
  background:#25D366;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.48),0 0 0 4px rgba(37,211,102,.12)}
.wa::after{border-color:#25D366}
.wa:hover{background:#1FB855;
  box-shadow:0 16px 38px -10px rgba(37,211,102,.55),0 0 0 5px rgba(37,211,102,.16)}

/* ═══════════════════════════════════════════════════════════════════════════
   מניעת כפילות מול כפתור הוואטסאפ הצף של אלמנטור
   ───────────────────────────────────────────────────────────────────────────
   נוסף כעת Floating Button מקורי של Elementor Pro עם תנאי "כל האתר", כך
   שהכפתור מופיע בכל עמוד — כולל העמוד הזה. הכפתור שבנינו כאן (.wa) הפך
   לכפיל שיושב כמעט באותו מקום (22px מול 25px), ולכן הוא מוסתר.
   במובייל ההפך: שם הוואטסאפ כבר יושב בסרגל התחתון, והכפתור הצף של אלמנטור
   היה נוחת עליו — ולכן דווקא הוא מוסתר מתחת ל-760px.
   ═══════════════════════════════════════════════════════════════════════════ */
.wa{display:none !important}
@media(max-width:760px){
  .e-contact-buttons{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   QA לפני מסירה — תיקוני צבע, ניגודיות, מקצב ומטרות מגע
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. אחידות וואטסאפ — כל מה שמקושר ל-wa.me מקבל את ירוק המותג.
      נמצא בבדיקה: כפתור המגה־מניו היה כחול (#2A72AD) והפריט בסרגל התחתון
      היה בצבע הטקסט הרגיל. עכשיו שלושתם — צף, מגה־מניו וסרגל — זהים. */
.fsmega-know .km-wa{background:#25D366}
.fsmega-know .km-wa:hover{background:#1FB855;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.55)}
.tabbar a[href*="wa.me"]{color:#25D366}
.tabbar a[href*="wa.me"] svg{stroke:#25D366;fill:none}

/* 2. כוכבי הדירוג — #E8A33D נכשל בניגודיות (2.16:1 מול 4.5 נדרש) והוא גם
      גוון כתום/צהוב שמערכת הצבעים אוסרת במפורש. הוחלף לכחול המותג
      לרקעים בהירים (#0F5C96 = 7:1). */
.tst-stars{color:var(--eye-ink)}

/* 3. תווית הקטגוריה בכרטיסי מרכז הידע — 4.36:1, מפספס את הסף ב-0.14.
      החלפה ל-eye-ink מביאה ל-~5.5:1. */
.kc-tag{color:var(--eye-ink)}

/* 4. מקצב — סקשן יצירת הקשר פתח ב-148px ריפוד עליון מול 112px בכל השאר,
      ויחד עם 112px התחתון של השאלות הנפוצות נוצר חלל של 260px בדיוק לפני
      ה-CTA החשוב בעמוד. מיושר חזרה לסולם. */
#contact{padding-top:var(--s8)}

/* 5. מטרות מגע במובייל — קישורי הפוטר נמדדו 18–27px גובה, מתחת לסף
      WCAG 2.5.8 (24px) ורחוק מהנוח למגע. ריפוד אנכי מביא אותם ל-40px+
      בלי לשנות את המראה. */
@media(max-width:760px){
  .ft-col a,.ft-c a,.ft-legal a,.ft-credit a{
    display:inline-flex;align-items:center;min-height:40px}
  .ft-col li{margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   שדרוגי חומר — גרעין, מסגרות תמונה, טבעת גרדיאנט
   ───────────────────────────────────────────────────────────────────────────
   העמוד כבר עשיר בתנועה (חשיפה עם blur, פרלקסה, כרטיסים נערמים, קו זמן).
   מה שחסר לא היה עוד אנימציה אלא איכות חומר — שלושת אלה עובדים על זה,
   כולם CSS בלבד, בלי שינוי מבנה ובלי תלות חדשה.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. גרעין על משטחים כהים
   נייבי שטוח נראה כמו מילוי. שכבת רעש של ~3.5% במיזוג overlay גורמת לו
   להיראות כמו חומר מודפס. ה-::before כבר תפוס בגרדיאנטים הרדיאליים, ולכן
   הגרעין יושב ב-::after — מעל הרקע, מתחת לתוכן (שיושב ב-z-index:1). */
.sec-dark::after,.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
.cta>*{position:relative;z-index:1}

/* 2. מסגרות תמונה עם עומק
   היה: גבול 1px + צל. נוסף קו הדגשה בהיר בקצה העליון — האור שנתפס בשפה —
   וטבעת חיצונית דקה מתחת לצל. התמונה נקראת כמונחת, לא כמודבקת. */
.fig{box-shadow:0 0 0 1px var(--ink-04),0 2px 6px -2px var(--ink-08),var(--sh-l)}
.fig-fr{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.5),
  inset 0 0 0 1px var(--a-28),
  inset 0 -70px 90px -60px var(--a-45)}
.fig-d .fig-fr{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.18),
  inset 0 0 0 1px var(--a-28),
  inset 0 -70px 90px -60px var(--a-45)}

/* 3. טבעת גרדיאנט ב-hover לכרטיסים
   עד היום כל סוגי הכרטיסים קיבלו בדיוק אותו גבול אפור שהופך לתכלת אחיד.
   כאן הגבול עצמו נהיה גרדיאנט שדועך — מבדיל בין הכרטיסים ונותן עומק.
   הטכניקה דורשת mask-composite; בלעדיו הפסאודו היה נצבע כבלוק מלא,
   ולכן הכל עטוף ב-@supports ופשוט לא קיים בדפדפן שלא תומך. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .cc,.ac,.pc,.kc,.tst{position:relative}
  .cc::before,.ac::before,.pc::before,.kc::before,.tst::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(140deg,var(--accent) 0%,var(--btn) 45%,transparent 80%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .45s var(--e-io);pointer-events:none;z-index:3}
  .cc:hover::before,.ac:hover::before,.pc:hover::before,
  .kc:hover::before,.tst:hover::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .cc::before,.ac::before,.pc::before,.kc::before,.tst::before{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   אייקוני כרטיסי הליבה — אריח גרדיאנט מותג + אייקון לבן
   ───────────────────────────────────────────────────────────────────────────
   האריח היה תכלת שקוף עם אייקון כהה — נקי אבל חיוור, וזהה בכל חמשת
   הכרטיסים. כאן הוא נהיה משטח גרדיאנט מלא (טורקיז→כחול) עם אייקון לבן,
   צל צבעוני והדגשה עליונה שמדמה אור. צבעוני ובולט, אבל אותה צורה בכולם.

   נבדקו קודם שני מסלולים אחרים ונפסלו על סמך מדידה בגודל האמיתי (52px):
   אייקוני מאגר — חמש צורות וחמישה צבעים שונים; אייקוני AI — קו דק שנמרח
   ללא קריאוּת, או צורה עבה שנראתה כתג אפליקציה גנרי.

   הגיאומטריה עצמה הוחלפה ל-index.html: כל אייקון מתאר עכשיו את הנושא שלו
   (קופסת בקרה, בית עם שבב, מודול DIN, גלי רשת, שעון טריגר) במקום
   צורות מופשטות שהתאימו לכל דבר.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc .ic{
  background:linear-gradient(140deg,var(--accent) 0%,var(--btn) 100%);
  border:0;
  box-shadow:0 10px 22px -10px var(--btn-45),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .5s var(--e),box-shadow .5s var(--e),filter .5s var(--e)}
.cc .ic svg{width:25px;height:25px;stroke:#FFFFFF;stroke-width:1.85;color:#FFFFFF}
.cc:hover .ic{
  transform:scale(1.07) rotate(-4deg);
  box-shadow:0 16px 30px -10px var(--btn-45),inset 0 1px 0 rgba(255,255,255,.55);
  filter:saturate(1.12)}

/* בכרטיס הכהה הצל הצבעוני נבלע ברקע — שם ההפרדה מגיעה מטבעת בהירה דקה */
.cc-lg .ic{
  background:linear-gradient(140deg,var(--accent) 0%,var(--btn) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 26px -12px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.45)}
.cc-lg .ic svg{stroke:#FFFFFF}


/* ═══════════════════════════════════════════════════════════════════════════
   רכזת מחשב הבקרה — סקשן #core
   ───────────────────────────────────────────────────────────────────────────
   מחליף את רשת חמשת הכרטיסים שסתרה את המסר של הסקשן ("מוח אחד לנכס")
   בפריסת רכזת עם קווים מתחברים — שהיא המסר עצמו.

   דסקטופ: ליבה במרכז, ארבעה צמתי פלטפורמה, שישה כרטיסי מכשיר.
   מובייל:  אותה רכזת רדיאלית בקטן — ליבה + ארבעה צמתים בלבד, והמכשירים
            יורדים לרשת דו-טורית מתחת שנחשפת בסוף האנימציה. שלוש טבעות
            פשוט לא נכנסות ל-345px של רוחב שימושי בלי להפוך לספגטי.
   ═══════════════════════════════════════════════════════════════════════════ */

.hub-wrap{position:relative}
.hub-pin{position:sticky;top:calc(var(--nav-h) + 18px);
  --p:0}                       /* התקדמות הגלילה, 0→1, נכתב מ-JS.
     יושב כאן ולא על הבמה כדי שגם מד ההתקדמות שמתחת יירש אותו. */

.hub-stage{
  position:relative;width:100%;max-width:1180px;margin-inline:auto;
  aspect-ratio:16/10;
  /* הכותרת נעוצה יחד עם הבמה, ולכן הבמה חייבת להשאיר לה מקום —
     בלי התקרה הזו שורת הכרטיסים העליונה נחתכת מתחת להדר. */
  max-height:calc(100vh - var(--nav-h) - 268px)}

/* ── הקווים ── */
.hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hub-svg path{
  fill:none;stroke:url(#hubLine);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}

/* ── בסיס לכל צומת ── */
.hub-node{
  position:absolute;transform:translate(-50%,-50%);
  inset-inline-start:auto;   /* מיקום פיזי בלבד — הבמה לא מתהפכת ב-RTL */
  opacity:0}

/* ── הליבה ──
   שכבות הרקע הן מה שהופך את הריבוע ליחידת חומרה: נורית סטטוס טורקיז
   לרוחב התחתית, ופס אור בשליש העליון שמדמה את הפאה העליונה של המארז.
   בלעדיהן זה נקרא כקופסה שחורה עם לוגו — וזה בדיוק מה שקרה בגרסה
   הראשונה.                                                              */
.hub-core{
  width:194px;height:194px;border-radius:42px;
  display:grid;place-items:center;
  background:
    linear-gradient(90deg,transparent 22%,var(--accent) 22% 78%,transparent 78%)
      no-repeat center 79%/100% 2px,
    linear-gradient(180deg,rgba(255,255,255,.09) 0 30%,transparent 30%),
    linear-gradient(155deg,#132447 0%,var(--primary) 55%,#050B1C 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 0 10px rgba(0,210,255,.05),
    0 30px 60px -26px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.16);
  opacity:1}
.hub-core::before{
  content:"";position:absolute;inset:-26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--a-14) 0%,transparent 68%)}
.hub-core::after{
  content:"";position:absolute;inset:-4px;border-radius:46px;pointer-events:none;
  border:1px solid var(--a-28);opacity:.55;
  animation:hubBreathe 3.6s var(--e-io) infinite}
@keyframes hubBreathe{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.045);opacity:.16}}

/* תוכן המארז: לוגו, קו מפריד, ושורת Home Assistant.
   ה-HA יושב כאן ולא כצומת חיצוני כי הוא לא מכשיר שמתחבר לרכזת —
   הוא התוכנה שרצה עליה, וזה ההבדל שכל הסקשן מנסה להסביר. */
.hub-core-in{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:12px;padding-inline:14px;margin-top:-6px}
.hub-core .lg{width:122px;height:auto;color:#FFFFFF}
.hub-core-rule{width:74px;height:1px;
  background:linear-gradient(90deg,transparent,var(--a-28) 18% 82%,transparent)}
/* direction:ltr על העטיפה — צמד אייקון+שם מוצר לועזי נקרא משמאל
   לימין, ובלי זה האייקון נחת מימין למילים ונראה מנותק. */
.hub-core-ha{display:flex;align-items:center;gap:8px;direction:ltr}
.hub-core-ha svg{width:23px;height:23px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--accent);flex:0 0 auto}
.hub-core-ha b{font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:700;
  color:#FFFFFF;letter-spacing:.01em;white-space:nowrap}
/* הכיתוב מעוגן לליבה עצמה. בגרסה הקודמת הליבה איבדה position במובייל,
   העיגון "ברח" לאב הקדמון הקרוב, והכיתוב נחת בתחתית כל העץ.            */
.hub-core-cap{
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:'Assistant',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.08em;color:var(--eye-ink)}

/* ── טבעת 1: צמתי פלטפורמה ── */
.hub-plat{
  width:88px;height:88px;border-radius:26px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent) 0%,var(--btn) 100%);
  box-shadow:0 16px 30px -14px var(--btn-45),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .35s var(--e),box-shadow .35s var(--e)}
.hub-plat svg{width:32px;height:32px;fill:none;stroke:#FFFFFF;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;color:#FFFFFF}
.hub-plat b{position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:'Assistant',sans-serif;font-size:13px;font-weight:800;
  color:var(--primary);line-height:1.2}
.hub-plat:hover{transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 22px 38px -14px var(--btn-45),inset 0 1px 0 rgba(255,255,255,.55)}

/* ── טבעת 2: כרטיסי מכשיר ── */
.hub-dev{
  width:186px;padding:12px 14px;border-radius:18px;text-align:right;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 8px 20px -12px var(--ink-14),0 2px 5px -3px var(--ink-08);
  transition:transform .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e)}
.hub-dev:hover{
  transform:translate(-50%,-50%) translateY(-3px);
  box-shadow:0 16px 30px -14px var(--ink-14);border-color:var(--a-28)}
.hub-dev-top{display:flex;align-items:center;gap:9px;flex-direction:row-reverse;justify-content:flex-end}
.hub-dev-ic{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--a-08);border:1px solid var(--a-14)}
.hub-dev-ic svg{width:16px;height:16px;fill:none;stroke:var(--eye-ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--eye-ink)}
.hub-dev b{font-family:'Assistant',sans-serif;font-size:13.5px;font-weight:700;color:var(--primary);
  line-height:1.25;display:block}
.hub-dev em{display:block;font-style:normal;font-size:11.5px;line-height:1.45;
  color:var(--text);opacity:.82;margin-top:5px}

/* ── מד התקדמות דק מתחת לבמה ──
   overflow גלוי כדי שהכיתוב יוכל לשבת מתחת; המילוי מעוגל בעצמו
   ולכן אין צורך לחתוך אותו. הכיתוב דוהה ככל שהמערכת נפרשת. */
.hub-bar{position:relative;height:3px;width:200px;margin:18px auto 34px;
  border-radius:3px;background:var(--g-10)}
.hub-bar i{position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(var(--p,0));border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--btn))}
.hub-bar-cap{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:'Assistant',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--text);opacity:calc(.72 - var(--p,0) * .95);
  pointer-events:none}

.hub-head{max-width:720px;margin:0 auto 26px;text-align:center}
.hub-pin .hub-head h2{font-size:clamp(26px,2.4vw,38px);line-height:1.18;margin-bottom:8px}
.hub-pin .hub-head p{font-size:16px}

/* רשת המכשירים — קיימת רק במובייל, נבנית מ-JS */
.hub-grid{display:none}

/* ═══════════════════ מובייל — אותה רכזת, בקטן ═══════════════════ */
@media(max-width:1023px){
  .hub-pin{top:calc(var(--nav-h) + 8px)}

  .hub-stage{aspect-ratio:1/1;max-width:360px;max-height:none;margin-bottom:0}

  .hub-core{width:126px;height:126px;border-radius:30px}
  .hub-core::after{inset:-3px;border-radius:33px}
  .hub-core::before{inset:-18px}
  .hub-core-in{gap:8px;padding-inline:8px;margin-top:-4px}
  .hub-core .lg{width:80px}
  .hub-core-rule{width:50px}
  .hub-core-ha{gap:5px}
  .hub-core-ha svg{width:15px;height:15px}
  .hub-core-ha b{font-size:10px}
  .hub-core-cap{bottom:-22px;font-size:10.5px;letter-spacing:.06em}

  /* שישה צמתים במשושה על במה של 345px — הריבוע קטן מ-60 כדי
     שהתוויות של הצמתים הסמוכים לא ידרכו זו על זו. */
  .hub-plat{width:54px;height:54px;border-radius:17px;
    box-shadow:0 10px 20px -10px var(--btn-45),inset 0 1px 0 rgba(255,255,255,.45)}
  .hub-plat svg{width:22px;height:22px}
  .hub-plat b{top:calc(100% + 6px);font-size:9.5px;white-space:normal;
    width:88px;text-align:center;line-height:1.18}
  .hub-plat:hover{transform:translate(-50%,-50%)}

  .hub-svg path{stroke-width:1.4}

  /* המכשירים יורדים מתחת לרכזת — דו-טורי, כרטיסים קצרים ולא לרוחב מלא */
  .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;
    max-width:360px;margin:26px auto 0}
  .hub-grid .hub-dev{position:static;width:auto;transform:none;opacity:0;
    padding:10px 11px;border-radius:14px;text-align:right}
  .hub-grid .hub-dev:hover{transform:none}
  .hub-grid .hub-dev-top{gap:7px}
  .hub-grid .hub-dev-ic{width:26px;height:26px;border-radius:8px}
  .hub-grid .hub-dev-ic svg{width:14px;height:14px}
  .hub-grid .hub-dev b{font-size:12.5px;line-height:1.25}
  .hub-grid .hub-dev em{font-size:11px;line-height:1.4;margin-top:3px}

  .hub-bar{width:150px;margin:16px auto 30px}
  .hub-bar-cap{font-size:10.5px}
}

@media(max-width:400px){
  .hub-stage{max-width:330px}
  .hub-grid{max-width:330px}
  .hub-plat b{width:80px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .hub-core::after{animation:none}
  .hub-svg path{stroke-dashoffset:0 !important}
  .hub-node{opacity:1 !important}
  .hub-grid .hub-dev{opacity:1 !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACK TO TOP — כפתור צף לחזרה לראש העמוד
   מוצג רק אחרי גלילה, בצד ימין (הוואטסאפ תפוס בשמאל), ובמובייל מעל
   הסרגל התחתון. left/right פיזיים בכוונה: inset-inline מתהפך ב-RTL.
   ═══════════════════════════════════════════════════════════════════════════ */
.fs-top{position:fixed;z-index:150;left:auto;right:22px;bottom:22px;
  width:52px;height:52px;padding:0;border:0;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--primary-2) 0%,var(--primary) 100%);
  color:#FFFFFF;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 14px 30px -12px rgba(10,17,40,.62);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--e-io),transform .45s var(--e),
             background .3s var(--e-io),box-shadow .3s var(--e-io),
             visibility 0s linear .35s}
.fs-top.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fs-top svg{width:22px;height:22px;fill:none;stroke:#FFFFFF;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--e)}
.fs-top:hover{background:linear-gradient(160deg,var(--btn-lt) 0%,var(--btn) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 38px -12px var(--btn-45)}
.fs-top:hover svg{transform:translateY(-3px)}
.fs-top:active{transform:scale(.94)}
.fs-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* טבעת התקדמות דקה סביב הכפתור — כמה מהעמוד כבר נגלל.
   ב-@supports כי בלי mask ה-conic היה נראה כעיגול צבע מלא. */
@supports ((-webkit-mask:radial-gradient(#000,#000)) or (mask:radial-gradient(#000,#000))){
  .fs-top::before{content:"";position:absolute;inset:-5px;border-radius:50%;
    background:conic-gradient(var(--btn-lt) calc(var(--sp,0) * 1turn),
               rgba(72,159,223,.16) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
    pointer-events:none}
}

@media(max-width:760px){
  .fs-top{right:14px;width:46px;height:46px;
    bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .fs-top svg{width:20px;height:20px}
}

@media(prefers-reduced-motion:reduce){
  .fs-top{transition:opacity .2s linear,visibility 0s linear .2s}
  .fs-top.on{transition-delay:0s}
  .fs-top:hover svg{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIY — מסלול התקנה עצמית
   כרטיסים כהים על רקע בהיר: הסקשן שלפניו והאחריו כבר תופסים את שני
   המצבים, ולכן ניגוד ברמת הכרטיס במקום ברמת הסקשן — אחרת שני סקשנים
   כהים היו נדבקים זה לזה ומאבדים את מקצב העמוד.
   ═══════════════════════════════════════════════════════════════════════════ */
.diy{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--s6)}

.diy-c{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-l);
  background:linear-gradient(168deg,#132447 0%,var(--primary) 58%,#050B1C 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 56px -30px rgba(8,14,34,.55),0 3px 8px -4px var(--ink-08);
  transition:transform .5s var(--e),box-shadow .5s var(--e)}
.diy-c:hover{transform:translateY(-6px);
  box-shadow:0 36px 74px -30px rgba(8,14,34,.62),0 0 0 1px var(--a-28)}

.diy-ph{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden}
.diy-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e)}
.diy-c:hover .diy-ph img{transform:scale(1.045)}
/* הדרגתי אל צבע הכרטיס — בלי זה נוצר קו חיתוך חד בין התמונה לגוף */
.diy-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,17,40,0) 38%,rgba(10,17,40,.62) 78%,#0A1128 100%)}

.diy-b{position:relative;flex:1;padding:20px 24px 26px;display:flex;flex-direction:column}
/* inline-start ולא end: בעברית המספר צריך להוביל מימין, כמו בכרטיסי
   "למי זה מיועד" — אחרת הוא נוחת בצד ההפוך לכיוון הקריאה. */
.diy-n{position:absolute;top:-34px;inset-inline-start:24px;z-index:2;
  font-family:'Assistant',sans-serif;font-size:38px;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(0,210,255,.55)}
.diy-b h3{color:#FFFFFF;font-size:20px;font-weight:800;line-height:1.25;margin-bottom:9px}
.diy-b>p{color:var(--lite-70);font-size:15px;line-height:1.65;margin:0}

.diy-l{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:9px}
.diy-l li{position:relative;padding-inline-start:19px;
  font-size:13.5px;line-height:1.5;color:var(--lite-70);font-weight:500}
.diy-l li::before{content:"";position:absolute;inset-inline-start:1px;top:.52em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* פס הסיכום — מסביר את ההבדל מול ערכה מהמדף, ונושא את שתי הפעולות */
.diy-note{margin-top:var(--s5);border-radius:var(--r-l);padding:26px 30px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 10px 26px -18px var(--ink-14);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.diy-note-t{display:flex;align-items:flex-start;gap:16px;flex:1 1 460px}
.diy-note-ic{flex:0 0 auto;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent) 0%,var(--btn) 100%);
  box-shadow:0 12px 22px -12px var(--btn-45)}
.diy-note-ic svg{width:23px;height:23px;fill:none;stroke:#FFFFFF;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.diy-note h3{font-size:17.5px;font-weight:800;color:var(--primary);margin-bottom:5px;line-height:1.3}
.diy-note p{font-size:14.5px;line-height:1.65;color:var(--text);margin:0}
.diy-cta{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.diy-cta .btn{white-space:nowrap}

@media(max-width:1023px){
  .diy{grid-template-columns:1fr 1fr;gap:18px}
  .diy-c:last-child{grid-column:1 / -1}
  .diy-c:last-child .diy-ph{aspect-ratio:21/9}
}

@media(max-width:760px){
  .diy{grid-template-columns:1fr;gap:16px;margin-top:var(--s5)}
  .diy-c:last-child{grid-column:auto}
  .diy-c:last-child .diy-ph{aspect-ratio:16/10}
  .diy-c:hover{transform:none}
  .diy-b{padding:18px 20px 22px}
  .diy-n{font-size:32px;top:-28px;inset-inline-start:20px}
  .diy-b h3{font-size:18.5px}
  .diy-b>p{font-size:14.5px}

  .diy-note{padding:22px 20px;gap:18px;flex-direction:column;align-items:stretch}
  .diy-note-t{flex:1 1 auto;gap:13px}
  .diy-note-ic{width:40px;height:40px;border-radius:13px}
  .diy-note-ic svg{width:20px;height:20px}
  .diy-cta{flex-direction:column}
  .diy-cta .btn{width:100%;justify-content:center;white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  .diy-c,.diy-ph img{transition:none}
  .diy-c:hover{transform:none}
  .diy-c:hover .diy-ph img{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIENCE — כרטיסים שנערמים בגלילה
   כל כרטיס יושב באותה מסגרת בדיוק ונכנס מצד שמאל אל מעל הקודם, עם
   עצירה בסופו. זו לא מסילה שנעה: מסילה נקראת כמו החלפת שקופיות, ומה
   שנדרש כאן הוא חפיסה שנבנית — ולכן כל כרטיס absolute באותו מקום,
   ה-z-index עולה, והקודמים נשארים מתחת ומציצים בקצה.
   ═══════════════════════════════════════════════════════════════════════════ */
.aud-sec{padding:0}
.audx{position:relative}
.audx-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center}

.audx-stage{position:relative;width:min(1240px,92vw);height:min(660px,72vh)}
.audx-rail{position:absolute;inset:0}

.ap{position:absolute;inset:0;overflow:hidden;border-radius:30px;
  display:grid;grid-template-columns:1.02fr .98fr;grid-template-rows:1fr;
  background:linear-gradient(165deg,#132447 0%,var(--primary) 58%,#050B1C 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px -40px rgba(8,14,34,.75);
  will-change:transform,opacity;transform:translate3d(-125%,0,0);
  opacity:0}
.ap-intro{opacity:1}

.ap-copy{display:flex;flex-direction:column;justify-content:center;min-height:0;
  padding:0 clamp(28px,4vw,64px);position:relative;z-index:1}
.ap-eye{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:'Assistant',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.ap-eye::before{content:"";width:7px;height:7px;background:var(--accent);
  transform:rotate(45deg);flex:0 0 auto}
.ap-n{font-family:'Assistant',sans-serif;font-size:clamp(44px,4vw,68px);font-weight:900;
  line-height:.9;color:#FFFFFF;opacity:.14;margin-bottom:4px}
.ap h3{color:#FFFFFF;font-size:clamp(24px,2.4vw,38px);font-weight:900;
  line-height:1.12;margin-bottom:8px}
.ap-sub{color:var(--accent);font-size:clamp(14.5px,1.15vw,17.5px);font-weight:700;
  margin-bottom:14px}
.ap-copy>p:not(.ap-sub){color:var(--lite-70);font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.68;max-width:40ch;margin-bottom:18px}
.ap-l{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.ap-l li{position:relative;padding-inline-start:20px;color:var(--lite-70);
  font-size:14.5px;line-height:1.45;font-weight:500}
.ap-l li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;
  width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.ap-copy .btn{align-self:flex-start}

/* התמונה נקייה: ריכוך רק בקצה שנוגע בטקסט, ולא שכבת כהות על כל השטח —
   בגרסה הקודמת האפלה בלעה את התמונה ולא נשאר מה לראות. */
.ap-ph{position:relative;margin:0;overflow:hidden;min-height:0;height:100%}
.ap-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ap-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(270deg,rgba(10,17,40,0) 74%,rgba(10,17,40,.5) 94%,rgba(10,17,40,.78) 100%)}

.ap-intro .ap-copy{align-items:flex-start}
.ap-intro h2{color:#FFFFFF;font-size:clamp(30px,3.2vw,48px);font-weight:900;
  line-height:1.12;margin-bottom:16px}
.ap-intro p{color:var(--lite-70);font-size:clamp(15px,1.15vw,18px);line-height:1.68;
  max-width:44ch;margin-bottom:26px}
.ap-hint{display:inline-flex;align-items:center;gap:10px;
  font-family:'Assistant',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:var(--accent)}
.ap-hint::after{content:"";width:34px;height:1px;background:var(--accent);opacity:.6}

.audx-dots{list-style:none;display:flex;gap:26px;justify-content:center;
  padding:0;margin:24px 0 0}
.audx-dots li{display:flex;align-items:center;gap:9px;
  font-family:'Assistant',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--g-40);transition:color .4s var(--e-io)}
.audx-dots li i{width:26px;height:2px;border-radius:2px;background:var(--g-10);
  transition:background .4s var(--e-io),width .4s var(--e)}
.audx-dots li.on{color:var(--primary)}
.audx-dots li.on i{width:44px;background:var(--btn)}

@media(max-width:1023px){
  .audx-stage{width:94vw;height:min(600px,70vh)}
  .ap{grid-template-columns:1fr;grid-template-rows:38% 62%;border-radius:24px}
  .ap-ph{order:-1}
  .ap-ph::after{background:linear-gradient(0deg,rgba(10,17,40,.92) 2%,rgba(10,17,40,.3) 42%,rgba(10,17,40,0) 74%)}
  .ap-copy{padding:16px clamp(20px,4vw,34px) 0;justify-content:flex-start;margin-top:-30px}
  .ap-intro .ap-copy{justify-content:flex-start}
  .ap-n{font-size:40px}
}

/* במובייל אין נעיצה: חפיסה שנערמת באצבע נלחמת בגלילה האנכית של העמוד */
@media(max-width:760px){
  .audx-pin{position:static;height:auto;overflow:visible;background:transparent;display:block}
  .audx-stage{position:static;width:auto;height:auto}
  .audx-rail{position:static;display:grid;gap:16px}
  .ap{position:static;transform:none !important;grid-template-rows:auto auto;
    border-radius:var(--r-l);box-shadow:0 20px 46px -26px rgba(8,14,34,.5)}
  .ap-ph{aspect-ratio:16/10;height:auto}
  .ap-copy{padding:0 20px 24px;margin-top:-40px}
  .ap-intro .ap-copy{align-items:flex-start}
  .ap-intro h2{font-size:26px}
  .ap-intro p{font-size:14.5px;margin-bottom:0}
  .ap-hint{display:none}
  .ap h3{font-size:22px}
  .ap-copy .btn{width:100%;justify-content:center}
  .audx-dots{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT — עמוד אודות. משתמש בשפה של עמוד הבית ומוסיף רק את מה שחסר.
   ═══════════════════════════════════════════════════════════════════════════ */
.ab-hero{padding-top:calc(var(--nav-h) + var(--s7))}
.ab-h1{font-size:clamp(30px,4vw,52px);font-weight:900;line-height:1.12;margin-bottom:var(--s3)}
.ab-lead{font-size:clamp(16.5px,1.35vw,20px);line-height:1.7;color:var(--primary-2);
  font-weight:600;margin-bottom:var(--s3)}

.ab-stats{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin:var(--s4) 0 var(--s4)}
.ab-stats div{display:flex;flex-direction:column;gap:2px}
.ab-stats b{font-family:'Assistant',sans-serif;font-size:clamp(26px,2.6vw,36px);font-weight:900;
  color:var(--primary);line-height:1}
.ab-stats span{font-size:13.5px;color:var(--text)}
.ab-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── הדרך: ארבעה שלבים על רקע כהה ── */
.ab-path{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:var(--s6)}
.ab-step{position:relative;padding:26px 24px 28px;border-radius:var(--r-l);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:transform .45s var(--e),border-color .45s var(--e),background .45s var(--e)}
.ab-step:hover{transform:translateY(-6px);border-color:var(--a-28);background:rgba(255,255,255,.06)}
.ab-step-n{display:block;font-family:'Assistant',sans-serif;font-size:34px;font-weight:900;
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--a-28);margin-bottom:14px}
.ab-step h3{color:#FFFFFF;font-size:18px;font-weight:800;margin-bottom:8px;line-height:1.25}
.ab-step p{color:var(--lite-70);font-size:14.5px;line-height:1.65;margin:0}

/* ── למה זה משנה ── */
.ab-why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ab-why .ac{padding:26px 24px}
.ab-why .ac h3{font-size:18px;font-weight:800;color:var(--primary);margin-bottom:8px;line-height:1.25}
.ab-why .ac p{font-size:14.5px;line-height:1.65;color:var(--text);margin:0}

/* ── ציטוט ── */
.ab-quote{position:relative;padding:clamp(30px,4vw,52px);border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;justify-content:center}
.ab-quote-mark{font-family:'Assistant',sans-serif;font-size:86px;line-height:.6;color:var(--accent);
  opacity:.5;margin-bottom:14px}
.ab-quote p{color:#FFFFFF;font-size:clamp(17px,1.6vw,22px);line-height:1.6;font-weight:600;
  margin-bottom:20px}
.ab-quote b{color:var(--accent);font-family:'Assistant',sans-serif;font-size:15px;font-weight:800}
.ab-quote>span:last-child{color:var(--lite-40);font-size:13px}

/* ── מה נכנס למערכת ── */
.ab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ab-item{padding:20px 22px;border-radius:var(--r-m,18px);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:border-color .4s var(--e),background .4s var(--e)}
.ab-item:hover{border-color:var(--a-28);background:rgba(255,255,255,.07)}
.ab-item b{display:block;color:#FFFFFF;font-family:'Assistant',sans-serif;font-size:15.5px;
  font-weight:800;margin-bottom:5px;line-height:1.3}
.ab-item span{display:block;color:var(--lite-70);font-size:13.5px;line-height:1.5}

/* ── תהליך ── */
.ab-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ab-fl{position:relative;padding:26px 24px 28px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-s);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.ab-fl:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.ab-fl>span{display:block;font-family:'Assistant',sans-serif;font-size:15px;font-weight:900;
  color:var(--btn);margin-bottom:10px;letter-spacing:.06em}
.ab-fl h3{font-size:17.5px;font-weight:800;color:var(--primary);margin-bottom:7px;line-height:1.25}
.ab-fl p{font-size:14.5px;line-height:1.65;color:var(--text);margin:0}

.ab-end .ab-cta{justify-content:center;margin-top:var(--s4)}
.ab-end p{max-width:60ch;margin-inline:auto}

@media(max-width:1023px){
  .ab-path,.ab-why,.ab-flow{grid-template-columns:1fr 1fr}
  .ab-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .ab-hero{padding-top:calc(var(--nav-h) + var(--s5))}
  .ab-path,.ab-why,.ab-flow,.ab-grid{grid-template-columns:1fr;gap:14px}
  .ab-stats{gap:20px}
  .ab-cta{flex-direction:column}
  .ab-cta .btn{width:100%;justify-content:center}
  .ab-quote{padding:26px 22px}
  .ab-quote-mark{font-size:60px}
  .ab-step:hover,.ab-fl:hover{transform:none}
}

/* ── תפריט עליון: אף תווית לא נשברת לשתי שורות (10.08.26) ──
   שמונת הפריטים נכנסים לשורה אחת בהפרש של פיקסלים בודדים. כל שינוי קטן
   ברוחב, למשל פונט חלופי בזמן שהפונט Heebo עדיין נטען, סרגל גלילה או
   עיגול של רמת זום, שבר את כולם לשתי שורות בבת אחת. nowrap מונע את
   השבירה, והצמצום מתחת ל-1280 נותן את המרווח שהיה חסר. */
.nav-links > a,
.nav-links > .has-fsmega > .fsmega-trig{white-space:nowrap}
@media(max-width:1280px){
  .nav-links{gap:0}
  .nav-links > a,.nav-links > .has-fsmega > .fsmega-trig{padding:9px 6px;font-size:14px}
  .nav-links a::after,.nav-links .fsmega-trig::after{inset-inline:6px}
}

/* ── סקשן הפתרונות: תמונות תואמות נושא וצל אחיד (10.08.26) ──
   שש התמונות הקודמות לא הראו את מה שהכרטיס מבטיח. באבטחה היה מסדרון בלי
   מצלמה, באקלים סלון בלי מזגן, ובמולטימדיה מתג לבן על קיר לבן. הוחלפו
   בתמונות שבהן הרכיב עצמו נמצא בפריים: קרניז תאורה, לוח חשמל עם ממסרים,
   תריס גלילה ממונע, מזגן עם בקר אקלים, מצלמת IP ואינטרקום וידאו.

   בנוסף, הניגודיות לטקסט הגיעה מ-radial-gradient במרכז הכרטיס, שנראה ככתם
   עגול מטושטש על גבי התמונה. במקומו באה הכהיה אחידה של כל התמונה עם
   גרדיאנט אנכי עדין: אין צורה מלאכותית, והטקסט הלבן קריא בכל שטח הכרטיס. */
.gp[data-i="0"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-lighting-v2.jpg")}
.gp[data-i="1"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-electric-v2.jpg")}
.gp[data-i="2"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-blinds-v2.jpg")}
.gp[data-i="3"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-climate-v2.jpg")}
.gp[data-i="4"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-security-v3.jpg")}
.gp[data-i="5"]{--bg:url("https://organized-blue-owl.64-204-250-78.cpanel.site/wp-content/uploads/2026/08/feldman-gp-media-v2.jpg")}
.gp.is-open::before{filter:brightness(.68) saturate(.95) contrast(1.03);transform:scale(1.03);background-image:var(--bg);background-blend-mode:normal}
.gp.is-open::after{background:linear-gradient(to top,rgba(8,14,34,.62) 0%,rgba(8,14,34,.44) 55%,rgba(8,14,34,.36) 100%)}

/* ── הדר דסקטופ: המבורגר, רוחב הפס ואייקון הוואטסאפ (10.08.26) ── */

/* 1. ההמבורגר הופיע גם בדסקטופ. הכלל `.burger{display:none}` נוצח על ידי
   כלל של התבנית — `:is(.btn,.button,button,[type=submit],[type=button])
   {display:inline-flex}` — שיש לו אותה ספציפיות ומופיע אחריו בסדר הטעינה.
   העלאת הספציפיות פותרת בלי !important. */
header#nav .nav-act .burger{display:none}
@media(max-width:1120px){header#nav .nav-act .burger{display:flex}}

/* 2. הפס היה 1240px בזמן שהתוכן דורש כ-1345px, ולכן שורת האייקונים גלשה
   שמאלה אל מחוץ לפס הלבן. הרחבה ל-1440px מכניסה הכל פנימה עם מרווח,
   וברוחבי ביניים הרכיבים מתכווצים בהדרגה במקום לגלוש. */
.nav-in,.mnav{width:min(1440px,calc(100vw - 40px))}
@media(max-width:1340px){
  .nav-in{gap:14px}
  .nav-act{gap:6px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:19px;height:19px}
  .lg{height:30px}
}

/* 3. הגליף הרשמי של וואטסאפ צבוע מלא נראה ככתם ירוק בגודל 21px, כי
   השפופרת הלבנה שבתוכו נבלעת. במקומו העיגול הירוק הרשמי עם הגליף בלבן:
   קריא בגודל קטן, נאמן למותג, ומסמן את הכפתור כדרך ליצירת קשר. */

/* בין 1120px ל-1340px הפס עדיין הכיל את כל הפריטים אבל שורת האייקונים
   נדחפה 19px מעבר לשוליו. הקטנה מדורגת של הקישורים והאייקונים מחזירה
   מרווח חיובי בכל הטווח, בלי להסתיר פריט תפריט ובלי לוותר על אייקון. */
@media(max-width:1220px){
  .nav-links > a,.nav-links > .has-fsmega > .fsmega-trig{padding:7px 4px;font-size:13.2px}
  .nav-act{gap:4px}
  .icon-btn{width:34px;height:34px}
}

/* ── מגה מרכז ידע: כותרות שגלשו מחוץ לעמודה (10.08.26) ── */
/* `.km-item` יורש white-space:nowrap, וב-`.km-tx b` לא היה overflow:hidden,
   ולכן כותרת ארוכה נמתחה 108px מעבר לעמודה ויצאה אל מחוץ לפאנל הלבן.
   כותרות מאמרים בעברית ארוכות מדי לשורה אחת עם שלוש נקודות, ולכן שתי
   שורות עם חיתוך, ותת-הכותרת שורה אחת. */
.fsmega-know .km-item{white-space:normal}
.fsmega-know .km-tx{min-width:0;overflow:hidden}
.fsmega-know .km-tx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fsmega-know .km-tx em{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ── התיקון של ה-nowrap דלף לתוך תפריטי המגה (10.08.26) ── */
/* הכלל `.nav-links a{white-space:nowrap}` נועד לשמונת הפריטים בשורה
   העליונה, אבל הוא חל גם על כל `a` בתוך פאנלי המגה: כותרות המאמרים
   במרכז הידע נמתחו 108px מעבר לעמודה ויצאו אל מחוץ לפאנל הלבן, וכיתוב
   התמונה ב'בית חכם' וב'חנות' נחתך באמצע מילה. הכלל צומצם לצאצאים
   ישירים, וכאן נסגרות גם השורות עצמן. */
.fsmega a{white-space:normal}
.fsmega .fsmega-promo-in b,
.fsmega .fsmega-promo-in em{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fsmega .fsmega-item b{overflow-wrap:anywhere}
.fsmega .fsmega-item em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── פאנל 'בית חכם' חרג 8px מקצה המסך ב-1140px (10.08.26) ── */
/* הפאנלים ממורכזים על ה-trigger שלהם. 'בית חכם' הוא הפריט הימני ביותר,
   ולכן ככל שהמסך צר יותר המרכז שלו מתקרב לקצה והפאנל בולט החוצה. צמצום
   של 40px בטווח שמתחת ל-1200px מחזיר מרווח חיובי עד 1121px, שם ממילא
   התפריט עובר להמבורגר. */
@media(max-width:1200px){
  /* ספציפיות (0,2,0) — כדי לגבור על .nav-links .fsmega שכבר קיים ב-1440 */
  .nav-links .fsmega{width:min(620px,90vw)}
  .nav-links .fsmega-shop{width:min(700px,90vw)}
}

/* ── מובייל: החלל הריק בעמוד הבית (10.08.26) ── */
/* הרכזת ב-#core הייתה נעוצה עם מסלול גלילה של 750-850px. הבלוק הנעוץ
   הוא כ-880px — גבוה מהשטח הגלוי בטלפון — ולכן שש כרטיסי המכשירים
   נחתכו, ומה שנשאר היה גלילה ארוכה שבה שום דבר לא זז. במובייל אין
   יותר נעיצה: הכל פרוש, ונחשף כשהסקשן נכנס למסך. */
@media(max-width:1023px){
  .hub-pin{position:static;top:auto}
  .hub-bar{display:none}

  /* אין חשיפה-בגלילה במובייל. המנגנון מסתמך על IntersectionObserver,
     ובפועל חלק גדול מהאלמנטים נשארו ב-opacity:0 — מסך לבן לגמרי
     באמצע העמוד. בטלפון הרווח מהאנימציה קטן והמחיר גדול, ולכן כאן
     הכל פשוט גלוי. בדסקטופ האנימציה נשארת. */
  .rv,.rv.in{opacity:1 !important;transform:none !important;filter:none !important}

  /* טקסטים של 10-11px לא נקראים על מסך טלפון. */
  .hub-core-ha b{font-size:11.5px}
  .hub-core-cap{font-size:12px}
  .hub-grid .hub-dev em{font-size:12px}

  /* כותרות בעברית עם line-height 1.12 נראות דחוסות. */
  .sec h2,.sec .grad{line-height:1.18}
}

/* fsmega-sol-v1 mnav sub */
.mnav-sub{display:flex;flex-direction:column;margin:-2px 0 8px;padding-inline-start:14px;border-inline-start:2px solid rgba(255,255,255,.14)}
.mnav-sub a{font-size:14px;opacity:.82;padding-block:8px}
.mnav-sub a:hover{opacity:1}

/* fsmega-sol-v1 tight band */
@media(max-width:1180px){
  header#nav .nav-in{gap:10px}
  header#nav .nav-act{gap:3px}
  header#nav .nav-act .icon-btn{width:31px;height:31px}
  header#nav .nav-act .icon-btn svg{width:17px;height:17px}
  header#nav .brand .lg{height:27px}
  header#nav .nav-links > a,
  header#nav .nav-links > .has-fsmega > .fsmega-trig{padding:7px 3px;font-size:12.8px}
}

/* fsmega-sol-v1 clamp first panel */
@media(max-width:1180px){
  header#nav .nav-links > .has-fsmega:first-child > .fsmega{left:auto;right:0;transform:none}
  header#nav .nav-links > .has-fsmega:first-child.is-open > .fsmega,
  header#nav .nav-links > .has-fsmega:first-child > .fsmega[aria-hidden="false"]{transform:none}
}

/* fq-faq-v1 */
.fq{--ink:#0a1128;--txt:#475569;--pri:#2a72ad;--line:rgba(10,17,40,.08);font-family:Assistant,system-ui,sans-serif;direction:rtl}
.fq *{box-sizing:border-box}
.fq-wrap{display:grid;grid-template-columns:290px minmax(0,1fr);gap:56px;align-items:start;max-width:1180px;margin:0 auto;padding:0 20px}
.fq-side-in{position:sticky;top:110px}
.fq-side-h{font-size:12.5px;font-weight:800;letter-spacing:1.6px;color:var(--pri);margin:0 0 12px}
.fq-toc{display:flex;flex-direction:column;gap:2px;margin:0 0 22px}
.fq-toc a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;color:var(--txt);text-decoration:none;font-size:15px;font-weight:600;line-height:1.35;transition:background .18s,color .18s}
.fq-toc a:hover{background:#fff;color:var(--ink)}
.fq-toc a.on{background:#fff;color:var(--ink);box-shadow:0 2px 14px rgba(10,17,40,.07);font-weight:800}
.fq-toc b{font-size:12.5px;font-weight:700;color:#94a3b8;background:rgba(10,17,40,.05);border-radius:999px;padding:2px 8px;min-width:26px;text-align:center}
.fq-toc a.on b{background:rgba(42,114,173,.12);color:var(--pri)}
.fq-search{position:relative;margin:0 0 18px}
.fq-search input{width:100%;height:46px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 42px 0 38px;font:600 15px Assistant,sans-serif;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}
.fq-search input::placeholder{color:#9aa7b8;font-weight:500}
.fq-search input:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(42,114,173,.12)}
.fq-search svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#9aa7b8;stroke-width:2;pointer-events:none}
.fq-clear{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:rgba(10,17,40,.06);color:var(--txt);font:700 15px/1 Assistant,sans-serif;cursor:pointer;display:none}
.fq-clear.on{display:block}
.fq-cta{display:block;border-radius:16px;background:linear-gradient(155deg,#123056,#0a1128);color:#fff;text-decoration:none;padding:18px 18px 16px}
.fq-cta b{display:block;font-size:15.5px;font-weight:800;line-height:1.4;margin:0 0 5px}
.fq-cta em{display:block;font-style:normal;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.fq-cta span{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:13.5px;font-weight:800;color:#7fc0f5}
.fq-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.fq-cat{scroll-margin-top:120px}
.fq-cat + .fq-cat{margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.fq-eye{display:block;font-size:12.5px;font-weight:800;letter-spacing:1.6px;color:var(--pri);margin:0 0 10px}
.fq-cat h2{font-size:32px;font-weight:900;line-height:1.24;color:var(--ink);margin:0 0 10px;letter-spacing:-.2px}
.fq-lead{font-size:16.5px;line-height:1.75;color:var(--txt);margin:0 0 26px;max-width:62ch}
.fq-fig{margin:0 0 30px;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px -28px rgba(10,17,40,.4)}
.fq-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fq-i{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fq-i:hover{border-color:rgba(42,114,173,.28)}
.fq-i.open{border-color:rgba(42,114,173,.36);box-shadow:0 14px 34px -26px rgba(10,17,40,.55)}
.fq-i h3{margin:0;font-size:inherit;font-weight:inherit}
.fq-q{width:100%;display:flex;align-items:flex-start;gap:14px;text-align:start;background:none;border:0;cursor:pointer;padding:19px 22px;font:800 17.5px/1.5 Assistant,sans-serif;color:var(--ink)}
.fq-q span{flex:1;min-width:0}
.fq-q i{flex:none;width:26px;height:26px;margin-top:2px;border-radius:50%;background:rgba(42,114,173,.09);position:relative;transition:background .2s}
.fq-q i::before,.fq-q i::after{content:"";position:absolute;inset:50% 7px auto 7px;height:2px;border-radius:2px;background:var(--pri);transform:translateY(-50%);transition:transform .25s,opacity .2s,background .2s}
.fq-q i::after{transform:translateY(-50%) rotate(90deg)}
.fq-i.open .fq-q i{background:var(--pri)}
.fq-i.open .fq-q i::before,.fq-i.open .fq-q i::after{background:#fff}
.fq-i.open .fq-q i::after{transform:translateY(-50%) rotate(0);opacity:0}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.fq-i.open .fq-a{grid-template-rows:1fr}
.fq-a > div{overflow:hidden}
.fq-a-in{padding:0 22px 22px;border-top:1px solid transparent}
.fq-i.open .fq-a-in{border-top-color:var(--line);padding-top:18px}
.fq-a p{font-size:16.5px;line-height:1.85;color:var(--txt);margin:0 0 13px}
.fq-a p:last-child{margin-bottom:0}
.fq-a a{color:var(--pri);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(42,114,173,.35)}
.fq-a a:hover{border-bottom-color:var(--pri)}
.fq-none{display:none;text-align:center;padding:44px 20px;border:1px dashed var(--line);border-radius:16px;color:var(--txt);font-size:16.5px;line-height:1.8}
.fq-none.on{display:block}
.fq-none b{display:block;color:var(--ink);font-size:19px;margin-bottom:8px}
.fq.filtering .fq-cat{padding-top:0;margin-top:34px;border-top:0}
.fq.filtering .fq-fig,.fq.filtering .fq-lead,.fq.filtering .fq-eye{display:none}
.fq-cat[hidden],.fq-i[hidden]{display:none}
@media(max-width:1023px){
.fq-wrap{grid-template-columns:1fr;gap:24px;padding:0 16px}
.fq-side-in{position:static}
.fq-side-h{display:none}
.fq-toc{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}
.fq-toc::-webkit-scrollbar{display:none}
.fq-toc a{flex:none;background:#fff;border:1px solid var(--line);padding:9px 14px;font-size:14px;border-radius:999px}
.fq-toc b{display:none}
.fq-cta{margin-top:6px}
.fq-cat h2{font-size:25px}
.fq-cat + .fq-cat{margin-top:44px;padding-top:38px}
.fq-q{font-size:16px;padding:16px 17px;gap:11px}
.fq-a-in{padding:0 17px 18px}
.fq-a p,.fq-lead{font-size:16px}
}

/* fq-faq-v1 overrides */
.fq .fq-q{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;text-align:right!important;
 background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
 font-family:Assistant,system-ui,sans-serif!important;font-size:17.5px!important;font-weight:800!important;line-height:1.5!important;letter-spacing:normal!important;text-transform:none!important;
 color:#0a1128!important;height:auto!important;min-height:0!important;width:100%!important;padding:19px 22px!important;margin:0!important;gap:14px!important}
.fq .fq-q:hover{background:transparent!important;color:#0a1128!important}
.fq .fq-q span{display:block!important;flex:1 1 auto!important;min-width:0!important;text-align:right!important;color:inherit!important;font:inherit!important}
.fq .fq-q i{flex:0 0 26px!important;width:26px!important;height:26px!important;margin:2px 0 0!important;padding:0!important;font-style:normal!important;background:rgba(42,114,173,.09);border-radius:50%;position:relative;transition:background .2s}
.fq .fq-i.open .fq-q i{background:#2a72ad}
.fq .fq-search{position:relative!important}
.fq .fq-search input{background:#fff!important;background-image:none!important;font-size:15px!important;font-family:Assistant,sans-serif!important;height:46px!important;margin:0!important;box-shadow:none;border:1px solid rgba(10,17,40,.08)!important;border-radius:12px!important;padding:0 42px 0 40px!important;text-align:right!important}
.fq .fq-search input:focus{border-color:#2a72ad!important;box-shadow:0 0 0 4px rgba(42,114,173,.12)!important}
.fq .fq-clear{position:absolute!important;inset-inline-end:10px!important;top:50%!important;transform:translateY(-50%)!important;
 width:26px!important;height:26px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;
 background:rgba(10,17,40,.08)!important;background-image:none!important;color:#475569!important;font:700 15px/1 Assistant,sans-serif!important;
 display:none!important;align-items:center;justify-content:center;box-shadow:none!important}
.fq .fq-clear.on{display:flex!important}
.fq .fq-clear:hover{background:rgba(10,17,40,.15)!important;color:#0a1128!important}
.fq .fq-toc a,.fq .fq-cta{box-shadow:none}
.fq .fq-cat h2{text-align:right}
.fq .fq-i h3{margin:0!important;padding:0!important;line-height:inherit!important}
.fq .fq-a-in > p:first-child{margin-top:0}

/* fq-faq-v1 mobile fix */
.fq .fq-search input{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
@media(max-width:1120px){
  .fq-wrap{grid-template-columns:minmax(0,1fr)!important;gap:24px;padding:0 16px}
  .fq-side,.fq-main,.fq-side-in,.fq-toc,.fq-search,.fq-cta{min-width:0!important;max-width:100%!important}
  .fq-side-in{position:static}
  .fq-side-h{display:none}
  .fq-toc{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}
  .fq-toc::-webkit-scrollbar{display:none}
  .fq-toc a{flex:none;background:#fff;border:1px solid rgba(10,17,40,.08);padding:9px 14px;font-size:14px;border-radius:999px;box-shadow:none}
  .fq-toc a.on{box-shadow:0 2px 10px rgba(10,17,40,.08)}
  .fq-toc b{display:none}
  .fq-cta{margin-top:6px}
}

/* fq-faq-v1 sticky fix */
.fq-wrap{align-items:stretch}
.fq .fq-side{align-self:stretch;height:auto}
.fq .fq-side-in{position:sticky;top:110px}
@media(max-width:1120px){
  .fq-wrap{align-items:start}
  .fq .fq-side{align-self:start}
  .fq .fq-side-in{position:static!important}
}

/* fsmega-hover-v1 */
.fsmega-promo img{transition:opacity .18s ease}
.fsmega-promo .fsmega-promo-in b,
.fsmega-promo .fsmega-promo-in em,
.fsmega-promo .fsmega-promo-cta{transition:opacity .18s ease}
.fsmega-promo.is-sw img,
.fsmega-promo.is-sw .fsmega-promo-in b,
.fsmega-promo.is-sw .fsmega-promo-in em,
.fsmega-promo.is-sw .fsmega-promo-cta{opacity:0}

/* fsmega-v2 layout */
header#nav .fsmega-v2{width:min(880px,94vw)}
header#nav .fsmega-v2 .fsmega-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 214px;
  grid-template-areas:"c1 c2 pr" "ft ft pr";
  align-items:start;column-gap:20px;row-gap:0}
header#nav .fsmega-v2 .fsmega-in > .fsmega-col:nth-of-type(1){grid-area:c1}
header#nav .fsmega-v2 .fsmega-in > .fsmega-col:nth-of-type(2){grid-area:c2}
header#nav .fsmega-v2 .fsmega-foot{grid-area:ft;margin-top:14px;padding-top:14px;border-top:1px solid rgba(10,17,40,.07)}
header#nav .fsmega-v2 .fsmega-promo{grid-area:pr;align-self:stretch}
header#nav .fsmega-v2 .fsmega-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
header#nav .fsmega-v2 .fsmega-chip{padding:8px 10px;gap:9px;align-items:center}
header#nav .fsmega-v2 .fsmega-chip .fsmega-ic{width:28px;height:28px;border-radius:9px}
header#nav .fsmega-v2 .fsmega-chip .fsmega-ic svg{width:15px;height:15px}
header#nav .fsmega-v2 .fsmega-chip b{font-size:13.5px;line-height:1.3;white-space:normal}
header#nav .fsmega-v2 .fsmega-foot .fsmega-h{margin-bottom:8px}

/* fsmega-v2 icons */
header#nav .fsmega-v2 .fsmega-ic{
  background:linear-gradient(140deg,var(--c1,#2a72ad),var(--c2,#4f9fe0));
  box-shadow:0 4px 12px -5px var(--c1,#2a72ad), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .2s ease, box-shadow .2s ease}
header#nav .fsmega-v2 .fsmega-ic svg{stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header#nav .fsmega-v2 .fsmega-item:hover .fsmega-ic,
header#nav .fsmega-v2 .fsmega-item:focus-visible .fsmega-ic{transform:translateY(-1px) scale(1.05);box-shadow:0 8px 18px -6px var(--c1,#2a72ad), inset 0 1px 0 rgba(255,255,255,.4)}
@media(max-width:1240px){
  header#nav .fsmega-v2{width:min(800px,94vw)}
  header#nav .fsmega-v2 .fsmega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 190px;column-gap:16px}
}

/* fsmega-v2 balance */
header#nav .fsmega-v2 .fsmega-in{align-items:stretch}
header#nav .fsmega-v2 .fsmega-in > .fsmega-col{display:flex;flex-direction:column;justify-content:flex-start}
header#nav .fsmega-v2 .fsmega-in > .fsmega-col > .fsmega-item{flex:1 1 auto;align-items:center}
header#nav .fsmega-v2 .fsmega-foot{align-self:end;width:100%}

/* fsmega-v2 clamp */
header#nav .nav-links > .has-fsmega:first-child > .fsmega-v2{left:auto;right:0;transform:none}

/* fsmega-v2 narrow band */
@media(max-width:1240px){
  header#nav .fsmega-v2{width:min(724px,92vw)}
  header#nav .fsmega-v2 .fsmega-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 176px;column-gap:14px}
  header#nav .fsmega-v2 .fsmega-item{padding:8px 9px;gap:9px}
  header#nav .fsmega-v2 .fsmega-item b{font-size:14px}
  header#nav .fsmega-v2 .fsmega-item em{font-size:12.4px}
  header#nav .fsmega-v2 .fsmega-chip b{font-size:12.8px}
}

/* cv-hero-v1 */
.cv{position:relative;direction:rtl;font-family:Assistant,system-ui,sans-serif;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.cv-media{position:absolute;inset:0;z-index:0}
.cv-media .cv-v{width:100%;height:100%;object-fit:cover;display:block;background:#e9e2d8}
.cv-scrim{position:absolute;inset:0;background:linear-gradient(to left,rgba(8,14,34,.80) 0%,rgba(8,14,34,.62) 34%,rgba(8,14,34,.24) 62%,rgba(8,14,34,.06) 100%)}
.cv-in{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;padding:64px 24px}
.cv-card{max-width:530px;background:rgba(10,17,40,.42);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:30px 30px 26px;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.cv-eye{display:block;font-size:12.5px;font-weight:800;letter-spacing:1.7px;color:#7fc0f5;margin:0 0 12px}
.cv .cv-h{font-size:44px;font-weight:900;line-height:1.16;color:#fff;margin:0 0 14px;letter-spacing:-.4px}
.cv-p{font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.82);margin:0 0 22px}
.cv-lbl{font-size:12px;font-weight:800;letter-spacing:1.4px;color:rgba(255,255,255,.5);margin:0 0 12px}
.cv-steps{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:none}
.cv-step{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:13px;opacity:.42;transform:translateY(2px);transition:opacity .45s ease,background .45s ease,transform .45s ease}
.cv-step.on{opacity:1;transform:none;background:rgba(255,255,255,.07)}
.cv-dot{flex:none;width:25px;height:25px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
.cv-dot svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.cv-step.on .cv-dot{background:linear-gradient(140deg,#0d9488,#2dd4bf);border-color:transparent;box-shadow:0 4px 14px -4px #0d9488}
.cv-step.on .cv-dot svg{opacity:1;transform:none}
.cv-tx{min-width:0}
.cv-tx b{display:block;font-size:15.5px;font-weight:800;color:#fff;line-height:1.4}
.cv-tx em{display:block;font-style:normal;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);margin-top:1px}
.cv-cta{display:flex;flex-wrap:wrap;gap:10px}
.cv .cv-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;background:#2a72ad;color:#fff;font:700 15.5px/1 Assistant,sans-serif;text-decoration:none;border:0;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;box-shadow:0 10px 26px -14px rgba(42,114,173,.9)}
.cv .cv-btn:hover{background:#2f81c4;transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(42,114,173,1);color:#fff}
.cv .cv-btn-wa{background:#25a35a;box-shadow:0 10px 26px -14px rgba(37,163,90,.9)}
.cv .cv-btn-wa:hover{background:#2bb765;box-shadow:0 14px 30px -14px rgba(37,163,90,1)}
@media(max-width:1120px){
  .cv{min-height:auto}
  .cv-media .cv-v{position:absolute;inset:0}
  .cv-in{padding:54px 16px}
  .cv-card{max-width:none;padding:24px 20px 22px;border-radius:20px}
  .cv .cv-h{font-size:29px}
  .cv-p{font-size:15.5px;margin-bottom:18px}
  .cv-tx b{font-size:15px}
  .cv-tx em{font-size:13px}
  .cv .cv-btn{height:48px;padding:0 20px;font-size:15px;flex:1 1 auto}
  .cv-scrim{background:linear-gradient(to top,rgba(8,14,34,.86) 0%,rgba(8,14,34,.66) 55%,rgba(8,14,34,.34) 100%)}
}
@media(max-width:520px){ .cv .cv-h{font-size:25px} .cv-step{padding:8px 8px} }
@media(prefers-reduced-motion:reduce){ .cv-step{transition:none} .cv-dot,.cv-dot svg{transition:none} }

/* cv-hero-v1 header clearance */
.cv .cv-in{padding-top:96px}
@media(max-width:1120px){.cv .cv-in{padding-top:88px}}

/* og-sc-v1 */
.og-sc{direction:rtl;font-family:Assistant,system-ui,sans-serif;padding:96px 24px;background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%)}
.og-sc-in{width:min(1180px,100%);margin:0 auto}
.og-sc-head{max-width:760px;margin:0 auto 46px;text-align:center}
.og-sc-eye{display:block;font-size:12.5px;font-weight:800;letter-spacing:1.7px;color:#2a72ad;margin:0 0 12px}
.og-sc .og-sc-h{font-size:38px;font-weight:800;line-height:1.25;color:#0a1128;margin:0 0 14px}
.og-sc .og-sc-p{font-size:17px;line-height:1.75;color:#4a5570;margin:0}
.og-sc-list{display:flex;flex-direction:column;gap:24px}
.og-sc-row{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:stretch;background:#fff;border:1px solid rgba(10,17,40,.08);border-radius:22px;overflow:hidden;box-shadow:0 20px 46px -36px rgba(10,17,40,.55)}
.og-sc-row:nth-child(even) .og-sc-img{order:2}
.og-sc-img{position:relative;min-height:308px;background:#eef2f7}
.og-sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.og-sc-tx{padding:40px 42px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.og-sc-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,#2a72ad,#4f9fe0);color:#fff;font-size:14px;font-weight:800;letter-spacing:.5px;margin:0 0 16px;box-shadow:0 6px 16px -8px rgba(42,114,173,.9)}
.og-sc .og-sc-t{font-size:24px;font-weight:800;line-height:1.35;color:#0a1128;margin:0 0 12px}
.og-sc .og-sc-d{font-size:16.5px;line-height:1.8;color:#4a5570;margin:0}
.og-sc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.og-sc-tag{font-size:13px;font-weight:700;color:#2a72ad;background:rgba(42,114,173,.09);border:1px solid rgba(42,114,173,.14);border-radius:999px;padding:6px 13px;line-height:1.4}
@media(max-width:900px){
 .og-sc{padding:64px 16px}
 .og-sc-head{margin-bottom:32px}
 .og-sc .og-sc-h{font-size:28px}
 .og-sc .og-sc-p{font-size:15.5px}
 .og-sc-list{gap:18px}
 .og-sc-row{grid-template-columns:minmax(0,1fr);border-radius:18px}
 .og-sc-row:nth-child(even) .og-sc-img{order:0}
 .og-sc-img{min-height:210px}
 .og-sc-tx{padding:26px 22px}
 .og-sc .og-sc-t{font-size:20.5px}
 .og-sc .og-sc-d{font-size:15.5px}
 .og-sc-n{width:34px;height:34px;font-size:13px;margin-bottom:13px}
}

/* fs-typo-swap */

/* mnav-acc-v1 */
#mnav{padding-bottom:14px}
#mnav > a:not(.btn){display:block;padding:15px 4px;border-bottom:1px solid rgba(10,17,40,.07);font-family:"Heebo",system-ui,sans-serif;font-size:17px;font-weight:800;color:#0a1128;text-decoration:none;line-height:1.4}
#mnav > a:not(.btn):hover,#mnav > a:not(.btn):focus-visible{color:#2a72ad}
#mnav .mnav-grp{border-bottom:1px solid rgba(10,17,40,.07)}
#mnav .mnav-t{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;width:100%!important;
 background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;
 padding:15px 4px!important;margin:0!important;height:auto!important;min-height:0!important;
 font-family:"Heebo",system-ui,sans-serif!important;font-size:17px!important;font-weight:800!important;line-height:1.4!important;letter-spacing:normal!important;
 color:#0a1128!important;text-align:right!important;text-transform:none!important;cursor:pointer}
#mnav .mnav-t .mnav-ch{width:18px;height:18px;flex:0 0 18px;color:#8c96a9;transition:transform .25s ease,color .25s ease}
#mnav .mnav-grp.on > .mnav-t{color:#2a72ad!important}
#mnav .mnav-grp.on > .mnav-t .mnav-ch{transform:rotate(180deg);color:#2a72ad}
#mnav .mnav-grp .mnav-sub{display:block!important;overflow:hidden;max-height:0;opacity:.3;padding:0!important;margin:0!important;border:0!important;
 transition:max-height .32s ease,opacity .24s ease,padding .32s ease}
#mnav .mnav-grp.on .mnav-sub{max-height:860px;opacity:1;padding:2px 0 14px!important}
#mnav .mnav-sub a{position:relative;display:block;padding:11px 18px 11px 8px;margin:0;border:0;border-radius:9px;
 font-size:15.5px;font-weight:600;line-height:1.45;color:#4a5570;text-decoration:none}
#mnav .mnav-sub a::before{content:"";position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#c9d3e2;transition:background .2s}
#mnav .mnav-sub a:hover,#mnav .mnav-sub a:focus-visible{background:rgba(42,114,173,.07);color:#2a72ad}
#mnav .mnav-sub a:hover::before,#mnav .mnav-sub a:focus-visible::before{background:#2a72ad}
#mnav .mnav-sub a.mnav-all{font-weight:800;color:#2a72ad}
#mnav .mnav-sub a.mnav-all::before{background:#2a72ad}
#mnav .mnav-sub a.is-cur{background:rgba(42,114,173,.1);color:#2a72ad;font-weight:800}
#mnav .mnav-sub a.is-cur::before{background:#2a72ad}
#mnav .mnav-sep{height:1px;background:rgba(10,17,40,.1);margin:16px 0 14px;border:0}
@media(prefers-reduced-motion:reduce){#mnav .mnav-grp .mnav-sub,#mnav .mnav-ch{transition:none}}