* { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; }
  body {
    font-family:'Segoe UI', Arial, sans-serif;
    background:transparent;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .panel { width:400px; max-width:88vw; text-align:center; }
  .logo-card {
    background:#ffffff; border-radius:16px; padding:26px 34px;
    display:inline-block; margin-bottom:40px;
    box-shadow:0 10px 40px rgba(0,0,0,.45);
    animation:float 3s ease-in-out infinite;
  }
  .logo-card img { width:210px; display:block; }
  @keyframes float {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
  }
  .pct {
    font-size:44px; font-weight:700; color:#ffffff;
    font-variant-numeric:tabular-nums; margin-bottom:14px;
  }
  .pct small { font-size:20px; color:#F58220; }
  .track {
    height:10px; border-radius:6px; background:#242b36;
    overflow:hidden; position:relative;
  }
  .fill {
    height:100%; width:0%; border-radius:6px;
    background:linear-gradient(90deg,#F58220,#ffb257,#4CB748);
    background-size:200% 100%;
    animation:heat 1.6s linear infinite;
    transition:width .25s ease;
    box-shadow:0 0 14px rgba(245,130,32,.55);
  }
  @keyframes heat { 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
  .status {
    margin-top:18px; font-size:12.5px; color:#8f99a6;
    letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    min-height:18px;
  }