:root{--bg:#0b0f14;--surface:#121821;--primary:#c65d1e;--text:#e6edf3;--text-secondary:#9da7b3;--accent:#4fa3ff;--border:#1e2633;--font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--xs:4px;--sm:8px;--md:16px;--lg:24px;--xl:32px;--h1:32px;--h2:20px;--h3:16px;--body:14px;--max-w:800px;--nav-h:52px}[data-theme=light]{--bg:#f5f7fa;--surface:#fff;--text:#0d1117;--text-secondary:#555f6b;--border:#dde2e8}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--body);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}ul{list-style:none}.fade-in{opacity:0;animation:.15s forwards fadeIn}@keyframes fadeIn{to{opacity:1}}#hero{animation-delay:0s}#profile{animation-delay:30ms}#skills{animation-delay:60ms}#experience{animation-delay:90ms}#showcases{animation-delay:.12s}#contact{animation-delay:.15s}.container{max-width:var(--max-w);padding:0 var(--lg);margin:0 auto}@media (width<=600px){.container{padding:0 var(--lg)}}#navbar{z-index:100;background:var(--bg);border-bottom:1px solid var(--border);height:var(--nav-h);position:sticky;top:0}.nav-inner{max-width:var(--max-w);padding:0 var(--lg);align-items:center;gap:var(--xl);height:100%;margin:0 auto;display:flex}.nav-logo{color:var(--text);letter-spacing:.05em;text-shadow:0 1px 10px rgba(0,0,0,.5);flex-shrink:0;font-size:16px;font-weight:700}.nav-logo-link{align-items:center;gap:var(--sm);text-decoration:none;display:flex}.nav-logo-link:hover{text-decoration:none}.nav-logo-img{width:auto;height:32px}[data-theme=light] .nav-logo-img{filter:brightness(0)}.nav-links{gap:var(--xl);flex:1;display:flex}.nav-links a{color:var(--text-secondary);font-size:var(--body);transition:color .1s}.nav-links a:hover,.nav-links a.active{color:var(--primary);text-decoration:none}#theme-toggle{border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);background:0 0;border-radius:6px;flex-shrink:0;padding:4px 8px;font-size:14px;line-height:1;transition:border-color .1s,color .1s}#theme-toggle:hover{border-color:var(--text-secondary);color:var(--text)}.nav-hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;margin-left:auto;padding:4px;display:none}.nav-hamburger span{background:var(--text-secondary);border-radius:2px;width:20px;height:2px;transition:background .1s;display:block}.nav-hamburger:hover span{background:var(--text)}.nav-mobile{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--md) var(--lg);gap:var(--md);flex-direction:column;display:none}.nav-mobile.open{display:flex}.nav-mobile a{color:var(--text-secondary);font-size:var(--body)}.nav-mobile a:hover{color:var(--text);text-decoration:none}@media (width<=640px){.nav-links{display:none}.nav-hamburger{display:flex}#navbar{height:auto}.nav-inner{height:var(--nav-h);flex-wrap:wrap}}.section{padding:var(--xl) 0}.section+.section{padding-top:0}.section-title{font-size:var(--h2);color:var(--text);margin-bottom:var(--lg);padding-bottom:var(--sm);border-bottom:1px solid var(--border);font-weight:600}#hero{min-height:50vh;padding:calc(var(--nav-h) + var(--xl)) 0 var(--xl);background-image:url(/hero.jpg);background-position:top;background-repeat:no-repeat;background-size:100%;align-items:flex-end;display:flex}#hero:before{content:"";pointer-events:none;background:linear-gradient(rgba(11,15,20,0) 0%,rgba(11,15,20,.5) 60%,rgba(11,15,20,.95) 100%);position:absolute;inset:0}#hero .container{width:100%;position:relative}[data-theme=light] #hero:before{background:linear-gradient(rgba(245,247,250,0) 0%,rgba(245,247,250,.5) 60%,rgba(245,247,250,.95) 100%)}@media (width<=768px){#hero{min-height:70vh}#hero:before{background:linear-gradient(rgba(11,15,20,.2) 0%,rgba(11,15,20,.6) 40%,rgba(11,15,20,.95) 100%)}[data-theme=light] #hero:before{background:linear-gradient(rgba(245,247,250,.2) 0%,rgba(245,247,250,.6) 40%,rgba(245,247,250,.95) 100%)}}.basmala-section{padding:var(--sm) 0;text-align:center}.basmala{color:var(--text-secondary);font-size:12px}.hero-tag{color:var(--primary);letter-spacing:.08em;margin-bottom:var(--md);text-transform:uppercase;font-size:18px;font-weight:600}.hero-name{color:var(--text);letter-spacing:-.03em;margin-bottom:var(--sm);text-shadow:0 2px 20px rgba(0,0,0,.5);font-size:clamp(36px,8vw,72px);font-weight:800}.hero-role{color:var(--text);margin-bottom:var(--xl);text-shadow:0 1px 10px rgba(0,0,0,.5);font-size:20px;font-weight:500}.hero-links{gap:var(--md);flex-wrap:wrap;display:flex}.hero-link{border:1px solid var(--border);font-size:var(--body);color:var(--accent);border-radius:6px;padding:6px 14px;transition:border-color .1s;display:inline-block}.hero-link:hover{border-color:var(--accent);text-decoration:none}.hero-link,.contact-item{align-items:center;gap:6px;display:inline-flex}.contact-icon{align-items:center;display:inline-flex}.profile-list{gap:var(--sm);flex-direction:column;list-style:none;display:flex}.profile-list li{color:var(--text-secondary);padding-left:var(--md);position:relative}.profile-list li:before{content:"—";color:var(--primary);position:absolute;left:0}.profile-list a{color:var(--accent)}.skills-grid{gap:var(--md);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=500px){.skills-grid{grid-template-columns:1fr}}.skill-group{background:var(--surface);border:1px solid var(--border);padding:var(--md);border-radius:8px}.skill-group-title{font-size:var(--h3);color:var(--text);margin-bottom:var(--sm);font-weight:600}.skill-tags{gap:var(--xs) var(--sm);flex-wrap:wrap;display:flex}.skill-tag{color:var(--text-secondary);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:13px}.card-list{gap:var(--md);flex-direction:column;display:flex}.card{background:var(--surface);border:1px solid var(--border);padding:var(--md);border-radius:8px}.card-header{justify-content:space-between;align-items:flex-start;gap:var(--xs);margin-bottom:var(--sm);flex-wrap:wrap;display:flex}.card-title{font-size:var(--h3);color:var(--text);font-weight:600}.card-meta{color:var(--text-secondary);flex-shrink:0;font-size:13px}.card-stack{color:var(--primary);margin-bottom:var(--sm);font-size:13px}.card-bullets{flex-direction:column;gap:4px;list-style:none;display:flex}.card-bullets li{color:var(--text-secondary);padding-left:var(--md);font-size:var(--body);position:relative}.card-bullets li:before{content:"·";color:var(--text-secondary);position:absolute;left:4px}.card-link{margin-top:var(--sm);color:var(--accent);font-size:13px;display:inline-block}.contact-block{background:var(--surface);border:1px solid var(--border);padding:var(--md);border-radius:8px}.contact-desc{color:var(--text-secondary);margin-bottom:var(--lg)}.contact-links{gap:var(--md);flex-direction:column;display:flex}.contact-link{border:1px solid var(--border);font-size:var(--body);color:var(--accent);border-radius:6px;padding:6px 14px;transition:border-color .1s;display:inline-block}.contact-item{gap:var(--md);color:var(--text);align-items:baseline;text-decoration:none;display:flex}.contact-item:hover .contact-url{text-decoration:underline}.contact-label{color:var(--text-secondary);flex-shrink:0;min-width:64px;font-size:13px}.contact-url{font-size:var(--body);color:var(--accent)}.footer{border-top:1px solid var(--border);padding:var(--lg) 0;margin-top:var(--xl)}.footer p{color:var(--text-secondary);font-size:13px}