/* Surface and typography only: preserve content, layout and motion. */
@font-face{font-family:MontserratArabic;src:url('assets/fonts/montserrat-arabic-light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:MontserratArabic;src:url('assets/fonts/montserrat-arabic-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:MontserratArabic;src:url('assets/fonts/montserrat-arabic-medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
:root{--paper:#050507;--ink:#f6f7fb;--muted:#a0a8b9;--line:#8da9e329;--accent:#83b2ff;--ambient:#0b1c40;--glass:linear-gradient(135deg,#ffffff0c,#4285ff08);color-scheme:dark}
body{font-family:MontserratArabic,sans-serif;font-weight:400;font-synthesis:none;background:var(--paper);color:var(--ink)}
button,input,textarea,select{font-family:inherit;font-weight:500}
h1,h2,h3,h4,.hero h1,[lang=en] .hero h1,.web-caption h4,.footer-name,.skills .service h3,.menu-dialog nav a{font-weight:300}
.wordmark,.small-label,.outline,.web-index button,.app-tabs button,.career-row h3{font-weight:500}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4,[lang=ar] .footer-name,[lang=ar] .bio,[lang=ar] .wordmark,[lang=ar] .chapter-hook{letter-spacing:0}
::selection{background:#2764d8;color:#fff}
:focus-visible{outline:2px solid #8ab8ff;outline-offset:5px}
.reading-progress{background:#4c8dff;box-shadow:0 0 15px #3880ffb3}
.header:before{background:linear-gradient(180deg,#050507b3,#05050700)}
.has-scrolled .header:before{background:#080c16b8;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:0 1px 0 #8db3ff24,0 10px 40px #0004}
.header-actions a{color:#c3d7ff}.menu-toggle span{background:#e5eeff}
.hero{background:radial-gradient(ellipse at 50% 42%,#123e8c66 0%,#07173442 36%,#050507 70%)}
.hero:after{background:linear-gradient(0deg,#050507 0%,transparent 25%,transparent 75%,#05050780 100%)}
.hero h1,[lang=en] .hero h1{color:#f8faff;text-shadow:0 0 65px #5491ff3b,0 3px 35px #0008}
.hero .role{color:#a7caff;font-weight:400}
.art-fragment{border:1px solid #bbd5ff29;box-shadow:0 30px 80px #0009,0 0 40px #3068d41a}
.scroll-glyph{border-color:#89b4ff70;background:#0d172666;backdrop-filter:blur(8px)}
.about{background:radial-gradient(ellipse at 80% 50%,#15326a20,transparent 65%)}
.bio{font-weight:300}.bio span{color:#778399}.bio span.lit{color:#eef4ff}
.collaborations{border-color:var(--line)}
.projects{--chapter-bg:#081b45;--chapter-accent:#77aaff}
.app-pin{background:radial-gradient(ellipse at 50% 58%,var(--chapter-bg) 0%,#050507 72%)}
.app-pin:after{background:linear-gradient(0deg,#050507,transparent)}
.story-copy p,.case-story p,.detail-intro,.detail-meta{color:#b1bbce}
.story-side .chapter-hook{color:#dbe7ff;font-weight:300}
.phone-aura{border-color:#649bff40;box-shadow:0 0 110px #286bff1a,inset 0 0 70px #377dff0a}
.phone-aura:before,.phone-aura:after{border-color:#7bb3ff24}
.phone-shell{background:#060810;box-shadow:0 0 0 1px #b3cced8c,0 0 0 4px #101c30,0 32px 80px #000b,0 0 85px #3378ff38}
.phone-shell:before{border-color:#87b6ff40}
.app-tabs{border-color:var(--line)}.app-tabs button{color:#97a6c0}.app-tabs button[aria-selected=true]{color:var(--chapter-accent)}
.app-tabs button[aria-selected=true]:before{box-shadow:0 0 14px #4387ff85}
.outline,.story-copy .outline,.web-caption .outline,.light,.filters button,.gallery-navigation button,.web-controls button{background:var(--glass);border:1px solid #97b8f247;color:#e4edff;border-radius:9px;box-shadow:inset 0 1px 0 #ffffff0d,0 5px 18px #0002;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.outline:hover,.story-copy .outline:hover,.web-caption .outline:hover,.light:hover,.gallery-navigation button:hover,.web-controls button:hover,.filters button[aria-pressed=true]{background:linear-gradient(135deg,#337aff,#1658df);border-color:#83b4ff;color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 0 26px #296eff40}
button:disabled{opacity:.35}
.design{background:radial-gradient(ellipse at 12% 22%,#10306d26,transparent 40%)}
.web-frame{border:1px solid #a3c3ff3b;border-radius:12px;background:var(--glass);box-shadow:0 0 65px #2364e120,0 20px 60px #0006,inset 0 1px 0 #ffffff16}
.web-preview{border-radius:11px}.web-index button{border-color:var(--line);color:#a5b1c5}
.web-index button[aria-selected=true]{border-color:#4d8bff;color:#a9caff;background:linear-gradient(90deg,#377dff00,#377dff0c)}
.web-index-arrow{color:#83b2ff}.web-bottom{border-color:var(--line)}
.brand-card button{border:1px solid #9fc0ff33;border-radius:12px;box-shadow:0 0 35px #2b68d911}
.image-cta{background:#101b32b3;color:#f1f6ff;border:1px solid #a7c6ff45;border-radius:8px;backdrop-filter:blur(18px)}
.gallery-navigation{border-color:var(--line)}
.skills{background:radial-gradient(ellipse at 80% 0%,#10265488,transparent 65%),#080b13;color:var(--ink);border-block:1px solid var(--line)}
.skills .service{border-color:var(--line)}.skills .service p{color:#a5b1c8}.skills .service-number,.career-row time{color:#83b2ff}
.experience{background:radial-gradient(ellipse at 10% 65%,#10275d26,transparent 65%)}
.career-row{border-color:var(--line)}.career-row p{color:var(--muted)}
.contact{background:#050507;border-color:var(--line)}
.contact-panel{background:radial-gradient(ellipse at 90% 0%,#1c4bb14a,transparent 68%),linear-gradient(135deg,#ffffff08,#1525451c);border:1px solid #8aafff30;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff12,0 0 110px #2057c91c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.contact-panel .email{color:#a8c9ff;border-color:#558bdb66}.footer-name{color:#c3d9ff;text-shadow:0 0 65px #3479ff26}.footer-bottom{border-color:var(--line)}
dialog{background:linear-gradient(145deg,#122345ef,#080b13f5);border-color:#83afff40;box-shadow:0 30px 120px #000a,inset 0 1px 0 #ffffff12;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:16px}
dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}.menu-dialog{border-radius:0;background:radial-gradient(ellipse at 80% 20%,#12377bc2,transparent 65%),#050507f5}
.close{color:#b5d0ff}.detail-gallery img,.app-gallery{background:#070c17}.skip{color:#050507}
@media(max-width:700px){.contact-panel{padding-inline:22px}.hero h1{font-size:clamp(70px,19vw,130px)}[lang=en] .hero h1{font-size:clamp(58px,15vw,100px)}}
@media(prefers-reduced-motion:reduce){.bio span{color:var(--ink)}}
/* Use light reading text and medium controls, without synthesized bold. */
body,.hero .role,.story-copy h3,[lang=en] .story-copy h3,.story-copy p,.brand-card p,.service p,.career-row p,.case-story p,.detail-intro{font-weight:300}
.brand-caption h3,.design-subheading h3,.catalog-item strong{font-weight:300}

/* Supplied signature: preserve the original vector, display in white on dark. */
.personal-logo{display:block;width:100%;height:auto;object-fit:contain;filter:invert(1);}
.wordmark:has(.personal-logo){display:block;width:104px;line-height:0;flex-shrink:0;}
.hero h1.hero-logo,[lang=en] .hero h1.hero-logo{width:min(640px,60vw);max-width:100%;font-size:0;line-height:0;margin:0 auto 22px;}
.hero-logo .personal-logo{filter:invert(1) drop-shadow(0 0 25px #609aff30);}
.footer-name:has(.personal-logo){display:block;width:min(460px,64vw);margin:0 auto 48px;line-height:0;}
@media(max-width:700px){.wordmark:has(.personal-logo){width:86px;}.hero h1.hero-logo,[lang=en] .hero h1.hero-logo{width:82vw;margin-bottom:24px;}.footer-name:has(.personal-logo){margin-bottom:36px;}}