/* =============================================
   KARAT SOLUTION — hlavní stylesheet (www)
   Barvy: tmavě modrá #030333, zelená #87AC3D
   Zelená = POUZE akcent (CTA tlačítka, aktivní prvky)
   Fonty: Roboto, Open Sans (Google Fonts)
   ============================================= */

@import 'ikony.css';

/* --- Reset a základní nastavení --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --barva-modra:       #030333;   /* hlavní tmavě modrá — PANTONE 276 */
    --barva-zelena:      #87AC3D;   /* zelená — POUZE pro CTA a aktivní prvky */
    --barva-bila:        #FFFFFF;
    --barva-pozadi:      #f8f9fa;   /* neutrální světle šedá pro střídání sekcí */
    --barva-ohraniceni:  #e5e7eb;   /* neutrální šedá pro rámečky */
    --barva-text:        #1A1A2E;
    --barva-text-svetly: #555566;
    --font-hlavni:       'Roboto', 'Open Sans', sans-serif;
    --max-sirka:         1200px;
    --mezera:            1.5rem;
    --shadow-karta:      0 2px 12px rgba(3, 3, 51, 0.07);
    --shadow-karta-hover:0 8px 24px rgba(3, 3, 51, 0.13);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-hlavni);
    color: var(--barva-text);
    background-color: var(--barva-bila);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
    padding: 0 var(--mezera);
}

/* =============================================
   HLAVIČKA s dropdownem
   ============================================= */
.hlavicka {
    background-color: var(--barva-bila);
    border-bottom: 1px solid var(--barva-ohraniceni);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(3, 3, 51, 0.06);
    transition: box-shadow 0.3s ease;
}

.hlavicka__vnitrni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem var(--mezera);
    max-width: var(--max-sirka);
    margin: 0 auto;
    transition: padding 0.3s ease;
}

.hlavicka__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.hlavicka__logo-znak {
    height: 46px;
    width: 46px;
    flex-shrink: 0;
    transition: height 0.3s ease, width 0.3s ease;
}

.hlavicka__logo-nazev {
    font-family: var(--font-hlavni);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--barva-modra);
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    transition: font-size 0.3s ease;
}

.hlavicka__logo-solution {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* --- Navigace --- */
.nav__seznam {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

.nav__odkaz {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--barva-text);
    font-weight: 500;
    font-size: 0.97rem;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.nav__odkaz:hover,
.nav__odkaz--aktivni {
    color: var(--barva-modra);
    background-color: var(--barva-pozadi);
}

/* Jediné zelené CTA tlačítko v navigaci */
.nav__odkaz--cta {
    background-color: var(--barva-zelena);
    color: var(--barva-bila);
    font-weight: 700;
    border-radius: 6px;
}

.nav__odkaz--cta:hover {
    background-color: #6d9130;
    color: var(--barva-bila);
}

/* Hamburger — skryté na desktopu */
.nav__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav__hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--barva-modra);
    margin: 5px 0;
    transition: 0.3s;
}

/* --- Scroll-shrink efekt při odscrollování --- */
.hlavicka--skrcena .hlavicka__vnitrni {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.hlavicka--skrcena .hlavicka__logo-znak {
    height: 34px;
    width: 34px;
}
.hlavicka--skrcena .hlavicka__logo-nazev {
    font-size: 1.05rem;
}
.hlavicka--skrcena {
    box-shadow: 0 4px 20px rgba(3, 3, 51, 0.14);
}

/* --- Dropdown menu --- */
.nav__polozka--dropdown {
    position: relative;
}

/* --- Split pattern: odkaz + chevron vedle sebe --- */
.nav__polozka--split {
    display: flex;
    align-items: center;
}

/* Klikatelný odkaz (text "IS KARAT", "Obory", "O nás") */
.nav__split-odkaz {
    display: block;
    padding: 0.5rem 0.3rem 0.5rem 1rem;
    color: var(--barva-text);
    font-weight: 500;
    font-size: 0.97rem;
    border-radius: 4px 0 0 4px;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
    text-decoration: none;
}
.nav__split-odkaz:hover {
    color: var(--barva-modra);
    background-color: var(--barva-pozadi);
}

/* Chevron — samostatné tlačítko vedle textu */
.nav__split-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 36px;
    margin-right: 0.15rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: color 0.2s, background-color 0.2s;
}
.nav__split-chevron:hover {
    background-color: var(--barva-pozadi);
}
/* Šipka dolů uvnitř chevronu */
.nav__split-chevron::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23555566' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s;
}
/* Otočení šipky při otevřeném dropdownu */
.nav__polozka--otevreno .nav__split-chevron::after {
    transform: rotate(180deg);
}

/* --- Mega dropdown panel --- */
.nav__mega {
    position: absolute;
    top: calc(100% + 8px);
    left: -0.5rem;
    background: #fff;
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(3, 3, 51, 0.13);
    width: 490px;
    padding: 1rem;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav__polozka--otevreno .nav__mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Užší varianta mega dropdownu (Obory, O nás) */
.nav__mega--uzky {
    width: 300px;
}

/* Prominentní odkaz nahoře v mega dropdownu */
.nav__mega-uvod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--barva-modra);
    color: #fff;
    border-radius: 8px;
    margin-bottom: 0.875rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.15s;
}
.nav__mega-uvod:hover {
    background: #0a0a66;
    color: #fff;
}
.nav__mega-uvod__sipka {
    opacity: 0.6;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Mřížka oblastí — 2 sloupce */
.nav__mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}

/* Jednoslovpcový grid (O nás) */
.nav__mega-grid--1sl {
    grid-template-columns: 1fr;
}

/* Skupina oborů v mega dropdownu (nadpis + grid) */
.nav__mega-skupina {
    margin-bottom: 0.75rem;
}
.nav__mega-skupina:last-child {
    margin-bottom: 0;
}
.nav__mega-skupina-titulek {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--barva-modra);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem 0.3rem;
    margin-bottom: 0.25rem;
    text-decoration: none;
    transition: color 0.15s;
}
.nav__mega-skupina-titulek:hover {
    color: var(--barva-zelena);
}

/* Jednotlivé dlaždice oblastí */
.nav__mega-tile {
    display: block;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 6px;
    color: var(--barva-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav__mega-tile:hover {
    background: var(--barva-pozadi);
    color: var(--barva-modra);
    border-color: rgba(3, 3, 51, 0.22);
}

/* --- Zvýraznění aktivní stránky v dropdownech --- */
.nav__split-odkaz--aktivni {
    color: var(--barva-modra);
    font-weight: 600;
}
.nav__mega-tile--aktivni {
    background: var(--barva-pozadi);
    color: var(--barva-modra);
    border-color: rgba(3, 3, 51, 0.22);
    font-weight: 600;
}

/* =============================================
   HERO SEKCE
   ============================================= */
.hero {
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    padding: 5.5rem var(--mezera);
    text-align: center;
}

.hero__nadpis {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

/* Zelená pouze na klíčové slovo v nadpisu */
.hero__nadpis span {
    color: var(--barva-zelena);
}

.hero__podnadpis {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
}

.hero__tlacitka {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

/* =============================================
   TLAČÍTKA
   ============================================= */
.tlacitko {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    letter-spacing: 0.02em;
}

/* Zelené CTA tlačítko — primární akce */
.tlacitko--zelene {
    background-color: var(--barva-zelena);
    color: var(--barva-bila);
}

.tlacitko--zelene:hover {
    background-color: #6d9130;
}

/* Outline — sekundární akce na tmavém pozadí */
.tlacitko--outline {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--barva-bila);
}

.tlacitko--outline:hover {
    background-color: var(--barva-bila);
    color: var(--barva-modra);
    border-color: var(--barva-bila);
}

/* Modré tlačítko — pro světlé sekce */
.tlacitko--modre {
    background-color: var(--barva-modra);
    color: var(--barva-bila);
}

.tlacitko--modre:hover {
    background-color: #0d0d6b;
}

/* =============================================
   SDÍLENÉ PRVKY SEKCÍ
   ============================================= */
.sekce__nadpis {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--barva-modra);
    margin-bottom: 0.5rem;
}

.sekce__podnadpis {
    text-align: center;
    color: var(--barva-text-svetly);
    margin-bottom: 3rem;
    font-size: 1.05rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   SEKCE — PŘEHLED SLUŽEB (homepage)
   Dvě oblasti vedle sebe, každá se 4 podslužbami
   ============================================= */
.sluzby {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

.sluzby__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

/* Karta oblasti — procesní poradenství nebo IS/IT */
.sluzby__oblast {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sluzby__oblast:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-3px);
}

.sluzby__oblast-ikona {
    font-size: 2.5rem;
    display: block;
}

.sluzby__oblast-nadpis {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.sluzby__oblast-popis {
    color: var(--barva-text-svetly);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Podslužby pod hlavním nadpisem oblasti */
.sluzby__podsluzby {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sluzby__podsluzba {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
}

.sluzby__podsluzba::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--barva-zelena);
}

.sluzby__oblast-odkaz {
    margin-top: auto;
    align-self: flex-start;
}

/* =============================================
   SEKCE — PROČ MY (hodnoty firmy)
   4 karty v mřížce
   ============================================= */
.proc-my {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.proc-my__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.75rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.proc-my__karta {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.proc-my__karta:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-3px);
}

.proc-my__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--barva-zelena);
    flex-shrink: 0;
}

.proc-my__ikona-img {
    width: 36px;
    height: 36px;
    display: block;
    /* Udělá z jakékoli barvy SVG bílou ikonu */
    filter: brightness(0) invert(1);
}

.proc-my__nadpis {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.proc-my__text {
    font-size: 0.92rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
}

/* =============================================
   SEKCE — ČÍSLA (stastistiky firmy)
   Pruh přes celou šířku na modrém pozadí
   ============================================= */
.cisla {
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    padding: 4.5rem var(--mezera);
}

.cisla__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
    text-align: center;
}

.cislo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.cislo__hodnota {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--barva-zelena);
    line-height: 1;
}

.cislo__popis {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

/* =============================================
   SEKCE — KLIENTI (reference loga/jména)
   Světle šedé pozadí, logová mřížka
   ============================================= */
.klienti {
    padding: 4.5rem var(--mezera);
    background-color: var(--barva-bila);
}

.klienti__seznam {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.klient-tag {
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--barva-text);
    background-color: var(--barva-pozadi);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.klient-tag:hover {
    border-color: var(--barva-modra);
    box-shadow: var(--shadow-karta);
}

/* =============================================
   SEKCE — TESTIMONIAL (citát klienta)
   Tmavě modré pozadí, výrazný citát
   ============================================= */
.testimonial {
    padding: 5rem var(--mezera);
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    text-align: center;
}

.testimonial__citace {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.testimonial__citace::before { content: '\201E'; color: var(--barva-zelena); }
.testimonial__citace::after  { content: '\201C'; color: var(--barva-zelena); }

.testimonial__autor {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
}

.testimonial__autor strong {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* =============================================
   CTA PÁSEK — výzva k akci (zeleně/modře)
   Tmavě modré pozadí, stejný vizuální jazyk jako hero
   ============================================= */
.cta-pasek {
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    padding: 4.5rem var(--mezera);
    text-align: center;
}

/* Zelený CTA pásek — pro stránky produktů */
.cta-pasek--zeleny {
    background-color: var(--barva-zelena);
}

.cta-pasek__nadpis {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.cta-pasek__text {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
    font-size: 1.05rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   SEKCE — DETAIL SLUŽBY (podstránky)
   Střídání světlého a šedého pozadí
   ============================================= */
.detail {
    padding: 4.5rem var(--mezera);
    background-color: var(--barva-bila);
}

.detail--pozadi {
    background-color: var(--barva-pozadi);
}

.detail__sloupce {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.detail__blok {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail__nadpis {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--barva-modra);
}

.detail__text {
    font-size: 0.95rem;
    color: var(--barva-text-svetly);
    line-height: 1.75;
}

.detail__seznam {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.detail__seznam li {
    font-size: 0.95rem;
    color: var(--barva-text-svetly);
    line-height: 1.6;
    padding-left: 1.4rem;
    position: relative;
}

/* Odrážka — neutrální modrá tečka */
.detail__seznam li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--barva-modra);
    opacity: 0.3;
}

/* Zelené odrážky pro zvýraznění benefitů */
.detail__seznam--zelene li::before {
    background-color: var(--barva-zelena);
    opacity: 0.75;
}

/* =============================================
   SEKCE — PROCESNÍ KROKY (4 fáze poradenství)
   ============================================= */
.kroky {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.kroky__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.krok {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.krok:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-3px);
}

/* Číslo kroku v zeleném kruhu */
.krok__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--barva-zelena);
    color: var(--barva-bila);
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 900;
    flex-shrink: 0;
    align-self: flex-start;
}

.krok__nadpis {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--barva-modra);
}

.krok__text {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
}

/* =============================================
   SEKCE — REFERENCE (seznam firem s odvětvím)
   ============================================= */
.reference {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

.reference__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.reference-karta {
    background-color: var(--barva-pozadi);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: box-shadow 0.2s;
}

.reference-karta:hover {
    box-shadow: var(--shadow-karta-hover);
}

.reference-karta__firma {
    font-weight: 700;
    color: var(--barva-modra);
    font-size: 0.97rem;
}

.reference-karta__obor {
    font-size: 0.82rem;
    color: var(--barva-text-svetly);
}

/* Kategorie reference — barevný štítek */
.reference-karta__stitek {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #eef0f8;
    color: var(--barva-modra);
    align-self: flex-start;
}

/* =============================================
   SEKCE — O NÁS (podstránka)
   ============================================= */
.o-nas {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

.o-nas__obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.o-nas__text-blok {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.o-nas__nadpis {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.25;
}

.o-nas__text {
    font-size: 0.97rem;
    color: var(--barva-text-svetly);
    line-height: 1.8;
}

.o-nas__obr {
    border-radius: 12px;
    overflow: hidden;
}

/* =============================================
   SEKCE — KONTAKT (kontakt.html)
   ============================================= */
.kontakty {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.kontakty__mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.kontakt-blok {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-karta);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kontakt-blok--mapa {
    grid-column: 1 / -1; /* mapa přes celou šířku */
}

.kontakt-blok__nadpis {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--barva-modra);
}

.kontakt-blok__adresa {
    font-style: normal;
    font-size: 0.95rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
}

.kontakt-blok__seznam {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kontakt-blok__seznam li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kontakt-blok__stitek {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--barva-text-svetly);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kontakt-blok__odkaz {
    font-size: 0.95rem;
    color: var(--barva-modra);
    font-weight: 500;
    transition: color 0.2s;
}

.kontakt-blok__odkaz:hover {
    color: var(--barva-zelena);
}

.kontakty__mapa {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
}

.kontakty__mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =============================================
   FORMULÁŘ — kontakt.html
   ============================================= */
.formular-sekce {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.formular-sekce__obal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.formular-obal,
.formular-kontakt {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--shadow-karta);
}

.formular__nadpis {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--barva-modra);
    margin-bottom: 1.5rem;
}

.formular {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.formular__pole {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.formular__stitek {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--barva-text);
}

.formular__vstup {
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--barva-ohraniceni);
    border-radius: 6px;
    font-family: var(--font-hlavni);
    font-size: 1rem;
    color: var(--barva-text);
    background-color: var(--barva-bila);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.formular__vstup:focus {
    outline: none;
    border-color: var(--barva-modra);
    box-shadow: 0 0 0 3px rgba(3, 3, 51, 0.08);
}

.formular__vstup--textarea {
    resize: vertical;
    min-height: 130px;
}

/* Zvýraznění chybného/nevyplněného povinného pole */
.formular__vstup--chyba {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
}

.formular__vstup--chyba:focus {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

.formular__odeslat {
    align-self: flex-start;
    border: none;
    font-family: var(--font-hlavni);
    cursor: pointer;
}

.formular__uspech,
.formular__chyba {
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.formular__uspech {
    background-color: #eef7e4;
    color: #3a6b12;
    border: 1px solid #c3e09b;
}

.formular__chyba {
    background-color: #fdecea;
    color: #a8200e;
    border: 1px solid #f4b8b3;
}

.formular-kontakt__text {
    color: var(--barva-text-svetly);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* =============================================
   SEGMENTY ZÁKAZNÍKŮ — sekce „Řešení pro váš obor"
   ============================================= */
.segmenty-prehled {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.segmenty__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 0;
}

.segment-karta {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.segment-karta:hover {
    box-shadow: var(--shadow-karta-hover);
    border-color: var(--barva-zelena);
    transform: translateY(-2px);
}

.segment-karta__ikona {
    display: block;
}

.segment-karta__nazev {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.segment-karta__popis {
    font-size: 0.875rem;
    color: var(--barva-text-svetly);
    line-height: 1.6;
    flex: 1;
}

.segment-karta__body {
    flex: 1;
}

.segment-karta__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.segment-karta__body li {
    font-size: 0.83rem;
    color: var(--barva-text-svetly);
    padding: 0.2rem 0 0.2rem 1.1rem;
    position: relative;
}

.segment-karta__body li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--barva-zelena);
    font-weight: 700;
}

.segment-karta__odkaz {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--barva-zelena);
    margin-top: 0.25rem;
}

/* Cross-link blok na stránkách oblastí */
.obor-crosslink {
    background-color: var(--barva-pozadi);
    border-left: 4px solid var(--barva-zelena);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.obor-crosslink__text {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
}

.obor-crosslink__text strong {
    display: block;
    font-size: 1rem;
    color: var(--barva-modra);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

/* =============================================
   OBOROVÉ TABY — stránky pro-vyrobni, pro-obchod, pro-servisni
   Přepínání mezi oborovými specifiky na podstránkách.
   ============================================= */
.obor-specifika {
    padding: 3rem 1.5rem;
    background: #fff;
}

.obor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.obor-tab {
    padding: 0.65rem 1.4rem;
    border: 2px solid var(--barva-ohraniceni);
    border-radius: 8px;
    background: #fff;
    color: var(--barva-text);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.obor-tab:hover {
    border-color: var(--barva-modra);
    background: rgba(3, 3, 51, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(3, 3, 51, 0.08);
}

.obor-tab--aktivni {
    background: var(--barva-modra);
    color: #fff;
    border-color: var(--barva-modra);
    box-shadow: 0 3px 12px rgba(3, 3, 51, 0.2);
}

.obor-tab--aktivni:hover {
    background: #0a0a66;
    color: #fff;
    transform: translateY(0);
}

/* Vizuální nápověda — pulzující accent na neaktivních tabech */
.obor-tabs::after {
    content: '← vyberte obor pro detail';
    display: block;
    width: 100%;
    font-size: 0.75rem;
    color: var(--barva-text-svetly);
    opacity: 0.5;
    margin-top: 0.2rem;
    font-style: italic;
}

.obor-panel {
    display: none;
    background: var(--barva-pozadi);
    border: 1px solid var(--barva-ohraniceni);
    border-left: 4px solid var(--barva-zelena);
    border-radius: 0 12px 12px 0;
    padding: 2rem;
    animation: panelZobraz 0.3s ease;
}

@keyframes panelZobraz {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.obor-panel--aktivni {
    display: block;
}

.obor-panel__nadpis {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--barva-modra);
    margin: 0 0 0.5rem;
}

.obor-panel__text {
    color: var(--barva-text-svetly);
    margin-bottom: 1rem;
    max-width: 700px;
}

.obor-panel__reference {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--barva-text-svetly);
}

.obor-panel__reference a {
    color: var(--barva-modra);
    text-decoration: underline;
    text-decoration-color: rgba(3, 3, 51, 0.3);
}

.obor-panel__reference a:hover {
    color: var(--barva-zelena);
}

@media (max-width: 768px) {
    .obor-tabs {
        gap: 0.4rem;
    }
    .obor-tab {
        font-size: 0.82rem;
        padding: 0.5rem 0.9rem;
    }
    .obor-panel {
        padding: 1.25rem;
    }
}


/* =============================================
   PATIČKA
   ============================================= */
.paticka {
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    padding: 3.5rem var(--mezera);
}

.paticka__vnitrni {
    max-width: var(--max-sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 2.5rem;
}

.paticka__logo-odkaz {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.paticka__logo-znak {
    height: 44px;
    width: 44px;
    flex-shrink: 0;
}

.paticka__logo-nazev {
    font-family: var(--font-hlavni);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--barva-bila);
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.paticka__logo-solution {
    font-weight: 300;
    opacity: 0.85;
}

.paticka__slogan {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    max-width: 260px;
}

.paticka__nadpis {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/* Zelený puntík před každým nadpisem v patičce */
.paticka__nadpis::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: var(--barva-zelena);
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
    margin-bottom: 1px;
}

.paticka__seznam {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paticka__odkaz {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.paticka__odkaz:hover {
    color: var(--barva-bila);
}

.paticka__text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.paticka__spodni {
    max-width: var(--max-sirka);
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    flex-wrap: wrap;
}

.paticka__spodni-odkaz {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.2s;
}

.paticka__spodni-odkaz:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* Blok KARAT Software v patičce — logo + motto, přímo pod sloganem */
.paticka__ksw {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    margin-top: 1.25rem;
}
.paticka__ksw-logo {
    height: 52px;
    width: 52px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.paticka__ksw:hover .paticka__ksw-logo {
    opacity: 1;
}
.paticka__ksw-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.2rem;
}
.paticka__ksw-motto {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
    transition: color 0.2s;
}
.paticka__ksw:hover .paticka__ksw-motto {
    color: rgba(255, 255, 255, 0.9);
}

/* =============================================
   SEKCE — OBLASTI (přehled oblastí IS KARAT)
   Karty v mřížce, klikatelné (odkaz na detail oblasti)
   ============================================= */
.oblasti-prehled {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

.oblasti__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

/* Karta oblasti — celá je odkaz */
.oblast-karta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-karta);
    color: var(--barva-text);
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.oblast-karta:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-3px);
    border-color: var(--barva-modra);
}

.oblast-karta__ikona {
    display: block;
}

/* Ikona oblasti v hero sekci stránky */
.hero__oblast-ikona {
    display: block;
    margin: 0 auto 1.5rem;
}

/* Ikona v hlavičce detail bloku na segmentových stránkách */
.detail__blok-ikona {
    display: block;
    margin-bottom: 0.875rem;
}

.oblast-karta__nazev {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.oblast-karta__popis {
    font-size: 0.88rem;
    color: var(--barva-text-svetly);
    line-height: 1.65;
    flex-grow: 1;
}

/* Šipka "Více →" — zelená, přilepená ke spodnímu okraji */
.oblast-karta__odkaz {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--barva-zelena);
    margin-top: auto;
}

/* =============================================
   SEKCE — IMPLEMENTAČNÍ KROKY (homepage + implementace.html)
   Horizontální čtyřkrokový pruh na světle šedém pozadí
   ============================================= */
.impl-kroky {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.impl-kroky__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.75rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.impl-krok {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Číslo kroku — velký zelený kruh */
.impl-krok__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background-color: var(--barva-zelena);
    color: var(--barva-bila);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 900;
}

.impl-krok__obsah {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.impl-krok__nadpis {
    font-size: 1rem;
    font-weight: 700;
    color: var(--barva-modra);
}

.impl-krok__text {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
}

/* =============================================
   SEKCE — PRO KOHO (na bílém pozadí — střídání s proc-my)
   ============================================= */
.pro-koho {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

/* =============================================
   SEKCE — KLIENTI (homepage)
   Tmavé pozadí, rotující citáty, logo karty
   ============================================= */
.klienti {
    padding: 5rem var(--mezera);
    background-color: var(--barva-modra);
}

/* Nadpis sekce na tmavém pozadí */
.klienti .sekce__nadpis {
    color: var(--barva-bila);
}

/* Rotující citáty */
.citace-rotace {
    max-width: 800px;
    margin: 2.5rem auto;
    text-align: center;
}

.citace-rotace__seznam {
    position: relative;
    min-height: 150px;
}

.citace-rotace__polozka {
    display: none;
    animation: citaceObjev 0.45s ease;
}

.citace-rotace__polozka.aktivni {
    display: block;
}

@keyframes citaceObjev {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.citace-rotace__text {
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    font-style: italic;
    font-weight: 300;
    color: var(--barva-bila);
    line-height: 1.7;
    margin: 0;
}

.citace-rotace__zdroj {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.citace-rotace__typ {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    background-color: var(--barva-zelena);
    color: #fff;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-style: normal;
}

.citace-rotace__autor {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
}

.citace-rotace__autor strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

/* Navigační tečky */
.citace-rotace__tecky {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.citace-rotace__tecka {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.25s, width 0.25s, border-radius 0.25s;
}

.citace-rotace__tecka.aktivni {
    background-color: var(--barva-zelena);
    width: 22px;
    border-radius: 4px;
}

/* Dělicí linka mezi citáty a logami */
.klienti__separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0 0 2.5rem;
}

/* Velký citát zákazníka — pro reference.html */
.ref-citace {
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center;
}

.ref-citace__text {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-style: italic;
    font-weight: 300;
    color: var(--barva-text);
    line-height: 1.65;
}

.ref-citace__autor {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
}

.ref-citace__autor strong {
    color: var(--barva-modra);
    font-weight: 700;
}

.klienti__seznam {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: var(--max-sirka);
    margin: 2rem auto 0;
}

/* Karta zákazníka — logo placeholder + název firmy + obor */
.klient-karta {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.klient-karta:hover {
    border-color: var(--barva-modra);
    box-shadow: var(--shadow-karta);
    transform: translateY(-2px);
}

/* Logo plocha — při přidání obrázku stačí vložit <img> */
.klient-karta__logo-plocha {
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.klient-karta__logo-plocha img {
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.6);
    transition: filter 0.2s;
}

.klient-karta:hover .klient-karta__logo-plocha img {
    filter: grayscale(0) opacity(1);
}

/* Fallback: název firmy jako text dokud není logo */
.klient-karta__nazev-velkym {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--barva-modra);
    opacity: 0.5;
    line-height: 1.2;
}

.klient-karta__obor {
    font-size: 0.72rem;
    color: var(--barva-text-svetly);
    line-height: 1.4;
}

/* =============================================
   KARUSEL REFERENCÍ na homepage
   Nekonečný horizontální posun karet zákazníků
   ============================================= */
.ref-karusel {
    overflow: hidden;
    margin-top: 2rem;
    /* Fade na okrajích */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.ref-karusel__paska {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: karuselPosun 45s linear infinite;
}

/* Zastavení při hoveru */
.ref-karusel:hover .ref-karusel__paska {
    animation-play-state: paused;
}

@keyframes karuselPosun {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Karta v karuselu */
.ref-karusel__karta {
    flex: 0 0 220px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s, border-color 0.2s;
}
.ref-karusel__karta:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Logo firmy */
.ref-karusel__logo {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.ref-karusel__logo img {
    max-height: 44px;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter 0.2s;
}
.ref-karusel__karta:hover .ref-karusel__logo img {
    filter: brightness(0) invert(1) opacity(1);
}

/* Barevná loga — zachovat původní barvy, jen mírně ztlumit */
.ref-karusel__logo--barevne img {
    filter: opacity(0.85);
}
.ref-karusel__karta:hover .ref-karusel__logo--barevne img {
    filter: opacity(1);
}

/* Texty v kartě */
.ref-karusel__firma {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.ref-karusel__obor {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.ref-karusel__oblasti {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--barva-zelena);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .ref-karusel__karta {
        flex: 0 0 180px;
        padding: 1rem 0.75rem;
    }
    .ref-karusel__paska {
        animation-duration: 35s;
    }
}

/* =============================================
   LIDÉ ZA SYSTÉMEM — plynulý karusel na homepage
   Kompaktní osobní kartičky s iniciálami, expertízou a citátem.
   Nekonečná smyčka jako reference karusel.
   ============================================= */

.lide {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.lide-karusel {
    overflow: hidden;
    margin-top: 2rem;
    /* Fade na okrajích — stejný princip jako u referencí */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.lide-karusel__paska {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: lideKaruselPosun 50s linear infinite;
}

.lide-karusel:hover .lide-karusel__paska {
    animation-play-state: paused;
}

@keyframes lideKaruselPosun {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Karta osoby */
.osoba-karta {
    flex: 0 0 260px;
    background: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
}

.osoba-karta:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-2px);
}

/* Avatar — kruh s iniciálami */
.osoba-karta__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.osoba-karta__avatar--zeleny {
    background-color: var(--barva-zelena);
}

.osoba-karta__jmeno {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.osoba-karta__obor {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--barva-zelena);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.osoba-karta__citat {
    font-size: 0.8rem;
    color: var(--barva-text-svetly);
    font-style: italic;
    line-height: 1.55;
    margin-top: 0.3rem;
}

/* CTA pod karuselem */
.lide__cta {
    text-align: center;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.lide__odkaz {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--barva-modra);
    text-decoration: none;
    transition: color 0.2s;
}

.lide__odkaz:hover {
    color: var(--barva-zelena);
}

.lide__odkaz-sipka {
    display: inline-block;
    transition: transform 0.2s;
    margin-left: 0.25rem;
}

.lide__odkaz:hover .lide__odkaz-sipka {
    transform: translateX(4px);
}

.lide__cta-poznamka {
    font-size: 0.78rem;
    color: var(--barva-text-svetly);
}

@media (max-width: 768px) {
    .osoba-karta {
        flex: 0 0 220px;
        padding: 1.25rem 1rem;
    }
    .lide-karusel__paska {
        animation-duration: 40s;
    }
}


/* =============================================
   REFERENCE — tři úrovně (reference.html)

   TOP REFERENCE  — klíčový zákazník, logo, případová studie, video
   VELKÁ REFERENCE — plná karta: firma, obor, highlights, citát
   MALÁ REFERENCE — kompaktní řádek: firma + obor + věta
   ============================================= */
.reference-stranka {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

/* Oddělovač sekcí (TOP / Větší / Malé) */
.ref-sekce-nadpis {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--barva-text-svetly);
    max-width: var(--max-sirka);
    margin: 3.5rem auto 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--barva-ohraniceni);
}

.ref-sekce-nadpis:first-child {
    margin-top: 0;
}

/* ---  Sdílená logo plocha pro všechny úrovně referencí --- */
.ref-logo {
    background-color: var(--barva-pozadi);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 0.6rem;  /* padding na kontejneru, ne na <img> */
}

.ref-logo img {
    display: block;
    /* 100% = obsah kontejneru po odečtení paddingu (box-sizing: border-box) */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.4) opacity(0.85);
    transition: filter 0.2s;
}

.ref-logo img:hover {
    filter: grayscale(0) opacity(1);
}

/* Fallback text — název firmy, dokud není logo */
.ref-logo__text {
    font-weight: 700;
    color: var(--barva-modra);
    opacity: 0.35;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
}

/* Velikostní varianty logo plochy */
.ref-logo--top   { width: 180px; height: 100px; }
.ref-logo--velka { width: 130px; height: 76px; }
.ref-logo--mala  { width: 76px;  height: 48px; flex-shrink: 0; padding: 0.4rem; }

/* --- TOP REFERENCE --- */
.ref-top {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-top: 4px solid var(--barva-zelena);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 4px 28px rgba(3, 3, 51, 0.10);
    margin-bottom: 2.5rem;
    max-width: var(--max-sirka);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* Štítek v horním levém rohu */
.ref-top__stitek {
    position: absolute;
    top: -1px;
    left: 2rem;
    background-color: var(--barva-zelena);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.8rem;
    border-radius: 0 0 6px 6px;
}

.ref-top__hlavicka {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--barva-ohraniceni);
}

.ref-top__meta {
    flex: 1;
    min-width: 200px;
}

.ref-top__firma {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--barva-modra);
    line-height: 1.2;
}

.ref-top__obor {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    margin-top: 0.25rem;
}

.ref-top__oblasti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.ref-top__telo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 1.75rem;
}

.ref-top__popis {
    font-size: 0.95rem;
    color: var(--barva-text);
    line-height: 1.75;
}

.ref-top__popis + .ref-top__popis {
    margin-top: 0.75rem;
}

.ref-top__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ref-top__highlights li {
    font-size: 0.9rem;
    color: var(--barva-text);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.ref-top__highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--barva-zelena);
    font-weight: 700;
}

/* Citát uvnitř TOP reference */
.ref-top__citace {
    background-color: var(--barva-pozadi);
    border-left: 3px solid var(--barva-zelena);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.5rem;
    margin: 0 0 1.5rem;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--barva-text);
    line-height: 1.7;
}

.ref-top__citace footer {
    font-style: normal;
    font-size: 0.82rem;
    color: var(--barva-text-svetly);
    margin-top: 0.4rem;
}

/* Vertikálně rotující citace — používá se u klíčové reference DITON v reference.html. */
/* Tři citáty se postupně střídají: 5 s viditelný + 1 s fade. Celkový cyklus 18 s. */
/* Grid trick: všechny citáty se stackují do stejné buňky → kontejner se přizpůsobí */
/* výšce NEJDELŠÍHO citátu, ne paušální min-height. */
.ref-top__citace-rotace {
    display: grid;
    margin: 0 0 1.5rem;
}
.ref-top__citace-rotace .ref-top__citace {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: citatRotaceDiton 18s infinite ease-in-out;
}
.ref-top__citace-rotace .ref-top__citace:nth-child(1) { animation-delay: 0s; }
.ref-top__citace-rotace .ref-top__citace:nth-child(2) { animation-delay: 6s; }
.ref-top__citace-rotace .ref-top__citace:nth-child(3) { animation-delay: 12s; }

/* Modifikátor pro 2 citáty (cyklus 14 s místo 18 s) — používá keyframes citatRotaceVelka */
/* s vyšším podílem viditelnosti (50/50 mezi 2 citáty místo 33/33/33). */
.ref-top__citace-rotace--dva .ref-top__citace {
    animation: citatRotaceVelka 14s infinite ease-in-out;
}
.ref-top__citace-rotace--dva .ref-top__citace:nth-child(1) { animation-delay: 0s; }
.ref-top__citace-rotace--dva .ref-top__citace:nth-child(2) { animation-delay: 7s; }
.ref-top__citace-rotace--dva .ref-top__citace:nth-child(3) { animation: none; display: none; }

@keyframes citatRotaceDiton {
    0%   { opacity: 0; transform: translateY(8px); }
    3%   { opacity: 1; transform: translateY(0); }
    30%  { opacity: 1; transform: translateY(0); }
    33%  { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* Respekt k preferenci uživatele — pokud má vypnuté animace, ukážeme všechny pod sebou */
@media (prefers-reduced-motion: reduce) {
    .ref-top__citace-rotace { display: block; }
    .ref-top__citace-rotace .ref-top__citace {
        opacity: 1;
        transform: none;
        animation: none;
        margin-bottom: 0.75rem;
    }
}

/* Vertikálně rotující citace pro VELKÉ reference (např. Walter Praguecast). */
/* Stejný grid trick — 2 citáty se střídají v cyklu 14 s. */
.ref-velka__citace-rotace {
    display: grid;
    margin-top: 1.75rem;
}
.ref-velka__citace-rotace .ref-velka__citace {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: citatRotaceVelka 14s infinite ease-in-out;
}
.ref-velka__citace-rotace .ref-velka__citace:nth-child(1) { animation-delay: 0s; }
.ref-velka__citace-rotace .ref-velka__citace:nth-child(2) { animation-delay: 7s; }

@keyframes citatRotaceVelka {
    0%   { opacity: 0; transform: translateY(8px); }
    5%   { opacity: 1; transform: translateY(0); }
    45%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .ref-velka__citace-rotace { display: block; }
    .ref-velka__citace-rotace .ref-velka__citace {
        opacity: 1;
        transform: none;
        animation: none;
        margin-bottom: 0.75rem;
    }
}

/* Placeholder pro video embed */
.ref-top__video {
    background-color: var(--barva-pozadi);
    border: 1px dashed var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    color: var(--barva-text-svetly);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* CTA lišta — případová studie, video odkaz */
.ref-top__cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid var(--barva-ohraniceni);
}

/* --- Velká reference --- */
.ref-velka {
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: var(--shadow-karta);
    margin-bottom: 2.5rem;
    max-width: var(--max-sirka);
    margin-left: auto;
    margin-right: auto;
}

/* Hlavička významné reference — CSS Grid: logo vlevo přes 2 řádky, */
/* meta nahoře vpravo (plná šířka), tagy oblastí pod meta. */
/* Tím se obor nezalamuje a layout je konzistentní s klíčovými referencemi. */
.ref-velka__hlavicka {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--barva-ohraniceni);
}
.ref-velka__hlavicka > .ref-logo--velka {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
}
.ref-velka__meta {
    grid-column: 2;
    grid-row: 1;
    min-width: 0; /* umožní textu se zalamovat až v případě skutečné nutnosti */
}
.ref-velka__hlavicka > .ref-velka__oblasti {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}
@media (max-width: 640px) {
    .ref-velka__hlavicka {
        grid-template-columns: 1fr;
    }
    .ref-velka__hlavicka > .ref-logo--velka,
    .ref-velka__meta,
    .ref-velka__hlavicka > .ref-velka__oblasti {
        grid-column: 1;
        grid-row: auto;
    }
}

.ref-velka__firma {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--barva-modra);
}

.ref-velka__obor {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    margin-top: 0.2rem;
}

/* Štítky oblastí IS KARAT nasazených u zákazníka */
.ref-velka__oblasti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ref-velka__oblast-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: #eef0f8;
    color: var(--barva-modra);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
}

.ref-velka__telo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.ref-velka__popis {
    font-size: 0.95rem;
    color: var(--barva-text-svetly);
    line-height: 1.8;
}

/* Highlights — specifická řešení u zákazníka */
.ref-velka__highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ref-velka__highlights li {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.55;
}

.ref-velka__highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--barva-zelena);
    opacity: 0.8;
}

/* Citát zákazníka — pod hlavním textem */
.ref-velka__citace {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background-color: var(--barva-pozadi);
    border-left: 3px solid var(--barva-zelena);
    border-radius: 0 8px 8px 0;
}

.ref-velka__citace p {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--barva-text);
    line-height: 1.65;
}

.ref-velka__citace footer {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--barva-text-svetly);
}

/* --- Malé reference — kompaktní seznam --- */
.ref-male-nadpis {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--barva-text-svetly);
    margin: 3rem 0 1.25rem;
    max-width: var(--max-sirka);
    margin-left: auto;
    margin-right: auto;
}

.ref-male-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.ref-mala {
    background-color: var(--barva-pozadi);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.ref-mala__obsah {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.ref-mala__firma {
    font-weight: 700;
    color: var(--barva-modra);
    font-size: 0.95rem;
}

.ref-mala__obor {
    font-size: 0.82rem;
    color: var(--barva-text-svetly);
}

.ref-mala__info {
    font-size: 0.85rem;
    color: var(--barva-text-svetly);
    line-height: 1.55;
    margin-top: 0.25rem;
}

/* Web odkaz na stránky zákazníka — malý diskrétní odkaz v každé referenci */
.ref-web-odkaz {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--barva-text-svetly);
    font-size: 0.7rem;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 50px;
    padding: 0.12rem 0.55rem;
    margin-top: 0.4rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    white-space: nowrap;
    font-style: normal;
}

.ref-web-odkaz:hover {
    color: var(--barva-modra);
    border-color: var(--barva-zelena);
    background-color: #f4f8ec;
}

/* =============================================
   NOVINKY
   ============================================= */
.novinky {
    padding: 5rem var(--mezera);
    background-color: var(--barva-bila);
}

.novinky__seznam {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.novinka {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem 2rem;
    padding: 1.75rem;
    background-color: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none;
    color: inherit;
}

.novinka:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-2px);
}

/* Datum novinky — timeline svislý pruh + tečka, malý měsíc nad velkým rokem ('26) */
.novinka__datum {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--barva-zelena);
    min-height: 56px;
}

.novinka__datum::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    width: 13px;
    height: 13px;
    background: #fff;
    border: 3px solid var(--barva-zelena);
    border-radius: 50%;
}

.novinka__datum-mesic {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--barva-text-svetly);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.novinka__datum-rok {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--barva-modra);
    line-height: 1;
}

/* Apostrof před dvojčíslím roku ('26) */
.novinka__datum-rok::before {
    content: "\2019";
    opacity: 0.45;
    font-weight: 400;
    margin-right: 0.05em;
}

.novinka__obsah {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.novinka__stitek {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background-color: #eef5e0;
    color: #5a7a20;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
}

.novinka__nadpis {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.35;
}

.novinka__perex {
    font-size: 0.9rem;
    color: var(--barva-text-svetly);
    line-height: 1.65;
}

/* "Detail reference" — sliding zelené podtržení + odjíždějící šipka na hover */
.novinka__link {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--barva-modra);
    text-decoration: none;
    padding-bottom: 3px;
    margin-top: 0.25rem;
    transition: color 0.25s ease;
}

.novinka__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--barva-zelena);
    transition: width 0.3s ease;
}

.novinka__link__sipka {
    display: inline-block;
    margin-left: 0.3rem;
    color: var(--barva-zelena);
    transition: transform 0.25s ease;
}

.novinka__link:hover { color: var(--barva-zelena); }
.novinka__link:hover::after { width: 100%; }
.novinka__link:hover .novinka__link__sipka { transform: translateX(6px); }

/* Odkazová skupina pod perexem — interní prolink (primární) + externí web zákazníka (sekundární) */
.novinka__odkazy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.5rem;
}

/* Externí odkaz na web zákazníka — sjednoceno se stylem .ref-web-odkaz v referencích (pill s borderem) */
.novinka__externi {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--barva-text-svetly);
    font-size: 0.7rem;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 50px;
    padding: 0.12rem 0.55rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.novinka__externi:hover {
    color: var(--barva-modra);
    border-color: var(--barva-zelena);
    background-color: #f4f8ec;
}

/* Prázdný stav — žádné novinky */
.novinky__prazdny {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--barva-text-svetly);
    font-size: 1rem;
}

/* =============================================
   NÁŠ TÝM — o-nas.html
   Osobní karty s avatarem, expertízou a popisem.
   ============================================= */

.tym {
    padding: 5rem var(--mezera);
    background-color: var(--barva-pozadi);
}

.tym__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
    max-width: var(--max-sirka);
    margin: 0 auto;
}

.tym__osoba {
    background: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-karta);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.tym__osoba:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-2px);
}

.tym__hlavicka {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.tym__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--barva-modra);
    color: var(--barva-bila);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.tym__avatar--zeleny {
    background-color: var(--barva-zelena);
}

.tym__jmeno {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
}

.tym__role {
    display: block;
    font-size: 0.8rem;
    color: var(--barva-text-svetly);
}

.tym__text {
    font-size: 0.88rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
    flex: 1;
}

.tym__expertiza {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--barva-zelena);
    letter-spacing: 0.02em;
    padding-top: 0.5rem;
    border-top: 1px solid var(--barva-ohraniceni);
}

.tym__cta {
    text-align: center;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.tym__cta-text {
    font-size: 0.92rem;
    color: var(--barva-text-svetly);
}


/* =============================================
   RESPONZIVITA
   ============================================= */
@media (max-width: 768px) {
    .nav__hamburger {
        display: block;
    }

    .nav__seznam {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--barva-bila);
        flex-direction: column;
        padding: 0.4rem 0.75rem;
        border-bottom: 1px solid var(--barva-ohraniceni);
        box-shadow: 0 4px 12px rgba(3, 3, 51, 0.08);
        align-items: stretch;
        gap: 0;
    }

    .nav__seznam--otevreno {
        display: flex;
    }

    .hlavicka {
        position: relative;
    }

    /* Hlavní odkazy na mobilu — kompaktní řádky */
    .nav__odkaz {
        padding: 0.55rem 0.5rem;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(0,0,0,0.04);
    }

    /* Split — na mobilu celý řádek je klikatelný toggle */
    .nav__polozka--split {
        flex-wrap: wrap;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    .nav__split-odkaz {
        flex: 1;
        padding: 0.55rem 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
    }
    .nav__split-chevron {
        width: 40px;
        height: 36px;
        pointer-events: none; /* na mobilu kliká celý řádek */
    }

    /* Mega dropdown na mobilu — inline accordion */
    .nav__mega {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0.2rem 0 0.4rem 0.5rem;
        margin: 0;
        transform: none;
    }
    .nav__polozka--otevreno .nav__mega {
        transform: none;
    }
    /* Na mobilu 2 sloupce — oblasti IS KARAT jsou krátké texty */
    .nav__mega-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.2rem;
    }
    /* Jednosloupcové gridy (O nás) zůstanou v 1 sloupci */
    .nav__mega-grid--1sl {
        grid-template-columns: 1fr;
    }
    .nav__mega--uzky {
        width: 100%;
    }
    .nav__mega-uvod {
        font-size: 0.8rem;
        padding: 0.4rem 0.65rem;
        margin-bottom: 0.35rem;
    }
    /* Dlaždice na mobilu — kompaktní, bez borderu */
    .nav__mega-tile {
        border: none;
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
        border-radius: 4px;
        background: var(--barva-pozadi);
    }
    .nav__mega-tile:hover {
        border-color: transparent;
    }

    /* Skupiny oborů — kompaktnější na mobilu */
    .nav__mega-skupina {
        margin-bottom: 0.4rem;
    }
    .nav__mega-skupina-titulek {
        font-size: 0.72rem;
        padding: 0.15rem 0.5rem 0.2rem;
        margin-bottom: 0.15rem;
    }

    .hero {
        padding: 3.5rem var(--mezera);
    }

    /* Služby — jeden sloupec na mobilu */
    .sluzby__grid {
        grid-template-columns: 1fr;
    }

    /* O nás — jeden sloupec */
    .o-nas__obal {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Formulář — jeden sloupec */
    .formular-sekce__obal {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Patička — přeskupení sloupců */
    .paticka__vnitrni {
        grid-template-columns: 1fr 1fr;
    }

    .paticka__spodni {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .paticka__vnitrni {
        grid-template-columns: 1fr;
    }
    .tym__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Navigační skupina vpravo dole (sekce + nahoru) --- */
.nav-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

.nav-float--viditelny {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Společný styl pro všechna tlačítka ve skupině */
.nav-float__btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--barva-modra);
    color: var(--barva-bila);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(3, 3, 51, 0.25);
    padding: 0;
}

.nav-float__btn:hover {
    background: var(--barva-zelena);
    transform: scale(1.08);
}

.nav-float__btn:focus-visible {
    outline: 2px solid var(--barva-zelena);
    outline-offset: 2px;
}

.nav-float__btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Sekční tlačítka — mírně menší, s odlišným vizuálem */
.nav-float__btn--sekce {
    width: 38px;
    height: 38px;
    background: rgba(3, 3, 51, 0.75);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(3, 3, 51, 0.2);
}

.nav-float__btn--sekce svg {
    width: 16px;
    height: 16px;
}

.nav-float__btn--sekce:hover {
    background: var(--barva-zelena);
}

/* Oddělovací čárka mezi sekčními a nahoru tlačítkem */
.nav-float__sep {
    width: 20px;
    height: 1px;
    background: rgba(3, 3, 51, 0.15);
}

/* Ztlumení sekčních tlačítek na začátku/konci stránky */
.nav-float__btn--skryto {
    opacity: 0.25;
    pointer-events: none;
}

/* Skrytí prvku bez změny layoutu (zabírá místo, ale neviditelný) */
.nav-float__btn--neviditelny,
.nav-float__sep--neviditelny {
    opacity: 0;
    pointer-events: none;
}

/* --- Zpětná kompatibilita: stávající .nahoru-btn styl ---
   Pokud by někde zůstal starý markup, zachováme funkčnost */
.nahoru-btn {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--barva-modra);
    color: var(--barva-bila);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(3, 3, 51, 0.25);
}

.nahoru-btn--viditelny {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nahoru-btn:hover {
    background: var(--barva-zelena);
}

.nahoru-btn:focus-visible {
    outline: 2px solid var(--barva-zelena);
    outline-offset: 2px;
}

.nahoru-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}


/* =============================================
   HOMEPAGE v2 — alternativní rozložení (index2.html)
   Nové komponenty, stávající stránky nedotčeny.
   ============================================= */

/* --- Statistiky pás --- */
.stats-pas {
    background: var(--barva-modra);
    padding: 2.5rem var(--mezera);
}
.stats-pas__obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
}
.stats-polozka {
    text-align: center;
    color: #fff;
}
.stats-polozka__cislo {
    display: block;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    color: var(--barva-zelena);
    line-height: 1;
    margin-bottom: 0.3rem;
}
.stats-polozka__popis {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* --- Oblasti v2 — kompaktní zalamovací grid --- */
.oblasti-v2 {
    padding: 5rem var(--mezera);
    background: var(--barva-bila);
}
.oblasti-v2__obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
}
.oblasti-v2__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.oblast-karta-v2 {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 6px rgba(3, 3, 51, 0.04);
}
.oblast-karta-v2:hover {
    border-color: var(--barva-zelena);
    box-shadow: 0 4px 16px rgba(3, 3, 51, 0.1);
    transform: translateY(-2px);
}
.oblast-karta-v2__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--barva-zelena);
    border-radius: 50%;
    flex-shrink: 0;
}
.oblast-karta-v2__ikona .ikona {
    width: 20px;
    height: 20px;
    color: #fff;
}
.oblast-karta-v2__obsah {
    flex: 1;
    min-width: 0;
}
.oblast-karta-v2__nazev {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--barva-modra);
    margin-bottom: 0.2rem;
}
.oblast-karta-v2__popis {
    font-size: 0.8rem;
    color: var(--barva-text-svetly);
    line-height: 1.5;
}
.oblast-karta-v2__sipka {
    color: var(--barva-zelena);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.2s;
}
.oblast-karta-v2:hover .oblast-karta-v2__sipka {
    transform: translateX(3px);
}

/* --- Obory v2 — kompaktnější karty s barevným akcentem --- */
.obory-v2 {
    padding: 5rem var(--mezera);
    background: var(--barva-pozadi);
}
.obory-v2__grid {
    max-width: var(--max-sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.obor-karta-v2 {
    background: var(--barva-bila);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.obor-karta-v2:hover {
    box-shadow: var(--shadow-karta-hover);
    transform: translateY(-3px);
}
.obor-karta-v2__accent {
    height: 4px;
    background: var(--barva-zelena);
}
.obor-karta-v2--vyroba .obor-karta-v2__accent { background: #4A90D9; }
.obor-karta-v2--obchod .obor-karta-v2__accent { background: #E67E22; }
.obor-karta-v2--servis .obor-karta-v2__accent { background: #9B59B6; }
.obor-karta-v2__telo {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.obor-karta-v2__nazev {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--barva-modra);
}
.obor-karta-v2__body {
    font-size: 0.85rem;
    color: var(--barva-text-svetly);
    line-height: 1.6;
    flex: 1;
}
.obor-karta-v2__odkaz {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--barva-zelena);
    margin-top: auto;
}

/* --- Implementace timeline — tmavá sekce --- */
.impl-timeline {
    padding: 5rem var(--mezera) 4rem;
    background: var(--barva-modra);
    color: #fff;
}
.impl-timeline .sekce__nadpis { color: #fff; }
.impl-timeline .sekce__podnadpis { color: rgba(255, 255, 255, 0.65); }
.impl-timeline__kroky {
    max-width: 700px;
    margin: 2.5rem auto 0;
    position: relative;
}
.impl-timeline__kroky::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.impl-krok-v2 {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    position: relative;
}
.impl-krok-v2:last-child { padding-bottom: 0; }
.impl-krok-v2__cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--barva-zelena);
    color: #fff;
    border-radius: 50%;
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--barva-modra);
}
.impl-krok-v2__obsah {
    padding-top: 0.5rem;
}
.impl-krok-v2__nadpis {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.impl-krok-v2__text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

/* --- Lidé za systémem — přechodový pás --- */
.lide-pas {
    background: var(--barva-modra);
    padding: 0 var(--mezera) 5rem;
    color: #fff;
}
.lide-pas__obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 3rem;
    text-align: center;
}
.lide-pas__motto {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.lide-pas__motto span { color: var(--barva-zelena); }
.lide-pas__text {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.lide-pas__karusel-obal {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.lide-pas__karusel {
    display: flex;
    gap: 2rem;
    animation: lidePasPosun 30s linear infinite;
}
.lide-pas__osoba {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 110px;
}
.lide-pas__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--barva-zelena);
}
.lide-pas__jmeno {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.lide-pas__role {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
@keyframes lidePasPosun {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.lide-pas__odkaz {
    display: inline-block;
    margin-top: 2rem;
    color: var(--barva-zelena);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s;
}
.lide-pas__odkaz:hover { color: #9bc355; }

/* --- Proč my v2 — split layout --- */
.proc-my-v2 {
    padding: 5rem var(--mezera);
    background: var(--barva-pozadi);
}
.proc-my-v2__obal {
    max-width: var(--max-sirka);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
}
.proc-my-v2__nadpis {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.25;
    margin-bottom: 0.8rem;
}
.proc-my-v2__uvod {
    font-size: 0.92rem;
    color: var(--barva-text-svetly);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.proc-my-v2__prava {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.duvod-karta {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--barva-bila);
    border: 1px solid var(--barva-ohraniceni);
    border-radius: 10px;
    padding: 1.1rem;
    box-shadow: var(--shadow-karta);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.duvod-karta:hover {
    box-shadow: var(--shadow-karta-hover);
    border-color: var(--barva-zelena);
}
.duvod-karta__fajfka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--barva-zelena);
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}
.duvod-karta__obsah {
    flex: 1;
}
.duvod-karta__nadpis {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--barva-modra);
    margin-bottom: 0.2rem;
}
.duvod-karta__text {
    font-size: 0.8rem;
    color: var(--barva-text-svetly);
    line-height: 1.55;
}

/* --- Lidé za systémem — světlá varianta uvnitř proc-my-v2 --- */
.proc-my-v2__lide {
    max-width: var(--max-sirka);
    margin: 3.5rem auto 0;
    text-align: center;
    border-top: 1px solid var(--barva-ohraniceni);
    padding-top: 3rem;
}
.proc-my-v2__lide-motto {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--barva-modra);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.proc-my-v2__lide-motto span { color: var(--barva-zelena); }
.proc-my-v2__lide-text {
    font-size: 0.92rem;
    color: var(--barva-text-svetly);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.proc-my-v2__lide-karusel-obal {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.proc-my-v2__lide-karusel {
    display: flex;
    gap: 2rem;
    animation: lidePasPosun 30s linear infinite;
}
/* Světlé varianty pro osoby na světlém pozadí */
.lide-pas__avatar--svetla {
    background: rgba(3, 3, 51, 0.06);
    border-color: var(--barva-ohraniceni);
    color: var(--barva-modra);
}
.lide-pas__jmeno--svetla {
    color: var(--barva-modra);
}
.lide-pas__role--svetla {
    color: var(--barva-text-svetly);
}
.proc-my-v2__lide-odkaz {
    display: inline-block;
    margin-top: 2rem;
    color: var(--barva-zelena);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s;
}
.proc-my-v2__lide-odkaz:hover { color: #6a8c2e; }

/* --- Firmy a reference — sloučená tmavá sekce --- */
.firmy-a-reference {
    padding: 5rem var(--mezera) 3rem;
    background: linear-gradient(135deg, #030333 0%, #0a0a5a 100%);
    color: #fff;
}
.firmy-a-reference .sekce__nadpis { color: #fff; }
.firmy-a-reference .sekce__podnadpis { color: rgba(255, 255, 255, 0.65); }
.firmy-typy {
    max-width: var(--max-sirka);
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}
.firma-typ {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
}
.firma-typ:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}
.firma-typ__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--barva-zelena);
    border-radius: 50%;
    margin-bottom: 0.75rem;
}
.firma-typ__ikona img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.firma-typ__nazev {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}
.firma-typ__text {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}
.firmy-a-reference__prechod {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
.firmy-a-reference__prechod span {
    color: var(--barva-zelena);
    font-weight: 700;
}
.firmy-a-reference .ref-karusel {
    margin-bottom: 2.5rem;
}
.firmy-citat {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.firmy-citat__text {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
}
.firmy-citat__text::before { content: '„'; color: var(--barva-zelena); font-weight: 700; }
.firmy-citat__text::after { content: '"'; color: var(--barva-zelena); font-weight: 700; }
.firmy-citat__autor {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}
.firmy-citat__autor strong {
    color: rgba(255, 255, 255, 0.8);
}
.firmy-a-reference__tlacitko {
    text-align: center;
    padding-top: 1.5rem;
}

/* --- Responsivita homepage v2 --- */
@media (max-width: 768px) {
    .stats-pas__obal { gap: 2rem; }
    .oblasti-v2__grid {
        grid-template-columns: 1fr;
    }
    .proc-my-v2__obal {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .proc-my-v2__prava {
        grid-template-columns: 1fr;
    }
    .impl-krok-v2 { gap: 1rem; }
    .impl-krok-v2__cislo { width: 40px; height: 40px; font-size: 0.95rem; }
    .impl-timeline__kroky::before { left: 19px; }
    .firmy-typy {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .stats-pas__obal { gap: 1.25rem; }
    .stats-polozka__cislo { font-size: 2rem; }
    .firmy-typy {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   NÁHLEDOVÝ REŽIM — privátní detaily referencí
   Aktivuje se URL parametrem ?nahled=1 (viz js/nahled.js)
   ============================================= */

/* Skryté elementy — odhalí se až při náhledovém režimu */
.private-detail-link {
    display: none !important;
}
body.nahled-aktivni .private-detail-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}
.private-detail-link::before {
    content: "🔒";
    font-size: 0.85em;
    margin-right: 0.15rem;
}

/* Banner indikující aktivní náhledový režim */
.nahled-banner {
    display: none;
}
body.nahled-aktivni .nahled-banner {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #87AC3D 0%, #6e9030 100%);
    color: #fff;
    padding: 0.55rem 1.25rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.nahled-banner__text {
    line-height: 1.3;
}
.nahled-banner__text strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nahled-banner__vypni {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.nahled-banner__vypni:hover {
    background: rgba(255,255,255,0.3);
}
body.nahled-aktivni { padding-top: 2.6rem; }
body.nahled-aktivni #komp-hlavicka { /* posunout pevnou hlavičku */ }
@media (max-width: 640px) {
    body.nahled-aktivni { padding-top: 3.6rem; }
    .nahled-banner { font-size: 0.74rem; padding: 0.45rem 0.6rem; }
}

/* Štítek "v přípravě" v hero u privátních detailů */
.ref-detail-hero__stitek--priprava {
    background: #d97706;
}