: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-radius:16px;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-carousel{position:relative}.skills-carousel-wrapper{overflow:hidden;width:100%;max-width:1072px}.skills-track{display:flex;gap:24px;width:max-content}.skill-card{width:250px;flex-shrink:0}@media(max-width:768px){.skills-carousel-wrapper{max-width:384px}.skill-card{width:180px}.carousel-controls{gap:16px;margin-top:24px}.carousel-btn{width:36px;height:36px}.carousel-btn svg{width:18px;height:18px}.dot{width:6px;height:6px}.dot.active{width:18px}}.projects-carousel{position:relative}.projects-carousel-wrapper{overflow:hidden;width:100%;max-width:1192px;margin:0 auto}.projects-track{display:flex;gap:24px;width:max-content}.project-card{width:280px;flex-shrink:0;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:8px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;position:relative}.project-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:.8}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease,opacity .3s ease;position:absolute;top:0;left:0}.project-image img.loading{opacity:0}.project-image img.loaded{opacity:1}.project-card:hover .project-image img.loaded{transform:scale(1.05)}.loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.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}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:32px}.carousel-dots{display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;transition:all .3s ease}.dot:hover{background:var(--text-muted)}.dot.active{width:24px;border-radius:4px;background:var(--primary)}.carousel-btn{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all .3s ease}.carousel-btn:hover{background:var(--border);color:var(--text-main);border-color:var(--primary)}.carousel-btn.prev svg{transform:rotate(180deg)}@media(max-width:768px){.projects-carousel-wrapper{max-width:584px}.project-card{width:280px}.project-image{height:160px}.carousel-controls{gap:16px;margin-top:24px}.carousel-btn{width:36px;height:36px}.carousel-btn svg{width:18px;height:18px}.dot{width:6px;height:6px}.dot.active{width:18px}}.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 1fr;gap:60px;align-items:start}.contact-info h3{font-size:24px;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:32px}.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}.contact-form{background:var(--bg-card);padding:32px;border-radius:12px;border:1px solid var(--border)}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-main);font-size:14px}.form-group input,.form-group textarea{width:100%;padding:12px 16px;background:var(--bg-main);border:1px solid var(--border);border-radius:8px;color:var(--text-main);font-size:15px;font-family:inherit;transition:border-color .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#a855f7}.form-group textarea{resize:vertical;min-height:120px}.submit-btn{width:100%;margin-top:8px}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.status-message{margin-top:16px;padding:12px;border-radius:8px;text-align:center;font-size:14px}.status-message.success{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.status-message.error{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}@media(max-width:768px){.contact-wrapper{grid-template-columns:1fr;gap:40px}.contact-form{padding:24px}}