:root{--color-primary-50:#f5f3ff;--color-primary-100:#ede9fe;--color-primary-200:#ddd6fe;--color-primary-300:#c4b5fd;--color-primary-400:#a78bfa;--color-primary-500:#8b5cf6;--color-primary-600:#7c3aed;--color-primary-700:#6d28d9;--color-primary-800:#5b21b6;--color-primary-900:#4c1d95;--color-secondary-50:#fdf2f8;--color-secondary-100:#fce7f3;--color-secondary-200:#fbcfe8;--color-secondary-300:#f9a8d4;--color-secondary-400:#f472b6;--color-secondary-500:#ec4899;--color-secondary-600:#db2777;--color-secondary-700:#be185d;--color-accent-50:#eff6ff;--color-accent-100:#dbeafe;--color-accent-200:#bfdbfe;--color-accent-300:#93c5fd;--color-accent-400:#60a5fa;--color-accent-500:#3b82f6;--color-accent-600:#2563eb;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;--font-heading:'Rubik',var(--font-sans);--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--transition-base:all 0.3s ease;--transition-slow:all 0.5s ease;--transition-bounce:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--bg-primary:#ffffff;--bg-secondary:var(--color-gray-50);--text-primary:var(--color-gray-900);--text-secondary:var(--color-gray-600);--border-color:var(--color-gray-200)}[data-theme=dark]{--bg-primary:var(--color-gray-900);--bg-secondary:var(--color-gray-800);--text-primary:var(--color-gray-50);--text-secondary:var(--color-gray-300);--border-color:var(--color-gray-700)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-primary);line-height:1.6;transition:var(--transition-base);overflow-x:hidden}a{color:inherit;text-decoration:none;transition:var(--transition-base)}ul{list-style:none}img{max-width:100%;height:auto}button{cursor:pointer;border:none;outline:0;background:0 0;font-family:inherit}input,textarea{font-family:inherit}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-6)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.3;transform:scale(1.1)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:var(--spacing-6) 0;transition:var(--transition-base)}.header.scrolled{background-color:rgba(255,255,255,.8);backdrop-filter:blur(10px);box-shadow:var(--shadow);padding:var(--spacing-3) 0}[data-theme=dark] .header.scrolled{background-color:rgba(31,41,55,.8)}.header-inner{display:flex;align-items:center;justify-content:space-between}.logo{font-family:var(--font-heading);font-weight:700;font-size:1.75rem;color:var(--color-primary-600)}.nav-desktop{display:none}.nav-list{display:flex;gap:var(--spacing-8)}.nav-link{font-weight:500;position:relative}.nav-link:hover{color:var(--color-primary-600)}.nav-link::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background-color:var(--color-primary-600);transition:width .3s ease}.nav-link:hover::after{width:100%}.menu-toggle{width:30px;height:24px;position:relative;display:flex;flex-direction:column;justify-content:space-between}.menu-toggle span{display:block;width:100%;height:2px;background-color:var(--text-primary);transition:var(--transition-base)}.menu-toggle.active span:first-child{transform:translateY(11px) rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}.nav-mobile{position:fixed;top:72px;left:0;width:100%;background-color:var(--bg-primary);box-shadow:var(--shadow-md);padding:var(--spacing-6);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition-base);z-index:99}.nav-mobile.active{transform:translateY(0);opacity:1;visibility:visible}.hero{min-height:100vh;display:flex;align-items:center;padding:var(--spacing-20) 0 var(--spacing-16);background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary));position:relative;overflow:hidden}.hero::before{--grid-color:var(--color-primary-300);content:'';position:absolute;inset:80px 0 0 0;background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-size:60px 60px;opacity:.5;pointer-events:none;z-index:0}[data-theme=dark] .hero::before{--grid-color:var(--color-primary-500);opacity:.2}@keyframes rectFloat{0%,100%{transform:translate(0,0) rotate(var(--rot,0deg))}33%{transform:translate(var(--dx1,8px),var(--dy1,-12px)) rotate(var(--rot,0deg))}66%{transform:translate(var(--dx2,-4px),var(--dy2,-20px)) rotate(var(--rot,0deg))}}.grid-rect{position:absolute;border:1px solid var(--color-primary-400);background:var(--color-primary-400);border-radius:12px;pointer-events:none;z-index:1;opacity:0;animation:rectFloat 20s ease-in-out infinite}.grid-rect-1{--rot:2deg;--dx1:12px;--dy1:-10px;--dx2:-6px;--dy2:-18px;width:280px;height:100px;top:8%;right:-3%;opacity:.08;animation-duration:22s;animation-delay:-2s}.grid-rect-2{--rot:-3deg;--dx1:-10px;--dy1:-15px;--dx2:8px;--dy2:-8px;width:140px;height:220px;bottom:12%;left:-2%;opacity:.06;animation-duration:26s;animation-delay:-5s}.grid-rect-3{--rot:1deg;--dx1:6px;--dy1:-8px;--dx2:-10px;--dy2:-14px;width:200px;height:140px;top:50%;right:5%;opacity:.05;animation-duration:18s;animation-delay:-9s}.grid-rect-4{--rot:-1deg;--dx1:-8px;--dy1:-18px;--dx2:14px;--dy2:-6px;width:340px;height:70px;top:75%;left:5%;opacity:.07;animation-duration:24s;animation-delay:-14s}[data-theme=dark] .grid-rect{opacity:.1;border-color:var(--color-primary-500);background:var(--color-primary-500)}[data-theme=dark] .grid-rect-1{opacity:.12}[data-theme=dark] .grid-rect-2{opacity:.09}[data-theme=dark] .grid-rect-3{opacity:.08}[data-theme=dark] .grid-rect-4{opacity:.1}@media (max-width:767px){.grid-rect{display:none}}.typewriter{visibility:hidden}.cursor{display:inline-block;margin-left:2px;color:var(--color-primary-600);font-weight:300;animation:cursorBlink .7s steps(1) infinite}@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}.hero-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-12);position:relative;z-index:2}.hero-text{text-align:center;max-width:600px}.subtitle{font-weight:600;color:var(--color-primary-600);margin-bottom:var(--spacing-4);font-size:1.125rem}.title{font-family:var(--font-heading);font-size:3rem;font-weight:700;margin-bottom:var(--spacing-4);line-height:1.2}.description{font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-6);color:var(--text-secondary)}.sub-description{font-size:1.125rem;margin-bottom:var(--spacing-8);color:var(--text-secondary)}.button-group{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:center;margin-bottom:var(--spacing-8)}.button{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);font-weight:500;border-radius:var(--radius-lg);transition:var(--transition-base);font-size:1rem}.button-primary{background-color:var(--color-primary-600);color:#fff}.button-primary:hover{background-color:var(--color-primary-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}.button-outline{border:2px solid var(--color-primary-600);color:var(--color-primary-600)}.button-outline:hover{background-color:var(--color-primary-50);transform:translateY(-2px)}[data-theme=dark] .button-outline:hover{background-color:var(--color-primary-900)}.social-links{display:flex;gap:var(--spacing-4)}.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--color-gray-100);color:var(--text-secondary);transition:var(--transition-bounce)}.social-link:hover{background-color:var(--color-primary-100);color:var(--color-primary-600);transform:translateY(-5px) rotate(8deg)}[data-theme=dark] .social-link{background-color:var(--color-gray-800)}[data-theme=dark] .social-link:hover{background-color:var(--color-primary-900)}.section{padding:var(--spacing-16) 0;position:relative}.section-header{text-align:center;margin-bottom:var(--spacing-12)}.section-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-4);color:var(--text-primary)}.section-line{width:80px;height:4px;background:linear-gradient(to right,var(--color-primary-500),var(--color-secondary-500));margin:0 auto;border-radius:var(--radius-full)}.about{background:linear-gradient(180deg,var(--bg-secondary),var(--bg-primary))}.about-content{display:flex;flex-direction:column;gap:var(--spacing-12);align-items:center}.about-image{flex-shrink:0;width:min(280px,100%)}.image-frame{position:relative;z-index:0;border-radius:var(--radius-2xl)}.image-frame::before{content:'';position:absolute;inset:-4px;border-radius:inherit;background:linear-gradient(135deg,var(--color-primary-400),var(--color-secondary-400),var(--color-primary-500));z-index:-1;opacity:.6;transition:opacity .3s ease}.about-image:hover .image-frame::before{opacity:1}.image-frame img{display:block;transition:transform .5s ease}.about-image:hover .image-frame img{transform:scale(1.06)}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (min-width:768px){.about-image,.hero-image{animation:gentleFloat 4s ease-in-out infinite}}.about-text{flex:1;max-width:600px}.about-text p{margin-bottom:var(--spacing-4);color:var(--text-secondary);font-size:1.125rem}.skill-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-top:var(--spacing-6)}.skill-tag{display:inline-block;padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-primary-50);color:var(--color-primary-600);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;transition:var(--transition-base)}.skill-tag:hover{background-color:var(--color-primary-600);color:#fff;transform:translateY(-5px)}[data-theme=dark] .skill-tag{background-color:var(--color-primary-900)}.cards-container{display:grid;grid-template-columns:1fr;gap:var(--spacing-8)}.card{background-color:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-8);box-shadow:var(--shadow-md);transition:var(--transition-base);display:flex;flex-direction:column;align-items:center;text-align:center}.card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl)}.card-icon{width:80px;height:80px;background-color:var(--color-primary-50);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-6);color:var(--color-primary-600);transition:var(--transition-base)}[data-theme=dark] .card-icon{background-color:var(--color-primary-900)}.card:hover .card-icon{background-color:var(--color-primary-600);color:#fff;transform:rotate(10deg) scale(1.1)}.card-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-4);color:var(--text-primary)}.card-description{margin-bottom:var(--spacing-6);color:var(--text-secondary)}.projects{background-color:var(--bg-secondary)}.projects-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-8)}.project-card{background-color:var(--bg-primary);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:transform .4s ease,box-shadow .4s ease;position:relative}.project-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary-500),var(--color-secondary-500),var(--color-primary-400));background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:2}.project-card:hover::before{transform:scaleX(1)}.project-card:hover{transform:translateY(-12px);box-shadow:0 20px 40px -8px rgba(124,58,237,.2)}[data-theme=dark] .project-card:hover{box-shadow:0 20px 40px -8px rgba(124,58,237,.15)}.project-image{position:relative;overflow:hidden;height:240px}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.project-card:hover .project-image img{transform:scale(1.15)}.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(124,58,237,.95),rgba(236,72,153,.8));display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}.project-card:hover .project-overlay{opacity:1;transform:translateY(0)}.project-links{display:flex;gap:var(--spacing-4);transform:translateY(10px);transition:transform .3s ease 80ms}.project-card:hover .project-links{transform:translateY(0)}.project-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background-color:rgba(255,255,255,.2);backdrop-filter:blur(4px);border-radius:50%;color:#fff;transition:transform .3s ease,background-color .3s ease}.project-link:hover{background-color:#fff;color:var(--color-primary-600);transform:translateY(-5px) scale(1.1)}.project-content{padding:var(--spacing-6);transition:background-color .3s ease}.project-card:hover .project-content{background:linear-gradient(to bottom,transparent,var(--color-primary-50))}[data-theme=dark] .project-card:hover .project-content{background:linear-gradient(to bottom,transparent,var(--color-primary-950,#1e1b4b))}.project-title{font-size:1.25rem;font-weight:700;margin-bottom:var(--spacing-2);color:var(--text-primary);transition:color .3s ease}.project-card:hover .project-title{color:var(--color-primary-700)}[data-theme=dark] .project-card:hover .project-title{color:var(--color-primary-400)}.project-description{color:var(--text-secondary);margin-bottom:var(--spacing-4)}.project-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.project-tag{display:inline-block;padding:.25rem .75rem;background-color:var(--color-gray-100);color:var(--text-secondary);border-radius:var(--radius-full);font-size:.8rem;font-weight:500;transition:background-color .3s ease,color .3s ease}.project-card:hover .project-tag{background-color:var(--color-primary-100);color:var(--color-primary-700)}[data-theme=dark] .project-tag{background-color:var(--color-gray-800)}[data-theme=dark] .project-card:hover .project-tag{background-color:var(--color-primary-900);color:var(--color-primary-300)}.contact{background-color:var(--bg-primary);position:relative}.contact-content{display:flex;flex-direction:column;gap:var(--spacing-12);align-items:flex-start}.contact-info h3{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-4);color:var(--text-primary)}.contact-info p{margin-bottom:var(--spacing-6);color:var(--text-secondary)}.contact-item{display:flex;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-4);color:var(--text-secondary)}.contact-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--color-primary-50);border-radius:50%;color:var(--color-primary-600)}[data-theme=dark] .contact-icon{background-color:var(--color-primary-900)}.contact-form{flex:1;width:100%;max-width:500px}.form-group{margin-bottom:var(--spacing-6)}.form-group label{display:block;margin-bottom:var(--spacing-2);font-weight:500;color:var(--text-primary)}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-3) var(--spacing-4);border:1px solid var(--border-color);border-radius:var(--radius-lg);background-color:var(--bg-primary);color:var(--text-primary);transition:var(--transition-base)}.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary-600);outline:0;box-shadow:0 0 0 3px var(--color-primary-100)}[data-theme=dark] .form-group input:focus,[data-theme=dark] .form-group textarea:focus{box-shadow:0 0 0 3px var(--color-primary-900)}.footer{background-color:var(--color-gray-900);color:#fff;padding:var(--spacing-12) 0;position:relative;overflow:hidden}.footer-top{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-6);margin-bottom:var(--spacing-8);text-align:center}.footer-logo{font-family:var(--font-heading);font-weight:700;font-size:2rem;color:var(--color-primary-400)}.footer-social{display:flex;gap:var(--spacing-4)}.footer-social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.1);color:#fff;transition:var(--transition-bounce)}.footer-social-link:hover{background-color:var(--color-primary-500);transform:translateY(-5px)}.footer-bottom{text-align:center;padding-top:var(--spacing-8);border-top:1px solid rgba(255,255,255,.1)}.footer-text{margin-bottom:var(--spacing-4);font-size:1.125rem}.footer-copyright{color:var(--color-gray-400);font-size:.875rem}@media (min-width:768px){.nav-desktop{display:block}.menu-toggle{display:none}.about-content{flex-direction:row;align-items:flex-start;gap:var(--spacing-16)}.about-image{width:280px}.hero-content{flex-direction:row;text-align:left}.hero-text{text-align:left}.button-group{justify-content:flex-start}.cards-container{grid-template-columns:repeat(3,1fr)}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.contact-content{flex-direction:row}}@media (min-width:1024px){.projects-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:767px){.title{font-size:2.5rem}.description{font-size:1.25rem}.section-title{font-size:2rem}}.hero-image{position:relative;flex-shrink:0;width:100%;max-width:400px;z-index:0}.image-glow{position:absolute;inset:-8px;border-radius:calc(var(--radius-2xl) + 4px);background:linear-gradient(135deg,var(--color-primary-400),var(--color-secondary-400),var(--color-primary-500));z-index:0;opacity:.5;transition:opacity .3s ease}.hero-image:hover .image-glow{opacity:1}.image-container{position:relative;z-index:1;border-radius:var(--radius-2xl);overflow:hidden;aspect-ratio:1;background-color:var(--bg-secondary)}.image-container img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.hero-image:hover .image-container img{transform:scale(1.06)}.image-badge{position:absolute;bottom:-5px;right:-5px;width:35px;height:35px;background:linear-gradient(135deg,var(--color-primary-500),var(--color-secondary-500));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-md);transition:var(--transition-bounce);z-index:10}.image-badge svg{width:16px;height:16px}.image-badge:hover{transform:rotate(15deg) scale(1.1)}[data-theme=dark] .image-badge{border:2px solid var(--color-gray-800)}