@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;min-height:100vh}.tech-background{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#16213e,#0f3460,#533483);min-height:100vh;width:100%}.tech-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.2) 0%,transparent 50%);animation:backgroundShift 20s ease-in-out infinite;z-index:-2}.tech-background:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="techGrid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(120,119,198,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23techGrid)"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="30" cy="30" r="1" fill="rgba(120,219,255,0.3)"/><circle cx="170" cy="70" r="1.5" fill="rgba(255,119,198,0.3)"/><circle cx="100" cy="130" r="1" fill="rgba(120,119,198,0.3)"/><circle cx="180" cy="180" r="1.5" fill="rgba(120,219,255,0.3)"/><circle cx="50" cy="150" r="1" fill="rgba(255,119,198,0.3)"/><circle cx="150" cy="40" r="1.5" fill="rgba(120,119,198,0.3)"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M50,50 L150,50 L150,100 L200,100 L200,150 L250,150" stroke="rgba(120,119,198,0.2)" stroke-width="1" fill="none"/><path d="M100,200 L200,200 L200,250 L250,250" stroke="rgba(255,119,198,0.2)" stroke-width="1" fill="none"/><circle cx="50" cy="50" r="3" fill="rgba(120,219,255,0.4)"/><circle cx="250" cy="150" r="3" fill="rgba(255,119,198,0.4)"/><circle cx="250" cy="250" r="3" fill="rgba(120,119,198,0.4)"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><text x="20" y="30" font-family="monospace" font-size="8" fill="rgba(120,219,255,0.1)">10101010</text><text x="20" y="50" font-family="monospace" font-size="8" fill="rgba(255,119,198,0.1)">11001100</text><text x="20" y="70" font-family="monospace" font-size="8" fill="rgba(120,119,198,0.1)">10101010</text><text x="20" y="90" font-family="monospace" font-size="8" fill="rgba(120,219,255,0.1)">11001100</text><text x="20" y="110" font-family="monospace" font-size="8" fill="rgba(255,119,198,0.1)">10101010</text><text x="20" y="130" font-family="monospace" font-size="8" fill="rgba(120,119,198,0.1)">11001100</text></svg>');background-size:50px 50px,200px 200px,300px 300px,400px 400px;background-position:0 0,0 0,0 0,0 0;animation:techFloat 25s ease-in-out infinite;z-index:-1}@keyframes backgroundShift{0%,to{opacity:.7;transform:scale(1) rotate(0)}25%{opacity:.8;transform:scale(1.05) rotate(1deg)}50%{opacity:.9;transform:scale(1.1) rotate(-1deg)}75%{opacity:.8;transform:scale(1.05) rotate(.5deg)}}@keyframes techFloat{0%,to{transform:translateY(0) rotate(0) scale(1);opacity:.3}25%{transform:translateY(-15px) rotate(2deg) scale(1.02);opacity:.4}50%{transform:translateY(-10px) rotate(-1deg) scale(1.05);opacity:.5}75%{transform:translateY(-20px) rotate(1deg) scale(1.03);opacity:.4}}.tech-particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}.particle{position:absolute;width:4px;height:4px;background:#78dbff99;border-radius:50%;animation:particleFloat 15s linear infinite}.particle:nth-child(1){top:10%;left:10%;animation-delay:0s;background:#78dbffcc}.particle:nth-child(2){top:20%;right:15%;animation-delay:3s;background:#ff77c6cc}.particle:nth-child(3){bottom:30%;left:20%;animation-delay:6s;background:#7877c6cc}.particle:nth-child(4){bottom:20%;right:10%;animation-delay:9s;background:#78dbffcc}.particle:nth-child(5){top:50%;left:5%;animation-delay:12s;background:#ff77c6cc}.particle:nth-child(6){top:60%;right:5%;animation-delay:15s;background:#7877c6cc}@keyframes particleFloat{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}50%{transform:translateY(-30px) scale(1.2);opacity:.8}90%{opacity:1}to{transform:translateY(-60px) scale(.8);opacity:0}}.tech-element{position:absolute;opacity:.2;animation:techMove 20s linear infinite}.tech-element:nth-child(1){top:15%;left:15%;animation-delay:0s}.tech-element:nth-child(2){top:25%;right:20%;animation-delay:5s}.tech-element:nth-child(3){bottom:35%;left:25%;animation-delay:10s}.tech-element:nth-child(4){bottom:25%;right:15%;animation-delay:15s}@keyframes techMove{0%{transform:translateY(0) scale(1) rotate(0);opacity:.2}25%{transform:translateY(-25px) scale(1.1) rotate(5deg);opacity:.3}50%{transform:translateY(-15px) scale(1.2) rotate(-3deg);opacity:.4}75%{transform:translateY(-35px) scale(1.1) rotate(2deg);opacity:.3}to{transform:translateY(0) scale(1) rotate(0);opacity:.2}}.tech-icon{width:50px;height:50px;fill:#78dbff99;filter:drop-shadow(0 0 10px rgba(120,219,255,.3))}.tech-icon:nth-child(2){fill:#ff77c699;filter:drop-shadow(0 0 10px rgba(255,119,198,.3))}.tech-icon:nth-child(3){fill:#7877c699;filter:drop-shadow(0 0 10px rgba(120,119,198,.3))}.tech-icon:nth-child(4){fill:#78dbff99;filter:drop-shadow(0 0 10px rgba(120,219,255,.3))}.hero-text{animation:fadeInUp 1.5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.floating-image-container{position:relative;width:100%;max-width:375px;height:428px;display:flex;align-items:center;justify-content:center}.floating-image{width:100%;height:100%;border-radius:30px;box-shadow:0 20px 40px #3b82f64d,0 0 60px #8b5cf633,0 0 100px #ec48991a;animation:floatingImage 6s ease-in-out infinite;position:relative;overflow:hidden;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}.floating-image:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);animation:shimmer 3s ease-in-out infinite;pointer-events:none}@keyframes floatingImage{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(1deg)}50%{transform:translateY(-25px) rotate(0)}75%{transform:translateY(-10px) rotate(-1deg)}}@keyframes shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.glow-button{position:relative;overflow:hidden}.glow-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.glow-button:hover:before{left:100%}@media (max-width: 1024px){.floating-image-container{max-width:300px;height:342px}}@media (max-width: 768px){.tech-background:after{background-size:30px 30px,150px 150px,200px 200px,300px 300px}.tech-element,.particle{display:none}.floating-image-container{max-width:257px;height:300px;margin-top:2rem}.floating-image{animation:floatingImage 4s ease-in-out infinite;border-radius:24px}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.dynamic-bg-button{position:relative;background:linear-gradient(45deg,#667eea,#764ba2);border:none;cursor:pointer;overflow:hidden}.dynamic-bg-animation{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:dynamicShine 3s ease-in-out infinite}.dynamic-bg-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#667eea,#764ba2,#f093fb,#f5576c,#4facfe);background-size:400% 400%;animation:dynamicGradient 4s ease infinite;z-index:-1}.dynamic-bg-button:hover:before{animation:dynamicGradient 2s ease infinite}.dynamic-bg-button:hover .dynamic-bg-animation{animation:dynamicShine 1.5s ease-in-out infinite}@keyframes dynamicGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes dynamicShine{0%{left:-100%}50%{left:100%}to{left:100%}}.contact-dynamic-button{position:relative;background:linear-gradient(45deg,#ff6b6b,#ee5a24);border:none;cursor:pointer;overflow:hidden}.contact-bg-animation{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:contactShine 2.5s ease-in-out infinite}.contact-pulse-effect{position:absolute;top:50%;left:50%;width:0;height:0;background:#fff6;border-radius:50%;transform:translate(-50%,-50%);animation:contactPulse 3s ease-out infinite}.contact-dynamic-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ff6b6b,#ee5a24,#ff9ff3,#feca57,#48dbfb);background-size:400% 400%;animation:contactGradient 5s ease infinite;z-index:-1}.contact-dynamic-button:after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#ff6b6b,#ee5a24,#ff9ff3,#feca57,#48dbfb);background-size:400% 400%;animation:contactBorder 4s ease infinite;z-index:-2;border-radius:inherit;filter:blur(4px);opacity:.7}.contact-dynamic-button:hover:before{animation:contactGradient 2s ease infinite}.contact-dynamic-button:hover .contact-bg-animation{animation:contactShine 1s ease-in-out infinite}.contact-dynamic-button:hover .contact-pulse-effect{animation:contactPulse 1.5s ease-out infinite}.contact-dynamic-button:hover:after{animation:contactBorder 2s ease infinite;opacity:1}@keyframes contactGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes contactShine{0%{left:-100%}50%{left:100%}to{left:100%}}@keyframes contactPulse{0%{width:0;height:0;opacity:1}to{width:300px;height:300px;opacity:0}}@keyframes contactBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-fadeIn{animation:fadeIn .3s ease-out}@keyframes softPulse{0%,to{box-shadow:0 10px 25px #3b82f633}50%{box-shadow:0 15px 35px #9333ea4d}}.service-card-3d{transform-style:preserve-3d;transition:transform .6s}.service-card-3d:hover{transform:perspective(1000px) rotateY(5deg) rotateX(5deg)}
