footer { background: var(--bg-card); padding: var(--space-xl) var(--container-padding); margin-top: var(--space-xxl); border-top: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); } .contact-block { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); margin-bottom: var(--space-sm); } .contact-item { display: flex; align-items: center; gap: var(--space-sm); } .contact-item i { color: var(--primary); font-size: var(--font-size-lg); } .contact-item .signal-icon { color: var(--primary); width: var(--font-size-lg); height: var(--font-size-lg); } .contact-item a { color: var(--text); text-decoration: none; transition: all var(--transition-speed) var(--transition-timing); padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-sm); background-color: rgba(var(--bg-hover-rgb), 0.4); font-size: var(--font-size-md); } .contact-item a:hover { color: var(--primary); background-color: var(--bg-card); transform: translateY(-1px); } .contact-item:hover .signal-icon { color: var(--primary); } .social-links { display: flex; gap: var(--space-lg); justify-content: center; } .social-links a { color: var(--text); text-decoration: none; transition: all var(--transition-speed) var(--transition-timing); padding: var(--space-xs); border-radius: var(--radius-sm); font-size: var(--font-size-xl); background-color: rgba(var(--bg-hover-rgb), 0.4); } .social-links a:hover { color: var(--primary); background-color: var(--bg-card); transform: translateY(-2px); } .legal-links { text-align: center; font-size: var(--font-size-sm); color: var(--text-muted); padding-top: var(--space-md); } .legal-links a { color: var(--text); text-decoration: none; margin: 0 var(--space-sm); transition: all var(--transition-speed) var(--transition-timing); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); position: relative; background-color: rgba(var(--bg-hover-rgb), 0.4); font-weight: var(--font-weight-medium); letter-spacing: 0.2px; } .legal-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--primary); transition: all var(--transition-speed) var(--transition-timing); transform: translateX(-50%); } .legal-links a:hover { color: var(--primary); background-color: var(--bg-card); transform: translateY(-1px); } .legal-links a:hover::after { width: calc(100% - var(--space-xl)); }