*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;background:#0F0F0F;color:#fff;font-family:'Roboto',sans-serif;display:flex;justify-content:center;align-items:center}.app{position:relative;width:100%;max-width:450px;height:100vh;background:#0F0F0F;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.8)}.bg-grad{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#1a1a1a 0,#0F0F0F 70%);z-index:1}header{position:absolute;top:25px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:10}.logo{height:28px;width:auto}.live{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:6px 14px;border-radius:25px;font-size:12px;font-weight:700;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.pulse{width:8px;height:8px;background:#f00;border-radius:50%;animation:p 1.5s infinite}@keyframes p{0%{box-shadow:0 0 0 0 rgba(255,0,0,.7)}70%{box-shadow:0 0 0 8px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}main{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:0 20px;width:100%}.hero-graphic{width:70px;height:70px;background:rgba(255,0,0,.1);border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:10px;box-shadow:0 0 30px rgba(255,0,0,.2);animation:f 4s ease-in-out infinite}.hero-graphic svg{width:34px;height:34px;color:#f00}.hero-graphic .arrow{animation:b 2s infinite}@keyframes f{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes b{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(4px)}60%{transform:translateY(2px)}}h1{font-size:clamp(2.4rem,8vw,3.2rem);font-weight:700;line-height:1.05;letter-spacing:-0.5px;text-shadow:0 2px 6px rgba(0,0,0,.9)}p{font-size:clamp(1rem,4vw,1.1rem);line-height:1.45;color:#e0e0e0;text-shadow:0 1px 4px rgba(0,0,0,.9)}.cta{display:flex;align-items:center;justify-content:center;background:#f00;color:#fff;text-decoration:none;font-weight:700;padding:16px 24px;border-radius:6px;font-size:1.15rem;text-transform:uppercase;letter-spacing:.5px;transition:background .2s,transform .2s;width:100%;max-width:320px;margin-top:10px}.cta:hover,.cta:focus{background:#d00;transform:scale(1.02);outline:0;box-shadow:0 0 20px rgba(255,0,0,.3)}.links{position:absolute;bottom:30px;left:0;width:100%;display:flex;justify-content:center;gap:20px;z-index:10}.links a{color:#777;font-size:11px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:color .2s}.links a:hover{color:#fff}.p-bar-wrap{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.15);z-index:20}.p-bar{height:100%;background:#f00;width:0;animation:s 15s linear infinite}@keyframes s{0%{width:0}100%{width:100%}}