/* Quality Dashboard – techniczny, czysty, bez timeline */
#quality-dashboard{
  --text:#e9eeff; --muted:#b6c3dc;
  --chip:#1a2240; --chip-b:#2b3862;
  --accent:#67e8f9; --accent2:#7ef9cf;
  --card:#0f1730; --card-b:#202b55;
  --meter:#22315a; --meter-fill:#67e8f9;

  color:var(--text);
  background: linear-gradient(135deg,
    #0a1030 0%,   /* granat */
    #1c0d2e 40%,  /* ciemny fiolet */
    #08271d 100%  /* ciemna zieleń */
  );
  padding:clamp(80px,7vw,120px) 20px;
  isolation:isolate;
}

#quality-dashboard .container{max-width:1240px;margin:0 auto;}

#quality-dashboard [data-reveal]{opacity:0;transform:translateY(24px);transition:.7s ease;}
#quality-dashboard [data-reveal].is-visible{opacity:1;transform:none;}

#quality-dashboard .top{
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; margin-bottom:36px;
}
#quality-dashboard .intro h2{
  font-size:clamp(2.2rem,4.5vw,3rem); margin:0 0 6px; font-weight:900;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#quality-dashboard .intro .subtitle{
  text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin:0 0 18px;
}
#quality-dashboard .lead{color:var(--muted); line-height:1.85; font-size:1.08rem;}
#quality-dashboard .lead p{margin:0 0 12px;}
#quality-dashboard .lead p:last-child{margin-bottom:0;}

#quality-dashboard .kpis{
  margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px;
}
#quality-dashboard .kpis li{
  background:linear-gradient(180deg,var(--chip),var(--chip-b));
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:10px 14px; font-size:.95rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

#quality-dashboard .media{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:14px 14px 10px; text-align:center;
}
#quality-dashboard .media img{
  width:100%; height:auto; display:block; border-radius:10px; opacity:.98; transition:transform .5s ease;
}
#quality-dashboard .media:hover img{transform:scale(1.015);}
#quality-dashboard .media figcaption{color:var(--muted); font-size:.9rem; margin-top:8px;}

#quality-dashboard .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px;
}
#quality-dashboard .card{
  background:linear-gradient(180deg,var(--card),var(--card-b));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#quality-dashboard .card:hover{transform:translateY(-4px); border-color:rgba(103,232,249,.5); box-shadow:0 16px 36px rgba(0,0,0,.45);}
#quality-dashboard .card header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px;}
#quality-dashboard .card h3{font-size:1.08rem; margin:0;}
#quality-dashboard .card .badge{
  background:linear-gradient(180deg,var(--chip),var(--chip-b)); border:1px solid rgba(255,255,255,.12);
  padding:6px 10px; border-radius:999px; font-size:.78rem; white-space:nowrap; color:var(--text);
}
#quality-dashboard .card p{color:var(--muted); margin:0 0 12px; line-height:1.65; font-size:.98rem;}

#quality-dashboard .meter{
  position:relative; height:8px; background:var(--meter); border-radius:999px; overflow:hidden; outline:1px solid rgba(255,255,255,.06);
}
#quality-dashboard .meter span{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,var(--meter-fill),var(--accent2));
  border-right:1px solid rgba(255,255,255,.2);
  transition:width .9s cubic-bezier(.2,.7,.2,1);
}
/* Inicjalizacja w CSS (bez JS): szerokość z data-value */
#quality-dashboard .meter[data-value="88"] span{width:88%;}
#quality-dashboard .meter[data-value="90"] span{width:90%;}
#quality-dashboard .meter[data-value="92"] span{width:92%;}
#quality-dashboard .meter[data-value="94"] span{width:94%;}
#quality-dashboard .meter[data-value="95"] span{width:95%;}
#quality-dashboard .meter[data-value="100"] span{width:100%;}

#quality-dashboard .bottom{
  margin-top:22px; text-align:center; border-top:1px solid rgba(255,255,255,.12);
  padding:20px 10px; color:var(--text); font-size:1.02rem;
}

@media (max-width:1024px){
  #quality-dashboard .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  #quality-dashboard .top{grid-template-columns:1fr; gap:20px;}
  #quality-dashboard .media{order:2;}
}
@media (max-width:600px){
  #quality-dashboard .grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  #quality-dashboard *{transition:none !important;}
}