:root{--primary-color: #00d4ff;--secondary-color: #ff6b6b;--accent-color: #4ecdc4;--dark-bg: #0a0a0a;--darker-bg: #000000;--light-text: #ffffff;--gray-text: #888888;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:var(--dark-bg);color:var(--light-text);overflow-x:hidden;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1}.navbar{position:fixed;top:0;width:100%;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;transition:all .3s ease}.navbar.scrolled{background:#000000f2;box-shadow:0 2px 20px #00d4ff1a}.navbar .nav-container{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;max-width:1200px;margin:0 auto}.navbar .nav-logo .logo-text{font-size:1.5rem;font-weight:700;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar .nav-menu{display:flex;list-style:none;gap:2rem}.navbar .nav-menu .nav-link{color:var(--light-text);text-decoration:none;transition:all .3s ease;position:relative}.navbar .nav-menu .nav-link:hover{color:var(--primary-color)}.navbar .nav-menu .nav-link:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary-color);transition:width .3s ease}.navbar .nav-menu .nav-link:hover:after{width:100%}.navbar .hamburger{display:none;flex-direction:column;cursor:pointer}.navbar .hamburger span{width:25px;height:3px;background:var(--light-text);margin:3px 0;transition:.3s}.hero{min-height:100vh;display:flex;align-items:center;padding:0 2rem;position:relative}.hero .hero-content{flex:1;max-width:600px}.hero .hero-content .hero-title{font-size:3.5rem;font-weight:700;margin-bottom:1rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-height:4rem}.hero .hero-content .hero-subtitle{font-size:1.2rem;color:var(--gray-text);margin-bottom:2rem}.hero .hero-content .hero-stats{display:flex;gap:2rem;margin-bottom:2rem}.hero .hero-content .hero-stats .stat-item{text-align:center}.hero .hero-content .hero-stats .stat-item .stat-number{display:block;font-size:2rem;font-weight:700;color:var(--primary-color)}.hero .hero-content .hero-stats .stat-item .stat-label{font-size:.9rem;color:var(--gray-text)}.hero .hero-content .hero-cta{display:flex;gap:1rem}.hero .hero-content .hero-cta .cta-button{padding:12px 30px;border:none;border-radius:50px;font-size:1rem;cursor:pointer;transition:all .3s ease}.hero .hero-content .hero-cta .cta-button.primary{background:var(--gradient-accent);color:#fff}.hero .hero-content .hero-cta .cta-button.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #00d4ff4d}.hero .hero-content .hero-cta .cta-button.secondary{background:transparent;color:var(--light-text);border:2px solid var(--primary-color)}.hero .hero-content .hero-cta .cta-button.secondary:hover{background:var(--primary-color);color:var(--dark-bg)}.hero .hero-visual{flex:1;height:500px}.hero .hero-visual #hero-canvas{width:100%;height:100%}.skills{padding:100px 0;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.skills .section-title{text-align:center;font-size:2.5rem;margin-bottom:3rem;background:var(--gradient-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.skills .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:3rem;margin-bottom:4rem}.skills .skills-grid .skill-category{background:#ffffff0d;padding:2rem;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.skills .skills-grid .skill-category h3{font-size:1.5rem;margin-bottom:1.5rem;color:var(--primary-color)}.skills .skills-grid .skill-category .skill-item{display:flex;align-items:center;margin-bottom:1.5rem;padding:.5rem;border-radius:8px;transition:all .3s ease}.skills .skills-grid .skill-category .skill-item:hover{background:#ffffff0d;transform:translate(5px)}.skills .skills-grid .skill-category .skill-item i{font-size:1.5rem;margin-right:1rem;width:30px;transition:transform .3s ease}.skills .skills-grid .skill-category .skill-item:hover i{transform:scale(1.1)}.skills .skills-grid .skill-category .skill-item .skill-name{flex:1;margin-right:1rem;font-weight:500}.skills .skills-grid .skill-category .skill-item .skill-bar{width:120px;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-right:.5rem;position:relative}.skills .skills-grid .skill-category .skill-item .skill-bar .skill-progress{height:100%;background:var(--skill-color, var(--gradient-accent));width:0;transition:width 2s ease;border-radius:4px;position:relative}.skills .skills-grid .skill-category .skill-item .skill-bar .skill-progress:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.skills .skills-grid .skill-category .skill-item .skill-percentage{font-size:.9rem;font-weight:700;color:var(--primary-color);min-width:40px;text-align:right}.skills .skills-3d{height:500px;margin-top:3rem}.skills .skills-3d #skills-canvas{width:100%;height:100%}.projects{padding:100px 0}.projects .project-categories .category-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.projects .project-categories .category-tabs .tab-btn{padding:10px 20px;background:transparent;color:var(--gray-text);border:2px solid rgba(255,255,255,.1);border-radius:25px;cursor:pointer;transition:all .3s ease}.projects .project-categories .category-tabs .tab-btn.active,.projects .project-categories .category-tabs .tab-btn:hover{color:var(--light-text);border-color:var(--primary-color);background:#00d4ff1a}.projects .project-categories .project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.projects .project-categories .project-grid .project-card{background:#ffffff0d;border-radius:15px;overflow:hidden;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.projects .project-categories .project-grid .project-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #0000004d}.projects .project-categories .project-grid .project-card .project-image{height:200px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff}.projects .project-categories .project-grid .project-card .project-info{padding:1.5rem}.projects .project-categories .project-grid .project-card .project-info h4{font-size:1.2rem;margin-bottom:.5rem;color:var(--primary-color)}.projects .project-categories .project-grid .project-card .project-info p{color:var(--gray-text);margin-bottom:1rem;font-size:.9rem}.projects .project-categories .project-grid .project-card .project-info .project-tech{display:flex;flex-wrap:wrap;gap:.5rem}.projects .project-categories .project-grid .project-card .project-info .project-tech .tech-tag{background:#00d4ff33;color:var(--primary-color);padding:4px 8px;border-radius:12px;font-size:.8rem}.competitions{padding:100px 0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a)}.competitions .awards-showcase{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.competitions .awards-showcase .award-stats #awards-chart{max-width:400px;max-height:400px}.competitions .awards-showcase .award-list .award-item{display:flex;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#ffffff0d;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.competitions .awards-showcase .award-list .award-item .award-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:1.5rem;font-size:1.5rem}.competitions .awards-showcase .award-list .award-item .award-icon.gold{background:linear-gradient(135deg,gold,#ffed4e);color:#000}.competitions .awards-showcase .award-list .award-item .award-icon.silver{background:linear-gradient(135deg,silver,#e8e8e8);color:#000}.competitions .awards-showcase .award-list .award-item .award-icon.bronze{background:linear-gradient(135deg,#cd7f32,#daa520);color:#000}.competitions .awards-showcase .award-list .award-item .award-info h4{font-size:1.1rem;margin-bottom:.5rem;color:var(--light-text)}.competitions .awards-showcase .award-list .award-item .award-info h5.award-project{font-size:.9rem;margin-bottom:.5rem;color:var(--accent-color);font-weight:500;opacity:.9}.competitions .awards-showcase .award-list .award-item .award-info p{color:var(--primary-color);margin-bottom:.5rem}.competitions .awards-showcase .award-list .award-item .award-info .award-tech{font-size:.8rem;color:var(--gray-text)}.timeline{padding:100px 0}.timeline .timeline-container{position:relative;max-width:800px;margin:0 auto}.timeline .timeline-container .timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--primary-color);transform:translate(-50%)}.timeline .timeline-container .timeline-item{display:flex;margin-bottom:3rem;position:relative}.timeline .timeline-container .timeline-item:nth-child(odd){flex-direction:row-reverse}.timeline .timeline-container .timeline-item:nth-child(odd) .timeline-content{margin-right:2rem;text-align:right}.timeline .timeline-container .timeline-item:nth-child(2n) .timeline-content{margin-left:2rem}.timeline .timeline-container .timeline-item .timeline-dot{width:20px;height:20px;background:var(--primary-color);border-radius:50%;position:absolute;left:50%;transform:translate(-50%);z-index:2;border:4px solid var(--dark-bg)}.timeline .timeline-container .timeline-item .timeline-content{flex:1;background:#ffffff0d;padding:1.5rem;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.timeline .timeline-container .timeline-item .timeline-content .timeline-date{color:var(--primary-color);font-weight:700;margin-bottom:.5rem}.timeline .timeline-container .timeline-item .timeline-content h4{margin-bottom:.5rem;color:var(--light-text)}.timeline .timeline-container .timeline-item .timeline-content p{color:var(--gray-text);font-size:.9rem}.timeline .timeline-container .timeline-item .timeline-content .timeline-status{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.8rem;margin-top:.5rem}.timeline .timeline-container .timeline-item .timeline-content .timeline-status.completed{background:#4caf5033;color:#4caf50}.timeline .timeline-container .timeline-item .timeline-content .timeline-status.ongoing{background:#ffc10733;color:#ffc107}.timeline .timeline-container .timeline-item .timeline-content .timeline-status.upcoming{background:#2196f333;color:#2196f3}.contact{padding:100px 0;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.contact .contact-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.contact .contact-content .contact-info .contact-item{display:flex;align-items:center;margin-bottom:1.5rem;font-size:1.1rem}.contact .contact-content .contact-info .contact-item i{font-size:1.5rem;margin-right:1rem;color:var(--primary-color);width:30px}.contact .contact-content .contact-qrcode{flex:1;display:flex;justify-content:center;align-items:center}.qrcode-container{text-align:center;padding:2rem;background:#ffffff0d;border-radius:20px;border:1px solid rgba(0,212,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.qrcode-container:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00d4ff4d;border-color:var(--primary-color)}.qrcode-image{width:250px;height:250px;border-radius:15px;border:3px solid rgba(0,212,255,.3);transition:all .3s ease}.qrcode-container:hover .qrcode-image{border-color:var(--primary-color);box-shadow:0 0 20px #00d4ff80}.qrcode-text{margin-top:1.5rem;font-size:1.1rem;color:var(--primary-color);font-weight:500}.contact .contact-content .contact-form form{display:flex;flex-direction:column;gap:1rem}.contact .contact-content .contact-form form input,.contact .contact-content .contact-form form textarea{padding:1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--light-text);font-size:1rem}.contact .contact-content .contact-form form input:focus,.contact .contact-content .contact-form form textarea:focus{outline:none;border-color:var(--primary-color)}.contact .contact-content .contact-form form input::placeholder,.contact .contact-content .contact-form form textarea::placeholder{color:var(--gray-text)}.contact .contact-content .contact-form form button{padding:1rem;background:var(--gradient-accent);border:none;border-radius:10px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.contact .contact-content .contact-form form button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #00d4ff4d}@media (max-width: 768px){.navbar .nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background-color:#000000f2;width:100%;text-align:center;transition:.3s;padding:2rem 0}.navbar .nav-menu.active{left:0}.navbar .hamburger{display:flex}.navbar .hamburger.active span:nth-child(2){opacity:0}.navbar .hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.navbar .hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.hero{flex-direction:column;text-align:center}.hero .hero-content .hero-title{font-size:2.5rem}.hero .hero-content .hero-stats{justify-content:center}.hero .hero-content .hero-cta{justify-content:center;flex-wrap:wrap}.skills .skills-grid,.competitions .awards-showcase,.contact .contact-content{grid-template-columns:1fr}.qrcode-image{width:200px;height:200px}.qrcode-container{padding:1.5rem}.timeline .timeline-container .timeline-line{left:20px}.timeline .timeline-container .timeline-item{flex-direction:row!important}.timeline .timeline-container .timeline-item .timeline-dot{left:20px}.timeline .timeline-container .timeline-item .timeline-content{margin-left:3rem!important;margin-right:0!important;text-align:left!important}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.pulse{animation:pulse 2s infinite}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--dark-bg)}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.section-loading{display:flex;justify-content:center;align-items:center;min-height:200px;padding:2rem}.loading-spinner{text-align:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner p{color:var(--text-secondary);font-size:.9rem;margin:0}.loading-error{text-align:center;padding:2rem}.loading-error p{color:#e74c3c;margin-bottom:1rem}.loading-error button{background:var(--primary-color);color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.loading-error button:hover{background:var(--primary-dark)}.section.loading{opacity:.7;pointer-events:none}.section.error{border-left:4px solid #e74c3c}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1rem;margin-bottom:.5rem;border-radius:4px}.skeleton-title{height:1.5rem;width:60%;margin-bottom:1rem;border-radius:4px}.skeleton-card{height:200px;border-radius:8px;margin-bottom:1rem}.lazy-section{contain:layout style paint}.preload-hint{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;z-index:1000;opacity:0;transform:translateY(20px);transition:all .3s ease}.preload-hint.show{opacity:1;transform:translateY(0)}.admin-portal-btn{position:fixed;top:50%;right:20px;transform:translateY(-50%);width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;text-decoration:none;box-shadow:0 4px 15px #667eea66;transition:all .3s ease;z-index:999;cursor:pointer}.admin-portal-btn:hover{transform:translateY(-50%) scale(1.1) rotate(90deg);box-shadow:0 6px 20px #667eea99;background:linear-gradient(135deg,#764ba2,#667eea)}.admin-portal-btn i{animation:rotate 3s linear infinite}.admin-portal-btn:hover i{animation-play-state:paused}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tech-tags{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0;justify-content:center}.tech-tag{padding:8px 20px;background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);border-radius:20px;color:var(--primary-color);font-size:14px;font-weight:500;transition:all .3s ease;animation:fadeInUp .6s ease forwards;animation-delay:var(--delay);opacity:0;cursor:pointer}.tech-tag:hover{background:#00d4ff33;border-color:var(--primary-color);transform:translateY(-3px);box-shadow:0 4px 12px #00d4ff4d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.code-showcase{margin:40px 0;max-width:600px}.code-window{background:#141414f2;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00000080;border:1px solid rgba(0,212,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.code-header{background:#282828cc;padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(0,212,255,.1)}.code-dot{width:12px;height:12px;border-radius:50%;display:inline-block}.code-dot.red{background:#ff5f56}.code-dot.yellow{background:#ffbd2e}.code-dot.green{background:#27c93f}.code-title{margin-left:auto;color:#888;font-size:12px;font-family:Courier New,monospace}.code-content{padding:20px;font-family:Courier New,monospace;font-size:14px;line-height:1.6;color:#e0e0e0;min-height:200px;max-height:300px;overflow-y:auto}.code-content pre{margin:0}.code-content code{color:#e0e0e0}.code-content .keyword{color:#c678dd}.code-content .function{color:#61afef}.code-content .string{color:#98c379}.code-content .comment{color:#5c6370;font-style:italic}.code-content .number{color:#d19a66}.code-content .operator{color:#56b6c2}#typing-code:after{content:"|";animation:blink 1s infinite;color:var(--primary-color)}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@media (max-width: 768px){.tech-tags{gap:8px}.tech-tag{padding:6px 16px;font-size:12px}.code-showcase{margin:30px 0}.code-content{font-size:12px;padding:15px;min-height:150px}.admin-portal-btn{width:45px;height:45px;font-size:18px;right:15px}}