:root{--primary-color: #252ceb;--primary-hover: #231dd8;--secondary-color: #64748b;--accent-color: #10b981;--bg-light: #f8fafc;--bg-dark: #0f172a;--text-color: #1e293b;--text-muted: #64748b;--white: #ffffff;--card-bg: #ffffff;--border-color: #e2e8f0;--font-family-primary: "Inter", "Cairo", sans-serif;--transition-speed: .3s cubic-bezier(.4, 0, .2, 1);--second-bg-gradient: #eff6ff;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{font-family:var(--font-family-primary);line-height:1.6;color:var(--text-color);background-color:var(--bg-light);overflow-x:hidden;max-width:100%;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}h1,h2,h3{margin-bottom:1.5rem;color:var(--text-color);font-weight:700;line-height:1.2}h1{font-size:3rem}h2{font-size:2.25rem}h3{font-size:1.5rem}p{margin-bottom:1.25rem;color:var(--text-muted)}a{text-decoration:none;color:var(--primary-color);transition:all var(--transition-speed)}a:hover{color:var(--primary-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;text-align:center;transition:all var(--transition-speed);cursor:pointer;border:none;gap:.5rem;font-size:1rem}.primary-btn{background-color:var(--primary-color);color:#fff;box-shadow:var(--shadow)}.primary-btn:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}.secondary-btn{background-color:transparent;color:var(--text-color);border:2px solid var(--border-color)}.secondary-btn:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px)}.main-header{background-color:#fffc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);position:sticky;top:0;width:100%;z-index:1000;padding:.75rem 0;transition:background-color var(--transition-speed)}.navbar{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:0 1.5rem}.logo{display:flex;align-items:center;gap:1rem}.logo a{font-size:1.5rem;font-weight:800;color:var(--primary-color);letter-spacing:-.025em}.nav-links{display:flex;list-style:none;align-items:center}.nav-links li{margin-left:2rem}.nav-links a{font-size:.9rem;font-weight:500;padding:.5rem 0;position:relative;color:var(--text-color);opacity:.8}.nav-links a:hover{opacity:1;color:var(--primary-color)}.nav-links a:after{content:"";position:absolute;width:0;height:2px;background:var(--primary-color);bottom:-2px;left:0;transition:width var(--transition-speed);border-radius:2px}.nav-links a:hover:after{width:100%}.burger{display:none;cursor:pointer;flex-direction:column;justify-content:space-around;width:30px;height:25px}.burger div{width:30px;height:3px;background-color:var(--text-color);transition:all .3s ease}.burger.toggle .line1{transform:rotate(-45deg) translate(-5px,6px)}.burger.toggle .line2{opacity:0}.burger.toggle .line3{transform:rotate(45deg) translate(-5px,-6px)}.hero-section{display:flex;justify-content:center;align-items:center;padding:6rem 0;min-height:calc(100vh - 72px);background-color:var(--bg-light);position:relative;overflow:hidden}.bg-circles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;filter:blur(80px);opacity:.5}.circle{position:absolute;border-radius:50%;animation:hover 15s infinite alternate ease-in-out}.circle-1{width:400px;height:400px;background:var(--primary-color);top:-10%;left:10%;animation-duration:20s}.circle-2{width:350px;height:350px;background:#ec4899;bottom:10%;right:15%;animation-delay:-5s;animation-duration:25s}.circle-3{width:300px;height:300px;background:#06b6d4;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-10s;animation-duration:18s}@keyframes hover{0%{transform:translate(0) scale(1) rotate(0);opacity:.4}33%{transform:translate(50px,-30px) scale(1.1) rotate(10deg);opacity:.7}66%{transform:translate(-30px,50px) scale(.9) rotate(-10deg);opacity:.5}to{transform:translate(0) scale(1) rotate(0);opacity:.4}}.hero-content{text-align:center;max-width:800px;opacity:0;transform:translateY(20px);animation:fadeInSlideUp 1s forwards cubic-bezier(.4,0,.2,1);animation-delay:.2s;z-index:5;padding:2rem}.hero-content h1{font-size:3.8rem;font-weight:800;color:var(--text-color);margin-bottom:1.5rem;letter-spacing:-.05em;line-height:1}.hero-content h1 span{color:var(--primary-color)}.hero-content p{font-size:1.2rem;color:var(--text-muted);margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto}.hero-buttons{display:flex;gap:1rem;justify-content:center}@media (max-width: 768px){.hero-content h1{font-size:3rem}.hero-content p{font-size:1.25rem}}.typewriter{overflow:hidden;border-right:.15em solid var(--primary-color);white-space:nowrap;margin:0 auto;letter-spacing:.05em;animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite;animation-fill-mode:forwards;width:0}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:var(--primary-color)}}.hero-image{position:relative;opacity:0;transform:scale(.9);animation:fadeInScaleUp 1s forwards cubic-bezier(.2,.8,.2,1);animation-delay:1s}.hero-image img{max-width:400px;border-radius:50%;box-shadow:0 10px 30px #0000001a}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.navbar{padding:1rem}.nav-links{position:fixed;top:72px;right:0;height:calc(100vh - 72px);background-color:var(--card-bg);flex-direction:column;width:100%;transform:translate(100%);visibility:hidden;transition:transform .5s ease,visibility .5s;padding:2rem;z-index:1000;border-top:1px solid var(--border-color);box-shadow:-10px 0 20px #0000000d;overflow-y:auto}.nav-links.nav-active{transform:translate(0);visibility:visible}.nav-links li{margin:1.5rem 0;opacity:0}.nav-links a{font-size:1.25rem}.nav-links.nav-active li{animation:navLinkFade .5s ease forwards}.burger{display:flex;z-index:1001}}@media (max-width: 500px){.hero-content{padding:1rem}.hero-content h1{font-size:2.25rem;line-height:1.1}.hero-content p{font-size:1rem;margin-bottom:2rem;padding:0 .5rem}.hero-buttons{flex-direction:column;width:100%;max-width:280px;margin:0 auto;gap:.75rem}.hero-buttons .btn{width:100%;padding:.8rem 1.25rem}.circle-1{width:250px;height:250px;top:-5%;left:-10%}.circle-2{width:200px;height:200px;bottom:5%;right:-5%}.circle-3{width:150px;height:150px;top:40%;left:80%}}@keyframes navLinkFade{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInSlideUp 1s forwards cubic-bezier(.2,.8,.2,1)}.slide-in-left{opacity:0;transform:translate(-50px);animation:slideInLeft 1s forwards cubic-bezier(.2,.8,.2,1)}.slide-in-right{opacity:0;transform:translate(50px);animation:slideInRight 1s forwards cubic-bezier(.2,.8,.2,1)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-light)}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:darken(var(--primary-color),10%)}.project-header{padding:4rem 0;border-bottom:1px solid var(--border-color);margin-bottom:4rem}.project-header .header-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;gap:2rem}.project-header h1{font-size:3rem;margin-bottom:0;text-align:left;flex:1}.header-actions{display:flex;gap:1rem}@media (max-width: 768px){.project-header{padding:2rem 1.5rem;margin-bottom:2rem}.project-header .header-container{flex-direction:column;text-align:center;margin-bottom:2rem;gap:1.5rem}.project-header h1{font-size:2.25rem;text-align:center}.header-actions{flex-direction:column;width:100%;max-width:300px;margin:0 auto}.header-actions .btn{width:100%}}.project-content{max-width:1000px;margin:0 auto;padding:0 1.5rem}