@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 500;
  font-display: swap; /* Zabrání problikávání prázdného místa */
  src: url('fonts/Teko-Medium.ttf') format('woff2'); 
}
/* inter-500 - latin-ext_latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin-ext-500.woff2') format('woff2');
}


@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/audiowide-v22-latin-ext-regular.woff2') format('woff2');
}
/* inter-600 - latin-ext_latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 300;
  font-display: swap; /* Zabrání problikávání prázdného místa */
  src: url('fonts/teko-v23-latin_latin-ext-300.woff2') format('woff2'); 
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Zabrání problikávání prázdného místa */
  src: url('fonts/teko-v23-latin_latin-ext-regular.woff2') format('woff2'); 
}

@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 600;
  font-display: swap; 
  src: url('fonts/teko-v23-latin_latin-ext-600.woff2') format('woff2'); 
}

body {
    overflow-x: hidden;  
    overflow-y: auto;    
}

/* 1. Reset, který zajistí, že 100% je opravdu 100% včetně paddingu */
*, *::before, *::after {
    box-sizing: border-box;
}


header, .page-content {
    display: block;
    overflow: hidden; /
}


.main-bg {
    pointer-events: none;
    backface-visibility: hidden; 
}

.navbar-scaler {
    overflow: visible;
}

:root {
    --line-thickness: 2.5px;
    --menu-bg-width: 110%;    
    --menu-bg-height: 45px;   
    --menu-bg-top: 2px;      
    --menu-bg-left: -5%;     
    --menu-bg-opacity: 0.9;
    --nav-scale: 1;
}

.navbar-scaler {
    width: 100%;
    height: 100%;
    position: relative;
    
    /* Magie škálování */
    transform-origin: top left;
    transform: scale(var(--nav-scale));
    
    /* Pokud obsah zmenšíme (scale < 1), musíme zvětšit jeho šířku, 
       aby stále vyplňoval celou obrazovku.
       Vzorec: 100% / měřítko
    */
    width: calc(100% / var(--nav-scale));
}

.menu-parallax-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
    bottom: 29.5px;
    left: 22px;
}
.menu-highlight {
    position: absolute;
    display: none;
    background-color: #ff8010; /* Vaše oranžová */
    
    /* Použití proměnných pro snadné ladění */
    width: 310px;      /* Uprav délku oranžového pruhu */

    height: 39.4px;
    top: var(--menu-bg-top);
    left: -26px;
    opacity: var(--menu-bg-opacity);
    
    /* Zajištění, že je pod textem */
    z-index: 1; 
    
    /* Vizuální styl (volitelné) */
    pointer-events: none; /* Klikání projde skrz na odkazy */
    /* clip-path: polygon(...); <- Zde můžete přidat i zkosení jako u lišty */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Odstraňte overflow-x: hidden z html, nechte ho jen na body */
}

body {
    font-family: Arial, sans-serif;
    min-height: 100vh;
    overflow-x: hidden; /* Zabrání horizontálnímu scrollu */
    overflow-y: visible; /* Standardní chování, žádný vynucený vnitřní scroll */
}


.intro-text, .services {
    max-width: 1200px; /* Nebo šířka tvého polygonu */
    margin: 0 auto;
    padding: 0 20px;
    word-wrap: break-word; /* Zajistí zalamování dlouhých slov */
}



.header-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3vw;        /* nastav si šířku */
    background: #eaf3f6;
    z-index: 80;
    pointer-events: none;
    display: none;
}

.header-side-left {
    left: 0;
}

.header-side-right {
    right: 0;
}


/* ===== HORNÍ LIŠTA ===== */
.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;       /* Vrátíme na 100% */
    height: 100px;
    z-index: 999;
    box-sizing: border-box;
    overflow: visible;
    

}

/* Stín z levého okraje */
/* Levý stín navbaru */
/* Levý stín navbaru */









/* Polygonální pozadí */
.navbar-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 17, 31, 0.95) 0%, rgba(0, 17, 31, 0.72) 100%);
        backdrop-filter: blur(5px);
    clip-path: polygon(
        0 0,
        100% 0,
        100% 37px,
        208.57px 37px,
        196px 48px,
        54px 48px,
        41.43px 59px,
        0 59px
    );
    z-index: 1;
}
.navbar-bg,
.navbar-border-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;         /* respektuje wrapper */
    height: 100%;
    box-sizing: border-box;

}

.navbar-border {
    position: absolute;   /* vůči navbar-wrapper */
    bottom: 0;
    left: 0;
    width: 100%;          /* sahá přes celou lištu */
    height: 96px;         /* výška lišty */
    z-index: 3;           /* nad bg, pod menu/logo dle potřeby */
}


:root{
    --line-thickness: 3.5px;   /* ← TADY měníš tloušťku čáry */
}

.navbar-border-line{
    position: absolute;
        display: none;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background-color: #00b7ff1b;

    clip-path: polygon(
        0 59px,
        41.43px 59px,
        54px 48px,
        196px 48px,
        208.57px 37px,
        100% 37px,

        /* spodní linie polygonu + tloušťka */
        100% calc(37px + var(--line-thickness)),
        208.57px calc(37px + var(--line-thickness)),
        196px calc(48px + var(--line-thickness)),
        54px calc(48px + var(--line-thickness)),
        41.43px calc(59px + var(--line-thickness)),
        0 calc(59px + var(--line-thickness))
    );
}




/* ===== OBSAH NAVBARU ===== */
.navbar {
    position: relative;
    height: 100%;
    width: 100%;
}

.menu-separator {
    position: absolute;
    top: 50%;           /* Vycentrování vertikálně */
    transform: translateY(-120%); 
    right: 290px;       /* Upravte podle potřeby, aby seděl za menu */
    width: 3px;
    right: 303px;
    height: 42px;
    background-color: #000000;
    z-index: 1000;         /* Nad polygonem, ale pod textem pokud se překryjí */
    pointer-events: none;
    display: none;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}


/* Logo */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 22px;
}

.logo-crop {
    height: 57px;
    display: flex;
    align-items: center;
    transform: none;
    left: -40px;
    top: -17.5px;
    position: relative; 
}

.logo-crop img {
    height: 100%;
    max-height: 108px;
    width: auto;
    display: block;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}




.text-line {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 84%;
  height: 2px;
  background-color: rgb(0, 0, 0);
  transform-origin: center;
  transform: scaleX(1);
  transition: width 0.8s ease;
  display: none;
}
.text-line.shrink {
    width: auto;           /* po animaci se zkrátí na šířku textu */
}

/* Typed text */
.typed-wrapper {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 154px;
    height: 28px;
    padding-right: 26px;
    box-sizing: border-box;
    font-family: 'Teko', monospace;
    top: -28px;
    left: -41px;
    z-index: 2;
}
/* pevná kotva */



.typed-inner {
    display: inline-block;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease; /* plynulý hover */
}
.typed-wrapper:hover .typed-inner {
    transform: scale(1.02);
}

.typed-inner:hover .text-line {
  transform: scaleX(1.2);
}



.typed-text {
    font-family: 'Teko', monospace;
    font-size: 18px;
    letter-spacing: 0vw;
    display: inline-block;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
    transition: transform 1s ease;
    color: #ffffff;
    pointer-events: none;       /* zabrání kliknutí / drag */
}



.search-icon {
    width: 14px; /* nebo vaše velikost */
    height: 14px;
    position: absolute; /* aby fungovalo 'left' z JS */
    transform: translateX(124px) translateY(-32px); /* výchozí stav */
    transform-origin: center;
    pointer-events: none; /* aby ikona nepřekážela klikání */
    display: none;
}
.search-wrapper {
    position: absolute;   /* vůči typed-hover-group */
    bottom: 0;
    right: 0;             /* drží se na konci textu */
    width: 20px;
    height: 20px;
    right: 276px;
}


.typed-hover-group {
    position: absolute; /* vůči .navbar-inner */
    left: 100px;
    bottom: 25px;       /* pevná vzdálenost od levého okraje navbaru */
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    transform-origin: left center; /* hover scale od levého okraje */
}

.typed-inner:hover {
    transform: scale(1.05); /* text */
    transform-origin: bottom;
}


.search-wrapper:hover .search-icon {
    transform: translateY(-17px) scale(1.1); /* zachováme vertikální pozici + scale */
}

.search-wrapper:hover .search-icon2 {
    transform: translateY(-17px) scale(1.1); /* zachováme vertikální pozici + scale */
}
/* Menu */

.menu {
    position: relative; /* reference pro pseudo-element */
    display: flex;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10; /* nad pruhy */
}

/* Oranžový pruh přímo pod tlačítky */

.menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #ff7700; /* kontrastní barva */
    z-index: 2;
}

.menu li {
    display: flex;
}

.menu a {
    font-family: 'Teko', sans-serif;
    letter-spacing: 1.5px;
    font-size: 21px !important;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: text-shadow 1.2s ease, 
                transform 1.2s cubic-bezier(0.3, 1, 0.15, 1),
                opacity 1.2s cubic-bezier(0.3, 1, 0.15, 1),
                color 1.2s cubic-bezier(0.3, 1, 0.15, 1);
    padding: 8px 4px;
    z-index: 2;
}

.menu a::after {
    content: "";
    position: absolute;
    left: 8%;
    bottom: 13px;
    width: 84%;
    height: 2px;
    background: #ffffff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.9s cubic-bezier(0.3, 1, 0.15, 1);
}

.menu a:hover::after {
    transform: scaleX(1);
}

/* když myš odjede */
.menu a:not(:hover)::after {
    transform-origin: right;
}


.menu a:hover {
    text-shadow: 1.5px 1.5px 5px rgba(0,0,0,0.6); /* Jemný stín pro hloubku */
}











.intro-text {
    max-width: 900px;
    margin: 0 auto 60px auto;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    white-space: pre-wrap;
    padding: 60px 10%;
}

.services {
    max-width: 900px;
    margin: 0 auto;
}

.services h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    padding: 60px 10%;
}

.services ul {
    list-style: none;
    padding: 0;
    text-align: center;
    padding: 60px 10%;
}

.services ul li {
    margin-bottom: 12px;
    font-size: 18px;
    padding: 60px 10%;
}


.hero-shadow-layer,
.hero-shadow-layer2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3; /* overlay je 2, corner shadow 5, text 10 */
}

.hero-shadow-layer {
    background: linear-gradient(
        to bottom right,
        rgba(0,0,0,0) 86%,
        rgba(0,0,0,0.1) 95%,
        rgba(0,0,0,0.2) 100%
    );

    clip-path: polygon(
        var(--tl2-x) var(--tl2-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
}

.hero-shadow-layer2 {
    background: linear-gradient(
        to top left,
        rgba(0,0,0,0) 78%,
        rgba(0,0,0,0.1) 94%,
        rgba(0,0,0,0.2) 100%
    );

    clip-path: polygon(
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
}
.corner-shadow-br {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;

    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.3) 30%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 65%,
        rgba(0,0,0,0) 100%
    );

    clip-path: polygon(
        calc(var(--br-x) - 0.7cqw) calc(var(--br-y) + 0.1cqw),
        calc(var(--tr-x) - 0.4cqw) calc(var(--tr-y) - 0.43cqw),
        calc(var(--tr2-x) + 0.0cqw) calc(var(--tr2-y) - 0.04cqw),
        calc(var(--br-x) - 0.0cqw) calc(var(--br-y) + 0.1cqw)
    );
}

.corner-shadow-bl {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;

    background: linear-gradient(
        to top right, /* směr od spodního levého k hornímu */
        rgba(0,0,0,0.8) 0%,   /* spodní okraj - nejtmavší */
        rgba(0,0,0,0.4) 13%,
        rgba(0,0,0,0.1) 24%,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,0) 100%   /* horní okraj - úplně průhledný */
    );

    clip-path: polygon(
        calc(var(--tl-x) - 0.02cqw) calc(var(--tl-y) + 0.0cqw),
        calc(var(--bl2-x) - 0.02cqw) calc(var(--bl2-y) - 0.0cqw),
        calc(var(--bl-x) + 0.6cqw) calc(var(--bl-y) + 0.6cqw),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness))
    );
}


.hero-text-wrapper {

    display: flex;
    justify-content: center; 
    align-items: center;

    width: 100%;   
    height: 100vh;
    pointer-events: none;
    z-index: 900;
}



.hero-scaler {
    position: relative;
    width: 100vw;  
    max-width: 1200px;     
    container-type: inline-size; 
    transform: translateZ(0);

    transform-origin: center center;
}
/* ===== 2. DEFINICE BODŮ POLYGONU (Jednotky cqw = absolutní fixace) ===== */
/* ===== ROOT proměnné pro zkosené rohy ===== */
:root {
    /* Původní hodnoty převedené na poměr k 1100px (šířka) a 330px (výška) */
    --hero-line-thickness: 0.3cqw; /* Odpovídá cca 3px */
    --hero-scale: 1.2;

    /* Horní hrana */
    --tl-x: 0cqw;      --tl-y: 2.8cqw;    /* 32px / 330px */
    --tl2-x: 2.8cqw;   --tl2-y: 0cqw;     /* 32px / 1100px */
    
    /* Pravá horní hrana */
    --tr-x: 95.7cqw;   --tr-y: 0cqw;      /* (1100-80)/1100 */
    --tr2-x: 98.5cqw;  --tr2-y: 2.8cqw;   /* (1100-50)/1100 a 30/330 */

    /* Pravá spodní hrana */
    --br-x: 100cqw;    --br-y: 6.5312cqw;   /* (330-30)/330 */
    --br2-x: 97.2cqw;  --br2-y: 9.3312cqw;   /* (1100-30)/1100 */

    /* Levá spodní hrana */
    --bl-x: 4.3cqw;    --bl-y: 9.3312cqw;    /* 80px / 1100px */
    --bl2-x: 1.5cqw;   --bl2-y: 6.5312cqw;  /* 50px / 1100px */
}


/* Bílá plocha pod textem */
.hero-text-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(255, 255, 255);
    clip-path: polygon(
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
    z-index: 2;
}



.hero-text-overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(249, 247, 242); /* Barva vnitřku */
    width: 100%;
    
    /* Tvůj polygon */
    clip-path: polygon(
        var(--tl-x) var(--tl-y),       /* levý horní roh */
        var(--tl2-x) var(--tl2-y),     /* levý horní roh - cut */
        var(--tr-x) var(--tr-y),       /* pravý horní roh */
        var(--tr2-x) var(--tr2-y),     /* pravý horní roh - cut */
        var(--br-x) var(--br-y),       /* pravý dolní roh */
        var(--br2-x) var(--br2-y),     /* pravý dolní roh - cut */
        var(--bl-x) var(--bl-y),       /* levý dolní roh */
        var(--bl2-x) var(--bl2-y)      /* levý dolní roh - cut */
    );
    transform: translateZ(0);
}
.hero-text-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #d76b00;
    z-index: 2;
    clip-path: polygon(
        /* VNĚJŠÍ HRANA */
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y),
        var(--tl-x) var(--tl-y), 

        /* VNITŘNÍ HRANA (odsazená o tloušťku) */
        calc(var(--tl2-x) + var(--hero-line-thickness)) calc(var(--tl2-y) + var(--hero-line-thickness)),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness)),
        calc(var(--bl-x) + var(--hero-line-thickness)) calc(var(--bl-y) - var(--hero-line-thickness)),
        calc(var(--br2-x) - var(--hero-line-thickness)) calc(var(--br2-y) - var(--hero-line-thickness)),
        calc(var(--br-x) - 0.7cqw) calc(var(--br-y) + 0.1cqw),
        calc(var(--tr-x) - 0.2cqw) calc(var(--tr-y) + var(--hero-line-thickness)),
        calc(var(--tl2-x) + var(--hero-line-thickness)) calc(var(--tl2-y) + var(--hero-line-thickness)),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness))
    );
    
}


/* ===== 4. TEXT (Všechny fonty v cqw = nikdy neujedou) ===== */
.hero-text-container {
    position: absolute;
    inset: 0; /* Vyplní celý 1100x330 prostor */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
    pointer-events: auto;
}

.hero-text h1 {
    font-size: 8cqw; /* Místo px použijeme cqw */
    font-family: 'Teko', sans-serif;
    margin: 0;
    color: #000;
    line-height: 0.9;
    left: 50%;          /* Vycentrování na střed */
    transform: translateX(0%) translateY(8%);
    text-shadow: 0.07cqw 0.07cqw 0.01cqw rgba(0,0,0,0.3);
    letter-spacing: 0.1cqw;
    pointer-events: none;
    letter-spacing: 0.1cqw;
}


.info-strip h1{
    all: unset;

    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'Teko', sans-serif;
    font-size: 4cqw;
    font-weight: 500;

    color: #ffffff;

    text-shadow:
        -0.6px -0.6px 6px rgba(0,0,0,0.2),
         1.4px 1.4px 1.1px rgba(0,0,0,0.7);

    cursor: text;
    user-select: text;
    letter-spacing: 0.4px;
               padding-bottom: 3px;
}
.hero-text h2 {
    font-size: 5.8cqw;
    font-family: 'Teko', sans-serif;
    color: #000000;
    margin: 0.5cqw 0;
    pointer-events: none;
    transform: translateX(-40%) translateY(77%);
    text-shadow: 0.1 0.0cqw 0cqw rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
}

.hero-text h3 {
    margin-top: 30px;
    font-size: 4cqw;
    font-family: 'Orbitron', sans-serif;
    color: #ff8010;
    margin-top: 8px;
    white-space: initial;
    transform: translateX(-20%) translateY(100%);
    text-shadow: 0.1px 0.9px 0.0px rgba(0,0,0,1);
    display: none;
}

.hero-text h4 {
    margin-top: 30px;
    font-size: 4cqw;
    font-family: 'Orbitron', sans-serif;
    color: #ff8010;
    margin-top: 18px;
    white-space: initial;
    text-shadow: 0.1px 0.8px 0.0px rgba(0,0,0,1);
    transform: translateX(-42%) translateY(15%);
    display: none;
}

.hero-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100cqw;
    height: auto;
    text-align: center;
    z-index: 10;
    pointer-events: auto;
}






.hero-wrapper {
    position: relative;
    width: 120cqw;       /* pevná šířka v cqw */
    height: 40cqw;      /* pevná výška v cqw */
    margin: 0 auto;
    pointer-events: none; /* text může mít pointer-events: auto */
}



.main-bg {
    position: fixed;
    top: -3cqw;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -2;
    transform: translateY(0);
}


.info-strip {   
    will-change: transform;
}

.main-bg2 {
display: none;
}




.glugo {
    position: absolute;
    z-index: 9999;
    bottom: calc(152px - 2vh);
    width: 120px;
    height: auto;
    display: none;
}

.glug {
    position: absolute;
    left: 40px;
    width: 106px;
    height: auto;
    z-index: 1000;
    transform: translateY(-2.6%);
                    border-radius: 4px;
}


.main-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;

    background:  rgba(2, 10, 19, 0.7);
    width: 100%;
    height: 100%;
}









/* --- Hlavní plátno pod navbar --- */
.price-main {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  top: 0;
  overflow: visible;
  z-index: 1;
  padding-top:  16cqw;
}

:root {
    --line-thicknes: 0.32cqw; /* Tady si nastav tloušťku, jakou chceš */
}

.frames-wrapper {
    box-sizing: border-box;
    position: absolute;
    top: 6cqw;        
    left: 50%;
    transform: translateX(-50%);
    width: 90cqw;
    height: 260cqw;
    z-index: 3;
    pointer-events: none;
}





.gaga {
    position: absolute;
    top: 10cqw;
    left: 50%;
    transform: translateX(-50%);
    width: 90cqw;
    height: 260cqw;
    border: 0.3cqw solid #000000;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;

    clip-path: polygon(
        0.86cqw 3.9cqw,     
        2.4cqw 2.1cqw,     
        16.9cqw 2.1cqw, 
        19.1cqw 0scqw,     
        1.5cqw 1.5cqw, 
        0.5cqw 2cqw,   
        90cqw 0cqw,
        90cqw 260cqw,
        0cqw 260cqw
    );
}

/* --- Tabulka ceníku --- */
.price-table {
  width: 80cqw;
  border-collapse: collapse;
  margin-top: -6.6cqw;
  z-index: 60;
  font-family: 'Teko', sans-serif;
}

.price-table th,
.price-table td {
  border: 0.16cqw solid #000000;
  text-align: left;
  cursor: default;
}

.price-table th {
  background-color: #ff8010;
  color: white;
  font-size: 4cqw;
}


.price-table td {
  font-size: 1.6cqw;
  height: 6cqw;
  padding: 0.6cqw 2cqw;
}

.price-table thead tr:nth-child(even) {
  background-color: #f9f9f9;
}

.price-table thead tr:hover {
  background-color: #e4e4e4;
}


/* Upravená část vašeho CSS */
.price-table th,
.price-table td {
  border: 0.16cqw solid #000000;
  text-align: left;
  line-height: 1.2;     /* Zajišťuje kompaktnost textu */
}

.price-table th {
  background-color: #ff8010;
  color: white;
  font-size: 4cqw;
  padding: 0.6cqw 2cqw;
}









/* --- Tabulka ceníku --- */
.info-table {
  width: 80cqw;
  border-collapse: collapse;
  margin-top: 2cqw;
  z-index: 60;
  font-family: 'Teko', sans-serif;
}

.ifno-table td {
  border: 0.16cqw solid #000000;
  text-align: left;
}


.info-table td {
  font-size: 1.6cqw;
  height: 6cqw;
  padding: 0.6cqw 2cqw;
}

.info-table thead tr:nth-child(even) {
  background-color: #f9f9f9;
}


/* Upravená část vašeho CSS */
.info-table th,
.info-table td {
  border: 0.16cqw solid #000000;
  text-align: left;
  line-height: 1.2;
  cursor: default;
}

.info-table th {
  background-color: #ff8010;
  color: white;
  font-size: 2cqw;
  padding: 0.6cqw 2cqw;
}

.info-table {
  width: 80cqw;
  border-collapse: collapse;
  margin-bottom: 0cqw; /* mezera mezi tabulkami */
  z-index: 60;
  font-family: 'Teko', sans-serif;
}

.info-table td {
  border: 0.16cqw solid #000000;
  font-size: 1.6cqw;
  height: 6cqw;
  padding: 0.6cqw 2cqw;
  line-height: 1.2;
}
.price-background {
  container-type: inline-size;
  display: flex;
  position: relative;
  margin: 0 auto;
  width: 100vw;
  justify-content: center;
  max-width: 1400px; 
  top: 0;
}



.price-table,
.info-table {
  width: 80cqw;
  border-collapse: collapse;
  table-layout: fixed;   /* 🔥 důležité */
}

.price-table th:first-child,
.price-table td:first-child,
.info-table td:first-child {
  width: 60%;
}

.price-table th:last-child,
.price-table td:last-child,
.info-table td:last-child {
  width: 40%;
}

.info-table tbody tr:hover {
  background-color: #e4e4e4;
}

.info-text {
  font-family: 'Teko', sans-serif;
  font-size: 1.6cqw;
  text-align: left;        /* nebo center, pokud chceš uprostřed */
  width: 80cqw;            /* stejné jako tabulky */
  color: #000;             /* barvu si uprav podle designu */
}




.hero-text {
  font-family: 'Teko', sans-serif;
  font-style: oblique 30deg;   /* 🔥 tady je náklon */
  font-size: 5.8cqw;
  letter-spacing: 0.1cqw;
  margin: 0;
  cursor: default;
  bottom: -5cqw;
}



header {
    position: relative; /* nebo fixed pokud chceš header stále nahoře */
    width: 100%;
    height: 100vh; /* celá obrazovka */
    background-image: url("images/pozadi22.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* KLÍČ: obrázek zůstane statický */
    z-index: 2;
}


.header-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3vw;        /* nastav si šířku */
    background: #eaf3f6;
    z-index: 80;
    pointer-events: none;
}

.header-side-left {
    left: 0;
}

.header-side-right {
    right: 0;
}



.header-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Dal jsem 100% místo 100vh, aby to přesně lícovalo s headerem */
    z-index: 1;
    pointer-events: none;
    transform: translateZ(0);

    background: 
        /* 1. MĚDĚNÁ ZÁŘE (Dole): Oživí to mosazné a měděné nářadí na fotce */
        radial-gradient(circle at 100% 95%, rgba(255, 120, 0, 0.12) 0%, transparent 65%),

        /* 2. KORPORÁTNÍ LED (Nahoře): Technický, čistý cyan/petrolejový odlesk zleva */
        radial-gradient(circle at 10% 5%, rgba(0, 180, 240, 0.12) 0%, transparent 65%),

        /* 3. FILMOVÁ VIGNETA: Ztmaví rohy a vtáhne oko uživatele do středu fotky */
        radial-gradient(ellipse at center, transparent 40%, rgba(2, 6, 10, 0.2) 100%),

        /* 4. HLAVNÍ TĚLO: Tmavý vršek pro čitelný text, čirý nad nářadím, ostrá tma úplně dole */
        linear-gradient(
            to bottom,
            rgba(7, 22, 33, 0.778) 0%,   /* Luxusní tmavá s nádechem petroleje pro text */
            rgba(4, 12, 18, 0.3) 40%,   /* Střed fotky lehce prokoukne */
            rgba(0, 0, 0, 0.1) 75%,     /* Tady je nářadí - necháme ho maximálně viditelné! */
            rgba(0, 0, 0, 0.95) 100%    /* Ostré ztmavení na spodní hraně pro napojení další sekce */
        );
}





:root {

    --is-tl-x: 0%;    --is-tl-y: 0%;   
    --is-tr-x: 97.5%; --is-tr-y: 0%;  
    --is-br-x: 100%;  --is-br-y: 92%;
    --is-bl-x: 2.5%;  --is-bl-y: 92%;  
}


.info-strip {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
     width: 80cqw;
    height: 7cqw;
    font-family: 'Teko', sans-serif;
    font-size: 5.5cqw;
    color: rgba(2, 6, 23, 0.95);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6cqw 2.5cqw;
    padding-top: 1cqw;
    pointer-events: auto;

    /* Prémiový gradient s nádechem barev */
   background: linear-gradient(
        90deg,
          rgba(0, 20, 33, 0.4) 0%,
        rgba(0, 122, 118, 0.2) 100%
    );
    /* OPAČNÝ POLYGON */
    clip-path: polygon(
        var(--is-tl-x) var(--is-tl-y),
        var(--is-tr-x) var(--is-tr-y),
        var(--is-br-x) var(--is-br-y),
        var(--is-bl-x) var(--is-bl-y)
    );

    /* Hloubka pomocí drop-shadow (funguje i přes clip-path) */
    filter: drop-shadow(0 0.8cqw 1.2cqw rgba(0,0,0,0.1));

    border: none;
  
    
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.info-strip:hover {
    /* Jemný posun a zesílení stínu */
    transform: translateX(-50%) translateY(-0.5cqw);

}







.info-strip-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80cqw;
    height: 100%;

    /* Filtr dáme na obal, ten clip-path nemá, takže stín uvidíš */
    transition: all 0.4s ease;
    z-index: 10;
    transition: transform 1.8s cubic-bezier(0.3, 1, 0.15, 1), 
                filter 1.5s cubic-bezier(0.2, 0.8, 0.1, 1);
    filter: drop-shadow(0 0 0 rgba(255, 211, 16, 0));
}
.hero-hover-wrapper {
    position: relative;
    transform: translateX(-50%);
    left: -50%;
    width: 100%;
    height: 100%;
    /* Filtr dáme na obal, ten clip-path nemá, takže stín uvidíš */
    transition: all 0.4s ease;
    z-index: 10;
}



.info-strip-wrapper:hover {
    transform: translateX(-50.4%) translateY(-0.5cqw);
    filter: drop-shadow(0 0.2cqw 1.8cqw rgba(0, 145, 255, 0.15));
}



.info-strip .highlight {
    background: linear-gradient(90deg, #ff8010, #f5d000);

    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.hero-text .highlight {
    background: linear-gradient(90deg, #ffdb10, #f58700);
 
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}






.info-strip.loaded {
    left: 50%;
    top: 40%;
    transform: translateX(-50%); /* finální střed */
    transition: transform 1.8s cubic-bezier(0.3, 1, 0.15, 1);
}
.hero-hover-wrapper {
    transform: translateX(100%); /* start z pravého kraje */
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.info-strip {
    transform: translateX(100%); /* start z pravého kraje */
    cursor: default;
}








/* Levý text – zarovnán doprostřed své poloviny */
.info-left {
    flex: 1;
    display: flex;
    justify-content: center;  /* střed levé poloviny */
    align-items: center;
    cursor: text; /* kurzor jako u textu */
    user-select: text;
    left: 50%;
    transform: translateY(-1.4%) translateX(13%) !important;
             color: #e7e7e7;
               text-shadow: -0.4px -0.4px 6px rgba(0,0,0,0.4),
     1px 1px 8px rgba(0,0,0,0.5);
}

/* Divider – pevně uprostřed */
.info-divider {
    width: 0.5cqw;
    height: 60%;
    background-color: #ff8010;
    flex-shrink: 0;
}

/* Pravý text – zarovnaný doprava, tedy k divideru */
.info-right {
    flex: 1;
    display: flex;
    justify-content: center;  /* tiskne text k divideru */
    align-items: center;
    cursor: text; /* kurzor jako u textu */
    user-select: text;
    pointer-events: none;
}

.hero-shadow-layer,
.hero-shadow-layer2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3; /* overlay je 2, corner shadow 5, text 10 */
}

.hero-shadow-layer {
    background: linear-gradient(
        to bottom right,
        rgba(0,0,0,0) 86%,
        rgba(0,0,0,0.1) 95%,
        rgba(0,0,0,0.2) 100%
    );

    clip-path: polygon(
        var(--tl2-x) var(--tl2-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
}

.hero-shadow-layer2 {
    background: linear-gradient(
        to top left,
        rgba(0,0,0,0) 78%,
        rgba(0,0,0,0.1) 94%,
        rgba(0,0,0,0.2) 100%
    );

    clip-path: polygon(
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
}
.corner-shadow-br {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;

    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.2) 18%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 65%,
        rgba(0,0,0,0) 100%
    );

    clip-path: polygon(
        calc(var(--br-x) - 0.7cqw) calc(var(--br-y) + 0.1cqw),
        calc(var(--tr-x) - 0.4cqw) calc(var(--tr-y) - 0.43cqw),
        calc(var(--tr2-x) + 0.0cqw) calc(var(--tr2-y) - 0.04cqw),
        calc(var(--br-x) - 0.0cqw) calc(var(--br-y) + 0.1cqw)
    );
}

.corner-shadow-bl {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;

    background: linear-gradient(
        to top right, /* směr od spodního levého k hornímu */
        rgba(0,0,0,0.6) 0%,   /* spodní okraj - nejtmavší */
        rgba(0,0,0,0.2) 14%,
        rgba(0,0,0,0.1) 24%,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,0) 100%   /* horní okraj - úplně průhledný */
    );

    clip-path: polygon(
        calc(var(--tl-x) - 0.02cqw) calc(var(--tl-y) + 0.0cqw),
        calc(var(--bl2-x) - 0.02cqw) calc(var(--bl2-y) - 0.0cqw),
        calc(var(--bl-x) + 0.6cqw) calc(var(--bl-y) + 0.6cqw),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness))
    );
}


.hero-text-wrapper {
  
    position: absolute;      
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  
    

    display: flex;
    justify-content: center; 
    align-items: center;  
    pointer-events: none;
    z-index: 900;

    height: 100%;
    top: 50%;
}

.hero-scaler {
    position: absolute;
    width: 100vw;       
    height: 100vh;
    container-type: inline-size; 
    transform: translateZ(0) translateY(-50%);
    top: 50%;

}
/* ===== 2. DEFINICE BODŮ POLYGONU (Jednotky cqw = absolutní fixace) ===== */
/* ===== ROOT proměnné pro zkosené rohy ===== */
:root {
    /* Původní hodnoty převedené na poměr k 1100px (šířka) a 330px (výška) */
    --hero-line-thickness: 0.3cqw; /* Odpovídá cca 3px */

    /* Horní hrana */
    --tl-x: 0cqw;      --tl-y: 2.8cqw;    /* 32px / 330px */
    --tl2-x: 2.8cqw;   --tl2-y: 0cqw;     /* 32px / 1100px */
    
    /* Pravá horní hrana */
    --tr-x: 93.2cqw;   --tr-y: 0cqw;      /* (1100-80)/1100 */
    --tr2-x: 96cqw;  --tr2-y: 2.8cqw;   /* (1100-50)/1100 a 30/330 */

    /* Pravá spodní hrana */
    --br-x: 100cqw;    --br-y: 14.66cqw;   /* (330-30)/330 */
    --br2-x: 97.2cqw;  --br2-y: 17.46cqw;   /* (1100-30)/1100 */

    /* Levá spodní hrana */
    --bl-x: 7cqw;    --bl-y: 17.46cqw;    /* 80px / 1100px */
    --bl2-x: 4.2cqw;   --bl2-y: 14.66cqw;  /* 50px / 1100px */
}


/* Bílá plocha pod textem */
.hero-text-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(249, 248, 244);
    clip-path: polygon(
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y)
    );
    z-index: 2;
}

.none {
  padding-top: 200px;
}
.hero-text-overlay {
    position: absolute;
    inset: 0;
    background-color: #fff; /* Barva vnitřku */
    width: 100%;
    
    /* Tvůj polygon */
    clip-path: polygon(
        var(--tl-x) var(--tl-y),       /* levý horní roh */
        var(--tl2-x) var(--tl2-y),     /* levý horní roh - cut */
        var(--tr-x) var(--tr-y),       /* pravý horní roh */
        var(--tr2-x) var(--tr2-y),     /* pravý horní roh - cut */
        var(--br-x) var(--br-y),       /* pravý dolní roh */
        var(--br2-x) var(--br2-y),     /* pravý dolní roh - cut */
        var(--bl-x) var(--bl-y),       /* levý dolní roh */
        var(--bl2-x) var(--bl2-y)      /* levý dolní roh - cut */
    );
    transform: translateZ(0);
}
.hero-text-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ff8010;
    z-index: 2;
    clip-path: polygon(
        /* VNĚJŠÍ HRANA */
        var(--tl-x) var(--tl-y),
        var(--tl2-x) var(--tl2-y),
        var(--tr-x) var(--tr-y),
        var(--tr2-x) var(--tr2-y),
        var(--br-x) var(--br-y),
        var(--br2-x) var(--br2-y),
        var(--bl-x) var(--bl-y),
        var(--bl2-x) var(--bl2-y),
        var(--tl-x) var(--tl-y), 

        /* VNITŘNÍ HRANA (odsazená o tloušťku) */
        calc(var(--tl2-x) + var(--hero-line-thickness)) calc(var(--tl2-y) + var(--hero-line-thickness)),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness)),
        calc(var(--bl-x) + var(--hero-line-thickness)) calc(var(--bl-y) - var(--hero-line-thickness)),
        calc(var(--br2-x) - var(--hero-line-thickness)) calc(var(--br2-y) - var(--hero-line-thickness)),
        calc(var(--br-x) - 0.7cqw) calc(var(--br-y) + 0.1cqw),
        calc(var(--tr-x) - 0.2cqw) calc(var(--tr-y) + var(--hero-line-thickness)),
        calc(var(--tl2-x) + var(--hero-line-thickness)) calc(var(--tl2-y) + var(--hero-line-thickness)),
        calc(var(--tl-x) + var(--hero-line-thickness)) calc(var(--tl-y) + var(--hero-line-thickness))
    );
    
}


/* ===== 4. TEXT (Všechny fonty v cqw = nikdy neujedou) ===== */
.hero-text-container {
    position: absolute;
    inset: 0; /* Vyplní celý 1100x330 prostor */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
    pointer-events: auto;
}

.hero-text h1 {
    font-size: 8.4cqw; /* Místo px použijeme cqw */
    font-family: 'Teko', sans-serif;
    margin: 0;
    color: #000;
    line-height: 0.9;
    left: 50%;          /* Vycentrování na střed */
    transform: translateX(-1.4%) translateY(08%);
    letter-spacing: 0.1cqw;
    pointer-events: none;
}

.hero-text h2 {
    font-size: 3.8cqw;
    font-family: 'Teko', sans-serif;
    color: #ff8010;
    margin: 0.5cqw 0;
    pointer-events: none;
    transform: translateX(-96%) translateY(-2%);
}

.hero-text h3 {
    font-size: 3.2cqw;
    font-family: 'Orbitron', sans-serif;
    color: #ff8010;
    margin-top: 1cqw;
    white-space: initial;
    transform: translateX(-27.4%) translateY(80%);
    text-shadow: 0.08cqw 0.08cqw 0.0cqw rgba(0,0,0,6);
}

.hero-text h4 {
    font-size: 3.2cqw;
    font-family: 'Orbitron', sans-serif;
    color: #ff8010;
    margin-top: 1cqw;
    white-space: initial;
    text-shadow: 0.08cqw 0.09cqw 0.0cqw rgba(0,0,0,6);
    transform: translateX(-43%) translateY(0%);
}

.hero-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100cqw;
    height: auto;
    text-align: center;
    z-index: 10;
    pointer-events: auto;
}





.hero-wrapper {
    position: relative;
    width: 95cqw;       /* pevná šířka v cqw */
    height: 40cqw;      /* pevná výška v cqw */
    margin: 0 auto;
    pointer-events: none; /* text může mít pointer-events: auto */
}


header::after {
    content: "";
    position: absolute;
    bottom: -5cqw;
    left: 0;
    width: 100%;
    height: 4cqw;
    box-shadow: 0 -2cqw 2cqw rgb(0, 0, 0, 0.8);
    pointer-events: none;
}

.divider-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 16cqw; /* Výška je fixní v jednotkách containeru */
    
    /* ZÁKLAD PRO CENTROVÁNÍ - tohle ti tam chybělo */
    display: flex;
    align-items: center;     /* Vertikální střed */
    justify-content: center;  /* Horizontální střed */

    /* SKLO */
    background: white;
    backdrop-filter: blur(0.1cqw);
    -webkit-backdrop-filter: blur(0.7cqw);

    /* SVĚTELNÁ HRANA */
    border-bottom: 0.1cqw solid rgba(255, 255, 255, 0.25);

    z-index: 30;
    pointer-events: none;
}


.main-top-cta {

    margin: 0; 
    padding: 0 10px; 
    
    text-align: center;
    font-size: clamp(0.5vw, 23px, 3.8vw);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #000000;
    font-family: 'Teko';
    white-space: pre-line;
    
    position: relative;
    z-index: 9999;
    transform: translateY(-16%);
    pointer-events: auto;
    cursor: text;
    border: none;
}
.divider-line-shadow-top {
    position: absolute;
    left: 0;
    top: -3CQW;
    width: 100%;       /* překrývá celý header */
    height: 3cqw;      /* výška divider line */
    pointer-events: none;
    z-index: 50;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.5) 0%,   /* nahoře tmavší */
        rgba(0,0,0,0.15) 30%,
        rgba(0,0,0,0.0) 45%,
        rgba(0,0,0,0.0) 100%   /* směrem dolů mizí */
    );

    /* maska, aby mizel směrem dolů stejně jako obdélníky */
     -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(
        to right,
        transparent 0%, 
        transparent 3%,
        black 8%, 
        black 90%, 
        transparent 96%,
        transparent 100%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}
.divider-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;  /* ven pod linku */
    width: 100%;
    height: 4cqw;
    background: transparent;
    box-shadow: 0 0.7cqw 0.6cqw 0cqw rgba(0, 0, 0, 0.2);   /* stín ze spodní strany */
    pointer-events: none;
    z-index: 29;
}

.price-main .main {
  display: flex;
  gap: 0cqw;        
  box-sizing: border-box;
  width: 100%;
}




html {
  scrollbar-gutter: stable;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ff8010 #0c1e2a; /* thumb / track */
}


::-webkit-scrollbar {
  width: 12px;
}


::-webkit-scrollbar-track {
  background: #0c1e2a;
}
html {
  background: #000a16; /* barva gutteru */
  scrollbar-gutter: stable;
}

::-webkit-scrollbar-thumb {
  background: #ff8010;
  border-radius: 10px;
}

.map-large img {
    width: 101%;
    height: auto;
    display: block;
    z-index: 2;
}

.map-large .close-map {
    position: absolute;
    top: 0.8cqw;
    right: 1cqw;
    font-size: 2cqw;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10001;       
    padding: 0.2cqw 0.4em;
    border-radius: 0.4cqw;
    transition: color 0.4s ease, transform 0.3s ease;
}

.close-map:hover {
    background: rgba(0,0,0,1);
    transform: scale(1.1);
}

.map-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}













.ratio-a4 {
    aspect-ratio: 148 / 210;
}

.ratio-wide {
    aspect-ratio: 12 / 8;
}













#loader-wrapper {
    position: fixed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     z-index: 1000000;
     transition: opacity 1.05s ease, visibility 1.05s;

}



#loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}






dotlottie-player{
transform: translateX(40px);
}


body.loading {
overflow: hidden;
}


dotlottie-player{
transform: translateX(40px);
}


.header-side-shadow {
    position: absolute;
    top: 0;
    width: 3cqw;  
    pointer-events: none;
    z-index: 98;
}







.header-side-shadow-left2{
    position: absolute;
    left: 0%;   
    top: 0;
    width: 1.65%;   
    height: 100%;      
    pointer-events: none;
    z-index: 998;

   background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(0,0,0,0.0) 40%
    );
}

.header-side-shadow-right2{
    position: absolute;
    right: 0%;   
    top: 0;
    width: 2.35%;   
    height: 100%;      
    pointer-events: none;
    z-index: 998;

   background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(0,0,0,0.0) 40%
    );
}



.frames-background-2 {
    box-sizing: border-box;
    position: absolute;
    top: -9cqw;        /* odsazení pod navbar */
    left: 50%;
    transform: translateX(-50%);
    width: 88.8cqw;
    height: 100cqw;
 
    z-index: 3;
    pointer-events: none;
}


.frames-background-2 {
  position: absolute;
  top: -9CQW;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 280cqw;

  border-bottom: none;
  z-index: 1;
  pointer-events: none;
}




.frames-background-2 {
  position: relative;
  top: 0cqw;
  left: 50%;
    box-shadow: 
    1.4cqw 0 2cqw rgba(0, 0, 0, 0.3),
   -1.4cqw 0 2cqw rgba(0, 0, 0, 0.3);

  transform: translateX(-50%);

  width: 100%;
  height: 70cqw;


  background: 
  linear-gradient(180deg, 
    white 92%, 
    rgba(0, 0, 0, 0.59) 92%,
    rgba(0, 0, 0, 0.3) 93%,
    rgba(0, 0, 0, 0.3) 100%,
    rgba(0, 0, 0, 0) 100%
  );
  

  mask-image: linear-gradient(90deg, 
    transparent 1.65%, 
    black 1.65%, 
    black 97.65%, 
    transparent 97.65%
  ) !important;
  -webkit-mask-image: linear-gradient(90deg, 
  transparent 1.65%, 
    black 1.65%, 
    black 97.65%, 
    transparent 97.65%
  );

      z-index: 10;
  padding-bottom: 0px;

  z-index: 1;
  pointer-events: none;
  overflow: visible;
}




.frames-ba.frames-background-2::after {
  content: "";
  position: absolute;
  inset: 0;

  box-shadow:
    inset 0 0 40px rgba(255,255,255,0.03),
    0 0 60px rgba(0, 200, 255, 0.04);

  pointer-events: none;
}


.price-background {
    width: 100vw;
    z-index: 5; 
    overflow: visible;
}


.main {
  position: relative;
  z-index: 2; 
  display: flex;
  flex-direction: column;
  gap: 4cqw; 

  align-items: center;
  top: 20vh;

  height: auto;
  left: 50%;
  transform: translateX(-50%);
}

.body {
    overflow: visible;

}

















@media (max-width: 768px) and (pointer: coarse){



.header-side-left,
.header-side-right {
    display: none !important;
}



  header {
    height: 46cqw;
}

.header-side-left,
.header-side-right{
    display: none !important;
}







.header-bg-overlay {
    height: 200px;
}





.header-side-shadow {
    display: none;
}


.info-divider {
    display: none;
}


.hero-text-overlay {
    position: relative !important;
    display: block !important;
    width: 94% !important;
    min-height: 105cqw !important;
    background: white !important;
    clip-path: none !important;
    z-index: 20 !important;
    justify-content: center;
    left: 0px;
    top: 0;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.232);
}


.none  {
      position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 106cqw; /* Výška je fixní v jednotkách containeru */
    
    /* ZÁKLAD PRO CENTROVÁNÍ - tohle ti tam chybělo */
    display: flex;
    align-items: center;     /* Vertikální střed */
    justify-content: center;  /* Horizontální střed */

    border-bottom: 0.1cqw solid rgba(255, 255, 255, 0.25);

    z-index: 30;
    pointer-events: none;
}
.none {
    background: 
        /* A. Jemná mikro-textura (diagonální proužky evokující broušené sklo / high-tech materiál) */
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.005) 0px,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 6px
        ),
        /* B. Dynamický světelný akcent z levého horního rohu (jemný odlesk) */
        radial-gradient(
            circle at 10% 0%, 
            rgba(255, 255, 255, 0.08) 0%, 
            transparent 60%
        ),
        /* C. Dynamický tmavší stín vpravo dole pro hloubku */
        radial-gradient(
            circle at 90% 100%, 
            rgba(0, 0, 0, 0.1) 0%, 
            transparent 60%
        ),
        /* D. Základní barevný tón (temnější, neutrální sklo) */
        rgba(15, 15, 20, 0.15);


    backdrop-filter: blur(0px) saturate(85%) contrast(110%);


    margin-top: -0px; /* Přitáhne kontejner nahoru a schová mezeru */
}


.hero-text-overlay ::after,
.hero-text-overlay::before {
     display: none;
}

header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
}













.navbar-bg { 
    clip-path: polygon(
        0 0,
        100% 0,
        100% 150px,
        337px 150px,
        308px 150px,
        232px 150px,
        182px 150px,
        0 150px
    );
}


.navbar-border {
    height: 270px;         /* výška lišty */
}



.navbar-border-line{
    clip-path: polygon(
        /* horní linie polygonu */
        0 150px,
        182px 150px,
        232px 150px,
        308px 150px,
        337px 150px,
        100% 150px,

        /* spodní linie polygonu + tloušťka */
        100% calc(150px + var(--line-thickness)),
        337px calc(150px + var(--line-thickness)),
        308px calc(150px + var(--line-thickness)),
        232px calc(150px + var(--line-thickness)),
        182px calc(150px + var(--line-thickness)),
        0 calc(150px + var(--line-thickness))
    ) !important;
    z-index: 200;
}



.navbar-wrapper {
   height:270px !important;
   position: absolute;
}

.logo-crop {
    height: 120px;
    left: -18px;
    top:  -58px
}
.divider-line {
        background: white;        height: 32cqw;

}
.logo-crop img {
    max-height: 170px;
}

.typed-text {
    font-size: 44px;
}

.typed-wrapper {
    top: -128px;
    left: -30px;
}

.menu-highlight {
    left: -28px;
}




.menu-highlight {
    width: 120%;
    height: 105%;
    left: -32px;
    top: 27px;
    border: 3px solid #000000; 

}

.menu-parallax-wrapper {
    bottom: 0px;
    left: 18px;
}


.menu-separator {
    transform: translateY(-68%); 
    right: 480px;
    height: 200px;
    display: none;
}


.price-background {
  position: relative;
  margin: 0;
  margin-top: 0;
  padding: 0;
  overflow: visible;
  padding-top: 90px;
  top: 0;
  margin-top: 0;
  transform: none;
  padding-bottom: 0px;
}

.menu {
    gap: 36px;
    top: 32px;
    right: -2px;
}


.menu a {
    font-size: 48px !important;
    padding: 8px 4px;
    text-shadow: none;
}


.menu-parallax-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
    bottom: 58px;
    left: 40px;
    width: 27%;
    justify-content: left;
}


.typed-text {
    font-size: 34px;
    color: #ffffff;
}

.search-icon {
display: none;
}



.cursor {
display: none;
}

.text-line {
display: none;
}

.typed-hover-group {
    left: 170px;
    bottom: 40px; 
}

.navbar-bg {
    background: linear-gradient(to top, rgba(0, 17, 31, 0.95) 0%, rgba(0, 17, 31, 0.72) 100%);
}


.navbar-border-line {
    background: #000000;
}


.header-bg-overlay {
    height: 200px;
}


.info-strip {
    top: 14px;
    left: 50%;
    width: 94cqw;
     height: 13.4cqw;
    padding: 0 2cqw;
    font-size: 11cqw;
    padding-top: 1cqw;
    gap: 2cqw;
          background: linear-gradient(
        90deg,
          rgba(0, 20, 33, 0.6) 0%,
        rgba(0, 90, 87, 0.3) 100%
    );
}

.hero-bottom-strip{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8cqw; /* výšku si doladíš */
    
    background: rgba(255,120,0,0.9); /* oranžová */
    
    z-index: 1;
}






.logo-crop img {
        content: url("images/logo.png");
}

:root{
    --line-thickness: 8px;   /* ← TADY měníš tloušťku čáry */
}

.price-main {
  height: auto;
  top: 200px;
  overflow: visible;
  z-index: 2;
  position: absolute;
}












.main {
 top: 20.4cqw;

  padding-top: 0px;
  padding-bottom: 0px;
  height: auto;
  min-height: auto;
  position: relative;

  overflow: visible;
  width: 90vw;
}
.price-main .main {
  display: flex;
  gap: 0cqw;        
  box-sizing: border-box;
  width: 90%;
}





:root {
  --navbar-height: 270px;
}

.frames-background-2 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
    height: auto;
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 250, 241) 100%);

    top: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 0;


  
 mask-image: none !important;
  -webkit-mask-image: none !important;
  padding-bottom: 24cqw;

}


:root {
  --header-height: clamp(50cqw, 200px, 260px);
}


.main-bg {
    position: absolute;
    top: calc(var(--header-height) * -1.73 + 5vh); 
    left: 0;
    width: 100vw;
    height: 110%;
    object-fit: cover;
    z-index: -2;
    transform: translateY(0);
    height: 142%;
    display: none;
}
.info-left {
    transform: translateY(-1.4%) translateX(38%) !important;

                 text-shadow: -0.4px -0.4px 6px rgba(0,0,0,0.4),
     1px 1px 12px rgba(0,0,0,0.7);
}
.main-bg2 {   
    will-change: transform;
    pointer-events: none;
    backface-visibility: hidden; 
}

.main-bg2 {
    position: absolute;
    top: calc(580px + 12vh - 16vw) ;
    left: 0;
    width: 100%;
    height: 42%;
    object-fit: cover;
    z-index: -2;
    display: inline-block;
}

.price-main {
  top: var(--header-height);
  overflow: hidden;
  z-index: 2;
  position: absolute;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 0;
}



.header-bg-overlay {
    height: 135cqw;
    width: 110%;
     background: 
        /* 1. MĚDĚNÁ ZÁŘE (Dole): Oživí to mosazné a měděné nářadí na fotce */
        radial-gradient(circle at 90% 105%, rgba(255, 119, 0, 0.05) 0%, transparent 65%),

        /* 2. KORPORÁTNÍ LED (Nahoře): Technický, čistý cyan/petrolejový odlesk zleva */
        radial-gradient(circle at 10% 5%, rgba(0, 142, 189, 0.055) 0%, transparent 65%),

        /* 3. FILMOVÁ VIGNETA: Ztmaví rohy a vtáhne oko uživatele do středu fotky */
        radial-gradient(ellipse at center, transparent 40%, rgba(2, 6, 10, 0.17) 100%),

        /* 4. HLAVNÍ TĚLO: Tmavý vršek pro čitelný text, čirý nad nářadím, ostrá tma úplně dole */
        linear-gradient(
            to bottom,
            rgba(7, 22, 33, 0.6) 0%,   /* Luxusní tmavá s nádechem petroleje pro text */
            rgba(4, 12, 18, 0.2) 40%,   /* Střed fotky lehce prokoukne */
            rgba(0, 0, 0, 0.1) 68%,     /* Tady je nářadí - necháme ho maximálně viditelné! */
            rgba(0, 0, 0, 0.55) 100%    /* Ostré ztmavení na spodní hraně pro napojení další sekce */
        );
}


header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: var(--header-height);
         background:
      none;
           background:
      transparent;
}


header::before {
    content: "";
    position: fixed; 
    left: 0;
    top: 0;    
    width: 100vw;  
    
   
    height: var(--header-height);   
    
    background-image: url("images/pozadi6.jpg");
    background-size: 100vw auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    
    z-index: -10;
    pointer-events: none;
}


.main-bg-overlay {
    position: absolute;
    top: 0px;
       height: 440vh;
       background:  rgba(0, 13, 20, 0.33);
    z-index: -1;
}




}












.header{
flex-shrink: 0

}




main {
  flex: 1; 

}




.price-background {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}


.frames-background-2,
.price-background {

    pointer-events: none;
    z-index: 1;

}

footer {
  flex-shrink: 0;
}


footer {
  width: 100vw;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  z-index: 10;
  bottom: 0;
}
footer {
  padding-top: 40px;
  margin-bottom: 0;
  bottom: 0;
}

.footer-top {
  background: rgba(20, 30, 40, 0.95); 
  color: #ddfaff;
  padding: 30px 20px;
  text-align: center;
  font-family: 'Special Elite', cursive;
  height: 80px;
  text-transform: uppercase;
  bottom: 25px;
  padding-left: 14cqw;


}
.footer-bottom {
  background: #e7e7e7;
  color: #000000;
  padding: 15px;
  text-align: center;
  font-size: 0.8rem;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 25px;
  bottom: 0;
}

.footer-content p {
  margin: 5px 0;
}








.footer-row {
  display: flex;
  justify-content: center;
  align-items: center;   
    
  padding: 10px 20px;    
  font-size: clamp(1rem, 14px, 0.5vw);
  width: 100vw;
  bottom: 0;
}


.footer-top {
    background: linear-gradient(to top, rgba(0, 15, 33, 0.95) 0%, rgba(0, 25, 34, 0.72)100%);
      backdrop-filter: blur(1px);
  color: #fff;
  gap: 0px; 
  padding-top: 15px;
  font-family: 'Teko';
    font-size: clamp(0.5vw, 18px, 2vw);
  letter-spacing: 1.5px;
  padding-right: 0cqw;

  padding-left: 8.6cqw;
}

.phone-link {
  color: #ff9900;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  border-radius: 2px;
  transition: 0.3s;
  height: 80%;
  padding-left: 6.5px;
  padding-right: 6.5px;
  margin-right: 75px;
  padding-top: 4px;
  margin-bottom: 4px;
}

.phone-link:hover {
  background: #ed8e00;
  color: #000000;
}


.footer-bottom {
  background: #cdcdcd;
  color: #3b3b3b;
  gap: 2.5cqw;
  font-family: 'Audiowide', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(0.2vw, 12px, 1.5vw);
  white-space: nowrap;
  

  
}

.footer-group {
  display: flex;
  flex-direction: row;    /* Na PC řadíme v rámci skupiny vedle sebe */
  align-items: center;
}
  .footer-group:last-child {
    transform: translateX(-2.6%);
  }
.bbt {
    margin-right: 40px;
}
@media (max-width: 768px) and (pointer: coarse) {
  .footer-row {
    font-size: 11px;
    gap: 25px;
    padding-right: 0;

  }

  footer {
  margin-bottom: 0px;
  }
  

  main {
    flex: 1;
    display: block;
    padding-left: calc(2.26vh + 1vw);

  }


 .phone-link {
  color: #ff9900;
  text-decoration: none;
  font-weight: bold;
  border-radius: 2px;
  transition: 0.3s;
  height: 30%;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  margin-bottom: 0px;

  left: calc(46% + 8vw);
  transform: translatex(0%);
  margin-top: 0px;

  top: 50%;
  white-space: nowrap;
 } 


 .footer-bottom {
  display: flex;          /* řadí prvky vedle sebe */
  gap: 20px;    
  background: #cdcdcd;
  color: #3b3b3b;

  font-family: 'Audiowide', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 8px;
  padding-right: 58px !important;


  
 }

 .footer-top {
    height: 56px;
    padding-left: 0;
    padding-top: 12px;


  
 }

 .hide-mobile {
    display: none;
  }


}


@media (max-width: 768px) and (pointer: coarse) {
.footer-top {
    display: flex;
    flex-direction: row;

    justify-content: center; 
    gap: 22px; 
    align-items: flex-start;
    padding: 15px 0 10px 0;
    height: auto;
    width: 100%;
    min-height: 0;
    height: auto;
  }

  .footer-group {
    display: flex;
    flex-direction: column;
    width: auto;
  }

  /* Levá skupina */
  .footer-group:first-child {
    text-align: left;
    align-items: flex-start;
  }

  /* Pravá skupina */
  .footer-group:last-child {
    text-align: center;
    align-items: center;
      transform: none;
  }


  .footer-text {
    font-size: 12px;
    white-space: nowrap;
  }

  .phone-link {
    margin: 0;
    position: static;
    display: block;
    font-size: 12px;
  }
.footer-bottom {
    display: flex !important;
    flex-direction: row !important; /* Vynutíme řádek */
    justify-content: center !important; /* Vše na střed */
    gap: 20px !important; /* Mezera mezi texty - uprav dle potřeby */
    align-items: center !important;
    padding: 10px 5px !important;
    height: auto !important;
    width: 100% !important;
    flex-wrap: nowrap !important; /* KLÍČOVÉ: Zakáže odskočení na druhý řádek */
  }

  .footer-bottom span, 
  .footer-bottom div,
  .bbt {
    white-space: nowrap !important; /* Pojistka: text se nikdy nerozdělí */
    font-size: 9px !important; /* Na mobilu musíme trochu zmenšit písmo, aby se to tam vešlo vedle sebe */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Pokud máš v bottomu nějaké konkrétní třídy jako .bbt, srovnáme je */
  .bbt {
    display: inline-block;
  }

  .hide-mobile { 
  display: none;
  }
}



.footer-text {
    transition: transform 0.4s ease, color 0.3s ease, opacity 0.4s ease;
    display: inline-block;
}
.footer-top:has(.footer-text:hover) .footer-text:not(:hover) {
    opacity: 0.7;
    transform: scale(0.99);
}
/* ta pod kurzorem */
.footer-text:hover {
    opacity: 1;
    transform: scale(1.02);
    color: #ff9900;
}




.activ {
    transition: all 0.9s cubic-bezier(0.3, 1, 0.15, 1);
}


.menu:has(.activ:hover) .activ:not(:hover) {
    opacity: 1;
    transform: scale(0.96);
    color: #ffffff;
}

/* ta pod kurzorem */
.activ:hover {
    opacity: 1;
    transform: scale(1.03);
}
.footer-bottom {
  gap: 12px;
  padding-right: 6px;
  
}




.footer-text, .phone-link {
  background: linear-gradient(
    110deg, 
    rgba(255,255,255,0) 35%, 
    rgba(255,255,255,0.7) 50%, 
    rgba(255,255,255,0) 65%
  );

  color: #ffffff; 

  background-size: 250% auto;
  background-repeat: no-repeat;
  
  /* Klíčové pro viditelnost na všech zařízeních */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  
  display: inline-block;

  background-image: linear-gradient(
    110deg, 
    rgba(255, 153, 0, 0) 35%, 
    rgba(151, 151, 151, 0.9) 50%, 
    rgba(255, 153, 0, 0) 65%
  );

  background-color: #ffffff; 
  font-weight: bold;
}


.footer-text {
  background-image: linear-gradient(
    110deg, 
    rgba(255, 153, 0, 0) 75%, 
    #bce1ff 85%,
    #8bcbff00 95%
  );

  font-weight: bold;
}

.footer-text, .bbt, .main-bottom-cta{
  pointer-events: auto;
  cursor: text;
  z-index: 1000;
}
.phone-link {
  background-image: linear-gradient(
    135deg, 
    #ffbc4f 0%, 
    #e98c00 20%, 
    #ffa41b 40%,
    #ff9900  60%, 
    #db8300 90%,
    #ffa61f 100%
    
  );
  background-color: #ff9900; 
  font-weight: bold;
}






.phone-link:hover {
  background-image: none; 
  background-color: #ed8e00;
  

  -webkit-text-fill-color: #000000 !important; 
  color: #000000 !important;
  
  /* Volitelně: pokud chceš, aby pozadí celého odkazu zoranžovělo */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  
  transition: all 0.4s cubic-bezier(0.3, 1, 0.15, 1);
}

.phone-link,  .glug  {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
}





.logo-crop img {
    /* Přidáno transform-origin pro zmenšování ke středu */
    transform-origin: center center; 
    display: block;
    margin: auto;

    /* Plynulost pro všechno: opacity i transform */
    transition: 
        opacity 0.6s ease, 
        transform 0.8s cubic-bezier(0.3, 1, 0.15, 1),
        filter 0.8s ease;
        

}

/* --- 3. TEXT: Základní stav --- */
.typed-text {
    display: inline-block;
    color: #ffffff;
    /* Transition pro barvu a transform */
    transition: transform 0.8s cubic-bezier(0.3, 1, 0.15, 1);
    
    backface-visibility: hidden;
}

@keyframes shineHeader {
  0% {
    background-position: 110% center;
  }
  100% {
    background-position: -450% center;
  }
}

.footer-top {
  pointer-events: none;
  cursor: auto;
  z-index: 1;
}
.typed-inner:hover .typed-text {
    transform: scale(1.02);
    color: #ffffff;
    background-color: #ffffff;
    

    background-image: linear-gradient(
       130deg, 
       rgba(255, 153, 0, 0) 68%, 
       #84c7ff 76%, 
       rgb(202, 202, 202) 78%,
       #ffffff 82%,
       #00000000 90%
    );
    background-size: 500% auto;
    background-repeat: no-repeat;
    
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    animation: shineHeader 10s infinite linear;
}


.navbar-inner:has(.typed-inner:hover) .logo-crop img {

    transform: scale(0.92); 
}



.logo-crop:hover img {
    animation: sway-logo 1.8s ease-in-out infinite alternate;
    opacity: 1;
}

.navbar-inner:has(.logo-crop:hover) .typed-text {
    transform: scale(0.94);
    color: #ffffff;
}

@keyframes sway-logo {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(2deg) scale(1.08); }
    100% { transform: rotate(-4deg) scale(0.95); }
}





.main-bottom-cta {
    text-align: center;

    margin-bottom: 10cqw;

    padding: 20px 50px;
    font-size: clamp(0.5vw, 23px, 3.8vw);
    font-weight: 400;
    letter-spacing: 1px;
    color: #ffffff;
    font-family: 'Teko';
    transform: translateY(0%);
    background-color: #00141e84;
  background: linear-gradient(90deg, rgba(0, 38, 38, 0.69) 2%, rgba(0, 29, 30, 0.87)  2%, rgba(0, 20, 30, 0.91) 98%, rgba(0, 20, 37, 0.675) 98%);
    width: 100%;

    white-space: pre-line;
    height: 26qw;
    padding-bottom: 50px;
    border: 0.2cqw solid rgb(22, 44, 56);
    border-left: none;
    border-right: none;
}

.main-bottom-cta {
    position: relative;
    z-index: 9999;
       container-type: inline-size !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    margin: 0 !important;
    top: 0 !important;
    
    container-type: inline-size !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    margin: 0 !important;
    top: 0 !important;
    z-index: 5;

    width: 100% !important;
    left: 0 !important;
    transform: 0 !important;
    min-width: 100vw !important;
}








@media (max-width: 768px) and (pointer: coarse){

.glugo {
    text-align: center;
    margin: 40px auto 0;
    padding: 20px 10px;
}
.glugo {
    position: relative;
    z-index: 9999;
}


.glugo {
    position: absolute;
    z-index: 9999;
    bottom: calc(145px - 2vh);
    width: 120px;
    height: auto;
    display: inline-block;
}

        .glug {
    position: relative;
    left: 40px;
    width: 110px;
 display: none;   height: auto;
}
        .glugos {
    position: absolute;
    left: 40px;
    width: 110px;
 display: none;   height: auto;
}
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ff8010 #0c1e2a; /* thumb / track */
}
/* Cílíme na telefony (typicky do 768px) */
@media (max-width: 768px) and (pointer: coarse){
    html.lock-scroll {
        /* Zakáže scroll a skryje lištu */
        overflow: hidden !important;
        /* Zabrání "tahání" stránky (bounce efekt na iOS) */
        height: 100%;
        position: fixed;
        width: 100%;
    }
}
.main-top-cta {
    text-align: center;
    margin: 40px auto 0;
    padding: 20px 10px;
   font-size: clamp(15px, 4.8vw, 28px);
       font-weight: 400;
    letter-spacing: 0.3px;
    color: #000000;;
    font-family: 'Teko';

    white-space: pre-line;
    top: 50%;
    transform: translateY(-78%);

    

}
.glugo {
    position: absolute;
    z-index: 9999;
    bottom: calc(50% + 40px);
    transform: translateY(50%);
    width: 140px;
    height: auto;
    display: inline-block;
    margin-top: 0;
        border-radius: 4px;
         padding: 0;
}
.main-bottom-cta {
    padding: 40px 34px;
    font-weight: 300;
    letter-spacing: 0.9px;
    color: #ffffff;
    font-family: 'Teko';
    text-align: center;

    font-size: clamp(18px, 4vw, 38px);


}
.glug {
 display: none;
}
.main-bottom-cta {
    position: relative;
    z-index: 9999;
    bottom: 0px;
    z-index: 9;
    padding-bottom: 70px;
  background: linear-gradient(90deg, #003f2dc6  0%, #002433cf 50%, rgba(0, 23, 41, 0.958) 100%);
    margin-bottom: 0;
         text-shadow: -0.4px -0.4px 6px rgba(0,0,0,0.2),
     1px 1px 8px rgba(0,0,0,0.7);
       font-size: clamp(0.5vw, 22px, 6.4vw) !important;
           border-bottom: none;
                           border-radius: 4px;
}




.main-bottom-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 105%;
    height: 5px; /* Tloušťka linky */
    
    /* GRADIENT LINKY */
    background: linear-gradient(to right, 
        #ff5722 0%,                /* Začátek oranžové s jemným vnitřním gradientem */
        #ff9800 50%,               /* Jemný přechod uprostřed (trochu tmavší oranžová) */
        #ff5722 100%               /* Konec oranžové */
    ) !important;
    
    z-index: 10;
}

.main-bottom-cta::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 105%;
       height: 3px; 
    
    /* GRADIENT LINKY */
    background: linear-gradient(to right, 
        #ff5722 0%,                /* Začátek oranžové s jemným vnitřním gradientem */
        #ff9800 50%,               /* Jemný přechod uprostřed (trochu tmavší oranžová) */
        #ff5722 100%               /* Konec oranžové */
    ) !important;
    
    z-index: 10;
}



.info-strip.loaded {
    top: 50%;

}


}

.accent {
  font-weight: 400; 
  color: rgb(236, 181, 93);     
  display: inline-block;
}

.accent5 {
  font-weight: 600; 
  color: rgb(214, 132, 0);     
  display: inline-block;
}

.accent2 {
  font-weight: 400; 
  color: rgb(236, 181, 93);    
  display: inline-block;
}


.accent3 {
  font-weight: 400; 
  color: rgb(0, 204, 255);         
  display: inline-block;
}


.footer-text, .bbt, .main-bottom-cta{
  pointer-events: auto;
  cursor: text;
  z-index: 1000;
}


.main-bottom-cta{
  pointer-events: auto;
  cursor: auto;
  z-index: 1000;

  
}.phone-link,  .glug  {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
}





/* --- 1. ŘÁDEK: TABULKY --- */
.tables-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 4cqw; /* Mezera mezi tabulkami */
  width: 85%; /* Uprav podle potřeby */
  margin: 0 auto;
  z-index: 1;
}

/* Tabulky samotné */
.contact-box, .contact-boxo {
  position: relative;
  flex: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



/* --- ODDĚLOVAČ --- */
.section-divider {
    position: relative;
    bottom: 0cqw; 
    width: 76%;
    height: 0.46cqw; 
  
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(58, 123, 213, 0.4); 
    pointer-events: none;

    z-index: 100;
    width: 80%;
    background: linear-gradient(90deg, #ff9233 0%, #ff9131 16%, #cb5f00 100%);
    margin: 4cqw auto;
    margin-top: 7cqw;
    transform: translateY(-3cqw);
   
}

/* --- 2. ŘÁDEK: PLAKÁTY --- */
.posters-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6cqw; /* Mezera mezi plakáty */
  width: 90%;
  margin: 0 auto 8cqw auto;
  z-index: 1000;
}

/* Společný základ převzatý z map-wrapper (skleněný design) */
.poster-box, .poster-box2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.2cqw;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 102, 228, 0.11), transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.15), inset 0 0 0 0.08cqw rgba(255,255,255,0.4);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1); 
  isolation: isolate;
  cursor: pointer;
  pointer-events: auto;
}

/* Dynamika hover efektu (stejná jako u mapy) */
.poster-box:hover, .poster-box2:hover {
  transform: translateY(-0.3cqw) scale(1.01);
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.24), inset 0 0 0 0.08cqw rgba(255,255,255,0.4), 0 0 1cqw rgba(255, 128, 16, 0.1);
}

/* Záře pod plakátem */
.poster-box::before, .poster-box2::before {
  content: "";
  position: absolute;
  width: 120%; height: 120%;
  top: 50%; left: 50%;
  transform: translate(-50%, -40%);
  background: radial-gradient(ellipse at center, rgba(0, 120, 255, 0.95) 0%, rgba(0, 120, 255, 0.58) 30%, rgba(0, 120, 255, 0.18) 55%, transparent 75%);
  filter: blur(3cqw);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nastavení logických proporcí boxů vedle sebe */
.poster-box {
  width: 35%; 
  aspect-ratio: 1 / 1.414; /* Standardní A4 na výšku */
}

.poster-box2 {
  width: 45%; 
  aspect-ratio: 16 / 9; /* Na šířku */
}

/* Obrázky uvnitř boxů */
.poster-box img, .poster-box2 img {
  width: 97%;
  height: 97%;
  object-fit: cover;
  border-radius: 0.8cqw;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease;
  z-index: 2;
}

.poster-box:hover img, .poster-box2:hover img {
  transform: scale(1.007);
  filter: brightness(0.9);
}

/* Lupa */
.map-search-icon {
  position: absolute;
  bottom: 1cqw;
  right: 1.2cqw;
  width: 1.8cqw;
  height: 1.8cqw;
  background: url('images/lupa.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 1003;
  opacity: 0.6;
  transition: transform 0.6s cubic-bezier(0.3, 1, 0.15, 1), opacity 0.6s ease;
}

.map-search-icon2 {
  position: absolute;
  bottom: 2.3cqw;
  right: 0.9cqw;
  width: 1.8cqw;
  height: 1.8cqw;
  background: url('images/lupa.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 1003;
  opacity: 0.6;
  transition: transform 0.6s cubic-bezier(0.3, 1, 0.15, 1), opacity 0.6s ease;
}

.poster-box:hover .map-search-icon, .poster-box2:hover .map-search-icon, .poster-box:hover .map-search-icon2, .poster-box2:hover .map-search-icon2  {
  transform: scale(1.2);
  opacity: 1;
}

/* Responzivita mobil (Pokud na mobilu nemají být vedle sebe, zrušíme flex-direction) */
@media (max-width: 768px) and (pointer: coarse){
  .tables-wrapper, .posters-wrapper {
    flex-direction: column;
    width: 95%;
  }
  .poster-box, .poster-box2 {
    width: 80%;
    margin-bottom: 4cqw;
  }
}

/* Základní obal pro každý řádek */
.row-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 3cqw;
  margin-bottom: 4cqw;
  width: 100%;
}

/* Sjednocení šířky tabulek */
.contact-box, .contact-boxo {
  flex: 0 0 40%;          /* Každá tabulka zabere 40 % šířky */
  position: relative;     /* Důležité pro umístění surface */
  padding: 2cqw;
  background-color: #ffffff;
  border-radius: 1.5cqw;

}

/* Profi Korporát 2035 - Spatial / Premium UI */
.contact-box, .contact-boxo {
  flex: 0 0 40%;
  position: relative;
  
  /* Sjednocení paddingu pro čistší kód */
  padding: 3cqw 3.5cqw !important;

  /* 1. Materiál: Přirozenější světlo z levého horního rohu (135deg místo 90deg) */
  background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 30%, #f2f4f7 100%) !important;
  
  /* 2. Hrany: Fyzická hranice, která simuluje zkosený okraj (bevel) */
  border-radius: 1.5cqw;
  border: 1px solid rgba(255, 255, 255, 0.9);

  /* 3. Vrstvené stíny: Tajemství realistického 3D */
  box-shadow: 
 
    -8px -8px 20px rgba(255, 255, 255, 1),
    
    /* B) Ostrý kontaktní stín blízko objektu */
    5px 5px 15px rgba(0, 0, 0, 0.1),
    
    /* C) Hluboký, měkký stín pro pocit vznášení v prostoru */
    10px 15px 30px rgba(0, 0, 0, 0.08),
    
    /* D) Vnitřní odlesky (inset), které dodávají "desce" tloušťku a masivnost */
    inset 1px 1px 2px rgba(255, 255, 255, 1),
    inset -1px -1px 3px rgba(0, 0, 0, 0.02) !important;

  /* 4. Moderní plynulost: Příprava na interakci a jemný skleněný efekt */
  backdrop-filter: blur(12px); /* Super detail, pokud by to v budoucnu přesahovalo přes jiný prvek */
  transform: translateZ(0); /* Hardwarová akcelerace hran */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 

  pointer-events: none !important;
}



/* Povinné pro surface, aby se zobrazoval správně v kontejneru */
.category {
  position: relative;
  padding-left: 3cqw;
}


/* Aby obsah tabulky nebyl pod surface */
.content {
  position: relative;
  z-index: 1;
}



/* Plakáty (druhý řádek) - ponecháváme tvoje map-wrapper styly */
.map-wrapper {
  flex: 0 0 35%;          /* Šířka plakátů */
  position: relative;
}

.label {
    font-family: 'Teko';
    font-weight: 600;
    font-size: 30px;
    pointer-events: auto;
    cursor: text;
}


.value {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 20px;
    padding-left: 0.6cqw;
        pointer-events: auto;
    cursor: text;
} 


.time-value {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 20px;
    padding-left: 0.6cqw;
        pointer-events: auto;
    cursor: text;
} 

.hours-title {
    font-family: 'Teko';
    font-weight: 600;
    font-size: 30px;
    pointer-events: auto;
    cursor: text;
    color: #ff8010;
    transform: translateY(-1.1cqw);
}


.hours-group {

    transform: translateY(-2.04cqw);

}

.hours-group2 {

    transform: translateY(-0.66cqw);

}
.day-label {
    font-family: 'Teko';
    font-weight: 600;
    font-size: 30px;
    pointer-events: auto;
    cursor: text;
    color: #000000;
}/* Obal pro druhý řádek (Plakáty) */
/* V HTML použij místo <div class="row-wrapper"> raději <div class="posters-wrapper">, ať se nám to neplete s tabulkami */
.posters-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; /* Vertikální zarovnání na střed (kdyby výšky nebyly na pixel stejné) */
  gap: 4cqw;
  width: 95%; /* Můžeš upravit podle toho, jak moc do krajů to chceš */
  margin: 0 auto;
}

/* Plakát 1: Na výšku (A4 = cca 1:1.414) */
.poster-box {
  flex: 0 0 26%;
  aspect-ratio: 1 / 1.414;
  position: relative;
}


.poster-box2 {
  flex: 0 0 54%;
  aspect-ratio: 12 / 8; 
  position: relative;
}

.poster-box2 img {
  width: 98%;
  height: 97%;
  object-fit: cover;
  border-radius: 0.8cqw;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease;
  z-index: 2;
  position: absolute;
  top: 1.5%;
  left: 1%;
}

.poster-box img{
  width: 97%;
  height: 97%;
  object-fit: cover;
  border-radius: 0.8cqw;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease;
  z-index: 2;
  position: absolute;
  top: 1.5%;
  left: 1.5%;
}


/* Dynamické poměry stran pro otevřený modal */
.map-large.ratio-a4 {
    aspect-ratio: 1 / 1.414;
    height: 85vh; /* Omezíme výšku, aby se plakát vešel na obrazovku */
    width: auto;
    max-width: 95vw;
}

.map-large.ratio-wide {
    aspect-ratio: 12 / 8;
    width: 85vw; /* Omezíme šířku */
    height: auto;
    max-height: 85vh;
}

/* Ujistíme se, že obrázek v modalu vždy vyplní svůj obal */
.map-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.8cqw; /* Zachování oblých rohů i v modalu */
}/* Základní stav modalu - schovaný */
.map-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(10px);
    background:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 6000 6000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='400' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
        radial-gradient(circle at center,
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.4)
        ),

         linear-gradient(
            142deg,
           #00412aea 0%,  
    
           #001434 100%  
        );




    backdrop-filter: blur(3px);
     background-blend-mode: multiply; 
}

/* Aktivní stav modalu */
.map-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/* Kontejner pro obrázek v modalu */
.map-large {
    position: relative;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.map-overlay.active .map-large {
    transform: scale(1);
}

/* Poměry stran */
.map-large.ratio-a4 { aspect-ratio: 1 / 1.414; height: 85vh; }
.map-large.ratio-wide { aspect-ratio: 12 / 8; max-width: 75vw; max-height: 85vh; }

.map-large img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}/* Kontejner pro široký plakát */
.map-large.ratio-wide {
    aspect-ratio: 12 / 8;
    width: auto;        /* Zvětšíme šířku na 90% okna */
    height: 90cqw;       /* Výška se dopočítá sama */
    max-height: 90vh;   /* Ale nesmí přetéct výšku displeje */
    max-width: 1200px;  /* Aby to na obřích monitorech nebylo přes celou zeď */
}


.map-large.ratio-a4 {
    aspect-ratio: 1 / 1.414;
    height: 90vh;       /* Priorita u výšky */
    width: auto;        /* Šířka se dopočítá */
    max-width: 95vw;    /* Nesmí přetéct do stran na mobilu */
}

/* Klíčová oprava obrázku uvnitř modalu */
.map-large img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    /* Změna z cover na contain zajistí, že uvidíš 100% obrázku, 
       i kdyby kontejner neseděl na pixel přesně */
    object-fit: contain; 
    background: transparent; /* Pokud by se někde objevil pixel mezery, bude průhledný */
}

/* Pokud chceš zachovat "cover" efekt bez ořezu, 
   musíme zajistit, aby kontejner nikdy nebyl vyšší než poměr stran dovolí */

   /* --- MODAL (MAP-OVERLAY) ZÁKLAD --- */
.map-overlay {
    position: fixed;
    inset: 0;
   
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000; /* Nad vším */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
   
    isolation: isolate; /* Pro správné fungování blur */
}

/* Aktivní stav modalu */
.map-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- KONTEJNER PRO OBRÁZEK (MAP-LARGE) --- */
/* Nyní je jen průhledným obalem pro pozici a animaci */
.map-large {
    position: relative;
    transform: scale(0.9) perspective(120cqw) rotateX(5deg); /* Počáteční 3D pozice */
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Box-shadow a border-radius zde ODSTRANĚNY */
}

/* Aktivní stav animace */
.map-overlay.active .map-large {
    transform: scale(1) perspective(120cqw) rotateX(0deg);
}

/* --- DEFINICE POMĚRŮ STRAN KONTEJNERU --- */
/* Tyto třídy přidává JS. Zajišťují, že obal má správný poměr */
.map-large.ratio-a4 {
    aspect-ratio: 1 / 1.414;
    height: 90vh; /* Priorita u výšky */
    width: auto;
}

.map-large.ratio-wide {
    aspect-ratio: 12 / 8;
    width: auto; /* Priorita u šířky */
    height: 90cqw;
    max-height: 90vh;
    max-width: 1300px; /* Aby to na obřích monitorech nebylo moc velké */
}

/* --- SAMOTNÝ OBRÁZEK V MODALU (KLÍČOVÁ ÚPRAVA) --- */
/* Přesouváme vizuální efekty z rodiče na obrázek */
.map-large img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
    

    border-radius: 1.5cqw; 
    
    /* 2. SKLENĚNÝ BORDER (Jemný rámeček uvnitř) */
    /* Použijeme pseudo-element ::after pro dokonalý efekt, 
       nebo jednodušší box-shadow:inset. Zvolíme box-shadow pro spolehlivost. */
    box-shadow: 
        /* Vnější velký stín */
        0 3cqw 8cqw rgba(0,0,0,0.6),
        0 1cqw 2cqw rgba(0,0,0,0.4),
        /* Modrá záře (volitelná, pro styl z úvodu) */
        0 0 2cqw rgba(0, 128, 255, 0.25),
        /* Vnitřní skleněný border (bílý, poloprůhledný) */
        inset 0 0 0 0.1cqw rgba(255, 255, 255, 0);
}

.map-large .close-map {
    background: rgba(47, 47, 47, 0.2);
    backdrop-filter: blur(6px);

    border-radius: 0.6cqw;

   transition:  all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
}

.close-map:hover {
    background: rgba(0, 0, 0, 0.35);
    transform: scale(1.15) rotate(90deg);
}






@media (max-width: 768px) and (pointer: coarse){

    .map-large .close-map {
    font-size: 6cqw;
    padding: 0.6cqw 0.4em;
    border-radius: 1.2cqw;
}

.row-wrapper {
  gap: 8cqw;
  flex-direction: column;
}

.section-divider {
    bottom: 0cqw; 
    width: 76%;
    height: 1.66cqw; 
    width: 80%;
    margin: 8cqw auto;
    margin-top: 15cqw;
    transform: translateY(-7cqw);
   
}

.map-large.ratio-a4 {
    height: 60vh; /* Priorita u výšky */
}

.map-large.ratio-wide {
    width: 90vw;
    height: auto;
}

/* Plakát 1: Na výšku (A4 = cca 1:1.414) */
.poster-box {
  flex: 0 0 26%;
  aspect-ratio: 1 / 1.414;
  position: relative;
  width: 70vw;
  left: 50%;
  transform: translateX(-50%);
    box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.3), inset 0 0 0 0.08cqw rgba(255,255,255,0.4);
}


.poster-box2 {
  flex: 0 0 54%;
  aspect-ratio: 12 / 8; 
  position: relative;
    width: 70vw;
      left: 50%;
  transform: translateX(-50%);
  margin-top: 8cqw;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.3), inset 0 0 0 0.08cqw rgba(255,255,255,0.4);
}



.contact-box, .contact-boxo {
  padding: -8cqw 6cqw;
  background-color: #ffffff;
  border-radius: 4cqw;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4),
      -4px 0px 8px rgba(0,0,0,0.3),
    inset -1px -1px 1px rgba(0,0,0,0.4),
       inset 1px 1px 1px rgba(0,0,0,0.4) !important;
       border: none !important;
}

.label {
    font-size: 24px;
}


.value {
    font-size: 16px;
    padding-left: 0.6cqw;
} 

.hours-title {
    font-size: 24px;
    margin-top: 6cqw;
    margin-bottom: 3.5cqw;
}

.day-label {
    font-size: 24px;
}

.time-value {
    font-size: 16px;
}

/* Sjednocení šířky tabulek */
.contact-boxo {
  padding: 0cqw 8cqw !important;

}

.contact-box {
  padding: 2.4cqw 8cqw !important;

}


.hours-group2 {

  margin-top: 1cqw;
  margin-bottom: 4cqw;

}

.contact-line {
  margin-top: 2.4cqw;
  margin-bottom: 2.4cqw;
}
}



.contact-line,
.hours-group,
.hours-group2 {
  transition: all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
    transform-origin: left center;

}


.contact-box:hover .contact-line {
  transform: scale(0.98);
  opacity: 0.7;
}

/* právě hoverovaný řádek se zvýrazní */
.contact-box .contact-line:hover {
  transform: scale(1.02);
  opacity: 1;
  z-index: 2;
  position: relative;
}


/* ---------- PROVOZNÍ DOBA ---------- */

.contact-boxo:hover .hours-group,
.contact-boxo:hover .hours-group2 {
  transform: scale(0.98) translateY(-7.04cqw);
  opacity: 0.65;
}




.contact-boxo .hours-group:hover {
  transform: translateY(-7.04cqw), scale(1.02);
  opacity: 1;
  z-index: 2;
  position: relative;

}

.contact-boxo .hours-group2:hover {

  transform: translateY(-0.66cqw),  scale(1.02);
  opacity: 1;
  z-index: 2;
  position: relative;

}



.hours-group {
  transform: translateY(-2.04cqw) scale(1);
  transform-origin: left center;
   transition: all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
}

.hours-group2 {
  transform: translateY(-0.66cqw) scale(1);
  transform-origin: left center;
   transition: all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
}


/* když hoveruješ na celý box */
.contact-boxo:hover .hours-group {
  transform: translateY(-2.04cqw) scale(0.98);
  opacity: 0.65;
}

.contact-boxo:hover .hours-group2 {
  transform: translateY(-0.66cqw) scale(0.98);
  opacity: 0.65;
}


/* právě hoverovaný řádek */
.contact-boxo .hours-group:hover {
  transform: translateY(-2.04cqw) scale(1.02);
  opacity: 1;
}

.contact-boxo .hours-group2:hover {
  transform: translateY(-0.66cqw) scale(1.02);
  opacity: 1;
}




/* desktop default */
.menu-toggle,
.mobile-current-page {
  display: none;
}

/* mobil */
@media (max-width: 768px) and (pointer: coarse){

  .menu-parallax-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Úvod tlačítko */
  .mobile-current-page {
    display: flex;
    align-items: center;

    font-size: 48px;

    color: white;
    font-family: 'Teko', sans-serif;
    letter-spacing: 1.5px;
    text-decoration: none;
  }

  /* burger */
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 58px;
    color: white;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 18px;
    z-index: 1000;
  }
  .menu {
    position: absolute;
    top: 100%;
    right: 30px;

    display: none;
    flex-direction: column;
    gap: 12px;

    min-width: 250px;
    padding: 20px;
    padding-right: 16px;

    background: rgba(0, 34, 43, 0.8);
   
    border-radius: 20px;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(30px);

  
    filter: drop-shadow(-6px -6px 8px rgba(0,0,0,0.3));
    box-shadow: 18px 15px 15px rgba(0,0,0,0.7);

    list-style: none;

    
  }

  /* po kliknutí */
  .menu.active {
    display: flex;
  }


  .menu {
  position: absolute;
  top: 100%;
  

  display: flex;
  flex-direction: column;
  gap: 12px;

  min-width: 220px;
  padding: 20px;
  padding-right: 10px;
  list-style: none;

  /* GLASS EFFECT */
  background: rgba(0, 28, 37, 0.79);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);


 
  opacity: 0;
   transform: translateY(-124px) scale(0.4);
  pointer-events: none;
  border-right: none;
    border-bottom: none;


  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px; /* Tloušťka borderu */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.862) 0%, rgba(139, 92, 246, 0.1) 16%, rgba(139, 92, 246, 0.1) 84%, rgba(255, 255, 255, 0.862) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


/* OPEN STATE */
.menu.active {
  opacity: 1;
  transform: translateY(-3px) scale(1);
  pointer-events: auto;
}
  .menu li {
    list-style: none;
  }

  .menu a {
    display: block;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 32px;
    font-family: 'Teko', sans-serif;
    letter-spacing: 1px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: 0.25s;
     transition:
    background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }


  .menu a:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(6px) scale(1.02);
  letter-spacing: 0.5px;
}
}

/* --- GALLERY GRID & STACK EFFECT --- */
.gallery-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  padding-top: 80px;
  padding-bottom: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}

.gallery-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  cursor: pointer;
  perspective: 1000px;
}

.gallery-stack:hover .layer-1 {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.gallery-stack:hover .layer-2 {
  transform: rotate(-8deg) translate(-15px, 5px);
}

.gallery-stack:hover .layer-3 {
  transform: rotate(8deg) translate(15px, 5px);
}

.stack-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: radial-gradient(circle at center, #112a2e 0%, #050d12 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.layer-3 {
  transform: rotate(5deg) translate(10px, 10px);
  z-index: 1;
  opacity: 0.6;
}

.layer-2 {
  transform: rotate(-5deg) translate(-10px, 10px);
  z-index: 2;
  opacity: 0.8;
}

.layer-1 {
  z-index: 3;
  overflow: hidden;
  transform: translate(0, 0);
  border: none !important;
}

.layer-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-stack:hover .layer-1 img {
  transform: scale(1.05);
}

.stack-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,  rgba(0,0,0,0.7) 90%, rgba(0,0,0,0) 90%);
  padding: 30px 20px 20px;
  color: #fff;
}

.stack-overlay h3 {
  margin: 0 0 5px 0;
  font-size: 1.5rem;
  letter-spacing: 0.3px;
  font-weight: 600;
  color: rgb(255, 255, 255); /* Akcentní barva */
font-family: 'Teko', sans-serif;
}

.stack-overlay span {
  font-size: 0.85rem;
  color: #9cc1b7;
}

/* --- MODALS (Kategorie & Lightbox) --- */
.custom-modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 14, 0.95);
  backdrop-filter: blur(10px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;

}

.custom-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content-wrapper {
  background: radial-gradient(circle at top left, #0e2424 0%, #04090c 100%);
  width: 90%;
  max-width: 1000px;
  max-height: 88vh;
  padding: 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
      background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(6px);

    border-radius: 0.8cqw;

   transition:  all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
}



.modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.15) rotate(90deg);
}


.modal-close2 {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
      background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(6px);

    border-radius: 0.8cqw;

   transition:  all 0.6s cubic-bezier(0.3, 1, 0.15, 1);
}



.modal-close2:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.15) rotate(90deg);
}
#modalCategoryTitle {
  color: #fff;
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 300;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 15px;
}

.modal-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.modal-gallery-item {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
}

.modal-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.modal-gallery-item:hover img {
  transform: scale(1.1);
}

/* Lightbox specifika */
.lightbox {
  background: rgba(0, 0, 0, 0.98);


}

#lightboxImage {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  font-size: 2rem;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.lightbox-nav:hover {
  background: rgba(255,255,255,0.2);
}

.lightbox-nav.prev { left: 30px; }
.lightbox-nav.next { right: 30px; }
.lightbox .modal-close { top: 30px; right: 40px; font-size: 3rem; }

/* Responzivita */
@media (max-width: 768px) and (pointer: coarse) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) and (pointer: coarse) {
  .gallery-grid { grid-template-columns: 1fr; }
  .modal-gallery-grid { grid-template-columns: 1fr; }
  .modal-content-wrapper { padding: 20px; width: 95%; }
  .lightbox-nav { padding: 10px 15px; font-size: 1.5rem; }
  .lightbox-nav.prev { left: 10px; }
  .lightbox-nav.next { right: 10px; }
}


/* Oprava mezer a velikosti stacků */
.gallery-grid {
  gap: 100px 60px !important; /* Výrazně větší mezery mezi řádky a sloupci */
  padding: 40px !important;
}


@media (max-width: 768px) and (pointer: coarse){
.gallery-grid {
  gap: 75px 60px !important; /* Výrazně větší mezery mezi řádky a sloupci */
}
}

.gallery-stack {
  width: 90% !important; /* Karta zabere jen 90% místa, zbytek bude mezera */
  margin: 0 auto !important; /* Vycentrování v mřížce */
}

/* Pojistka pro z-index (aby modal byl vždy nahoře) */
.custom-modal {
  z-index: 99999999 !important;
}

/* Sjednocení vybočení stacku na pravou stranu */

/* Základní stav - vrstvy jsou seřazeny pod sebou doprava */
.layer-2 {
  transform: rotate(2deg) translate(6px, 4px); /* Prostřední fotka */
  z-index: 2;
  opacity: 0.8;
}

.layer-3 {
  transform: rotate(3deg) translate(12px, 8px); /* Úplně spodní fotka */
  z-index: 1;
  opacity: 0.6;
}

/* Stav při hoveru - obě se vysunou ještě více doprava */
.gallery-stack:hover .layer-2 {
  transform: rotate(4deg) translate(8px, 6px) !important;
}

.gallery-stack:hover .layer-3 {
  transform: rotate(6deg) translate(18px, 12px) !important;
}

/* Horní fotka (layer-1) zůstává na středu, jen se lehce nadzvedne */
.gallery-stack:hover .layer-1 {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.33);
}

/* --- ÚPRAVA POZICE MODALU --- */

.custom-modal {
  /* Změna ze center na flex-start pro začátek odshora */
  align-items: flex-start !important; 
  /* Přidáme padding, aby nebyl úplně nalepený na hraně */
  padding-top: 140px !important; 
  overflow-y: auto; /* Povolení scrollování celého pozadí */
}

.modal-content-wrapper {
  /* Odstraníme centrování a zajistíme, že začne nahoře */
 
  
  /* Volitelné: pokud chceš, aby modal nepůsobil tak "těžce", 
     můžeš mu dát o něco subtilnější stín */
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
}

/* Oprava pro mobilní zařízení, aby tam nebyl moc velký prázdný prostor */
@media (max-width: 768px) and (pointer: coarse){
  .custom-modal {
    padding-top: 20px !important;
  }
}

.custom-modal {
    position: fixed;
    inset: 0;
    z-index: 99999999 !important; /* Maximální priorita */
    background: rgba(4, 10, 14, 0.98); /* Téměř neprůhledné, aby nic neprosvítalo */
    backdrop-filter: blur(15px); /* Rozmazání pozadí pod ním */
    
    /* KLÍČOVÉ VLASTNOSTI PRO "ZEĎ" */
    pointer-events: auto !important; /* Modal musí přijímat kliknutí */
    display: none; /* Defaultně schovaný (budeme přepínat v JS) */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.custom-modal.active {
    display: flex !important; /* Zobrazí se jen při aktivaci */
}

/* Zabráníme klikání na cokoliv pod modalem, když je aktivní */
body.modal-open {
    overflow: hidden; /* Zákaz scrollování */
    pointer-events: none; /* Celý web přestane reagovat... */
}

body.modal-open .custom-modal {
    pointer-events: auto; /* ...kromě modalu! Ten reagovat musí. */
}

.custom-modal {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh;
    
    background: rgba(4, 10, 14, 0.98);
    backdrop-filter: blur(15px);
    z-index: 999999;
    
    display: none;
    
   
    flex-direction: column;
    align-items: center;

    
    overflow-y: auto; 
    padding-top: 15vh !important; /* Fixní mezera od vrchu obrazovky */
    padding-bottom: 5vh;
    pointer-events: auto;
}

.custom-modal.active {
    display: flex !important;
}

.modal-content-wrapper {
    width: 90%;
    max-width: 1100px;
    background: radial-gradient(circle at top left, #0e2424 0%, #04090c 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    position: relative;
    
    /* Zrušíme jakékoliv absolutní centrování, které by to mohlo rozbít */
    margin: 0 auto !important; 
    flex-shrink: 0; /* Zabrání smrštění tabulky, když je obsahu moc */
}



.custom-modal {
    position: fixed;
    /* Pokud chceš, aby byl modal fyzicky pod navbarem (navbar zůstane vidět), 
       nastav top na výšku tvého navbaru, např. 80px. 
       Pokud má modal zakrýt i navbar, nech 0. */
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh;
    
    background: rgba(4, 10, 14, 0.68);
    backdrop-filter: blur(15px);
    z-index: 999999; /* Musí být o 1 méně než tvůj navbar, pokud má být navbar nad ním */
    
    display: none; /* Přepínáno přes .active v JS */
    
    /* KLÍČOVÉ NASTAVENÍ */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Začínáme odshora */
    
    overflow-y: auto; /* Scrollování celého overlaye */
    padding-top: 15vh !important; /* Fixní mezera od vrchu obrazovky */
    padding-bottom: 5vh;
    pointer-events: auto;
}

.custom-modal.active {
    display: flex !important;
}

.modal-content-wrapper {
    width: 90%;
    max-width: 1100px;
    background: radial-gradient(circle at top left, #0e2424 0%, #04090c 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    position: absolute;
    
    /* Zrušíme jakékoliv absolutní centrování, které by to mohlo rozbít */
    margin: 0 auto !important; 
    flex-shrink: 0; /* Zabrání smrštění tabulky, když je obsahu moc */
    top: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.custom-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    
   
    z-index: 2147483647 !important; 
    

    background: rgba(4, 10, 14, 0.95) !important;
    backdrop-filter: blur(3px);
    

    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Startuje vždy nahoře */
    
    /* Scrollování pouze v rámci modalu */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    
    /* Odskok od horní hrany okna */
    padding-top: 10vh !important;
    padding-bottom: 5vh;

}

.custom-modal.active {
    display: flex !important;
}

/* Zámek pro zbytek webu */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important; /* Totální zmrazení podkladu */
    width: 100% !important;
}

.modal-content-wrapper h2  {
   font-family: 'Teko', sans-serif;
   font-size: 2rem;
   letter-spacing: 0.4px;
}/* --- LIGHTBOX (Finální velký obrázek) --- */

.custom-modal.lightbox {
    /* Reset paddingu, který jsme dali u prvního modalu */
    padding-top: 0 !important; 
    display: none;
    align-items: center !important;    /* Vertikální střed */
    justify-content: center !important; /* Horizontální střed */
    background: rgba(0, 0, 0, 0.95) !important; /* Černější pozadí pro soustředění na fotku */
}

.custom-modal.lightbox.active {
    display: flex !important;
}

.lightbox-content {
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
    display: flex;

}

#lightboxImage {
    max-width: 85%;
    min-width: 85%;
     min-height: 85%;
    max-height: 85%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
    animation: zoomIn 0.3s ease-out;
    border-radius: 80px !important;
}

/* Navigační šipky */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0);
    border: none;
    color: white;
    font-size: 3rem;
    padding-top: 4px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 23px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
    border-radius: 50%;
}

.lightbox-nav:hover { background: rgba(255, 255, 255, 0.15); color:rgb(169, 255, 252)0; }
.lightbox-nav.prev { left: 20px; padding-left: 21px;
    padding-right: 27px; }
.lightbox-nav.next { right: 20px; }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox {
  background: rgba(0, 0, 0, 0.98);
padding-top: 10vh;
padding-bottom: 0;

}


.modal-content-wrapper {
    width: 90%;
    max-width: 1100px;
    background: radial-gradient(circle at top left, #0e2424 0%, #04090c 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    position: absolute;
    
    /* Zrušíme jakékoliv absolutní centrování, které by to mohlo rozbít */
    margin: 0 auto !important; 
    flex-shrink: 0; /* Zabrání smrštění tabulky, když je obsahu moc */

    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

}


.menu a.pageg {
  color: #ff8010;
 
}

@media (max-width: 768px) {
  .menu a.pageg {
    display: none !important;
  }
}

.menu a.pageg::after {
  background: #ff8921; /* sem dej svůj odstín */
}

/* hover pageg */
.menu a.pageg:hover {
    color: #ff8921;
}/* anti-hover jen když je hover přímo na některém <li> */
.menu li:hover ~ li a,
.menu li:has(~ li:hover) a {
  transform: scale(0.985);
  opacity: 0.6;
}

/* hovered položka zůstane hlavní */
.menu li:hover a {
  transform: scale(1.015);
  opacity: 1;
  z-index: 3;
}

.cookie-bar{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: min(900px, 92%);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 22px;

    border-radius: 24px;

    background: rgba(10, 20, 30, 0.55);
    backdrop-filter: blur(18px);

    box-shadow: 0 20px 60px rgba(0,0,0,0.4);

    z-index: 999999;
}



.cookie-bar:before {
  content: "";
  position: absolute;
  inset: 0;
    border-radius: 24px;
  padding: 0.8px; /* Tloušťka borderu */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.862) 0%, rgba(139, 92, 246, 0.1) 10%,  rgba(138, 92, 246, 0) 46%, rgba(138, 92, 246, 0) 56%, rgba(139, 92, 246, 0.1) 86%, rgba(255, 255, 255, 0.462) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding-bottom: 1px;
  padding-right: 1px;
}


.cookie-title{
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.cookie-desc{
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

.cookie-actions{
    display: flex;
    gap: 10px;
}

.cookie-btn{
    padding: 10px 14px;

    border-radius: 14px;

    cursor: pointer;

    font-size: 13px;
border: none
;
    transition: 0.25s;
}



.cookie-btn.accept{
    background: rgba(27, 255, 179, 0.35);
    color: #ffffff;
}

.cookie-btn.reject{
     background: rgba(255, 51, 0, 0.08);
     color: rgba(255, 140, 140, 0.85);
         font-size: 12px;
}

.cookie-btn.reject:hover{
    transform: translateY(-1px);
     background: rgba(143, 29, 0, 0.08);
}

.cookie-btn.accept:hover{
    transform: translateY(-1px);
        background: rgba(0, 199, 132, 0.25);
}

@media (max-width: 768px) {

    .cookie-bar {
        flex-direction: column;
        align-items: flex-start;

        gap: 14px;

        padding: 16px 16px;

        border-radius: 18px;

        width: 92%;
        bottom: 12px;
    }

    .cookie-bar:before {
    border-radius: 18px;
    padding: 0.8px;
}

    .cookie-text {
        width: 100%;
    }

    .cookie-title {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .cookie-desc {
        font-size: 12px;
        line-height: 1.4;
    }

    .cookie-actions {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .cookie-btn {
        flex: 1;

        text-align: center;

        padding: 12px 10px;

        font-size: 13px;

        border-radius: 12px;
    }

    .cookie-btn.reject {
        font-size: 12px;
    }


    .cookie-bar{
    background: rgba(10, 20, 30, 0.75);

    
}
.cookie-btn.accept{
   
   background: rgba(15, 255, 159, 0.35);
    color: #ffffff;
}

.cookie-btn.reject{

         font-size: 12px;
}

}.cookie-highlight { color: rgba(255,255,255,0.8);}


.mobile-title {
    display: none !important;
}

.desktop-title {
    display: block !important;
transform: translateX(20%);
}

@media (max-width: 768px) {
    .desktop-title {
        display: none !important;
    }

    .mobile-title {
        display: block !important;
         font-size: 11cqw !important;
    }
}.menu-toggle:hover + .mobile-current-page,
.mobile-current-page:hover {
  color: #ec6e00;
}html {
  background: rgb(1, 9, 25) !important;
}

body {
  background: rgb(1, 9, 25) !important;
}