/* the phone hero of the site's pages (2.11) - one stylesheet for the home page and every product page */
/* the home page's hero (Ben, 2.11 - direction B of 22.10): the product as a phone on a clean stage, turned with a
   mouse or a finger, and a switch that shows the same screens in English, Arabic and Russian. Everything here lives
   under .hx with hx- names, so nothing of the rest of the page reaches in or out. */
.hx{--stage:#f5f5f7;--ink:#111318;--mut:#6b6f7b;--line:#e2e4ea;--acc:#2a56c6;--acc2:#4e8cf9;--mint:#2bb596;
  background:var(--stage);color:var(--ink);font-family:var(--f);overflow-x:clip;padding-top:34px;position:relative}
.hx *{box-sizing:border-box}
.hx .hx-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hx .hx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hx .hx-btn{display:inline-block;text-decoration:none;line-height:1.2}
/* the languages: one pill, the choice in it */
/* the languages (Ben, 2.11 - option D): one pill, "4 שפות" and the language shown; a tap opens the list */
.hx .hx-langs{position:relative;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 14px;font-size:14px;font-weight:700;color:var(--acc);z-index:5}
.hx .hx-langs .hx-lbl{display:inline-flex;align-items:center;gap:8px}
.hx .hx-langs .hx-lbl i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(43,181,150,.6);animation:hx-ping 2s infinite}
.hx .hx-ltog{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--acc);color:#fff;border-radius:999px;padding:5px 13px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.hx .hx-ltog u{text-decoration:none;font-size:10px;transition:transform .2s}
.hx .hx-ltog[aria-expanded="true"] u{transform:rotate(180deg)}
.hx .hx-lmenu{position:absolute;top:calc(100% + 6px);left:4px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(20,24,40,.16);display:grid;gap:2px;min-width:150px;text-align:start}
.hx .hx-lmenu[hidden]{display:none}
.hx .hx-lmenu button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;background:none;border-radius:9px;padding:8px 11px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:start}
.hx .hx-lmenu button:hover{background:#f3f5fa}
.hx .hx-lmenu button[aria-pressed="true"]{background:#edf4ff;color:var(--acc)}
.hx .hx-lmenu button[aria-pressed="true"]::after{content:"✓";font-weight:800}
.hx .hx-ltog:focus-visible,.hx .hx-lmenu button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hx .hx-langs .hx-lbl i{animation:none} }
.hx .hx-top{text-align:center;padding-top:8px;position:relative;z-index:3}
.hx .hx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--acc);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.hx .hx-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(43,181,150,.6);animation:hx-ping 2s infinite}
@keyframes hx-ping{70%{box-shadow:0 0 0 8px rgba(43,181,150,0)}100%{box-shadow:0 0 0 0 rgba(43,181,150,0)}}
.hx h1{margin:16px 0 0;font-size:clamp(40px,6vw,76px);font-weight:900;letter-spacing:-.045em;line-height:.95}
.hx h1 .hx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.hx h1 .hx-w span{display:inline-block;transform:translateY(105%);animation:hx-rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hx h1 .hx-w.hx-g span{animation-delay:.12s;background:linear-gradient(90deg,var(--acc),var(--acc2),#7c5cff,var(--acc));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hx-rise .9s .12s cubic-bezier(.2,.8,.2,1) forwards, hx-sheen 6s 1.2s linear infinite}
@keyframes hx-rise{to{transform:none}}
@keyframes hx-sheen{to{background-position:-300% 0}}
.hx .hx-sub{margin:20px auto 0;max-width:600px;min-height:calc(1.55em * 2);text-wrap:balance;color:var(--mut);font-size:clamp(16px,1.6vw,19px);line-height:1.55;opacity:0;animation:hx-fade .8s .5s forwards}
.hx .hx-btns{display:flex;justify-content:center;gap:12px;margin-top:30px;opacity:0;animation:hx-fade .8s .65s forwards}
@keyframes hx-fade{to{opacity:1}}
.hx .hx-btn{border-radius:999px;padding:13px 26px;font-weight:700;font-size:15px;border:0;cursor:pointer;font-family:inherit}
.hx .hx-btn.hx-main{background:var(--acc);color:#fff;box-shadow:0 10px 24px rgba(42,86,198,.28)}
.hx .hx-btn.hx-alt{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hx .hx-btn.hx-alt{display:inline-flex;align-items:center;justify-content:center;gap:8px}.hx .hx-wa{flex:none}
.hx .hx-btn{min-height:46px;transition:background-color .15s,box-shadow .15s,transform .15s}
.hx .hx-btn.hx-main:hover{background:#2349ad;box-shadow:0 12px 28px rgba(42,86,198,.34);transform:translateY(-1px)}
.hx .hx-btn.hx-alt:hover{background:#fafbff;box-shadow:inset 0 0 0 1px #c9cfdd}
/* the language switch: the hero's words cross-fade in place - their height is held, so nothing below moves */
.hx .hx-tx{transition:opacity .25s ease}
.hx .hx-tour button{line-height:1.3}.hx h1 .hx-w{line-height:1}
.hx .hx-tx.hx-out{opacity:0}
@media (prefers-reduced-motion:reduce){.hx .hx-tx{transition:none}.hx .hx-btn{transition:none}.hx .hx-btn.hx-main:hover{transform:none}}
.hx .hx-stage{position:relative;height:716px;margin-top:26px;overflow-x:clip;cursor:grab;perspective:1800px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hx .hx-band{position:absolute;left:50%;top:46%;width:min(1300px,180vw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-6deg) scaleY(.23);opacity:.55;pointer-events:none}
.hx .hx-band::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#4e8cf9,#7c5cff,#2bb596,#7fd3ff,#4e8cf9);filter:blur(90px);will-change:transform;animation:hx-spin 14s linear infinite}
@keyframes hx-spin{to{transform:rotate(360deg)}}
.hx .hx-floor{position:absolute;left:50%;bottom:58px;width:300px;height:46px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(17,19,24,.28),rgba(17,19,24,0));filter:blur(6px)}
.hx .hx-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px;transition:opacity .4s}
.hx .hx-hint b{display:inline-block;animation:hx-wig 2.4s ease-in-out infinite}
@keyframes hx-wig{0%,100%{transform:rotate(0)}50%{transform:rotate(-180deg)}}
.hx .hx-phone{position:absolute;left:50%;top:12px;width:var(--w);height:calc(var(--w)*2.1667);margin-left:calc(var(--w)/-2);transform-style:preserve-3d;cursor:grab;--w:300px}
.hx .hx-phone.hx-drag{cursor:grabbing}
.hx .hx-phone img,.hx .hx-stage img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.hx .hx-layer{position:absolute;inset:0;border-radius:calc(var(--w)*.14)}
.hx .hx-front,.hx .hx-back{position:absolute;inset:0;border-radius:calc(var(--w)*.14);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hx .hx-front{background:#06080f;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 0 0 1.5px #9aa3b8}
.hx .hx-scr{position:absolute;inset:calc(var(--w)*.035);border-radius:calc(var(--w)*.115);overflow:hidden;background:#fff}
.hx .hx-scr{--sb:calc(var(--w)*.105)}
.hx .hx-sbar{position:absolute;left:0;right:0;top:0;height:var(--sb);background:#f3f5fb;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--w)*.012) calc(var(--w)*.085) 0;direction:ltr;font-weight:700;font-size:calc(var(--w)*.045);color:#111318;z-index:1}
.hx .hx-sbar .hx-ic{display:flex;align-items:center;gap:calc(var(--w)*.014)}
.hx .hx-sbar .hx-sig{display:flex;align-items:flex-end;gap:1.5px;height:calc(var(--w)*.032)}
.hx .hx-sbar .hx-sig i{width:calc(var(--w)*.011);background:#111318;border-radius:1px}
.hx .hx-sbar .hx-bat{width:calc(var(--w)*.075);height:calc(var(--w)*.034);border:1.5px solid rgba(17,19,24,.5);border-radius:3px;padding:1px;position:relative}
.hx .hx-sbar .hx-bat::after{content:"";position:absolute;right:-3px;top:30%;width:2px;height:40%;background:rgba(17,19,24,.5);border-radius:0 1px 1px 0}
.hx .hx-sbar .hx-bat i{display:block;height:100%;width:78%;background:#111318;border-radius:1.5px}
.hx .hx-scr img{position:absolute;left:0;right:0;top:var(--sb);width:100%;height:calc(100% - var(--sb));object-fit:cover;object-position:top;transition:opacity .25s}
.hx .hx-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3}
.hx .hx-glass{overflow:hidden}
.hx .hx-glass .hx-sh{position:absolute;left:50%;top:50%;width:500%;aspect-ratio:1;background:linear-gradient(120deg,rgba(255,255,255,.28) 35.6%,rgba(255,255,255,.05) 44.8%,rgba(255,255,255,0) 50%,rgba(126,200,255,0) 59.2%,rgba(126,200,255,.22) 64.4%);will-change:transform}
.hx .hx-back{background:radial-gradient(120% 90% at 30% 15%,#2b3a66 0%,#141c34 55%,#080b16 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 calc(var(--w)*.08) rgba(120,160,255,.12)}
.hx .hx-gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 35%)}
.hx .hx-gloss .hx-sw{position:absolute;top:-25%;bottom:-25%;left:-100%;width:300%;background:linear-gradient(105deg,rgba(255,255,255,0) 42.7%,rgba(255,255,255,.08) 47.3%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 56%);will-change:transform}
.hx .hx-cam{position:absolute;top:calc(var(--w)*.045);left:calc(var(--w)*.045);width:calc(var(--w)*.47);height:calc(var(--w)*.47);border-radius:calc(var(--w)*.115);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(0,0,0,.18)),#1a2240;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.14),0 calc(var(--w)*.012) calc(var(--w)*.03) rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.35)}
.hx .hx-lens{position:absolute;width:44%;height:44%;border-radius:50%;
  background:conic-gradient(from 210deg,#8a8f99,#e9ecf1,#7c818b,#d5d9e0,#6f747e,#eef0f4,#8a8f99);
  box-shadow:0 calc(var(--w)*.008) calc(var(--w)*.02) rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35)}
.hx .hx-lens::before{content:"";position:absolute;inset:11%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0a0c12 0 22%,#1b2140 23% 30%,#05060a 31% 46%,#11152a 47% 60%,#020306 61%);
  box-shadow:inset 0 0 0 1.5px #0b0d14,inset 0 0 calc(var(--w)*.02) rgba(80,110,255,.35)}
.hx .hx-lens::after{content:"";position:absolute;left:30%;top:24%;width:20%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(170,190,255,0));transform:rotate(-30deg)}
.hx .hx-lens.hx-l1{top:5%;left:5%}
.hx .hx-lens.hx-l2{bottom:5%;left:5%}
.hx .hx-lens.hx-l3{top:28%;right:5%}
.hx .hx-flash{position:absolute;top:9%;right:13%;width:15%;height:15%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbe8,#e9dfb8 55%,#b9ae86);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35)}
.hx .hx-lidar{position:absolute;bottom:10%;right:14%;width:13%;height:13%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2f45,#07080d 70%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.hx .hx-mic{position:absolute;top:47%;left:47%;width:3.5%;height:3.5%;border-radius:50%;background:#05060a}
.hx .hx-logo{position:absolute;left:50%;top:54%;width:calc(var(--w)*.22);transform:translate(-50%,-50%)}
.hx .hx-logo svg{display:block;width:100%;height:auto;position:relative}
.hx .hx-logo::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(1,133,253,.38),rgba(1,133,253,0))}
.hx .hx-word{position:absolute;left:0;right:0;bottom:calc(var(--w)*.12);text-align:center;font-weight:700;color:rgba(220,228,245,.6);letter-spacing:.32em;font-size:calc(var(--w)*.042);direction:ltr}
.hx .hx-word .hx-x{background:linear-gradient(160deg,#02A6FF,#0185FD 50%,#0270EF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx .hx-pop{position:absolute;left:50%;top:44%;display:flex;align-items:center;gap:10px;background:#fff;will-change:transform,opacity;border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(20,24,40,.18);font-size:14px;white-space:nowrap;pointer-events:none;opacity:0;z-index:4}
.hx .hx-pop i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;flex:none}
.hx .hx-pop small{display:block;color:var(--mut);font-size:12px}
.hx .hx-tour{position:relative;z-index:3;max-width:1000px;margin:0 auto;display:flex;justify-content:center;gap:10px;padding-block:8px 44px;overflow-x:auto;scrollbar-width:none}
.hx .hx-tour::-webkit-scrollbar{display:none}
.hx .hx-tour button{flex:none;display:flex;align-items:baseline;gap:8px;background:transparent;border:0;border-radius:999px;padding:10px 16px;font-family:inherit;font-size:15px;color:var(--mut);cursor:pointer;transition:background .2s,color .2s}
.hx .hx-tour button b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hx .hx-tour button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(20,24,40,.08),inset 0 0 0 1px var(--line)}
.hx .hx-tour button:focus-visible,.hx .hx-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.hx .hx-fly{position:absolute;inset:0;transform-style:preserve-3d}
.hx .hx-ring{position:absolute;left:50%;top:44%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(78,140,249,.7);box-shadow:0 0 40px rgba(78,140,249,.5),inset 0 0 30px rgba(124,92,255,.35);opacity:.001;pointer-events:none;will-change:transform,opacity}
.hx .hx-spark{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(closest-side,#e6f0ff,#7fb2ff 45%,rgba(127,178,255,0));opacity:.001;pointer-events:none;will-change:transform,opacity}
@media (max-width:700px){.hx .hx-btn{flex:1;padding:13px 10px}
.hx .hx-stage{height:540px}
.hx .hx-phone{--w:220px;top:20px}
.hx .hx-floor{bottom:44px;width:230px}
.hx .hx-pop{font-size:12.5px;padding:8px 11px}
.hx .hx-tour{flex-wrap:wrap;gap:6px;overflow:visible;align-content:flex-start;align-items:center}
.hx .hx-tour button{padding:8px 12px;font-size:14px}

}
@media (prefers-reduced-motion:reduce){.hx .hx-band::before,.hx .hx-eyebrow i,.hx .hx-hint b,.hx .hx-dp-s.hx-on .hx-wa-btn.hx-tap{animation:none}
.hx h1 .hx-w span{animation:none;transform:none}
.hx .hx-sub,.hx .hx-btns{animation:none;opacity:1}
 }

/* the phone sizes come last, so they win over the base rules above */
@media (max-width:700px){ .hx{padding-top:14px} .hx .hx-top{padding-top:4px} .hx h1{font-size:clamp(32px,10vw,46px);margin-top:12px} .hx .hx-sub{font-size:15.5px;min-height:calc(1.55em * 3);margin-top:14px} .hx .hx-btns{margin-top:22px} .hx .hx-btn{white-space:nowrap;font-size:14px} .hx .hx-stage{margin-top:14px} .hx .hx-top[lang="en"] h1,.hx .hx-top[lang="ru"] h1,.hx .hx-top[lang="fr"] h1,.hx .hx-top[lang="es"] h1{font-size:clamp(26px,8vw,46px)} .hx h1{min-height:calc(clamp(32px,10vw,46px) * 2.27);display:flex;flex-direction:column;justify-content:flex-end;align-items:center} .hx h1 br{display:none} }