/* ==========================================================================
   HAŠKO — vizuálna identita nad šablónou Agntix (variant index-dark)
   Načítať AŽ PO theme/css/main.css. Zdroj: dizajn manuál HAŠKO (2026).
   Rozhodnutia a kontrast: docs/decisions/0003-identita-tokeny-fonty-logo.md
   ========================================================================== */

/* ---------- 1. Fonty (self-host, OFL 1.1, RedHatOfficial/RedHatFont 5.0.0) ---------- */
@font-face {
  font-family: "Red Hat Display";
  src: url("../theme/fonts/RedHatDisplay-VF.woff2") format("woff2-variations"),
       url("../theme/fonts/RedHatDisplay-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("../theme/fonts/RedHatText-VF.woff2") format("woff2-variations"),
       url("../theme/fonts/RedHatText-VF.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../theme/fonts/RedHatMono-VF.woff2") format("woff2-variations"),
       url("../theme/fonts/RedHatMono-VF.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokeny identity ---------- */
:root {
  /* farby z manuálu — iné odtiene sa nepridávajú */
  --hasko-carbon: #17191b;      /* Carbon Dust — pozadie */
  --hasko-bone: #c6c2b8;        /* Bone Sand — akcent */
  --hasko-offwhite: #f2f3f0;    /* Off White — text */

  /* odvodené len miešaním troch farieb vyššie (plochy, linky, tlmený text) */
  --hasko-carbon-raised: color-mix(in srgb, var(--hasko-carbon) 94%, var(--hasko-offwhite));
  --hasko-carbon-deep: color-mix(in srgb, var(--hasko-carbon) 85%, #000);
  --hasko-line: rgba(242, 243, 240, 0.12);
  --hasko-text-muted: rgba(242, 243, 240, 0.72);
  --hasko-bone-soft: color-mix(in srgb, var(--hasko-bone) 55%, var(--hasko-offwhite));

  --hasko-ff-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hasko-ff-text: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hasko-ff-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ---------- 3. Premenné šablóny → identita ---------- */
  /* fonty: všetky rodiny šablóny smerujú na Red Hat (žiadny font šablóny sa nenačíta) */
  --tp-ff-body: var(--hasko-ff-text);
  --tp-ff-p: var(--hasko-ff-text);
  --tp-ff-inter: var(--hasko-ff-text);
  --tp-ff-heading: var(--hasko-ff-display);
  --tp-ff-teko: var(--hasko-ff-display);
  --tp-ff-besley: var(--hasko-ff-mono);
  --tp-ff-mango-thin: var(--hasko-ff-display);
  --tp-ff-mango-light: var(--hasko-ff-display);
  --tp-ff-mango: var(--hasko-ff-display);
  --tp-ff-mango-medium: var(--hasko-ff-display);
  --tp-ff-mango-semibold: var(--hasko-ff-display);
  --tp-ff-mango-bold: var(--hasko-ff-display);
  --tp-ff-clash-light: var(--hasko-ff-display);
  --tp-ff-clash-regular: var(--hasko-ff-display);
  --tp-ff-clash-medium: var(--hasko-ff-display);
  --tp-ff-clash-semibold: var(--hasko-ff-display);
  --tp-ff-clash-bold: var(--hasko-ff-display);
  --tp-ff-grotesk: var(--hasko-ff-display);
  --tp-ff-platform: var(--hasko-ff-display);
  --tp-ff-playfair: var(--hasko-ff-display);
  --tp-ff-satisfy: var(--hasko-ff-display);
  --tp-ff-dirtyline: var(--hasko-ff-display);
  --tp-ff-phudu: var(--hasko-ff-display);
  --tp-ff-poppins: var(--hasko-ff-text);
  --tp-ff-onest: var(--hasko-ff-text);
  --tp-ff-fontawesome: var(--hasko-ff-text); /* Font Awesome Pro sa nenačítava — glyfy nahrádza sekcia 7 */

  /* svetlé → Off White */
  --tp-common-white: var(--hasko-offwhite);
  --tp-text-body: var(--hasko-offwhite);

  /* tmavé → Carbon Dust a jeho odvodeniny */
  --tp-common-black: var(--hasko-carbon);
  --tp-common-black-2: var(--hasko-carbon-raised);
  --tp-common-black-3: var(--hasko-carbon-deep);
  --tp-common-black-4: var(--hasko-carbon-deep);
  --tp-common-black-5: var(--hasko-carbon);
  --tp-common-black-6: var(--hasko-carbon-raised);
  --tp-common-black-7: var(--hasko-carbon);
  --tp-common-black-8: var(--hasko-carbon-raised);
  --tp-common-black-10: var(--hasko-carbon-raised);

  /* všetky akcentové farby šablóny (červené, zelené, ružová, žltá) → Bone Sand */
  --tp-common-red: var(--hasko-bone);
  --tp-common-red-2: var(--hasko-bone);
  --tp-common-red-3: var(--hasko-bone);
  --tp-common-blue: var(--hasko-bone);
  --tp-common-yellow: var(--hasko-bone);
  --tp-common-yellow-1: var(--hasko-bone);
  --tp-common-yellow-green: var(--hasko-bone);
  --tp-common-green-light: var(--hasko-bone);
  --tp-common-green-regular: var(--hasko-bone);
  --tp-common-green-1: var(--hasko-bone);
  --tp-theme-green: var(--hasko-bone);
  --tp-theme-pink: var(--hasko-bone);
  --tp-theme-yellow: var(--hasko-bone);
}

/* ---------- 4. Základ ---------- */
html,
.agntix-dark body,
body {
  background-color: var(--hasko-carbon);
  color: var(--hasko-offwhite);
  font-family: var(--hasko-ff-text);
}
::selection {
  background-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}
/* viditeľný fokus pre klávesnicu (prístupnosť) */
:focus-visible {
  outline: 2px solid var(--hasko-bone);
  outline-offset: 3px;
}

/* nadpisy → Red Hat Display */
h1, h2, h3, h4, h5, h6,
.tp-hero-title,
.tp-section-title,
.tp-about-text p,
.tp-project-title,
.tp-funfact-title,
.tp-work-title,
.tp-award-text,
.tp-text-slide-title,
.tp-offcanvas-title,
.tp-footer-widget-title,
.tp-copyright-big-text,
.tp-testimonial-author-info span {
  font-family: var(--hasko-ff-display);
}

/* eyebrow štítky a čísla → Red Hat Mono */
.tp-section-subtitle,
.tp-funfact-subtitle,
.tp-award-subtitle,
.tp-award-year,
.tp-award-position,
.tp-footer-widget-title-sm,
.tp-service-number span,
.tp-service-category span,
.tp-project-category span,
.tp-work-number i,
.tp-about-funcact-item span,
.tp-funfact-number span,
.tp-testimonial-ratting-icon span,
.hasko-mono {
  font-family: var(--hasko-ff-mono);
}
.tp-section-subtitle,
.tp-funfact-subtitle,
.tp-award-subtitle,
.tp-footer-widget-title-sm {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.tp-work-number i {
  font-style: normal;
  font-weight: 600;
}

/* ---------- 5. Sekcie: farby, ktoré šablóna píše natvrdo ---------- */

/* hlavička */
.header-sticky {
  background: color-mix(in srgb, var(--hasko-carbon) 90%, transparent);
}
.tp-offcanvas-wrapper.offcanvas-black-bg {
  background: var(--hasko-carbon-raised);
}

/* tlačidlá: akcent Bone Sand + text Carbon (Off White na Bone Sand má len 1,6 : 1) */
.tp-btn-black.btn-red-bg .tp-btn-black-text,
.tp-btn-black.btn-red-bg .tp-btn-black-circle {
  background-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}
.tp-btn-black.btn-red-bg .tp-btn-black-circle svg {
  color: var(--hasko-carbon);
}

/* text slider (pás na Bone Sand) */
.tp-text-slide-wrapper.red-bg-2 .tp-text-slide-title {
  color: var(--hasko-carbon);
}
.tp-text-slide-wrapper.red-bg-2 .tp-text-slide-title::after {
  background-color: var(--hasko-carbon);
}
/* Pozastaviť / spustiť pás (WCAG 2.2.2, Úloha 8) — Carbon kruh na Bone Sand, vpravo na páse */
.hasko-marquee {
  position: relative;
}
.hasko-marquee__toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--hasko-carbon);
  color: var(--hasko-bone);
  transform: translateY(-50%);
  cursor: pointer;
}
.hasko-marquee__toggle[hidden] {
  display: none;
}
.hasko-marquee__toggle:hover {
  color: var(--hasko-offwhite);
}
/* fokus Bone Sand by na Bone Sand páse nebolo vidieť */
.hasko-marquee__toggle:focus-visible {
  outline: 2px solid var(--hasko-carbon);
  outline-offset: 3px;
}
.hasko-marquee__ico-play,
.hasko-marquee__toggle[aria-pressed="true"] .hasko-marquee__ico-pause {
  display: none;
}
.hasko-marquee__toggle[aria-pressed="true"] .hasko-marquee__ico-play {
  display: block;
}

/* služby */
.agntix-dark .tp-service-item {
  background-color: var(--hasko-carbon);
  border-color: var(--hasko-line);
}
.agntix-dark .tp_text_invert > div {
  background-image: linear-gradient(to right, var(--hasko-offwhite) 50%, color-mix(in srgb, var(--hasko-carbon) 78%, var(--hasko-offwhite)) 50%);
}
.agntix-dark .tp-service-category span,
.agntix-dark .tp-project-category span {
  border-color: var(--hasko-line);
}
.agntix-dark .tp-service-category span:hover,
.agntix-dark .tp-project-category span:hover {
  background-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}

/* tlmený text — kontrast ≥ 4,5 : 1 na Carbon */
.agntix-dark .tp-about-avater-info p,
.agntix-dark .tp-about-funcact-item p,
.agntix-dark .tp-service-content p,
.agntix-dark .tp-work-content p,
.tp-testimonial-item.black-style .tp-testimonial-author-info p {
  color: var(--hasko-text-muted);
}

/* funfact (štatistiky) — šablóna farbí plochy cez data-bg-color (inline štýl z JS) */
.tp-funfact-green-wrap[data-bg-color] {
  background-color: var(--hasko-carbon-raised) !important;
}
.agntix-dark .tp-funfact-green-wrap {
  border-color: var(--hasko-carbon);
}
.agntix-dark .tp-funfact-number span i {
  -webkit-text-stroke: 6px var(--hasko-carbon-raised);
}

/* proces (work) */
.agntix-dark .tp-work-item {
  background-color: var(--hasko-carbon-raised);
  border-color: var(--hasko-carbon);
}
.tp-work-number i {
  color: var(--hasko-carbon);
}

/* referencie */
.tp-testimonial-item {
  border-color: var(--hasko-carbon);
}
.tp-testimonial-item.green-style .tp-testimonial-text p,
.tp-testimonial-item.green-style .tp-testimonial-author-info span,
.tp-testimonial-item.green-style .tp-testimonial-author-info p {
  color: var(--hasko-carbon);
}
.tp-testimonial-item.grey-style {
  background-color: var(--hasko-bone-soft);
}
.tp-testimonial-item.black-style {
  background: var(--hasko-carbon-raised);
}
.tp-testimonial-ratting-icon i,
.tp-testimonial-ratting-icon svg path {
  color: var(--hasko-bone);
  fill: var(--hasko-bone); /* hviezdičky majú v markupe fill="#EF2B10" */
}
.tp-testimonial-item.white-style .tp-testimonial-author-info p,
.tp-testimonial-item.grey-style .tp-testimonial-author-info p {
  color: color-mix(in srgb, var(--hasko-carbon) 80%, var(--hasko-offwhite));
}
/* Bootstrap .text-white (napr. nadpis referencií) → Off White */
.text-white {
  color: var(--hasko-offwhite) !important;
}

/* logá klientov / ocenenia */
.agntix-dark .tp-award-item {
  background: var(--hasko-carbon-raised);
}

/* pätička — šablóna ju farbí cez data-bg-color="#1b1b1d" */
.tp-footer-area[data-bg-color],
.tp-copyright-area[data-bg-color] {
  background-color: var(--hasko-carbon-deep) !important;
}

/* ---------- 6. Efekty šablóny: parallax, WebGL (docs/decisions/0005-…) ---------- */
/* Vlastný kurzor šablóny je odstránený (Tomáš 21. 10. 2026) — natívny kurzor prehliadača. */
/* Parallax (data-speed="auto", ScrollSmoother): obrázok je vyšší ako orezaný rám, aby pri posune
   nevznikla medzera. Bez plynulého scrollu (mobil, obmedzený pohyb) ostáva rozloženie bez zmeny. */
.hasko-plynuly .tp-about-thumb img[data-speed],
.hasko-plynuly .ar-banner-wrap img[data-speed] {
  height: 125%;
  margin-top: 0;
  object-fit: cover;
}
/* WebGL hover: plátno leží nad obrázkom v rámci odkazu */
.tp-project-thumb .tp--hover-img {
  display: block;
  position: relative;
}

/* ---------- 7. Náhrada glyfov Font Awesome Pro (súbor sa nepreberá — licencia) ---------- */
/* šípka pri položke menu s podmenu */
.tp-header-dropdown nav ul li.has-dropdown::after,
.tp-header-dropdown nav ul li .tp-submenu li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  font-family: inherit;
}
.tp-header-dropdown nav ul li.has-dropdown:hover::after {
  transform: translateY(1px) rotate(-135deg);
}
/* „+“ pri podmenu v mobilnom (offcanvas) menu — main.js vkladá <i class="fa-solid fa-plus"> */
.tp-menu-close i {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}
.tp-menu-close i::before,
.tp-menu-close i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: translateY(-50%);
}
.tp-menu-close i::after {
  transform: translateY(-50%) rotate(90deg);
}

/* ---------- 8. Tvary z loga „A“ a „V“ (manuál str. 6 a 7, rozhodnutie 0011) ---------- */
/* Presné cesty z manuálu v img/brand/hasko-tvar-{a,v}.svg (obrys 1 px, non-scaling-stroke). Farba = currentColor:
   SVG je maska, plochu farbí background-color — jeden súbor pre Off White aj Bone Sand. Tvar sa nikdy nedeformuje
   (aspect-ratio = viewBox s okrajom 4 jednotky; ten je v polohe zanedbateľný, presne ho rieši len fotka v sekcii 34).
   Použitie v pozadí (str. 6): <span class="hasko-tvary hasko-tvary--…" aria-hidden="true"> s dvomi
   <span class="hasko-tvar hasko-tvar--v|a"></span>; rodič potrebuje position: relative (orezáva obal). */
.hasko-tvary {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--hasko-bone);
}
.hasko-tvar {
  position: absolute;
  display: block;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask: no-repeat 0 0 / 100% 100%;
  mask: no-repeat 0 0 / 100% 100%;
}
.hasko-tvar--a {
  aspect-ratio: 752.5 / 527.8;
  -webkit-mask-image: url("../img/brand/hasko-tvar-a.svg");
  mask-image: url("../img/brand/hasko-tvar-a.svg");
}
.hasko-tvar--v {
  aspect-ratio: 724.6 / 542.5;
  -webkit-mask-image: url("../img/brand/hasko-tvar-v.svg");
  mask-image: url("../img/brand/hasko-tvar-v.svg");
}

/* ---------- 9. Pohyb: rešpektovať prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Obmedzený pohyb: namiesto odhalení šablóny len jemné zobrazenie priehľadnosťou (hasko-pohyb.js) —
   bez posunu a zmeny veľkosti. Výnimka z pravidla vyššie (vyššia špecificita, tiež !important). */
.hasko-reduce-motion .hasko-fade {
  opacity: 0;
  transition: opacity 0.3s ease-out !important;
}
.hasko-reduce-motion .hasko-fade.hasko-fade--in {
  opacity: 1;
}
/* Odhalenia GSAP (main.js „28. fade-class-active“, „29. text animation“) nesmú mať CSS prechod na opacity/transform.
   Šablóna dáva `a, button, p, input, select, textarea, li` `transition: 0.3s` (= all). ScrollTrigger pri každom
   prepočte (load, fonty, zmena okna) vráti gsap.from() do pôvodného stavu a znova prečíta cieľové hodnoty —
   s bežiacim prechodom prečíta opacity 0 / posun 40 px, odsek sa „odhalí“ z 0 do 0 a ostane neviditeľný
   (21. 10. 2026: pás dôvery pod úvodom, úvod sľubu a „Pre koho“, text výzvy). Prechod farieb ostáva. */
.tp_fade_anim,
.tp_text_anim p {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}

/* ==========================================================================
   ÚLOHA 4 — layout a bloky (partials vo Views/Partials/blocklist/Components)
   ========================================================================== */

/* ---------- 10. Prístupnosť: skip link, fokus, skryté pomôcky ---------- */
.hasko-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: 9999px;
  background: var(--hasko-bone);
  color: var(--hasko-carbon);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.2s;
}
.hasko-skip-link:focus,
.hasko-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--hasko-carbon);
}
main:focus {
  outline: none;
}
/* šablóna orezávala presahy (bežiaci pás, posuvník referencií) obalom ScrollSmoother — ten beží len na
   desktope s myšou, inak to robí main; clip nevytvára scroll kontajner, takže nerozbije pripínanie panelov */
main {
  overflow-x: clip;
}
.tp-text-slide-area,
.tp-testimonial-slider-wrap {
  overflow: hidden;
}
/* kotvy (/#spolupraca, #kontakt…) nesmú skončiť pod pevnou hlavičkou */
main [id] {
  scroll-margin-top: 90px;
}
.hasko-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* šablóna má na poliach outline: none — fokus z klávesnice musí byť vidieť */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
/* dátum: ikona kalendára je vnútri poľa (shadow DOM) — pri fokuse na nej platí iba :focus-within (Úloha 8) */
input[type="date"]:focus-within {
  outline: 2px solid var(--hasko-bone);
  outline-offset: 3px;
}
.hasko-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
html.hasko-menu-open,
html.hasko-menu-open body {
  overflow: hidden;
}

/* zoznamy, ktoré sú v šablóne <div>, sú v partials <ul>/<ol> (sémantika) */
.hasko-promise__list,
.hasko-trust__logos,
.tp-award-item-wrap,
.tp-work-wrapper,
.hasko-gallery__list,
.hasko-contact__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* ---------- 11. Spoločné prvky sekcií ---------- */
/* nadpisy sekcií: šablóna má 80 px verzálky — slovenské vety sú dlhšie, preto plynulá veľkosť */
.tp-section-title.hasko-section-title {
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.hasko-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--hasko-text-muted);
  max-width: 46rem;
}
.hasko-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hasko-offwhite);
  font-weight: 500;
  border-bottom: 1px solid var(--hasko-line);
  padding-bottom: 4px;
  transition: border-color 0.3s, color 0.3s;
}
.hasko-text-link:hover {
  color: var(--hasko-bone);
  border-color: var(--hasko-bone);
}
.hasko-text-link svg {
  width: 10px;
}
.hasko-placeholder {
  background-color: #2a2c2f; /* zástupná sivá plocha (docs/OBSAH-ZASTUPNY.md) */
  background-image: url("../img/brand/mh-symbol-offwhite.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22%;
  background-blend-mode: soft-light;
  border-radius: 16px;
}
.hasko-ratio-4x3 {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.hasko-rte p:last-child {
  margin-bottom: 0;
}
.hasko-rte p,
.hasko-rte li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--hasko-text-muted);
}
.hasko-rte a {
  color: var(--hasko-bone);
  text-decoration: underline;
}
/* HASKO: nadpisy a zoznamy v texte z CMS (Úloha 5 — príbeh realizácie, právne stránky, zoznamy
   služieb). Šablóna dáva h2–h4 tmavú farbu a ul nulové odsadenie (odrážky by trčali von). */
.hasko-rte h2,
.hasko-rte h3,
.hasko-rte h4 {
  color: var(--hasko-offwhite);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.hasko-rte h2 {
  font-size: 30px;
}
.hasko-rte h3 {
  font-size: 22px;
}
.hasko-rte > :first-child {
  margin-top: 0;
}
.hasko-rte ul,
.hasko-rte ol {
  padding-left: 1.25em;
  margin-bottom: 1em;
}
.hasko-rte li {
  margin-bottom: 0.35em;
}
.hasko-rte strong {
  color: var(--hasko-offwhite);
}

/* ---------- 12. Úvod (heroSection) ---------- */
.hasko-hero {
  overflow: hidden;
}
/* šablóna: padding 225/135 px — dole stačí menej, inak pod CTA ostáva prázdna plocha */
@media (min-width: 1200px) {
  .hasko-hero.tp-hero-ptb {
    padding-top: 200px;
    padding-bottom: 90px;
  }
}
.hasko-hero > .container {
  width: 100%;
}
.hasko-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hasko-hero__img,
.hasko-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hasko-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hasko-carbon) 55%, transparent) 0%, color-mix(in srgb, var(--hasko-carbon) 20%, transparent) 40%, var(--hasko-carbon) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--hasko-carbon) 85%, transparent) 0%, transparent 70%);
}
/* tvary z loga ako na str. 6 manuálu: „V“ visí z hornej hrany, „A“ rastie zo spodnej, obe orezané sekciou;
   nad stmavením fotky, pod textom (obsah má z-index 1 a je v DOM neskôr). Horná hrana = spodok hlavičky,
   aby čiary nešli cez položky menu. */
.hasko-tvary--hero {
  top: 96px;
  z-index: 1;
  opacity: 0.3;
}
.hasko-tvary--hero .hasko-tvar--a {
  bottom: -2%;
  left: -7%;
  height: 60%;
}
.hasko-hero .tp-hero-title {
  font-size: clamp(44px, 7.4vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.hasko-hero__cta {
  gap: 14px 24px;
  margin-top: 40px;
}
.hasko-hero__cta .hasko-text-link {
  padding-bottom: 2px;
}
.hasko-hero .tp-hero-info p {
  color: var(--hasko-offwhite);
  /* šablóna má v odseku <br> — bez nich by sa flex položka po rozdelení na riadky (SplitText) zúžila */
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 24px;
}
.hasko-claim {
  font-family: var(--hasko-ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  .hasko-hero .tp-hero-content-wrap {
    margin-top: 32px;
  }
  /* C4: na mobile len jemný tieň za textom — tvary sa riadia šírkou, nie výškou úvodu */
  .hasko-tvary--hero {
    top: 82px;
    opacity: 0.16;
  }
  .hasko-tvary--hero .hasko-tvar--a {
    height: auto;
    width: 130%;
    bottom: -1%;
    left: -40%;
  }
}

/* ---------- 13. Dôvera pod úvodom, logá ---------- */
.hasko-trust {
  border-bottom: 1px solid var(--hasko-line);
}
.hasko-trust__text {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hasko-bone);
}
.hasko-trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 40px;
}
@media (min-width: 1200px) {
  .hasko-trust__logos {
    justify-content: flex-end;
  }
}
.hasko-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hasko-logo {
  max-width: 100%;
}
.hasko-logo img {
  max-width: 100%;
  height: auto;
  max-height: 44px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.hasko-logo:hover img {
  opacity: 1;
}
.hasko-logo__text {
  font-family: var(--hasko-ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hasko-text-muted);
}
/* <ul> logá: šablóna má padding 30 px vľavo aj vpravo — reset zoznamu ho nesmie zrušiť (inak mriežka mimo stredu) */
.hasko-logos .tp-award-top-wrap {
  list-style: none;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .hasko-logos .tp-award-top-wrap {
    padding: 30px 0 0;
    margin-left: 0;
    margin-right: 0;
  }
}
.hasko-logos .tp-award-img {
  padding: 28px 16px;
  border: 1px solid var(--hasko-line);
  border-radius: 16px;
}

/* ---------- 14. Pozicioning ---------- */
.tp-about-text .hasko-about-title {
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.2;
  margin-right: 60px;
  margin-bottom: 80px;
  letter-spacing: -0.04em;
  color: var(--hasko-offwhite);
  text-transform: none;
}
@media (max-width: 991px) {
  .tp-about-text .hasko-about-title {
    margin-right: 0;
    margin-bottom: 40px;
  }
}
.tp-project-thumb img {
  border-radius: 16px;
  width: 100%;
  height: auto;
}
/* šablóna: rám 315 × 415 a fotka posunutá o -100 px kvôli parallaxu (data-speed, ScrollSmoother) —
   bez ScrollSmoother fotku orežeme na výšku rámu */
.tp-about-thumb {
  border-radius: 16px;
}
.tp-about-thumb img {
  margin-top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-about-thumb .hasko-placeholder {
  height: 100%;
  aspect-ratio: auto;
}
.tp-about-funcact-wrap .hasko-rte p {
  margin-bottom: 1em;
}
/* Rozloženie 22. 10. 2026 (Tomáš): vnútro bloku presne podľa šablóny; celý blok je zarovnaný doľava pod štítok.
   Ruší sa iba vonkajšie odsadenie bloku (.tp-about-wrap margin-left 70 px od 1400 px) — vnútorné odsadenia
   (fotka 100 px, text 60 px, medzera pod nadpisom) ostávajú. Štítok má vlastný riadok, blok začína pod ním. */
.hasko-pozicioning .tp-about-wrap {
  margin-left: 0;
}
.hasko-pozicioning .tp-about-title-box {
  margin-bottom: 28px;
}

/* ---------- 15. Služby (ikona namiesto fotky) ---------- */
.hasko-service-icon {
  color: var(--hasko-bone);
}
.hasko-service-icon .hasko-ikona {
  width: clamp(72px, 9vw, 160px);
  height: auto;
}
@media (max-width: 767px) {
  .hasko-service-icon {
    text-align: left !important;
    margin-top: 24px;
  }
}
.tp-service-title-box .tp-section-title {
  margin-bottom: 0;
}

/* ---------- 16. Event bez stresu (promiseSection) ---------- */
.hasko-promise__card {
  height: 100%;
  padding: 36px 30px;
  border-radius: 20px;
  background: var(--hasko-carbon-raised);
  border: 1px solid var(--hasko-line);
  transition: border-color 0.3s;
}
.hasko-promise__card:hover {
  border-color: var(--hasko-bone);
}
.hasko-promise__icon {
  color: var(--hasko-bone);
  margin-bottom: 28px;
}
.hasko-promise__title {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--hasko-offwhite);
}
.hasko-promise__card p {
  margin: 0;
  color: var(--hasko-text-muted);
}

/* ---------- 17. Pre koho, proces, realizácie ---------- */
.tp-award-box-left .tp-award-text {
  margin: 0;
}
.hasko-award-text {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--hasko-ff-text);
  color: var(--hasko-text-muted);
}
/* kroky bez pripínania (mobil, < 1200 px): 4 px Carbon rám by kartu opticky odsadil od okraja */
@media (max-width: 1198px) {
  .agntix-dark .tp-work-item {
    border-width: 0;
  }
}
.hasko-reduce-motion .tp-work-item {
  border-width: 0;
}
/* nadpis a CTA procesu ostávajú viditeľné, kým sa kroky posúvajú — tam, kde ich nepripína GSAP */
@media (min-width: 992px) and (max-width: 1198px) {
  .tp-work-title-box {
    position: sticky;
    top: 110px;
  }
}
@media (min-width: 992px) {
  .hasko-reduce-motion .tp-work-title-box {
    position: sticky;
    top: 110px;
  }
}
.tp-section-title.hasko-work-title {
  font-size: clamp(44px, 6vw, 110px);
  line-height: 0.95;
}
.tp-project-title {
  margin-bottom: 14px;
}
/* gx-135 šablóny je na mobile širší ako obrazovka */
@media (max-width: 991px) {
  .tp-project-area .row.gx-135 {
    --bs-gutter-x: 30px;
  }
}

/* ---------- 18. Čísla (funfact) ---------- */
/* pás panelov je široký N × 100 % — sekcia ho oreže, inak by stránka mala vodorovný scroll */
.hasko-stats {
  overflow: hidden;
}
@media (min-width: 1200px) {
  .tp-funfact-panel-wrap {
    width: calc(var(--hasko-panely, 3) * 100%);
  }
}
.hasko-stats > .container {
  padding-bottom: 40px;
}
.hasko-stats .tp-funfact-green-wrap {
  padding-top: 110px;
  padding-bottom: 50px;
}
/* šablóna posúva číslo o -50 px a -20 px — pri menšom písme by lezlo na hranu panela */
.hasko-stats .tp-funfact-number > span {
  transform: none;
  margin-left: 0;
}
/* posledný panel pásu ani panely pod sebou (obmedzený pohyb, < 1200 px) nemajú bočný 10 px pruh */
.hasko-stats .tp-funfact-panel:last-child .tp-funfact-green-wrap,
.hasko-reduce-motion .hasko-stats .tp-funfact-green-wrap {
  border-right: 0;
}
.hasko-reduce-motion .hasko-stats .tp-funfact-panel:not(:last-child) .tp-funfact-green-wrap {
  border-bottom: 10px solid var(--hasko-carbon);
}
.tp-funfact-number span i {
  font-style: normal;
}
/* veľké číslo: Display (Mono je pri 300+ px príliš široké a zalomí sa), bez zalomenia */
.hasko-stats .tp-funfact-number > span {
  white-space: nowrap;
}
.hasko-stats .tp-funfact-number span {
  font-family: var(--hasko-ff-display);
  font-size: clamp(110px, 19vw, 320px);
}
/* obmedzený pohyb: panely pod sebou namiesto horizontálneho pásu */
.hasko-reduce-motion .hasko-stats .tp-funfact-panel {
  height: auto;
}

/* ---------- 19. Referencie ---------- */
.hasko-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-family: var(--hasko-ff-mono);
  font-weight: 600;
  background: var(--hasko-carbon);
  color: var(--hasko-bone);
}
/* rola autora sa zalamuje a nesiaha pod susednú (prekrývajúcu sa) kartu */
.tp-testimonial-author {
  align-items: flex-start !important;
}
.tp-testimonial-author-info {
  min-width: 0;
}
.tp-testimonial-author-info p {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .tp-testimonial-author-info {
    padding-right: 40px;
  }
}
/* šablóna ťahá posuvník o -100 px za okraje (pri slučke s mnohými kartami) — pri pár referenciách
   by krajné karty boli orezané, preto ostáva vo vnútri sekcie */
@media (min-width: 768px) {
  .tp-testimonial-slider-active {
    margin: 0 40px;
  }
  /* šablóna prekrýva karty o 25 px (-25 px okraje) — pri 3 širokých kartách by susedná zakryla text */
  .tp-testimonial-item {
    margin: 0 16px;
  }
}
.hasko-testimonial-dots {
  position: static;
  margin-top: 24px;
  display: none;
}
/* bodka 10 px, plocha na ťuknutie 24 × 24 px (WCAG 2.5.8, Úloha 8) */
.hasko-testimonial-dots .swiper-pagination-bullet {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  opacity: 1;
}
.hasko-testimonial-dots .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--hasko-offwhite);
  opacity: 0.35;
}
.hasko-testimonial-dots .swiper-pagination-bullet-active::before {
  background: var(--hasko-bone);
  opacity: 1;
}
@media (max-width: 767px) {
  /* šablóna ťahá posuvník o -100 px za okraje (pri slučke s mnohými kartami) — pri pár referenciách
   by krajné karty boli orezané, preto ostáva vo vnútri sekcie */
@media (min-width: 768px) {
  .tp-testimonial-slider-active {
    margin: 0 40px;
  }
  /* šablóna prekrýva karty o 25 px (-25 px okraje) — pri 3 širokých kartách by susedná zakryla text */
  .tp-testimonial-item {
    margin: 0 16px;
  }
}
.hasko-testimonial-dots {
    display: block;
    text-align: center;
  }
}
.tp-testimonial-item blockquote,
.tp-testimonial-item figcaption {
  margin: 0;
}

/* ---------- 20. Výzva na kontakt (ctaBanner) ---------- */
.hasko-cta {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--hasko-bone) 14%, transparent) 0%, transparent 55%),
    var(--hasko-carbon-raised);
  border-radius: 50px;
  margin: 40px 12px;
}
/* Predajný blok bez tvarov „A“/„V“ — línie sú akcent len na úvode, páse fotky a hlavičke realizácie
   (Tomáš 21. 10. 2026); ostáva obrysový symbol MH. */
.tp-section-title.hasko-cta__title {
  font-size: clamp(34px, 4.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.05em;
}
/* tlmenie farbou, nie opacity — opacity prvku riadi odhalenie GSAP (tp_fade_anim) */
.hasko-cta__text {
  color: color-mix(in srgb, var(--hasko-offwhite) 86%, transparent);
}
.hasko-cta__action {
  gap: 16px 28px;
}
.hasko-cta__note {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hasko-bone);
}
@media (max-width: 767px) {
  .hasko-cta {
    border-radius: 24px;
  }
}

/* ---------- 21. Kontakt a formulár ---------- */
.hasko-contact__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hasko-line);
}
.hasko-contact__list li span {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hasko-text-muted);
}
.hasko-contact__list a {
  font-size: 22px;
  color: var(--hasko-offwhite);
}
.hasko-contact__list a:hover {
  color: var(--hasko-bone);
}
.hasko-contact__note {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hasko-bone);
}
.hasko-form .tp-contact-form-input label {
  display: block;
}
.agntix-dark .hasko-form .tp-contact-form-input input,
.agntix-dark .hasko-form .tp-contact-form-input textarea,
.hasko-form .tp-contact-form-input select {
  background: var(--hasko-carbon-raised);
  border: 1px solid var(--hasko-line);
  color: var(--hasko-offwhite);
}
.hasko-form .tp-contact-form-input select,
.hasko-form .tp-contact-form-input input[type=date] {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  padding: 0 22px;
  font-size: 16px;
  color-scheme: dark;
}
.agntix-dark .hasko-form .tp-contact-form-input input:focus,
.agntix-dark .hasko-form .tp-contact-form-input textarea:focus,
.hasko-form .tp-contact-form-input select:focus {
  border-color: var(--hasko-bone);
  background: var(--hasko-carbon);
}
.hasko-form .tp-contact-form-input textarea {
  line-height: 1.5;
  padding-top: 16px;
  padding-bottom: 16px;
  height: 140px;
}
.hasko-form__services {
  border: 0;
  padding: 0;
  margin: 0 0 28px; /* mb-20 zo šablóny by tento reset zrušil — čipy by sa dotýkali ďalšieho popisu */
}
.hasko-form__services legend {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--hasko-offwhite);
}
.hasko-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hasko-check {
  position: relative;
  cursor: pointer;
}
.hasko-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.hasko-check span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid var(--hasko-line);
  color: var(--hasko-offwhite);
  font-size: 15px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.hasko-check:hover span {
  border-color: var(--hasko-bone);
}
.hasko-check input:checked + span {
  background: var(--hasko-bone);
  border-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}
.hasko-check input:focus-visible + span {
  outline: 2px solid var(--hasko-bone);
  outline-offset: 3px;
}
.hasko-form__required,
.hasko-form__gdpr {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hasko-text-muted);
}
.hasko-form__gdpr a {
  color: var(--hasko-bone);
  text-decoration: underline;
}
/* tlačidlo formulára: Bone Sand + Carbon text (Off White na Bone Sand nespĺňa kontrast) */
.tp-contact-form-btn button {
  background-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}
.tp-contact-form-btn button[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.hasko-form__status {
  min-height: 1.5em;
  color: var(--hasko-offwhite);
}
.hasko-form__status.is-error {
  color: var(--hasko-bone);
  font-weight: 600;
}
/* chyba pri poli (Úloha 8): text Bone Sand (9,9 : 1 na Carbon) + hrubší rámik poľa — nie iba farbou */
.hasko-form__error {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--hasko-bone);
}
.hasko-form [aria-invalid="true"] {
  border-color: var(--hasko-bone) !important;
  box-shadow: inset 0 0 0 1px var(--hasko-bone);
}
.hasko-form__thanks {
  padding: 48px 40px;
  border-radius: 20px;
  background: var(--hasko-carbon-raised);
  border: 1px solid var(--hasko-bone);
}
.tp-section-title.hasko-form__thanks-title {
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 20px;
}
.hasko-form__thanks a {
  color: var(--hasko-bone);
  text-decoration: underline;
}

/* ---------- 22. Hlavička, menu, pätička ---------- */
.tp-header-menu > nav > ul > li.active > a,
.tp-header-menu > nav > ul > li > a[aria-current="page"] {
  color: var(--hasko-bone);
}
.tp-header-logo img,
.tp-offcanvas-logo img {
  height: auto;
}
.tp-offcanvas-btn {
  margin-top: 30px;
}
.hasko-footer-logo img {
  height: auto;
}
.hasko-footer-text {
  margin-top: 24px;
  max-width: 22rem;
}
.hasko-footer-text p {
  color: var(--hasko-text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.tp-footer-widget-social {
  margin-top: 24px;
}
.tp-copyright-big-text.hasko-claim {
  font-family: var(--hasko-ff-mono);
  font-weight: 600;
  font-size: clamp(30px, 7.5vw, 140px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--hasko-offwhite);
}
.tp-copyright-right a + a {
  margin-left: 20px;
}
/* šablóna ťahá spodný riadok -30 px pod veľký text (iný font) — pri claime v Mono by sa prekrývali */
.tp-copyright-style-6 .tp-copyright-bottom {
  margin-top: 28px;
}

/* ---------- 23. Spodná lišta na mobile (Úloha 4b) ---------- */
.hasko-mobile-bar {
  display: none;
}
@media (max-width: 767px) {
  .hasko-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98; /* pod offcanvasom (99/999) a cookie lištou platformy */
    display: flex;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--hasko-carbon) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hasko-line);
  }
  .hasko-mobile-bar__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
  }
  .hasko-mobile-bar__btn--call {
    border: 1px solid var(--hasko-bone);
    color: var(--hasko-offwhite);
  }
  .hasko-mobile-bar__btn--lead {
    background: var(--hasko-bone);
    color: var(--hasko-carbon);
  }
  .hasko-mobile-bar__btn--lead:hover,
  .hasko-mobile-bar__btn--lead:focus {
    color: var(--hasko-carbon);
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .back-to-top-wrapper {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ---------- 24. Cookie lišta platformy (pf-consent.js) vo farbách identity ---------- */
html body .pf-consent {
  background: var(--hasko-carbon-raised);
  color: var(--hasko-offwhite);
  font-family: var(--hasko-ff-text);
  border-top: 1px solid var(--hasko-line);
  z-index: 10001;
}
html body .pf-consent .pf-yes {
  background: var(--hasko-bone);
  border-color: var(--hasko-bone);
  color: var(--hasko-carbon);
}
html body .pf-consent .pf-no {
  border-color: var(--hasko-offwhite);
  color: var(--hasko-offwhite);
}

/* ---------- 25. Ostatné bloky (podstránky) ---------- */
.hasko-page-header .tp-career-title {
  font-size: clamp(40px, 6.5vw, 110px);
  letter-spacing: -0.05em;
}
.hasko-facts__list {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid var(--hasko-line);
  border-bottom: 1px solid var(--hasko-line);
}
.hasko-facts__list dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hasko-text-muted);
  margin-bottom: 8px;
}
.hasko-facts__list dd {
  margin: 0;
  font-size: 18px;
  color: var(--hasko-offwhite);
}
.hasko-gallery__item img {
  border-radius: 12px;
}
.hasko-gallery__item figcaption {
  font-size: 13px;
  color: var(--hasko-text-muted);
}
/* šablóna dáva .tp-video-thumb od 1200 px pevnú šírku pre mriežku 6 náhľadov — tu je video samo */
.hasko-video--samo .tp-video-thumb {
  width: 100%;
}
.hasko-video--samo video {
  width: 100%;
  height: auto;
  display: block;
}
.hasko-richtext h2,
.hasko-richtext h3 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

/* ==========================================================================
   VIAC FOTIEK V SEKCIÁCH (rozhodnutie docs/decisions/0011-vizual-fotky-grafika.md)
   Každá fotka mimo úvodu je lazy so srcset (platformové MediaSrc/MediaSrcset — podpísané URL).
   ========================================================================== */

/* ---------- 26. Spoločné: štítok na fotke (Red Hat Mono, manuál str. 7) ---------- */
.hasko-foto {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.hasko-foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* text na fotke má vlastné tmavé pozadie — kontrast nezávisí od fotky (Off White na Carbon 85 % ≥ 12 : 1) */
.hasko-foto__popis {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--hasko-carbon) 85%, transparent);
  color: var(--hasko-offwhite);
  font-family: var(--hasko-ff-mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  white-space: pre-line;
}

/* ---------- 27. Služby: fotka karty + ikona ako štítok ---------- */
.hasko-service-foto__ram {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 460px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hasko-service-foto__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tp-service-item:hover .hasko-service-foto__ram img {
  transform: scale(1.04);
}
.hasko-service-foto__ikona {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hasko-carbon);
  color: var(--hasko-bone);
}
@media (max-width: 767px) {
  .hasko-service-foto {
    text-align: left !important;
    margin-top: 24px;
  }
}

/* ---------- 28. Pozicioning: koláž troch fotiek ---------- */
.hasko-kolaz {
  max-width: 415px;
}
.hasko-kolaz__mala {
  position: absolute;
  right: -48px;
  bottom: -44px;
  z-index: 2;
  width: 220px;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--hasko-carbon);
  border-radius: 18px;
  overflow: hidden;
}
.hasko-kolaz__mala img,
.hasko-kolaz__siroka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hasko-kolaz__siroka {
  margin-top: 48px;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1399px) {
  .hasko-kolaz__mala {
    right: -24px;
  }
}
@media (max-width: 767px) {
  .hasko-kolaz {
    margin-bottom: 56px;
  }
  /* mobil: koláž dvoch fotiek — tretia (doplnková) sa ani nestiahne (lazy v skrytom prvku), výkon (0011) */
  .hasko-kolaz__siroka {
    display: none;
  }
  .hasko-kolaz__mala {
    right: 0;
    width: 46%;
  }
}

/* ---------- 29. Fotka na celú šírku (bannerSection, šablóna tp-banner-area) ---------- */
/* šablóna: 900 px výška, obrázok posunutý -370 px (pevný parallax) — tu výška podľa šírky a obrázok
   na celý rám; pri plynulom scrolle o 25 % vyšší (data-speed="auto", sekcia 6) */
.hasko-banner .tp-banner-img {
  height: clamp(320px, 52vw, 820px);
  border-radius: 0;
  border-top-color: var(--hasko-bone);
}
.hasko-banner .tp-banner-img img {
  margin-top: 0;
  height: 100%;
  object-fit: cover;
}
.hasko-plynuly .tp-banner-img img[data-speed] {
  height: 125%;
}

/* ---------- 30. Pre koho: riadok pri prechode myšou ---------- */
/* Fotka pri prechode myšou bola odstránená na želanie majiteľa (21. 10. 2026, rozhodnutie 0011).
   Šablóna pri hoveri vyplní riadok akcentom (Bone Sand) a text dá „white“ = Off White — 1,6 : 1. Text Carbon (9,9 : 1). */
.agntix-dark .tp-award-item:hover .tp-award-year,
.agntix-dark .tp-award-item:hover .tp-award-text,
.agntix-dark .tp-award-item:hover .tp-award-position,
.agntix-dark .tp-award-item:hover .tp-award-icon,
.agntix-dark .tp-award-item:hover .hasko-award-text {
  color: var(--hasko-carbon);
}

/* ---------- 31. Čísla: fotka v paneli ---------- */
.hasko-stats__foto {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  margin-bottom: 36px;
  border-radius: 20px;
  overflow: hidden;
}
.hasko-stats__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .hasko-stats .tp-funfact-green-wrap {
    padding-top: 80px;
  }
  .hasko-stats__foto {
    max-width: 440px;
  }
}

/* ---------- 32. Referencie: stmavená fotka na pozadí ---------- */
.hasko-testimonial-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hasko-testimonial-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.hasko-testimonial-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--hasko-carbon-deep) 0%, color-mix(in srgb, var(--hasko-carbon-deep) 55%, transparent) 35%, color-mix(in srgb, var(--hasko-carbon-deep) 70%, transparent) 70%, var(--hasko-carbon-deep) 100%);
}
.tp-testimonial-area > .container,
.tp-testimonial-area > .tp-testimonial-slider-wrap {
  position: relative;
  z-index: 1;
}

/* ---------- 33. Sľub a proces: fotka vedľa bodov, kratšie texty ---------- */
.hasko-promise__foto {
  height: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  width: 100%;
}
.hasko-promise--foto .hasko-promise__card {
  padding: 30px 28px;
}
.hasko-promise--foto .hasko-promise__icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--hasko-carbon);
  border: 1px solid var(--hasko-line);
}
.hasko-promise--foto .hasko-promise__title {
  font-size: 21px;
}
@media (max-width: 991px) {
  .hasko-promise__foto {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}
.hasko-proces__foto {
  aspect-ratio: 16 / 9;
  max-width: 560px;
}
/* v pripnutom stĺpci nesmie fotka predĺžiť stĺpec nad výšku okna */
@media (min-width: 1200px) and (max-height: 860px) {
  .hasko-proces__foto {
    max-width: 420px;
  }
}

/* ==========================================================================
   GRAFIKA Z MANUÁLU (rozhodnutie 0011; manuál HAŠKO str. 6 nálepky a odznak, str. 7 linky a štítky na fotkách)
   Len farby manuálu: Carbon, Bone Sand, Off White. Farbu nesú fotky. Všetko dekoratívne je aria-hidden.
   ========================================================================== */

/* ---------- 34. Tvar „A“ cez fotku (kompozícia manuálu str. 7 vľavo) ---------- */
/* Manuál (PDF body, fotka 508,2 × 635,2, tvar A 744,4 × 519,8): obrys Off White je 146,5 % šírky fotky, začína 7,65 %
   vľavo od fotky a jeho základňa leží na 81,8 % výšky; fotka ho oreže. Tvar sa škáluje so ŠÍRKOU fotky a drží
   základňu na 82 % výšky — pri fotke na šírku (16 : 9, 4 : 3) tak hore vyčnieva a vidno spodnú časť „A“
   (šikmina vľavo, zárez vpravo od stredu, základňa). Základňa vždy ostane nad štítkom: max(18 %, štítok + medzera).
   Prvok má rozmer viewBoxu s okrajom 4 jednotky (752,5 × 527,8): šírka 146,5 % × 752,5 / 744,5 = 148,07 %
   a posun translate(-4/752,5, +4/527,8) vlastnej veľkosti dá presne ľavý okraj a základňu tvaru. */
.hasko-foto--linie {
  --hasko-foto-okraj: max(16px, 7.5%); /* manuál: štítok 7,7 % zľava, symbol 9 % sprava */
  --hasko-foto-dole: max(14px, 5%);
  --hasko-foto-symbol: clamp(36px, 13%, 88px); /* manuál: symbol 15 % šírky fotky */
  --hasko-popis-vyska: 0px;
}
.hasko-foto--linie:has(> .hasko-foto__popis) {
  --hasko-popis-vyska: 66px; /* 3 riadky Red Hat Mono 12/1,45 + padding */
}
.hasko-banner .hasko-foto--linie:has(> .hasko-foto__popis) {
  --hasko-popis-vyska: 50px; /* pás s fotkou: štítok z poľa caption — 1 riadok, na mobile 2 */
}
.hasko-foto--linie::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -7.65%;
  bottom: max(18%, calc(var(--hasko-foto-dole) + var(--hasko-popis-vyska) + 14px));
  width: 148.07%;
  aspect-ratio: 752.5 / 527.8;
  transform: translate(-0.532%, 0.758%);
  background-color: var(--hasko-offwhite);
  -webkit-mask: url("../img/brand/hasko-tvar-a.svg") no-repeat 0 0 / 100% 100%;
  mask: url("../img/brand/hasko-tvar-a.svg") no-repeat 0 0 / 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}
/* Línia „A“ je akcent, nie ozdoba každej fotky (Tomáš 21. 10. 2026): ostáva na úvode, páse fotky a hlavičke
   realizácie. Karty realizácií, záruky a postup majú --bez-linie — rozloženie štítku a symbolu ostáva. */
.hasko-foto--bez-linie::after {
  content: none;
}
.hasko-foto--linie .hasko-foto__popis {
  left: var(--hasko-foto-okraj);
  bottom: var(--hasko-foto-dole);
  max-width: calc(100% - 2 * var(--hasko-foto-okraj) - var(--hasko-foto-symbol) - 16px);
}
.hasko-foto--banner,
.hasko-banner .hasko-foto {
  border-radius: 0;
}
/* symbol MH vpravo dole pod základňou (manuál str. 7); .tp-project-thumb img šablóny by ho roztiahol na 100 % */
.hasko-foto__symbol,
.hasko-foto > img.hasko-foto__symbol,
.tp-project-thumb img.hasko-foto__symbol {
  position: absolute;
  margin: 0;
  object-fit: contain;
  right: var(--hasko-foto-okraj, 18px);
  bottom: calc(var(--hasko-foto-dole, 10px) + 8px);
  z-index: 2;
  width: var(--hasko-foto-symbol, 44px);
  height: auto;
  pointer-events: none;
}
/* realizácie: štítok a linky nad WebGL plátnom, myš a kurzor idú cez ne */
.tp-project-thumb.hasko-foto .hasko-foto__popis {
  pointer-events: none;
}
.tp-project-thumb.hasko-foto::after {
  z-index: 3;
}
.tp-project-thumb.hasko-foto .hasko-foto__popis,
.tp-project-thumb.hasko-foto .hasko-foto__symbol {
  z-index: 4;
}
/* fotka na celú šírku: štítok a symbol bližšie k okraju obrazovky (premenné sekcie 34 → aj základňa tvaru) */
.hasko-foto--banner,
.hasko-banner .hasko-foto {
  --hasko-foto-okraj: max(16px, 4vw);
  --hasko-foto-dole: 28px;
}

/* ---------- 35. Okrúhly odznak (otáča sa; pri obmedzenom pohybe stojí) ---------- */
.hasko-odznak {
  position: relative;
  flex: 0 0 auto;
  width: var(--hasko-odznak, 168px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hasko-odznak__kruh {
  display: block;
  width: 100%;
  height: 100%;
  animation: hasko-otacanie 36s linear infinite;
}
.hasko-odznak__symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: auto;
  transform: translate(-50%, -50%);
}
@keyframes hasko-otacanie {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hasko-odznak__kruh { animation: none; }
}
.hasko-reduce-motion .hasko-odznak__kruh {
  animation: none;
}
/* v úvode: pravý dolný roh fotky, nad štítkom (sekcia 36) */
.hasko-odznak--hero {
  --hasko-odznak: 168px;
}
/* pod tlačidlami úvodu musí byť miesto na odznak v rohu (odznak + 36 px od spodku + 24 px medzera) */
@media (max-width: 1199px) {
  .hasko-odznak--hero {
    --hasko-odznak: 112px;
  }
  .hasko-hero.tp-hero-ptb {
    padding-bottom: 172px;
  }
}
@media (max-width: 575px) {
  .hasko-odznak--hero {
    --hasko-odznak: 88px;
  }
  .hasko-hero.tp-hero-ptb {
    padding-bottom: 148px;
  }
}
.hasko-odznak--cta {
  position: absolute;
  top: 48px;
  right: 6%;
  z-index: 1;
  --hasko-odznak: 150px;
}
@media (max-width: 991px) {
  .hasko-odznak--cta {
    top: auto;
    bottom: 28px;
    --hasko-odznak: 96px;
  }
}

/* ---------- 36. Štítok na fotke v úvode (claim + značka, Red Hat Mono) ---------- */
/* pravý dolný roh fotky: odznak (sekcia 35) a pod ním štítok, zarovnané vpravo */
.hasko-hero__roh {
  position: absolute;
  right: max(24px, 3vw);
  bottom: 36px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.hasko-hero__popis {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--hasko-offwhite) 45%, transparent);
  color: var(--hasko-offwhite);
  font-family: var(--hasko-ff-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  opacity: 0.85;
}
@media (max-width: 1199px) {
  .hasko-hero__popis {
    display: none;
  }
}

/* ---------- 37. Nálepky „LIVE. UNDER CONTROL.“ a „READY for LIVE“ ---------- */
.hasko-nalepka {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px 10px;
  border-radius: 12px;
  background: var(--hasko-carbon);
  color: var(--hasko-bone);
  border: 1px solid color-mix(in srgb, var(--hasko-bone) 55%, transparent);
  font-family: var(--hasko-ff-mono);
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}
.hasko-nalepka b {
  font-weight: 700;
}
.hasko-nalepka--ready {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  background: var(--hasko-bone);
  color: var(--hasko-carbon);
  border-color: var(--hasko-bone);
  font-size: 17px;
  transform: rotate(5deg);
}
.hasko-nalepka--ready small {
  font-size: 0.72em;
  text-transform: none;
  font-style: italic;
}
.hasko-nalepka--sluzby {
  position: absolute;
  right: 6%;
  top: 30px;
}
.hasko-nalepka--kolaz {
  position: absolute;
  z-index: 3;
  top: -18px;
  left: -26px;
}
@media (min-width: 1400px) {
  .hasko-nalepka--kolaz {
    left: 74px; /* hlavná fotka šablóny má na veľkých šírkach 100 px odsadenie zľava */
  }
}
@media (max-width: 767px) {
  .hasko-nalepka--sluzby {
    position: static;
    margin-top: 20px;
  }
  .hasko-nalepka--kolaz {
    left: 8px;
  }
}

/* ---------- 38. Veľký obrysový symbol MH v pozadí (výzva na kontakt, pätička) ---------- */
.hasko-symbol-obrys {
  position: absolute;
  z-index: 0;
  width: min(62%, 900px);
  height: auto;
  right: -6%;
  bottom: -14%;
  opacity: 0.14;
  pointer-events: none;
}
.hasko-symbol-obrys--paticka {
  width: min(70%, 1100px);
  right: auto;
  left: -8%;
  bottom: auto;
  top: 40px;
  opacity: 0.07;
}
.tp-footer-area > .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   POHYBLIVÝ OBRAZ NAMIESTO VIDEA (videoSection, rozhodnutie 0011)
   Mriežka šablóny (tp-video-area, 6 náhľadov 16 : 9, zväčšenie pri scrolle — main.js), v strede prelínanie fotiek
   s pomalým priblížením (Ken Burns). Beží len na desktope s pohybom (hasko.js pridá .hasko-slucka--bezi).
   ========================================================================== */

/* ---------- 39. Mriežka a stred ---------- */
.hasko-video--mriezka .tp-video-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hasko-video--mriezka .tp-video-thumb > img,
.hasko-video--mriezka .tp-video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1199px) {
  .hasko-video--mriezka .tp-video-thumb {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 767px) {
  .hasko-video--mriezka .tp-video-thumb {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- 40. Prelínanie fotiek ---------- */
.hasko-slucka {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hasko-slucka__snimka {
  position: absolute;
  inset: 0;
}
/* kým slučka nebeží (mobil, obmedzený pohyb, náhľad blokov), je vidieť len prvá fotka; ostatné sa ani nestiahnu */
.hasko-slucka__snimka:not(:first-child) {
  display: none;
}
.hasko-slucka__snimka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hasko-slucka--bezi .hasko-slucka__snimka {
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
.hasko-slucka--bezi .hasko-slucka__snimka.is-aktivna {
  opacity: 1;
}
.hasko-slucka--bezi .hasko-slucka__snimka img {
  animation: hasko-ken-burns 14s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.hasko-slucka--bezi .hasko-slucka__snimka:nth-child(even) img {
  animation-name: hasko-ken-burns-2;
}
/* hýbe sa len viditeľná a práve miznúca fotka, a len keď je sekcia na obrazovke a nie je pozastavená */
.hasko-slucka--bezi.is-viditelna:not(.is-stoji) .hasko-slucka__snimka.is-aktivna img,
.hasko-slucka--bezi.is-viditelna:not(.is-stoji) .hasko-slucka__snimka.is-predosla img {
  animation-play-state: running;
}
@keyframes hasko-ken-burns {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.14) translate(-2.5%, -1.5%); }
}
@keyframes hasko-ken-burns-2 {
  from { transform: scale(1.14) translate(2%, 1%); }
  to { transform: scale(1.02) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hasko-slucka__snimka img {
    animation: none !important;
  }
}

/* ---------- 41. Pozastaviť / spustiť (WCAG 2.2.2) ---------- */
.hasko-slucka__prepinac {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--hasko-bone) 55%, transparent);
  border-radius: 50%;
  background: var(--hasko-carbon);
  color: var(--hasko-bone);
  cursor: pointer;
}
.hasko-slucka__prepinac[hidden] {
  display: none;
}
.hasko-slucka__prepinac:hover {
  color: var(--hasko-offwhite);
}
.hasko-slucka__ico-spusti,
.hasko-slucka__prepinac[aria-pressed="true"] .hasko-slucka__ico-pauza {
  display: none;
}
.hasko-slucka__prepinac[aria-pressed="true"] .hasko-slucka__ico-spusti {
  display: block;
}

/* ---------- 42. Fotka pod hlavičkou podstránky bez plynulého scrollu ---------- */
/* šablóna posúva obrázok o -150 px (pevný parallax) — bez ScrollSmoother ostával pod fotkou prázdny pás;
   fotka vyplní rám (pri plynulom scrolle platí 125 % zo sekcie 6) */
.ar-banner-wrap img {
  margin-top: 0;
  height: 100%;
  object-fit: cover;
}

/* ---------- 43. Služby: kopa kariet (hasko-efekty.js „3. Karty služieb“) ---------- */
/* Len od 1199 px s pohybom (trieda dáva JS). Hustejšia karta, aby bola navrchu celá aj pri nízkom okne;
   číslo a začiatok nadpisu sú v prvých ~44 px — to ostáva vidieť z karty zakrytej ďalšou (pás ≥ 48 px). */
.hasko-sluzby-stoh .tp-service-item {
  position: relative;
  padding: 14px 40px 28px;
}
.hasko-sluzby-stoh .tp-service-number {
  padding-top: 8px;
}
.hasko-sluzby-stoh .tp-service-content .tp-section-title {
  font-size: clamp(30px, 2.7vw, 44px);
  line-height: 1.04;
  margin-bottom: 14px;
}
.hasko-sluzby-stoh .tp-service-content p {
  margin-bottom: 18px;
}
.hasko-sluzby-stoh .tp-service-content .tp-service-btn {
  margin-bottom: 0;
}
.hasko-sluzby-stoh .hasko-service-foto__ram {
  max-width: 400px;
  aspect-ratio: 16 / 10;
}
.hasko-sluzby-stoh .hasko-service-icon .hasko-ikona {
  width: clamp(64px, 6vw, 110px);
}
/* pás zakrytej karty = tlačidlo „Zobraziť službu: …“ cez celú šírku; klikateľné len keď je karta zakrytá */
.hasko-sluzby-lista {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--hasko-sluzby-pas, 48px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  transition: background-color 0.2s;
}
.tp-service-item.is-zakryta .hasko-sluzby-lista {
  pointer-events: auto;
}
.tp-service-item.is-zakryta .hasko-sluzby-lista:hover {
  background-color: rgba(242, 243, 240, 0.05);
}
.hasko-sluzby-lista:focus-visible {
  outline: 2px solid var(--hasko-bone);
  outline-offset: -2px;
}
/* obal pripnutia (ScrollTrigger .pin-spacer) ostáva v toku na pôvodnom mieste karty — je priehľadný, ale
   zachytával by kliky na kartách nakopených nad ním (aj tlačidlá „Viac o službe“) */
.hasko-sluzby-stoh--pin > .pin-spacer {
  pointer-events: none;
}
.hasko-sluzby-stoh--pin > .pin-spacer > .tp-service-panel {
  pointer-events: auto;
}
/* meranie výšky pevnej hlavičky (hasko-efekty.js) — bez prechodov, nikdy sa nevykreslí */
.hasko-meranie,
.hasko-meranie * {
  transition: none !important;
}