.landing-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--bg-0); z-index: 1; } .neural-background { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 50%, #0a0a1a 0%, #05050a 100%); } .neural-particles { position: absolute; inset: 0; background-image: radial-gradient(circle at 2px 2px, rgba(77, 159, 255, 0.1) 1px, transparent 0); background-size: 40px 40px; animation: drift 60s linear infinite; } @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-1000px); } } .hero-section { text-align: center; max-width: 800px; z-index: 2; margin-bottom: 80px; } .hero-title { font-size: 8rem; font-weight: 900; letter-spacing: 0.2em; background: linear-gradient(to bottom, #fff 0%, #4d9fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; filter: drop-shadow(0 0 30px rgba(77, 159, 255, 0.3)); } .hero-subtitle { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-1); letter-spacing: 0.1em; margin-bottom: 12px; } .hero-description { color: var(--text-2); font-size: 1.1rem; margin-bottom: 40px; } .hero-actions { display: flex; gap: 20px; justify-content: center; } .btn-large { padding: 16px 32px; font-size: 1.1rem; border-radius: var(--radius-md); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; max-width: 1200px; padding: 0 40px; z-index: 2; } .feature-card { padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .feature-icon { font-size: 3rem; margin-bottom: 8px; } .feature-card h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-0); } .feature-card p { color: var(--text-2); line-height: 1.6; } .landing-footer { position: absolute; bottom: 40px; width: 100%; text-align: center; opacity: 0.6; }