:root {
    --navy:      #243250;
    --ground:    #0e1322;
    --ground-2:  #141b2e;
    --paper:     #f6f5f2;
    --ink-soft:  #a8b0c2;
    --ink-faint: #6e7791;
    --champagne: #d4dbe6;
    --hairline:  rgba(212, 219, 230, 0.34);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--paper);
    font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- hlavička ---------- */

  .topbar {
    /* Patří nahoru ke stránce: jakmile člověk sjede dolů, uhne z cesty,
       ať nepřejíždí přes fotky. Po návratu nahoru se zase ukáže. */
    position: fixed;
    top: 0; left: 0; right: 0;
    transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem clamp(1.25rem, 5vw, 3.5rem);
    z-index: 3;
  }

  .topbar.schovana {
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar { transition: none; }
  }

  .topbar .kontakt {
    font-family: "Archivo", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .topbar a {
    color: var(--paper);
    text-decoration: none;
  }
  .topbar a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

  /* ---------- hero ---------- */

  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 6rem 1.5rem 4rem;
    overflow: hidden;
  }

  /* odlesk jako na čerstvě naleštěném laku */
  .hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(60% 45% at 50% 28%, rgba(120, 150, 210, 0.16), transparent 70%),
      radial-gradient(40% 30% at 78% 76%, rgba(212, 219, 230, 0.10), transparent 70%),
      linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 62%);
    z-index: 0;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
  }


  h1 {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-size: clamp(1.15rem, 3.4vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-wrap: balance;
    margin: 0;
    color: var(--paper);
  }

  /* linky po stranách popisku — stejný motiv jako „— DETAILING —“ v logu */
  .rule-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 30rem;
  }

  .rule-label::before,
  .rule-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
  }

  .rule-label span {
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--champagne);
    white-space: nowrap;
  }

  .podnadpis {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 30rem;
  }


  /* ---------- logo: matné → vyleštěné ---------- */

  .logo {
    width: min(80vw, 31rem);
    aspect-ratio: 1649 / 264;
    position: relative;
    background-color: #3a4763;          /* matný stav — zesvětlená modrá z loga */
    -webkit-mask-image: url("/img/logo.png");
            mask-image: url("/img/logo.png");
    -webkit-mask-size: contain;  mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }

  /* vyleštěná vrstva — odkrývá se tahem zleva doprava */
  .logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper);
    clip-path: inset(0 100% 0 0);
  }

  /* světelný odlesk, který jede na hraně toho tahu */
  .logo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Jen barvy z loga — bílá. Žádný jiný odstín. */
    background: linear-gradient(100deg,
      transparent 40%,
      rgba(255, 255, 255, 0.55) 46%,
      rgba(255, 255, 255, 1)    50%,
      rgba(255, 255, 255, 0.55) 54%,
      transparent 60%);
    transform: translateX(-130%);
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .snimek img:hover, .mrizka img:hover { transform: none; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .spusteno .logo   { animation: prilet 1.1s cubic-bezier(0.16, 0.9, 0.24, 1) backwards; }
    .spusteno .logo::before { animation: vylesteni 2.3s 0.85s linear both; }
    .spusteno .logo::after  { animation: tah 2.3s 0.85s linear backwards,
                               lesk 8s 5s linear infinite; }

    @keyframes prilet {
      0%   { opacity: 0; transform: translateY(38px) scale(1.09); filter: blur(14px); }
      60%  { opacity: 1; filter: blur(1.5px); }
      100% { opacity: 1; transform: none; filter: blur(0); }
    }
    @keyframes vylesteni {
      0%   { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.2, 0, 0.35, 1); }
      42%  { clip-path: inset(0 30% 0 0);  animation-timing-function: linear; }
      84%  { clip-path: inset(0 7% 0 0);   animation-timing-function: cubic-bezier(0.3, 0.65, 0.4, 1); }
      100% { clip-path: inset(0 0 0 0); }
    }
    /* Odlesk jede s tahem: rozjede se, u L se zdrží, pak plynule dotáhne. */
    @keyframes tah {
      0%   { transform: translateX(-130%); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0.35, 1); }
      42%  { transform: translateX(6%);    animation-timing-function: linear; }
      84%  { transform: translateX(46%);   animation-timing-function: cubic-bezier(0.3, 0.65, 0.4, 1); }
      95%  { opacity: 1; }
      100% { transform: translateX(130%); opacity: 0; }
    }
    @keyframes lesk {
      0%        { transform: translateX(-130%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0, 0.35, 1); }
      2%        { opacity: 0.8; }
      10%       { transform: translateX(6%);   animation-timing-function: linear; }
      20%       { transform: translateX(46%);  animation-timing-function: cubic-bezier(0.3, 0.65, 0.4, 1); }
      24%       { transform: translateX(130%); opacity: 0.8; }
      25%, 100% { transform: translateX(130%); opacity: 0; }
    }

    .spusteno .rule-label::before, .spusteno .rule-label::after {
      animation: rozjezd 1s 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
      transform-origin: center;
    }
    @keyframes rozjezd { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }

  /* ---------- tlačítko ---------- */

  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: "Archivo", sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ground);
    background: var(--champagne);
    border: 1px solid var(--champagne);
    padding: 1.15rem 2.3rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .cta:hover { background: transparent; color: var(--champagne); }
  .cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

  .cta svg { width: 1em; height: 1em; }

  .hero .cta { margin-top: 0.9rem; }

  /* ---------- patička hera ---------- */


  @media (prefers-reduced-motion: no-preference) {
    .spusteno .hero-inner > *:not(.logo) {
      animation: prijezd 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    .spusteno .hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
    .spusteno .hero-inner > *:nth-child(2) { animation-delay: 1.65s; }
    .spusteno .hero-inner > *:nth-child(3) { animation-delay: 1.85s; }
    .spusteno .hero-inner > *:nth-child(4) { animation-delay: 2.05s; }
    .spusteno .hero-inner > *:nth-child(5) { animation-delay: 0.56s; }
    @keyframes prijezd {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* ---------- sekce ---------- */

  .sekce {
    max-width: 50rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 2rem);
  }

  .nadpis-sekce {
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--champagne);
    margin: 0 0 2.25rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
  }

  .nadpis-sekce::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
  }

  /* ---------- před a po ---------- */


  .snimek {
    margin: 0;
    position: relative;
    background: none;
  }

  /* Dvojice před/po musí mít stejný tvar — jinak oko porovnává rámy, ne výsledek.
     V sekci Další zůstávají fotky celé, tam na tom nezáleží. */
  .snimek img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    cursor: zoom-in;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .snimek img:hover { opacity: 0.9; transform: translateY(-2px) scale(1.012); }

  .snimek figcaption {
    position: absolute;
    left: 0.75rem; bottom: 0.75rem;
    border-radius: 4px;
    font-family: "Archivo", sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(14, 19, 34, 0.82);
    padding: 0.55rem 1rem;
    backdrop-filter: blur(6px);
  }

  /* ---------- ceník ---------- */

  .cenik { border-top: 1px solid rgba(212, 219, 230, 0.22); }

  .cenik-hlava,
  .polozka {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: clamp(0.9rem, 4vw, 2.5rem);
    align-items: baseline;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .cenik-hlava {
    padding: 0.6rem 0;
    font-family: "Archivo", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom-color: rgba(212, 219, 230, 0.22);
  }

  .cenik-hlava span:not(:first-child),
  .polozka .cena { text-align: right; min-width: 5.2rem; }

  .sluzba { color: var(--paper); font-size: 1rem; }

  .cena {
    font-family: "Archivo", sans-serif;
    font-size: 0.95rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  .cena.zvyh { color: var(--champagne); }

  .cenik-pozn {
    margin: 1.5rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-faint);
  }

  .cenik-pozn strong { color: var(--champagne); font-weight: 500; }

  @media (max-width: 30rem) {
    .cenik-hlava, .polozka { grid-template-columns: 1fr auto auto; gap: 0.75rem; }
    .cenik-hlava span:not(:first-child), .polozka .cena { min-width: 4.2rem; }
    .cena { font-size: 0.85rem; }
  }




  /* ---------- rezervační formulář ---------- */

  .rez {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 34rem;
    width: calc(100% - 2rem);
    color: var(--paper);
  }

  .rez::backdrop { background: rgba(6, 9, 17, 0.78); backdrop-filter: blur(4px); }

  .rez-box {
    position: relative;
    background: var(--ground-2);
    border: 1px solid rgba(212, 219, 230, 0.25);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .rez-box .nadpis-sekce { margin: 0 0 0.5rem; }

  .rez-zavrit {
    position: absolute;
    top: 0.35rem; right: 0.35rem;
    z-index: 10;
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 1.9rem;
    line-height: 1;
    width: 3rem; height: 3rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
  }

  .rez-zavrit:hover { color: var(--paper); }

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

  .pole label {
    font-family: "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .pole input,
  .pole select {
    font-family: "Karla", sans-serif;
    font-size: 0.98rem;
    color: var(--paper);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    width: 100%;
    appearance: none;
  }

  .pole select {
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.8rem) 1.15rem;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .pole select option { background: var(--ground-2); color: var(--paper); }

  .pole input:focus,
  .pole select:focus {
    outline: none;
    border-color: var(--champagne);
    background: rgba(212, 219, 230, 0.07);
  }

  .pole input::placeholder { color: var(--ink-faint); }

  .radek-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

  .rez-odeslat { justify-content: center; border: none; cursor: pointer; margin-top: 0.4rem; }

  .rez-pozn { margin: 0; font-size: 0.82rem; color: var(--ink-faint); text-align: center; }

  @media (max-width: 30rem) { .radek-2 { grid-template-columns: 1fr; } }

  @media (prefers-reduced-motion: no-preference) {
    .rez[open] { animation: vyjezd 0.35s cubic-bezier(0.16, 0.9, 0.24, 1); }
    @keyframes vyjezd {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }


  /* ---------- předplatitelský program ---------- */

  .predplatne {
    margin-top: 2rem;
    border: 1px solid rgba(212, 219, 230, 0.3);
    padding: 1.4rem 1.5rem;
    background: rgba(212, 219, 230, 0.05);
  }

  .predplatne h3 {
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--champagne);
    margin: 0 0 0.7rem;
  }

  .predplatne p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 34rem;
  }

  .predplatne strong { color: var(--paper); font-weight: 500; }


  /* ---------- balíčky ---------- */

  .balicky {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1px;
    background: rgba(212, 219, 230, 0.22);
    border: 1px solid rgba(212, 219, 230, 0.22);
  }

  .balicek {
    background: var(--ground);
    padding: 1.75rem 1.6rem 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .balicek.hlavni { background: rgba(212, 219, 230, 0.055); }

  .balicek h3 {
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--champagne);
    margin: 0;
  }

  .castka {
    font-family: "Archivo", sans-serif;
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--paper);
    margin: 0 0 1.1rem;
    font-variant-numeric: tabular-nums;
  }

  .balicek ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .balicek li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  .balicek li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.62em;
    width: 5px; height: 1px;
    background: var(--champagne);
  }

  .balicek li span { color: var(--ink-faint); }

  .stitek {
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 219, 230, 0.25);
    font-family: "Archivo", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--champagne);
  }

  .priplatky {
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
  }

  .priplatky strong { color: var(--ink-soft); font-weight: 500; }


  /* ---------- jednotlivé zakázky ---------- */

  .pripad + .pripad { margin-top: 2.75rem; }

  .auto {
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.85rem;
  }


  /* ---------- lesk v textu, stejný princip jako na logu ---------- */

  .auto,
  .snimek figcaption span {
    background-size: 300% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }

  .auto {
    background-image: linear-gradient(100deg,
      var(--ink-soft) 42%,
      #ffffff 50%,
      var(--ink-soft) 58%);
  }

  .snimek figcaption span {
    background-image: linear-gradient(100deg,
      var(--paper) 42%,
      var(--champagne) 50%,
      var(--paper) 58%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .auto,
    .snimek figcaption span { animation: textlesk 7s cubic-bezier(0.5, 0, 0.5, 1) infinite; }

    .pripad:nth-child(2) .auto,
    .pripad:nth-child(2) figcaption span { animation-delay: 0.5s; }
    .pripad:nth-child(3) .auto,
    .pripad:nth-child(3) figcaption span { animation-delay: 1s; }
    .snimek:nth-child(2) figcaption span { animation-delay: 0.35s; }

    @keyframes textlesk {
      0%        { background-position: 200% 0; }
      22%, 100% { background-position: -100% 0; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .auto { color: var(--ink-soft); }
    .snimek figcaption span { color: var(--paper); }
  }


  .past { position: absolute; left: -9999px; }

  .rez-stav {
    margin: 0;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    border: 1px solid;
  }
  .rez-stav.ok    { color: var(--champagne); border-color: rgba(200,169,122,0.4); background: rgba(200,169,122,0.07); }
  .rez-stav.chyba { color: #e8a0a0; border-color: rgba(232,160,160,0.4); background: rgba(232,160,160,0.07); }

  .rez-odeslat[disabled] { opacity: 0.5; cursor: wait; }



  /* ---------- patička ---------- */

  .paticka {
    max-width: 58rem;
    margin: 0 auto;
    padding: 2.25rem clamp(1.25rem, 5vw, 2rem) 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.9rem 2rem;
    flex-wrap: wrap;
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .paticka .znacka { color: var(--ink-faint); }

  .paticka .spojeni { display: flex; gap: 1.5rem; flex-wrap: wrap; }

  .paticka a {
    color: var(--paper);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
  }

  .paticka a:hover { border-bottom-color: rgba(246, 245, 242, 0.45); }
  .paticka a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }


  /* na mobilu je tlačítko hlavní věc na obrazovce — ať je dobře trefitelné */
  @media (max-width: 40rem) {
    .hero .cta {
      font-size: 0.95rem;
      padding: 1.35rem 2.8rem;
      margin-top: 2.1rem;
    }
  }


  /* ---------- rozbalovací další zakázky ---------- */

  .dalsi { margin-top: 2.5rem; border-top: 1px solid rgba(212, 219, 230, 0.22); }

  .dalsi summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: "Archivo", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--champagne);
  }

  .dalsi summary::-webkit-details-marker { display: none; }
  .dalsi summary:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
  .dalsi summary:hover .sipka { border-color: var(--champagne); }

  .sipka {
    width: 1.9rem; height: 1.9rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s ease, border-color 0.2s ease;
  }

  .dalsi[open] .sipka { transform: rotate(45deg); }

  .dalsi-obsah { padding-bottom: 1.5rem; }

  /* Dvě vedle sebe, bez rámečků, položené rovnou na stránku. */
  .mrizka {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  @media (max-width: 34rem) {
    .mrizka { grid-template-columns: 1fr; gap: 2rem; }
  }

  .mrizka img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 12px;
    background: none;
    cursor: zoom-in;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .mrizka img:hover { opacity: 0.9; transform: translateY(-2px) scale(1.012); }

  .mrizka img:hover { opacity: 0.82; border-color: var(--champagne); }

  /* ---------- fotka přes celou obrazovku ---------- */

  .lupa { border: none; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
  .lupa::backdrop { background: rgba(6, 9, 17, 0.94); }

  .lupa-obal {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.25rem 3.5rem;
    cursor: zoom-out;
  }

  .lupa img {
    max-width: min(100%, 60rem);
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .lupa-zavrit {
    position: fixed;
    top: 1rem; right: 1rem;
    width: 3rem; height: 3rem;
    display: grid;
    place-items: center;
    background: rgba(14, 19, 34, 0.7);
    border: 1px solid var(--hairline);
    color: var(--paper);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }

  .lupa-zavrit:hover { background: var(--champagne); color: var(--ground); }

  .lupa-popis {
    position: fixed;
    left: 0; right: 0; bottom: 1.1rem;
    text-align: center;
    font-family: "Archivo", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }


  /* ---------- horní lišta ---------- */

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem clamp(1.1rem, 5vw, 2.5rem);
    z-index: 20;
  }

  .odkaz-nahore {
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(14, 19, 34, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .odkaz-nahore:hover { background: var(--champagne); color: var(--ground); border-color: var(--champagne); }
  .odkaz-nahore:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

  /* ceník potřebuje víc místa než rezervace */
  .rez-siroke { max-width: 44rem; }
  .rez-siroke .rez-box { max-height: 88vh; overflow-y: auto; }
  .rez-siroke .predplatne { margin-top: 1.6rem; }


  .rez-gdpr {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--ink-faint);
    text-align: center;
  }

  /* datum má na tmavém pozadí bílou ikonku kalendáře */
  .pole input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.55;
    cursor: pointer;
  }
  .pole input[type="date"] { min-height: 3rem; }


  .nepovinne {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    opacity: 0.75;
    margin-left: 0.4rem;
  }


  .pole textarea {
    font-family: "Karla", sans-serif;
    font-size: 0.98rem;
    color: var(--paper);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 0.78rem 0.9rem;
    width: 100%;
    resize: vertical;
    min-height: 5rem;
    line-height: 1.5;
  }

  .pole textarea:focus {
    outline: none;
    border-color: var(--champagne);
    background: rgba(212, 219, 230, 0.07);
  }

  .pole textarea::placeholder { color: var(--ink-faint); }




  /* Než se stránka načte, obsah úvodu čeká — jinak by animace odjela naprázdno. */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.spusteno) .hero-inner > *:not(.logo) { opacity: 0; }
  }


  /* ---------- posuvný pás zakázek ---------- */

  .pripad-hlava {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.9rem;
  }

  .pripad-hlava .auto { margin: 0; }

  .pas-ovladani {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
  }

  .pas-pocitadlo {
    font-family: "Archivo", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    margin-right: 0.2rem;
  }

  .pas-sipka {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--paper);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  }

  .pas-sipka:hover:not(:disabled) { background: var(--champagne); color: var(--ground); border-color: var(--champagne); }
  .pas-sipka:disabled { opacity: 0.25; cursor: default; }
  .pas-sipka:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

  /* Pás se posouvá do boku, stránka ne. */
  .pas {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }

  .pas::-webkit-scrollbar { display: none; }
  .pas:focus-visible { outline: 2px solid var(--champagne); outline-offset: 6px; }

  .snimek-pasu {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* dvojice před a po uvnitř jednoho snímku pásu */
  .snimek-pasu.porovnani {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  @media (max-width: 40rem) {
    /* Na telefonu pod sebe — vedle sebe by byly obě fotky mrňavé. */
    .snimek-pasu.porovnani { grid-template-columns: 1fr; gap: 1.25rem; }
    .pas { gap: 1.5rem; }
  }



  .telefon-nahore svg { width: 0.95rem; height: 0.95rem; flex: none; }

  @media (max-width: 26rem) {
    .odkaz-nahore { padding: 0.6rem 0.9rem; font-size: 0.62rem; }
    .telefon-nahore { letter-spacing: 0.06em; }
  }


  .kontakt-blok {
    display: flex;
    align-items: center;
    gap: 0.4rem 1.5rem;
    flex-wrap: wrap;
    /* Bez rámečku a pozadí — jen text. Lišta se při scrollu schovává,
       takže se nemusí bránit proti fotkám pod sebou. */
    padding: 0.5rem 0;
  }

  /* Všechny údaje stejně: jedno písmo, jedna velikost, jedna barva.
     Telefon nemá vyčnívat z řady. */
  .kontakt-blok a,
  .kontakt-blok .znacka-nahore {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Karla", sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
  }

  /* Jméno firmy je popisek, ne odkaz — drží krok vzadu a odděluje se linkou. */
  .kontakt-blok .znacka-nahore {
    font-family: "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-right: 1.5rem;
    border-right: 1px solid rgba(212, 219, 230, 0.16);
  }

  .kontakt-blok svg {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    opacity: 0.8;
  }

  .kontakt-blok a { transition: color 0.2s; }
  .kontakt-blok a:hover { color: var(--champagne); }
  .kontakt-blok a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

  @media (max-width: 52rem) {
    .kontakt-blok a#mail-nahore { display: none; }
  }

  /* ---- tlačítko: broušený kov ---- */
  .cta {
    background: linear-gradient(145deg, #eef2f7 0%, #d4dbe6 45%, #b9c2d0 100%);
    border-color: #dde3ec;
    color: #16202f;
  }

  .cta:hover {
    background: linear-gradient(145deg, #ffffff 0%, #e4e9f1 45%, #c9d1dd 100%);
    color: #16202f;
  }


  /* ---------- o firmě ---------- */

  .o-firme-text {
    max-width: 38rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-soft);
  }

  .o-firme-text p { margin: 0 0 1.1rem; }
  .o-firme-text p:last-child { margin-bottom: 0; }
  .o-firme-text strong { color: var(--paper); font-weight: 500; }

  .pole-napoveda {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-faint);
  }

  /* ---------- výběr termínu ---------- */
  /* Týden se listuje šipkami, den se rozklikne a teprve pod ním naskočí hodiny.
     Seznam všech termínů pod sebou byl přes půl obrazovky a nedal se přehlédnout. */

  .termin-vyber {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
  }

  .tyden-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .tyden-popis {
    font-family: "Archivo", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--paper);
    text-align: center;
    flex: 1;
  }

  .tyden-sip {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--champagne);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
  }
  .tyden-sip:hover:not(:disabled) {
    border-color: var(--champagne);
    background: rgba(212, 219, 230, 0.08);
  }
  .tyden-sip:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
  .tyden-sip:disabled { opacity: 0.2; cursor: default; }

  .dny {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .den-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.1rem 0.6rem;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--ink-soft);
    font-family: "Karla", sans-serif;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
  }
  .den-btn:last-child { border-right: 0; }
  .den-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--paper); }
  .den-btn:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }

  .den-zkratka {
    font-family: "Archivo", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .den-cislo { font-size: 1rem; line-height: 1; }

  /* tečka = tenhle den je něco volného */
  .den-tecka {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--champagne);
  }

  .den-btn.prazdny { opacity: 0.28; cursor: default; }
  .den-btn.prazdny .den-tecka { background: transparent; }

  .den-btn.otevreny { background: var(--champagne); color: #16181f; }
  .den-btn.otevreny .den-zkratka { color: rgba(22, 24, 31, 0.6); }
  .den-btn.otevreny .den-tecka { background: #16181f; }

  .hodiny {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 0.85rem;
  }

  .hodiny-nadpis {
    margin: 0 0 0.65rem;
    font-family: "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .hodiny-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 0.45rem;
  }

  .hodina {
    padding: 0.6rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: var(--paper);
    font-family: "Karla", sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
  }
  .hodina:hover { border-color: var(--champagne); background: rgba(212, 219, 230, 0.08); }
  .hodina:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
  .hodina.vybrana {
    background: var(--champagne);
    border-color: var(--champagne);
    color: #16181f;
  }

  /* únik z kalendáře: zákazník nemusí termín vybírat, majitel zavolá */
  .termin-zpet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--ink-soft);
    font-family: "Karla", sans-serif;
    font-size: 0.88rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
  }
  .termin-zpet:hover { background: rgba(255, 255, 255, 0.05); color: var(--paper); }
  .termin-zpet:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
  .termin-zpet.aktivni { color: var(--champagne); }

  .termin-zpet .krizek {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hodiny { animation: hodiny-dolu 0.22s cubic-bezier(0.22, 0.7, 0.3, 1); }
    @keyframes hodiny-dolu {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: none; }
    }
  }

  .bez-terminu {
    margin: 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--hairline);
    background: rgba(200, 169, 122, 0.06);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .bez-terminu strong { color: var(--paper); font-weight: 500; }
  .bez-terminu a { color: var(--champagne); }

  /* ================== rezervační formulář — bílý list ==================
     Formulář je bílý list položený na tmavý web, jako sešit, co si člověk
     vytáhne. Vlastní barvy platí jen uvnitř .rez, zbytek stránky zůstává tmavý.
     Žádné rámečky kolem políček — jen tenká linka pod textem, která při psaní
     ztmavne. Odpověď je větší než otázka: text, co člověk píše, je větší
     než popisek nad ním. */

  .rez {
    --list:    #ffffff;
    --ink:     #12151c;
    --ink-2:   #5b6270;
    --ink-3:   #9096a3;
    --linka:   rgba(18, 21, 28, 0.14);
    --linka-2: rgba(18, 21, 28, 0.07);
    --akcent:  #243250;
    max-width: 36rem;
  }

  /* Pozadí stránky zůstává, jak je — formulář si ho nezatmavuje.
     Bílý list se od tmavého webu oddělí stínem, ne ztmavením okolí. */
  .rez::backdrop { background: transparent; backdrop-filter: none; }

  .rez .rez-box {
    background: var(--list);
    color: var(--ink);
    border: none;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(5, 8, 16, 0.5);
    padding: clamp(1.6rem, 5vw, 2.6rem);
    gap: 1.5rem;
    max-height: 88vh;
    overflow-y: auto;
  }

  .rez .nadpis-sekce {
    display: block;
    font-family: "Archivo", sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 0.3rem;
  }
  .rez .nadpis-sekce::after { display: none; }

  .rez .rez-zavrit { color: var(--ink-3); }
  .rez .rez-zavrit:hover { color: var(--ink); }

  .rez .pole { gap: 0.3rem; }

  .rez .pole label {
    font-family: "Karla", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
  }

  .rez .nepovinne { color: var(--ink-3); opacity: 1; letter-spacing: 0; }

  .rez .pole input,
  .rez .pole select,
  .rez .pole textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linka);
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 1.05rem;
    color: var(--ink);
    transition: border-color 0.2s ease;
  }

  .rez .pole textarea { min-height: 4.5rem; line-height: 1.55; }

  .rez .pole input:focus,
  .rez .pole select:focus,
  .rez .pole textarea:focus {
    outline: none;
    background: transparent;
    border-bottom-color: var(--akcent);
  }

  .rez .pole input::placeholder,
  .rez .pole textarea::placeholder { color: var(--ink-3); }

  .rez .pole select {
    /* Šipka je nakreslená dvěma přechody. Musí se jí vrátit i velikost
       a nepřekreslování — `background: transparent` výš je oboje zresetovalo
       a přechod pak vyplnil celé políčko šedou. */
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                      linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 0.55rem) 1.05rem, calc(100% - 0.2rem) 1.05rem;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 1.6rem;
  }
  .rez .pole select option { background: #fff; color: var(--ink); }

  .rez .pole-napoveda { color: var(--ink-2); font-size: 0.82rem; }

  .rez .radek-2 { gap: 1.5rem; }

  /* ---- kalendář uvnitř bílého listu ---- */

  .rez .termin-vyber {
    background: transparent;
    border: 1px solid var(--linka);
    border-radius: 12px;
    overflow: hidden;
  }

  .rez .tyden-lista { border-bottom: 1px solid var(--linka-2); }
  .rez .tyden-popis { color: var(--ink); }

  .rez .tyden-sip {
    border: 1px solid var(--linka);
    border-radius: 8px;
    color: var(--ink-2);
  }
  .rez .tyden-sip:hover:not(:disabled) {
    border-color: var(--akcent);
    background: rgba(36, 50, 80, 0.06);
    color: var(--akcent);
  }

  .rez .den-btn { border-right-color: var(--linka-2); color: var(--ink-2); }
  .rez .den-btn:hover:not(:disabled) { background: rgba(18, 21, 28, 0.04); color: var(--ink); }
  .rez .den-zkratka { color: var(--ink-3); }
  .rez .den-tecka { background: var(--akcent); }

  .rez .den-btn.otevreny { background: var(--akcent); color: #fff; }
  .rez .den-btn.otevreny .den-zkratka { color: rgba(255, 255, 255, 0.68); }
  .rez .den-btn.otevreny .den-tecka { background: #fff; }

  .rez .hodiny { border-top: 1px solid var(--linka-2); }
  .rez .hodiny-nadpis { color: var(--ink-3); }

  .rez .hodina {
    background: #fff;
    border: 1px solid var(--linka);
    border-radius: 8px;
    color: var(--ink);
  }
  .rez .hodina:hover { border-color: var(--akcent); background: rgba(36, 50, 80, 0.05); }
  .rez .hodina.vybrana { background: var(--akcent); border-color: var(--akcent); color: #fff; }

  .rez .termin-zpet { border-top: 1px solid var(--linka-2); color: var(--ink-2); }
  .rez .termin-zpet:hover { background: rgba(18, 21, 28, 0.04); color: var(--ink); }
  .rez .termin-zpet.aktivni { color: var(--akcent); }

  .rez .bez-terminu {
    border: 1px solid var(--linka);
    border-radius: 12px;
    background: rgba(36, 50, 80, 0.04);
    color: var(--ink-2);
  }
  .rez .bez-terminu strong { color: var(--ink); }
  .rez .bez-terminu a { color: var(--akcent); }

  /* ---- odeslání ---- */

  .rez .cta.rez-odeslat {
    width: 100%;
    justify-content: center;
    background: var(--akcent);
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-family: "Karla", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 1.05rem 2rem;
    margin-top: 0.4rem;
  }
  .rez .cta.rez-odeslat:hover { background: #1b2740; color: #fff; }
  .rez .cta.rez-odeslat svg { display: none; }

  .rez .rez-stav { border-radius: 10px; }
  .rez .rez-stav.ok {
    color: #1d6b4c;
    border-color: rgba(29, 107, 76, 0.32);
    background: rgba(29, 107, 76, 0.07);
  }
  .rez .rez-stav.chyba {
    color: #a3423c;
    border-color: rgba(163, 66, 60, 0.32);
    background: rgba(163, 66, 60, 0.06);
  }

  .rez .rez-pozn { color: var(--ink-2); }
  .rez .rez-gdpr { color: var(--ink-3); }

  /* ================== ceník na bílém listu ==================
     Classic je prostý a světlý — je to ta levnější volba.
     Elegance je tmavá a bohatá, aby na první pohled vypadala jako ta lepší.
     Předtím to bylo naopak a Elegance na bílém listu úplně zmizela. */

  .rez .balicky {
    background: transparent;
    border: 0;
    gap: 1rem;
  }

  /* ---- Classic: levnější, drží se zpátky ---- */
  .rez .balicek {
    background: #f5f4f1;
    border: 1px solid rgba(18, 21, 28, 0.09);
    border-radius: 14px;
    padding: 1.6rem 1.5rem 1.75rem;
  }

  .rez .balicek h3 { color: var(--ink-2); }
  .rez .balicek .castka { color: var(--ink); font-weight: 500; }
  .rez .balicek li { color: var(--ink-2); }
  .rez .balicek li span { color: var(--ink-3); }
  .rez .balicek li::before { background: var(--ink-3); }

  /* ---- Elegance: ta lepší. Tmavá, se zlatavou linkou nahoře ---- */
  .rez .balicek.hlavni {
    position: relative;
    background: linear-gradient(160deg, #26355a 0%, #1a2438 100%);
    border: 0;
    border-radius: 14px;
    padding-top: 1.75rem;
    box-shadow: 0 14px 34px rgba(16, 22, 38, 0.28);
    overflow: hidden;
  }

  /* zlatavý proužek přes horní hranu — jediná ozdoba, co si karta bere */
  .rez .balicek.hlavni::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #b99a5e, #e6d2a8 50%, #b99a5e);
  }

  .rez .balicek.hlavni h3 { color: #e6d2a8; }
  .rez .balicek.hlavni .castka { color: #ffffff; font-weight: 500; }
  .rez .balicek.hlavni li { color: rgba(255, 255, 255, 0.86); }
  .rez .balicek.hlavni li span { color: rgba(255, 255, 255, 0.6); }
  .rez .balicek.hlavni li::before { background: #e6d2a8; }

  .rez .balicek.hlavni .stitek {
    border-top-color: rgba(230, 210, 168, 0.35);
    color: #e6d2a8;
  }

  /* ---- doplňky pod ceníkem ---- */
  .rez .priplatky { color: var(--ink-2); }
  .rez .priplatky strong { color: var(--ink); }

  .rez .predplatne {
    background: #f5f4f1;
    border: 1px solid rgba(18, 21, 28, 0.09);
    border-radius: 14px;
  }
  .rez .predplatne h3 { color: var(--ink-2); }
  .rez .predplatne p { color: var(--ink-2); }
  .rez .predplatne strong { color: var(--ink); }

  /* ---------- odkazy v horní liště ---------- */

  .odkazy-nahore {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* ================== galerie a O nás na bílém listu ==================
     Moje práce i O nás se otevírají ve stejném bílém okně jako ceník,
     takže obsah psaný pro tmavý web se tu musí převléknout. */

  .rez .pripad + .pripad { margin-top: 2.5rem; }

  .rez .auto {
    color: var(--ink-2);
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    animation: none;
  }

  .rez .snimek figcaption span {
    color: #fff;
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    animation: none;
  }

  .rez .pas-pocitadlo { color: var(--ink-3); }

  .rez .pas-sipka {
    border-color: var(--linka);
    color: var(--ink-2);
  }
  .rez .pas-sipka:hover:not(:disabled) { border-color: var(--akcent); color: var(--akcent); }

  .rez .dalsi {
    border-top: 1px solid var(--linka);
    margin-top: 2rem;
  }

  .rez .dalsi summary { color: var(--ink-2); }
  .rez .dalsi summary:hover .sipka { border-color: var(--akcent); }
  .rez .sipka { border-color: var(--linka); color: var(--ink-2); }

  .rez .snimek img,
  .rez .mrizka img { border-radius: 10px; }

  .rez .o-firme-text { color: var(--ink-2); max-width: none; }
  .rez .o-firme-text strong { color: var(--ink); }

  /* ================== fotky v hero: průjezd jako lesk po logu ==================
     Fotky jezdí jedna za druhou ve stejném rytmu, jakým se po logu přelévá lesk:
     zleva rychle přijedou, uprostřed se na chvíli zdrží a plynule odjedou vpravo.
     Je to stejný pohyb a stejné časování jako u animace loga — web tím drží styl. */

  .vejir {
    position: relative;
    width: clamp(11rem, 24vw, 16rem);
    aspect-ratio: 13 / 16;
    margin: 0.5rem auto 0;
  }

  .vejir-snimek {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
  }

  .vejir-snimek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(212, 219, 230, 0.10);
  }

  /* Bez pohybu zůstane stát první fotka - ostatní se neukazují. */
  .vejir-snimek:first-child { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .vejir-snimek { animation: projezd 10.5s linear infinite both; }
    .vejir-snimek:nth-child(1) { animation-delay: 0s; }
    .vejir-snimek:nth-child(2) { animation-delay: 3.5s; }
    .vejir-snimek:nth-child(3) { animation-delay: 7s; }

    /* Fotka přiletí zleva nakloněná a rozostřená, uprostřed se srovná, lehce
       se nadechne a pak odletí doprava. Směr i timing drží linku lesku na logu,
       jen je to živější — samotný posun do strany vypadal tuze. */
    @keyframes projezd {
      0% {
        transform: translateX(-120%) rotate(-9deg) scale(0.84);
        opacity: 0; filter: blur(8px);
        animation-timing-function: cubic-bezier(0.16, 0.84, 0.3, 1);
      }
      5%  { opacity: 1; }
      14% {
        transform: translateX(0) rotate(0deg) scale(1.03);
        opacity: 1; filter: blur(0);
        animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
      }
      18% { transform: translateX(0) translateY(0) rotate(0deg) scale(1);
            animation-timing-function: ease-in-out; }
      26% { transform: translateX(0) translateY(-10px) rotate(-0.6deg) scale(1);
            animation-timing-function: ease-in-out; }
      31% { transform: translateX(0) translateY(0) rotate(0deg) scale(1);
            opacity: 1; filter: blur(0);
            animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.35); }
      40% {
        transform: translateX(120%) rotate(9deg) scale(0.84);
        opacity: 0; filter: blur(8px);
      }
      40.1%, 100% {
        transform: translateX(-120%) rotate(-9deg) scale(0.84);
        opacity: 0; filter: blur(8px);
      }
    }
  }

  }


  /* ================== hlavička: jedna řada, jinak vyjíždějící menu ==================
     Dřív se lišta při nedostatku místa lámala do dvou řad a tlačítka se rozházela.
     Teď se nic nezlomí: na široké obrazovce je všechno v jedné řadě, a jakmile
     by se to přestalo vejít, kontakty se zkrátí na telefon a odkazy se schovají
     pod tlačítko Menu, které vysune panel pod lištu. */

  .topbar {
    flex-wrap: nowrap;
    gap: 1rem 2rem;
    align-items: center;
  }

  .kontakt-blok { flex-wrap: nowrap; min-width: 0; }

  .nav-obal {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
  }

  .odkazy-nahore { flex-wrap: nowrap; gap: 0.5rem; }

  .menu-tlacitko {
    display: none;
    align-items: center;
    gap: 0.6rem;
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(14, 19, 34, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--hairline);
    padding: 0.7rem 1.2rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .menu-tlacitko .carky { display: inline-flex; flex-direction: column; gap: 4px; width: 1rem; }
  .menu-tlacitko .carky i {
    display: block; height: 1px; background: currentColor;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  .menu-tlacitko:hover { background: var(--champagne); color: var(--ground); border-color: var(--champagne); }
  .menu-tlacitko:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

  /* Otevřené menu pozná člověk i podle tlačítka: čárky se složí do křížku. */
  .menu-tlacitko[aria-expanded="true"] {
    background: var(--champagne); color: var(--ground); border-color: var(--champagne);
  }
  .menu-tlacitko[aria-expanded="true"] .carky i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-tlacitko[aria-expanded="true"] .carky i:nth-child(2) { opacity: 0; }
  .menu-tlacitko[aria-expanded="true"] .carky i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Kontakty se neschovávají kvůli menu — na ty je i na užším okně místa dost.
     Ubírají se až tehdy, kdy by se opravdu nevešly, a v tomhle pořadí:
     nejdřív jméno firmy (je to jen popisek), pak mail, úplně nakonec Instagram.
     Telefon zůstává vždycky, to je to hlavní, proč sem lidi chodí. */
  @media (max-width: 30rem) {
    .kontakt-blok a[href*="instagram"] { display: none; }
  }

  @media (min-width: 0px) {
    .menu-tlacitko { display: inline-flex; }

    .odkazy-nahore {
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 5;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-width: 13.5rem;
      margin-top: 0.55rem;
      padding: 0.35rem;
      background: rgba(12, 17, 30, 0.94);
      backdrop-filter: blur(16px);
      border: 1px solid var(--hairline);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.6rem);
      transition: opacity 0.22s ease,
                  transform 0.22s cubic-bezier(0.22, 0.7, 0.3, 1),
                  visibility 0.22s;
    }

    .odkazy-nahore.otevrene { opacity: 1; visibility: visible; transform: translateY(0); }

    /* V panelu nejsou rámečkované knoflíky, ale řádky nabídky pod sebou. */
    .odkazy-nahore .odkaz-nahore {
      width: 100%;
      text-align: left;
      background: none;
      backdrop-filter: none;
      border: 0;
      padding: 0.95rem 1.1rem;
    }
    .odkazy-nahore .odkaz-nahore + .odkaz-nahore {
      border-top: 1px solid rgba(212, 219, 230, 0.1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .odkazy-nahore, .menu-tlacitko .carky i { transition: none; }
  }

  /* Typ karoserie vyjede az po zvoleni osobniho automobilu - u dodavky,
     motorky nebo obytneho vozu je kategorie zaroven karoserii. */
  /* Pozor: .pole ma display:flex, a to prebije skryti pres atribut hidden.
     Bez tohohle radku bylo pole oznacene jako skryte, ale stejne se kreslilo. */
  #pole-karoserie[hidden] { display: none !important; }

  #pole-karoserie { animation: pole-vyjed 0.24s cubic-bezier(0.22, 0.7, 0.3, 1); }

  @keyframes pole-vyjed {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    #pole-karoserie { animation: none; }
  }

  /* ================== podstránky ==================
     Služby, Galerie, O nás, Kontakt a Recenze jsou samostatné stránky.
     Obsah leží na stejném bílém listu jako rezervační formulář, aby web
     držel pohromadě — jen list neplave v okně, ale přímo na stránce. */

  .podstranka {
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(6.5rem, 15vh, 9.5rem) 1rem clamp(3rem, 8vh, 5rem);
  }

  .podstranka .rez.list {
    width: 100%;
    max-width: 46rem;
  }

  /* Na stránce se nescrolluje uvnitř listu, ale celou stránkou. */
  .podstranka .rez.list > .rez-box {
    max-height: none;
    overflow: visible;
  }

  .rez.list h1.nadpis-sekce { margin-top: 0; }

  .zpet {
    align-self: flex-start;
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--akcent);
    text-decoration: none;
    border: 1px solid var(--linka);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .zpet:hover { background: var(--akcent); color: #fff; border-color: var(--akcent); }
  .zpet:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

  .pripravujeme { color: var(--ink-3); margin: 0; }

  /* ---- kontaktní údaje ---- */
  .kontakty { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }

  .kontakty li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linka-2);
  }
  .kontakty li:last-child { border-bottom: none; padding-bottom: 0; }

  .kontakt-popisek {
    font-family: "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .kontakty a { color: var(--ink); text-decoration: none; font-size: 1.05rem; }
  .kontakty a:hover { color: var(--akcent); text-decoration: underline; }

  /* ---- menu je vždycky pod tlačítkem ----
     Šest položek se do jedné řady nevejde ani na velké obrazovce, tak se
     nabídka nikde neroztahuje a všude se otevírá stejně. */
  .menu-tlacitko { display: inline-flex !important; }

  /* Název firmy je zároveň odkaz domů, takže se nesmí nikdy schovat.
     Na úzkém displeji se jen zkrátí na "Carlux", aby se vešel vedle telefonu. */
  .znacka-kratka { display: none; }

  @media (max-width: 52rem) {
    .znacka-nahore { padding-right: 0.9rem; }
    .znacka-dlouha { display: none; }
    .znacka-kratka { display: inline; }
  }

  /* ---- recenze na bílém listu ---- */
  .recenze + .recenze { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--linka-2); }

  .recenze .hvezdy {
    margin: 0 0 0.5rem;
    color: #c8a86a;
    letter-spacing: 0.15em;
    font-size: 0.95rem;
  }
  .recenze .hvezdy span { color: var(--linka); }

  .recenze blockquote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink);
  }

  .recenze .kdo {
    margin: 0.6rem 0 0;
    font-family: "Archivo", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ---- Ceník má vlastní tlačítko vedle Menu ----
     Je to to, co lidi hledají nejčastěji, tak se neschovává do nabídky.
     Šampaňský obrys ho odliší od Menu, aniž by křičel. */
  .nav-obal { gap: 0.5rem; }

  .cenik-tlacitko {
    font-family: "Archivo", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--champagne);
    background: rgba(14, 19, 34, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--champagne);
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .cenik-tlacitko:hover { background: var(--champagne); color: var(--ground); }
  .cenik-tlacitko:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

  @media (max-width: 26rem) {
    .cenik-tlacitko { padding: 0.7rem 1rem; letter-spacing: 0.14em; }
  }

  /* Na úzkém displeji je v liště čtveřice: Carlux, telefon, Ceník, Menu.
     Aby se nepřekrývaly, zůstane z telefonu jen sluchátko — zavolat jde pořád. */
  @media (max-width: 34rem) {
    #tel-nahore span { display: none; }
    #tel-nahore svg { width: 1.25rem; height: 1.25rem; opacity: 1; }
  }