.footer{ position: relative; background: linear-gradient(135deg, var(--primary) 0%, #1e293b 25%, #0f172a  50%, #1e293b 75%, var(--primary) 100%); background-size: 400% 400%; animation: gradientShift 8s ease infinite; color: var(--white); padding-top: var(--space-xl); margin-top: auto; overflow: hidden; }
.footer: : before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(79, 155, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 82, 204, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(79, 155, 255, 0.05) 0%, transparent 50%); pointer-events: none; }
@keyframes gradientShift{ 0%{ background-position: 0% 50%; }
50%{ background-position: 100% 50%; }
100%{ background-position: 0% 50%; }
}
.footer: : after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.1), transparent), radial-gradient(2px 2px at 40px 70px, rgba(79, 155, 255, 0.1), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.05), transparent), radial-gradient(1px 1px at 130px 80px, rgba(0, 82, 204, 0.1), transparent); background-repeat: repeat; background-size: 150px 100px; animation: sparkle 20s linear infinite; pointer-events: none; }
@keyframes sparkle{ from{ transform: translateY(0px); }
to{ transform: translateY(-100px); }
}
.footer-top{ position: relative; z-index: 2; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.footer-company{ background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: var(--space-lg); transition: all 0.3s ease; }
.footer-company: hover{ transform: translateY(-5px); background: rgba(255, 255, 255, 0.05); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.footer-logo{ font-size: 2rem; font-weight: 700; margin-bottom: var(--space-md); color: var(--white); background: linear-gradient(45deg, var(--white), var(--accent-light)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: logoGlow 3s ease-in-out infinite alternate; }
@keyframes logoGlow{ from{ filter: drop-shadow(0 0 5px rgba(79, 155, 255, 0.3)); }
to{ filter: drop-shadow(0 0 20px rgba(79, 155, 255, 0.6)); }
}
.footer-logo span{ color: #ffd700; font-weight: 800; text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4); animation: goldGlow 2s ease-in-out infinite alternate; }
@keyframes goldGlow{ from{ text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4); }
to{ text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.8), 0 0 35px rgba(255, 215, 0, 0.6); }
}
@keyframes pulse{ 0%, 100%{ opacity: 1; }
50%{ opacity: 0.7; }
}
.footer-description{ color: rgba(255, 255, 255, 0.8); margin-bottom: var(--space-md); line-height: 1.6; font-size: 1.1rem; }
.social-links{ display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.social-link{ position: relative; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(79, 155, 255, 0.2)); color: var(--white); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; overflow: hidden; }
.social-link: : before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, var(--accent), var(--accent-light)); border-radius: 50%; transform: scale(0); transition: transform 0.4s ease; z-index: -1; }
.social-link: hover{ transform: translateY(-8px) scale(1.1); box-shadow: 0 15px 30px rgba(79, 155, 255, 0.4); }
.social-link: hover: : before{ transform: scale(1); }
.social-link svg{ width: 1.2rem; height: 1.2rem; fill: currentColor; transition: all 0.3s ease; z-index: 1; }
.social-link: hover svg{ transform: rotate(360deg) scale(1.2); }
.footer-section{ background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 15px; padding: var(--space-lg); transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-section: : before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); transition: left 0.5s ease; }
.footer-section: hover: : before{ left: 100%; }
.footer-section: hover{ transform: translateY(-3px); background: rgba(255, 255, 255, 0.04); border-color: rgba(79, 155, 255, 0.2); }
.footer-heading{ font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-md); color: var(--white); position: relative; display: block; text-align: center; width: 100%; }
.footer-heading: : after{ content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 0.3s ease; }
.footer-section: hover .footer-heading: : after{ width: 80%; }
.footer-links{ display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; text-align: center; width: 100%; list-style: none; padding: 0; margin: 0; }
.footer-link{ color: rgba(255, 255, 255, 0.7); transition: all 0.3s ease; text-decoration: none; padding: 0.5rem 1rem; position: relative; border-radius: 8px; display: inline-block; width: auto; text-align: center; }
.footer-link: : before{ content: '→'; position: absolute; left: 0.25rem; top: 50%; transform: translateY(-50%) translateX(-10px); opacity: 0; transition: all 0.3s ease; color: #ffd700; }
.footer-link: hover{ color: var(--white); padding-left: 2rem; background: rgba(79, 155, 255, 0.1); }
.footer-link: hover: : before{ opacity: 1; transform: translateY(-50%) translateX(0); }
.newsletter-signup{ margin-top: var(--space-lg); padding: var(--space-lg); background: linear-gradient(135deg, rgba(79, 155, 255, 0.1), rgba(0, 82, 204, 0.1)); border-radius: 15px; border: 1px solid rgba(79, 155, 255, 0.2); }
.newsletter-title{ font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--white); }
.newsletter-form{ display: flex; gap: var(--space-sm); margin-top: var(--space-sm); position: relative; }
.newsletter-input{ flex: 1; padding: 1rem; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--white); font-size: 1rem; transition: all 0.3s ease; }
.newsletter-input: focus{ outline: none; border-color: var(--accent-light); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(79, 155, 255, 0.2); }
.newsletter-input: : placeholder{ color: rgba(255, 255, 255, 0.5); }
.newsletter-btn{ padding: 1rem 2rem; background: linear-gradient(45deg, var(--accent), var(--accent-light)); color: var(--white); border: none; border-radius: 12px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; position: relative; overflow: hidden; }
.newsletter-btn: : before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; }
.newsletter-btn: hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(79, 155, 255, 0.4); }
.newsletter-btn: hover: : before{ left: 100%; }
.footer-bottom{ position: relative; z-index: 2; padding: var(--space-lg) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); }
.back-to-top{ position: fixed; bottom: 2rem; right: 2rem; width: 3.5rem; height: 3.5rem; background: linear-gradient(45deg, var(--accent), var(--accent-light)); color: var(--white); border: none; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(79, 155, 255, 0.4); transition: all 0.3s ease; z-index: 1000; overflow: hidden; }
.back-to-top: : before{ content: '🚀'; font-size: 1.5rem; position: absolute; transition: all 0.3s ease; }
.back-to-top: hover{ transform: translateY(-5px) scale(1.1); box-shadow: 0 15px 35px rgba(79, 155, 255, 0.6); }
.back-to-top: hover: : before{ transform: translateY(-2px) rotate(15deg); }
.back-to-top.show{ display: flex; animation: rocketLaunch 0.5s ease-out; }
@keyframes rocketLaunch{ 0%{ transform: translateY(100px) scale(0); opacity: 0; }
50%{ transform: translateY(-10px) scale(1.1); }
100%{ transform: translateY(0) scale(1); opacity: 1; }
}
body.dark-mode .footer{ background: linear-gradient(135deg, var(--surface) 0%, var(--background) 25%, var(--surface-light) 50%, var(--background) 75%, var(--surface) 100%); color: var(--dm-text-primary); }
body.dark-mode .footer: : before{ background: radial-gradient(circle at 20% 80%, rgba(79, 155, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 82, 204, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(79, 155, 255, 0.08) 0%, transparent 50%); }
body.dark-mode .footer-company{ background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dm-border); }
body.dark-mode .footer-company: hover{ background: rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px var(--dm-shadow); }
body.dark-mode .footer-logo{ color: var(--dm-text-primary); background: linear-gradient(45deg, var(--dm-text-primary), var(--accent-light)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.dark-mode .footer-logo span{ color: #ffd700; -webkit-text-fill-color: #ffd700; }
body.dark-mode .footer-description{ color: var(--dm-text-secondary); }
body.dark-mode .social-link{ background: linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(79, 155, 255, 0.15)); color: var(--dm-text-primary); }
body.dark-mode .social-link: hover{ box-shadow: 0 15px 30px rgba(79, 155, 255, 0.3); }
body.dark-mode .footer-section{ background: rgba(255, 255, 255, 0.03); border: 1px solid var(--dm-border); }
body.dark-mode .footer-section: hover{ background: rgba(255, 255, 255, 0.06); border-color: rgba(79, 155, 255, 0.3); }
body.dark-mode .footer-heading{ color: var(--dm-text-primary); }
body.dark-mode .footer-link{ color: var(--dm-text-secondary); }
body.dark-mode .footer-link: hover{ color: var(--dm-text-primary); background: rgba(79, 155, 255, 0.15); }
body.dark-mode .footer-link: : before{ color: #ffd700; }
body.dark-mode .newsletter-signup{ background: linear-gradient(135deg, rgba(79, 155, 255, 0.15), rgba(0, 82, 204, 0.15)); border: 1px solid rgba(79, 155, 255, 0.3); }
body.dark-mode .newsletter-title{ color: var(--dm-text-primary); }
body.dark-mode .newsletter-input{ background: rgba(255, 255, 255, 0.08); border: 2px solid var(--dm-border); color: var(--dm-text-primary); }
body.dark-mode .newsletter-input: focus{ border-color: var(--accent-light); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(79, 155, 255, 0.2); }
body.dark-mode .newsletter-input: : placeholder{ color: var(--dm-text-muted); }
body.dark-mode .newsletter-btn{ background: linear-gradient(45deg, var(--accent), var(--accent-light)); }
body.dark-mode .newsletter-btn: hover{ box-shadow: 0 10px 25px rgba(79, 155, 255, 0.4); }
body.dark-mode .footer-bottom{ background: rgba(0, 0, 0, 0.3); border-top: 1px solid var(--dm-border); color: var(--dm-text-muted); }
body.dark-mode .back-to-top{ background: linear-gradient(45deg, var(--accent), var(--accent-light)); box-shadow: 0 8px 25px var(--dm-shadow); }
body.dark-mode .back-to-top: hover{ box-shadow: 0 15px 35px rgba(79, 155, 255, 0.5); }
body.dark-mode .footer-heading: : after{ color: #ffd700; }
body.dark-mode .footer-heading.active: : after{ color: var(--dm-text-primary); }
body.dark-mode .footer-heading: hover{ background: rgba(79, 155, 255, 0.15); }
@media (max-width: 768px){ .footer-top{ grid-template-columns: 1fr; gap: var(--space-lg); text-align: center; }
.footer-company, .footer-section{ margin-bottom: var(--space-md); }
.social-links{ justify-content: center; }
.newsletter-form{ flex-direction: column; }
.newsletter-btn{ margin-top: var(--space-sm); }
.footer-links{ align-items: center; text-align: center; }
.footer-heading{ cursor: pointer; padding: var(--space-sm); border-radius: 10px; background: rgba(255, 255, 255, 0.05); margin-bottom: var(--space-sm); position: relative; text-align: center; }
.footer-heading: : after{ content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; transition: all 0.3s ease; color: #fbbf24; }
.footer-heading.active: : after{ transform: translateY(-50%) rotate(135deg); color: var(--white); }
.footer-heading: hover{ background: rgba(79, 155, 255, 0.1); }
}
@media (max-width: 992px){ .footer-top{ grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}