@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- scoped reset & tokeny ---------- */
.qb-brand{
  --qb-blue:#0098D8;--qb-green:#009040;--qb-orange:#C86800;--qb-magenta:#B82070;
  --qb-dark:#1D2327;--qb-grey:#F2F2F2;--qb-ink:#1D2327;--qb-muted:#6B7280;
  font-family:'Inter',Arial,sans-serif;color:var(--qb-ink);line-height:1.6;max-width:1400px;margin:0 auto;background:#fff;
}
.qb-brand *,.qb-brand *::before,.qb-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.qb-brand img{max-width:100%;height:auto;display:block;}
.qb-brand a{text-decoration:none;color:inherit;}

/* ---------- hlavička značky (logo, claim, poznámka) ---------- */
.qb-brand .qb-header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;flex-wrap:wrap;gap:14px;border-bottom:1px solid #ececec;}
.qb-brand .qb-logo{width:140px;}
.qb-brand .qb-claim{font-size:14px;font-weight:700;color:var(--qb-blue);text-transform:uppercase;letter-spacing:.14em;}
.qb-brand .qb-header-note{font-size:13px;color:#999;}
.qb-brand .qb-stripe{display:flex;height:4px;}
.qb-brand .qb-stripe span{flex:1;}
.qb-brand .qb-stripe span:nth-child(1){background:var(--qb-blue)}.qb-brand .qb-stripe span:nth-child(2){background:var(--qb-green)}
.qb-brand .qb-stripe span:nth-child(3){background:var(--qb-orange)}.qb-brand .qb-stripe span:nth-child(4){background:var(--qb-magenta)}

/* ---------- hero slider (2:1, CSS plochy v barvách značky + produktové fotky) ---------- */
.qb-brand .qb-slider{position:relative;width:100%;padding-top:50%;overflow:hidden;background:var(--qb-grey);container-type:inline-size;}
.qb-brand .qb-slide{position:absolute;inset:0;opacity:0;visibility:hidden;animation:qbFade 21s infinite;display:flex;align-items:center;}
.qb-brand .qb-slide:nth-child(1){animation-delay:0s;}
.qb-brand .qb-slide:nth-child(2){animation-delay:7s;}
.qb-brand .qb-slide:nth-child(3){animation-delay:14s;}
@keyframes qbFade{0%{opacity:0;visibility:hidden}5%{opacity:1;visibility:visible}29%{opacity:1;visibility:visible}34%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}
.qb-brand .qb-sl1{background:linear-gradient(115deg,#0B6FA3 0%,var(--qb-blue) 55%,#4DB8EA 100%);}
.qb-brand .qb-sl2{background:linear-gradient(115deg,#0A5F2E 0%,var(--qb-green) 55%,#3FB56E 100%);}
.qb-brand .qb-sl3{background:linear-gradient(115deg,#8E1655 0%,var(--qb-magenta) 55%,#D24C97 100%);}
/* velký kruh jako ozvěna písma loga */
.qb-brand .qb-slide::before{content:"";position:absolute;right:7%;top:50%;transform:translateY(-50%);width:38cqw;height:38cqw;border-radius:50%;border:2.4cqw solid rgba(255,255,255,.16);}
.qb-brand .qb-slide-text{position:relative;z-index:1;width:46%;padding:0 5cqw;color:#fff;}
.qb-brand .qb-slide-text .qb-tag{display:inline-block;background:rgba(255,255,255,.18);border-radius:999px;padding:.45cqw 1.3cqw;font-size:1.05cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.3cqw;}
.qb-brand .qb-slide-text h2{font-size:3.3cqw;font-weight:800;line-height:1.12;margin-bottom:1cqw;}
.qb-brand .qb-slide-text p{font-size:1.3cqw;font-weight:500;color:rgba(255,255,255,.9);margin-bottom:1.8cqw;max-width:34ch;}
.qb-brand .qb-pill{display:inline-block;background:#fff;color:var(--qb-dark);font-weight:700;font-size:1.05cqw;letter-spacing:.04em;padding:.85cqw 2.4cqw;border-radius:999px;transition:background .25s,color .25s;}
.qb-brand .qb-pill:hover{background:var(--qb-dark);color:#fff;}
/* fotka produktu jako bílá zaoblená karta uprostřed kruhu */
.qb-brand .qb-slide-img{position:absolute;right:calc(7% + 5cqw);top:50%;transform:translateY(-50%);width:28cqw;height:28cqw;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:2.4cqw;box-shadow:0 2cqw 4cqw rgba(0,0,0,.28);}
.qb-brand .qb-slide-img img{width:82%;height:82%;object-fit:contain;}
.qb-brand .qb-dots{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3;}
.qb-brand .qb-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);animation:qbDot 21s infinite;}
.qb-brand .qb-dots span:nth-child(1){animation-delay:0s}.qb-brand .qb-dots span:nth-child(2){animation-delay:7s}.qb-brand .qb-dots span:nth-child(3){animation-delay:14s}
@keyframes qbDot{0%,33%{background:#fff}33.4%,100%{background:rgba(255,255,255,.45)}}

/* ---------- kategorie (kruhové chipy s produkty) ---------- */
.qb-brand .qb-section{padding:48px 28px;}
.qb-brand .qb-h2{font-size:28px;font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.01em;}
.qb-brand .qb-h2 span{color:var(--qb-blue);}
.qb-brand .qb-sub{text-align:center;color:#888;font-weight:500;margin-bottom:28px;font-size:15px;}
.qb-brand .qb-circles{display:flex;gap:26px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;}
.qb-brand .qb-circle{flex:0 0 auto;width:130px;text-align:center;}
.qb-brand .qb-circle-img{width:130px;height:130px;border-radius:50%;background:var(--qb-grey);display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid transparent;transition:border-color .3s,transform .3s;}
.qb-brand .qb-circle:hover .qb-circle-img{transform:scale(1.04);}
.qb-brand .qb-c1:hover .qb-circle-img{border-color:var(--qb-blue)}.qb-brand .qb-c2:hover .qb-circle-img{border-color:var(--qb-green)}
.qb-brand .qb-c3:hover .qb-circle-img{border-color:var(--qb-orange)}.qb-brand .qb-c4:hover .qb-circle-img{border-color:var(--qb-magenta)}.qb-brand .qb-c5:hover .qb-circle-img{border-color:var(--qb-blue)}
.qb-brand .qb-circle-img img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;}
.qb-brand .qb-circle span{display:block;margin-top:10px;font-size:13.5px;font-weight:700;line-height:1.3;}
.qb-brand .qb-circle:hover span{color:var(--qb-blue);}

/* ---------- vlastnosti (tmavá sekce) ---------- */
.qb-brand .qb-tech{background:var(--qb-dark);color:#c6ccd2;padding:56px 28px;}
.qb-brand .qb-tech .qb-h2{color:#fff;}
.qb-brand .qb-tech .qb-sub{color:#8b949d;}
.qb-brand .qb-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.qb-brand .qb-tech-card{background:rgba(255,255,255,.05);border-radius:14px;padding:26px 22px;border-top:3px solid var(--qb-blue);}
.qb-brand .qb-tech-card:nth-child(2){border-color:var(--qb-green)}.qb-brand .qb-tech-card:nth-child(3){border-color:var(--qb-orange)}.qb-brand .qb-tech-card:nth-child(4){border-color:var(--qb-magenta)}
.qb-brand .qb-tech-card svg{width:36px;height:36px;margin-bottom:14px;stroke:var(--qb-blue);}
.qb-brand .qb-tech-card:nth-child(2) svg{stroke:#2DBE6C}.qb-brand .qb-tech-card:nth-child(3) svg{stroke:#F08A1E}.qb-brand .qb-tech-card:nth-child(4) svg{stroke:#E04A9C}
.qb-brand .qb-tech-card strong{display:block;font-size:16.5px;font-weight:800;color:#fff;margin-bottom:8px;}
.qb-brand .qb-tech-card span{font-size:13.5px;color:#aeb6bd;}

/* ---------- produkty (zaoblené karty, pill tlačítka) ---------- */
.qb-brand .qb-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.qb-brand .qb-prod{display:flex;flex-direction:column;background:#fff;border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;transition:box-shadow .3s,transform .3s;}
.qb-brand .qb-prod:hover{box-shadow:0 12px 30px rgba(29,35,39,.12);transform:translateY(-3px);}
.qb-brand .qb-prod-img{aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;background:#fff;}
.qb-brand .qb-prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.qb-brand .qb-prod:hover .qb-prod-img img{transform:scale(1.05);}
.qb-brand .qb-prod-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1;text-align:center;}
.qb-brand .qb-prod-body h3{font-size:15.5px;font-weight:800;}
.qb-brand .qb-prod-cat{font-size:13px;color:#999;font-weight:500;margin-bottom:12px;}
.qb-brand .qb-btn{margin-top:auto;display:inline-block;text-align:center;background:var(--qb-blue);color:#fff;font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:999px;transition:background .25s;}
.qb-brand .qb-prod:hover .qb-btn{background:var(--qb-dark);}
.qb-brand .qb-more{text-align:center;margin-top:26px;}
.qb-brand .qb-more .qb-btn{padding:13px 34px;font-size:14.5px;}
.qb-brand .qb-more .qb-btn:hover{background:var(--qb-dark);}

/* ---------- příběh značky ---------- */
.qb-brand .qb-story{background:var(--qb-grey);padding:76px 28px 84px;}
.qb-brand .qb-story-inner{max-width:1200px;margin:0 auto;text-align:center;}
.qb-brand .qb-story-inner h2{font-size:34px;font-weight:800;margin-bottom:10px;}
.qb-brand .qb-story-inner h2 span{color:var(--qb-blue);}
.qb-brand .qb-story-sub{font-size:16px;color:#666;font-weight:500;margin-bottom:34px;}
.qb-brand .qb-story-cols{display:flex;flex-direction:column;gap:16px;max-width:960px;margin:0 auto;text-align:left;}
.qb-brand .qb-story-text{font-size:16px;line-height:1.8;color:#555;text-align:left;margin:0;}
.qb-brand .qb-story-logo{width:240px;margin:0 auto 30px;background:#fff;border-radius:14px;padding:16px 26px;}
.qb-brand .qb-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;}
.qb-brand .qb-milestone{background:#fff;border-radius:14px;padding:30px 26px 28px;text-align:left;border-top:4px solid var(--qb-blue);}
.qb-brand .qb-milestone:nth-child(2){border-color:var(--qb-green)}.qb-brand .qb-milestone:nth-child(3){border-color:var(--qb-orange)}.qb-brand .qb-milestone:nth-child(4){border-color:var(--qb-magenta)}
.qb-brand .qb-year{font-size:34px;font-weight:800;color:var(--qb-blue);margin-bottom:10px;line-height:1.1;}
.qb-brand .qb-milestone:nth-child(2) .qb-year{color:var(--qb-green)}.qb-brand .qb-milestone:nth-child(3) .qb-year{color:var(--qb-orange)}.qb-brand .qb-milestone:nth-child(4) .qb-year{color:var(--qb-magenta)}
.qb-brand .qb-milestone p{font-size:15px;line-height:1.6;color:#666;}

/* ---------- CTA ---------- */
.qb-brand .qb-cta{background:linear-gradient(115deg,#0B6FA3,var(--qb-blue));color:#fff;text-align:center;padding:48px 28px;}
.qb-brand .qb-cta h2{color:#fff;font-size:26px;font-weight:800;margin-bottom:6px;}
.qb-brand .qb-cta p{color:#dff2fc;font-weight:600;margin-bottom:20px;}
.qb-brand .qb-cta a{display:inline-block;background:#fff;color:var(--qb-blue);font-weight:800;font-size:15px;padding:13px 42px;border-radius:999px;transition:background .25s,color .25s;}
.qb-brand .qb-cta a:hover{background:var(--qb-dark);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:1000px){
  .qb-brand .qb-tech-grid{grid-template-columns:repeat(2,1fr);}
  .qb-brand .qb-timeline{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .qb-brand .qb-prods{grid-template-columns:repeat(2,1fr);}
  .qb-brand .qb-circles{justify-content:flex-start;}
}
@media (max-width:768px){
  .qb-brand .qb-header{justify-content:center;text-align:center;}
  .qb-brand .qb-h2{font-size:23px;}
}
@media (max-width:560px){
  .qb-brand .qb-slider{padding-top:0;height:auto;}
  .qb-brand .qb-slide{position:relative;display:none;opacity:1;visibility:visible;animation:none;flex-direction:column;padding:28px 20px 60px;}
  .qb-brand .qb-slide:first-child{display:flex;}
  .qb-brand .qb-slide::before{display:none;}
  .qb-brand .qb-slide-text{width:100%;padding:0;}
  .qb-brand .qb-slide-text .qb-tag{font-size:12px;padding:5px 12px;margin-bottom:10px;}
  .qb-brand .qb-slide-text h2{font-size:26px;}
  .qb-brand .qb-slide-text p{font-size:15px;margin-bottom:16px;}
  .qb-brand .qb-pill{font-size:14px;padding:10px 24px;}
  .qb-brand .qb-slide-img{position:static;transform:none;width:100%;height:auto;margin-top:22px;border-radius:18px;padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);}
  .qb-brand .qb-slide-img img{width:auto;height:200px;}
  .qb-brand .qb-dots{display:none;}
  .qb-brand .qb-prods{grid-template-columns:1fr;}
  .qb-brand .qb-tech-grid{grid-template-columns:1fr;}
  .qb-brand .qb-timeline{grid-template-columns:1fr;}
}

/* ---------- guardy šablony Upgates (stejné jako u ostatních brand pages) ---------- */
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky; hero má svůj
   vlastní titulek, takže duplicitní nadpis skryjeme. */
body:has(.qb-brand-wrapper) h1.ph-main,
body:has(.qb-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.qb-brand .qb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.qb-brand-wrapper) { max-width: none; }
/* Nadpisy: šablona tlačí vlastní font a u diakritiky pak padá na tučný fallback
   (řešeno u Tesly). Vynutíme Inter i pro nadpisy uvnitř brand page. */
.qb-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Inter', system-ui, sans-serif; }