/* Floating buttons (WhatsApp, back to top) and the custom cursor, shared by every page. */
.fab-dock{position:fixed;z-index:75;inset-inline-end:clamp(14px,2vw,24px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2vw,24px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fab-dock > *{pointer-events:auto}
.menu-open .fab-dock{opacity:0;pointer-events:none}

.fab-wa{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border-radius:50%;background:#1FCF86;color:#fff;
  box-shadow:0 14px 34px -12px rgba(11,27,58,.45);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.fab-wa svg{width:30px;height:30px;fill:currentColor;display:block}
.fab-wa:hover,.fab-wa:focus-visible{transform:scale(1.08);background:#19B874}
/* the label is a tip beside the button, toward the middle of the page, so the button never stretches */
.fab-wa-label{position:absolute;top:50%;inset-inline-end:calc(100% + 12px);translate:0 -50%;padding:9px 14px;border-radius:999px;background:#0B1B3A;color:#EDEFEA;
  white-space:nowrap;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;scale:.85;pointer-events:none;transition:opacity .25s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.fab-dock:lang(ar) .fab-wa-label{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:14px;letter-spacing:0;text-transform:none}
.fab-wa:hover .fab-wa-label,.fab-wa:focus-visible .fab-wa-label{opacity:1;scale:1}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1FCF86;animation:fab-pulse 2.4s cubic-bezier(.2,.8,.2,1) infinite;pointer-events:none}
@keyframes fab-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}

/* back to top: four service dots shaped as an up arrow on navy; each appears as another quarter of the page is read,
   they line up and float on hover, and launch upward on click */
.fab-top{position:relative;width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;background:#0B1B3A;
  box-shadow:0 12px 30px -12px rgba(11,27,58,.55);opacity:0;transform:translateY(14px) scale(.8);pointer-events:none;
  transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.fab-top.show{opacity:1;transform:none;pointer-events:auto}
.tt-d{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c);
  --x:0px;--y:0px;transform:translate(var(--x),var(--y)) scale(0);opacity:.35;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms),opacity .3s}
.tt-d:nth-child(1){--x:0px;--y:-11px}
.tt-d:nth-child(2){--x:-9px;--y:-2px}
.tt-d:nth-child(3){--x:9px;--y:-2px}
.tt-d:nth-child(4){--x:0px;--y:10px}
.tt-d.on{transform:translate(var(--x),var(--y)) scale(1);opacity:1}
.fab-top:not(.on-all) .tt-d:not(.on){transform:translate(var(--x),var(--y)) scale(.45)}
.fab-top:hover .tt-d:nth-child(1),.fab-top:focus-visible .tt-d:nth-child(1){--x:0px;--y:-15px}
.fab-top:hover .tt-d:nth-child(2),.fab-top:focus-visible .tt-d:nth-child(2){--x:0px;--y:-5px}
.fab-top:hover .tt-d:nth-child(3),.fab-top:focus-visible .tt-d:nth-child(3){--x:0px;--y:5px}
.fab-top:hover .tt-d:nth-child(4),.fab-top:focus-visible .tt-d:nth-child(4){--x:0px;--y:15px}
.fab-top:hover .tt-d,.fab-top:focus-visible .tt-d{animation:tt-float 1.1s ease-in-out calc(var(--i) * -120ms) infinite}
@keyframes tt-float{0%,100%{translate:0 2px}50%{translate:0 -4px}}
.fab-top.launch .tt-d{transform:translate(var(--x),-90px) scale(.5);opacity:0;animation:none;
  transition:transform .6s cubic-bezier(.55,0,.75,.2) calc((3 - var(--i)) * 70ms),opacity .45s calc((3 - var(--i)) * 70ms + .15s)}

/* cursor: the four service dots chase the pointer on springs; they gather into a square on links,
   circle a word on cards, and burst on a click. A small inverted point marks the exact spot. */
.ccursor,.ccursor a,.ccursor button,.ccursor summary,.ccursor label{cursor:none}
.ccursor input,.ccursor textarea{cursor:text}
.ccursor select{cursor:pointer}
.c4-dot{position:fixed;left:0;top:0;z-index:100;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;will-change:transform;transition:opacity .25s}
.cur-dot{position:fixed;left:0;top:0;z-index:101;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;transition:opacity .2s}
.c4-label{position:fixed;left:0;top:0;z-index:101;pointer-events:none;translate:-50% -50%;padding:7px 12px;border-radius:999px;background:#0B1B3A;color:#EDEFEA;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  opacity:0;scale:.6;transition:opacity .25s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.c4-label:lang(ar){font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:13px;letter-spacing:0;text-transform:none}
html[data-cursor="label"] .c4-label{opacity:1;scale:1}
html[data-cursor="label"] .cur-dot,html[data-cursor="link"] .cur-dot{opacity:0}
html[data-cursor="hidden"] .c4-dot,html[data-cursor="hidden"] .cur-dot{opacity:0}
@media (pointer:coarse){.cur-dot,.c4-dot,.c4-label{display:none}}
@media (max-width:900px){
  .fab-wa{width:54px;height:54px}
  .fab-wa svg{width:27px;height:27px}
  .fab-top{width:50px;height:50px}
}