:root{--color-bg-deep: #0c0c0b;--color-bg: #0f0f0e;--color-bg-warm: #141412;--color-surface: #1a1a18;--color-surface-hover: #22221f;--color-surface-active: #2a2a26;--color-border: #2a2a27;--color-border-light: #353532;--color-border-subtle: rgba(255, 255, 255, .04);--color-text: #f0efec;--color-text-secondary: #a09e98;--color-text-tertiary: #928c7a;--color-text-quaternary: #5c5a55;--color-accent: #c4a882;--color-accent-soft: rgba(196, 168, 130, .12);--color-accent-hover: #d4bc9a;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-arabic: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-size-base: 16px;--font-size-sm: .875rem;--font-size-xs: .75rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-relaxed: 1.8;--max-chars: 70ch;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--space-96: 96px;--space-128: 128px;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--ease-natural: cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s var(--ease-natural);--transition-small: .18s var(--ease-natural);--transition: .22s var(--ease-natural);--transition-section: .35s var(--ease-natural);--transition-large: .4s var(--ease-natural);--max-width: 1120px;--content-width: 680px;--nav-height: 64px;--section-spacing: var(--space-128)}[dir=rtl]{--font-sans: var(--font-arabic)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;line-height:1.2}p{overflow-wrap:break-word}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}html{font-family:var(--font-sans);font-size:16px}body{font-size:1rem;font-weight:400;letter-spacing:-.01em;color:var(--color-text)}h1{font-size:clamp(2.25rem,5.5vw,4.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}h2{font-size:clamp(1.75rem,3.5vw,3rem);font-weight:500;letter-spacing:-.02em;line-height:1.1}h3{font-size:clamp(1.125rem,1.8vw,1.5rem);font-weight:500;letter-spacing:-.01em;line-height:1.2}p{font-size:1rem;line-height:1.7;color:var(--color-text-secondary)}.label-sm{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-quaternary)}@media (max-width: 768px){body{font-size:.9375rem}}@media (prefers-reduced-motion: no-preference){.reveal{opacity:0;transform:translateY(16px);filter:blur(2px);transition:opacity var(--transition-section),transform var(--transition-section),filter var(--transition-section)}.reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}}@media (prefers-reduced-motion: reduce){.reveal,.reveal.is-visible{opacity:1;transform:none;filter:none;transition:none}html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.section{padding:var(--section-spacing) 0;position:relative}.section-header{margin-bottom:var(--space-64);max-width:var(--content-width)}.section-header .label-sm{display:inline-block;margin-bottom:var(--space-16)}.section-header h2{margin-bottom:var(--space-16)}.page{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-24)}@media (max-width: 768px){.section{--section-spacing: var(--space-96)}.section-header{margin-bottom:var(--space-32)}}@media (max-width: 430px){.page{padding:0 var(--space-16)}.section{--section-spacing: var(--space-64)}.section-header{margin-bottom:var(--space-32)}}.header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-height);display:flex;align-items:center;justify-content:center;background:#0f0f0e80;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background var(--transition-fast)}.header.scrolled{background:#0f0f0ee0;border-bottom:1px solid var(--color-border-subtle)}.header-inner{max-width:var(--max-width);width:100%;padding:0 var(--space-24);display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.125rem;font-weight:var(--font-weight-semibold);letter-spacing:-.02em;color:var(--color-text);transition:opacity var(--transition-fast)}.logo:hover{opacity:.7}.logo:focus-visible,.nav-desktop a:focus-visible,.nav-mobile a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}.nav-desktop{display:flex;align-items:center;gap:var(--space-32)}.nav-desktop a{font-size:var(--font-size-sm);color:var(--color-text-tertiary);transition:color var(--transition-fast);padding:var(--space-4) 0}.nav-desktop a:hover{color:var(--color-text)}.nav-mobile-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--color-text)}.nav-mobile-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}.nav-mobile{display:none;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:var(--color-bg);z-index:99;padding:var(--space-48) var(--space-24);flex-direction:column;gap:var(--space-4)}.nav-mobile.open{display:flex}.nav-mobile a{display:block;padding:var(--space-16);font-size:1.125rem;font-weight:var(--font-weight-normal);color:var(--color-text-tertiary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-mobile a:hover{background:var(--color-surface);color:var(--color-text)}@media (max-width: 900px){.nav-desktop{display:none}.nav-mobile-btn{display:flex}}.hero{min-height:90vh;display:flex;align-items:center;justify-content:center;padding-top:var(--nav-height);text-align:center}.hero-content{max-width:600px;padding:0 var(--space-24)}.hero-avatar{width:180px;height:180px;border-radius:50%;object-fit:cover;margin-bottom:var(--space-24);border:2px solid var(--color-border);display:block;margin-inline:auto}.hero-greeting{display:block;font-size:.8125rem;font-weight:var(--font-weight-medium);color:var(--color-text-tertiary);margin-bottom:var(--space-16);letter-spacing:.06em;text-transform:uppercase}.hero-name{display:block;margin-bottom:var(--space-8);color:var(--color-text);font-weight:var(--font-weight-semibold)}.hero-titles{margin-bottom:var(--space-24)}.hero-title-line{font-size:clamp(1.125rem,2vw,1.5rem);font-weight:var(--font-weight-normal);color:var(--color-text-tertiary);letter-spacing:-.01em;display:inline-block}.hero-mission{font-size:1rem;color:var(--color-text-tertiary);margin-bottom:var(--space-48);max-width:440px;margin-inline:auto;line-height:var(--line-height-normal)}.hero-actions{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-48)}.hero-social{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap}.social-link{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);color:var(--color-text-quaternary);border-radius:var(--radius-full);transition:all var(--transition-fast);font-size:var(--font-size-sm)}.social-link:hover{color:var(--color-text-secondary);background:var(--color-surface);transform:translateY(-1px)}.social-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.social-link svg{flex-shrink:0}@media (max-width: 768px){.hero-mission{font-size:.9375rem}}@media (max-width: 430px){.hero-actions{flex-direction:column;align-items:stretch}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:48px;padding:0 var(--space-32);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);will-change:transform}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn:active{transform:scale(.98);filter:brightness(.95)}.btn-primary{background:var(--color-accent);color:var(--color-bg-deep);border:none}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{border-color:var(--color-border-light);background:var(--color-surface)}.btn-ghost{background:transparent;color:var(--color-text-tertiary);border:none}.btn-ghost:hover{color:var(--color-text)}.lang-toggle{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);padding:var(--space-8) var(--space-16);border:1px solid var(--color-border);border-radius:var(--radius-full);transition:all var(--transition-fast)}.lang-toggle:hover{color:var(--color-text-secondary);border-color:var(--color-border-light)}.lang-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.nav-mobile .lang-toggle{margin-top:var(--space-24);padding:var(--space-16);border-radius:var(--radius-md);width:100%}.contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:var(--space-8) var(--space-16);font-size:.8125rem;font-weight:var(--font-weight-normal);color:var(--color-text-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-full);transition:all var(--transition-fast);cursor:pointer;background:none;flex:1}.contact-btn:hover{color:var(--color-text);border-color:var(--color-border-light);background:var(--color-bg-warm)}.contact-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.contact-btn.is-copied{color:var(--color-accent);border-color:var(--color-accent)}@media (max-width: 430px){.btn{justify-content:center}}.about-bio{font-size:1rem;line-height:var(--line-height-relaxed);color:var(--color-text-secondary);max-width:var(--max-chars);margin:0 auto var(--space-24)}.about-experience{font-size:.9375rem;line-height:var(--line-height-relaxed);color:var(--color-text-tertiary);max-width:var(--max-chars);margin:0 auto;padding-top:var(--space-24);border-top:1px solid var(--color-border)}.about-skills{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center;max-width:560px;margin:var(--space-32) auto 0}.about-skill{display:inline-block;padding:var(--space-4) var(--space-12);font-size:var(--font-size-xs);color:var(--color-text-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-full)}.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition)}.project-card:hover{border-color:var(--color-border-light);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.project-card+.project-card{margin-top:var(--space-16)}.project-image{width:100%;aspect-ratio:16 / 9;background:var(--color-bg-warm);display:flex;align-items:center;justify-content:center;color:var(--color-text-quaternary);overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-fast);will-change:transform}.project-card:hover .project-image img{transform:scale(1.02)}.project-body{padding:var(--space-24) var(--space-32) var(--space-32)}.project-meta{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);font-size:.75rem;letter-spacing:.03em;color:var(--color-text-quaternary)}.project-card h3{margin-bottom:var(--space-12);font-weight:var(--font-weight-medium)}.project-card p{font-size:var(--font-size-sm);line-height:var(--line-height-normal);margin-bottom:var(--space-24);color:var(--color-text-tertiary);max-width:var(--max-chars)}.project-tags{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-24)}.project-tag{padding:var(--space-4) var(--space-8);font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);border-radius:var(--radius-full);background:var(--color-bg-warm);color:var(--color-text-tertiary);border:1px solid var(--color-border)}.project-links{display:flex;gap:var(--space-12)}.project-link{font-size:var(--font-size-sm);color:var(--color-text-tertiary);transition:color var(--transition-fast)}.project-link:hover{color:var(--color-accent)}.project-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}.project-link+.project-link:before{content:"·";margin-inline-end:var(--space-12);color:var(--color-text-quaternary)}.contact-intro{font-size:1rem;color:var(--color-text-tertiary);max-width:440px;line-height:var(--line-height-normal)}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16)}.contact-group-title{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-12);margin:var(--space-8) 0 var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}.contact-group-title:after{content:"";flex:1;height:1px;background:var(--color-border)}.contact-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-24);transition:all var(--transition);display:flex;flex-direction:column;position:relative}.contact-card:hover{border-color:var(--color-accent-soft);box-shadow:var(--shadow-md);transform:translateY(-3px)}.contact-card:hover .contact-card-icon{background:var(--color-accent);color:var(--color-surface)}.contact-card-icon{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--color-accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-16);color:var(--color-accent);transition:all var(--transition)}.contact-card-platform{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--space-4)}.contact-card-username{font-size:.8125rem;color:var(--color-text-tertiary);margin-bottom:var(--space-24);letter-spacing:.02em;word-break:break-all}.contact-card-actions{display:flex;gap:var(--space-8);margin-top:auto}@media (max-width: 1024px){.contact-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.contact-grid{grid-template-columns:1fr}}.footer{padding:var(--space-48) var(--space-24);margin-top:var(--space-48)}.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-16);font-size:.8125rem}.footer-links a{color:var(--color-text-tertiary);text-decoration:none;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--color-accent)}.footer-text{font-size:.8125rem;color:var(--color-text-quaternary)}.footer-sep{margin:0 var(--space-8);color:var(--color-border)}.toast{position:fixed;bottom:var(--space-32);left:50%;transform:translate(-50%) translateY(8px);background:var(--color-surface);color:var(--color-text-secondary);padding:var(--space-8) var(--space-16);border-radius:var(--radius-full);font-size:var(--font-size-sm);border:1px solid var(--color-border);opacity:0;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:200}.toast.is-visible{opacity:1;transform:translate(-50%) translateY(0)}html{scroll-behavior:smooth}body{background:var(--color-bg);color:var(--color-text);overflow-x:hidden}.bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.stars,.twinkling,.clouds{position:absolute;display:block;top:0;bottom:0;left:0;right:0;width:100%;height:100%}.stars{z-index:0;background:#000 url(https://i.imgur.com/YKY28eT.png) repeat top center}.twinkling{z-index:1;background:transparent url(https://i.imgur.com/XYMF4ca.png) repeat top center}.clouds{z-index:2;background:transparent url(https://i.imgur.com/mHbScrQ.png) repeat top center}@media (prefers-reduced-motion: no-preference){.twinkling{animation:move-twink-back 200s linear infinite}.clouds{animation:move-clouds-back 200s linear infinite}}@keyframes move-twink-back{0%{background-position:0 0}to{background-position:-10000px 5000px}}@keyframes move-clouds-back{0%{background-position:0 0}to{background-position:10000px 0}}::selection{background:var(--color-accent-soft)}.noise-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;mix-blend-mode:overlay;opacity:.3}
