:root { --primary-color: #2a2a72; --secondary-color: #009ffd; --text-color: #ffffff; --background: #0f0f1a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; background: var(--background); color: var(--text-color); overflow-x: hidden; } .background-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); opacity: 0.1; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } nav { padding: 1.5rem 10%; display: flex; justify-content: space-between; align-items: center; background: rgba(15, 15, 26, 0.9); backdrop-filter: blur(10px); position: fixed; width: 100%; top: 0; z-index: 1000; } .logo { font-size: 2rem; font-weight: bold; position: relative; display: inline-block; background: linear-gradient( 45deg, var(--secondary-color), #00ff88, #ff3399, #00ff88, var(--secondary-color) ); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: logoReveal 1s ease-out forwards; text-transform: uppercase; letter-spacing: 3px; opacity: 0; } .logo::before { content: ''; position: absolute; top: -10px; left: -20px; right: -20px; bottom: -10px; border: 2px solid transparent; border-image: linear-gradient(45deg, var(--secondary-color), transparent) 1; animation: borderRotate 2s linear infinite, borderReveal 1s ease-out; z-index: -1; } nav ul { display: flex; gap: 2.5rem; list-style: none; } nav ul li { position: relative; perspective: 1000px; margin: 0 10px; } nav a { color: var(--text-color); text-decoration: none; font-size: 1.1rem; font-weight: 600; padding: 12px 24px; border-radius: 30px; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2); position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; backdrop-filter: blur(5px); } nav a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3), transparent ); transform: translateX(-100%) rotate(45deg); transition: 0.6s; } nav a::after { content: ''; position: absolute; inset: 3px; background: rgba(255, 255, 255, 0.05); border-radius: 28px; transition: 0.5s; z-index: -1; } nav a span { position: relative; z-index: 1; } nav ul li:nth-child(1) a { box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); } nav ul li:nth-child(2) a { box-shadow: 0 0 10px rgba(255, 51, 153, 0.2); } nav ul li:nth-child(3) a { box-shadow: 0 0 10px rgba(0, 159, 253, 0.2); } nav a:hover { transform: translateY(-5px) scale(1.1); color: #fff; background: rgba(255, 255, 255, 0.1); letter-spacing: 3px; } nav ul li:nth-child(1) a:hover { box-shadow: 0 0 20px rgba(0, 255, 136, 0.4), 0 0 40px rgba(0, 255, 136, 0.2), 0 0 60px rgba(0, 255, 136, 0.1); text-shadow: 0 0 10px rgba(0, 255, 136, 0.8); } nav ul li:nth-child(2) a:hover { box-shadow: 0 0 20px rgba(255, 51, 153, 0.4), 0 0 40px rgba(255, 51, 153, 0.2), 0 0 60px rgba(255, 51, 153, 0.1); text-shadow: 0 0 10px rgba(255, 51, 153, 0.8); } nav ul li:nth-child(3) a:hover { box-shadow: 0 0 20px rgba(0, 159, 253, 0.4), 0 0 40px rgba(0, 159, 253, 0.2), 0 0 60px rgba(0, 159, 253, 0.1); text-shadow: 0 0 10px rgba(0, 159, 253, 0.8); } nav a:hover::before { transform: translateX(100%) rotate(45deg); } @keyframes buttonPulse { 0%, 100% { transform: translateY(-5px) scale(1.1); } 50% { transform: translateY(-8px) scale(1.15); } } nav a:hover { animation: buttonPulse 1.5s infinite; } .particle { position: absolute; pointer-events: none; background: white; border-radius: 50%; opacity: 0; } @keyframes particleAnimation { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } } @keyframes logoReveal { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes borderReveal { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes borderRotate { 0% { transform: rotate(0deg); border-image: linear-gradient(45deg, var(--secondary-color), transparent) 1; } 50% { border-image: linear-gradient(225deg, #00ff88, transparent) 1; } 100% { transform: rotate(360deg); border-image: linear-gradient(45deg, var(--secondary-color), transparent) 1; } } nav.scrolled { background: rgba(15, 15, 26, 0.95); padding: 1rem 10%; } nav.scrolled .logo { font-size: 1.8rem; } nav.scrolled a { padding: 6px 12px; } .logo:hover { animation: logoShake 0.5s ease-in-out, logoGlow 2s ease-in-out infinite; } @keyframes logoShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 1rem; perspective: 1000px; } .animated-text { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient( 45deg, var(--secondary-color), #00ff88, #ff3399, var(--secondary-color) ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientFlow 8s ease infinite, floatText 4s ease-in-out infinite, glowText 2s ease-in-out infinite; position: relative; letter-spacing: 2px; text-transform: uppercase; transform-style: preserve-3d; } .animated-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(-8px); opacity: 0.5; filter: blur(8px); } .subtitle { font-size: 1.5rem; margin-bottom: 2rem; position: relative; background: linear-gradient( 90deg, transparent, #fff, transparent ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: subtitleSlide 3s ease-in-out infinite, subtitleGlow 2s ease-in-out infinite, subtitleWave 4s ease infinite; letter-spacing: 1px; } .platforms { display: flex; gap: 2rem; animation: fadeInUp 1s ease 0.6s backwards; } .platform-icon { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; padding: 1rem 2rem; background: rgba(255, 255, 255, 0.1); border-radius: 50px; transition: transform 0.3s, background 0.3s; } .platform-icon:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); } #services { padding: 5rem 10%; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .service-card { background: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 15px; text-align: center; transition: transform 0.3s; } .service-card:hover { transform: translateY(-10px); } .service-card i { font-size: 3rem; margin-bottom: 1rem; color: var(--secondary-color); } #contact { padding: 5rem 10%; } .contact-form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .contact-form input, .contact-form textarea { padding: 1rem; background: rgba(255, 255, 255, 0.05); border: none; border-radius: 5px; color: var(--text-color); } .contact-form button { padding: 1.2rem 3rem; background: linear-gradient( 45deg, var(--secondary-color), #00ff88, var(--secondary-color) ); background-size: 200% auto; border: none; border-radius: 50px; color: var(--text-color); font-size: 1.1rem; font-weight: bold; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 5px 15px rgba(0, 159, 253, 0.3); } .contact-form button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: 0.5s; } .contact-form button::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle, transparent, rgba(255, 255, 255, 0.1), transparent ); opacity: 0; transition: 0.5s; } .contact-form button:hover { background-position: right center; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 159, 253, 0.5); animation: buttonPulse 1.5s infinite; } .contact-form button:hover::before { left: 100%; } .contact-form button:hover::after { opacity: 1; transform: scale(1.5); } .contact-form button:active { transform: scale(0.95) translateY(0); box-shadow: 0 3px 10px rgba(0, 159, 253, 0.3); } @keyframes buttonPulse { 0% { box-shadow: 0 5px 15px rgba(0, 159, 253, 0.3); } 50% { box-shadow: 0 5px 30px rgba(0, 159, 253, 0.6), 0 0 30px rgba(0, 255, 136, 0.3); } 100% { box-shadow: 0 5px 15px rgba(0, 159, 253, 0.3); } } .contact-form button.clicked { animation: buttonClick 0.5s ease-out; } @keyframes buttonClick { 0% { transform: scale(0.95); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .contact-form button.success { background: linear-gradient(45deg, #00ff88, #00ff88); animation: successPulse 2s ease infinite; } @keyframes successPulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 5px 30px rgba(0, 255, 136, 0.6); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } footer { text-align: center; padding: 2rem; background: rgba(15, 15, 26, 0.9); position: relative; overflow: hidden; } footer p { font-size: 1.1rem; position: relative; display: inline-block; padding: 10px 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); border-radius: 30px; animation: footerGlow 3s ease-in-out infinite; } footer::before, footer::after { content: ''; position: absolute; width: 150%; height: 2px; background: linear-gradient(90deg, transparent, var(--secondary-color), #00ff88, var(--secondary-color), transparent ); animation: footerBorderFlow 4s linear infinite; } footer::before { top: 0; left: -25%; } footer::after { bottom: 0; right: -25%; animation-delay: -2s; } @keyframes footerGlow { 0%, 100% { text-shadow: 0 0 10px rgba(0,159,253,0.5), 0 0 20px rgba(0,159,253,0.3), 0 0 30px rgba(0,159,253,0.1); transform: scale(1); } 50% { text-shadow: 0 0 20px rgba(0,159,253,0.8), 0 0 30px rgba(0,159,253,0.5), 0 0 40px rgba(0,159,253,0.3); transform: scale(1.05); } } @keyframes footerBorderFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } footer p:hover { animation: footerShake 0.5s ease-in-out; cursor: default; } @keyframes footerShake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } 20%, 40%, 60%, 80% { transform: translateX(2px); } } #services h2, #contact h2 { font-size: 2.8rem; text-align: center; margin-bottom: 2rem; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); background: linear-gradient(45deg, var(--secondary-color), #00ff88, var(--secondary-color)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 3s linear infinite, float 4s ease-in-out infinite; } #services h2::after, #contact h2::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--secondary-color), transparent); animation: borderSlide 2s ease-in-out infinite; } @keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0px); } 50% { transform: translateX(-50%) translateY(-10px); } } @keyframes borderSlide { 0%, 100% { width: 0; left: 50%; } 50% { width: 100%; left: 0; } } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes floatText { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-20px) rotateX(5deg); } } @keyframes glowText { 0%, 100% { text-shadow: 0 0 20px rgba(0,255,136,0.5), 0 0 40px rgba(0,255,136,0.3), 0 0 60px rgba(0,255,136,0.1); } 50% { text-shadow: 0 0 40px rgba(0,159,253,0.8), 0 0 60px rgba(0,159,253,0.5), 0 0 80px rgba(0,159,253,0.3); } } @keyframes subtitleSlide { 0%, 100% { transform: translateX(0); letter-spacing: 1px; } 50% { transform: translateX(10px); letter-spacing: 3px; } } @keyframes subtitleGlow { 0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3); } 50% { text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.5); } } @keyframes subtitleWave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px) translateX(2px); } 75% { transform: translateY(5px) translateX(-2px); } } .animated-text:hover { animation-play-state: paused; transform: scale(1.1); transition: transform 0.3s ease; } .subtitle:hover { animation-play-state: paused; transform: scale(1.05); transition: transform 0.3s ease; } .logo span { font-size: 1rem; display: block; opacity: 0; letter-spacing: 1px; text-transform: none; margin-top: 5px; animation: spanReveal 1s ease-out 1s forwards; } @keyframes spanReveal { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0.8; transform: translateY(0); } } @keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.3)) drop-shadow(0 0 30px rgba(0, 159, 253, 0.2)); } 50% { filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.5)) drop-shadow(0 0 50px rgba(0, 159, 253, 0.3)); } }