/* ============================================================
   VyčistímKlímu — čistá téma
   Dizajnový jazyk prevzatý z vycistimradiator.sk (Manrope,
   vzdušné sekcie, pilulkové tlačidlá, pokojné plochy),
   farebne preložený do modrej: ich zelená #12803D bola
   prevedená na #125280 pri zachovanej sýtosti a tmavosti,
   takže akcent má rovnakú váhu, len iný odtieň.

   Načítava sa AŽ ZA style.css, takže ho prepisuje.
   Vrátenie späť = odstrániť jeden <link> na stránkach.
   ============================================================ */

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

:root{
  /* --- akcent: modrý ekvivalent ich zelenej --- */
  --accent:#125280;
  --accent-strong:#155F94;
  --accent-deep:#0F4267;
  --accent-fixed:#1C6FA8;
  --accent-tint-10:rgba(18,82,128,.10);
  --accent-tint-20:rgba(18,82,128,.18);

  /* --- atrament: takmer čierna ako u radiátora --- */
  --primary:#101820;
  --primary-container:#1B2530;
  --primary-deep:#0A1118;
  --on-surface:#101820;
  --on-surface-variant:#4A5763;
  --outline:#5F6B78;
  --outline-variant:#DCE3E6;

  /* --- plochy: biela + jemný nádych, žiadne sivé polia --- */
  --surface:#FFFFFF;
  --surface-bright:#FFFFFF;
  --surface-container-lowest:#FFFFFF;
  --surface-container-low:#F7F9FA;
  --surface-container:#F2F5F7;
  --surface-container-high:#ECF0F2;
  --surface-container-highest:#E6EBEE;
  --surface-dim:#E6EBEE;

  /* --- tiene: jemnejšie, menej „plávania" --- */
  --shadow-sm:0 2px 10px rgba(16,24,32,.04);
  --shadow-md:0 8px 24px rgba(16,24,32,.06);
  --shadow-lg:0 18px 48px rgba(16,24,32,.08);
  --shadow-xl:0 28px 70px rgba(16,24,32,.10);

  --tc-head:'Manrope','Inter',system-ui,sans-serif;
}

/* ---------- typografia ---------- */
h1,h2,h3,.stl,.hero h1,.calc-price,.bc-num,.trust-num,.hero-stat h3{
  font-family:var(--tc-head);
  font-weight:800;
  letter-spacing:-.028em;
  color:var(--primary);
}
h1,.hero h1{line-height:.99}
h2,.stl{line-height:1.06}

/* malé nadpisy sekcií: veľké písmená s pomlčkou pred, ako u radiátora */
.slbl{
  font-family:var(--tc-head);
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:.6rem;
}
.slbl::before{
  content:"";width:26px;height:1.5px;background:var(--accent);flex-shrink:0;
}

.sdsc{color:var(--on-surface-variant);line-height:1.65}

/* ---------- tlačidlá: plná pilulka ---------- */
.btn,.cbtn,.calc-cta,.vk-promo-cta,.btn-p,.btn-acc{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;font-size:.94rem;
  border-radius:999px;
  transition:background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.btn-p,.cbtn,.calc-cta{
  background:var(--accent);color:#fff;border:0;
  box-shadow:0 2px 10px rgba(18,82,128,.18);
}
.btn-p:hover,.cbtn:hover,.calc-cta:hover{
  background:var(--accent-strong);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(18,82,128,.26);
}
.btn-o{
  background:transparent;color:var(--primary);
  border:1px solid var(--outline-variant);
}
.btn-o:hover{background:var(--surface-container-low);border-color:var(--outline)}

/* ---------- plochy a rozostupy: vzdušnejšie ---------- */
section{padding-block:clamp(4rem,9vw,8rem)}
.hero{padding-top:clamp(5rem,11vw,9rem);background:#fff}

/* striedanie bielej a jemného nádychu namiesto sivých pásov */
#sluzby,#preco,#recenzie{background:#fff}
#postup,#otazky,#kalkulacka{background:var(--surface-container-low)}

/* ---------- karty: tenká linka, bez ťažkých tieňov ---------- */
.cc,.bento-card,.client-card,.calc-wrap,.faq-item{
  background:#fff;
  border:1px solid var(--outline-variant);
  box-shadow:none;
  border-radius:18px;
  transition:border-color .25s ease,transform .25s ease;
}
.cc:hover,.bento-card:hover,.client-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* cenovka */
.cprice{font-family:var(--tc-head);font-weight:800;letter-spacing:-.03em}
.cprice-old{color:var(--outline);font-weight:500}
.csale{background:var(--accent);color:#fff;font-weight:700;letter-spacing:.02em}

/* ---------- navigácia ---------- */
#navbar{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--outline-variant)}
.nav-links a{color:var(--on-surface-variant);font-weight:500}
.nav-links a:hover{color:var(--primary)}
.nav-cta{background:var(--accent);color:#fff;border-radius:999px;font-weight:600}
.nav-cta:hover{background:var(--accent-strong)}

/* ---------- pokoj: dekorácie preč ----------
   Čistota predlohy stojí na tom, že tam nič nepobehuje. */
.bubbles,.particle-canvas,.cursor-spotlight,.confetti-canvas,.deco-floats{
  display:none !important;
}

/* ---------- pätička a tmavé pásy ---------- */
.cta-section,footer{background:var(--primary);color:#fff}
.cta-section h2,footer h2{color:#fff}

@media(prefers-reduced-motion:reduce){
  .btn,.cbtn,.cc,.bento-card,.client-card{transition:none}
  .btn-p:hover,.cbtn:hover,.cc:hover{transform:none}
}

/* ---------- opravy špecificity ----------
   Pôvodné pravidlá sú zacielené presnejšie, tak ich musím
   prebiť rovnako presným zacielením, nie !important. */

/* tlačidlo v navigácii: akcent namiesto tmavého prechodu */
#navbar .nav-cta,.nav-links .nav-cta{
  background:var(--accent);
  background-image:none;
  color:#fff;
  border-radius:999px;
  font-weight:600;
}
#navbar .nav-cta:hover,.nav-links .nav-cta:hover{
  background:var(--accent-strong);
  background-image:none;
}

/* tretí riadok nadpisu: v predlohe je to plná akcentová farba.
   Pôvodne tu bol tyrkysový prechod cez background-clip:text,
   ktorý po zmene palety nesedel. */
h1 .blue,.hero h1 .blue{
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--accent);
  -webkit-text-fill-color:var(--accent);
}

/* Pôvodné .nav-cta má background s !important (style.css:103),
   takže sa inak prebiť nedá. Rovnaká váha, nie viac. */
#navbar .nav-cta{
  background:var(--accent) !important;
  border-radius:999px !important;
  text-transform:none !important;
  font-size:.88rem !important;
  letter-spacing:0 !important;
  padding:.62rem 1.4rem !important;
  box-shadow:0 2px 10px rgba(18,82,128,.2);
}
#navbar .nav-cta:hover{
  background:var(--accent-strong) !important;
  box-shadow:0 8px 22px rgba(18,82,128,.3);
}

/* ============================================================
   PRESNÉ ROZMERY Z vycistimradiator.sk
   Odmerané priamo na ich stránke, nie odhadnuté:
     hero     padding 140px / 96px, pozadie #F7F9F8
     mriežka  463px + 424px, medzera 64px, zvislo na stred
     nadpis   66.3px, riadkovanie 0.98, prestrkanie -0.028em, 800
     text     18px, riadkovanie 1.625, farba #4A5763, max 576px
     obrázok  štvorec, zaoblenie 40px
   ============================================================ */

.hero{
  min-height:auto;
  background:#F7F9F8;
  padding:clamp(6rem,10vw,140px) clamp(1.25rem,4vw,3rem) clamp(4rem,7vw,96px);
}
.hero-wrap{
  grid-template-columns:1.09fr 1fr;
  gap:64px;
  align-items:center;
  max-width:1060px;
  text-align:left;
}

.hero h1{
  font-size:clamp(2.4rem,5.4vw,66px);
  line-height:.98;
  letter-spacing:-.028em;
  font-weight:800;
  margin-bottom:1.35rem;
}

.hero-sub{
  font-size:18px;
  line-height:1.625;
  color:#4A5763;
  max-width:576px;
  margin-inline:0;
}

/* obrázok: štvorec s výrazným zaoblením */
.hero-visual,.hero-card{
  border-radius:40px;
  overflow:hidden;
}
.hero-card img,.hero-visual img{
  aspect-ratio:1/1;
  object-fit:cover;
  width:100%;
  border-radius:40px;
}

/* tlačidlá v hero: plná pilulka + textový odkaz so šípkou */
.hero-btns{justify-content:flex-start;gap:1.25rem;align-items:center}
.hero-btns .btn-o{
  background:transparent;border:0;padding:0;
  color:var(--primary);font-weight:600;
}
.hero-btns .btn-o:hover{background:transparent;color:var(--accent)}

/* malý nadpis nad hlavným */
.hero .slbl,.hero-badge{
  background:transparent;border:0;padding:0;
  margin-bottom:1.1rem;
}

/* sekcie: ich rytmus */
section{padding-block:clamp(4rem,8vw,128px)}

/* ---------- karta „najobľúbenejšie" ----------
   Pôvodne mala tmavý gradient z --primary. Po zmene palety na
   takmer čiernu pôsobila tvrdo a vytŕčala. Predloha má všetky
   karty rovnaké, tak ju zosvetľujem a dôležitosť označujem
   len obrysom v akcentovej farbe.
   Zároveň sa jej odznak prekrýval s odznakom akcie — posúvam ho. */
.cc.pop{
  background:#fff;
  color:var(--on-surface);
  border:1.5px solid var(--accent);
  box-shadow:none;
}
.cc.pop h3,.cc.pop p,.cc.pop .cft li,.cc.pop .cprice{color:inherit}
.cc.pop h3,.cc.pop .cprice{color:var(--primary)}
.cc.pop p,.cc.pop .cft li{color:var(--on-surface-variant)}
.cc.pop .cft li::before{color:var(--accent)}
.cc.pop .ci{background:var(--accent-tint-10)}
.cc.pop .ci svg{color:var(--accent) !important}
.cc.pop .cprice small{color:var(--outline)}
.cc.pop .ctag{background:var(--accent-tint-10);color:var(--accent-deep)}

/* odznak presunúť doľava hore, nech nekoliduje s akciou vpravo */
.cc.pop::before{
  top:1.1rem;left:1.1rem;right:auto;
  background:var(--accent);color:#fff;
  border-radius:999px;
  padding:.3rem .75rem;
  letter-spacing:.08em;
}
/* akciový odznak drží pravý horný roh */
.cc .csale{top:1.1rem;right:1.1rem;left:auto;border-radius:999px}
/* v karte s odznakom posunúť obsah nižšie, nech sa text nelepí */
.cc.pop .ci{margin-top:1.6rem}

/* ---------- mobil a tablet ----------
   Desktopový grid vyššie (1.09fr 1fr) prebíjal pravidlo zo style.css pre šírku do 1024 px,
   takže hero mal aj na mobile dva stĺpce a nadpis sa lámal uprostred slov. */
@media (max-width:1024px){
  .hero-wrap{grid-template-columns:1fr;gap:2.5rem;max-width:640px}
  .hero-visual,.hero-card{max-width:520px}
}
/* slovo z animovaných písmen sa nesmie rozdeliť */
.hero h1 .word{display:inline-block;white-space:nowrap}