*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;overflow-x:hidden}.gradient-bg{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.container{max-width:1200px;margin:0 auto;padding:0 20px;overflow-y:hidden}header{position:fixed;top:0;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;padding:1rem 0;box-shadow:0 2px 20px #0000001a;transition:all .3s ease}nav{display:flex;justify-content:space-between;align-items:center}.logo{width:80px;font-weight:700;color:#667eea;display:flex;align-items:center;gap:.5rem}.nav-links{display:flex;list-style:none;gap:2rem}.nav-links a{text-decoration:none;color:#333;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:#667eea}.contact-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.8rem 1.5rem;border:none;border-radius:25px;text-decoration:none;font-weight:600;transition:transform .3s ease,box-shadow .3s ease}.contact-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.hero{padding:183px 0 80px;text-align:center;overflow:hidden;height:600px}.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="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.3}.hero-content{position:relative;z-index:1;height:400px}.hero h1{font-size:3.5rem;margin-bottom:1rem;background:linear-gradient(135deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.3rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.services{padding:80px 0;background:#f8f9fa}.section-title{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#333}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}.service-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 10px 30px #0000001a;transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(102,126,234,.1)}.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px #00000026}.service-icon{font-size:3rem;color:#667eea;margin-bottom:1rem}.service-card h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.service-list{list-style:none;margin-top:1rem}.service-list li{color:#666;position:relative;padding:.3rem 0 .3rem 1.5rem}.service-list li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}.about{padding:80px 0;background:#fff}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.about-text h2{font-size:2.5rem;margin-bottom:1.5rem;color:#333}.about-text p{font-size:1.1rem;line-height:1.8;color:#666;margin-bottom:1.5rem}.about-image{position:relative;border-radius:15px;overflow:hidden}.about-image img{width:100%;height:400px;object-fit:contain}.technologies{padding:80px 0;background:#f8f9fa}.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:2rem;margin-top:3rem}.tech-item{text-align:center;padding:2rem;background:#fff;border-radius:15px;box-shadow:0 5px 20px #0000001a;transition:transform .3s ease}.tech-item:hover{transform:translateY(-5px)}.tech-icon{font-size:4rem;margin-bottom:1rem}.vue-icon{color:#4fc08d}.react-icon{color:#61dafb}.js-icon{color:#f7df1e}.html-icon{color:#e34f26}.css-icon{color:#1572b6}.node-icon{color:#393}.projects{padding:80px 0;background:#fff}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.project-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #0000001a;transition:transform .3s ease}.project-card:hover{transform:translateY(-10px)}.project-image{width:100%;height:200px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem}.project-content{padding:1.5rem}.project-content h3{font-size:1.3rem;margin-bottom:.5rem;color:#333}.project-content p{color:#666;margin-bottom:1rem}.project-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border:none;border-radius:25px;text-decoration:none;font-size:.9rem;transition:transform .3s ease}.project-btn:hover{transform:translateY(-2px)}.contact{padding:80px 0;text-align:center;position:relative}.contact-content{position:relative;z-index:1}.contact h2{font-size:2.5rem;margin-bottom:1rem;color:#fff}.contact p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.contact-form{max-width:600px;margin:0 auto;display:grid;gap:1rem}.form-group{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.contact-form input,.contact-form textarea{padding:1rem;border:none;border-radius:10px;font-size:1rem;background:#ffffff1a;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#ffffffb3}.contact-form textarea{grid-column:1 / -1;min-height:120px;resize:vertical}.submit-btn{background:#fff3;color:#fff;padding:1rem 2rem;border:2px solid rgba(255,255,255,.3);border-radius:25px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.submit-btn:hover{background:#ffffff4d;transform:translateY(-2px)}@media (max-width: 768px){.nav-links{display:none}.hero h1{font-size:2.5rem}.about-content{grid-template-columns:1fr;text-align:center}.form-group,.services-grid{grid-template-columns:1fr}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeInUp .6s ease-out}.particle{position:absolute;background:#ffffff1a;border-radius:50%;pointer-events:none;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.vue-devtools__anchor--glowing{display:none!important}.pr-img{width:365px;height:200px}.footer-icon{color:#fff;font-size:40px;margin:15px}.footer-icon:hover{color:#dadada}.container-nav{max-width:1200px;margin:auto}@media only screen and (max-width: 767px){.container-nav{max-width:360px;margin:0}header{width:100%}}