:root{--bg-main: #0B0F14;--bg-card: #121826;--border: #1F2937;--text-main: #E5E7EB;--text-muted: #9CA3AF;--primary: #4F46E5;--accent: #22D3EE}html{scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:var(--bg-main);color:var(--text-main);font-family:Inter,system-ui,sans-serif}.container{max-width:1100px;margin:auto;padding:48px 20px}.section-title{font-size:30px;margin-bottom:24px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px}.muted{color:var(--text-muted)}.btn{background:var(--primary);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:500}.skill-tag{background:#1f2937;padding:6px 10px;border-radius:999px;font-size:12px;margin:4px;display:inline-block}.animate{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.animate-in{opacity:1;transform:translateY(0)}.animate-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out}.animate-in.animate-stagger>*{opacity:1;transform:translateY(0)}.animate-stagger>*:nth-child(1){transition-delay:.1s}.animate-stagger>*:nth-child(2){transition-delay:.2s}.animate-stagger>*:nth-child(3){transition-delay:.3s}.animate-stagger>*:nth-child(4){transition-delay:.4s}.animate-stagger>*:nth-child(5){transition-delay:.5s}.navbar{position:sticky;top:0;z-index:100;background:var(--bg-main);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;justify-content:center;align-items:center;position:relative}.nav-center{display:flex;gap:24px}.nav-center a{color:var(--text-muted);text-decoration:none;font-size:14px;transition:color .2s}.nav-center a:hover{color:var(--text-main)}.nav-right{position:absolute;right:20px;display:flex;gap:12px}.nav-right a{color:var(--text-muted);display:flex;align-items:center;transition:color .2s}.nav-right a:hover{color:var(--text-main)}@media(max-width:768px){.navbar{padding:12px 16px}.nav-center{gap:16px}.nav-center a{font-size:13px}.nav-right{right:16px;gap:10px}}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}.hero h1{font-size:44px}.hero p{max-width:520px;line-height:1.6;margin:20px 0}.resume-btn{margin-top:24px}.hero-code{background:var(--bg-card);padding:24px;border-radius:14px;border:1px solid var(--border);color:var(--accent);font-family:JetBrains Mono,Courier New,monospace;font-size:13px;line-height:1.8;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003,0 0 0 1px #4f46e51a;transition:box-shadow .3s ease,transform .3s ease}.hero-code:hover{box-shadow:0 10px 15px -3px #0006,0 4px 6px -2px #0000004d,0 0 0 1px #4f46e533;transform:translateY(-2px)}@media(max-width:768px){.hero{grid-template-columns:1fr;gap:24px}.hero h1{font-size:28px}.hero h2{font-size:18px}.hero p{font-size:14px}.hero-code{padding:16px;font-size:11px}}.about-section{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:32px;margin-bottom:40px}.about-content p{font-size:16px;line-height:1.8;margin-bottom:16px}.about-social{margin-top:40px}.about-social h3{font-size:18px;margin-bottom:24px;color:var(--text-main)}.social-links{display:flex;gap:16px;align-items:center;flex-direction:row}.social-card{display:flex;align-items:center;justify-content:center;color:var(--text-muted);text-decoration:none;transition:color .3s ease,transform .3s ease}.social-card:hover{color:var(--primary);transform:translateY(-2px)}.social-card svg{width:24px;height:24px}@media(max-width:768px){.about-section{padding:24px;margin-left:20px;margin-right:20px}.about-content p{font-size:14px}.social-links{gap:20px}}.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}.skill-card{width:100%}.skills-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}@media(max-width:768px){.skills-grid{grid-template-columns:repeat(2,1fr)}}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}.project-card{cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}.project-card.not-clickable{cursor:default}.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.project-image{width:100%;height:180px;overflow:hidden;border-radius:14px;margin-bottom:16px}.project-image img{width:100%;height:100%;object-fit:cover}.project-content h3,.project-content .muted{margin-bottom:8px}.project-metrics{color:var(--accent);font-size:14px;margin-bottom:12px}.project-stack{margin-top:12px}@media(max-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.projects-grid{grid-template-columns:1fr}.project-image{height:160px}}.experience-timeline{position:relative;padding-left:40px}.experience-timeline:before{content:"";position:absolute;left:11px;top:20px;bottom:20px;width:2px;background:linear-gradient(to bottom,#6366f1,#a855f7,#ec4899)}.experience-item{position:relative;margin-bottom:40px}.timeline-dot{position:absolute;left:-33px;top:24px;width:12px;height:12px;background:linear-gradient(135deg,#6366f1,#a855f7);border:3px solid var(--bg-main);border-radius:50%;box-shadow:0 0 0 4px var(--bg-card),0 0 20px #a855f766;z-index:1}.experience-card{margin-bottom:0;transition:transform .3s ease,box-shadow .3s ease;border-left:3px solid transparent}.experience-card:hover{transform:translate(4px);border-left-color:#a855f7;box-shadow:0 8px 24px #a855f733}.experience-header{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}.experience-header h3{font-size:20px;margin-bottom:8px;color:var(--text-main)}.company-name{font-size:16px;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600;margin-bottom:8px}.period{font-size:14px}.experience-points{list-style:none;padding:0;margin:0}.experience-points li{color:var(--text-muted);margin-bottom:14px;display:flex;gap:12px;align-items:flex-start;line-height:1.6}.experience-points li svg{color:#a855f7;margin-top:4px;flex-shrink:0}@media(max-width:768px){.experience-timeline{padding-left:30px}.experience-timeline:before{left:9px}.timeline-dot{left:-25px;width:10px;height:10px}.experience-header h3{font-size:18px}.company-name,.experience-points li{font-size:14px}}.contact-wrapper{display:grid;grid-template-columns:1fr;gap:60px;align-items:start;margin-top:32px}.contact-info{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:32px}.contact-info h3{font-size:22px;margin-bottom:16px;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.contact-info p{line-height:1.6;margin-bottom:28px}.contact-details{display:flex;flex-direction:column;gap:16px}.contact-item{display:flex;align-items:center;gap:12px;color:var(--text-muted)}.contact-item svg{color:#a855f7;flex-shrink:0}@media(max-width:768px){.contact-wrapper{grid-template-columns:1fr;gap:32px}}