:root{--bg-primary:#121212;--bg-secondary:#1a1a1a;--text-primary:#fff;--text-secondary:rgba(255,255,255,.7);--accent:#6b17e8;--spacing-xs:8px;--spacing-sm:16px;--spacing-md:24px;--spacing-lg:32px;--spacing-xl:48px;--transition:300ms ease-in-out;--container-max:1200px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;font-size:16px}h1,h2,h3{line-height:1.2;margin-bottom:var(--spacing-md)}h1{font-size:32px}h2{font-size:28px}h3{font-size:20px}.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing-md)}header{position:fixed;top:0;left:0;right:0;background-color:var(--bg-secondary);z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.3)}.nav-container{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);max-width:var(--container-max);margin:0 auto}.logo a{color:var(--text-primary);text-decoration:none;font-size:24px;font-weight:bold}.nav-links{display:none;list-style:none}.nav-links.active{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background-color:var(--bg-secondary);padding:var(--spacing-md)}.nav-links a{color:var(--text-primary);text-decoration:none;padding:var(--spacing-xs);transition:color var(--transition)}.nav-links a:hover{color:var(--accent)}.menu-toggle{display:block;background:none;border:none;cursor:pointer;padding:var(--spacing-xs)}.menu-toggle span{display:block;width:25px;height:2px;background-color:var(--text-primary);margin:5px 0;transition:var(--transition)}.menu-toggle.active span:nth-child(1) {transform:rotate(45deg) translate(5px,5px)}.menu-toggle.active span:nth-child(2) {opacity:0}.menu-toggle.active span:nth-child(3) {transform:rotate(-45deg) translate(7px,-7px)}.hero{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-xl) var(--spacing-md);background:linear-gradient(45deg,var(--bg-primary),var(--bg-secondary))}.hero-content{max-width:800px}.hero h1{font-size:2.5rem;margin-bottom:var(--spacing-md)}.hero p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.cta-button{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--accent);color:var(--text-primary);text-decoration:none;border-radius:4px;transition:transform var(--transition)}.cta-button:hover{transform:translateY(-2px)}.projects{padding:var(--spacing-xl) var(--spacing-md)}.projects h2{text-align:center;margin-bottom:var(--spacing-xl)}.project-grid{display:grid;gap:var(--spacing-md);max-width:var(--container-max);margin:0 auto}.project-card{background-color:var(--bg-secondary);border-radius:8px;overflow:hidden;transition:transform var(--transition)}.project-card:hover{transform:translateY(-5px)}.project-image{position:relative;padding-top:75%}.project-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.project-info{padding:var(--spacing-md)}.contact{padding:var(--spacing-xl) var(--spacing-md);background-color:var(--bg-secondary)}.contact h2{text-align:center;margin-bottom:var(--spacing-xl)}.contact-form{max-width:600px;margin:0 auto}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs)}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-sm);background-color:var(--bg-primary);border:1px solid var(--text-secondary);border-radius:4px;color:var(--text-primary)}.form-group textarea{min-height:150px;resize:vertical}.submit-button{width:100%;padding:var(--spacing-sm);background-color:var(--accent);color:var(--text-primary);border:none;border-radius:4px;cursor:pointer;transition:background-color var(--transition)}.submit-button:hover{background-color:#5612c0}footer{background-color:var(--bg-secondary);padding:var(--spacing-lg) var(--spacing-md);text-align:center}@media (min-width:768px){.menu-toggle{display:none}.nav-links{display:flex;gap:var(--spacing-md)}.project-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.project-grid{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:3.5rem}}