body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f7f9fc;color:#222;margin:0}
.container{max-width:720px;margin:8vh auto;padding:24px;text-align:center}
h1{color:#2a6ebd;margin-bottom:8px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:#2a6ebd;color:#fff;text-decoration:none}
.btn:hover{opacity:.9}


/* Cytat jako hero-box z tłem */
.quote-hero{
  position: relative;
  border-radius: 14px;
  padding: 28px;
  background: #f7f7fb;
  overflow: hidden;
  margin: 20px 0;
}
.quote-hero.has-bg{
  background-image: var(--quote-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.quote-hero__overlay{
  display: none;
}
.quote-hero.has-bg .quote-hero__overlay{
  display: block;
  position: absolute; inset: 0;
  /* półprzezroczysta nakładka dla czytelności tekstu */
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}
.quote-hero__content{
  position: relative;
  margin: 0;
}
.quote-hero__text{
  font-size: 22px; line-height: 1.5; margin: 0 0 8px 0;
}
.quote-hero__author{
  font-size: 14px; opacity: .9;
}

/* pe³na szerokoœæ */
.quote-hero{
  padding: 48px 24px;
  min-height: 240px;
  border-radius: 16px;
}
@media (min-width: 768px){
  .quote-hero{ min-height: 320px; padding: 64px; }
  .quote-hero__text{ font-size: 28px; }
}
.bar{height:10px;background:#eee;border-radius:999px;overflow:hidden}
.bar>span{display:block;height:100%;background:#2a6ebd}