/* alaasalah.com — business card page styles */
  @font-face{ font-family:'Poppins'; font-weight:600; font-display:swap; src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2'); }
  @font-face{ font-family:'Poppins'; font-weight:700; font-display:swap; src:url(../fonts/poppins-latin-700-normal.woff2) format('woff2'); }
  @font-face{ font-family:'Inter'; font-weight:400; font-display:swap; src:url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
  @font-face{ font-family:'Inter'; font-weight:500; font-display:swap; src:url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
  @font-face{ font-family:'Inter'; font-weight:600; font-display:swap; src:url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
  @font-face{ font-family:'Cairo'; font-weight:400; font-display:swap; src:url(../fonts/cairo-arabic-400-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }
  @font-face{ font-family:'Cairo'; font-weight:700; font-display:swap; src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }

  :root{ --paper:#FDFBF5; --card:#FFFFFF; --brown:#5B3A29; --brown-dark:#43291C; --brown-soft:#F0E2C8; --tan:#D9A574; --tan-soft:#F3E3CC; --ink:#3A2E22; --ink-soft:#6B5C4A; --line:#E9DCC0; --green:#0B5D33; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ -webkit-text-size-adjust:100%; }
  body{ font-family:'Inter', 'Cairo', system-ui, sans-serif; color:var(--ink); line-height:1.6;
         background:linear-gradient(rgba(233,220,192,.45) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(233,220,192,.45) 1px, transparent 1px) 0 0/26px 26px, var(--paper); }
  html[dir="rtl"] body{ font-family:'Cairo', 'Inter', system-ui, sans-serif; }
  a{ color:inherit; }
  .page{ max-width:900px; margin:0 auto; padding:24px 16px 32px; }
  .topbar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:22px; }
  .lang-btn{ text-decoration:none; min-height:34px; display:inline-flex; align-items:center; gap:7px; font:600 11.5px 'Inter', 'Cairo', sans-serif; color:var(--brown); background:var(--card); border:1px solid var(--line); padding:7px 14px; border-radius:20px; cursor:pointer; }
  .lang-btn.copied{ background:#EAF3EC; border-color:#B9D6C1; color:#1F6B3A; }
  .lang-btn:hover{ background:var(--brown); color:#fff; border-color:var(--brown); }
  .lang-btn svg{ width:13px; height:13px; }
  #langLabel[lang="ar"]{ font-family:'Segoe UI', Tahoma, 'Geeza Pro', system-ui, sans-serif; font-weight:700; }

  /* ---------- The card ---------- */
  .bcard{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
           box-shadow:0 1px 0 rgba(91,58,41,.04), 0 18px 40px -22px rgba(91,58,41,.35); }
  .bcard::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:10px; background:var(--brown); z-index:2; }
  .photo{ position:relative; width:118px; height:118px; }
  .photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:4px solid #fff; box-shadow:0 0 0 3px #5DBB63;
               filter:sepia(.4) saturate(1.4) hue-rotate(-6deg) brightness(.98) contrast(1.05); }
  .open-tag{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; background:var(--green); color:#fff;
              font:500 9.5px 'IBM Plex Mono', 'Cairo', monospace; letter-spacing:.04em; padding:3px 9px; border-radius:5px; }
  html[dir="rtl"] .open-tag{ font:700 11px 'Cairo', 'Inter', sans-serif; letter-spacing:0; padding:1px 10px 3px; }
  h1{ font:700 34px/1.1 'Poppins', 'Cairo', sans-serif; color:var(--brown); letter-spacing:.01em; text-transform:uppercase; }
  html[dir="rtl"] h1{ font-family:'Cairo', 'Inter', sans-serif; letter-spacing:0; }
  .role{ font:600 15px/1.4 'Poppins', 'Cairo', sans-serif; color:var(--ink-soft); margin-top:6px; }
  html[dir="rtl"] .role{ font-family:'Cairo', 'Inter', sans-serif; }
  .tagline{ font-size:14px; color:var(--ink); }
  .actions{ display:flex; flex-wrap:wrap; gap:8px; }
  .btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font:600 12.5px 'Inter', 'Cairo', sans-serif; padding:9px 17px; border-radius:24px;
         background:var(--card); color:var(--brown); border:1px solid var(--line); transition:background .15s ease, color .15s ease, transform .15s ease; }
  .btn svg{ width:14px; height:14px; flex:none; }
  .btn:hover{ background:var(--brown); color:#fff; border-color:var(--brown); transform:translateY(-1px); }
  .btn.primary{ background:var(--brown); color:#fff; border-color:var(--brown); }
  .btn.primary:hover{ background:var(--brown-dark); }
  .bcard-main{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; padding:34px 34px 34px 44px; }
  html[dir="rtl"] .bcard-main{ padding:34px 44px 34px 34px; }
  .photo{ margin-top:4px; }
  .tagline{ margin-top:16px; max-width:600px; }
  .meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:14px; }
  .actions .btn{ padding:8px 15px; }

  .badges{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:0 6px; }
  .badges figure{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .badges img{ width:84px; height:auto; display:block; filter:drop-shadow(0 6px 8px rgba(91,58,41,.14)); }
  .badges figcaption{ font:500 10.5px 'IBM Plex Mono', monospace; color:var(--brown); letter-spacing:.04em; }

  .train-tile + .train-tile{ margin-top:14px; }
  .train-tile{ display:grid; grid-template-columns:270px 1fr; align-items:center; gap:24px; background:var(--paper); border:1px solid #EAD7B8; border-radius:16px; padding:18px 22px;
               box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -16px rgba(91,58,41,.35); }
  .train-logos{ display:flex; align-items:center; justify-content:center; gap:16px; }
  .train-logos img{ height:52px; width:auto; display:block; }
  .train-logos img + img{ padding-inline-start:16px; border-inline-start:1px solid var(--line); box-sizing:content-box; }
  .train-body{ min-width:0; }
  .tr-title{ font:600 15px/1.35 'Poppins', 'Cairo', sans-serif; color:var(--brown); }
  html[dir="rtl"] .tr-title{ font-family:'Cairo', 'Inter', sans-serif; font-weight:700; }
  .tr-org{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
  .tr-desc{ font-size:12px; color:var(--ink); margin-top:6px; line-height:1.55; }
  .tr-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
  .tr-meta span{ display:inline-flex; align-items:center; gap:6px; font:500 10.5px 'IBM Plex Mono', 'Cairo', monospace; color:#8A5D35; white-space:nowrap; }
  .tr-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--tan); }

  .scard .skills{ gap:8px; }
  .scard .skills li{ background:#F8F0E3; color:var(--brown); border:1px solid #EEDFC6; font-size:11.5px; padding:4px 11px; }

  h2{ font:600 17px 'Poppins', 'Cairo', sans-serif; color:var(--brown); margin-bottom:10px; }
  html[dir="rtl"] h2{ font-family:'Cairo', 'Inter', sans-serif; letter-spacing:0; }
  .skills{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
  .skills li{ font-weight:500; border-radius:14px; }

  /* ---------- Contact form ---------- */
  .contact-form{ text-align:start; }
  .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .cf-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
  .cf-field label{ font-size:11.5px; font-weight:600; color:var(--brown); }
  .cf-field input, .cf-field textarea{ font-family:'Inter', 'Cairo', sans-serif; font-size:13px; color:var(--ink); background:var(--paper); border:1px solid #A38B68; border-radius:10px; padding:9px 12px; width:100%; transition:border-color .15s ease, box-shadow .15s ease; }
  .cf-field textarea{ min-height:110px; resize:vertical; line-height:1.55; }
  .cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--tan); box-shadow:0 0 0 3px var(--tan-soft); }
  .cf-hp{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .cf-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .cf-submit{ border:none; cursor:pointer; font-family:'Inter', 'Cairo', sans-serif; }
  .cf-submit:disabled{ opacity:.6; cursor:default; transform:none; }
  .cf-req{ color:#A23B2A; margin-inline-start:2px; }
  .cf-err{ font-size:11px; color:#A23B2A; line-height:1.4; }
  .cf-err:empty{ display:none; }
  .cf-field.has-err input, .cf-field.has-err textarea{ border-color:#A23B2A; background:#FDF5F3; }
  .cf-field.has-err input:focus, .cf-field.has-err textarea:focus{ box-shadow:0 0 0 3px #F6DCD6; }
  .cf-note{ font-size:10.5px; color:var(--ink-soft); line-height:1.5; margin-top:12px; }
  .cf-status:empty{ display:none; }
  .cf-status{ width:100%; padding:9px 12px; border-radius:10px; font-size:12px; line-height:1.5; }
  .cf-status.ok{ color:#0B5D33; background:#EAF3EC; border:1px solid #B9D6C1; }
  .cf-status.err{ color:#A23B2A; background:#FDF0ED; border:1px solid #EBC3B9; }
  @media (max-width:680px){ .cf-row{ grid-template-columns:1fr; gap:0; } }
  .contact-form.cf-flash{ animation:cfFlash 1.2s ease; }
  @keyframes cfFlash{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,165,116,0); } 30%{ box-shadow:0 0 0 6px rgba(217,165,116,.45); } }
  /* ---------- Header grid: name + buttons on the left, keyword cloud on the right ---------- */
  .hero-head{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'title box' 'actions box'; column-gap:22px; align-items:start; }
  .hero-title{ grid-area:title; }
  .hero-actions{ grid-area:actions; }
  .bcard-main h1{ white-space:nowrap; }
  .hero-title{ min-width:0; }

  @media (max-width:900px) and (min-width:641px){
    .hero-head{ grid-template-columns:minmax(0, 1fr); grid-template-areas:'title' 'box' 'actions'; }
  }

  /* ---------- Section cards (Certifications, Training, Skills, Contact) ---------- */
  .scard{ position:relative; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.6fr); margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
                 box-shadow:0 1px 0 rgba(91,58,41,.04), 0 18px 40px -22px rgba(91,58,41,.35); }
  .scard::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:10px; background:var(--brown); z-index:2; }
  .scard-aside{ background:linear-gradient(180deg, #F6EBD9 0%, var(--tan-soft) 100%); padding:32px 26px 32px 44px; border-inline-end:1px solid var(--line); }
  html[dir="rtl"] .scard-aside{ padding:32px 44px 32px 26px; }
  .scard-aside h2{ font:600 22px/1.25 'Poppins', 'Cairo', sans-serif; color:var(--brown); margin-bottom:8px; }
  html[dir="rtl"] .scard-aside h2{ font-family:'Cairo', 'Inter', sans-serif; font-weight:700; }
  .scard-sub{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
  .scard-main{ align-self:center; }

  /* tiles stack inside the narrower section column */
  .scard .train-tile{ grid-template-columns:1fr; gap:14px; padding:18px 20px; }
  .scard .train-logos{ justify-content:flex-start; }

  /* ---------- Key figures in section side panels ---------- */
  .facts{ display:grid; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(91,58,41,.14); }
  .facts div{ display:grid; gap:1px; }
  .facts dt{ font:700 24px/1.1 'Poppins', 'Cairo', sans-serif; color:var(--brown); letter-spacing:-.01em; text-align:start; }
  html[dir="rtl"] .facts dt{ text-align:right; }
  .facts dd{ font-size:12px; color:var(--ink-soft); line-height:1.45; }

  /* certification name revealed under the badges */
  .badges figure{ cursor:default; outline:none; border-radius:10px; }
  .badges figure:focus-visible{ outline:2px solid var(--tan); outline-offset:4px; }
  .badge-name{ margin-top:16px; min-height:2.9em; padding-top:12px; border-top:1px dashed rgba(91,58,41,.18); text-align:center; font-size:12.5px; line-height:1.45; color:var(--ink-soft); transition:color .2s ease; }
  .badge-name.has-name{ color:var(--brown); font-weight:600; }
  .badge-name.swap{ animation:nameIn .28s ease-out; }
  @keyframes nameIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .badges figure.is-on figcaption{ color:var(--brown); font-weight:600; }
  .badges.has-focus figure:not(.is-on) img{ opacity:.55; }
  .badges img{ transition:opacity .2s ease; }
  @media (prefers-reduced-motion:reduce){ .badge-name.swap{ animation:none; } }

  /* ---------- Featured work tabs ---------- */
  .work-tabs{ display:flex; gap:4px; padding:4px; margin-bottom:16px; background:#F6EEE1; border:1px solid #EEDFC6; border-radius:14px; }
  .work-tab{ flex:1 1 auto; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 8px; border:none; border-radius:10px; background:transparent; cursor:pointer;
             font:600 12.5px 'Inter', 'Cairo', sans-serif; color:var(--ink-soft); transition:background .25s ease, color .25s ease, box-shadow .25s ease; }
  .work-tab:hover{ color:var(--brown); }
  .work-tab[aria-selected="true"]{ background:var(--card); color:var(--brown); box-shadow:0 1px 2px rgba(91,58,41,.08), 0 4px 12px -6px rgba(91,58,41,.25); }
  .work-tab:focus-visible{ outline:2px solid var(--tan); outline-offset:2px; }
  .tab-count{ font:500 10.5px 'IBM Plex Mono', monospace; color:#8A5D35; background:#F3E3CC; border-radius:10px; padding:1px 7px; }
  .work-tab[aria-selected="true"] .tab-count{ background:var(--brown); color:#fff; }
  .work-panel.entering{ animation:panelIn .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .work-panel.entering{ animation:none; } .work-tab{ transition:none; } }

  /* tags on cards + text-only freelance cards */
  .work-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .work-banner{ display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(135deg, #F6EBD9 0%, #EFDDBF 100%); border-bottom:1px solid var(--line); }
  .work-banner svg{ width:30px; height:30px; flex:none; color:var(--brown); padding:6px; background:rgba(255,255,255,.65); border-radius:10px; box-sizing:content-box; }
  .wb-title{ font:600 13px 'Poppins', 'Cairo', sans-serif; color:var(--brown); }
  html[dir="rtl"] .wb-title{ font-family:'Cairo', 'Inter', sans-serif; font-weight:700; }
  .wb-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
  .work-text .work-body{ padding-top:16px; }

  .tag{ font:500 10.5px 'Inter', 'Cairo', sans-serif; color:var(--brown); background:#F8F0E3; border:1px solid #EEDFC6; border-radius:12px; padding:2px 9px; white-space:nowrap; }
  /* ---------- Featured work slider ---------- */
  #work .scard-main{ min-width:0; }
  .slider{ position:relative; outline:none; }
  .slider:focus-visible .slider-viewport{ outline:2px solid var(--tan); outline-offset:4px; }
  .slider-viewport{ overflow:hidden; border-radius:14px; touch-action:pan-y; }
  .slider-track{ display:flex; align-items:stretch; transition:transform .65s cubic-bezier(.22,.8,.2,1); cursor:grab; }
  .slider-track.dragging{ transition:none; cursor:grabbing; }
  .slider-track > .work{ flex:0 0 100%; min-width:0; }
  .work{ opacity:.45; transition:opacity .5s ease; }
  .work.is-active{ opacity:1; }
  .work img{ transform:scale(1.06); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); -webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
  .work.is-active img{ transform:none; }
  .work-body > *{ transition:opacity .5s ease .15s, transform .5s cubic-bezier(.2,.7,.2,1) .15s; }
  .work:not(.is-active) .work-body > *{ opacity:0; transform:translateY(8px); }
  .slider-nav{ display:flex; align-items:center; gap:12px; margin-top:14px; }
  .slider-dots{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
  .slider-dot{ width:8px; height:8px; padding:0; border:none; border-radius:4px; background:#A88560; cursor:pointer; transition:width .35s cubic-bezier(.2,.7,.2,1), background .3s ease; }
  .slider-dot[aria-current="true"]{ width:22px; background:var(--brown); }
  .slider-dot:focus-visible{ outline:2px solid var(--tan); outline-offset:2px; }
  .slider-count{ font:500 11px 'IBM Plex Mono', monospace; color:#8A5D35; min-width:44px; text-align:center; }
  .slider-arrow{ width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #E2CDAE; background:var(--card); color:var(--brown); cursor:pointer;
                 transition:background .2s ease, color .2s ease, transform .2s ease; }
  .slider-arrow svg{ width:14px; height:14px; }
  html[dir="rtl"] .slider-arrow svg{ transform:scaleX(-1); }
  .slider-arrow:hover:not(:disabled){ background:var(--brown); color:#fff; border-color:var(--brown); }
  .slider-arrow:active:not(:disabled){ transform:scale(.94); }
  .slider-arrow:disabled{ opacity:.35; cursor:default; }
  .slider-arrow:focus-visible{ outline:2px solid var(--tan); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce){
    .slider-track, .work, .work img, .work-body > *, .slider-dot{ transition:none !important; }
  }

  .work{ display:flex; flex-direction:column; background:var(--paper); border:1px solid #EAD7B8; border-radius:14px; overflow:hidden;
         box-shadow:0 8px 20px -16px rgba(91,58,41,.4); }
  .work img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:1px solid var(--line); background:#F6EBD9; }
  .work-body{ padding:14px 16px 16px; }
  .work h3{ font:600 13.5px/1.35 'Poppins', 'Cairo', sans-serif; color:var(--brown); }
  html[dir="rtl"] .work h3{ font-family:'Cairo', 'Inter', sans-serif; font-weight:700; }
  .work-tools{ font:500 9px 'IBM Plex Mono', monospace; color:#8A5D35; margin-top:4px; }
  html[dir="rtl"] .work-tools{ text-align:right; }
  .work-desc{ font-size:12px; color:var(--ink); line-height:1.55; margin-top:6px; }

  /* ---------- Skills grouped ---------- */
  .skill-groups{ display:grid; gap:16px; }
  .skill-group h3{ font:600 12.5px 'Poppins', 'Cairo', sans-serif; color:var(--ink-soft); margin-bottom:8px; }
  html[dir="rtl"] .skill-group h3{ font-family:'Cairo', 'Inter', sans-serif; font-weight:700; font-size:13px; }

  /* ---------- Footer ---------- */
  .contact-points{ list-style:none; display:grid; gap:12px; margin-top:22px; }
  .contact-points li{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--ink); line-height:1.5; }
  .contact-points svg{ width:16px; height:16px; flex:none; color:var(--brown); margin-top:1px; }
  .contact-points a{ color:var(--brown); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(91,58,41,.3); }
  .contact-points a:hover{ border-bottom-color:var(--brown); }
  .scard-main{ padding:28px 30px 26px; }
  .scard-main .cf-field textarea{ min-height:120px; }
  .pill{ display:inline-flex; align-items:center; gap:8px; background:var(--brown); color:#fff; text-decoration:none; padding:9px 18px; border-radius:24px; font-size:12.5px; font-weight:600; }
  .pill svg{ width:14px; height:14px; }
  .pill:hover{ background:var(--brown-dark); }

  footer{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line); text-align:center; font-size:10.5px; color:var(--ink-soft); }

  @media (max-width:640px){
    .bcard-main, html[dir="rtl"] .bcard-main{ grid-template-columns:1fr; justify-items:center; align-items:center; text-align:center; gap:16px; padding:30px 20px 18px 26px; }
    html[dir="rtl"] .bcard-main{ padding:30px 26px 18px 20px; }
    h1{ font-size:29px; }
    .photo{ margin-top:0; }
    .tagline{ text-align:center; margin-top:12px; padding:0 4px; }
    .meta-row{ flex-direction:column; gap:14px; }
    .actions{ justify-content:center; }
    .scard{ grid-template-columns:1fr; }
    .work-tab{ flex-direction:column; gap:3px; padding:8px 4px; font-size:11.5px; white-space:normal; flex:1 1 0; }
    .hero-head{ grid-template-columns:minmax(0, 1fr); grid-template-areas:'title' 'box' 'actions'; justify-items:center; }
    .bcard-main h1{ white-space:normal; }
    .slider-dots{ display:none; }
    .slider-nav{ justify-content:center; gap:16px; }
    .facts{ grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
    .scard .train-tile{ justify-items:center; }
    .scard .train-logos{ justify-content:center; }
  
    .scard-aside, html[dir="rtl"] .scard-aside{ padding:24px 20px 22px 28px; border-inline-end:none; border-bottom:1px solid var(--line); }
    html[dir="rtl"] .scard-aside{ padding:24px 28px 22px 20px; }
    .scard-main{ padding:22px 20px 22px 28px; }
    html[dir="rtl"] .scard-main{ padding:22px 28px 22px 20px; }
      .badges{ padding:0; gap:4px; }
    .badges img{ width:100%; max-width:58px; }
    .badges figcaption{ font-size:9px; letter-spacing:0; }
    .train-tile{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; padding:18px 14px; }
    .train-logos img{ height:42px; }
    .train-logos img + img{ padding-inline-start:12px; }
    .train-logos{ gap:12px; }
    .tr-meta{ justify-content:center; }
      .scard .skills{ justify-content:center; }
    }

  /* ---------- Motion: one entrance sequence on load, then hover feedback only ---------- */
  @media (prefers-reduced-motion:no-preference){
    @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
    @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
    @keyframes ring{ from{ box-shadow:0 0 0 0 rgba(93,187,99,0), 0 0 0 0 rgba(93,187,99,.0); } 60%{ box-shadow:0 0 0 3px #5DBB63, 0 0 0 12px rgba(93,187,99,.18); } to{ box-shadow:0 0 0 3px #5DBB63, 0 0 0 0 rgba(93,187,99,0); } }
    @keyframes pop{ 0%{ opacity:0; transform:translateY(10px) scale(.8); } 70%{ opacity:1; transform:translateY(-3px) scale(1.04); } 100%{ opacity:1; transform:none; } }

    @keyframes lift{ from{ transform:translateY(10px); } to{ transform:none; } }
    .bcard{ animation:lift .45s cubic-bezier(.2,.7,.2,1) both; }
    .bcard::before{ transform-origin:top; animation:spine .8s .15s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes spine{ from{ transform:scaleY(0); } to{ transform:none; } }
    @keyframes settleT{ from{ transform:scale(.92); } to{ transform:none; } }
    .photo{ animation:settleT .5s cubic-bezier(.2,.8,.2,1.2) both; }
    .photo img{ animation:ring 1.3s .2s ease-out both; }
    @keyframes tagIn{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translateX(-50%); } }
    .open-tag{ animation:tagIn .4s .3s ease-out both; }
          .badges figure{ animation:pop .55s cubic-bezier(.2,.8,.2,1) both; }
    .badges figure:nth-child(1){ animation-delay:0.35s; }
    .badges figure:nth-child(2){ animation-delay:0.42s; }
    .badges figure:nth-child(3){ animation-delay:0.49s; }
    .badges figure:nth-child(4){ animation-delay:0.56s; }
    .badges figure:nth-child(5){ animation-delay:0.63s; }
    .train-tile{ animation:rise .6s .6s cubic-bezier(.2,.7,.2,1) both; }
    .train-tile + .train-tile{ animation-delay:.7s; }
    .scard .skills li{ animation:fadeIn .5s .7s both; }
    .skill-group:nth-child(2) li{ animation-delay:.8s; } .skill-group:nth-child(3) li{ animation-delay:.9s; }
      .scard{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
    #certifications{ animation-delay:.2s; } #work{ animation-delay:.4s; } #training{ animation-delay:.5s; } #skills{ animation-delay:.6s; } #contact{ animation-delay:.7s; }

    .badges img{ transition:transform .25s cubic-bezier(.2,.8,.2,1.3), filter .25s ease; }
    .badges figure:hover img{ transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 10px 12px rgba(91,58,41,.22)); }
    .train-tile{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
    .train-tile:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 30px -16px rgba(91,58,41,.42); }
    .scard .skills li{ transition:background .2s ease, color .2s ease; }
    .scard .skills li:hover{ background:var(--brown); color:#fff; }
  }
  .btn:focus-visible, .lang-btn:focus-visible, .pill:focus-visible{ outline:2px solid var(--tan); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }

/* ---------- Printing the page (Ctrl+P) — for the formatted CV, "Download CV" gives the PDF ---------- */
@media print{
  @page{ size:A4; margin:12mm; }
  *{ animation:none !important; transition:none !important; }
  html, body{ background:#fff !important; }
  body{ font-size:10pt; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page{ max-width:none; padding:0; }
  .topbar, .hero-actions, #contact, .work-tabs, .slider-nav, .badge-name, .work img, .work-banner{ display:none !important; }
  .bcard, .scard{ box-shadow:none !important; border:1px solid #E6D7BC; margin-top:8px !important; }
  .bcard::before, .scard::before{ display:none; }
  .bcard-main{ padding:16px 20px !important; }
  .scard{ grid-template-columns:170px minmax(0, 1fr) !important; break-inside:auto; }
  .scard-aside{ padding:16px !important; background:#FBF6EE !important; }
  .scard-main{ padding:14px 18px !important; }
  .facts dt{ font-size:16pt; }
  .work-panel, .work-panel[hidden]{ display:block !important; }
  .work-panel + .work-panel{ margin-top:10px; }
  .slider::before{ break-after:avoid; page-break-after:avoid; content:attr(aria-label); display:block; font:600 11pt 'Poppins', 'Cairo', sans-serif; color:#5B3A29; margin-bottom:6px; }
  .slider-viewport{ overflow:visible; border-radius:0; }
  .slider-track{ display:block !important; transform:none !important; }
  .work{ opacity:1 !important; border:none !important; box-shadow:none !important; background:none !important; break-inside:avoid; border-bottom:1px solid #F0E6D4 !important; border-radius:0 !important; }
  .work[aria-hidden="true"]{ visibility:visible; }
  .work-body{ padding:5px 0 7px !important; }
  .work-body > *{ opacity:1 !important; transform:none !important; }
  .work-desc{ font-size:9pt; }
  .train-tile{ box-shadow:none !important; break-inside:avoid; }
  .badges img{ filter:none; width:62px; }
  footer{ margin-top:10px; }
}
@media print{
  footer::after{ content:"alaasalah.com  ·  linkedin.com/in/alaa-dataanalytics"; display:block; margin-top:4px; font-size:9pt; color:#5a3e2b; }
}

/* ---------- Skills keyword cloud beside the name (faint, compact, animated) ---------- */
.kw-cloud{ grid-area:box; align-self:center; width:330px; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 5px; line-height:1; padding:2px 0; }
.kw-cloud li{ white-space:nowrap; cursor:default; opacity:.32; }
.kw-cloud li:hover{ opacity:1 !important; color:#A0622E; }
.kw1{ font:700 18px 'Poppins', sans-serif; color:var(--brown); letter-spacing:-.01em; }
.kw2{ font:600 12.5px 'Poppins', sans-serif; color:#8A5D35; }
.kw3{ font:600 10.5px 'Inter', sans-serif; color:#A57A52; }
.kw4{ font:500 9px 'IBM Plex Mono', monospace; color:#9C8B76; }
@media (prefers-reduced-motion:no-preference){
  .kw-cloud li{ animation-name:kwGlow, kwFloat; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-fill-mode:both; }
  .kw-cloud li:nth-child(1){ animation-delay:0.0s, 0.00s; animation-duration:13.5s, 3.2s; }
  .kw-cloud li:nth-child(2){ animation-delay:0.9s, 2.63s; animation-duration:13.5s, 3.8s; }
  .kw-cloud li:nth-child(3){ animation-delay:1.8s, 2.26s; animation-duration:13.5s, 4.4s; }
  .kw-cloud li:nth-child(4){ animation-delay:2.7s, 1.89s; animation-duration:13.5s, 5.0s; }
  .kw-cloud li:nth-child(5){ animation-delay:3.6s, 1.52s; animation-duration:13.5s, 3.2s; }
  .kw-cloud li:nth-child(6){ animation-delay:4.5s, 1.15s; animation-duration:13.5s, 3.8s; }
  .kw-cloud li:nth-child(7){ animation-delay:5.4s, 0.78s; animation-duration:13.5s, 4.4s; }
  .kw-cloud li:nth-child(8){ animation-delay:6.3s, 0.41s; animation-duration:13.5s, 5.0s; }
  .kw-cloud li:nth-child(9){ animation-delay:7.2s, 0.04s; animation-duration:13.5s, 3.2s; }
  .kw-cloud li:nth-child(10){ animation-delay:8.1s, 2.67s; animation-duration:13.5s, 3.8s; }
  .kw-cloud li:nth-child(11){ animation-delay:9.0s, 2.30s; animation-duration:13.5s, 4.4s; }
  .kw-cloud li:nth-child(12){ animation-delay:9.9s, 1.93s; animation-duration:13.5s, 5.0s; }
  .kw-cloud li:nth-child(13){ animation-delay:10.8s, 1.56s; animation-duration:13.5s, 3.2s; }
  .kw-cloud li:nth-child(14){ animation-delay:11.7s, 1.19s; animation-duration:13.5s, 3.8s; }
  .kw-cloud li:nth-child(15){ animation-delay:12.6s, 0.82s; animation-duration:13.5s, 4.4s; }
  @keyframes kwGlow{ 0%, 9%, 100%{ opacity:.32; } 4%{ opacity:.8; color:#A0622E; } }
  @keyframes kwFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
}
html[dir="rtl"] .kw-cloud{ width:280px; }
@media (max-width:900px){ html[dir="rtl"] .kw-cloud, .kw-cloud{ width:auto; max-width:290px; justify-self:start; margin-top:8px; } }
@media (max-width:640px){ .kw-cloud{ justify-self:center; margin-top:12px; } .kw4{ display:none; } }
@media print{ .kw-cloud li{ opacity:1 !important; animation:none !important; } }

/* ---------- Chat popup (hands the visitor over to WhatsApp, or to the contact form) ---------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.chat{ position:fixed; bottom:18px; right:18px; z-index:50; display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:'Inter', 'Cairo', sans-serif; }
html[dir="rtl"] .chat{ right:auto; left:18px; }
.chat [hidden]{ display:none !important; }
.chat-fab{ position:relative; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; color:#fff; background:linear-gradient(145deg, var(--brown) 0%, var(--brown-dark) 100%);
           box-shadow:0 10px 24px -8px rgba(67,41,28,.55); display:grid; place-items:center; transition:transform .2s ease; }
.chat-fab:hover{ transform:translateY(-2px); }
.chat-fab svg{ width:26px; height:26px; }
.chat-dot{ position:absolute; top:5px; right:5px; width:12px; height:12px; border-radius:50%; background:#3FAE5A; border:2px solid #fff; }
.chat-av{ position:relative; flex:none; width:40px; height:40px; }
.chat-av img{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; background:var(--tan-soft); }
.chat-av::after{ content:""; position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:#3FAE5A; border:2px solid #fff; }
.chat-x{ flex:none; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; display:grid; place-items:center; opacity:.75; }
.chat-x:hover{ opacity:1; background:rgba(0,0,0,.08); }
.chat-x svg{ width:14px; height:14px; }

/* notification bubble that pops up once */
.chat-toast{ position:relative; width:290px; max-width:calc(100vw - 36px); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px -16px rgba(67,41,28,.45); }
.chat-toast .chat-x{ position:absolute; top:6px; right:6px; color:var(--ink-soft); }
html[dir="rtl"] .chat-toast .chat-x{ right:auto; left:6px; }
.chat-toast-body{ display:flex; gap:11px; align-items:flex-start; width:100%; padding:13px 34px 13px 13px; border:0; background:none; text-align:start; cursor:pointer; color:var(--ink); font:inherit; }
html[dir="rtl"] .chat-toast-body{ padding:13px 13px 13px 34px; }
.chat-toast-text{ display:grid; gap:2px; font-size:13px; line-height:1.45; }
.chat-toast-text strong{ font:600 13.5px 'Poppins', 'Cairo', sans-serif; color:var(--brown-dark); }

/* chat window */
.chat-panel{ width:320px; max-width:calc(100vw - 36px); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -18px rgba(67,41,28,.55); border:1px solid var(--line); }
.chat-head{ display:flex; align-items:center; gap:11px; padding:12px 10px 12px 14px; color:#fff; background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%); }
html[dir="rtl"] .chat-head{ padding:12px 14px 12px 10px; }
.chat-head .chat-av::after{ border-color:var(--brown); }
.chat-who{ flex:1; display:grid; line-height:1.3; }
.chat-who strong{ font:600 14px 'Poppins', 'Cairo', sans-serif; }
.chat-status{ font-size:11.5px; opacity:.85; display:flex; align-items:center; gap:5px; }
.chat-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#6FD18A; }
.chat-body{ padding:16px 14px 10px; min-height:96px; background:linear-gradient(rgba(233,220,192,.35) 1px, transparent 1px) 0 0/18px 18px, linear-gradient(90deg, rgba(233,220,192,.35) 1px, transparent 1px) 0 0/18px 18px, var(--paper); }
.chat-bubble{ position:relative; max-width:88%; background:#fff; border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:9px 12px; font-size:13px; line-height:1.5; color:var(--ink); box-shadow:0 2px 6px -3px rgba(67,41,28,.25); }
html[dir="rtl"] .chat-bubble{ border-radius:14px 4px 14px 14px; }
.chat-compose{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px 4px; border-top:1px solid var(--line); }
.chat-compose textarea{ flex:1; resize:none; min-height:40px; max-height:110px; border:1px solid #A38B68; border-radius:12px; padding:9px 11px; font:13px/1.45 'Inter', 'Cairo', sans-serif; color:var(--ink); background:#fff; }
.chat-compose textarea:focus{ outline:2px solid var(--tan); outline-offset:0; border-color:var(--tan); }
.chat-send{ flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; color:#fff; background:#2E8B4E; display:grid; place-items:center; transition:background .2s ease; }
.chat-send:hover{ background:#23733F; }
.chat-send svg{ width:17px; height:17px; }
html[dir="rtl"] .chat-send svg{ transform:scaleX(-1); }
.chat-note{ min-height:0; padding:0 14px; font-size:11.5px; color:#B23B2E; }
.chat-note:not(:empty){ padding-top:4px; }
.chat-note.ok{ color:#1F6B3A; }
.chat-alt{ display:block; width:100%; margin-top:6px; padding:10px 14px 13px; border:0; background:none; cursor:pointer; font:500 12px 'Inter', 'Cairo', sans-serif; color:var(--brown); text-decoration:underline; text-underline-offset:3px; text-align:center; }
.chat-alt:hover{ color:var(--brown-dark); }
.chat-fab:focus-visible, .chat-x:focus-visible, .chat-send:focus-visible, .chat-alt:focus-visible, .chat-toast-body:focus-visible{ outline:2px solid var(--tan); outline-offset:2px; }

@media (prefers-reduced-motion:no-preference){
  .chat-toast:not([hidden]), .chat-panel:not([hidden]){ animation:chatIn .28s ease-out; }
  @keyframes chatIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
  .chat-dot{ animation:chatPulse 2.4s ease-in-out infinite; }
  @keyframes chatPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(63,174,90,.45); } 50%{ box-shadow:0 0 0 6px rgba(63,174,90,0); } }
}
@media (max-width:640px){ .chat{ bottom:14px; right:14px; } html[dir="rtl"] .chat{ left:14px; } .chat-fab{ width:52px; height:52px; } }
@media print{ .chat{ display:none !important; } }

/* ---------- Compatibility & touch fixes (tablet portrait, phones, older Safari) ---------- */
.slider-nav[hidden]{ display:none; }
.badges figure{ flex:1 1 0; min-width:0; }
.badges img{ width:100%; max-width:84px; }
.work-tab{ min-width:0; }
@media (max-width:900px) and (min-width:641px){
  .scard{ grid-template-columns:minmax(0, 1fr); }
  .scard-aside{ border-inline-end:none; border-bottom:1px solid var(--line); }
}
/* Safari 15.0–15.3 has no :focus-visible: show the ring on :focus, hide it again for mouse clicks where supported */
.badges figure:focus, .slider:focus .slider-viewport{ outline:2px solid var(--tan); outline-offset:4px; }
.badges figure:focus:not(:focus-visible), .slider:focus:not(:focus-visible) .slider-viewport{ outline:none; }
.cf-status:focus{ outline:none; }
@media (max-width:640px){
  .lang-btn{ min-height:44px; padding:0 16px; }
  .actions .btn, .cf-submit, .slider-arrow{ min-height:44px; }
  .slider-arrow{ min-width:44px; }
  .contact-points a{ display:inline-block; padding:10px 0; margin:-10px 0; }
}
@media (max-width:400px){
  .actions{ width:100%; }
  .actions .btn{ flex:1 1 auto; justify-content:center; padding-inline:12px; white-space:nowrap; }
}