:root{--primary-color: #007bff;--secondary-color: #6c757d;--success-color: #28a745;--danger-color: #dc3545;--warning-color: #ffc107;--info-color: #17a2b8;--purple-color: #6f42c1;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--text-muted: #adb5bd;--border-color: #dee2e6;--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);--font-family: "Poppins", sans-serif;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--transition: all 0.3s ease;--transition-fast: all 0.15s ease;--transition-slow: all 0.5s ease;--border-radius: 0.375rem;--border-radius-lg: 0.5rem;--border-radius-xl: 1rem}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--text-primary: #ffffff;--text-secondary: #b0b0b0;--text-muted: #808080;--border-color: #404040;--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);--shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);transition:var(--transition);overflow-x:hidden}.preloader{position:fixed;inset:0;background:radial-gradient(1200px 800px at 50% 50%, rgba(0, 0, 0, 0.06), transparent),linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));display:grid;place-items:center;z-index:2000;transition:opacity .5s ease,visibility .5s ease}.preloader.hidden{opacity:0;visibility:hidden}.preloader-inner{text-align:center;width:min(92%,420px);position:relative}.preloader-orb{position:relative;width:160px;height:160px;margin:0 auto var(--spacing-xl)}.preloader-orb .ring{position:absolute;inset:0;border-radius:50%;filter:blur(0.2px);background:conic-gradient(from 0deg, transparent 0 40%, rgba(0, 123, 255, 0.9) 60%, transparent 100%);animation:orbSpin 1.8s linear infinite}.preloader-orb .ring-outer{box-shadow:0 0 24px rgba(0,123,255,.35),inset 0 0 24px rgba(0,123,255,.15)}.preloader-orb .ring-inner{inset:18px;opacity:.8;animation-duration:1.2s;filter:blur(1px)}@keyframes orbSpin{to{transform:rotate(360deg)}}.orbit{position:absolute;inset:0;animation:orbitSpin 6s linear infinite}.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 12px rgba(0,123,255,.8)}.d1{top:-5px;left:50%;transform:translateX(-50%)}.d2{bottom:-5px;left:10%}.d3{right:-5px;top:60%}@keyframes orbitSpin{to{transform:rotate(-360deg)}}.logo{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:var(--primary-color);text-shadow:0 0 12px rgba(0,123,255,.8),0 0 24px rgba(0,123,255,.4)}.preloader-text{position:relative;display:inline-block;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.preloader-text::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;background:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);-webkit-background-clip:text;color:rgba(0,0,0,0);animation:shine 1.4s infinite}@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.preloader-percent{font-weight:700;letter-spacing:.5px;color:var(--text-secondary)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.btn{display:inline-block;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:500;text-decoration:none;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition:left .5s}.btn:hover::before{left:100%}.btn-primary{background:linear-gradient(135deg, var(--primary-color), #0056b3);color:#fff;box-shadow:var(--shadow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:rgba(0,0,0,0);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-secondary:hover{background:var(--primary-color);color:#fff;transform:translateY(-2px)}.navbar{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);z-index:1000;transition:var(--transition)}[data-theme=dark] .navbar{background:rgba(26,26,26,.95)}.nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;justify-content:space-between;align-items:center;height:70px}.nav-logo .logo-text{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color);text-decoration:none}.nav-menu{display:flex;list-style:none;gap:var(--spacing-xl)}.nav-link{color:var(--text-primary);text-decoration:none;font-weight:500;transition:var(--transition);position:relative}.nav-link::after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--primary-color);transition:width .3s ease}.nav-link:hover::after,.nav-link.active::after{width:100%}.theme-controls{display:flex;align-items:center;gap:var(--spacing-md)}.theme-toggle{background:none;border:none;font-size:var(--font-size-lg);color:var(--text-primary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--border-radius);transition:var(--transition)}.theme-toggle:hover{background:var(--bg-secondary)}.color-picker{display:flex;gap:var(--spacing-xs)}.color-btn{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;transition:var(--transition);position:relative}.color-btn:hover{transform:scale(1.2)}.color-btn.active::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-weight:bold;font-size:12px}.hamburger{display:none;flex-direction:column;cursor:pointer}.bar{width:25px;height:3px;background:var(--text-primary);margin:3px 0;transition:var(--transition)}.hero{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);position:relative;overflow:hidden}.hero::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e9ecef" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:.3}.hero-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);position:relative;z-index:1}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center}.hero-title{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-lg);line-height:1.2}.greeting{display:block;color:var(--text-secondary);font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm)}.name{background:linear-gradient(135deg, var(--primary-color), #0056b3);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text;animation:gradientShift 3s ease-in-out infinite}@keyframes gradientShift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(30deg)}}.hero-subtitle{font-size:var(--font-size-xl);color:var(--primary-color);margin-bottom:var(--spacing-lg);font-weight:600}.hero-description{color:var(--text-secondary);margin-bottom:var(--spacing-2xl);line-height:1.8}.hero-buttons{display:flex;gap:var(--spacing-lg)}.profile-card{position:relative;display:flex;justify-content:center;align-items:center}.profile-image{width:300px;height:300px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-20px)}}.profile-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.floating-icons{position:absolute;width:100%;height:100%}.icon-item{position:absolute;width:50px;height:50px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);animation:floatIcon 4s ease-in-out infinite;animation-delay:var(--delay)}.icon-item:nth-child(1){top:10%;left:10%}.icon-item:nth-child(2){top:20%;right:10%}.icon-item:nth-child(3){bottom:20%;left:10%}.icon-item:nth-child(4){bottom:10%;right:20%}@keyframes floatIcon{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-15px) rotate(180deg)}}.scroll-indicator{position:absolute;bottom:var(--spacing-xl);left:50%;transform:translateX(-50%);animation:bounce 2s infinite}.scroll-arrow{width:30px;height:30px;border:2px solid var(--primary-color);border-top:none;border-left:none;transform:rotate(45deg)}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}.section-header{text-align:center;margin-bottom:var(--spacing-3xl)}.section-title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--spacing-md);color:var(--text-primary)}.section-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}.about{padding:var(--spacing-3xl) 0;background:var(--bg-secondary)}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center}.about-text h3{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.about-text p{color:var(--text-secondary);margin-bottom:var(--spacing-lg);line-height:1.8}.stats{display:flex;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.stat-item{text-align:center}.stat-number{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color)}.stat-label{color:var(--text-secondary);font-size:var(--font-size-base)}.image-container{position:relative;display:flex;justify-content:center}.image-container img{width:100%;max-width:400px;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg)}.experience-badge{position:absolute;bottom:-20px;right:20px;background:var(--primary-color);color:#fff;padding:var(--spacing-md);border-radius:var(--border-radius-lg);text-align:center;box-shadow:var(--shadow-lg)}.experience-badge .years{display:block;font-size:var(--font-size-2xl);font-weight:700}.experience-badge .text{font-size:var(--font-size-base)}.skills{padding:var(--spacing-3xl) 0;background:var(--bg-primary)}.skills-content{display:flex;flex-direction:column;gap:var(--spacing-3xl)}.skills-category h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xl);color:var(--text-primary);text-align:center}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:var(--spacing-lg)}.skill-item{background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow);transition:var(--transition);display:flex;align-items:center;gap:var(--spacing-lg)}.skill-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.skill-icon{width:60px;height:60px;background:var(--primary-color);border-radius:var(--border-radius-lg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-xl);flex-shrink:0}.skill-info{flex:1}.skill-info h4{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm);color:var(--text-primary)}.skill-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-bottom:var(--spacing-sm)}.skill-progress{height:100%;background:linear-gradient(90deg, var(--primary-color), #0056b3);border-radius:4px;transition:width 2s ease;position:relative}.skill-progress::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.skill-percentage{font-size:var(--font-size-base);color:var(--text-secondary);font-weight:500}.portfolio{padding:var(--spacing-3xl) 0;background:var(--bg-secondary)}.portfolio-filters{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-3xl);flex-wrap:wrap}.filter-btn{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid var(--primary-color);background:rgba(0,0,0,0);color:var(--primary-color);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);font-weight:500}.filter-btn.active,.filter-btn:hover{background:var(--primary-color);color:#fff}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:var(--spacing-xl)}.portfolio-item{background:var(--bg-primary);border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}.portfolio-item:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}.portfolio-image{position:relative;overflow:hidden}.portfolio-image img{width:100%;height:250px;transition:var(--transition)}.portfolio-item:hover .portfolio-image img{transform:scale(1.1)}.portfolio-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,123,255,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-info{text-align:center;color:#fff}.portfolio-info h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm)}.portfolio-info p{margin-bottom:var(--spacing-lg);opacity:.9}.portfolio-links{display:flex;gap:var(--spacing-md);justify-content:center}.portfolio-link{width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:var(--transition)}.portfolio-link:hover{background:#fff;color:var(--primary-color);transform:scale(1.1)}.contact{padding:var(--spacing-3xl) 0;background:var(--bg-primary)}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl)}.contact-item{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.contact-icon{width:60px;height:60px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);flex-shrink:0}.contact-details h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs);color:var(--text-primary)}.contact-details p{color:var(--text-secondary)}.social-links{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.social-link{width:50px;height:50px;background:var(--bg-secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-primary);text-decoration:none;transition:var(--transition);font-size:var(--font-size-lg)}.social-link:hover{background:var(--primary-color);color:#fff;transform:translateY(-3px)}.contact-message{display:flex;justify-content:center;align-items:center}.message-card{background:var(--bg-secondary);padding:var(--spacing-3xl);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg);text-align:center;max-width:500px;width:100%;position:relative;overflow:hidden}.message-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--primary-color), #0056b3)}.message-icon{width:80px;height:80px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-2xl);margin:0 auto var(--spacing-xl);box-shadow:var(--shadow)}.message-card h3{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.message-card p{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--spacing-2xl)}.contact-actions{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap}.contact-actions .btn{display:flex;align-items:center;gap:var(--spacing-sm);min-width:140px;justify-content:center}.footer{background:var(--bg-secondary);padding:var(--spacing-xl) 0;border-top:1px solid var(--border-color)}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-lg)}.footer-text p{color:var(--text-secondary)}.footer-links{display:flex;gap:var(--spacing-lg)}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:var(--transition)}.footer-links a:hover{color:var(--primary-color)}@media(max-width: 768px){.hamburger{display:flex}.nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background-color:var(--bg-primary);width:100%;text-align:center;transition:var(--transition);box-shadow:var(--shadow-lg);padding:var(--spacing-xl) 0}.nav-menu.active{left:0}.nav-menu li{margin:var(--spacing-md) 0}.theme-controls{display:none}.hero-content{grid-template-columns:1fr;text-align:center;gap:var(--spacing-2xl)}.hero-title{font-size:var(--font-size-3xl)}.hero-buttons{justify-content:center;flex-wrap:wrap}.about-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}.stats{justify-content:center}.skills-grid{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:1fr}.contact-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}.message-card{padding:var(--spacing-2xl)}.contact-actions{flex-direction:column;align-items:center}.contact-actions .btn{width:100%;max-width:200px}.footer-content{flex-direction:column;text-align:center}}@media(max-width: 480px){.container{padding:0 var(--spacing-sm)}.hero-title{font-size:var(--font-size-2xl)}.section-title{font-size:var(--font-size-2xl)}.profile-image{width:250px;height:250px}.stats{flex-direction:column;gap:var(--spacing-lg)}}.fade-in{opacity:0;transform:translateY(30px);transition:all .6s ease}.fade-in.visible{opacity:1;transform:translateY(0)}.slide-in-left{opacity:0;transform:translateX(-50px);transition:all .6s ease}.slide-in-left.visible{opacity:1;transform:translateX(0)}.slide-in-right{opacity:0;transform:translateX(50px);transition:all .6s ease}.slide-in-right.visible{opacity:1;transform:translateX(0)}.scale-in{opacity:0;transform:scale(0.8);transition:all .6s ease}.scale-in.visible{opacity:1;transform:scale(1)}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0056b3}#app{display:none}