*{box-sizing:border-box}:root{--primary:#366dd0;--highlight:#a5c8ff;--heading:#2e2e2e;--text:#414141;--shadow-color:#366dd013;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--text-xs:.875rem;--text-sm:.9375rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.25rem}html{scroll-behavior:smooth;scroll-padding-top:80px}body{background:linear-gradient(#fffcfe 0%,#edf4ff 30%,#d9e9ff 100%) 0 0/cover;margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.6}body:before{content:"";filter:blur(60px);z-index:-1;background:radial-gradient(circle,#fff6 0%,#0000 70%);width:600px;height:600px;position:fixed;top:-200px;left:50%;transform:translate(-50%)}.container{max-width:2040px;margin:auto;padding:36px 20px}h1,h2,h3{margin-bottom:var(--space-md);color:var(--heading);line-height:1.2}h2{margin-bottom:var(--space-lg)}p{margin-bottom:var(--space-md);color:var(--text)}.navbar{justify-content:center;padding:20px 0;display:flex}.nav-links{gap:60px;display:flex}.nav-links a{color:var(--text);font-size:var(--text-lg);padding:4px 0;font-weight:500;text-decoration:none;position:relative}.nav-links a:hover{color:var(--primary)}.nav-links a:after{content:"";background:linear-gradient(90deg, var(--primary) 0%, var(--highlight) 40%, var(--highlight) 60%, var(--primary) 100%);border-radius:999px;width:0%;height:2px;transition:width .3s;position:absolute;bottom:0;left:0}.nav-links a:hover:after{width:100%}.hero{padding-top:var(--space-lg);text-align:center;opacity:0;animation:.6s forwards fadeIn;transform:translateY(10px)}.avatar{width:96px;margin-bottom:var(--space-sm);border-radius:50%;box-shadow:0 4px 20px #366dd026}.hero h1{color:var(--heading);margin-bottom:var(--space-sm);font-size:2rem}.tagline{font-size:var(--text-lg);color:var(--text);margin-bottom:var(--space-lg)}.intro{font-size:var(--text-md);color:var(--text);max-width:520px;margin:0 auto var(--space-xl)}.hero-actions{justify-content:center;gap:var(--space-lg);display:flex}.btn{border-radius:8px;padding:10px 18px;font-weight:500;text-decoration:none;transition:all .2s}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px #366dd033}.btn.primary:hover{filter:brightness(.95);transform:translateY(-1px)}.btn.secondary{color:var(--text);background:#366dd00d;border:1px solid #366dd040}.btn.secondary:hover{background:#366dd026}main{max-width:720px;margin:0 auto;padding:20px}main>section{margin-top:48px}main>section:first-child{margin-top:0}.projects-grid{gap:var(--space-xl);margin-top:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.project-card{gap:var(--space-sm);padding:var(--space-lg);background:#fdfdfd;border:1px solid #366dd014;border-radius:12px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex}.project-card:hover{box-shadow:0 12px 32px var(--shadow-color);transform:translateY(-4px)}.project-card img{object-fit:cover;width:100%;height:220px;margin-bottom:var(--space-sm);border-radius:10px}.project-card h3{margin-bottom:var(--space-xs);font-size:var(--text-xl)}.project-card p{font-size:var(--text-sm)}.tech{margin:var(--space-sm) 0}.tech span{font-size:var(--text-xs);color:var(--primary);background:#366dd00d;border-radius:6px;margin:0 6px 6px 0;padding:4px 8px;font-weight:500;display:inline-block}.project-links{gap:var(--space-md);margin-top:auto;display:flex}.project-links a{color:var(--primary);font-size:var(--text-sm);padding:4px 0;font-weight:500;text-decoration:none;position:relative}.project-links a:after{content:"";background:linear-gradient(90deg, var(--primary) 0%, var(--highlight) 40%, var(--highlight) 60%, var(--primary) 100%);opacity:.8;border-radius:999px;width:0%;height:1.5px;transition:width .3s;position:absolute;bottom:3px;left:0}.project-links a:hover:after{width:100%}#contact{text-align:center}#contact a{text-underline-offset:3px;color:var(--text);-webkit-text-decoration:underline #366dd059;text-decoration:underline #366dd059;text-decoration-thickness:1px;transition:all .2s}footer{text-align:center;font-size:var(--text-sm);color:var(--text);margin-top:48px}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}@media (hover:hover){#contact a:hover{color:var(--primary);-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary)}}