/* ==========================================================================
   Spoločné komponenty. Hodnoty výhradne z tokens.css.
   Farby sa preberajú zo sekcie (--sec-*), takže komponent funguje
   na svetlom aj tmavom pozadí bez vlastných variantov.
   Breakpointy: 600 / 900 / 1200 px, mobile first.
   ========================================================================== */

/* ============================================================ Tlačidlá */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid currentColor;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--sec-fg);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn:hover { background: var(--sec-fg); color: var(--sec-bg); border-color: var(--sec-fg); }

.btn--dark  { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.btn--dark:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-on-dark); }

/* Hlavná výzva (CTA): akcentová farba z brand kitu */
.btn--cta { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-on-dark); }
.btn--cta:hover { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }

.btn--brand { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }
.btn--brand:hover { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }

.btn--light { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); }
.btn--light:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }

.btn__icon { color: inherit; font-weight: var(--fw-regular); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); }

/* Textový odkaz so šípkou */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid currentColor;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.link-arrow:hover { color: var(--color-brand-dark); }

/* Odkaz na konci karty: „Pozrieť CIJ riešenia →“ */
.link-more {
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.link-more::after { content: "→"; color: var(--sec-accent); transition: transform var(--duration) var(--ease); }
.link-more:hover::after { transform: translateX(4px); }

/* ============================================================ Hlavička */

.logo { display: inline-flex; flex-shrink: 0; }
.logo img { width: auto; height: var(--logo-h); }
@media (min-width: 600px) { .logo img { height: var(--logo-claim-h); } }
.site-footer .logo img { height: var(--logo-claim-h); }

.site-header {
  position: sticky;
  top: var(--admin-bar, 0px);
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: var(--border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
}
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--space-7); }
.site-nav a { font-size: var(--fs-nav); font-weight: var(--fw-bold); padding-block: var(--space-2); border-bottom: 1px solid transparent; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-brand); }
.site-header__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-min-h);
  padding: 0 var(--space-4);
  border: var(--border);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.menu-toggle__bars { width: 18px; height: 10px; border-block: 2px solid currentColor; position: relative; }

.mobile-menu {
  border-top: var(--border);
  padding-block: var(--space-5) var(--space-7);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) {
  display: block;
  padding-block: var(--space-4);
  border-bottom: var(--border);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
}
.mobile-menu .btn { margin-top: var(--space-6); width: 100%; }

@media (min-width: 1200px) {
  .site-nav, .site-header__cta { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ------------------------------------------ Rozbaľovacie menu (desktop) */

.site-nav > ul { align-items: stretch; }
.site-nav__item { display: flex; align-items: center; min-height: var(--header-h); }
.site-nav__item--drop { position: relative; }
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  color: inherit;
}
.site-nav__toggle::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}
.site-nav__toggle[aria-current="true"] { border-bottom-color: var(--color-brand); }
.site-nav__item.is-open .site-nav__toggle::after { transform: translateY(1px) rotate(-135deg); }

/* Veľký panel na celú šírku (Technológie) */
.mega {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--color-bg);
  border-top: var(--border);
  border-bottom: var(--border);
  box-shadow: 0 24px 40px rgb(2 37 47 / .08);
}
.site-nav__item.is-open > .mega,
.site-nav__item.is-open > .dropdown { display: block; }
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); padding-block: var(--space-9); }
.mega__col { border-top: 2px solid var(--color-brand); padding-top: var(--space-4); }
.mega__title { display: block; font-size: var(--fs-h6); font-weight: var(--fw-bold); line-height: var(--lh-h5); border: 0 !important; }
.mega__title:hover { color: var(--color-brand-dark); }
.mega__list { margin-top: var(--space-4); }
.site-nav .mega__list { display: block; }
.mega__list a { display: block; padding-block: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--color-text); border: 0 !important; }
.mega__list a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 4px; }
.mega__foot { display: flex; justify-content: flex-end; padding-bottom: var(--space-7); }
.site-nav .mega__foot a { border: 0; }

/* Malý rozbaľovací zoznam (Odvetvia) */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(var(--space-5) * -1);
  min-width: 300px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg);
  border: var(--border);
  border-top: 2px solid var(--color-brand);
  box-shadow: 0 24px 40px rgb(2 37 47 / .08);
}
.site-nav .dropdown ul { display: block; }
.dropdown a { display: block; padding-block: var(--space-3); font-size: var(--fs-small); border: 0 !important; border-bottom: var(--border) !important; }
.dropdown li:last-child a { border-bottom: 0 !important; }
.dropdown a:hover { color: var(--color-brand-dark); }
/* Otvorenie pri prejdení myšou (klik a klávesnicu rieši skript) */
@media (hover: hover) and (min-width: 1200px) {
  .site-nav__item:hover > .mega,
  .site-nav__item:hover > .dropdown { display: block; }
  .site-nav__item:hover > .site-nav__toggle::after { transform: translateY(1px) rotate(-135deg); }
}

/* ------------------------------------------- Rozbaľovacie menu (mobil) */

.mnav-group { border-bottom: var(--border); }
.mnav-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-4);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  list-style: none;
  cursor: pointer;
}
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-group > summary::after { content: "+"; font-size: var(--fs-h4); line-height: 1; color: var(--color-brand-dark); }
.mnav-group[open] > summary::after { content: "−"; }
.mobile-menu .mnav-group a:not(.btn) { font-size: var(--fs-body); font-weight: var(--fw-regular); padding-block: var(--space-3); }
.mobile-menu .mnav-sub { padding-left: var(--space-5); padding-bottom: var(--space-3); }
.mobile-menu .mnav-sub .mnav-title { font-weight: var(--fw-bold) !important; }
.mobile-menu .mnav-sub ul a { padding-left: var(--space-4); color: var(--color-text); border-bottom: 0 !important; }

/* ============================================================== Pätička */

.site-footer {
  --sec-accent: var(--color-brand);
  background: var(--color-footer);
  color: var(--color-on-dark);
  padding-block: var(--space-12) var(--space-7);
  --sec-muted: var(--color-on-dark-muted);
  --sec-line: var(--color-dark-line);
}
.site-footer__grid { display: grid; gap: var(--space-8); }
.site-footer__brand p { margin-top: var(--space-5); color: var(--color-on-dark-muted); font-size: var(--fs-small); line-height: var(--lh-body); }
.site-footer h2 { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer li a { display: inline-block; padding-block: var(--space-1); font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.site-footer li a:hover { color: var(--color-on-dark); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-11);
  padding-top: var(--space-6);
  border-top: var(--border-dark);
  font-size: var(--fs-caption);
  color: var(--color-on-dark-muted);
}
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-11); } }

/* ================================================================= Hero */

.hero { background: var(--color-surface); overflow: hidden; }
/* Výška hero: vyplní obrazovku tak, aby pás s údajmi pod ním bol ešte vidieť dole.
   Najmenej 560 px, najviac 890 px. */
:root { --admin-bar: 0px; }
.admin-bar { --admin-bar: 32px; }
@media (max-width: 782px) { .admin-bar { --admin-bar: 46px; } }
.hero { --hero-h: clamp(560px, calc(100svh - var(--header-h) - var(--admin-bar) - var(--stats-h)), 890px); }
/* Homepage: pod hero je vyšší tmavý pás s číslami (222 px) */
@media (min-width: 1200px) { .hero--home { --stats-h: 14rem; } }
.hero__grid {
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
  padding-block: var(--space-12) var(--section-y);
}
.hero h1 { margin-block: var(--space-6) var(--space-7); max-width: 13em; }
.hero .t-lead { max-width: var(--measure); }
.hero__media { min-height: 360px; align-self: stretch; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: .92fr 1.08fr; min-height: var(--hero-h); padding-block: var(--space-12); }
  .hero__media { min-height: 520px; }
}

/* Homepage: väčší titulok, biela textová polovica s mriežkou a fotka do okraja */
.hero--home { background: var(--color-bg); }
.hero--home h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 9em; }
.hero--home .hero__copy { position: relative; }
@media (min-width: 900px) {
  /* rovnaká výška ako hero podstránok */
  .hero--home .hero__grid { grid-template-columns: 1.12fr .88fr; column-gap: 0; min-height: var(--hero-h); padding-block: 0; align-items: stretch; }
  .hero--home .hero__copy { display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-11); padding-right: var(--gap-lg); }
  .hero--home .hero__media { margin-right: calc(var(--container-gutter) * -1); min-height: 100%; }
}

/* Produkt: najväčší titulok s podtitulkom */
.hero--product h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }

.hero__sub { display: block; margin-top: var(--space-5); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-medium); }

/* ========================================== Zástupná plocha pre fotku */

.media {
  position: relative;
  min-height: 220px;
  background: var(--media-light);
  color: var(--color-on-dark);
  overflow: hidden;
}
.media--dark { background: var(--media-dark); }
/* Skutočná fotografia (produkt, obrázok z knižnice médií) */
.media--image { background: var(--color-surface); }
.media--image img { width: 100%; height: 100%; object-fit: cover; }
.card__media.media--image img,
.hero__media.media--image img { object-fit: contain; padding: var(--space-4); }
.card__media.media--image, .hero__media.media--image { background: var(--color-bg); }
.media--grid { background: var(--media-grid), var(--color-surface); color: var(--color-ink); }
.media__label {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-5);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
/* Plocha s textom dole: „SERVIS SO ZÁZEMÍM“ */
.media--content { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pad-panel); }
.media__title { font-size: var(--fs-h3); line-height: var(--lh-h2); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); text-transform: uppercase; }

.media--ink { color: var(--color-ink); }
.media--ink p { color: var(--color-text); max-width: var(--measure); margin-top: var(--space-4); }
.media--tall { min-height: 360px; }
@media (min-width: 900px) { .media--tall { min-height: 500px; } }

/* ================================================ Pásik s údajmi (stats) */

.stats { display: grid; border-block: var(--border); }
.stat { padding-block: var(--space-6); border-bottom: 1px solid var(--sec-line); }
.stat:last-child { border-bottom: 0; }
.stat__value { display: block; margin-top: var(--space-2); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
@media (min-width: 600px) and (max-width: 899px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { padding-right: var(--space-6); border-right: 1px solid var(--sec-line); }
  .stat:nth-child(even) { padding-left: var(--space-6); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding-inline: var(--space-7); border-bottom: 0; border-right: 1px solid var(--sec-line); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}

/* Tmavý pás s veľkými číslami (homepage „Prečo LIFTEC“) */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); }
.proof__intro, .proof__item { padding: var(--space-7) var(--space-6) var(--space-7) 0; border-bottom: 1px solid var(--sec-line); }
.proof__intro { grid-column: 1 / -1; }
.proof__intro p { margin-top: var(--space-3); max-width: 18em; color: var(--sec-text); }
.proof__value { display: block; margin-block: var(--space-6) var(--space-2); font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); }
.proof__item p { font-size: var(--fs-caption); color: var(--sec-muted); }
@media (min-width: 1200px) {
  .proof { grid-template-columns: 1.15fr repeat(4, 1fr); }
  .proof__intro { grid-column: auto; display: flex; align-items: flex-end; }
  .proof__intro, .proof__item { min-height: 190px; padding: var(--space-8) var(--space-7); border-bottom: 0; border-right: 1px solid var(--sec-line); }
  .proof__intro { padding-left: 0; }
  .proof__item:last-child { border-right: 0; }
}

/* ============================================== Hlavička sekcie */

.section-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-11); }
.section-head h2 { max-width: 17em; }
.section-head__desc { margin-top: var(--space-6); max-width: var(--measure); color: var(--sec-muted); }
.section-head--rule { padding-top: var(--space-6); border-top: 1px solid var(--sec-line); }
@media (min-width: 900px) {
  .section-head { grid-template-columns: .34fr 1fr; gap: var(--gap-md); }
  .section-head--rule { grid-template-columns: .6fr 1.4fr; }
}

/* ================================================================ Mriežky */

.grid { display: grid; gap: var(--gap-grid); }
@media (min-width: 600px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Bunky oddelené čiarou (bez medzery) */
.cells { gap: 1px; background: var(--sec-line); border: 1px solid var(--sec-line); }
.cells > * { background: var(--sec-bg); }

/* Dva stĺpce: text a vizuál */
.split { display: grid; gap: var(--gap-lg); align-items: start; }
.split--tight { gap: var(--gap-grid); align-items: stretch; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-list { grid-template-columns: .8fr 1.2fr; }
  .split--wide-narrow { grid-template-columns: 1.1fr .9fr; }
}
.split__intro h2 { margin-block: var(--space-4) var(--space-6); }
.split__intro p { color: var(--sec-text); max-width: var(--measure); }

/* ================================================================= Karty */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--pad-card);
  background: var(--sec-card);
  color: var(--sec-fg);
}
.card p { color: var(--sec-muted); }
.card__media { min-height: 200px; margin-block: var(--space-3); }
.card__media--sm { min-height: calc(var(--space-13) + var(--space-10)); } /* 152: malé karty (súvisiace modely) */
.card__title { margin-top: var(--space-2); }
.card .link-more { margin-top: auto; padding-top: var(--space-6); }
/* Tlačidlo na konci karty (produkty) */
.card__btn { margin-top: auto; align-self: flex-start; }
.card .facts { margin-bottom: var(--space-3); }
.card.is-dark, .panel.is-dark { background: var(--color-dark); }
.card--tall { min-height: 440px; }
/* Typ zariadenia vždy na dva riadky, aby fotky v rade začínali na rovnakej výške */
.card--tall > .eyebrow { min-height: calc(2em * var(--lh-tight)); }
@media (min-width: 900px) { .card--tall { min-height: 510px; } }

/* Karta s vizuálom v rohu a textom dole (homepage „Technológie“) */
.card--corner { position: relative; min-height: 360px; justify-content: flex-end; overflow: hidden; }
.card--corner .card__media { position: absolute; inset: 0 0 45% 45%; margin: 0; min-height: 0; }
.card--corner .eyebrow { position: absolute; top: var(--pad-card); left: var(--pad-card); }
.card--corner p { max-width: 28em; }
@media (min-width: 900px) { .card--corner { min-height: 440px; } }

/* Karta realizácie: obrázok hore, text dole */
.card--case { padding: 0; gap: 0; }
.card--case .card__media { margin: 0; min-height: 290px; }
.card--case .card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--pad-card); }

/* ================================================= Riadky so zoznamom */

.rows { border-top: 1px solid var(--sec-line); }
.row {
  display: grid;
  grid-template-columns: var(--space-9) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--sec-line);
}
.row__title { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
.row__text { grid-column: 2 / -1; color: var(--sec-muted); font-size: var(--fs-small); line-height: var(--lh-body); }
.row__end { color: var(--sec-muted); font-size: var(--fs-small); }
.row__text + .row__end { grid-column: 3; grid-row: 1; }
.row__end.num { color: var(--sec-accent); }
/* Na mobile ide dlhší popis vpravo pod nadpis (šípky a čísla ostávajú vpravo) */
@media (max-width: 599px) {
  .row > .row__end:not([aria-hidden]):not(.num) { grid-column: 2 / -1; grid-row: auto; }
}
a.row { transition: background-color var(--duration) var(--ease); }
a.row:hover { background: var(--color-surface-2); }
a.row:hover .row__end { color: var(--sec-accent); }

/* Veľké riadky s popisom vedľa (homepage „Riešenia“) */
.rows--large .row { min-height: 150px; }
.rows--large .row__title { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.rows--large .row__end { font-size: var(--fs-h4); color: var(--sec-fg); }
@media (min-width: 900px) {
  .rows--large .row { grid-template-columns: var(--space-12) 1.15fr 1fr var(--space-9); }
  .rows--large .row__text { grid-column: auto; max-width: 30em; }
  .rows--large .row__text + .row__end { grid-column: auto; grid-row: auto; }
}

/* Riadky v boxe (so vnútorným odsadením) */
.rows--boxed { background: var(--sec-card); border-top: 0; }
.rows--boxed .row { padding-inline: var(--pad-card); }

/* Riadky bez čísla na začiatku (číslo alebo šípka vpravo) */
.rows--plain .row { grid-template-columns: 1fr auto; }

/* Kompaktný zoznam odkazov */
.rows--compact .row { grid-template-columns: 1fr auto; padding-block: var(--space-4); }
.rows--compact .row__title { font-size: var(--fs-small); font-weight: var(--fw-regular); }

/* ========================================= Kroky (proces 01 až 0N) */

.steps { display: grid; border-top: 1px solid var(--sec-line); }
.step {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--sec-line);
}
.step h3 { margin-block: var(--space-9) var(--space-3); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.step p { font-size: var(--fs-small); color: var(--sec-text); line-height: var(--lh-body); }
@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step { padding-right: var(--space-7); }
}
@media (min-width: 1200px) {
  .steps { grid-template-columns: repeat(var(--steps, 4), 1fr); }
  .step { min-height: 260px; padding: var(--space-7); border-bottom: 0; border-right: 1px solid var(--sec-line); }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: 0; }
  .step h3 { margin-top: var(--space-12); }
}

/* ============================================== Dlaždice (materiály) */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--sec-line); border-left: 1px solid var(--sec-line); }
.tile { min-height: 135px; padding: var(--space-6) var(--space-5); border-right: 1px solid var(--sec-line); border-bottom: 1px solid var(--sec-line); font-weight: var(--fw-bold); }
.tile__icon { display: block; width: 34px; height: 34px; margin-bottom: var(--space-6); border: var(--border-strong); border-radius: var(--radius-pill); }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(6, 1fr); } }

/* ================================================= Boxy (panely) */

.panel { padding: var(--pad-panel); background: var(--sec-card); }
.panel--surface { background: var(--color-surface); }
.panel__title { margin-block: var(--space-12) var(--space-5); }
.panel h2 { margin-block: var(--space-4) var(--space-6); }
.panel p { color: var(--sec-text); }

/* Mriežka krátkych bodov („Regionálni technici | Preventívna údržba“) */
.points { display: grid; margin-top: var(--space-8); border-top: 1px solid var(--sec-line); }
.points li { padding: var(--space-5) var(--space-1); border-bottom: 1px solid var(--sec-line); font-size: var(--fs-small); }
@media (min-width: 600px) { .points { grid-template-columns: 1fr 1fr; } }

/* Veľké číslo (homepage „30+ rokov“) */
.metric-big { font-size: var(--fs-display); line-height: 1; letter-spacing: var(--ls-display); font-weight: var(--fw-medium); }
.metric-big span { color: var(--color-brand); }

.status { display: flex; justify-content: space-between; gap: var(--space-4); }

/* ============================================ CTA pás pred pätičkou */

.cta-band {
  --sec-fg: var(--color-on-dark);
  --sec-bg: var(--color-brand);
  position: relative;
  isolation: isolate;
  background: var(--color-brand);
  color: var(--color-on-dark);
  padding-block: var(--space-13);
  overflow: hidden;
}
/* Pattern zo symbolu, jemne (brand kit: viditeľnosť 10 až 40 %) */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dlaždica vytiahnutá z brand kitu (strana 6), plynule sa opakuje */
  background: url("img/pattern-liftec.svg") 0 0 / 112px auto;
  opacity: .16;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.cta-band .eyebrow { color: var(--color-on-dark); }
.cta-band__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-7); }
.cta-band h2 { margin-top: var(--space-4); max-width: 16em; }
.cta-band p { margin-top: var(--space-5); max-width: var(--measure); }

/* ======================================================================
   Komponenty pre podstránky (produkty, odvetvia, integrácia, firma, blog)
   ====================================================================== */

/* ---------------------------------------------- Mriežka so 6 stĺpcami */
@media (min-width: 600px)  { .grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid--6 { grid-template-columns: repeat(6, 1fr); } }

/* Bunky na podfarbenom pozadí sú biele */
.cells--card > * { background: var(--sec-card); }

/* --------------------------- Bunka: číslo hore, nadpis a text dole */
.cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 240px;
  padding: var(--pad-card);
}
.cell__title { margin-top: auto; padding-top: var(--space-8); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
.cell__title--lg { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.cell__value { margin-top: auto; padding-top: var(--space-8); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }
.cell p { font-size: var(--fs-small); color: var(--sec-muted); line-height: var(--lh-body); }
.cell--short { min-height: 150px; }
.cell__icon { position: relative; width: 48px; height: 48px; margin-bottom: var(--space-4); border: var(--border-strong); }
.cell__icon::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; background: var(--color-brand); }

/* ------------------------------------------------- Štítok na karte */
.card { position: relative; }
/* Štítok leží v ľavom hornom rohu fotky, karty v rade ostávajú zarovnané */
.card__tag {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--color-brand-dark);
  color: #fff;
  font-size: .8125rem; /* 13 px: výnimka z minima --fs-micro, štítok na fotke nemá prekrývať produkt */
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------- Krátke údaje (popis + hodnota) */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--sec-line); }
.facts--3 { grid-template-columns: repeat(3, 1fr); }
.facts dt { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--sec-muted); }
.facts dd { margin: var(--space-1) 0 0; font-size: var(--fs-small); font-weight: var(--fw-bold); }

/* --------------------------------------------------------- Štítky */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.tags li { padding: var(--space-2) var(--space-3); border: var(--border-strong); font-size: var(--fs-caption); font-weight: var(--fw-bold); }

/* -------------------------------------------------------- Tabuľka */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 760px; border-collapse: collapse; border-top: 1px solid var(--sec-line); font-size: var(--fs-caption); }
.table th, .table td { padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--sec-line); text-align: left; vertical-align: top; }
.table td + td, .table th + td, .table th + th { border-left: 1px solid var(--sec-line); }
.table thead th { background: var(--color-navy); color: var(--color-on-dark); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.table tbody th { font-weight: var(--fw-regular); color: var(--sec-muted); }

/* Porovnanie modelov v kategórii: všetky modely naraz na šírku kontajnera (od 1100 px),
   písmo 13 px (výnimka z --fs-caption, minimum 12 px), na mobile sa tabuľka posúva */
.table--compare { table-layout: fixed; min-width: calc(128px + var(--cols, 4) * 96px); border-top: 0; font-size: .8125rem; line-height: 1.4; }
.table--compare th, .table--compare td { padding: var(--space-3) var(--space-3); overflow-wrap: break-word; }
.table--compare thead th { padding-block: var(--space-4); font-size: .8125rem; line-height: 1.3; letter-spacing: .01em; vertical-align: bottom; }
.table--compare thead th:first-child { width: 128px; color: var(--color-on-dark-muted); font-weight: var(--fw-regular); }
.table--compare tbody th { color: var(--sec-fg); font-weight: var(--fw-bold); }
.table--compare tbody tr > * { background: var(--sec-bg); }
.table--compare tbody tr:nth-child(even) > * { background: var(--color-surface); }
.table--compare tbody tr:hover > * { background: var(--color-brand-tint); }
.table--compare td { font-weight: var(--fw-medium); color: var(--sec-fg); }
.table--compare .table__note { display: block; margin-top: 2px; font-size: .75rem; font-weight: var(--fw-regular); color: var(--sec-muted); }
.table--compare .table__na { font-size: .75rem; font-weight: var(--fw-regular); color: var(--sec-muted); }
.table--compare tbody th:first-child, .table--compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
.table--compare tbody th:first-child { box-shadow: 1px 0 0 var(--sec-line); }
@media (min-width: 1100px) { .table--compare { min-width: 0; } }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--color-brand); }

/* --------------------------- Striedavý riadok: text a vizuál vedľa seba */
.feature-row { display: grid; border-top: 1px solid var(--sec-line); }
.feature-row__copy { padding-block: var(--space-9); }
.feature-row__copy h3 { margin-block: var(--space-4) var(--space-5); }
.feature-row__copy p { color: var(--sec-text); max-width: var(--measure); }
.feature-row .media { min-height: 320px; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; min-height: 500px; }
  .feature-row__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-11) var(--gap-lg) var(--space-11) 0; }
  .feature-row:nth-child(even) .feature-row__copy { order: 2; padding: var(--space-11) 0 var(--space-11) var(--gap-lg); }
  .feature-row .media, .feature-row .illo { min-height: 100%; }
}

/* Kompaktný riadok: úzky text vľavo, vizuál vpravo, bez striedania (servisný stack) */
@media (min-width: 900px) {
  .feature-row--compact { grid-template-columns: .78fr 1.22fr; min-height: 390px; }
  .feature-row--compact .feature-row__copy,
  .feature-row--compact:nth-child(even) .feature-row__copy { order: 0; padding: var(--space-9) var(--space-10) var(--space-9) 0; }
  .feature-row--compact > :last-child { border-left: 1px solid var(--sec-line); }
}

/* ------------------------------ Vrstva architektúry: popis a moduly */
.layer { display: grid; border-top: 1px solid var(--sec-line); }
.layer__intro { padding-block: var(--space-8) var(--space-5); }
.layer__intro h3 { margin-block: var(--space-3); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.layer__intro p { color: var(--sec-text); }
.layer__modules { display: grid; gap: var(--space-3); padding-bottom: var(--space-8); }
.module { display: flex; flex-direction: column; gap: var(--space-2); min-height: 140px; padding: var(--space-5); background: var(--color-bg); border: var(--border); }
.module b { margin-top: auto; font-size: var(--fs-h6); }
.module small { font-size: var(--fs-caption); color: var(--sec-muted); }
@media (min-width: 600px) { .layer__modules { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .layer { grid-template-columns: .7fr 1.3fr; }
  .layer__intro { padding: var(--space-9) var(--gap-md) var(--space-9) 0; }
  .layer__modules { padding: var(--space-9) 0 var(--space-9) var(--gap-md); border-left: 1px solid var(--sec-line); }
}

/* ----------------------------------- Veľké hodnoty v mriežke (parametre) */
.figures { display: grid; border-top: 1px solid var(--sec-line); border-left: 1px solid var(--sec-line); }
.figure { min-height: 150px; padding: var(--pad-card); border-right: 1px solid var(--sec-line); border-bottom: 1px solid var(--sec-line); }
.figure__value.is-pending { font-size: var(--fs-small); font-weight: var(--fw-regular); font-style: italic; color: var(--sec-muted); }
.figure__value { display: block; margin-top: var(--space-8); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); color: var(--sec-accent); }
@media (min-width: 600px) { .figures { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------- Tabuľka parametrov (dl) */
.spec-table { margin: 0; border-top: 1px solid var(--sec-line); }
.spec-table div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--sec-line); }
.spec-table dt { color: var(--sec-muted); }
.spec-table dd { margin: 0; font-weight: var(--fw-medium); }
.spec-table .is-pending { color: var(--sec-muted); font-weight: var(--fw-regular); font-style: italic; }

/* ------------------------------------------------------- Mapa pobočiek */
.map { position: relative; min-height: 360px; background: var(--media-grid), var(--color-surface); }
.section--dark .map, .is-dark .map {
  background: linear-gradient(var(--color-dark-line) 1px, transparent 1px) 0 0 / 42px 42px,
              linear-gradient(90deg, var(--color-dark-line) 1px, transparent 1px) 0 0 / 42px 42px,
              var(--color-black);
}
.map__pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.map__pin::before { content: ""; width: 13px; height: 13px; border-radius: var(--radius-pill); background: var(--color-brand); box-shadow: 0 0 0 7px var(--color-brand-glow); }
@media (min-width: 900px) { .map { min-height: 500px; } }

/* Riadky bez čísla s popisom pod nadpisom */
.rows--plain .row__text { grid-column: 1 / -1; }

/* Veľké vyhlásenia v riadkoch (manifest) */
.rows--statement .row__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-regular); letter-spacing: var(--ls-h4); }

/* ============================================================ Článok */

.article-hero { padding-block: var(--space-12) var(--space-10); }
.article-hero h1 { margin-block: var(--space-5) var(--space-7); max-width: 16em; }
.article-hero .t-lead { max-width: var(--measure-wide); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-7); margin-top: var(--space-8); font-size: var(--fs-caption); color: var(--sec-muted); }
.article-meta b { color: var(--sec-fg); }
.article-cover { min-height: 300px; }
@media (min-width: 900px) { .article-cover { min-height: 610px; } }

.article-grid { display: grid; gap: var(--space-9); padding-block: var(--space-11) var(--section-y); }
@media (min-width: 900px)  { .article-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--gap-lg); } }
@media (min-width: 1200px) { .article-grid { grid-template-columns: 220px minmax(0, var(--container-narrow)) 240px; justify-content: space-between; } }

.toc { align-self: start; }
.toc ol { margin-top: var(--space-4); border-top: var(--border); }
.toc a { display: block; padding-block: var(--space-3); border-bottom: var(--border); font-size: var(--fs-caption); color: var(--sec-muted); }
.toc a:hover { color: var(--sec-fg); }
@media (min-width: 900px) { .toc { position: sticky; top: calc(var(--header-h) + var(--space-6)); } }

.prose { font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--sec-text); }
.prose > * + * { margin-top: var(--space-5); }
.prose > .t-lead { max-width: none; margin-bottom: var(--space-9); color: var(--sec-fg); }
.prose h2 { margin-top: var(--space-12); color: var(--sec-fg); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.prose h3 { margin-top: var(--space-9); color: var(--sec-fg); }
.prose strong { color: var(--sec-fg); }
.prose a:not(.btn) { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: .15em; }
.prose a:not(.btn):hover { color: var(--sec-fg); }
.prose > .media { margin-block: var(--space-9); min-height: 300px; }
.prose blockquote { margin: var(--space-10) 0; padding: var(--space-3) 0 var(--space-3) var(--space-7); border-left: 3px solid var(--color-brand); color: var(--sec-fg); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); }
.prose > .cells { margin-block: var(--space-8); line-height: var(--lh-body); }
.prose .cell__title { color: var(--sec-fg); }

.article-aside { display: none; align-self: start; }
@media (min-width: 1200px) { .article-aside { display: block; } }
.article-aside .facts { grid-template-columns: 1fr; gap: 0; margin-top: 0; padding-top: 0; }
.article-aside .facts > div { padding-block: var(--space-4); border-bottom: 1px solid var(--sec-line); }
.article-aside .panel { margin-top: var(--space-6); }
.article-aside .panel h2 { margin-block: var(--space-8) var(--space-5); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: 0; }

/* ======================================================== Formulár dopytu */

.form-shell { display: grid; gap: var(--space-8); }
@media (min-width: 1200px) { .form-shell { grid-template-columns: 280px minmax(0, 820px); gap: var(--space-11); justify-content: center; } }

/* Ľavý panel s krokmi */
.form-rail { align-self: start; }
.form-rail__title { margin-block: var(--space-3) var(--space-6); font-size: var(--fs-h5); line-height: var(--lh-h5); }
.progress { height: 2px; margin-bottom: var(--space-6); background: var(--color-line); }
.progress__bar { display: block; height: 100%; width: 25%; background: var(--color-brand); transition: width var(--duration) var(--ease); }
.rail-steps { display: none; }
.rail-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: center; padding-block: var(--space-3); color: var(--sec-muted); }
.rail-step b { display: block; font-size: var(--fs-caption); }
.rail-step small { display: block; font-size: var(--fs-micro); }
.rail-step__num { display: grid; place-items: center; width: 28px; height: 28px; border: var(--border-strong); font-size: var(--fs-micro); }
.rail-step.is-active { color: var(--sec-fg); }
.rail-step.is-active .rail-step__num { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }
.rail-step.is-done .rail-step__num { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-dark); }
@media (min-width: 1200px) {
  .form-rail { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .rail-steps { display: block; }
}

/* Karta s krokmi */
.form-card { border: var(--border); background: var(--color-bg); }
.form-step { padding: var(--pad-panel); }
.form-step[hidden] { display: none; }
.form-step__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-7); padding-bottom: var(--space-7); margin-bottom: var(--space-7); border-bottom: var(--border); }
.form-step__head h2 { margin-block: var(--space-2); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.form-step__head p { max-width: var(--measure); color: var(--sec-muted); }
.form-step__count { font-size: var(--fs-caption); color: var(--sec-muted); white-space: nowrap; }

/* Otázka s voľbami */
.q { margin: var(--space-7) 0 0; padding: 0; border: 0; min-width: 0; }
.q legend, .field label { display: block; margin-bottom: var(--space-3); padding: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.q legend small, .field label small { font-weight: var(--fw-regular); color: var(--sec-muted); }
.choices { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .choices { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: block;
  min-height: 58px;
  padding: var(--space-4);
  border: var(--border);
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.choice label b { display: block; font-size: var(--fs-small); }
.choice label small { display: block; margin-top: var(--space-1); color: var(--sec-muted); }
.choice label:hover { border-color: var(--color-line-strong); }
.choice input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice input:checked + label { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); background: var(--color-brand-tint); }

/* Polia */
.field-grid { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .field-grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--btn-min-h);
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  background: var(--color-bg);
  font-size: var(--fs-body);
}
.field textarea { min-height: 125px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.field__help { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--sec-muted); }
.q > .field { margin-top: var(--space-5); }

.upload { padding: var(--space-6); border: 1px dashed var(--color-line-strong); background: var(--color-surface-2); text-align: center; }
.upload strong { display: block; font-size: var(--fs-small); }
.upload small { display: block; margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--sec-muted); }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-6); font-size: var(--fs-caption); color: var(--sec-muted); }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-brand); }

/* Navigácia krokov */
.form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border); }
.form-nav__note { font-size: var(--fs-caption); color: var(--sec-muted); }
.form-nav__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-5); margin-left: auto; }
.btn-back { padding: var(--space-3) 0; border: 0; background: none; font-size: var(--fs-small); color: var(--sec-muted); }
.btn-back:hover { color: var(--sec-fg); }

/* Súhrn pred odoslaním */
.review { margin-top: var(--space-7); padding: var(--space-6); background: var(--color-surface-2); }
.review h3 { margin-bottom: var(--space-4); font-size: var(--fs-h6); }
.review .facts { margin-top: 0; }

/* Potvrdenie */
.form-success { padding: var(--pad-panel); text-align: center; }
.form-success[hidden] { display: none; }
.form-success__tick { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto var(--space-6); background: var(--color-success-bg); font-size: var(--fs-h4); }
.form-success h2 { margin-block: var(--space-3) var(--space-4); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.form-success p { max-width: var(--measure); margin-inline: auto; color: var(--sec-muted); }

/* Obrysová karta a panel: bez výplne, s linkou, nadpis karty dole (servis, kontakt) */
.card--line, .panel--line { background: transparent; border: 1px solid var(--sec-line); }
.card--line .card__title { margin-top: auto; padding-top: var(--space-9); }

/* Nižšia sekcia (70 % zvislého paddingu), napr. zhrnutie článku */
.section--tight { padding-block: calc(var(--section-y) * .7); }

/* Nadpis v paneli odsadený od eyebrow (prebíja .panel h2) */
.panel .panel__title { margin-block: var(--space-12) var(--space-5); }

/* Vrstva architektúry: výška riadku ako v makete, moduly vyplnia výšku (integrácia) */
@media (min-width: 900px) { .layer { min-height: 310px; } }

/* Nižší vizuál v karte (integrácia „Aplikačné scenáre“) */
.card__media--short { min-height: 130px; }

/* ======================================================================
   Globálne úpravy podľa pripomienok (29. 9. 2026)
   ====================================================================== */

/* Položky v rozbaľovacom menu ostávajú normálnym rezom (tučná je iba hlavná úroveň) */
.site-nav .mega__list a, .site-nav .dropdown a { font-weight: var(--fw-regular); font-size: var(--fs-small); }
.site-nav .mega__title { font-weight: var(--fw-bold); }

/* Text pod nadpismi sekcií: 20 px na desktope */
.section-head__desc,
.split__intro p,
.panel > p,
.feature-row__copy p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Text v kartách a bunkách: 20 px na desktope */
.card p,
.cell p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Jemné zaoblenie boxov a obrázkov */
.card,
.panel,
.form-card,
.review,
.upload,
.module,
.map,
.card__media,
.feature-row .media,
.feature-row .illo,
.split .media,
.split .illo,
.hero__media,
.prose > .media,
.prose > .illo,
.article-cover { border-radius: var(--radius); overflow: hidden; }
.hero--home .hero__media { border-radius: 0; }
.card--case .card__media { border-radius: 0; }
.cells { border-radius: var(--radius); overflow: hidden; }
.cells > .card, .cells > .cell { border-radius: 0; }
.choice label,
.field input, .field select, .field textarea,
.tags li,
.card__tag,
.illo__tag,
.dropdown { border-radius: var(--radius-sm); }
.mega { border-radius: 0 0 var(--radius) var(--radius); }

/* Pätička: sídlo a kontakty */
.site-footer__address { margin-top: var(--space-6); font-style: normal; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-muted); }
.site-footer__address strong { color: var(--color-on-dark); }
.site-footer__address small { display: block; margin-top: var(--space-3); font-size: var(--fs-caption); }
.site-footer__contacts { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.site-footer .site-footer__contacts a { padding: 0; font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--color-on-dark); }
.site-footer .site-footer__contacts a:hover { color: var(--color-brand); }
.site-footer__contacts span { font-size: var(--fs-caption); color: var(--color-on-dark-muted); }

/* Hero úvodu: video stroja v prevádzke na bielom pozadí (bez mriežky) */
.hero__media.media--video { position: relative; background: var(--color-bg); aspect-ratio: 1 / 1; min-height: 0; }
.hero__media.media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) { .hero--home .hero__media.media--video { aspect-ratio: auto; min-height: 100%; } }
.hero__media.media--video { background: var(--color-bg) url("img/hero-znacenie.jpg") center / contain no-repeat; }
.hero__media.media--video video { transition: opacity .4s linear; }
.hero__media.media--video video.is-fading { opacity: 0; }

/* Fotky produktov: jednotný rámček 4:3 (fotky sú zjednotené na 1200 × 900, tools/normalize-product-images.js).
   contain: aj neupravená fotka nahratá v administrácii sa zobrazí celá, bez orezu. */
.card__media.media--image, .hero__media.media--image { aspect-ratio: 4 / 3; min-height: 0; height: auto; }
.card__media.media--image img, .hero__media.media--image img { padding: 0; object-fit: contain; }
@media (min-width: 900px) { .hero__media.media--image { align-self: center; } }

/* Fotografia v ploche .media (karty, bloky s textom): vyplní plochu, text ostáva nad ňou na tmavom prechode */
.media--photo { background: var(--color-surface); }
.media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--content.media--photo { color: var(--color-on-dark); }
.media--content.media--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(2 37 47 / .88), rgb(2 37 47 / .35) 55%, rgb(2 37 47 / 0)); }
.media--content.media--photo > :not(img) { position: relative; z-index: 1; }
.media--content.media--photo p { color: var(--color-on-dark-text); }

/* Textové stránky a články: zoznamy a tabuľky v súvislom texte */
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ol[type="a"] { list-style: lower-alpha; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-brand-dark); }
.prose .table-wrap { margin-block: var(--space-8); }
/* Tlačidlo, ktoré v texte vyzerá ako odkaz (napr. Nastavenia cookies) */
.link-inline { padding: 0; border: 0; background: none; font: inherit; color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.link-inline:hover { color: var(--sec-fg); }
/* Fotka v texte článku (napr. ukážky značenia) */
.prose > figure { margin-block: var(--space-8); }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--color-surface); }
.prose figcaption { margin-top: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--sec-muted); }
.prose .cta-note { padding: var(--space-6); border-radius: var(--radius); background: var(--color-brand-tint); color: var(--sec-fg); }
.prose .cta-note p + p { margin-top: var(--space-3); }
.article-grid--text { padding-top: var(--space-9); }
@media (min-width: 1200px) { .article-grid--text { grid-template-columns: 220px minmax(0, var(--container-narrow)); justify-content: start; column-gap: var(--gap-lg); } }

/* Časté otázky: rozbaľovacie odpovede (natívne <details>) */
.faq { border-top: var(--border); }
.faq details { border-bottom: var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-6); cursor: pointer; list-style: none; color: var(--sec-fg); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-brand-dark); font-weight: var(--fw-regular); }
.faq details[open] summary::after { content: "−"; }
.faq__answer { padding-bottom: var(--space-7); max-width: var(--measure); color: var(--sec-text); }
.faq__answer > * + * { margin-top: var(--space-4); }

/* Stĺpce článku sa smú zúžiť (široká tabuľka sa posúva vo vnútri .table-wrap) */
.article-grid > * { min-width: 0; }
/* Textová stránka bez obsahu (jedna sekcia): text v jednom stĺpci */
@media (min-width: 900px) { .article-grid.article-grid--single { grid-template-columns: minmax(0, var(--container-narrow)); } }

/* Dlaždica materiálu s fotkou vzorky (namiesto krúžku .tile__icon) */
.tile__img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-5); object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface); }
.tile:has(.tile__img) { padding-top: var(--space-5); }

/* Karta ako odkaz (úvod, technológie): jemné nadvihnutie, priblíženie fotky a šípka v rohu */
a.card--corner { transition: transform calc(var(--duration) * 2) var(--ease), box-shadow calc(var(--duration) * 2) var(--ease); }
a.card--corner .card__media img { transition: transform calc(var(--duration) * 3) var(--ease); }
a.card--corner::after {
  content: "→";
  position: absolute; right: var(--pad-card); bottom: var(--pad-card);
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  font-size: var(--fs-h5); line-height: 1; opacity: .35;
  transition: opacity calc(var(--duration) * 2) var(--ease), transform calc(var(--duration) * 2) var(--ease), background-color calc(var(--duration) * 2) var(--ease), border-color calc(var(--duration) * 2) var(--ease);
}
a.card--corner p { padding-right: calc(44px + var(--space-5)); }
a.card--corner:hover, a.card--corner:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(2 37 47 / .18); z-index: 1; }
a.card--corner:hover .card__media img, a.card--corner:focus-visible .card__media img { transform: scale(1.05); }
a.card--corner:hover::after, a.card--corner:focus-visible::after { opacity: 1; transform: translateX(4px); background: var(--color-brand); border-color: var(--color-brand); color: var(--color-navy); }

/* Kroky s fotkou: stmavená fotka k obsahu kroku, text čitateľný na navy prechode */
.steps--photo { gap: var(--space-4); border-top: 0; }
.steps--photo .step { position: relative; overflow: hidden; min-height: 320px; padding: var(--space-7); border: 0; border-radius: var(--radius); background: var(--color-navy); }
.steps--photo .step > :not(.step__img) { position: relative; z-index: 2; }
.steps--photo .step h3 { margin-top: auto; color: var(--color-on-dark); }
.steps--photo .step p { color: var(--color-on-dark-text); }
.step__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.steps--photo .step::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(2 37 47 / .96) 0%, rgb(2 37 47 / .78) 45%, rgb(2 37 47 / .5) 100%); }
@media (min-width: 1200px) {
  .steps--photo .step { min-height: 380px; padding: var(--space-7); border-right: 0; }
  .steps--photo .step:first-child { padding-left: var(--space-7); }
  .steps--photo .step h3 { margin-top: auto; }
}
.steps--photo .step::after { background: linear-gradient(to top, rgb(2 37 47 / .96) 0%, rgb(2 37 47 / .78) 45%, rgb(2 37 47 / .62) 100%); }
.steps--photo .num { color: var(--color-brand-light); }
.steps--photo .step p { min-height: calc(4em * var(--lh-body)); } /* nadpisy v jednej línii aj pri dlhšom texte */


/* Tok v bunkách (6 krokov): popis s rezervou na 3 riadky, nadpisy v jednej línii */
@media (min-width: 900px) { .grid--6.cells .cell p { min-height: calc(3em * var(--lh-lead)); } }

/* ====================================== Ikona v kruhu (Lucide, vložené SVG) */
.badge-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-brand-light); }
.badge-ico svg { width: 26px; height: 26px; }
.section--dark .badge-ico { background: var(--color-brand); color: var(--color-navy); }
.cell > .badge-ico { position: absolute; top: var(--pad-card); right: var(--pad-card); }
.cell:has(> .badge-ico) { position: relative; }

/* ================================== Architektúra: vrstva = fotka + moduly */
.arch { display: grid; gap: var(--space-6); }
.arch__layer { display: grid; overflow: hidden; border-radius: var(--radius); background: var(--color-bg); border: var(--border); }
@media (min-width: 900px) { .arch__layer { grid-template-columns: 5fr 7fr; } }
.arch__intro { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: var(--pad-card); color: var(--color-on-dark); }
.arch__intro > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch__intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(2 37 47 / .95), rgb(2 37 47 / .55) 60%, rgb(2 37 47 / .35)); }
.arch__intro > :not(img) { position: relative; z-index: 1; }
.arch__intro .eyebrow { color: var(--color-brand-light); }
.arch__intro h3 { margin-block: var(--space-3); color: var(--color-on-dark); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.arch__intro p { color: var(--color-on-dark-text); }
.arch__modules { display: grid; align-content: center; padding: var(--space-3) var(--pad-card); }
.arch__module { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); }
.arch__module:last-child { border-bottom: 0; }
.arch__module b { display: block; font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--color-ink); }
.arch__module small { display: block; margin-top: var(--space-1); color: var(--color-muted); }
.arch__module .num { color: var(--color-brand-dark); }

/* ======================================= Tok: časová os s kruhovými uzlami */
.flow { position: relative; display: grid; gap: var(--space-7); }
.flow::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(var(--color-brand), var(--color-brand-light)); }
.flow__step { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: var(--space-6); align-items: start; }
.flow__node { grid-row: span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-brand-light); border: 2px solid var(--color-brand); box-shadow: 0 0 0 8px var(--sec-bg); }
.flow__node svg { width: 28px; height: 28px; }
.flow__step .num { padding-top: var(--space-2); color: var(--color-brand-dark); }
.flow__step h3 { margin-top: var(--space-2); font-size: var(--fs-h5); line-height: var(--lh-h5); }
.flow__step p { margin-top: var(--space-2); color: var(--sec-muted); }
@media (min-width: 1200px) {
  .flow { grid-template-columns: repeat(var(--steps, 6), 1fr); gap: var(--space-5); }
  .flow::before { left: calc(100% / (var(--steps, 6) * 2)); right: calc(100% / (var(--steps, 6) * 2)); top: 32px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-light)); }
  .flow__step { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .flow__node { grid-row: auto; margin-bottom: var(--space-5); }
}

/* Mapa Slovenska (Natural Earth, vložené SVG): obrys, susedia, pobočky s pulzujúcim bodom */
.map--sk { display: grid; place-items: center; padding: var(--space-6); background: var(--color-surface); }
.section--dark .map--sk, .is-dark .map--sk { background: radial-gradient(ellipse at 50% 40%, rgb(0 177 230 / .10), transparent 70%), var(--color-black); }
.map__svg { width: 100%; height: auto; overflow: visible; }
.map__neighbor { fill: rgb(2 37 47 / .03); stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.map__country { fill: var(--color-bg); stroke: var(--color-navy); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 12px 24px rgb(2 37 47 / .12)); }
.map__link { fill: none; stroke: var(--color-brand); stroke-width: 2.5; stroke-dasharray: 8 8; stroke-linecap: round; }
.map__dot { fill: var(--color-brand); stroke: var(--color-bg); stroke-width: 3; }
.map__pulse { fill: var(--color-brand); opacity: .25; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s var(--ease) infinite; }
.map__label { font-size: 34px; font-weight: var(--fw-bold); fill: var(--color-ink); paint-order: stroke; stroke: var(--color-bg); stroke-width: 6px; stroke-linejoin: round; }
.map__note { font-size: 22px; fill: var(--color-muted); paint-order: stroke; stroke: var(--color-bg); stroke-width: 5px; stroke-linejoin: round; }
/* Obchodné a servisné miesta: menšia bodka a názov mesta */
.map__place--sm .map__dot { stroke-width: 2.5; }
.map__town { font-size: 22px; font-weight: var(--fw-medium); fill: var(--color-ink); paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; stroke-linejoin: round; }
.section--dark .map__town, .is-dark .map__town { fill: var(--color-on-dark); stroke: none; }
.section--dark .map__neighbor, .is-dark .map__neighbor { fill: rgb(255 255 255 / .02); stroke: rgb(255 255 255 / .18); }
.section--dark .map__country, .is-dark .map__country { fill: rgb(255 255 255 / .07); stroke: var(--color-brand-light); filter: none; }
.section--dark .map__dot, .is-dark .map__dot { stroke: var(--color-black); }
.section--dark .map__label, .is-dark .map__label { fill: var(--color-on-dark); stroke: none; }
.section--dark .map__note, .is-dark .map__note { fill: var(--color-on-dark-muted); stroke: none; }
@keyframes map-pulse { 0% { transform: scale(.6); opacity: .45; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map__pulse { animation: none; } }
@media (max-width: 599px) { .map__label { font-size: 44px; } .map__note { display: none; } .map__town { font-size: 30px; } }

/* Fotka navrchu bunky (O nás, Čo prinášame): na celú šírku bunky */
.cell__media { aspect-ratio: 16 / 10; min-height: 0; margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) var(--space-5); border-radius: 0; }
.cell:has(> .cell__media) .cell__title { padding-top: var(--space-5); }
/* Bunky s ikonou v kruhu: popis s rezervou na 3 riadky, nadpisy v jednej línii */
@media (min-width: 900px) { .cell:has(> .badge-ico) p { min-height: calc(3em * var(--lh-lead)); } }

/* Karta alebo bunka s fotkou navrchu: nadpis hneď pod fotkou (nie zarovnaný na spodok) */
.card:has(> .card__media.media--photo) .card__title, .cell:has(> .cell__media) .cell__title { margin-top: 0; }
.card--line:has(> .card__media) .card__title { margin-top: var(--space-5); padding-top: 0; }

/* Úvod: H1 rovnako veľký ako na ostatných stránkach (pripomienka Michala) */
.hero--home h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 10em; }

/* Riadky ako odkaz v tmavej sekcii alebo paneli: tmavé zvýraznenie (svetlé pozadie skrylo text) */
.section--dark a.row:hover, .is-dark a.row:hover { background: rgb(255 255 255 / .06); }

/* Rozbaľovacie karty (01 Riešenia): natívne <details>, ikona, prepínač plus/mínus, obsah s odkazmi a fotkou */
.acc-list { display: grid; gap: var(--space-4); }
.acc { border: var(--border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.acc:hover { border-color: var(--color-line-strong); }
.acc[open] { background: var(--color-bg); border-color: var(--color-line); box-shadow: 0 18px 40px rgb(2 37 47 / .08); }
.acc > summary { list-style: none; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius); }
.acc__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--pad-card); }
.acc__label { display: grid; gap: var(--space-1); }
.acc__label .num { color: var(--color-brand-dark); }
.acc__title { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.acc__sum { grid-column: 1 / -1; color: var(--color-muted); line-height: var(--lh-body); }
.acc__ico { transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.acc[open] .acc__ico { background: var(--color-brand); color: var(--color-navy); }
.acc__toggle { position: relative; grid-column: 3; grid-row: 1; width: 48px; height: 48px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-bg); transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.acc__toggle::before, .acc__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: var(--color-navy); transition: transform calc(var(--duration) * 2) var(--ease), background-color var(--duration) var(--ease); }
.acc__toggle::after { transform: rotate(90deg); }
.acc > summary:hover .acc__toggle { border-color: var(--color-brand); }
.acc[open] .acc__toggle { background: var(--color-navy); border-color: var(--color-navy); }
.acc[open] .acc__toggle::before, .acc[open] .acc__toggle::after { background: var(--color-on-dark); }
.acc[open] .acc__toggle::after { transform: rotate(0deg); }
.acc__body { display: grid; gap: var(--space-8); margin-inline: var(--pad-card); padding-block: var(--space-8) var(--pad-card); border-top: 1px solid var(--color-line); animation: acc-in calc(var(--duration) * 2) var(--ease); }
.acc__copy { display: flex; flex-direction: column; }
.acc__copy p { max-width: var(--measure); color: var(--color-text); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.acc__copy .eyebrow { margin-top: var(--space-8); }
.acc__links { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.acc__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); border: var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-ink); text-decoration: none; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease); }
.acc__link-text { display: grid; }
.acc__link-text b { font-size: var(--fs-h6); line-height: var(--lh-tight); }
.acc__link-text small { color: var(--color-muted); font-size: var(--fs-small); line-height: var(--lh-body); }
.acc__arrow { color: var(--color-brand-dark); font-weight: var(--fw-bold); transition: transform var(--duration) var(--ease); }
.acc__link:hover { border-color: var(--color-brand); background: var(--color-surface); }
.acc__link:hover .acc__arrow { transform: translateX(4px); }
.acc__media { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius); }
@media (min-width: 900px) {
  .acc__head { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; padding-block: var(--space-6); }
  .acc__sum { grid-column: 3; grid-row: 1; max-width: 30em; }
  .acc__toggle { grid-column: 4; }
  .acc__body { grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: stretch; }
  .acc__media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 599px) {
  .acc__head { gap: var(--space-3) var(--space-4); }
  .acc__head .acc__ico { width: 44px; height: 44px; }
  .acc__toggle { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .acc__body { animation: none; } }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Menšia ikona v kruhu (riadky, kontakty) a ikona v toku bunky nad nadpisom */
.badge-ico--sm { width: 44px; height: 44px; }
.badge-ico--sm svg { width: 20px; height: 20px; }
.cell > .badge-ico--inline { position: static; margin-top: auto; }
.cell:has(> .badge-ico--inline) .cell__title { margin-top: var(--space-5); padding-top: 0; }
.row--ico > .badge-ico { grid-row: span 2; align-self: start; }

/* Široká fotka pod textom a zoznamom v split sekcii (Servis, O nás) */
.split__band { grid-column: 1 / -1; aspect-ratio: 3 / 1; min-height: 220px; }
.split__band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.split__band--wide { aspect-ratio: 7 / 3; }

/* Rýchla navigácia pod hero (odvetvia): kartičky s náhľadom, odkaz na aplikáciu */
.quicknav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.quicknav__card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-3) var(--space-3) var(--space-5); border: var(--border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-ink); text-decoration: none; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.quicknav__img { display: block; flex: none; aspect-ratio: 16 / 9; margin-bottom: var(--space-2); overflow: hidden; border-radius: calc(var(--radius) * .6); }
.quicknav__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.quicknav__card .eyebrow { padding-inline: var(--space-2); }
.quicknav__title { padding-inline: var(--space-2); padding-right: var(--space-7); font-size: var(--fs-small); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.quicknav__icon { position: absolute; right: var(--space-4); bottom: var(--space-5); color: var(--color-brand-dark); font-weight: var(--fw-bold); }
.quicknav__card:hover { transform: translateY(-3px); border-color: var(--color-brand); box-shadow: 0 14px 30px rgb(2 37 47 / .10); }
.quicknav__card:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .quicknav__card, .quicknav__img img { transition: none; } .quicknav__card:hover { transform: none; } }
.feature-row[id] { scroll-margin-top: calc(var(--header-h, 80px) + var(--space-6)); }

/* Štítky technológií ako odkazy */
.tags a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: .2em; }
.tags a:hover { color: var(--color-brand-dark); }

/* Kontakt: adresa a zoznam kontaktov s ikonou */
.contact-address { margin-top: var(--space-5); font-style: normal; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.contact-list { display: grid; gap: var(--space-4); margin: var(--space-6) 0; padding: 0; list-style: none; }
.contact-list li { display: flex; align-items: center; gap: var(--space-4); }
.contact-list a { color: var(--color-ink); font-weight: var(--fw-medium); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
/* Bunky s hodnotou a ikonou (O nás, História): hodnota v jednej línii, nie zarovnaná podľa dĺžky popisu */
.cell:has(> .badge-ico) > .cell__value { margin-top: 0; }
@media (max-width: 599px) {
  .quicknav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .quicknav__img { aspect-ratio: 3 / 2; }
}

/* Bunky so stmavenou fotkou v pozadí (O nás, Štyri princípy): rovnaký prechod ako kroky s fotkou */
.cells--photo { gap: var(--space-4); border: 0; border-radius: 0; overflow: visible; background: none; }
.cells--photo .cell { position: relative; overflow: hidden; min-height: 380px; border: 0; border-radius: var(--radius); background: var(--color-navy); color: var(--color-on-dark); }
.cells--photo .cell > :not(.cell__bg) { position: relative; z-index: 2; }
.cells--photo .cell::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(2 37 47 / .96) 0%, rgb(2 37 47 / .8) 50%, rgb(2 37 47 / .45) 100%); }
.cell__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .6s var(--ease); }
.cells--photo .cell:hover .cell__bg { transform: scale(1.04); }
.cells--photo .cell > .badge-ico { position: absolute; background: var(--color-brand); color: var(--color-navy); }
.cells--photo .num { color: var(--color-brand-light); }
.cells--photo .cell__title { margin-top: auto; color: var(--color-on-dark); }
.cells--photo .cell p { min-height: 0; color: var(--color-on-dark-text); }
@media (prefers-reduced-motion: reduce) { .cell__bg { transition: none; } }
@media (min-width: 900px) { .cells--photo .cell p { min-height: calc(4em * var(--lh-lead)); } }

/* Mriežka buniek bez prázdnych miest: bunky v poslednom riadku sa roztiahnu (ďalšie výhody produktu) */
.cells--fill { display: flex; flex-wrap: wrap; }
.cells--fill > * { flex: 1 1 calc(33.333% - 1px); min-width: min(100%, 280px); }
/* Menšie bunky s fotkou bez popisu (Odvetvia, Logistika a traceabilita) */
.cells--photo-sm .cell { min-height: 200px; }
.cells--photo-sm .cell__title { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
ol.cells--photo { list-style: none; padding: 0; }

/* ============================== Súhlas s cookies: lišta a okno nastavení */
.consent__bar { position: fixed; z-index: calc(var(--z-header) + 10); left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-5); max-width: 1120px; margin-inline: auto; padding: var(--space-6); border: var(--border); border-radius: var(--radius); background: var(--color-bg); box-shadow: 0 20px 50px rgb(2 37 47 / .22); }
.consent__bar[hidden], .consent__dialog[hidden] { display: none; }
.consent__title { font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--color-ink); }
.consent__text p, .consent__panel > p { margin-top: var(--space-2); color: var(--color-text); font-size: var(--fs-small); line-height: var(--lh-body); }
.consent__text a { color: var(--color-ink); text-decoration: underline; text-underline-offset: .2em; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 900px) {
  .consent__bar { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-8); }
  .consent__actions .btn { flex: 0 0 auto; }
}
.consent__dialog { position: fixed; z-index: calc(var(--z-header) + 20); inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgb(2 37 47 / .55); }
.consent__panel { width: min(100%, 640px); max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto; padding: var(--space-7); border-radius: var(--radius); background: var(--color-bg); box-shadow: 0 30px 70px rgb(2 37 47 / .35); }
.consent__list { margin: var(--space-6) 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.consent__list li { border-bottom: 1px solid var(--color-line); }
.consent__row { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; cursor: pointer; }
.consent__row b { display: block; color: var(--color-ink); }
.consent__row small { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--fs-small); line-height: var(--lh-body); }
.consent__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__switch { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--color-line-strong); transition: background-color var(--duration) var(--ease); }
.consent__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(2 37 47 / .3); transition: transform var(--duration) var(--ease); }
.consent__row input:checked + .consent__switch { background: var(--color-brand-dark); }
.consent__row input:checked + .consent__switch::after { transform: translateX(20px); }
.consent__row input:disabled + .consent__switch { opacity: .55; }
.consent__row input:focus-visible + .consent__switch { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent-open { overflow: hidden; }
.site-footer__bottom button[data-cookie-settings] { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .consent__switch, .consent__switch::after { transition: none; } }
@media (max-width: 899px) {
  .consent__bar { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); gap: var(--space-4); padding: var(--space-5); max-height: calc(100dvh - 2 * var(--space-3)); overflow: auto; }
  .consent__bar .consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .consent__bar .consent__actions [data-consent="settings"] { grid-column: 1 / -1; }
  .consent__bar .btn { min-height: 44px; padding-inline: var(--space-3); }
  .consent__panel { padding: var(--space-5); }
}

/* Formulár dopytu: nahrávanie súborov, antispam pole, chyba odoslania */
label.upload { position: relative; display: block; cursor: pointer; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
label.upload:hover, label.upload:focus-within { border-color: var(--color-brand); }
label.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
label.upload.is-filled { border-style: solid; border-color: var(--color-brand-dark); background: var(--color-bg); }
label.upload.is-filled small { color: var(--color-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-cta); background: #fdf1f2; color: var(--color-ink); font-size: var(--fs-small); }
.form-error a { color: var(--color-ink); text-decoration: underline; }
.form-error[hidden] { display: none; }
button[type="submit"]:disabled { opacity: .7; cursor: progress; }

/* Úvod: statická fotka v hero rovnako ako na podstránkach (zaoblená fotka v mriežke, nie na okraj) */
.hero__media--photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius); }
.hero__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.hero--home .hero__media.hero__media--photo { border-radius: var(--radius); }
@media (min-width: 900px) {
  .hero--home .hero__grid:has(> .hero__media--photo) { grid-template-columns: .92fr 1.08fr; column-gap: var(--gap-lg); padding-block: var(--space-12); align-items: center; }
  .hero--home .hero__grid:has(> .hero__media--photo) .hero__copy { padding-block: 0; padding-right: 0; }
  .hero--home .hero__media.hero__media--photo { margin-right: 0; min-height: 0; align-self: center; }
}