h1 { font-size: 16px; font-weight: 00; margin-top: 0; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: Arial, sans-serif; background: #0b0f19; color: oklch(.872 .01 258.338); } .progress-container { width: 100%; height: 30px; background: #1E2938; border-radius: 15px; margin: 20px 0; } .progress-bar { height: 100%; background: linear-gradient(135deg, #0b0f19 0%, #7875FF 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; transition: width 0.05s ease; position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100% ); animation: shimmer 6s infinite; } @keyframes shimmer { 0% { left: -100%; opacity: 0; } 50% { opacity: 1.0; } 100% { left: 100%; opacity: 0; } } .chart-container { width: 100%; height: 400px; margin: 20px 0; } .hero-band { background: linear-gradient(180deg, #0b0f19 0%, #0b0f19 40%, #7875FF 150%); text-align: center; padding: 60px 20px; border-bottom: 1px solid #2a3441; } .hero-title { font-size: 3.5rem; margin: 0 0 16px 0; } .hero-subtitle { font-size: 1.25rem; margin: 0; opacity: 0.8; font-weight: 300; } .stats-card { width: 65%; margin: 40px auto 40px auto; position: relative; z-index: 10; } .card { backdrop-filter: blur(10px); border-radius: 16px; padding: 32px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .card h2 { margin-top: 0; margin-bottom: 24px; font-weight: 600; } .chart-card { width: 85%; margin: 40px auto; backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }