/* Mohamed Eai Portfolio - Compiled CSS with Dark Mode Design System */
/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);transition:background-color .3s}

/* Color Variables - Dark Mode (Default) */
:root.dark{--bg-primary:#0B0F14;--bg-surface:#111827;--bg-surface-2:#0F172A;--border:#1F2937;--text-primary:#E5E7EB;--text-secondary:#9CA3AF;--accent:#3B82F6;--accent-hover:#2563EB;--success:#22C55E;--warning:#F59E0B;--danger:#EF4444}
:root.light{--bg-primary:#FFF;--bg-surface:#F9FAFB;--bg-surface-2:#F3F4F6;--border:#E5E7EB;--text-primary:#111827;--text-secondary:#4B5563;--accent:#2563EB;--accent-hover:#1D4ED8;--success:#22C55E;--warning:#F59E0B;--danger:#EF4444}

/* Layout */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}@media(min-width:768px){.container{padding:0 24px}}@media(min-width:1024px){.container{padding:0 32px}}.section{padding:60px 0}@media(min-width:768px){.section{padding:80px 0}}@media(min-width:1024px){.section{padding:100px 0}}.section-alt{background-color:var(--bg-surface)}.section-header{text-align:center;margin-bottom:48px}.section-title{font-size:32px;font-weight:700;color:var(--text-primary);margin-bottom:12px}@media(min-width:768px){.section-title{font-size:36px}}.section-subtitle{font-size:18px;color:var(--text-secondary)}

/* Navbar */
.navbar{position:sticky;top:0;z-index:100;background-color:var(--bg-primary);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}.navbar-content{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.navbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary);font-weight:600}.brand-initial{width:36px;height:36px;background:var(--accent);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}.brand-name{font-size:18px}.navbar-toggle{display:block;background:none;border:none;color:var(--text-primary);cursor:pointer;padding:8px}@media(min-width:768px){.navbar-toggle{display:none}}.hamburger{display:block;width:24px;height:2px;background:currentColor;position:relative;transition:all .3s}.hamburger::before,.hamburger::after{content:'';display:block;width:24px;height:2px;background:currentColor;position:absolute;transition:all .3s}.hamburger::before{top:-7px}.hamburger::after{top:7px}.navbar-menu{display:none;flex-direction:column;gap:16px;padding:16px 0}@media(min-width:768px){.navbar-menu{display:flex;flex-direction:row;align-items:center;padding:0}}.navbar-menu.active{display:flex}.nav-link{color:var(--text-secondary);text-decoration:none;padding:8px 12px;border-radius:6px;transition:all .2s}.nav-link:hover,.nav-link.active{color:var(--accent);background-color:rgba(59,130,246,.1)}

/* Theme Toggle */
.theme-toggle{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:6px;transition:background .2s}.theme-toggle:hover{background-color:var(--bg-surface)}.theme-toggle svg{width:20px;height:20px}.dark .sun-icon{display:none}.dark .moon-icon{display:block}.light .sun-icon{display:block}.light .moon-icon{display:none}

/* Hero */
.hero-section{padding:80px 0}@media(min-width:1024px){.hero-section{padding:120px 0}}.hero-grid{display:grid;gap:48px;align-items:center}@media(min-width:1024px){.hero-grid{grid-template-columns:1.2fr 1fr;gap:80px}}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;background-color:rgba(34,197,94,.1);color:var(--success);font-size:14px;margin-bottom:24px}.badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--success);animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.hero-title{font-size:40px;font-weight:700;line-height:1.2;margin-bottom:16px}@media(min-width:768px){.hero-title{font-size:56px}}.text-accent{color:var(--accent)}.hero-subtitle{font-size:24px;color:var(--text-secondary);margin-bottom:16px}.hero-description{font-size:18px;color:var(--text-secondary);margin-bottom:32px;max-width:600px}.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px}.hero-social{display:flex;gap:16px}.social-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);color:var(--text-secondary);text-decoration:none;transition:all .2s}.social-link:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}.social-link svg{width:20px;height:20px}.hero-image{display:flex;justify-content:center}.image-wrapper{position:relative;width:100%;max-width:400px;aspect-ratio:1}.profile-image{width:100%;height:100%;object-fit:cover;border-radius:16px;border:2px solid var(--border)}.profile-placeholder{width:100%;height:100%;background:var(--bg-surface);border-radius:16px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border)}.profile-placeholder svg{width:50%;height:50%;color:var(--text-secondary);opacity:.3}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:600;text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-size:16px;min-height:48px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-secondary:hover{background:rgba(59,130,246,.1)}.btn-text{background:none;color:var(--accent);padding:8px 16px}.btn-text:hover{background:rgba(59,130,246,.1)}.btn-sm{padding:8px 16px;font-size:14px;min-height:40px}.btn-lg{padding:16px 32px;font-size:18px}.btn .icon{width:20px;height:20px}

/* About */
.about-content{max-width:800px;margin:0 auto}.about-text{font-size:18px;line-height:1.8;color:var(--text-primary);text-align:center}

/* Apps Grid */
.apps-grid{display:grid;gap:24px}@media(min-width:768px){.apps-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.apps-grid{grid-template-columns:repeat(3,1fr)}}.app-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s;display:flex;flex-direction:column}@media(hover:hover){.app-card:hover{transform:translateY(-4px);border-color:var(--accent)}}.app-card-header{display:flex;gap:16px;margin-bottom:16px}.app-icon{width:56px;height:56px;border-radius:12px;flex-shrink:0}.app-icon-placeholder{width:56px;height:56px;border-radius:12px;background:var(--bg-surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}.app-icon-placeholder svg{width:32px;height:32px;color:var(--text-secondary)}.app-card-title-group{flex:1}.app-card-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.app-rating{display:flex;align-items:center;gap:4px;color:var(--warning);font-size:14px}.icon-star{width:16px;height:16px}.app-description{color:var(--text-secondary);margin-bottom:16px;line-height:1.6}.tech-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.chip{padding:4px 12px;border-radius:6px;background:rgba(59,130,246,.1);color:var(--accent);font-size:13px;font-weight:500}.chip-sm{padding:3px 8px;font-size:12px}.app-screenshot{margin-bottom:16px;border-radius:8px;overflow:hidden;background:var(--bg-surface-2)}.app-screenshot img{width:100%;height:auto;display:block}.app-metrics{display:flex;gap:16px;margin-bottom:16px;padding-top:16px;border-top:1px solid var(--border)}.metric{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:14px}.metric-icon{width:16px;height:16px}.app-card-footer{display:flex;gap:12px;margin-top:auto;padding-top:16px}

/* Timeline */
.timeline{position:relative;padding-left:32px}.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border)}.timeline-item{position:relative;margin-bottom:48px}.timeline-marker{position:absolute;left:-37px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-primary)}.timeline-content{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px}.timeline-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:16px}.timeline-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.timeline-company{color:var(--text-secondary);margin-bottom:4px}.company-link{color:var(--accent);text-decoration:none}.company-link:hover{text-decoration:underline}.timeline-location{display:inline-flex;align-items:center;gap:4px;font-size:14px}.timeline-location .icon{width:14px;height:14px}.timeline-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.timeline-date{color:var(--text-secondary);font-size:14px}.timeline-bullets{list-style:none;padding:0}.timeline-bullets li{position:relative;padding-left:20px;margin-bottom:12px;color:var(--text-secondary)}.timeline-bullets li::before{content:'▸';position:absolute;left:0;color:var(--accent)}

/* Skills */
.skills-grid{display:grid;gap:24px}@media(min-width:768px){.skills-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.skills-grid{grid-template-columns:repeat(3,1fr)}}.skill-group{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px}.skill-category{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:16px}.skill-chips{display:flex;flex-wrap:wrap;gap:8px}.chip-skill{background:rgba(59,130,246,.1);color:var(--accent);padding:6px 14px;font-size:14px}

/* Open Source */
.opensource-grid{display:grid;gap:24px}@media(min-width:768px){.opensource-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.opensource-grid{grid-template-columns:repeat(3,1fr)}}.opensource-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s}@media(hover:hover){.opensource-card:hover{transform:translateY(-4px);border-color:var(--accent)}}.opensource-header{display:flex;gap:12px;margin-bottom:16px}.opensource-icon{width:24px;height:24px;color:var(--text-secondary)}.opensource-title-group{flex:1}.opensource-title{font-size:18px;font-weight:600;margin-bottom:4px}.opensource-title a{color:var(--text-primary);text-decoration:none}.opensource-title a:hover{color:var(--accent)}.opensource-stars{display:flex;align-items:center;gap:4px;color:var(--warning);font-size:14px}.opensource-description{color:var(--text-secondary);margin-bottom:16px;line-height:1.6}.opensource-screenshot{margin-bottom:16px;border-radius:8px;overflow:hidden}.opensource-screenshot img{width:100%;height:auto}.opensource-footer{display:flex;gap:12px;flex-wrap:wrap}

/* Certificates */
.certificates-grid{display:grid;gap:24px}@media(min-width:768px){.certificates-grid{grid-template-columns:repeat(2,1fr)}}.certificate-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;gap:16px}.certificate-icon{width:48px;height:48px;flex-shrink:0;color:var(--success)}.certificate-icon svg{width:100%;height:100%}.certificate-content{flex:1}.certificate-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.certificate-provider{color:var(--text-secondary);margin-bottom:4px}.certificate-date{color:var(--text-secondary);font-size:14px;margin-bottom:12px}.certificate-expiry{color:var(--warning)}.certificate-link{display:inline-flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font-size:14px}.certificate-link:hover{text-decoration:underline}.certificate-link .icon{width:14px;height:14px}

/* Education */
.education-list{display:grid;gap:24px}@media(min-width:768px){.education-list{grid-template-columns:repeat(2,1fr)}}.education-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;gap:16px}.education-icon{width:48px;height:48px;flex-shrink:0;color:var(--accent)}.education-icon svg{width:100%;height:100%}.education-content{flex:1}.education-degree{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.education-field{color:var(--text-secondary);margin-bottom:8px;font-style:italic}.education-institution{color:var(--text-primary);font-weight:500;margin-bottom:4px}.education-location{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:14px;margin-bottom:4px}.education-location .icon{width:14px;height:14px}.education-date{color:var(--text-secondary);font-size:14px;margin-bottom:12px}.education-description{color:var(--text-secondary);font-size:14px;line-height:1.6}

/* Contact */
.contact-wrapper{display:grid;gap:48px}@media(min-width:1024px){.contact-wrapper{grid-template-columns:1fr 1fr}}.contact-intro{font-size:18px;color:var(--text-primary);margin-bottom:32px;line-height:1.8}.contact-methods{display:flex;flex-direction:column;gap:16px}.contact-method{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .2s}.contact-method:hover{border-color:var(--accent);transform:translateX(4px)}.contact-method .icon{width:24px;height:24px;color:var(--accent);flex-shrink:0}.contact-method-label{font-size:14px;color:var(--text-secondary);margin-bottom:4px}.contact-method-value{color:var(--text-primary);font-weight:500}.contact-form{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px}.form-group{margin-bottom:24px}.form-label{display:block;margin-bottom:8px;color:var(--text-primary);font-weight:500}.form-input{width:100%;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:16px;transition:border .2s}.form-input:focus{outline:none;border-color:var(--accent)}textarea.form-input{resize:vertical;min-height:120px}.form-message{margin-top:16px;padding:12px 16px;border-radius:8px;display:none}.form-message.success{background:rgba(34,197,94,.1);color:var(--success);display:block}.form-message.error{background:rgba(239,68,68,.1);color:var(--danger);display:block}

/* Footer */
.footer{background:var(--bg-surface);border-top:1px solid var(--border);padding:48px 0 24px}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:32px}.footer-name{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.footer-tagline{color:var(--text-secondary)}.footer-social{display:flex;gap:12px}.footer-bottom{padding-top:24px;border-top:1px solid var(--border);text-align:center}.footer-copyright{color:var(--text-secondary);font-size:14px;margin-bottom:8px}.footer-tech{color:var(--text-secondary);font-size:14px}

/* App Detail */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);text-decoration:none;margin-bottom:24px}.back-link:hover{text-decoration:underline}.back-link .icon{width:16px;height:16px}.app-hero{padding:80px 0}.app-hero-header{display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap}.app-hero-icon{width:96px;height:96px;border-radius:16px;flex-shrink:0}.app-hero-title{font-size:36px;font-weight:700;margin-bottom:8px}@media(min-width:768px){.app-hero-title{font-size:48px}}.app-hero-subtitle{font-size:20px;color:var(--text-secondary);margin-bottom:16px}.app-hero-metrics{display:flex;gap:24px;flex-wrap:wrap}.metric-large{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border)}.metric-large .icon,.metric-large .icon-star{width:20px;height:20px}.app-hero-actions{display:flex;gap:16px;flex-wrap:wrap}.screenshots-gallery{display:grid;gap:24px}@media(min-width:768px){.screenshots-gallery{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.screenshots-gallery{grid-template-columns:repeat(3,1fr)}}.screenshot-item{border-radius:12px;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border)}.screenshot-item img{width:100%;height:auto;display:block}.app-content{max-width:900px;margin:0 auto}.app-block{margin-bottom:48px}.app-block-title{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:16px}.app-block-content{font-size:18px;color:var(--text-secondary);line-height:1.8}.subsection-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.problem-solution{margin-bottom:24px}.features-list{list-style:none;padding:0}.features-list li{position:relative;padding-left:28px;margin-bottom:12px;font-size:17px;color:var(--text-secondary)}.features-list li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:bold}

/* Animations */
@media(prefers-reduced-motion:no-preference){[data-aos]{opacity:0;transition:opacity .4s,transform .4s}[data-aos].aos-animate{opacity:1;transform:translateY(0)}[data-aos="fade-up"]{transform:translateY(20px)}}

/* Utilities */
.icon{width:16px;height:16px}