* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 100%); color: white; min-height: 100vh; }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; text-align: center; }
.brand { font-size: 4.5rem; font-weight: 800; background: linear-gradient(135deg, #7F77DD 0%, #2ED4D9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem; letter-spacing: -2px; }
.hero h1 { font-size: 2rem; font-weight: 600; margin-bottom: 1.5rem; max-width: 700px; line-height: 1.3; }
.tagline { font-size: 1.1rem; color: #a0a0c0; max-width: 580px; margin-bottom: 3rem; line-height: 1.6; }
.status { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.05); padding: 0.7rem 1.4rem; border-radius: 22px; font-size: 0.85rem; color: #b0b0d0; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 4rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2ED4D9; box-shadow: 0 0 12px #2ED4D9; animation: pulse 2s infinite; }
.footer { position: absolute; bottom: 1.5rem; font-size: 0.75rem; color: #666; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }