:root{
      --bg:#f6f7fb; 
      --fg:#0c1320; 
      --muted:#5b6575; 
      --card:#ffffff;
      --brand:#1f4fd7; 
      --accent:#1240d4;  
      --ok:#22c55e;        
      --warn:#f59e0b;      
      --maxw: 980px;
      --radius: 18px;
      }
    }

    *{box-sizing:border-box}
    html,body{margin:0; padding:0}
    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background:var(--bg); color:var(--fg); line-height:1.7; 
    }
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}

    .topbar{
      position:sticky; top:0; z-index:5;
      background:rgba(59,130,246,.7); backdrop-filter:saturate(150%) blur(6px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .wrap{max-width:var(--maxw); margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:14px}
    .brand{font-weight:800; letter-spacing:.2px}
    .grow{flex:1}
    .btn, .chip{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.55rem .9rem; border-radius:999px; font-weight:600; text-decoration:none;
    }
    .btn{ background:var(--brand); color:white; border:0 }
    .btn:hover{ filter:brightness(1.05) }

    .hero{max-width:var(--maxw); margin:28px auto 16px; padding:0 18px; text-align:center}
    .hero img{ width:min(260px, 60vw); height:auto; display:block; margin:14px auto 6px }
    .hero a img{ margin:0px }
    h1{margin:.2rem 0 0; font-size:clamp(1.4rem, 2.8vw, 2rem)}
    p.lead{margin:.3rem auto 15px; color:var(--muted)}

    .grid{max-width:var(--maxw); margin:22px auto; padding:0 18px; display:grid; gap:16px}
    @media(min-width:880px){ .grid{ grid-template-columns: 1fr 1fr } }

    .card{
      background:var(--card); border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius); padding:18px 18px 14px; box-shadow: 0 10px 26px rgba(0,0,0,.15);
    }
    .card h2{margin:.2rem 0 4px; font-size:1.05rem}
    .muted{color:var(--muted)}
    ul{margin:.2rem 0 .6rem 1.2rem}

    .progress{height:.7rem; background:rgba(255,255,255,.09); border-radius:999px; overflow:hidden}
    .bar{height:100%; width:0}
    .ok{ background:linear-gradient(90deg, var(--ok), #38bdf8) }
    .warn{ background:linear-gradient(90deg, var(--warn), #f97316) }

    .actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem}
    .outline{
      border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--fg)
    }
    .outline:hover{ background:rgba(255,255,255,.06) }

    footer{max-width:var(--maxw); margin:22px auto 40px; padding:0 18px; color:var(--muted); gap:12px; text-align:center; justify-content:space-between; flex-wrap:wrap}
    .tiny{font-size:.92rem}