/* menu v2: icons, sliding pill, scroll-spy highlight, mobile panel. Loaded after main.css. */
.nav{ position:relative; display:flex; gap:2px; }
.nav a,.mpanel nav a{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; color:var(--muted); font-weight:500; transition:color .2s; }
.nav a.pill-on{ color:#fff; }
.ico{ flex:none; }
.nav .ico{ transition:transform .35s cubic-bezier(.3,1.5,.5,1); }
.nav a:hover .ico,.nav a:focus-visible .ico{ transform:translateY(-2px) rotate(-8deg) scale(1.12); }
.nav__pill{ position:absolute; inset-block:0; inset-inline-start:0; inline-size:0; border-radius:999px; background:var(--blue); box-shadow:0 10px 22px -10px rgba(37,71,216,.8); opacity:0; pointer-events:none; transition:transform .38s cubic-bezier(.3,1.2,.5,1), inline-size .38s cubic-bezier(.3,1.2,.5,1), opacity .2s; }
.tool{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding-inline:12px; transition:color .2s, background-color .2s; }
.tool:hover{ background:color-mix(in srgb, var(--fg) 8%, transparent); }
.to-dark,.to-light{ display:inline-flex; align-items:center; gap:8px; }
html[data-theme=light] .to-light, html[data-theme=dark] .to-dark{ display:none; }
.ico--theme.spin{ animation:swap .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes swap{ from{ transform:rotate(-90deg) scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.social a{ transition:background-color .25s, color .25s, border-color .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.social a:hover{ transform:translateY(-3px); }
.social .ico{ inline-size:17px; block-size:17px; }
.btn--sm{ gap:8px; }
.ico--btn{ inline-size:18px; block-size:18px; transition:transform .35s cubic-bezier(.3,1.5,.5,1); }
.btn--sm:hover .ico--btn{ transform:translateY(-2px) rotate(-10deg) scale(1.12); }
@media (max-width:1180px){ .tool__t{ display:none; } .tool{ padding-inline:10px; } }
.burger{ display:none; position:relative; inline-size:44px; block-size:44px; border-radius:50%; color:var(--fg); }
.burger span{ position:absolute; inset-inline:13px; block-size:2px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.3,1.2,.5,1); }
.burger span:first-child{ inset-block-start:17px; } .burger span:last-child{ inset-block-start:25px; }
.header.is-open .burger span:first-child{ transform:translateY(4px) rotate(45deg); }
.header.is-open .burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }
.mpanel{ display:none; }
@media (max-width:1100px){
  .burger{ display:block; }
  .bar .btn--sm,.bar .social{ display:none; }
  .nav{ display:none; }
  .mpanel{ display:grid; gap:14px; margin-block-start:8px; padding:14px; border-radius:var(--r-card); pointer-events:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .3s, visibility .25s;
    background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow:0 18px 40px -16px rgba(0,0,0,.4); }
  .header.is-open .mpanel{ opacity:1; visibility:visible; transform:none; }
  .mpanel nav{ display:grid; gap:2px; }
  .mpanel nav a{ padding:14px 16px; color:var(--fg); border-radius:14px; }
  .mpanel nav a:hover,.mpanel nav a:active,.mpanel nav a[aria-current]{ background:var(--blue); color:#fff; }
  .mpanel .social{ display:flex; gap:10px; }
  .mpanel .btn{ inline-size:100%; }
}
@media (prefers-reduced-motion:reduce){ .nav__pill,.mpanel,.burger span,.social a,.nav .ico{ transition:none; } .ico--theme.spin{ animation:none; } }

/* footer word loops: two rows, opposite directions */
.wordmark{ display:grid; gap:14px; }
.wm__row{ display:flex; }
.wm__row--b{ font-size:.46em; opacity:1; }
.wm__row--b .wm__track{ animation-direction:reverse; animation-duration:64s; }
.wordmark .wm__track{ gap:clamp(28px,3.5vw,56px); padding-inline-end:clamp(28px,3.5vw,56px); justify-content:flex-start; }
.wm__track > span{ display:inline-flex; align-items:center; gap:clamp(28px,3.5vw,56px); }
.wm__track > span::after{ content:""; inline-size:.14em; block-size:.14em; border-radius:50%; background:currentColor; }
/* bar v3: nav centred, flag language switch, icon-only theme toggle */
.bar{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; }
.brand{ margin-inline-end:0; justify-self:start; }
.bar__end{ display:flex; align-items:center; gap:8px; justify-self:end; }
.tool--icon{ padding:0; inline-size:44px; justify-content:center; }
.langsw{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); background:color-mix(in srgb, var(--fg) 5%, transparent); }
.langsw__opt{ display:inline-flex; align-items:center; gap:8px; padding-block:5px; padding-inline:8px 12px; border-radius:999px; font-weight:600; font-size:.875rem; color:var(--muted); transition:background-color .25s, color .25s; }
.flag{ flex:none; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.14); }
html[lang=en] .langsw__opt[data-opt=en], html[lang=ar] .langsw__opt[data-opt=ar]{ background:var(--blue); color:#fff; }
.langsw:hover .langsw__opt:not([data-opt]){ color:var(--fg); }
@media (max-width:1180px){ .langsw__t{ display:none; } .langsw__opt{ padding-inline:8px; } }
@media (max-width:1100px){ .bar{ grid-template-columns:1fr auto; } }
@media (max-width:420px){ .flag{ inline-size:22px; block-size:11px; } .langsw__opt{ padding-inline:6px; } .tool--icon{ inline-size:38px; } .burger{ inline-size:40px; } .bar__end{ gap:4px; } }
/* floating social dock */
.dock{ position:fixed; inset-inline-end:clamp(12px,2vw,24px); inset-block-start:50%; transform:translateY(-50%); z-index:45; display:grid; gap:10px; }
.dock a{ position:relative; display:grid; place-items:center; inline-size:52px; block-size:52px; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 14px 28px -10px rgba(37,71,216,.75); transition:transform .35s cubic-bezier(.3,1.5,.5,1), background-color .2s; }
.dock a:hover,.dock a:focus-visible{ transform:translateY(-4px) scale(1.08); background:#1B38B5; }
.dock__tip{ position:absolute; inset-inline-end:calc(100% + 12px); inset-block-start:50%; transform:translateY(-50%) translateX(calc(var(--dir) * 6px)); padding:6px 12px; border-radius:999px; background:#181A1C; color:#fff; font-size:.8125rem; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, transform .25s; }
.dock a:hover .dock__tip,.dock a:focus-visible .dock__tip{ opacity:1; transform:translateY(-50%); }
@media (max-width:760px){ .dock{ inset-block-start:auto; inset-block-end:14px; transform:none; gap:8px; } .dock a{ inline-size:44px; block-size:44px; } .dock__tip{ display:none; } }
@media (prefers-reduced-motion:reduce){ .dock a,.dock__tip,.langsw__opt{ transition:none; } }

/* dock v2: one button; hover, focus or tap opens the three links above it */
.dock{ display:block; }
.dock__main{ position:relative; display:grid; place-items:center; inline-size:56px; block-size:56px; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 14px 28px -10px rgba(37,71,216,.75); transition:transform .3s cubic-bezier(.2,.7,.2,1), background-color .2s; }
.dock__main:hover,.dock__main:focus-visible{ background:#1B38B5; }
.dock__main .ico{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.dock:hover .dock__main .ico,.dock:focus-within .dock__main .ico,.dock.is-open .dock__main .ico{ transform:rotate(90deg); }
.dock__links{ position:absolute; inset-inline-end:2px; inset-block-end:calc(100% + 12px); display:grid; gap:10px; visibility:hidden; transition:visibility 0s .3s; }
.dock__links::after{ content:""; position:absolute; inset-inline:0; inset-block-start:100%; block-size:14px; }
.dock__links a{ opacity:0; transform:translateY(16px) scale(.6); transition:opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1), background-color .2s; }
.dock:hover .dock__links,.dock:focus-within .dock__links,.dock.is-open .dock__links{ visibility:visible; transition-delay:0s; }
.dock:hover .dock__links a,.dock:focus-within .dock__links a,.dock.is-open .dock__links a{ opacity:1; transform:none; }
.dock:hover .dock__links a:nth-child(3),.dock:focus-within .dock__links a:nth-child(3),.dock.is-open .dock__links a:nth-child(3){ transition-delay:0s; }
.dock:hover .dock__links a:nth-child(2),.dock:focus-within .dock__links a:nth-child(2),.dock.is-open .dock__links a:nth-child(2){ transition-delay:.05s; }
.dock:hover .dock__links a:nth-child(1),.dock:focus-within .dock__links a:nth-child(1),.dock.is-open .dock__links a:nth-child(1){ transition-delay:.1s; }
.dock:hover .dock__links a:hover,.dock:focus-within .dock__links a:hover,.dock.is-open .dock__links a:hover{ transform:translateY(-3px) scale(1.08); transition-delay:0s; }
@media (max-width:760px){ .dock__main{ inline-size:50px; block-size:50px; } }
@media (prefers-reduced-motion:reduce){ .dock__main,.dock__main .ico,.dock__links,.dock__links a{ transition:none; } }