/* ═══════════════════════════════════════════════════════════════
   uvod.css — sekcie nového vzhľadu (úvod, stránky služieb).
   Načíta sa len na úvode po dizajn.css (farby, písmo, hlavička,
   päta a tlačidlá sú spoločné pre celý web v dizajn.css).
   ═══════════════════════════════════════════════════════════════ */
/* pôvodné pravidlá podľa id (main.css, web.css) */
.index-page #akotofunguje, .index-page #integracia, .index-page #partner, .index-page #sluzby, .index-page #z-blogu { padding: 110px 0; }

/* ── hero ── */
.u-hero { position: relative; min-height: min(860px, 100vh); display: flex; align-items: center; overflow: hidden; background: var(--u-navy-tmava); color: #fff; padding: 150px 0 90px; }
/* fotka nie je dosť ostrá na plnú šírku – jemný blur; presah o 24px skryje svetlý okraj rozmazania */
.u-hero-foto { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; object-position: center 40%; filter: blur(3px); }
.u-hero-tien { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 27, 46, .96) 0%, rgba(12, 27, 46, .86) 38%, rgba(12, 27, 46, .45) 72%, rgba(12, 27, 46, .25) 100%); }
.u-hero-obsah { position: relative; z-index: 1; }
.u-hero-stitok { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin: 0; }
.u-hero-stitok span { width: 34px; height: 2px; background: var(--u-oranz); }
.u-hero h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; color: #fff; max-width: 820px; margin: 26px 0 0; }
.u-hero h1 span { color: var(--u-oranz); }
.u-hero-popis { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 520px; margin: 26px 0 0; }
.u-hero-akcie { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.u-hero-fakty { display: flex; gap: 0; list-style: none; padding: 0; margin: 70px 0 0; max-width: 760px; border-top: 1px solid rgba(255, 255, 255, .18); }
.u-hero-fakty li { flex: 1; padding: 22px 26px 0 0; display: flex; flex-direction: column; gap: 4px; }
.u-hero-fakty li + li { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .18); }
.u-hero-fakty strong { font-family: var(--u-nadpis); font-size: 20px; font-weight: 600; color: #fff; }
.u-hero-fakty span { font-size: 13px; color: rgba(255, 255, 255, .65); }

/* ── ako to funguje ── */
.u-kroky { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.u-kroky li { padding: 0 28px; border-left: 1px solid var(--u-linka); }
.u-kroky li:first-child { padding-left: 0; border-left: 0; }
.u-krok-cislo { display: block; font-family: var(--u-nadpis); font-size: 44px; font-weight: 600; color: var(--u-oranz); line-height: 1; margin-bottom: 26px; }
.u-kroky h3, .u-doplnky h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--u-navy); margin: 0; }
.u-kroky p, .u-doplnky p { margin: 12px 0 0; color: var(--u-sedy); font-size: 15px; line-height: 1.7; }
.u-doplnky { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.u-doplnky > div { display: flex; gap: 20px; padding: 30px; border-radius: 8px; background: var(--u-plocha); }
.u-doplnky > div > i { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--u-oranz); font-size: 22px; box-shadow: 0 1px 2px rgba(21, 46, 72, .06); }

/* ── integrácie ── */
.u-platformy { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 56px; border-top: 1px solid var(--u-linka); border-left: 1px solid var(--u-linka); background: #fff; }
.u-platformy > div { height: 110px; display: flex; align-items: center; justify-content: center; padding: 26px; border-right: 1px solid var(--u-linka); border-bottom: 1px solid var(--u-linka); transition: background .2s; }
.u-platformy > div:hover { background: #fffaf6; }
.u-platformy img { max-height: 36px; max-width: 100%; object-fit: contain; }
.u-platformy img.u-stvorec { max-height: 72px; }

/* ── partnerstvo ── */
.u-partner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.u-galeria img { display: block; width: 100%; object-fit: cover; border-radius: 8px; }
.u-galeria-velka { aspect-ratio: 4 / 3; }
.u-galeria > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.u-galeria > div img { aspect-ratio: 1; border-radius: 6px; }
.u-galeria > p { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 0; font-size: 13px; color: var(--u-sedy); }
.u-role { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.u-role > div { border-top: 2px solid var(--u-oranz); padding-top: 20px; }
.u-role > div + div { border-top-color: var(--u-navy); }
.u-role > div > span { font-size: 13px; font-weight: 800; color: var(--u-oranz); }
.u-role > div + div > span { color: var(--u-navy); }
.u-role h3 { font-size: 17px; font-weight: 600; color: var(--u-navy); margin: 6px 0 0; line-height: 1.4; }
.u-role ul { list-style: none; padding: 0; margin: 16px 0 0; }
.u-role li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--u-sedy); margin-bottom: 9px; }
.u-role li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 1px; color: var(--u-oranz); font-size: 15px; }

/* ── čísla ── */
.u-cisla { background: var(--u-navy-tmava); padding: 64px 0; position: relative; overflow: hidden; isolation: isolate; }
.u-cisla::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url("../img/sklad-pack4you-1.webp") center / cover no-repeat; filter: blur(10px) saturate(1.15); }
.u-cisla::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 27, 46, .8), rgba(12, 27, 46, .7)); }
.u-cisla .cislo-hodnota { font-variant-numeric: tabular-nums; }
.u-cisla-mriezka { display: grid; grid-template-columns: repeat(4, 1fr); }
.u-cisla .cislo-box { background: none; border: 0; box-shadow: none; padding: 0 0 0 32px; border-left: 1px solid rgba(255, 255, 255, .16); border-radius: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.u-cisla .cislo-box:first-child { border-left: 0; padding-left: 0; }
.u-cisla .cislo-hodnota { font-family: var(--u-nadpis); font-size: clamp(32px, 3.4vw, 46px); font-weight: 600; color: var(--u-oranz); line-height: 1.1; }
.u-cisla .cislo-popis { color: rgba(255, 255, 255, .78); font-size: 14px; }

/* ── služby ── */
.u-sluzby { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin-top: 50px; }
.u-sluzba { display: flex; align-items: flex-start; gap: 24px; padding: 34px 0; border-top: 1px solid var(--u-linka); color: inherit; text-decoration: none; }
.u-sluzba-ikona { flex-shrink: 0; font-size: 30px; color: var(--u-oranz); line-height: 1; }
.u-sluzba h3 { font-size: 20px; font-weight: 600; color: var(--u-navy); margin: 0; transition: color .2s; }
.u-sluzba p { margin: 10px 0 0; color: var(--u-sedy); font-size: 15px; line-height: 1.7; }
.u-sluzba-sipka { margin-left: auto; font-size: 20px; color: var(--u-navy); transition: transform .2s, color .2s; }
.u-sluzba:hover h3, .u-sluzba:hover .u-sluzba-sipka { color: var(--u-oranz); }
.u-sluzba:hover .u-sluzba-sipka { transform: translate(3px, -3px); }

/* ── časté otázky ── */
.index-page #faq { margin-top: 0; padding: 110px 0; }
.u-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 90px; align-items: start; }
.u-faq-uvod { position: sticky; top: 110px; }
.u-faq-uvod > p { color: var(--u-sedy); font-size: 16px; line-height: 1.75; margin: 22px 0 26px; }
/* main.js pridáva na desktope triedu w-50 (pôvodný úzky stĺpec) */
.dizajn .u-faq-zoznam .custom-accordion { width: 100% !important; background: none; border: 0; border-bottom: 1px solid var(--u-linka); border-radius: 0; margin: 0; }
.dizajn .u-faq-zoznam .custom-accordion:first-child { border-top: 1px solid var(--u-linka); }
.dizajn .u-faq-zoznam .accordion-button { background: none; color: var(--u-navy); font-family: var(--u-pismo); font-size: 17px; font-weight: 600; padding: 22px 0; }
.dizajn .u-faq-zoznam .accordion-button span:first-child { display: none; }
.dizajn .u-faq-zoznam .custom-accordion:not(.active) .accordion-button:hover { background: none; color: var(--u-oranz); }
.dizajn .u-faq-zoznam .custom-accordion.active .accordion-button { background: none; color: var(--u-oranz); }
.dizajn .u-faq-zoznam .accordion-icon { font-size: 28px; color: var(--u-oranz); }
.dizajn .u-faq-zoznam .accordion-content { background: none; padding: 0 40px 0 0; }
.dizajn .u-faq-zoznam .accordion-content p { color: var(--u-sedy); font-size: 15px; line-height: 1.8; padding-bottom: 24px; margin: 0; white-space: pre-line; }
.dizajn .u-faq-zoznam .accordion-content em { font-style: normal; font-weight: 600; color: var(--u-navy); }

/* ── blog ── */
.u-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 50px; }
.u-clanok { color: inherit; text-decoration: none; display: block; }
.u-clanok-foto { overflow: hidden; border-radius: 8px; background: var(--u-plocha); aspect-ratio: 1.6; }
.u-clanok-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.u-clanok:hover img { transform: scale(1.04); }
.u-clanok-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--u-sedy); margin: 18px 0 0; }
.u-clanok h3 { display: flex; justify-content: space-between; gap: 18px; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--u-navy); margin: 10px 0 0; transition: color .2s; }
.u-clanok h3 i { flex-shrink: 0; color: var(--u-oranz); }
.u-clanok:hover h3 { color: var(--u-oranz); }

/* ── výzva ── */
.u-vyzva { background: var(--u-navy-tmava); color: #fff; padding: 100px 0; position: relative; overflow: hidden; isolation: isolate; }
.u-vyzva::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url("../img/hero-sklad.webp") center 35% / cover no-repeat; filter: blur(16px) saturate(1.1); }
.u-vyzva::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 70% at 92% 50%, rgba(244, 114, 22, .16), transparent 70%),
    linear-gradient(90deg, rgba(12, 27, 46, .95) 0%, rgba(12, 27, 46, .82) 50%, rgba(12, 27, 46, .6) 100%); }
.u-vyzva-obsah { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.u-vyzva .u-stitok { color: var(--u-oranz); }
.u-vyzva h2 { font-size: clamp(36px, 4.4vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: 0; }
.u-vyzva-obsah p:last-child { color: rgba(255, 255, 255, .75); font-size: 17px; line-height: 1.7; max-width: 480px; margin: 22px 0 0; }

/* ── kontakt ── */
.u-kontakt-mriezka { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.u-kontakt-udaje { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 14px; }
.u-kontakt-udaje li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--u-linka); border-radius: 8px; }
.u-kontakt-udaje i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; background: #fff1e6; color: var(--u-oranz); font-size: 19px; }
.u-kontakt-udaje span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-sedy); margin-bottom: 4px; }
.u-kontakt-udaje a { font-family: var(--u-nadpis); font-size: 19px; font-weight: 600; color: var(--u-navy); text-decoration: none; }
.u-kontakt-udaje a:hover { color: var(--u-oranz); }
.u-kontakt-udaje p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--u-text); }
.u-formular-karta { background: var(--u-plocha); border-radius: 6px; padding: 40px; }
.u-formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.u-pole { display: flex; flex-direction: column; gap: 8px; margin: 0; position: relative; }
.u-pole > span, .u-predmet legend { font-size: 13px; font-weight: 700; color: var(--u-navy); }
.u-pole input, .u-pole textarea { width: 100%; font: inherit; font-size: 15px; color: var(--u-text); background: #fff; border: 1px solid var(--u-linka); border-radius: 6px; padding: 14px 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.u-pole textarea { resize: vertical; min-height: 130px; }
.u-pole input:focus, .u-pole textarea:focus { border-color: var(--u-oranz); box-shadow: 0 0 0 4px rgba(244, 114, 22, .15); }
.u-pole--cela, .u-predmet, .u-suhlas, .u-formular-odoslat { grid-column: 1 / -1; }
.u-pole #charCount { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: var(--u-sedy); }
.u-predmet { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.u-predmet legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.u-cip { margin: 0; cursor: pointer; }
.u-cip input { position: absolute; opacity: 0; pointer-events: none; }
.u-cip span { display: inline-block; padding: 9px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--u-linka); font-size: 14px; font-weight: 600; color: var(--u-navy); transition: background .2s, border-color .2s, color .2s; }
.u-cip:hover span { border-color: var(--u-oranz); }
.u-cip input:checked + span { background: var(--u-oranz); border-color: var(--u-oranz); color: #fff; }
.u-cip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(244, 114, 22, .25); }
.u-suhlas { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--u-sedy); margin: 4px 0 0; cursor: pointer; }
.u-suhlas input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--u-oranz); }
.u-suhlas a { color: var(--u-navy); font-weight: 600; }
.u-formular-odoslat { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.u-formular-odoslat .u-btn { border: 0; cursor: pointer; }
.u-formular-odoslat small { font-size: 13px; color: var(--u-sedy); }
#formMessage .alert { border-radius: 6px; margin: 0; font-size: 15px; }

/* ── tablet ── */
@media (max-width: 1100px) {
  .u-kontakt-mriezka { gap: 50px; }
  .u-partner { gap: 50px; }
  .u-faq { gap: 50px; }
}
@media (max-width: 900px) {
  .u-sekcia, .index-page #faq, .index-page #akotofunguje, .index-page #integracia, .index-page #partner, .index-page #sluzby, .index-page #z-blogu { padding: 80px 0; }
  .u-uvod-riadok { flex-direction: column; align-items: flex-start; gap: 22px; }
  .u-kroky { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .u-kroky li:nth-child(3) { padding-left: 0; border-left: 0; }
  .u-platformy { grid-template-columns: repeat(4, 1fr); }
  .u-partner, .u-faq, .u-kontakt-mriezka { grid-template-columns: 1fr; }
  .u-faq-uvod { position: static; }
  .u-cisla-mriezka { grid-template-columns: 1fr 1fr; gap: 34px 0; }
  .u-cisla .cislo-box:nth-child(3) { border-left: 0; padding-left: 0; }
  .u-sluzby { grid-template-columns: 1fr; }
  .u-blog { grid-template-columns: 1fr 1fr; }
  .u-vyzva-obsah { flex-direction: column; align-items: flex-start; }
}

/* ── mobil ── */
@media (max-width: 575px) {
  .u-sekcia, .index-page #faq, .index-page #akotofunguje, .index-page #integracia, .index-page #partner, .index-page #sluzby, .index-page #z-blogu { padding: 64px 0; }
  .u-hero { min-height: auto; padding: 130px 0 60px; }
  .u-hero-tien { background: rgba(12, 27, 46, .82); }
  .u-hero-popis { font-size: 16px; }
  .u-hero-akcie { gap: 20px; }
  .u-hero-fakty { flex-direction: column; margin-top: 46px; }
  .u-hero-fakty li, .u-hero-fakty li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .u-hero-fakty span { text-align: right; }
  .u-formular-karta { padding: 24px 20px; border-radius: 8px; }
  .u-formular { grid-template-columns: 1fr; }
  .u-kroky { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .u-kroky li, .u-kroky li:nth-child(3) { padding: 0 0 0 20px; border-left: 2px solid var(--u-linka); }
  .u-kroky li:first-child { padding-left: 20px; border-left: 2px solid var(--u-linka); }
  .u-krok-cislo { font-size: 32px; margin-bottom: 12px; }
  .u-doplnky { grid-template-columns: 1fr; margin-top: 40px; }
  .u-doplnky > div { padding: 22px; }
  .u-platformy { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
  .u-platformy > div { height: 84px; padding: 16px; }
  .u-role { grid-template-columns: 1fr; gap: 26px; }
  .u-cisla { padding: 44px 0; }
  .u-cisla .cislo-box { padding-left: 18px; }
  .u-sluzba { padding: 26px 0; gap: 18px; }
  .u-sluzba h3 { font-size: 18px; }
  .u-blog { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .u-vyzva { padding: 70px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .u-btn, .u-btn i, .u-odkaz i, .u-clanok-foto img, .u-sluzba-sipka { transition: none; }
}


/* ═══ pás dopravcov (Ako to funguje) ═══ */
.u-dopravcovia { margin-top: 56px; display: flex; align-items: center; gap: 40px; padding: 18px 0; border-top: 1px solid var(--u-linka); border-bottom: 1px solid var(--u-linka); }
.u-dopravcovia > p:first-child { flex: 0 0 230px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--u-navy); }
.u-pas { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.u-pas-stopa { display: flex; align-items: center; gap: 56px; width: max-content; animation: u-pas 38s linear infinite; }
.u-pas:hover .u-pas-stopa { animation-play-state: paused; }
.u-pas img { height: 40px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.u-pas img:hover { filter: none; opacity: 1; }
@keyframes u-pas { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .u-dopravcovia { flex-direction: column; align-items: stretch; gap: 14px; }
  .u-dopravcovia > p:first-child { flex: none; }
}

/* ═══ animácie ═══
   Bez JS (alebo pri „menej pohybu“) je všetko hneď viditeľné. */
@media (prefers-reduced-motion: no-preference) {
  /* hero: postupný nástup + pomalý nájazd fotky */
  .u-js .u-vstup { opacity: 0; transform: translateY(22px); animation: u-vstup .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.15s + var(--i, 0) * .12s); }
  @keyframes u-vstup { to { opacity: 1; transform: none; } }
  /* nadpis je najväčší prvok (LCP) – len posun, bez zmiznutia, aby sa vykreslil hneď */
  .u-js .u-hero h1.u-vstup { opacity: 1; animation-name: u-posun; animation-delay: 0s; }
  @keyframes u-posun { from { transform: translateY(22px); } to { transform: none; } }
  .u-hero-foto { animation: u-najazd 14s ease-out both; }
  @keyframes u-najazd { from { transform: scale(1.12); } to { transform: scale(1); } }

  /* všeobecné odhalenie pri scrolle */
  .u-js .u-odhal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .u-js .u-odhal.je-videt { opacity: 1; transform: none; }

  /* nadpis sekcie: čiarka pri štítku sa natiahne, nadpis vyjde spod masky */
  .u-js .u-hlavicka.u-odhal { opacity: 1; transform: none; }
  .u-js .u-hlavicka .u-stitok span::after { width: 0; transition: width .7s .15s ease; }
  .u-js .u-hlavicka.je-videt .u-stitok span::after { width: 28px; }
  .u-js .u-hlavicka h2 { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path .9s cubic-bezier(.2, .7, .2, 1) .1s, transform .9s cubic-bezier(.2, .7, .2, 1) .1s; }
  .u-js .u-hlavicka.je-videt h2 { clip-path: inset(0 0 -10% 0); transform: none; }

  /* kroky: čiara cez všetky štyri kroky sa „nakreslí“, kroky nabiehajú po sebe */
  .u-js .u-kroky.u-odhal { opacity: 1; transform: none; position: relative; }
  .u-kroky::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 2px; background: linear-gradient(90deg, var(--u-oranz), rgba(244, 114, 22, .15)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }
  .u-kroky.je-videt::before { transform: scaleX(1); }
  .u-js .u-kroky li { transition-delay: calc(.25s + var(--i, 0) * .22s); }
  .u-js .u-kroky.je-videt li { opacity: 1; transform: none; }

  /* logá platforiem po jednom */
  .u-js .u-platformy.u-odhal { opacity: 1; transform: none; }
  .u-js .u-platformy > div { opacity: 0; transition: opacity .6s ease, background .2s; transition-delay: calc(var(--i, 0) * 60ms), 0s; }
  .u-js .u-platformy.je-videt > div { opacity: 1; }

  /* služby: pri hoveri sa riadok podfarbí zľava */
  .u-sluzba { position: relative; }
  .u-sluzba::before { content: ""; position: absolute; inset: 0 -20px; z-index: -1; border-radius: 8px; background: var(--u-plocha); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
  .u-sluzba:hover::before { transform: scaleX(1); }
  .u-sluzby { position: relative; z-index: 0; }
}


/* ═══ podstránky: menší hero, karty, poznámka ═══ */
.u-stitok span.bez-cisla { display: none; }
.u-podhero { position: relative; overflow: hidden; background: var(--u-navy-tmava); color: #fff; padding: 160px 0 90px; isolation: isolate; }
.u-podhero-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.u-podhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 27, 46, .97) 0%, rgba(12, 27, 46, .9) 45%, rgba(12, 27, 46, .7) 100%); }
.u-omrvinky { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .6); margin-bottom: 30px; }
.u-omrvinky a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.u-omrvinky a:hover { color: var(--u-oranz); }
.u-podhero-mriezka { display: grid; grid-template-columns: 1.5fr 1fr; gap: 70px; align-items: center; }
.u-podhero h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: 0; }
.u-podhero-perex { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .8); margin: 24px 0 0; max-width: 620px; }
.u-fajky { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.u-fajky li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; color: #fff; }
.u-fajky li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--u-oranz); }
.u-podhero .u-hero-akcie { margin-top: 36px; }
.u-podhero-karta { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); border-radius: 8px; padding: 34px; }
.u-podhero-karta-stitok { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.u-podhero-karta-suma { margin: 10px 0 0; font-family: var(--u-nadpis); font-size: clamp(40px, 4vw, 56px); font-weight: 600; color: var(--u-oranz); line-height: 1.05; }
.u-podhero-karta-pozn { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .75); }
.u-karty { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.u-karta { display: flex; gap: 20px; padding: 30px; border: 1px solid var(--u-linka); border-radius: 8px; transition: border-color .2s; }
.u-karta:hover { border-color: rgba(244, 114, 22, .5); }
.u-karta > i { flex-shrink: 0; width: 48px; height: 48px; border-radius: 6px; display: grid; place-items: center; background: #fff1e6; color: var(--u-oranz); font-size: 22px; }
.u-karta h3 { font-size: 18px; font-weight: 600; color: var(--u-navy); margin: 0; line-height: 1.4; }
.u-karta p { margin: 10px 0 0; color: var(--u-sedy); font-size: 15px; line-height: 1.7; }
.u-poznamka { display: flex; gap: 18px; align-items: flex-start; margin-top: 56px; padding: 26px 30px; background: #fff; border-left: 3px solid var(--u-oranz); border-radius: 0 8px 8px 0; }
.u-poznamka i { font-size: 24px; color: var(--u-oranz); line-height: 1; }
.u-poznamka p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--u-text); }
.u-poznamka strong { color: var(--u-navy); }
.dizajn .u-sekcia .u-faq { padding: 0; }
@media (max-width: 900px) {
  .u-podhero { padding: 130px 0 70px; }
  .u-podhero-mriezka, .u-karty { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 575px) {
  .u-karta { padding: 22px; }
  .u-podhero-karta { padding: 24px; }
}

/* ── menej „šablóny“: bez ikoniek v štvorčekoch, štítky bez veľkých písmen ── */
.u-hero-stitok { font-size: 15px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .85); }
.u-doplnky > div { background: none; padding: 26px 0 0; border-top: 2px solid var(--u-oranz); border-radius: 0; }
.u-doplnky > div + div { border-top-color: var(--u-navy); }
.u-doplnky > div > i, .u-kontakt-udaje i, .u-karta > i { display: none; }
.u-kontakt-udaje li { padding: 18px 0; border: 0; border-top: 1px solid var(--u-linka); border-radius: 0; }
.u-kontakt-udaje li:last-child { border-bottom: 1px solid var(--u-linka); }
.u-kontakt-udaje span { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.u-karta { border: 0; border-top: 2px solid var(--u-linka); border-radius: 0; padding: 24px 0 0; transition: border-color .3s; }
.u-karta:hover { border-top-color: var(--u-oranz); }
.u-karty { gap: 36px 48px; }
.u-podhero-karta-stitok { letter-spacing: 0; text-transform: none; font-size: 15px; }
.u-cisla-zdroj { margin: 30px auto 0; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* ── kontakt: konkrétny človek ── */
.u-osoba { display: flex; gap: 22px; align-items: center; margin-top: 36px; }
.u-osoba img { width: 112px; height: 140px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.u-osoba-meno { margin: 0; font-family: var(--u-nadpis); font-size: 20px; font-weight: 600; color: var(--u-navy); }
.u-osoba-rola { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--u-oranz); }
.u-osoba-text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--u-sedy); max-width: 340px; }
.u-osoba + .u-kontakt-udaje { margin-top: 30px; }