@charset "UTF-8";
/* ==========================================================================
   moa7amed.com — design system
   One stylesheet, no framework. Logical properties throughout so the same
   rules serve LTR and RTL. Light theme is primary; dark follows the OS and
   can be overridden by the toggle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — the bulk of the page */
  --c-bg:            #ffffff;
  --c-bg-subtle:     #f7f8fa;
  --c-bg-inset:      #eef1f5;
  --c-surface:       #ffffff;
  --c-border:        #e3e7ed;
  --c-border-strong: #cdd4de;

  --c-text:          #16202e;
  --c-text-muted:    #5a6675;
  /* Darkened from #737f8e: the lighter value measured 3.83:1 against
     --c-bg-subtle, below the 4.5:1 AA minimum for small text. */
  --c-text-faint:    #656f7e;

  /* One accent, used sparingly */
  --c-accent:        #0a5bd3;
  --c-accent-hover:  #0847a5;
  --c-accent-soft:   #eaf1fd;
  --c-accent-text:   #0a4fb8;

  --c-focus:         #0a5bd3;
  --c-danger:        #b3261e;
  --c-danger-soft:   #fdecea;
  --c-success:       #146c43;
  --c-success-soft:  #e7f4ec;

  /* Type — system stack, zero webfont cost */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Noto Naskh Arabic",
               "Segoe UI Historic", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */

  --lh-tight: 1.2;
  --lh-snug:  1.45;
  --lh-base:  1.65;

  /* Spacing — 4px scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow:    0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

  --container: 1120px;
  --container-narrow: 760px;
  --header-h: 60px;

  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* Dark palette, shared by the OS preference and the explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:            #0e1420;
    --c-bg-subtle:     #131a28;
    --c-bg-inset:      #1a2333;
    --c-surface:       #151d2c;
    --c-border:        #263042;
    --c-border-strong: #35415a;

    --c-text:          #e8edf5;
    --c-text-muted:    #a9b4c5;
    --c-text-faint:    #8b96a8;

    --c-accent:        #4b8ef7;
    --c-accent-hover:  #6aa5ff;
    --c-accent-soft:   #16243c;
    --c-accent-text:   #9cc4ff;

    --c-focus:         #6aa5ff;
    --c-danger:        #ff9a92;
    --c-danger-soft:   #2c1a1a;
    --c-success:       #6ede9f;
    --c-success-soft:  #14261d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow:    0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --c-bg:            #0e1420;
  --c-bg-subtle:     #131a28;
  --c-bg-inset:      #1a2333;
  --c-surface:       #151d2c;
  --c-border:        #263042;
  --c-border-strong: #35415a;

  --c-text:          #e8edf5;
  --c-text-muted:    #a9b4c5;
  --c-text-faint:    #8b96a8;

  --c-accent:        #4b8ef7;
  --c-accent-hover:  #6aa5ff;
  --c-accent-soft:   #16243c;
  --c-accent-text:   #9cc4ff;

  --c-focus:         #6aa5ff;
  --c-danger:        #ff9a92;
  --c-danger-soft:   #2c1a1a;
  --c-success:       #6ede9f;
  --c-success-soft:  #14261d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Long unbroken tokens (emails, URLs, package names) wrap instead of
     stretching their container past the viewport. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 650;
  line-height: var(--lh-tight);
  color: var(--c-text);
}
h1 { font-size: var(--fs-4xl); letter-spacing: -.022em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.018em; }
h3 { font-size: var(--fs-xl); letter-spacing: -.012em; }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }

/* Focus — always visible, never removed */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--c-accent-soft); color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-10); border-top: 1px solid var(--c-border); }
.section--subtle { background: var(--c-bg-subtle); }

.section__head { margin-bottom: var(--sp-7); max-width: 62ch; }
.section__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-2);
}
.section__lead { margin-top: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-md); }

.grid { display: grid; gap: var(--sp-5); }
/* min() keeps the track from demanding more than the container on narrow screens,
   which is what would otherwise force the page wider than the viewport. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); }

/* Grid and flex children default to min-width:auto, so a single long token
   (an email address, a URL) can push a track wider than its container. */
.grid > *, .about > *, .contact > *, .hero__inner > *, .resume-panel > * { min-width: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  background: var(--c-accent);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.6875rem var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }

.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn--secondary:hover { background: var(--c-bg-inset); color: var(--c-text); }

.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }

.btn__icon { flex: none; width: 16px; height: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   5. Cards, tags
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card--hover:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  display: inline-block;
  padding: 0.1875rem var(--sp-3);
  background: var(--c-bg-inset);
  color: var(--c-text-muted);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.tag--tech { font-family: var(--font-mono); font-size: 0.6875rem; }

/* A tag holds either an Arabic skill or a Latin technology name. "plaintext"
   takes each tag's direction from its own first strong character, so ".NET"
   stays ".NET" in the Arabic layout instead of being reordered to "NET.",
   while an Arabic tag still reads right-to-left. */
.tag { unicode-bidi: plaintext; }
.tag--accent { background: var(--c-accent-soft); color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header {
    background: color-mix(in srgb, var(--c-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.header__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-4); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 680;
  font-size: var(--fs-md);
  color: var(--c-text);
  letter-spacing: -.01em;
  margin-inline-end: auto;
}
.brand:hover { text-decoration: none; color: var(--c-text); }
.brand__mark {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--c-accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color var(--transition), background-color var(--transition);
}
.nav__link:hover { color: var(--c-text); background: var(--c-bg-inset); text-decoration: none; }
.nav__link[aria-current="true"] { color: var(--c-accent-text); font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: var(--c-bg-inset); color: var(--c-text); border-color: var(--c-border-strong); }
.icon-btn svg { width: 17px; height: 17px; }

/* The browser's own [hidden] rule is HTML-namespaced, so an <svg hidden> keeps
   rendering. The theme toggle relies on that attribute to swap sun for moon and
   was showing both at once, stacked, squashing the button. */
svg[hidden] { display: none; }

.lang-btn { width: auto; padding-inline: var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: 600; }

.menu-toggle { display: none; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-grid; }
  .nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-3);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-11) var(--sp-10);
}
/* Decorative accent wash. It carries the visual weight the portrait used to,
   without adding an image request. Sits behind the content and is inert. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -45%;
  inset-inline-end: -12%;
  inline-size: min(780px, 85%);
  aspect-ratio: 1;
  background: radial-gradient(circle at center, var(--c-accent-soft), transparent 66%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  /* The card is capped rather than proportional so the lead column keeps
     enough width for the three CTAs to sit on one line. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--sp-7);
  align-items: center;
}
.hero__lead { min-width: 0; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); flex: none; }
.hero__name { margin-bottom: var(--sp-4); }
.hero__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
}
.hero__summary {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  max-width: 56ch;
  margin-bottom: var(--sp-6);
}
.hero__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
}
.hero__link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.hero__link:hover { color: var(--c-accent-text); }
.hero__link svg { width: 15px; height: 15px; flex: none; }

/* Hero card — current role + who has certified him */
.hero__aside { min-width: 0; }
.hero-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}
.hero-card__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hero-card__badge {
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  display: grid; place-items: center;
}
.hero-card__badge svg { width: 19px; height: 19px; }
.hero-card__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.hero-card__role {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-base);
  font-weight: 620;
  line-height: var(--lh-snug);
}
.hero-card__meta {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.hero-card__meta li { display: flex; align-items: center; gap: var(--sp-3); }
.hero-card__meta svg { width: 15px; height: 15px; flex: none; color: var(--c-text-faint); }
.hero-card__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
/* .subhead is authored for headings; as a span it needs to be a block for its
   bottom margin to separate it from the chips. */
.hero-card__foot .subhead { display: block; }
.issuer-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.issuer {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.issuer__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--issuer-accent, var(--c-accent));
}

@media (max-width: 900px) {
  .hero { padding-block: var(--sp-8) var(--sp-7); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero::before { inset-block-start: -60%; inline-size: min(560px, 120%); }
  h1 { font-size: var(--fs-3xl); }
}

/* --------------------------------------------------------------------------
   8. Highlights (stat tiles)
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); gap: var(--sp-4); }
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.stat__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-accent-text);
  letter-spacing: -.02em;
  line-height: 1.1;
  /* "17+" and "~85" are numbers with no strong character, so in the Arabic
     layout the bidi algorithm hands the sign to the surrounding direction and
     renders "+17" and "85~". Isolating them as LTR keeps them as authored. */
  direction: ltr;
  unicode-bidi: isolate;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: var(--sp-7); } }
.about__prose p { color: var(--c-text-muted); font-size: var(--fs-md); }
.about__prose strong { color: var(--c-text); font-weight: 620; }

.subhead {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--sp-3);
}
.subhead + * { margin-top: 0; }
.block + .block { margin-top: var(--sp-7); }

.service { display: flex; gap: var(--sp-4); align-items: flex-start; }
.service__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  display: grid; place-items: center;
}
.service__icon svg { width: 19px; height: 19px; }
.service__title { font-size: var(--fs-base); font-weight: 620; margin-bottom: var(--sp-1); }
.service__desc { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-snug); }

.lang-list { display: grid; gap: 0; }
.lang-list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-base);
}
.lang-list li:last-child { border-bottom: 0; }
.lang__level { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   10. Experience timeline
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-inline-start: var(--sp-6); }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: var(--sp-2);
  inset-inline-start: 5px;
  width: 1px;
  background: var(--c-border);
}
.tl-item { position: relative; padding-block-end: var(--sp-7); }
.tl-item:last-child { padding-block-end: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: calc(-1 * var(--sp-6) + 1px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
}
.tl-item--current::before { background: var(--c-accent); border-color: var(--c-accent); }

.tl-item__period {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.badge-now {
  padding: 0.0625rem var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  font-size: 0.625rem;
  letter-spacing: .06em;
}
.tl-item__role { font-size: var(--fs-md); font-weight: 620; margin-bottom: var(--sp-1); }
.tl-item__org { font-size: var(--fs-base); color: var(--c-accent-text); margin-bottom: var(--sp-1); }
.tl-item__loc { font-size: var(--fs-sm); color: var(--c-text-faint); margin-bottom: var(--sp-3); }
.tl-item__desc { font-size: var(--fs-base); color: var(--c-text-muted); margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   11. Skills
   -------------------------------------------------------------------------- */
.skill-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.skill-group__name { font-size: var(--fs-base); font-weight: 620; }
.skill-group__level {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Projects
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.filter:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.filter[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.project { display: flex; flex-direction: column; }
.project__name { font-size: var(--fs-md); font-weight: 620; margin-bottom: var(--sp-2); }
.project__client { font-size: var(--fs-sm); color: var(--c-accent-text); font-weight: 550; }
.project__role { font-size: var(--fs-sm); color: var(--c-text-faint); margin-bottom: var(--sp-3); }
.project__desc { font-size: var(--fs-base); color: var(--c-text-muted); margin-bottom: var(--sp-4); flex: 1; }
.project[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. Certifications
   -------------------------------------------------------------------------- */
.cert { border-inline-start: 3px solid var(--cert-accent, var(--c-accent)); }
.cert__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.cert__badge {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--cert-accent, var(--c-accent));
  color: #fff; font-weight: 700; font-size: var(--fs-md);
}
.cert__title { font-size: var(--fs-base); font-weight: 620; margin-bottom: var(--sp-1); line-height: var(--lh-snug); }
.cert__issuer { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cert__date { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: var(--sp-1); }
.cert__actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.cert__link {
  font-size: var(--fs-xs); font-weight: 600;
  background: none; border: 0; padding: 0;
  color: var(--c-accent-text); cursor: pointer; font-family: inherit;
}
.cert__link:hover { text-decoration: underline; }

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(6, 10, 18, .84); }
.lightbox img {
  max-width: min(920px, 92vw);
  max-height: 86dvh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: fixed;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------------------
   14. Resume / education
   -------------------------------------------------------------------------- */
.resume-panel {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6);
  align-items: center;
  background: var(--c-bg-inset);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
@media (max-width: 700px) { .resume-panel { grid-template-columns: 1fr; } }

.edu-item { padding-block: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.edu-item:last-child { border-bottom: 0; }
.edu-item__qual { font-size: var(--fs-base); font-weight: 600; }
.edu-item__inst { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-1); }
.edu-item__year { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   15. Contact + forms
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--sp-7); } }

.contact-list { display: grid; gap: var(--sp-4); }
.contact-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-item__icon {
  flex: none; width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--c-bg-inset);
  color: var(--c-text-muted);
  display: grid; place-items: center;
}
.contact-item__icon svg { width: 16px; height: 16px; }
.contact-item__label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--c-text-faint); font-weight: 600;
}
.contact-item__value { font-size: var(--fs-base); overflow-wrap: anywhere; }

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.field__req { color: var(--c-danger); margin-inline-start: 2px; }

.input, .textarea {
  width: 100%;
  padding: 0.625rem var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-md); /* 16px — stops iOS zooming on focus */
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-danger); }
.textarea { resize: vertical; min-height: 130px; line-height: var(--lh-base); }

.field__error { display: block; font-size: var(--fs-sm); color: var(--c-danger); margin-top: var(--sp-2); }
.field__error:empty { display: none; }

/* Honeypot — never shown, never announced, never focusable.
   Deliberately avoids a negative offset: in RTL the inline-start side is
   scrollable, so `left: -9999px` would add 10000px of horizontal scroll. */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Turnstile renders into a fixed-size iframe between the last field and the
   Send button. Empty until its script loads — and permanently empty if that
   script is blocked — so the spacing only applies once it has drawn something. */
.turnstile:not(:empty) { margin-bottom: var(--sp-4); }

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
  border: 1px solid currentColor;
}
.alert--success { background: var(--c-success-soft); color: var(--c-success); }
.alert--error   { background: var(--c-danger-soft);  color: var(--c-danger); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  padding-block: var(--sp-7);
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--c-text-muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --------------------------------------------------------------------------
   17. Chat
   -------------------------------------------------------------------------- */
.chat-fab {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 46px;
  padding-inline: var(--sp-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: #fff;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background-color var(--transition);
}
.chat-fab:hover { background: var(--c-accent-hover); }
.chat-fab svg { width: 18px; height: 18px; flex: none; }
.chat-fab[hidden] { display: none; }

.chat-panel {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 160;
  width: min(400px, calc(100vw - var(--sp-8)));
  height: min(600px, calc(100dvh - var(--sp-9)));
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.99);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.chat-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 560px) {
  .chat-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; }

  /* Drop to a circular icon so the floating button covers as little of the
     page as possible on a small screen. */
  .chat-fab {
    inset-block-end: var(--sp-4);
    inset-inline-end: var(--sp-4);
    width: 50px;
    height: 50px;
    padding-inline: 0;
    justify-content: center;
  }
  .chat-fab span { display: none; }
  .chat-fab svg { width: 21px; height: 21px; }

  /* Keep the last of the page clear of the floating button. */
  .footer { padding-block-end: calc(var(--sp-7) + 60px); }
}

.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-subtle);
  flex: none;
}
.chat-head__title { font-size: var(--fs-base); font-weight: 620; margin-inline-end: auto; }
.chat-head__status { font-size: var(--fs-xs); color: var(--c-text-faint); display: block; font-weight: 400; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.msg {
  max-width: 88%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.msg p { margin-bottom: var(--sp-2); }
.msg p:last-child { margin-bottom: 0; }
.msg ul { list-style: disc; padding-inline-start: var(--sp-5); margin-block: var(--sp-2); }
.msg li { margin-bottom: var(--sp-1); }
.msg code { background: var(--c-bg-inset); padding: 0.0625rem var(--sp-1); border-radius: 4px; }
.msg--bot {
  align-self: flex-start;
  background: var(--c-bg-inset);
  color: var(--c-text);
  border-start-start-radius: var(--radius-sm);
}
.msg--user {
  align-self: flex-end;
  background: var(--c-accent);
  color: #fff;
  border-start-end-radius: var(--radius-sm);
}
.msg--user code { background: rgba(255, 255, 255, .2); }
.msg--error { background: var(--c-danger-soft); color: var(--c-danger); align-self: flex-start; }

/* An Arabic reply reads right-to-left whatever the page direction */
.msg[dir="rtl"] { text-align: right; }
.msg[dir="ltr"] { text-align: left; }

.typing { display: inline-flex; gap: 4px; align-items: center; padding-block: var(--sp-1); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-faint); animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); flex: none; }
.chat-suggestions[hidden] { display: none; }
.chip {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font: inherit; font-size: var(--fs-xs);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  text-align: start;
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent-text); background: var(--c-accent-soft); }

.chat-foot { flex: none; border-top: 1px solid var(--c-border); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.chat-form { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat-input {
  flex: 1;
  padding: var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-md); /* 16px — stops iOS zooming on focus */
  resize: none;
  max-height: 110px;
  line-height: var(--lh-snug);
}
.chat-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.chat-send {
  flex: none;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--radius);
  background: var(--c-accent); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--transition);
}
.chat-send:hover:not(:disabled) { background: var(--c-accent-hover); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }
.chat-send svg { width: 17px; height: 17px; }
/* The send arrow points along the reading direction */
[dir="rtl"] .chat-send svg { transform: scaleX(-1); }

.chat-disclaimer {
  font-size: 0.6875rem;
  color: var(--c-text-faint);
  margin-top: var(--sp-2);
  text-align: center;
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   18. Utility pages (privacy, resume-sender, error)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin-block: var(--sp-7) var(--sp-3); }
.prose h3 { font-size: var(--fs-md); margin-block: var(--sp-5) var(--sp-2); }
.prose p, .prose li { color: var(--c-text-muted); font-size: var(--fs-md); }
.prose ul { list-style: disc; padding-inline-start: var(--sp-6); margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose > :first-child { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   19. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header, .footer, .chat-fab, .chat-panel, .filters, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: var(--sp-5); border-top: 0; }
  .card, .stat { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}