:root{--green: #00ff88;--green-dim: #00cc6a;--dark: #060a0f;--dark2: #0d1117;--dark3: #111820;--dark4: #1a2332;--text: #e8edf2;--text-muted: #7a8a9a;--text-dim: #4a5a6a;--border: rgba(0, 255, 136, .12);--border2: rgba(255, 255, 255, .06);--font-display-ar: "Changa", sans-serif;--font-body-ar: "Tajawal", sans-serif;--font-mono-ar: "IBM Plex Sans Arabic", sans-serif;--font-display-en: "Syne", sans-serif;--font-body-en: "Space Grotesk", sans-serif;--font-mono-en: "JetBrains Mono", monospace;--font-display: var(--font-display-en);--font-body: var(--font-body-en);--font-mono: var(--font-mono-en)}html[lang=ar]{--font-display: var(--font-display-ar);--font-body: var(--font-body-ar);--font-mono: var(--font-mono-ar)}html[lang=en]{--font-display: var(--font-display-en);--font-body: var(--font-body-en);--font-mono: var(--font-mono-en)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--dark);color:var(--text);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}html[dir=rtl] body{direction:rtl;text-align:right}html[dir=ltr] body{direction:ltr;text-align:left}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:.4}#root{position:relative;z-index:1}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border2);background:#060a0fd9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.nav-logo{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:-.5px}.nav-logo span{color:var(--green)}.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-size:14px;color:var(--text-muted);text-decoration:none;letter-spacing:0;text-transform:none;font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--green)}.nav-actions{display:flex;align-items:center;gap:12px}.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--border2);border-radius:999px;padding:4px;background:#ffffff05}.lang-button{border:0;background:transparent;color:var(--text-muted);min-width:42px;padding:7px 12px;border-radius:999px;cursor:pointer;font-family:var(--font-mono);font-size:12px;transition:background .2s,color .2s}.lang-button:hover{color:var(--text)}.lang-button-active{background:#00ff881f;color:var(--green)}.nav-cta{background:transparent;border:1px solid var(--green);color:var(--green);padding:8px 22px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;font-family:var(--font-body);letter-spacing:0;transition:background .2s,color .2s;white-space:nowrap}.nav-cta:hover{background:var(--green);color:var(--dark)}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 60px 80px;position:relative;overflow:hidden}.hero-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(0,255,136,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}.hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(0,255,136,.06) 0%,transparent 70%);top:-100px;pointer-events:none}html[dir=rtl] .hero-glow{left:-100px}html[dir=ltr] .hero-glow{right:-100px}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#00ff8814;border:1px solid var(--border);border-radius:100px;padding:6px 16px;font-size:12px;font-family:var(--font-mono);color:var(--green);margin-bottom:32px;width:fit-content}.hero-badge:before{content:"";width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #0f86}50%{opacity:.8;box-shadow:0 0 0 6px #0f80}}.hero-title{font-family:var(--font-display);font-size:clamp(48px,7vw,96px);font-weight:800;line-height:1.15;letter-spacing:0;margin-bottom:24px;max-width:900px}.title-line{display:block}.hero-title em{font-style:italic;color:var(--green)}.hero-title .outline{-webkit-text-stroke:1px rgba(255,255,255,.2);color:transparent}.hero-sub{font-size:18px;color:var(--text-muted);max-width:540px;margin-bottom:48px;line-height:1.7;font-weight:400}.hero-name{color:var(--text)}.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.btn-primary{background:var(--green);color:var(--dark);padding:14px 32px;border-radius:4px;font-weight:700;font-size:14px;text-decoration:none;font-family:var(--font-body);letter-spacing:0;transition:opacity .2s,transform .2s;display:inline-block}.btn-primary:hover{opacity:.88;transform:translateY(-2px)}.btn-outline{border:1px solid var(--border2);color:var(--text-muted);padding:14px 32px;border-radius:4px;font-size:14px;text-decoration:none;font-family:var(--font-body);transition:border-color .2s,color .2s;display:inline-block}.btn-outline:hover{border-color:var(--green);color:var(--green)}.hero-stats{display:flex;gap:48px;margin-top:72px;padding-top:48px;border-top:1px solid var(--border2)}.stat-num{font-family:var(--font-display);font-size:36px;font-weight:800;color:var(--text)}.stat-num span{color:var(--green)}.stat-label{font-size:13px;color:var(--text-dim);text-transform:none;letter-spacing:0;margin-top:4px}section{padding:100px 60px;position:relative}.section-tag{font-family:var(--font-mono);font-size:12px;color:var(--green);letter-spacing:0;text-transform:none;margin-bottom:16px;display:block}.section-tag-centered{text-align:center}.section-title{font-family:var(--font-display);font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:0;line-height:1.2;margin-bottom:20px}.section-title-centered{text-align:center}.section-desc{color:var(--text-muted);font-size:16px;max-width:540px;line-height:1.7;margin-bottom:60px}.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.about-text p{color:var(--text-muted);font-size:16px;line-height:1.8;margin-bottom:20px}.about-right{display:flex;flex-direction:column;gap:24px}.info-card{background:var(--dark3);border:1px solid var(--border2);border-radius:8px;padding:24px;position:relative;overflow:hidden}.info-card:before{content:"";position:absolute;top:0;width:3px;height:100%;background:var(--green);opacity:.6}html[dir=rtl] .info-card:before{right:0}html[dir=ltr] .info-card:before{left:0}.info-card-title{font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-dim);margin-bottom:8px;font-family:var(--font-mono)}.info-card-value{font-size:15px;font-weight:600;color:var(--text)}.info-card-value-accent{color:var(--green)}.info-card-value-compact{font-size:13px}.info-card-sub{font-size:13px;color:var(--text-muted);margin-top:4px}#skills{background:var(--dark2)}.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border2);border:1px solid var(--border2);border-radius:12px;overflow:hidden}.skill-card{background:var(--dark2);padding:36px 32px;transition:background .2s;cursor:default}.skill-card:hover{background:var(--dark3)}.skill-icon{font-family:var(--font-mono);font-size:11px;color:var(--green);letter-spacing:0;margin-bottom:20px;display:block}.skill-name{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:0}.skill-desc{font-size:13px;color:var(--text-muted);line-height:1.6}.skill-tags,.project-tags{display:flex;flex-wrap:wrap;gap:6px}.skill-tags{margin-top:20px}.tag{font-size:11px;font-family:var(--font-mono);background:#00ff8812;border:1px solid rgba(0,255,136,.15);color:var(--green);padding:3px 10px;border-radius:4px}.tools-ticker{padding:32px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);overflow:hidden;background:var(--dark)}.ticker-track{display:flex;gap:60px;animation:ticker 18s linear infinite;width:max-content}@keyframes ticker{0%{transform:translate(0)}to{transform:translate(-50%)}}.ticker-item{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);white-space:nowrap;display:flex;align-items:center;gap:10px}.ticker-item span{color:var(--green)}.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-card{background:var(--dark3);border:1px solid var(--border2);border-radius:12px;padding:40px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,opacity .7s ease;cursor:pointer;display:block;color:inherit;text-decoration:none}.project-card.fade-in{transition:opacity .7s ease,transform .7s ease,border-color .3s ease}.project-card:hover{border-color:#00ff8840;transform:translateY(-4px)}.project-card:focus-visible{outline:2px solid var(--green);outline-offset:4px}.project-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .3s}html[dir=rtl] .project-card:after{background:radial-gradient(circle at top left,rgba(0,255,136,.04) 0%,transparent 60%)}html[dir=ltr] .project-card:after{background:radial-gradient(circle at top right,rgba(0,255,136,.04) 0%,transparent 60%)}.project-card:hover:after{opacity:1}.project-num{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-bottom:20px;display:block}.project-title{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:14px;letter-spacing:0}.project-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:24px}.project-feature{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-top:20px;padding-top:20px;border-top:1px solid var(--border2)}.project-feature:before{content:"";width:4px;height:4px;background:var(--green);border-radius:50%;flex-shrink:0}#experience{background:var(--dark2)}.timeline{position:relative}html[dir=rtl] .timeline{padding-right:40px}html[dir=ltr] .timeline{padding-left:40px}.timeline:before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--green),transparent);opacity:.3}html[dir=rtl] .timeline:before{right:0}html[dir=ltr] .timeline:before{left:0}.timeline-item{position:relative;margin-bottom:60px}.timeline-item:before{content:"";position:absolute;top:6px;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 3px #00ff8826}html[dir=rtl] .timeline-item:before{right:-47px}html[dir=ltr] .timeline-item:before{left:-47px}.timeline-item:last-child{margin-bottom:0}.timeline-period{font-family:var(--font-mono);font-size:12px;color:var(--green);letter-spacing:0;margin-bottom:10px}.timeline-role{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:0;margin-bottom:4px}.timeline-company{font-size:14px;color:var(--text-muted);margin-bottom:16px}.timeline-desc{font-size:14px;color:var(--text-muted);line-height:1.7;max-width:620px}.contact-inner{text-align:center;max-width:640px;margin:0 auto}.contact-copy{color:var(--text-muted);font-size:16px;line-height:1.7;margin-bottom:0}.contact-email{font-family:var(--font-display);font-size:clamp(20px,4vw,36px);font-weight:700;color:var(--green);letter-spacing:0;text-decoration:none;display:inline-block;margin:40px 0;transition:opacity .2s}.contact-email:hover{opacity:.75}footer{padding:40px 60px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-dim)}footer a{color:var(--text-dim);text-decoration:none}footer a:hover{color:var(--green)}.ltr-text{direction:ltr;unicode-bidi:isolate}.fade-in{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}.fade-in.visible{opacity:1;transform:none}html[lang=en] .nav-links a{font-size:13px;letter-spacing:.5px;text-transform:uppercase}html[lang=en] .hero-title{line-height:1;letter-spacing:-3px}html[lang=en] .section-tag{font-size:11px;letter-spacing:2px;text-transform:uppercase}html[lang=en] .section-title{line-height:1.05;letter-spacing:-2px}html[lang=en] .stat-label{font-size:12px;letter-spacing:1px;text-transform:uppercase}html[lang=en] .info-card-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase}html[lang=en] .skill-icon{letter-spacing:1px}html[lang=en] .skill-name,html[lang=en] .project-title,html[lang=en] .timeline-role{letter-spacing:-.5px}html[lang=en] .timeline-period{font-size:11px;letter-spacing:1px}html[lang=en] .contact-email{letter-spacing:-1px}@media (max-width: 900px){.skills-grid,.projects-grid,.about-inner{grid-template-columns:1fr}.about-inner{gap:40px}}@media (max-width: 768px){nav{padding:16px 24px}.nav-links{display:none}.nav-actions{gap:8px}.lang-button{min-width:38px;padding:6px 10px}.nav-cta{padding:8px 14px}section{padding:60px 24px}.hero{padding:100px 24px 60px}.hero-stats{gap:32px;flex-wrap:wrap}footer{flex-direction:column;gap:12px;text-align:center;padding:40px 24px}}