:root { --primary-glow: rgba(0, 198, 255, 0.15); --accent-glow: rgba(0, 114, 255, 0.15); } .about-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); position: relative; overflow: hidden; padding: 6rem 0; } .about-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, transparent 70%); z-index: 1; } .legal-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .legal-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: rgba(0, 198, 255, 0.3); } .legal-badge { background: linear-gradient(90deg, #00c6ff, #0072ff); color: white; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 1rem; } .feature-icon-box { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #00c6ff; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); } .timeline { position: relative; padding: 3rem 0; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--glass-border), transparent); transform: translateX(-50%); } .timeline-item { position: relative; margin-bottom: 4rem; width: 50%; } .timeline-item:nth-child(odd) { left: 0; padding-right: 3rem; text-align: right; } .timeline-item:nth-child(even) { left: 50%; padding-left: 3rem; text-align: left; } .timeline-item:nth-child(odd) .timeline-content { align-items: flex-end; } .timeline-item::before { content: ''; position: absolute; top: 0.5rem; width: 24px; height: 24px; background: var(--dark-color); border-radius: 50%; border: 4px solid #00c6ff; z-index: 2; box-shadow: 0 0 15px rgba(0, 198, 255, 0.5); } .timeline-item:nth-child(odd)::before { right: -12px; } .timeline-item:nth-child(even)::before { left: -12px; } .timeline-date { color: #00c6ff; font-weight: 700; margin-bottom: 0.5rem; display: block; font-family: 'Space Grotesk', sans-serif; } @media (max-width: 768px) { .timeline::before { left: 20px; } .timeline-item { width: 100%; left: 0 !important; padding-left: 50px !important; padding-right: 0 !important; text-align: left !important; } .timeline-item:nth-child(odd)::before, .timeline-item:nth-child(even)::before { left: 8px; right: auto; } .timeline-item:nth-child(odd) .timeline-content { align-items: flex-start; } } .sic-code { font-family: monospace; background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 4px; color: #a0aec0; }