html[data-theme="light"]{ --header-bg: var(--header-bg-light); --header-border: var(--header-border-light); }
html[data-theme="dark"]{ --header-bg: var(--header-bg-dark); --header-border: var(--header-border-dark); }




/* Terminal loader (single) */
.loader{position:fixed; inset:0; z-index: 2000; display:grid; place-items:center; background: radial-gradient(800px 520px at 55% 35%, rgba(0,59,227,.18), transparent 60%), rgba(255,255,255,.92); backdrop-filter: blur(8px);}
html[data-theme="dark"] .loader{background: radial-gradient(900px 560px at 55% 35%, rgba(0,59,227,.22), transparent 60%), rgba(6,10,26,.86);}
.loader.is-out{opacity:0; transform: translateY(6px) scale(.98); pointer-events:none; transition: opacity .45s ease, transform .45s ease;}
.loader--term .term{width:min(520px, 92vw); border-radius: 18px; overflow:hidden; border:1px solid color-mix(in oklab, var(--stroke), rgba(0,59,227,.4) 35%); background: color-mix(in oklab, var(--surface), white 10%); box-shadow: var(--shadow);}
html[data-theme="dark"] .loader--term .term{background: color-mix(in oklab, var(--surface), black 18%);}
.term__top{display:flex; align-items:center; gap:10px; padding: 12px 14px; border-bottom: 1px solid var(--stroke); background: color-mix(in oklab, var(--surface), var(--p) 6%);}
.term__dot{width:10px; height:10px; border-radius:999px; display:inline-block; opacity:.95}
.term__dot--red{background:#ff5f57}
.term__dot--yellow{background:#febc2e}
.term__dot--green{background:#28c840; box-shadow: 0 0 0 0 rgba(40,200,64,.35); animation: termPulse 1.35s ease-in-out infinite;}
@keyframes termPulse{0%{box-shadow:0 0 0 0 rgba(40,200,64,.0)}50%{box-shadow:0 0 0 10px rgba(40,200,64,.12)}100%{box-shadow:0 0 0 0 rgba(40,200,64,.0)}}
.term__title{margin-inline-start: 6px; font-weight:900; letter-spacing:.04em; opacity:.78; font-family: var(--mono)}
.term__pill{margin-inline-start:auto; font-family: var(--mono); font-size:.78rem; padding: 6px 10px; border-radius: 999px; background: rgba(40,200,64,.14); color: rgb(40,200,64); border: 1px solid rgba(40,200,64,.22)}
.term__body{padding: 14px 14px 12px; font-family: var(--mono);}
.term__line{display:flex; align-items:center; gap:10px; margin: 8px 0; font-size: 0.98rem;}
.term__line--dim{opacity:.8}
.term__prompt{color: color-mix(in oklab, var(--p), black 20%); font-weight:900}
.term__prompt--dim{color: rgba(120,140,170,.9)}
.term__text{color: var(--text)}
.term__text--dim{color: color-mix(in oklab, var(--text), transparent 35%)}
.term__blink{display:inline-block; width:10px; height:16px; border-radius:3px; background: rgba(40,200,64,.75); animation: blink 1s steps(2,end) infinite;}
@keyframes blink{50%{opacity:0}}
.term__progress{height:10px; border-radius:999px; background: color-mix(in oklab, var(--surface), transparent 20%); border:1px solid var(--stroke); overflow:hidden; margin-top:12px}
.term__progress span{display:block; height:100%; width: 40%; background: linear-gradient(90deg, rgba(40,200,64,.0), rgba(40,200,64,.75), rgba(40,200,64,.0)); animation: prog 1.1s ease-in-out infinite;}
@keyframes prog{0%{transform: translateX(-120%)}100%{transform: translateX(260%)}}
.term__foot{display:flex; justify-content:space-between; margin-top: 12px; font-size:.78rem; opacity:.78}
/* Logo white in dark mode (safe) */
html[data-theme="dark"] .header .logo img,
html[data-theme="dark"] .footer img.footer__logo,
html[data-theme="dark"] img.header__logo {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* optional: make it crisper */
html[data-theme="dark"] .header .logo img,
html[data-theme="dark"] img.header__logo {
  filter: brightness(0) invert(1) contrast(1.1) !important;
}

/* optional: remove any weird mix-blend if موجود */
html[data-theme="dark"] .header .logo img,
html[data-theme="dark"] img.header__logo {
  mix-blend-mode: normal !important;
}

.coder-avatar{
  width:92px;
  height:92px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(120px 120px at 30% 20%, rgba(0,229,255,.25), transparent 60%),
              radial-gradient(140px 140px at 70% 80%, rgba(0,59,227,.25), transparent 60%),
              rgba(11,16,32,.55);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.coder-svg{ width:78px; height:78px; }

/* Animations */
.ring{ stroke-dasharray: 40 12; animation: spin 4.5s linear infinite; transform-origin:64px 64px; }
@keyframes spin{ to { transform: rotate(360deg); } }

.brL{ animation: nudgeL 1.2s ease-in-out infinite; }
.brR{ animation: nudgeR 1.2s ease-in-out infinite; }
@keyframes nudgeL{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-1.5px);} }
@keyframes nudgeR{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(1.5px);} }

.cursor{ animation: blink 0.85s steps(1) infinite; }
@keyframes blink{ 0%,49%{ opacity:1;} 50%,100%{ opacity:.15;} }

.p1{ animation: float1 2.6s ease-in-out infinite; }
.p2{ animation: float2 3.1s ease-in-out infinite; }
.p3{ animation: float3 2.8s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform: translate(0,0); opacity:.8;} 50%{ transform: translate(2px,-4px); opacity:1;} }
@keyframes float2{ 0%,100%{ transform: translate(0,0); opacity:.75;} 50%{ transform: translate(-3px,3px); opacity:1;} }
@keyframes float3{ 0%,100%{ transform: translate(0,0); opacity:.75;} 50%{ transform: translate(-2px,-3px); opacity:1;} }

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .ring,.brL,.brR,.cursor,.p1,.p2,.p3{ animation:none !important; }
}

/* ==========================================================================
   VIXOR CORE SYSTEM v11
   - Preserves v10.1 look & layout (uploaded by user) while upgrading UX/UI.
   - Light is PRIMARY. Dark is SECONDARY.
   - Solid brand primary: #003be3
   - Mobile menu (off-canvas) + modal quick preview for portfolio
   - Smooth section transitions, better spacing, richer details
   - Loader: never blocks (DOMContentLoaded + failsafe timer + error-safe)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01) Design Tokens
   -------------------------------------------------------------------------- */
:root{
  --p: #003be3;
  --p-h: #002db0;
  --p-2: #0b69ff;
  --p-soft: rgba(0, 59, 227, 0.06);
  --p-soft2: rgba(0, 59, 227, 0.12);

  --bg0: #ffffff;   /* base */
  --bg1: #f8fbff;   /* surface */
  --bg2: #f0f6ff;   /* surface alt */
  --bg3: #eaf2ff;   /* strokes */
  --ink: #071224;   /* text */
  --muted: rgba(7, 18, 36, 0.66);

  --glass: rgba(255,255,255,0.86);
  --stroke: rgba(0, 59, 227, 0.10);
  --stroke2: rgba(7, 18, 36, 0.10);

  --shadow: 0 40px 80px rgba(0, 59, 227, 0.06);
  --shadow2: 0 25px 60px rgba(7,18,36,0.10);

  --radius: 30px;
  --radius2: 22px;
  --radius3: 16px;

  --f-ar: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-en: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-code: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease2: cubic-bezier(0.2, 0.9, 0.2, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  --header-h: 90px;

  --header-bg-light: rgba(255,255,255,.82);
  --header-bg-dark: rgba(6,10,26,.78);
  --header-border-light: rgba(0,20,90,.10);
  --header-border-dark: rgba(110,140,190,.16);

}

/* Secondary theme (dark) */
html[data-theme="dark"]{
  --bg0: #00040f;
  --bg1: #010a1f;
  --bg2: #021233;
  --bg3: rgba(255,255,255,0.08);
  --ink: #eaf2ff;
  --muted: rgba(234, 242, 255, 0.62);
  --glass: rgba(0, 4, 15, 0.86);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.14);
  --shadow: 0 45px 110px rgba(0,0,0,0.55);
  --shadow2: 0 25px 70px rgba(0,0,0,0.40);
}

/* --------------------------------------------------------------------------
   02) Base & Reset
   
   -------------------------------------------------------------------------- */
*{box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing: antialiased}
html{scroll-behavior:smooth}
body{
  font-family: var(--f-ar);
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background: rgba(0,59,227,0.20)}

/* Container */
.container{width:min(1300px, 92vw); margin-inline:auto}

/* Scroll offset for fixed header */
[id]{scroll-margin-top: calc(var(--header-h) + 16px);}

/* Focus styles (accessibility) */
:focus-visible{
  outline: 3px solid rgba(0,59,227,0.35);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* --------------------------------------------------------------------------
   03) Utility helpers
   -------------------------------------------------------------------------- */
.u-muted{color:var(--muted)}
.u-en{font-family:var(--f-en)}
.u-code{font-family:var(--f-code)}
.u-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg1) 88%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.04);
}
.u-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--p);
  box-shadow: 0 0 0 6px rgba(0,59,227,0.10);
}
.u-divider{
  height:1px;
  width:100%;
  background: color-mix(in srgb, var(--stroke) 80%, transparent);
}

/* --------------------------------------------------------------------------
   04) Loader (never blocks)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #loader{
  background: radial-gradient(900px 650px at 50% 35%, rgba(0,59,227,0.18), rgba(0,4,15,0.96) 70%);
}

[dir="rtl"] .loader-title{align-items:flex-start}
.loader-title span{
  font-size: 13px;
  color: var(--muted);
}
html[data-theme="dark"] .loader-bar{
  background: rgba(255,255,255,0.07);
}
@keyframes vSweep{
  0%{transform: translateX(-30%); opacity:.55}
  50%{transform: translateX(135%); opacity:1}
  100%{transform: translateX(260%); opacity:.55}
}

/* --------------------------------------------------------------------------
   05) Header + Desktop Nav (preserve layout) + Mobile Offcanvas
   -------------------------------------------------------------------------- */
.header{
  position: fixed;
  top: 0; inset-inline:0;
  z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--header-border);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.header.active{box-shadow: var(--shadow)}
.nav{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
}

.header::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(0,59,227,.14), transparent 60%);
  opacity: .9;
}
html[data-theme="light"] .header::before{opacity:.55}


.logo{display:flex; align-items:center; gap:12px}
.logo img{height: 45px; transition: transform var(--dur-2) var(--ease)}
.logo:hover img{transform: rotate(-4deg) scale(1.06)}

.menu{
  display:flex; gap: 34px;
  list-style:none;
  align-items:center;
}
.menu a{
  font-weight: 800;
  font-size: 0.95rem;
  opacity: 0.78;
  position: relative;
  transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.menu a:hover, .menu a.active{opacity:1; color: var(--p)}
.menu a::after{
  content:"";
  position:absolute;
  bottom:-10px; inset-inline: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--p);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}
.menu a:hover::after, .menu a.active::after{transform: scaleX(1)}

.actions{display:flex; gap: 10px; align-items:center}

.act-btn{
  min-width: 48px; height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--header-border), var(--p) 22%);
  background: color-mix(in oklab, var(--header-bg), var(--surface) 55%);
  color: var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.act-btn:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--header-bg), var(--p) 8%);
  border-color: color-mix(in oklab, var(--p), var(--header-border) 35%);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.act-btn:active{transform: translateY(0)}
.act-btn--icon{padding:0; width:44px; min-width:44px; border-radius: 16px}

#lBtn, #lBtn_m{
  background: var(--p);
  border-color: color-mix(in oklab, var(--p), black 12%);
  color: #fff;
}

/* Animated theme orb */
.theme-orb{
  width: 18px; height: 18px;
  border-radius: 999px;
  position: relative;
  background: conic-gradient(from 180deg, #ffffff, #dbe7ff, #003be3, #6fb3ff, #ffffff);
  box-shadow: 0 0 0 6px rgba(0,59,227,.10);
  animation: orbSpin 3.2s linear infinite;
}
@keyframes orbSpin{to{transform: rotate(360deg)}}
html[data-theme="dark"] .theme-orb{
  background: conic-gradient(from 90deg, rgba(40,200,64,.9), rgba(0,59,227,1), rgba(255,255,255,.85), rgba(0,59,227,1), rgba(40,200,64,.9));
  box-shadow: 0 0 0 6px rgba(40,200,64,.10);
}


/* Mobile header actions */
.burger{
  width: 48px; height: 48px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  display:none;
  position: relative;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.burger:hover{transform: translateY(-2px)}
.burger span{
  position:absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  transform: translateX(-50%);
  border-radius: 9px;
  transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.burger span:nth-child(1){top: 16px}
.burger span:nth-child(2){top: 23px; width: 14px}
.burger span:nth-child(3){top: 30px}
.burger[aria-expanded="true"] span:nth-child(1){top: 23px; transform: translateX(-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity: 0}
.burger[aria-expanded="true"] span:nth-child(3){top: 23px; transform: translateX(-50%) rotate(-45deg)}

/* Offcanvas mobile nav */
.mnav-overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,0.30);
  z-index: 1200;
  opacity: 0; visibility:hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
}
html[data-theme="dark"] .mnav-overlay{background: rgba(0,0,0,0.55)}
.mnav{
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  height: 100vh;
  width: min(360px, 88vw);
  background: color-mix(in srgb, var(--glass) 88%, transparent);
  border-inline-start: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  z-index: 1300;
  transform: translateX(110%);
  transition: transform var(--dur-3) var(--ease);
  backdrop-filter: blur(22px);
  padding: 18px 16px;
}
[dir="ltr"] .mnav{inset-inline-end:auto; inset-inline-start:0; transform: translateX(-110%)}
.mnav.open{transform: translateX(0)}
.mnav-overlay.open{opacity:1; visibility:visible}

.mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}
.mnav-head .logo img{height: 38px}
.mnav-close{
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  display:grid; place-items:center;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mnav-close:hover{background: var(--p); color:#fff; transform: translateY(-2px)}

.mnav-links{
  list-style:none;
  padding: 16px 0 12px;
  display:flex; flex-direction:column;
  gap: 10px;
}
.mnav-links a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--bg1) 86%, transparent);
  font-weight: 900;
  opacity: .95;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.mnav-links a:hover{transform: translateY(-2px); border-color: rgba(0,59,227,0.26)}
.mnav-actions{
  display:flex; gap: 10px; flex-wrap:wrap;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}
.mnav-actions .act-btn{flex:1; min-width: 120px}

/* --------------------------------------------------------------------------
   06) Hero (preserved) + improved visual
   -------------------------------------------------------------------------- */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  position: relative;
  padding-top: calc(var(--header-h) + 10px);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 30% 18%, rgba(0,59,227,0.10), transparent 60%),
    radial-gradient(820px 520px at 76% 70%, rgba(0,59,227,0.08), transparent 58%);
  pointer-events:none;
}
html[data-theme="dark"] .hero::before{
  background:
    radial-gradient(900px 600px at 30% 18%, rgba(0,59,227,0.16), transparent 60%),
    radial-gradient(820px 520px at 76% 70%, rgba(0,59,227,0.10), transparent 58%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items:center;
  position:relative;
  z-index: 1;
}
.hero-text h1{
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 24px;
}
.hero-text h1 span{color: var(--p); display:block}
.hero-text p{
  font-size: 1.25rem;
  color: var(--muted);
  margin-bottom: 40px;
  max-width: 680px;
  line-height: 1.85;
}
.hero-btns{display:flex; gap: 16px; flex-wrap:wrap}
.btn{
  padding: 18px 36px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 1.05rem;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-p{
  background: var(--p);
  color: #fff;
  box-shadow: 0 20px 40px rgba(0, 59, 227, 0.18);
}
.btn-p:hover{transform: translateY(-6px); box-shadow: 0 25px 60px rgba(0,59,227,0.22)}
.btn-s{
  background: var(--bg1);
  border: 1.5px solid var(--stroke);
  color: var(--ink);
}
.btn-s:hover{transform: translateY(-4px); border-color: rgba(0,59,227,0.22); box-shadow: 0 20px 50px rgba(7,18,36,0.08)}

/* Hero Viz (kept but enhanced) */
.hero-viz > div{
  box-shadow: var(--shadow2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 86%, transparent), var(--bg1));
}
.hero-viz::after{
  content:"";
  position:absolute;
  width: 160px; height: 160px;
  border-radius: 999px;
  background: rgba(0,59,227,0.10);
  filter: blur(24px);
  inset-inline-end: 0;
  top: 10%;
  pointer-events:none;
}
.hero-viz{position:relative}

/* --------------------------------------------------------------------------
   07) Sections & Cards (distinction/services)
   -------------------------------------------------------------------------- */
.sec{padding: 120px 0; position:relative}
.sec-h{text-align:center; margin-bottom: 80px}
.sec-h p{
  color: var(--p);
  font-weight: 900;
  text-transform: uppercase;
  font-family: var(--f-en);
  font-size: 0.88rem;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.sec-h h2{
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: -1px;
}
.feat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.feat-card{
  padding: 52px 42px;
  background: var(--bg1);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  transition: transform var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease), background var(--dur-2) var(--ease);
  position:relative;
  overflow:hidden;
}
.feat-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(600px 220px at 20% 10%, rgba(0,59,227,0.10), transparent 60%);
  opacity: .75;
  pointer-events:none;
}
html[data-theme="dark"] .feat-card::before{opacity: .95}
.feat-card:hover{
  transform: translateY(-12px);
  border-color: rgba(0,59,227,0.22);
  background: color-mix(in srgb, var(--bg0) 90%, transparent);
  box-shadow: var(--shadow);
}
.feat-icon{font-size: 3.2rem; margin-bottom: 22px; display:block}
.feat-card h3{font-size: 1.55rem; margin-bottom: 16px; font-weight: 900}
.feat-card p{color: var(--muted); font-size: 1.03rem}

/* Add micro detail row for services */
.feat-meta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.feat-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .10em;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* --------------------------------------------------------------------------
   08) Founder + Terminal (preserved + smoother)
   -------------------------------------------------------------------------- */
.founder-sec{
  background: var(--bg1);
  border-radius: 80px;
  margin: 40px 0;
  border: 1px solid var(--stroke);
  box-shadow: 0 40px 110px rgba(0,59,227,0.04);
}
.founder-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items:center;
  padding: 100px 0;
}
.terminal{
  background: #0d1117;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.30);
  overflow:hidden;
  font-family: var(--f-code);
  direction:ltr;
  border: 1px solid #30363d;
  height: 450px;
  position:relative;
}
.terminal::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(700px 240px at 20% 10%, rgba(0,59,227,0.12), transparent 60%);
  pointer-events:none;
}
.term-head{
  background:#161b22;
  padding: 15px 20px;
  display:flex;
  gap:8px;
  border-bottom: 1px solid #30363d;
  align-items:center;
}
.term-dot{width:12px; height:12px; border-radius:50%}
.term-body{
  padding: 25px;
  color: #c9d1d9;
  font-size: 0.90rem;
  overflow:hidden;
  position:relative;
  z-index: 1;
}
.code-line{margin-bottom: 6px; white-space: pre; border-left: 2px solid transparent; padding-left: 10px}
.code-line.typing{border-left-color: var(--p); animation: vBlink 1s infinite}
@keyframes vBlink{50%{border-color:transparent}}
.c-kw{color:#ff7b72}
.c-fn{color:#d2a8ff}
.c-st{color:#a5d6ff}
.c-cm{color:#8b949e}

.f-info .f-tag{
  color: var(--p);
  font-weight: 900;
  font-family: var(--f-en);
  letter-spacing: 2px;
  font-size: 0.88rem;
  margin-bottom: 14px;
  display:block;
}
.f-info h2{font-size: 4rem; font-weight: 900; margin-bottom: 10px}
.f-avatar{
  width: 100px; height: 100px;
  border-radius: 25px;
  overflow:hidden;
  margin-bottom: 26px;
  border: 4px solid var(--bg0);
  box-shadow: var(--shadow);
}
.f-avatar img{width:100%; height:100%; object-fit:cover}
.f-quote{
  font-size: 1.35rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.9;
  position:relative;
  padding-inline-start: 18px;
  border-inline-start: 5px solid var(--p);
}
html[data-theme="dark"] .f-quote{color: rgba(234,242,255,0.90)}

/* --------------------------------------------------------------------------
   09) Portfolio / Work grid + show more + modal quick preview
   -------------------------------------------------------------------------- */
.work-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin: 0 auto 26px;
  max-width: 1100px;
  flex-wrap: wrap;
}
.work-toolbar .u-chip{box-shadow:none}
.work-actions{
  display:flex; gap: 10px; flex-wrap:wrap;
}
.work-actions button{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.work-actions button:hover{transform: translateY(-2px); border-color: rgba(0,59,227,0.22)}
.work-actions button.primary{background: var(--p); color:#fff; border-color: rgba(0,59,227,0.35)}

.work-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 26px;
}
.work-item{
  background: var(--bg0);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--stroke);
  transition: transform var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
  color: inherit;
  position:relative;
}
.work-item:hover{
  transform: scale(1.015);
  border-color: rgba(0,59,227,0.20);
  box-shadow: var(--shadow);
}
.work-viz{
  height: 250px;
  background: var(--bg2);
  display:grid;
  place-items:center;
  font-size: 4rem;
  transition: background var(--dur-3) var(--ease);
  position:relative;
}
.work-viz::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(680px 260px at 30% 20%, rgba(0,59,227,0.12), transparent 60%);
  opacity:.9;
}
.work-meta{padding: 28px 30px}
.work-meta span{
  font-family: var(--f-en);
  font-weight: 900;
  color: var(--p);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.work-meta h4{
  font-size: 1.55rem;
  font-weight: 900;
  margin-top: 10px;
  line-height: 1.2;
}
.work-meta p{
  margin-top: 10px;
  color: var(--muted);
  font-size: 1.0rem;
}
.work-cta{
  display:flex; gap: 10px; flex-wrap:wrap;
  padding: 0 30px 28px;
}
.work-cta a, .work-cta button{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.work-cta a:hover, .work-cta button:hover{transform: translateY(-2px); border-color: rgba(0,59,227,0.22)}
.work-cta a.primary{background: var(--p); color:#fff; border-color: rgba(0,59,227,0.35)}

/* Modal */
.modal{
  position: fixed; inset:0;
  z-index: 3000;
  display:none;
}
.modal.open{display:block}
.modal .modal-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.40);
}
html[data-theme="dark"] .modal .modal-overlay{background: rgba(0,0,0,0.62)}
.modal .modal-panel{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 94vw);
  height: min(78vh, 680px);
  border-radius: 26px;
  background: color-mix(in srgb, var(--glass) 90%, transparent);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-rows: auto 1fr auto;
  backdrop-filter: blur(18px);
}
.modal-head{
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid var(--stroke);
}
.modal-title{
  display:flex; flex-direction:column;
  gap: 4px;
}
.modal-title strong{font-weight: 900}
.modal-title span{color: var(--muted); font-family: var(--f-en); letter-spacing:.08em; font-size: 12px}
.modal-close{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  display:grid; place-items:center;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.modal-close:hover{transform: translateY(-2px); background: var(--p); color:#fff}
.modal-body{position:relative}
.modal-body iframe{
  width:100%; height:100%;
  border:0;
  background: var(--bg0);
}
.modal-fallback{
  position:absolute; inset:0;
  display:none;
  place-items:center;
  padding: 20px;
  text-align:center;
}
.modal-fallback.open{display:grid}
.modal-fallback .box{
  max-width: 620px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  padding: 18px 18px;
  box-shadow: var(--shadow2);
}
.modal-foot{
  padding: 14px 14px;
  border-top: 1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.rate{
  display:flex; gap: 6px; align-items:center; flex-wrap:wrap;
  font-family: var(--f-en);
}
.rate b{letter-spacing:.12em; font-size: 12px; color: var(--muted)}
.rate button{
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.rate button:hover{transform: translateY(-2px); border-color: rgba(0,59,227,0.22)}
.rate button.active{background: var(--p); color:#fff; border-color: rgba(0,59,227,0.35)}
.modal-foot a{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  font-weight: 900;
}
.modal-foot a.primary{background: var(--p); color:#fff; border-color: rgba(0,59,227,0.35)}

/* --------------------------------------------------------------------------
   10) Methodology section (new, consistent with style)
   -------------------------------------------------------------------------- */
.steps{
  max-width: 1100px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.step{
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--bg1);
  padding: 20px 18px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
  transition: transform var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.step:hover{transform: translateY(-6px); border-color: rgba(0,59,227,0.20); box-shadow: var(--shadow2)}
.step-n{
  width: 44px; height: 44px;
  border-radius: 16px;
  background: var(--p-soft);
  border: 1px solid rgba(0,59,227,0.18);
  display:grid; place-items:center;
  font-family: var(--f-en);
  font-weight: 900;
  color: var(--p);
}
.step h3{font-weight: 900; margin-bottom: 6px}
.step p{color: var(--muted)}

/* --------------------------------------------------------------------------
   11) FAQ accordion (new)
   -------------------------------------------------------------------------- */
.faq{
  max-width: 1100px;
  margin: 0 auto;
  display:grid;
  gap: 12px;
}
.faq-item{
  border: 1px solid var(--stroke);
  background: var(--bg1);
  border-radius: var(--radius2);
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:start;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  cursor:pointer;
  font-weight: 900;
}
.faq-q span{color: var(--muted); font-weight: 900}
.faq-a{
  display:none;
  padding: 0 18px 18px;
  color: var(--muted);
}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{color: var(--p)}

/* FAQ - Dark mode text color */
:root[data-theme="dark"] #faq,
:root[data-theme="dark"] .faq,
:root[data-theme="dark"] .faq * ,
:root[data-theme="dark"] #faq * {
  color: #fff !important;
}

/* (اختياري) لون الأيقونة + / - */
:root[data-theme="dark"] .faq .faq-toggle,
:root[data-theme="dark"] #faq .faq-toggle,
:root[data-theme="dark"] .faq button,
:root[data-theme="dark"] #faq button {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   12) Contact (preserve but upgrade details)
   -------------------------------------------------------------------------- */
.contact-box{
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg0);
  border-radius: 40px;
  padding: 70px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
  position:relative;
  overflow:hidden;
}
.contact-box::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(880px 340px at 20% 0%, rgba(0,59,227,0.10), transparent 65%);
  pointer-events:none;
}
.c-form{display:flex; flex-direction:column; gap: 18px; position:relative; z-index:1}
.field{display:flex; flex-direction:column; gap: 10px}
.field label{font-weight: 900; font-size: 0.95rem; padding-inline-start: 6px}
.field input, .field textarea{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  font-family: var(--f-ar);
  font-size: 1rem;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.field input:focus, .field textarea:focus{
  border-color: rgba(0,59,227,0.45);
  background: color-mix(in srgb, var(--bg0) 92%, transparent);
  box-shadow: 0 0 0 6px rgba(0,59,227,0.10);
}
.submit-btn{
  padding: 18px;
  background: var(--p);
  color:#fff;
  border: none;
  border-radius: 18px;
  font-weight: 900;
  font-size: 1.05rem;
  cursor:pointer;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  box-shadow: 0 18px 40px rgba(0,59,227,0.16);
}
.submit-btn:hover{background: var(--p-h); transform: translateY(-3px)}
.form-row{
  display:flex; gap: 10px; flex-wrap:wrap;
}
.ghost-btn{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
  cursor:pointer;
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.ghost-btn:hover{transform: translateY(-3px); border-color: rgba(0,59,227,0.22)}

.contact-kv{
  margin-top: 18px;
  display:grid; gap: 12px;
}
.kv{
  display:flex; justify-content:space-between; gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--bg1);
}
.kv b{font-family: var(--f-en); letter-spacing:.08em; font-size: 12px; color: var(--muted)}
.kv a{font-weight: 900}

/* --------------------------------------------------------------------------
   13) Footer (darker, logo white pop)
   -------------------------------------------------------------------------- */
.footer{
  padding: 90px 0 50px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 40%, #00040f), #00040f);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
}
html[data-theme="light"] .footer{ /* keep footer dark even in light (requested earlier) */
  background: linear-gradient(180deg, #0b1230, #00040f);
}
.f-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 18px;
  margin-bottom: 50px;
  flex-wrap:wrap;
}
.f-logo img{
  height: 40px;
  filter: brightness(0) invert(1);
  opacity: .98;
  drop-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.f-links{
  display:flex; gap: 12px; flex-wrap:wrap;
}
.f-links a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(234,242,255,0.90);
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.f-links a:hover{transform: translateY(-2px); background: rgba(255,255,255,0.10)}
.f-bottom{
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 26px;
  text-align:center;
  color: rgba(234,242,255,0.70);
  font-size: 0.95rem;
  font-family: var(--f-en);
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   14) Toast (feedback)
   -------------------------------------------------------------------------- */
.toast{
  position: fixed;
  bottom: 16px; inset-inline: 16px;
  max-width: 720px;
  margin-inline: auto;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--glass) 88%, transparent);
  box-shadow: var(--shadow2);
  z-index: 4000;
  display:none;
  backdrop-filter: blur(18px);
}
.toast.open{display:block}
.toast strong{display:block; font-weight: 900}
.toast span{color: var(--muted)}

/* --------------------------------------------------------------------------
   15) Reveal animations (smooth sections)
   -------------------------------------------------------------------------- */
.reveal{opacity:0; transform: translateY(44px); transition: opacity 1.0s var(--ease), transform 1.0s var(--ease)}
.reveal.active{opacity:1; transform: translateY(0)}
.reveal.fade{transform:none}
.reveal.fade.active{opacity:1}
.reveal.scale{transform: scale(0.96); transform-origin:center}
.reveal.scale.active{transform: scale(1)}

/* --------------------------------------------------------------------------
   16) Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px){
  .hero-grid{gap: 46px}
  .feat-grid{grid-template-columns: 1fr; gap: 16px}
  .founder-grid{grid-template-columns: 1fr; gap: 22px; padding: 70px 0}
  .contact-box{grid-template-columns: 1fr; padding: 40px}
  .work-grid{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
}
@media (max-width: 1024px){
  .menu{display:none}
  .burger{display:inline-block}
  .nav{gap: 12px}
  .hero{min-height: auto; padding-bottom: 40px}
}
@media (max-width: 560px){
  :root{--header-h: 82px}
  .hero-text p{font-size: 1.12rem}
  .sec{padding: 90px 0}
  .sec-h h2{font-size: 2.6rem}
  .feat-card{padding: 34px 22px; border-radius: 22px}
  .work-meta{padding: 22px 22px}
  .work-cta{padding: 0 22px 22px}
  .btn{padding: 16px 18px; border-radius: 18px}
}

/* --------------------------------------------------------------------------
   17) Print (optional)
   -------------------------------------------------------------------------- */
@media print{
  #loader, .modal, .mnav, .mnav-overlay, .toast{display:none !important}
  .header{position: static; box-shadow:none}
  body{background:#fff; color:#000}
}

/* --------------------------------------------------------------------------
   18) Keyframes (kept + added)
   -------------------------------------------------------------------------- */
@keyframes rotate{to{transform: rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.55; transform:scale(.92)}}


/* --- v13 HOTFIX: loader must never block forever --- */
:root{ --brand:#003be3; }
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background: radial-gradient(900px 600px at 60% 20%, rgba(0,59,227,.10), transparent 60%),
              linear-gradient(180deg, #ffffff, #f3f6ff);
  color:#0a1230;
  transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
}
html[data-theme="dark"] .loader{
  background: radial-gradient(900px 600px at 60% 20%, rgba(0,59,227,.18), transparent 60%),
              linear-gradient(180deg, #000210, #000);
  color:#eaf2ff;
}
.loader__card{
  width:min(520px, 88vw);
  border-radius:18px;
  border:1px solid rgba(0,59,227,.18);
  background: rgba(255,255,255,.82);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  padding:16px 16px 14px;
}
html[data-theme="dark"] .loader__card{
  background: rgba(9,18,55,.45);
  border-color: rgba(97,171,246,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.loader__row{display:flex; align-items:center; gap:12px; justify-content:center}
.loader__logo{height:38px; width:auto; filter: drop-shadow(0 10px 26px rgba(0,59,227,.25))}
html[data-theme="dark"] .loader__logo{filter: brightness(0) invert(1) drop-shadow(0 10px 26px rgba(0,59,227,.35))}
.loader__title{font-weight:900; letter-spacing:.08em}
.loader__sub{margin-top:8px; text-align:center; opacity:.75}
.loader__bar{margin-top:12px; height:10px; border-radius:999px; overflow:hidden; background: rgba(0,59,227,.12)}
.loader__bar span{display:block; height:100%; width:42%; border-radius:999px; background: var(--brand); animation: loadmove 1.1s ease-in-out infinite}
@keyframes loadmove{0%{transform:translateX(-10%)}50%{transform:translateX(135%)}100%{transform:translateX(-10%)}}
.loader__foot{margin-top:12px; display:flex; justify-content:space-between; font-size:12px; opacity:.70}
.loader.is-out{opacity:0; transform: translateY(6px); visibility:hidden; pointer-events:none}

/* If JS dies, auto-hide loader after 3.2s */
@media (prefers-reduced-motion: no-preference){
  .loader{ animation: autoHide 0s linear 3.2s forwards; }
  @keyframes autoHide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
}

/* Buttons: force solid brand */
.btn--primary{
  background: var(--brand) !important;
  border-color: rgba(0,59,227,.55) !important;
  box-shadow: 0 18px 55px rgba(0,59,227,.18) !important;
}
.btn--primary:hover{filter: brightness(1.02); transform: translateY(-1px)}


/* --- v14 HOTFIX: never show the mobile drawer on desktop --- */
@media (min-width: 1025px){
  .mnav, .mnav-overlay{ display:none !important; }
}


/* --- v15 Loader: terminal welcome (modern) --- */
:root{
  --brand:#003be3;
  --ok:#19d36c;
}
.loader--term{
  background: radial-gradient(900px 600px at 60% 20%, rgba(0,59,227,.10), transparent 60%),
              linear-gradient(180deg, #ffffff, #f3f6ff);
}
html[data-theme="dark"] .loader--term{
  background: radial-gradient(900px 600px at 60% 20%, rgba(0,59,227,.18), transparent 60%),
              linear-gradient(180deg, #000210, #000);
}
.term{
  width:min(680px, 92vw);
  border-radius:20px;
  border:1px solid rgba(0,59,227,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 25px 70px rgba(0,0,0,.14);
  overflow:hidden;
}
html[data-theme="dark"] .term{
  background: rgba(9,18,55,.52);
  border-color: rgba(97,171,246,.25);
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
}
.term__top{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  background: rgba(0,59,227,.06);
  border-bottom:1px solid rgba(0,59,227,.12);
}
html[data-theme="dark"] .term__top{
  background: rgba(97,171,246,.08);
  border-bottom-color: rgba(97,171,246,.18);
}
.term__dot{width:10px; height:10px; border-radius:999px; opacity:.95}
.term__dot--red{background:#ff5f56}
.term__dot--yellow{background:#ffbd2e}
.term__dot--green{background:var(--ok); box-shadow: 0 0 0 8px rgba(25,211,108,.10)}
.term__title{margin-inline-start:6px; font-weight:800; letter-spacing:.08em; opacity:.85}
.term__pill{
  margin-inline-start:auto;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,59,227,.16);
  background: rgba(0,59,227,.08);
  color: rgba(0,59,227,.95);
}
html[data-theme="dark"] .term__pill{
  border-color: rgba(97,171,246,.22);
  background: rgba(97,171,246,.12);
  color: rgba(234,242,255,.92);
}
.term__body{padding:16px 16px 14px}
.term__line{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(0,59,227,.10);
  background: rgba(255,255,255,.55);
  margin-top:10px;
}
html[data-theme="dark"] .term__line{
  border-color: rgba(97,171,246,.16);
  background: rgba(0,2,16,.28);
}
.term__prompt{font-weight:900; color: rgba(0,59,227,.9)}
.term__prompt--ok{color: var(--ok)}
.term__text{font-weight:800}
.term__text--ok{color: var(--ok)}
.term__blink{
  width:10px; height:10px; border-radius:999px;
  background: var(--ok);
  margin-inline-start:auto;
  box-shadow: 0 0 0 0 rgba(25,211,108,.32);
  animation: termPulse 1.4s ease-in-out infinite;
}
@keyframes termPulse{
  0%{box-shadow:0 0 0 0 rgba(25,211,108,.28); opacity:.75}
  70%{box-shadow:0 0 0 16px rgba(25,211,108,0); opacity:1}
  100%{box-shadow:0 0 0 0 rgba(25,211,108,0); opacity:.75}
}
.term__progress{margin-top:14px}
.term__bar{height:10px; border-radius:999px; overflow:hidden; background: rgba(0,59,227,.12)}
.term__bar span{
  display:block; height:100%; width:45%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--ok), rgba(25,211,108,.7));
  animation: termLoad 1.1s ease-in-out infinite;
}
@keyframes termLoad{0%{transform:translateX(-12%)}50%{transform:translateX(135%)}100%{transform:translateX(-12%)}}
.term__meta{margin-top:10px; display:flex; justify-content:space-between; font-size:12px; opacity:.72}
html[data-theme="dark"] .menu a{opacity:.82}
html[data-theme="dark"] .menu a.active{color: #ffffff}

/* --- v18 hotfixes: mobile hero layout + coder orb --- */
.hero-viz{--ring-size:360px;max-width:var(--ring-size)}
.theme-orb{width:26px;height:26px;display:grid;place-items:center;overflow:hidden;position:relative;color:var(--ink)}
.theme-orb:before{content:"";position:absolute;inset:-6px;border:1px solid rgba(110,200,255,.22);border-radius:999px;animation:orbPulse 2.8s ease-in-out infinite}
.theme-orb .coder-ic{width:17px;height:17px;}
.theme-orb--coder{background:radial-gradient(circle at 30% 30%,rgba(110,200,255,.35),rgba(46,107,255,.12) 45%,rgba(0,0,0,0) 70%),rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22)}
html[data-theme="light"] .theme-orb--coder{border:1px solid rgba(20,30,60,.12);box-shadow:0 10px 24px rgba(20,30,60,.12)}
.theme-orb--coder .coder-ic{color:rgba(255,255,255,.92)}
html[data-theme="light"] .theme-orb--coder .coder-ic{color:rgba(20,30,60,.82)}
.theme-orb--coder .cursor{animation:cursorBlink 1s steps(2,end) infinite}
.theme-orb--coder .codeL{animation:codeWiggle 2.2s ease-in-out infinite}
.theme-orb--coder .codeR{animation:codeWiggle 2.2s ease-in-out infinite reverse}
@keyframes orbPulse{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.06);opacity:.95}}
@keyframes cursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes codeWiggle{0%,100%{transform:translateX(0)}50%{transform:translateX(1.4px)}}
/* زر الإرسال - نص مناسب في الوضع المظلم */
html[data-theme="dark"] #contact button[type="submit"],
html[data-theme="dark"] form button[type="submit"],
html[data-theme="dark"] .contact-form button[type="submit"],
html[data-theme="dark"] .btn-send {
  color: #ffffff !important;               /* نص أبيض */
  border-color: rgba(255,255,255,.18) !important;
}

/* لو عندك زر إرسال بخلفية فاتحة في الدارك: اجعل النص داكن */
html[data-theme="dark"] #contact button[type="submit"].is-light,
html[data-theme="dark"] .btn-send.is-light {
  color: #0b1222 !important;               /* نص داكن */
}

/* اختياري: تحسين hover/focus في الدارك */
html[data-theme="dark"] #contact button[type="submit"]:hover,
html[data-theme="dark"] form button[type="submit"]:hover {
  filter: brightness(1.06);
}
html[data-theme="dark"] #contact button[type="submit"]:focus-visible,
html[data-theme="dark"] form button[type="submit"]:focus-visible {
  outline: 2px solid rgba(0,59,227,.55);
  outline-offset: 3px;
}
/* زر الإرسال: نص أبيض في الوضعين (Light + Dark) */
#contact button[type="submit"],
form button[type="submit"],
.contact-form button[type="submit"],
#sendBtn,
.btn-send {
  color: #ffffff !important;
}

/* (اختياري) تأكيد في الدارك + تحسين التباين */
html[data-theme="dark"] #contact button[type="submit"],
html[data-theme="dark"] form button[type="submit"],
html[data-theme="dark"] .contact-form button[type="submit"],
html[data-theme="dark"] #sendBtn,
html[data-theme="dark"] .btn-send {
  color: #ffffff !important;
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-viz{order:-1;--ring-size:min(300px,82vw)}
  .hero-text{max-width:720px;text-align:center;margin:0 auto}
  .hero-kicker{justify-content:center}
  .hero-actions{justify-content:center}
  }

@media (max-width: 560px){
  .hero{padding-top:96px}
  .hero-text h1{font-size:clamp(34px,9vw,44px)}
  .hero-text p{font-size:15px}
  .hero-viz{--ring-size:min(260px,86vw)}
}
/* =========================
   MOBILE MENU - FULL WIDTH + GLOW + ANIM BG
   (Mobile only - desktop unchanged)
   ========================= */
@media (max-width: 1024px){

  /* Fullscreen panel + animated background */
  .mnav{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 18px 16px 22px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 !important;
  }

  /* Animated background layer */
  .mnav::before{
    content:"";
    position:absolute;
    inset:-30%;
    z-index:0;
    background:
      radial-gradient(800px 400px at 20% 15%, rgba(0,229,255,.22), transparent 60%),
      radial-gradient(900px 500px at 85% 35%, rgba(0,59,227,.24), transparent 62%),
      radial-gradient(700px 500px at 35% 90%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(120deg, rgba(0,59,227,.22), rgba(0,229,255,.18), rgba(0,4,15,.55));
    filter: blur(18px);
    transform: translate3d(0,0,0);
    animation: mnavAurora 9s ease-in-out infinite alternate;
  }

  .mnav::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.05) 0px,
        rgba(255,255,255,.05) 1px,
        transparent 1px,
        transparent 10px
      );
    opacity:.18;
    mix-blend-mode: overlay;
    pointer-events:none;
  }

  @keyframes mnavAurora{
    0%   { transform: translate3d(-2%, -2%, 0) scale(1.05) rotate(-1deg); }
    50%  { transform: translate3d(2%, 1%, 0)  scale(1.10) rotate(1deg); }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.12) rotate(-1.5deg); }
  }

  /* Ensure content is above background */
  .mnav > *{
    position: relative;
    z-index: 1;
  }

  /* Links as full-width glowing buttons */
  .mnav-links{
    margin-top: 14px;
    display: grid;
    gap: 12px;
  }

  .mnav-links li{
    list-style: none;
  }

  .mnav-links a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 14px;
    border-radius: 16px;
    text-decoration:none;
    font-weight: 800;
    letter-spacing: .2px;
    position: relative;
    overflow: hidden;

    /* button look */
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      0 0 0 1px rgba(0,229,255,.10) inset;
    color: rgba(255,255,255,.92);

    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }

  /* shimmer sweep */
  .mnav-links a::before{
    content:"";
    position:absolute;
    inset:-40% -60%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.10) 35%,
      rgba(0,229,255,.22) 50%,
      rgba(255,255,255,.10) 65%,
      transparent 100%
    );
    transform: translateX(-35%) rotate(10deg);
    animation: mnavShimmer 2.8s ease-in-out infinite;
    opacity: .85;
    pointer-events:none;
  }

  @keyframes mnavShimmer{
    0%   { transform: translateX(-55%) rotate(10deg); opacity: .55; }
    45%  { opacity: .90; }
    100% { transform: translateX(55%) rotate(10deg); opacity: .55; }
  }

  /* glow ring */
  .mnav-links a::after{
    content:"";
    position:absolute;
    inset: -2px;
    border-radius: 18px;
    background: conic-gradient(
      from 180deg,
      rgba(0,229,255,.0),
      rgba(0,229,255,.35),
      rgba(0,59,227,.35),
      rgba(0,229,255,.35),
      rgba(0,229,255,.0)
    );
    filter: blur(10px);
    opacity: .45;
    z-index: -1;
    animation: mnavGlow 2.4s linear infinite;
    pointer-events:none;
  }

  @keyframes mnavGlow{
    to { transform: rotate(360deg); }
  }

  /* tap/hover feedback */
  .mnav-links a:active{
    transform: scale(.985);
  }

  .mnav-links a:hover{
    border-color: rgba(0,229,255,.28);
    box-shadow:
      0 16px 36px rgba(0,0,0,.42),
      0 0 0 1px rgba(0,229,255,.18) inset,
      0 0 28px rgba(0,229,255,.14);
    background: rgba(255,255,255,.08);
  }

  /* Improve overlay feel */
  .mnav-overlay.open{
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .mnav::before, .mnav-links a::before, .mnav-links a::after{
      animation: none !important;
    }
    .mnav-links a{
      transition: none !important;
    }
  }
}

/* Dual language label without touching JS */
.i18n-dual .txt-ar, .i18n-dual .txt-en { display:none; }

/* When page language is Arabic */
html[lang="ar"] .i18n-dual .txt-ar{ display:inline; }

/* When page language is English */
html[lang="en"] .i18n-dual .txt-en{ display:inline; }

@media (max-width: 1024px) {

  .mnav-links a::after {
    content: "";
    position: absolute;
    inset: -60%;
    background: linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.6),
      transparent 70%
    );
    transform: translateX(-100%);
  }

  .mnav-links a:active::after {
    animation: shine .6s ease;
  }

  @keyframes shine {
    to { transform: translateX(100%); }
  }
}
.i18n-static .txt-en{ display:none; }
html[lang="en"] .i18n-static .txt-ar{ display:none; }
html[lang="en"] .i18n-static .txt-en{ display:inline; }
/* =========================
   MOBILE MENU: FULLSCREEN + GLOW
   (Mobile only)
   ========================= */
@media (max-width: 1024px){

  /* Overlay: full screen animated background */
  .mnav-overlay{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
      radial-gradient(1200px 800px at 20% 15%, rgba(0,59,227,.22), transparent 55%),
      radial-gradient(1000px 700px at 85% 25%, rgba(0,229,255,.18), transparent 55%),
      radial-gradient(900px 700px at 40% 90%, rgba(255,255,255,.12), transparent 60%),
      linear-gradient(120deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .25s ease, transform .25s ease;
  }
  .mnav-overlay.open{
    opacity: 1;
    transform: scale(1);
    animation: mnavBgMove 7s ease-in-out infinite;
  }

  @keyframes mnavBgMove{
    0%   { filter: hue-rotate(0deg) saturate(1); }
    50%  { filter: hue-rotate(10deg) saturate(1.1); }
    100% { filter: hue-rotate(0deg) saturate(1); }
  }

  /* Panel: edge to edge with smooth slide */
  .mnav{
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(92vw, 380px);
    z-index: 9999;
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 24px 70px rgba(0,0,0,.18);
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.2,.9,.2,1);
    overflow: hidden;
  }

  /* RTL/LTR support */
  html[dir="rtl"] .mnav{ right: 0; left: auto; transform: translateX(110%); }
  html[dir="rtl"] .mnav.open{ transform: translateX(0); }
  html[dir="ltr"] .mnav{ left: 0; right: auto; transform: translateX(-110%); }
  html[dir="ltr"] .mnav.open{ transform: translateX(0); }

  /* Inner animated layer (full panel) */
  .mnav::before{
    content:"";
    position:absolute;
    inset:-30%;
    background:
      radial-gradient(closest-side at 25% 30%, rgba(0,59,227,.20), transparent 60%),
      radial-gradient(closest-side at 75% 40%, rgba(0,229,255,.18), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    transform: rotate(8deg);
    animation: mnavLayer 10s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mnavLayer{
    0%{ transform: translate3d(-2%, -2%, 0) rotate(8deg); }
    50%{ transform: translate3d(2%, 2%, 0) rotate(8deg); }
    100%{ transform: translate3d(-2%, -2%, 0) rotate(8deg); }
  }

  .mnav-head, .mnav-links, .mnav-actions{
    position: relative;
    z-index: 1;
  }

  /* Links as full-width glowing pills */
  .mnav-links{
    padding: 14px 14px 6px;
    display: grid;
    gap: 10px;
  }

  .mnav-links a{
    display: block;
    width: 100%;
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
      0 10px 26px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.55);
    text-decoration: none;
    font-weight: 800;
    color: #0b1020;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: mnavItemIn .45s ease forwards;
  }

  /* stagger */
  .mnav-links li:nth-child(1) a{ animation-delay: .06s; }
  .mnav-links li:nth-child(2) a{ animation-delay: .09s; }
  .mnav-links li:nth-child(3) a{ animation-delay: .12s; }
  .mnav-links li:nth-child(4) a{ animation-delay: .15s; }
  .mnav-links li:nth-child(5) a{ animation-delay: .18s; }
  .mnav-links li:nth-child(6) a{ animation-delay: .21s; }
  .mnav-links li:nth-child(7) a{ animation-delay: .24s; }
  .mnav-links li:nth-child(8) a{ animation-delay: .27s; }
  .mnav-links li:nth-child(9) a{ animation-delay: .30s; }
  .mnav-links li:nth-child(10) a{ animation-delay: .33s; }

  @keyframes mnavItemIn{
    to{ transform: translateY(0); opacity: 1; }
  }

  /* Shine effect */
  .mnav-links a::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-60%;
    width: 60%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    transform: rotate(18deg);
    animation: mnavShine 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mnavShine{
    0%{ left:-70%; opacity:.0; }
    20%{ opacity:.45; }
    50%{ left:120%; opacity:.55; }
    100%{ left:120%; opacity:0; }
  }

  .mnav-links a:active{
    transform: translateY(0) scale(.99);
  }

  /* Actions area spacing */
  .mnav-actions{
    padding: 12px 14px 18px;
    gap: 12px;
  }

  /* Optional: dark theme adjustments for mobile menu */
  html[data-theme="dark"] .mnav{
    background: rgba(10,14,28,.55);
    border-color: rgba(255,255,255,.12);
  }
  html[data-theme="dark"] .mnav-links a{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.10);
    color: #eaf2ff;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
  }
}
/* Static bilingual helper (ONLY CSS) */
.i18n-static .txt-en { display:none; }
html[lang="en"] .i18n-static .txt-ar { display:none; }
html[lang="en"] .i18n-static .txt-en { display:inline; }

/* ===========================
   MOBILE MENU: Full screen bg + shimmer buttons (MOBILE ONLY)
   =========================== */
@media (max-width: 1024px){

  /* overlay becomes a living animated layer */
  .mnav-overlay{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
      radial-gradient(1200px 800px at 20% 10%, rgba(0,59,227,.18), transparent 55%),
      radial-gradient(900px 700px at 90% 30%, rgba(0,229,255,.16), transparent 60%),
      radial-gradient(900px 900px at 50% 90%, rgba(255,255,255,.18), transparent 62%),
      rgba(2,6,18,.55);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .mnav-overlay.open{ opacity: 1; }

  /* panel full height + animated background */
  .mnav{
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(92vw, 420px);
    z-index: 9999;
    transform: translateX(-110%);
    transition: transform .28s cubic-bezier(.2,.9,.2,1);
    overflow: hidden;
    border-radius: 0 22px 22px 0;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
  }
  html[dir="rtl"] .mnav{
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(110%);
    border-radius: 22px 0 0 22px;
  }
  .mnav.open{ transform: translateX(0); }

  /* animated “full screen” feel inside the panel */
  .mnav::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
      radial-gradient(900px 700px at 20% 20%, rgba(0,229,255,.22), transparent 55%),
      radial-gradient(900px 700px at 80% 40%, rgba(0,59,227,.24), transparent 60%),
      linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    filter: blur(0px);
    animation: mnavGlow 7s ease-in-out infinite alternate;
  }
  .mnav::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(255,255,255,.72);
    opacity: .92;
  }

  /* dark theme */
  html[data-theme="dark"] .mnav::after{
    background: rgba(4,8,18,.72);
    opacity: .95;
  }

  @keyframes mnavGlow{
    0%{ transform: translate3d(-6%, -4%, 0) scale(1.02) rotate(0deg); }
    100%{ transform: translate3d(6%, 4%, 0) scale(1.08) rotate(1deg); }
  }

  /* content above bg layers */
  .mnav > *{ position: relative; z-index: 1; }

  /* links stack = full width buttons */
  .mnav-links{
    padding: 16px 14px 8px;
    display: grid;
    gap: 10px;
  }

  .mnav-links a{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 900;
    letter-spacing: .2px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(0,0,0,.06);
    color: #0b1020;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  }

  html[data-theme="dark"] .mnav-links a{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
  }

  /* shimmering sweep */
  .mnav-links a::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.0) 35%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.0) 65%,
      transparent 100%);
    transform: translateX(-120%) skewX(-12deg);
    animation: shimmerSweep 2.4s ease-in-out infinite;
    opacity: .55;
    pointer-events: none;
  }

  html[data-theme="dark"] .mnav-links a::before{
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(0,229,255,.0) 35%,
      rgba(0,229,255,.55) 50%,
      rgba(0,229,255,.0) 65%,
      transparent 100%);
    opacity: .45;
  }

  @keyframes shimmerSweep{
    0%{ transform: translateX(-140%) skewX(-12deg); }
    60%{ transform: translateX(140%) skewX(-12deg); }
    100%{ transform: translateX(140%) skewX(-12deg); }
  }

  /* hover / tap feel */
  .mnav-links a:active{ transform: scale(.98); }
  .mnav-links a:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
  }

  /* actions row look cleaner on mobile */
  .mnav-actions{
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
  }
  .mnav-actions .act-btn{
    width: 100%;
    justify-content: center;
    border-radius: 16px;
  }

  /* optional: make the mail button full width under them if you want */
  .mnav-actions a.act-btn[aria-label="Contact"]{
    grid-column: 1 / -1;
  }
}
/* ===========================
   Mobile Menu — Fullscreen FX
   (Mobile only, desktop unchanged)
   =========================== */
@media (max-width: 1024px){

  /* Overlay full screen with animated background */
  .mnav-overlay{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
      radial-gradient(1200px 700px at 15% 10%, rgba(0,59,227,.20), transparent 60%),
      radial-gradient(900px 600px at 85% 90%, rgba(0,229,255,.16), transparent 55%),
      linear-gradient(180deg, rgba(2,6,18,.45), rgba(2,6,18,.62));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .25s ease;
    overflow: hidden;
  }
  .mnav-overlay.open{ opacity: 1; }

  /* moving glow layer */
  .mnav-overlay::before{
    content:"";
    position:absolute;
    inset:-30%;
    background:
      conic-gradient(from 180deg at 50% 50%,
        rgba(0,229,255,.0),
        rgba(0,229,255,.18),
        rgba(0,59,227,.18),
        rgba(0,229,255,.0));
    filter: blur(18px);
    opacity: .75;
    animation: mnavGlow 5.5s linear infinite;
  }
  @keyframes mnavGlow{
    0%{ transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1.05); }
    50%{ transform: translate3d(6%, 4%, 0) rotate(180deg) scale(1.08); }
    100%{ transform: translate3d(-6%, -4%, 0) rotate(360deg) scale(1.05); }
  }

  /* Panel: take most of screen, keep your layout */
  .mnav{
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    padding: 16px 14px 18px;
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow: hidden;
    border-radius: 0;
    background:
      radial-gradient(900px 600px at 20% 20%, rgba(0,59,227,.12), transparent 60%),
      radial-gradient(700px 500px at 80% 80%, rgba(0,229,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  }
  html[dir="rtl"] .mnav{ transform: translateX(-100%); }
  .mnav.open{ transform: translateX(0); }

  /* dark theme panel background */
  html[data-theme="dark"] .mnav{
    background:
      radial-gradient(900px 600px at 20% 20%, rgba(0,59,227,.20), transparent 60%),
      radial-gradient(700px 500px at 80% 80%, rgba(0,229,255,.16), transparent 55%),
      linear-gradient(180deg, rgba(5,8,18,.92), rgba(5,8,18,.86));
  }

  /* animated background layer inside panel */
  .mnav::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
      radial-gradient(circle at 30% 30%, rgba(0,59,227,.25), transparent 55%),
      radial-gradient(circle at 75% 70%, rgba(0,229,255,.20), transparent 55%),
      conic-gradient(from 120deg at 50% 50%,
        rgba(0,59,227,.0),
        rgba(0,59,227,.14),
        rgba(0,229,255,.14),
        rgba(0,59,227,.0));
    filter: blur(18px);
    opacity: .85;
    animation: mnavBg 9s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mnavBg{
    0%{ transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1.03); }
    50%{ transform: translate3d(4%, 3%, 0) rotate(180deg) scale(1.06); }
    100%{ transform: translate3d(-4%, -2%, 0) rotate(360deg) scale(1.03); }
  }

  /* keep content above backgrounds */
  .mnav > *{ position: relative; z-index: 1; }

  /* Links: full width "buttons" */
  .mnav-links{
    margin-top: 12px;
    display: grid;
    gap: 10px;
  }
  .mnav-links a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.75);
    color: #0b1020;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  html[data-theme="dark"] .mnav-links a{
    background: rgba(10,14,28,.55);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    box-shadow: 0 18px 38px rgba(0,0,0,.35);
  }

  /* shimmer shine */
  .mnav-links a::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.0) 35%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.0) 65%,
      transparent 100%);
    transform: translateX(-120%);
    animation: mnavShine 2.6s ease-in-out infinite;
    opacity: .9;
  }
  html[data-theme="dark"] .mnav-links a::before{
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(0,229,255,.0) 35%,
      rgba(0,229,255,.35) 50%,
      rgba(0,229,255,.0) 65%,
      transparent 100%);
    opacity: .85;
  }
  @keyframes mnavShine{
    0%{ transform: translateX(-130%); }
    55%{ transform: translateX(130%); }
    100%{ transform: translateX(130%); }
  }

  /* hover/tap feedback */
  .mnav-links a:active{
    transform: scale(.98);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }

  /* actions area stronger */
  .mnav-actions{
    margin-top: 14px;
    gap: 12px;
  }

  /* close button more visible */
  .mnav-close{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }
  html[data-theme="dark"] .mnav-close{
    background: rgba(10,14,28,.55);
    border-color: rgba(255,255,255,.12);
  }

}