/* Palette inspired by ahmedmagdy.axnos.com; professional portfolio composition. */
:root,[data-theme="light"]{--paper:#f5f7ff;--white:#fff;--ink:#17233d;--muted:#52617c;--line:#dce3f0;--lime:#315fe9;--soft:#e9efff;--forest:#315fe9;--surface:#fff;--accent:#315fe9;--accent-ink:#fff;--accent-soft:#e9efff;--header:#f5f7fff5;--gold:#efb923;--panel:#edf2ff;--panel-ink:#17233d;color-scheme:light}
[data-theme="dark"]{--paper:#0b1630;--white:#12203f;--ink:#f3f6ff;--muted:#a5b4d6;--line:#293b60;--lime:#80aaff;--soft:#17294b;--forest:#80aaff;--surface:#12203f;--accent:#80aaff;--accent-ink:#0b1630;--accent-soft:#17294b;--header:#0b1630f5;--gold:#f7cf58;--panel:#122342;--panel-ink:#f3f6ff;color-scheme:dark}
body{background:var(--paper);color:var(--ink)}.site-header{background:var(--header);border-color:var(--line)}.brand-mark{background:var(--accent);color:var(--accent-ink)}.brand-name>span{color:var(--accent)}.button-primary,.button-lime{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}.button-primary:hover,.button-lime:hover{background:var(--accent);filter:brightness(1.08);color:var(--accent-ink)}.button-quiet,.nav-contact{color:var(--ink);border-color:var(--line)}.button-quiet:hover{background:var(--accent-soft);color:var(--ink)}.text-link,.nav a:hover,.career-role{color:var(--accent)}.new-hero h1 em{color:var(--accent)}.status-dot:before{background:var(--gold)}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;padding:9px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);flex-shrink:0}.theme-toggle svg{width:18px;height:18px;grid-area:1/1}.theme-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}.theme-sun{display:none}[data-theme="dark"] .theme-sun{display:block}[data-theme="dark"] .theme-moon{display:none}.header-actions{gap:12px}.language-link{border-color:var(--line)}
.portrait-frame{background:transparent;border:0;border-radius:0;overflow:visible}.hero-portrait{object-fit:contain;object-position:center bottom}.portrait-card{max-width:440px}.portrait-card figcaption{border-top:1px solid var(--line);padding-top:17px}.portrait-frame picture{position:relative}.portrait-location{color:var(--muted)}
.lab-panel{background:var(--panel);color:var(--panel-ink);border:1px solid var(--line)}.lab-panel .overline,.lab-panel .mono{color:var(--muted)}.lab-panel .text-link,.lab-side a{color:var(--accent)}.lab-side{border-color:var(--line)}.lab-symbol{color:var(--accent);opacity:.8}.contact-panel,.learning-section{background:var(--surface);border-color:var(--line)}.contact-panel h2,.about-body>p:first-child{color:var(--ink)}.contact-panel .overline{color:var(--muted)}.copy-email:hover{color:var(--accent)}.nav.open{background:var(--surface)}.company-logo{border-color:#e5e9f2}.tags span,.pill{background:var(--accent-soft);color:var(--accent)}.resource-card,.track-panel,.roadmap-preview,.note-box,.architecture{background:var(--surface);border-color:var(--line)}.resource-cover{background:#e4ecff;color:#284bae}.resource-cover.dark{background:#17294b;color:#eaf0ff}.resource-cover.sand{background:#f8e8b5;color:#684d0f}.filter-button{color:var(--muted);border-color:var(--line)}.filter-button[aria-pressed="true"],.track-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}.track-tab{color:var(--ink);border-color:var(--line)}.track-panel h3,.resource-content h2,.prose h2{color:var(--ink)}.architecture-node.accent{background:var(--accent-soft);color:var(--accent)}.progress-fill{background:var(--accent)}.toast{background:var(--ink);color:var(--paper)}a:focus-visible,button:focus-visible,input:focus-visible{outline-color:var(--accent)}::selection{background:var(--accent);color:var(--accent-ink)}.footer-bottom,.breadcrumbs{color:var(--muted)}
.new-hero{position:relative}.hero-grid{gap:48px;padding-top:50px}.new-hero h1{font-weight:600}.section-heading .overline:before{content:'';display:inline-block;width:18px;height:2px;background:var(--gold);margin-inline-end:10px;vertical-align:middle}
@media(max-width:800px){.header-actions{gap:9px}.hero-grid{gap:34px}.portrait-card{max-width:380px}}@media(max-width:520px){.theme-toggle{width:34px;height:34px;padding:7px}.header-actions{gap:6px}.brand{gap:7px}.brand-name{font-size:14px}.header-inner{gap:10px}.portrait-card{max-width:320px}.hero-grid{padding-top:30px}.portrait-frame{border:0;border-radius:0}.portrait-card figcaption{padding-top:13px}}
@media(prefers-reduced-motion:no-preference){.theme-toggle,.button{transition:background-color .18s,color .18s,border-color .18s}}

/* Shared reference system: blue surfaces, generous spacing, pill controls,
   Arabic typography, and restrained depth adapted for a professional audience. */
:root{--font:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;--display:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;--radius:20px;--card-shadow:0 10px 32px #18366b08}
[data-theme="dark"]{--card-shadow:0 10px 32px #00000012}
html[dir=rtl]{--font:'IBM Plex Sans Arabic',system-ui,sans-serif;--display:'Baloo Bhaijaan 2','IBM Plex Sans Arabic',system-ui,sans-serif}
body{font-family:var(--font);line-height:1.8}.new-hero h1{font-family:var(--display);font-size:clamp(43px,4.6vw,66px);line-height:1.15;letter-spacing:-2.6px;max-width:670px}.hero-description{font-size:17px;line-height:1.85;max-width:540px}.intro-name{font-size:18px}.hero-topline,.hero-bottom{font-family:var(--font);font-size:12px;letter-spacing:.5px}.mono,.overline,.eyebrow,.detail-line{font-family:var(--font);font-size:12px;letter-spacing:.8px}.section h2{font-family:var(--display);font-size:clamp(30px,3.1vw,44px);line-height:1.25;letter-spacing:-1.2px}.section-heading>p,.career-row p,.about-body p,.lab-panel p{font-size:16px;line-height:1.9}.section-heading>p{max-width:410px}.career-row{padding-block:32px}.career-date,.career-role{font-size:13px}.career-row h3{font-size:25px}.button{border-radius:999px;padding:13px 25px;min-height:50px;font-weight:600;font-size:14px}.button-primary{box-shadow:0 3px 0 color-mix(in srgb,var(--accent),transparent 65%)}.button-quiet{background:var(--surface);box-shadow:0 3px 0 var(--line)}.nav-contact{border-radius:999px!important;padding:10px 18px!important;background:var(--surface)!important}.language-link{border-radius:999px}.brand-mark{border-radius:13px}.lab-panel,.contact-panel,.resource-card,.roadmap-preview,.track-panel{border-radius:20px;box-shadow:var(--card-shadow)}.skill-block{padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}.skill-block h3{margin:16px 0 12px;font-size:23px}.skill-block .skill-note{font-size:15px;line-height:1.85;color:var(--muted);margin:0 0 20px}.skill-block .skill-stack{font-size:12px;line-height:1.8;color:var(--accent);margin:0}.skills-layout{gap:20px}.company-logo{border-radius:14px}.contact-panel h2{font-size:clamp(28px,3vw,40px);max-width:650px}.contact-panel p{max-width:650px;line-height:1.8}.portrait-card figcaption strong{font-size:17px}.portrait-card figcaption div>span{font-size:13px}.portrait-location{font-family:var(--font);font-size:11px;letter-spacing:0}
html[dir=rtl] body{font-family:var(--font)}html[dir=rtl] .new-hero h1{font-family:var(--display);font-size:clamp(42px,4.8vw,66px);line-height:1.35;letter-spacing:0;font-weight:700}html[dir=rtl] .section h2,html[dir=rtl] .lab-panel h2,html[dir=rtl] .contact-panel h2,html[dir=rtl] .page-title{font-family:var(--display);letter-spacing:0;line-height:1.4}html[dir=rtl] .new-hero .hero-description{font-size:18px;line-height:1.9}html[dir=rtl] .career-row h3{letter-spacing:0}html[dir=rtl] .brand-name{font-family:var(--font)}
.reading-progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:200;pointer-events:none}html[dir=rtl] .reading-progress{transform-origin:right}.nav a[aria-current="location"]{color:var(--accent);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.button,.skill-block,.resource-card,.company-logo{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(0)}.skill-block:hover,.resource-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 38px color-mix(in srgb,var(--accent),transparent 90%)}.company-logo:hover{transform:translateY(-3px)}.text-link .arrow{transition:transform .2s}.text-link:hover .arrow{transform:translate(2px,-2px)}}
@media(max-width:800px){.new-hero h1{font-size:54px}.hero-description{font-size:16px}.section-heading>p{max-width:540px}.hero-grid{padding-top:36px;gap:30px}.skills-layout{gap:16px}.skill-block{padding:24px}.career-row p{font-size:15px}}
@media(max-width:520px){.new-hero h1{font-size:43px;letter-spacing:-1.6px}.hero-topline,.hero-bottom{font-size:11px;letter-spacing:0}.hero-description{font-size:16px}.hero-actions{gap:12px}.button{font-size:13px;padding:12px 20px}.section h2{font-size:32px}.lab-panel h2{font-size:34px}.career-role{font-size:13px}.career-date{font-size:12px}.section-heading>p,.lab-panel p,.about-body p{font-size:15px}.mono,.overline{font-size:11px}html[dir=rtl] .new-hero h1{font-size:42px}html[dir=rtl] .new-hero .hero-description{font-size:17px}html[dir=rtl] .section h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reading-progress{transition:none}*,*::before,*::after{animation:none!important;transition:none!important}}

.brand-mark,html[dir=rtl] .brand-mark{font-family:var(--display)}.nav a,html[dir=rtl] .nav a{font-size:14px}.prose p,.prose li{font-size:16px;line-height:1.9}

/* Profile sections rendered from content/profile.json: role details, achievements,
   skill chips, credentials, and social links (with "coming soon" placeholders). */
.hero-topline,.company-strip>.mono,.portrait-location,.lab-side>.mono,.credential h3,.architecture-label,.cover-caption{text-transform:uppercase}
html[dir=rtl] :is(.hero-topline,.company-strip>.mono,.portrait-location,.lab-side>.mono,.credential h3,.architecture-label,.cover-caption,.overline,.pill,.resource-category,.meta-row span){text-transform:none}
.new-hero h1 .intro-name{display:block;font:500 18px/1.6 var(--font);letter-spacing:0;color:var(--muted);margin:0 0 18px}
.new-hero h1 .hero-headline{display:block}
html[dir=rtl] .new-hero h1 .intro-name{font:500 18px/1.8 var(--font);letter-spacing:0}

.career-date{font-family:var(--font)}
.career-meta{display:block;color:var(--muted);font-size:13px;line-height:1.7;margin-top:3px}
.career-company h3{margin-bottom:6px}
.career-positions{display:grid;gap:30px}
.position-title{font:600 19px/1.45 var(--display);letter-spacing:-.3px;color:var(--ink);margin:0 0 4px}
html[dir=rtl] .position-title{letter-spacing:0}
.career-row .position-dates{font-size:13px;margin:0 0 10px}
.career-row .position>p{margin:8px 0 12px}
.highlights{margin:0 0 18px;padding-inline-start:20px;color:var(--muted);font-size:15px;line-height:1.85}
.highlights li{padding-block:3px}
.highlights li::marker{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.chips li{font-size:12px;line-height:1.4;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent),transparent 82%)}

.achievement-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.achievement{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}
.achievement .mono{color:var(--accent);font-weight:600}
.achievement h3{font:600 19px/1.45 var(--display);margin:14px 0 10px}
.achievement p{margin:0;color:var(--muted);font-size:15px;line-height:1.8}

.skills-layout{grid-template-columns:repeat(3,1fr)}
.skill-block.wide{grid-column:1/-1}
.skill-block .chips{margin-top:2px}

.lab-side{gap:16px}
.lab-panel .lab-note{font-size:14px;color:var(--muted);margin:0}
.lab-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px}
.is-pending{color:var(--muted)}
.is-pending:not(.social-link) small{display:inline-block;margin-inline-start:6px;padding:1px 8px;border:1px dashed var(--line);border-radius:999px;font-size:10px;letter-spacing:.3px;vertical-align:middle}

.credentials{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;border-top:1px solid var(--line);margin-top:30px;padding-top:26px}
.credential h3{font:600 12px/1.6 var(--font);letter-spacing:.8px;color:var(--muted);margin:0 0 12px}
html[dir=rtl] .credential h3{letter-spacing:0;font-size:13px}
.credential ul:not(.chips){list-style:none;margin:0;padding:0;display:grid;gap:14px}
.credential li strong{display:block;font-weight:600;color:var(--ink);font-size:15px;line-height:1.6}
.credential li span{display:block;color:var(--muted);font-size:14px;line-height:1.7}
.about-body .credential p{margin:0 0 10px;font-size:15px}

.social-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.social-link{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;line-height:1.3}
.social-link svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.social-link strong{display:block;font-weight:600}
.social-link small{display:block;color:var(--muted);font-size:11px}
.social-link.is-pending{border-style:dashed;background:transparent}
.social-link.is-pending svg{color:var(--muted)}
a.social-link:hover{border-color:var(--accent);color:var(--accent)}
.footer-links{flex-wrap:wrap;align-items:center}
.comparison tbody th{background:transparent;font-weight:600;color:var(--ink)}

@media(max-width:1050px){.achievement-grid{grid-template-columns:repeat(2,1fr)}
.skills-layout{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){.skills-layout{grid-template-columns:1fr}
.contact-panel .social-list{margin-top:20px}
}
@media(max-width:520px){.achievement-grid{grid-template-columns:1fr}
.achievement{padding:22px}
.credentials{grid-template-columns:1fr;gap:24px}
.highlights{font-size:14px}
.position-title{font-size:18px}
.new-hero h1 .intro-name{font-size:16px;margin-bottom:14px}
.footer-links{gap:12px 18px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.achievement,.social-link{transition:transform .2s ease,border-color .2s ease,color .2s ease}
.achievement:hover{transform:translateY(-4px);border-color:var(--accent)}
}

/* Featured roadmap entry on the resources pages. */
.featured-resource{margin:6px 0 26px;padding:28px;border:1px solid var(--line);border-inline-start:5px solid #14B8A6;border-radius:20px;background:var(--surface);box-shadow:var(--card-shadow)}
.featured-resource h2{font:700 clamp(24px,3vw,32px)/1.3 var(--display);margin:8px 0;text-align:start;unicode-bidi:isolate}
html[dir=rtl] .featured-resource h2{text-align:right}
.featured-resource p{color:var(--muted);max-width:760px;margin:0 0 18px}