:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--primary-color: #4aa8c0;--primary-hover-color: #3a8fa6;--bg-main: #0a0f1e;--bg-card: #0d1b2a;--bg-card-alt: #112240;--text-main: rgba(255, 255, 255, .9);--text-muted: rgba(255, 255, 255, .6);color-scheme:dark;color:var(--text-main);background-color:var(--bg-main);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:var(--primary-color);text-decoration:inherit}a:hover{color:var(--primary-hover-color)}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background-color:var(--bg-main)}#root{width:100%;overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:50px;border:2px solid var(--primary-color);padding:.6em 1.5em;font-size:1em;font-weight:500;font-family:inherit;background-color:transparent;color:var(--primary-color);cursor:pointer;transition:all .3s ease}button:hover{background-color:var(--primary-color);color:#0a0f1e}.about-container{max-width:900px;margin:0 auto;padding:3rem 2rem}.about-container h1{font-size:2.5rem;margin-bottom:.5rem;text-align:left;color:#fff}.about-container h1 span{color:var(--primary-color)}.about-subtitle{color:var(--primary-color);font-size:1.2rem;margin-bottom:2rem;font-weight:500}.about-layout{display:flex;gap:3rem;align-items:flex-start;margin-bottom:3rem}.about-text{flex:1}.profile-section{display:flex;justify-content:center;align-items:flex-start}.profile-image-wrapper{position:relative;width:220px;height:220px}.profile-image{width:220px;height:220px;border-radius:50%;object-fit:cover;border:3px solid var(--primary-color);transition:opacity .3s ease}.profile-image:hover{opacity:.85}.bio{margin-bottom:3rem;padding:2rem;background-color:#646cff1a;border-radius:12px;border-left:4px solid var(--primary-color)}.bio p{font-size:1.05rem;line-height:1.8;color:var(--text-muted);margin-bottom:1rem}.skills{padding:2rem;background-color:var(--bg-card);border-radius:16px;border:1px solid rgba(0,212,255,.2)}.skills h2{font-size:1.8rem;margin-bottom:1.5rem;color:#fff}.skills h2 span{color:var(--primary-color)}.skills ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.skills li{padding:.8rem 1.2rem;background-color:var(--bg-card-alt);border-radius:8px;border:1px solid rgba(0,212,255,.15);color:var(--text-muted);transition:all .2s ease}.skills li:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-3px)}@media(max-width:768px){.about-layout{flex-direction:column-reverse;gap:2rem}.profile-image,.profile-image-wrapper{width:160px;height:160px}.skills ul{grid-template-columns:1fr}}.contact-container{max-width:650px;margin:0 auto;padding:3rem 2rem;text-align:center}.contact-container h1{font-size:2.5rem;margin-bottom:1rem;color:#fff}.contact-container h1 span{color:var(--primary-color)}.contact-container>p{font-size:1.1rem;color:var(--text-muted);margin-bottom:3rem}.contact-info{display:flex;flex-direction:column;gap:1.5rem}.contact-item{padding:1.8rem 2rem;background-color:var(--bg-card);border-radius:16px;border:1px solid rgba(0,212,255,.15);transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;text-align:left;display:flex;align-items:center;gap:1.5rem}.contact-item:hover{border-color:var(--primary-color);transform:translateY(-4px);box-shadow:0 8px 25px #00d4ff1a}.contact-item h3{font-size:1.1rem;margin:0 0 .4rem;color:var(--text-muted);font-weight:400}.contact-item-body{flex:1}.email-button{display:inline-block;color:#fff;font-size:1.05rem;font-weight:600;text-decoration:none;transition:color .3s ease}.email-button:hover{color:var(--primary-color)}@media(max-width:768px){.contact-container{padding:2rem 1rem}.contact-item{padding:1.5rem}}.projects-container{max-width:1200px;margin:0 auto;padding:3rem 2rem}.projects-container h1{font-size:2.5rem;margin-bottom:3rem;text-align:center;color:#fff}.projects-container h1 span{color:var(--primary-color)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.project-card{background-color:var(--bg-card);padding:2rem;border-radius:16px;border:1px solid rgba(0,212,255,.15);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;display:flex;flex-direction:column}.project-card:hover{transform:translateY(-6px);box-shadow:0 6px 20px #0006;border-color:var(--primary-color)}.project-card h3{font-size:1.4rem;margin-bottom:.8rem;color:#fff}.project-card p{color:var(--text-muted);line-height:1.6;margin-bottom:1.5rem;flex:1}.tech-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tech-badge{padding:.3rem .8rem;background-color:#00d4ff1a;color:var(--primary-color);border:1px solid rgba(0,212,255,.3);border-radius:20px;font-size:.8rem;font-weight:500}.card-links{display:flex;gap:1rem;flex-wrap:wrap}.github-link{display:inline-block;padding:.6rem 1.4rem;border:2px solid var(--primary-color);border-radius:50px;color:var(--primary-color);text-decoration:none;font-weight:500;font-size:.9rem;transition:all .3s ease}.github-link:hover{background-color:var(--primary-color);color:var(--bg-main)}.live-demo-link{display:inline-block;padding:.6rem 1.4rem;background-color:var(--primary-color);color:var(--bg-main);text-decoration:none;border-radius:50px;font-weight:700;font-size:.9rem;border:2px solid var(--primary-color);transition:all .3s ease}.live-demo-link:hover{background-color:transparent;color:var(--primary-color)}@media(max-width:768px){.projects-container{padding:2rem 1rem}.projects-grid{grid-template-columns:1fr}}.home-container{min-height:calc(100vh - 65px);display:flex;justify-content:center;align-items:center;padding:2rem;background-color:var(--bg-main)}.hero{text-align:center;max-width:800px}.hero h1{font-size:3.5rem;margin-bottom:1rem;color:#fff;animation:fadeInUp .8s ease}.hero h1 span{color:var(--primary-color)}.hero h2{font-size:1.8rem;color:var(--text-muted);margin-bottom:1.5rem;font-weight:400;animation:fadeInUp 1s ease}.hero p{font-size:1.2rem;color:var(--text-muted);line-height:1.6;animation:fadeInUp 1.2s ease}.hero-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem;animation:fadeInUp 1.4s ease}.btn-primary{padding:.8rem 2rem;border-radius:50px;border:2px solid var(--primary-color);background-color:var(--primary-color);color:var(--bg-main);font-weight:700;text-decoration:none;font-size:1rem;transition:all .3s ease}.btn-primary:hover{background-color:transparent;color:var(--primary-color)}.btn-outline{padding:.8rem 2rem;border-radius:50px;border:2px solid var(--primary-color);background-color:transparent;color:var(--primary-color);font-weight:700;text-decoration:none;font-size:1rem;transition:all .3s ease}.btn-outline:hover{background-color:var(--primary-color);color:var(--bg-main)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.hero h1{font-size:2.5rem}.hero h2{font-size:1.4rem}.hero p{font-size:1rem}.hero-buttons{flex-direction:column;align-items:center}}.navbar{width:100%;background-color:#0d1b2a;padding:1rem 2rem;border-bottom:1px solid rgba(74,168,192,.2)}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none}.nav-logo span{color:var(--primary-color)}.nav-menu{display:flex;list-style:none;gap:2rem;margin:0;padding:0}.nav-links{color:var(--text-muted);text-decoration:none;font-size:1rem;transition:color .3s;position:relative;padding-bottom:4px}.nav-links:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--primary-color);transition:width .3s ease}.nav-links:hover,.nav-links.active{color:var(--primary-color)}.nav-links:hover:after,.nav-links.active:after{width:100%}@media(max-width:768px){.nav-container{flex-direction:column;gap:1rem}.nav-menu{flex-wrap:wrap;justify-content:center;gap:1.5rem}}