/* ==========================================================================
   Ukázka „VoltPro“ — elektroinstalace novostaveb a rekonstrukcí, Praha
   --------------------------------------------------------------------------
   Z ukazka.css si bere jen reset a lištu „ukázkový web“; všechno ostatní
   má prefix .v-.

   NÁVRHOVÉ VÝCHODISKO — „světlo ve tmě“
   Třetí ukázka musí sedět na třetího zákazníka. Vodařina 24 je havárie
   (chci záchranu hned), Elektro Novák je revize (chci doklad). VoltPro je
   novostavba a rekonstrukce: člověk, který se rozhoduje týdny dopředu,
   porovnává firmy a chce vidět rozsah a termín. Ten se nerozhoduje palcem
   ve tři ráno ani podle ceny revize bytu — chce mít pocit, že si zve
   partii, která tohle dělá denně.

   Odtud tmavá plocha a světlo: elektrikář v novostavbě prodává to, že se
   ve vyzděné šedé krabici rozsvítí. Značka je neon, takže záře není ozdoba,
   ale přímo to, co firma dodává.

   Čtyři pravidla, která drží celý návrh pohromadě:

   1. SVÍTÍ JEN TO, CO JE AKCE NEBO STAV.
      Oranžová (#fd9500 z loga) je telefon, tlačítka a živé údaje. Nic
      jiného na stránce nezáří. Na tmavé ploše je světlo to nejsilnější,
      co máme — rozdat ho všemu znamená nemít ho nikde.

   2. BENTO: VELIKOST DLAŽDICE JE VÝZNAM, NE VÝPLŇ MŘÍŽKY.
      Kdo staví, nečte odshora dolů — projíždí očima a hledá „děláte moji
      věc?“. Deska odpoví naráz. Největší dlaždice je proto vždy ta, která
      má největší váhu (nabídka, telefon), ne ta, do které zbylo místo.

   3. SKLO JEN TAM, KDE JE CO PROSVÍTAT.
      backdrop-filter stojí výkon a přes plochou černou nedělá vůbec nic.
      Rozostření má proto jen hlavička a dlaždice v hero, tedy to, co leží
      nad světelným přechodem a nad fotkou. Zbytek stránky má obyčejnou
      průsvitnou výplň, která vypadá stejně a nic nestojí.

   4. KULATÉ TVARY MÍSTO OSTRÝCH.
      Tlačítka jsou plně oblá, dlaždice mají velký rádius. Je to vědomý
      protiklad k Elektru Novák, kde jsou pravé úhly a linky jako ve
      formuláři — dvě ukázky se stejnou geometrií by prozradily šablonu,
      i kdyby měly jiné barvy.

   Písmo je Archivo jako u obou předchozích ukázek (jiná dvojice by stránku
   zbytečně zatížila o dva woff2), ale na jiné ose: tady jde na wdth 125
   a váhu 800, tedy roztažené a těžké. Vodařina má 112, Novák základních
   100. Odlišnost nese rozvržení, barva a světlo, ne jiný font.
   ========================================================================== */

/* --- Písma (lokální, font-src 'self') ------------------------------------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Základ
   ========================================================================== */
.v-stranka {
  --v-tma:   #090b10;
  --v-deska: #11141d;
  --v-sklo:        rgba(255, 255, 255, .055);
  --v-sklo-silne:  rgba(255, 255, 255, .085);
  --v-okraj:       rgba(255, 255, 255, .105);
  --v-okraj-silny: rgba(255, 255, 255, .18);

  --v-bila: #fff;
  --v-text: rgba(255, 255, 255, .7);
  --v-tlum: rgba(255, 255, 255, .46);

  --v-ohen: #fd9500;          /* z loga — AKCE a živé údaje, nic jiného */
  --v-ohen-svit: rgba(253, 149, 0, .34);
  --v-ohen-slabe: rgba(253, 149, 0, .12);

  --v-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --v-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --v-demo: 0px;              /* výšku lišty „ukázkový web“ dopočítá JS */
  --v-hlava: 68px;
  --v-radius: 22px;
  --v-sekce: clamp(3rem, 1.8rem + 4.8vw, 5.5rem);

  position: relative;
  background: var(--v-tma);
  color: var(--v-text);
  font-family: var(--v-sans);
  font-size: 17px;
  line-height: 1.62;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .v-stranka { scroll-behavior: auto; } }

/* Světelné přechody na pozadí. Jsou tu ze dvou důvodů: plochá černá vypadá
   levně a hlavně by sklo nemělo co rozostřovat — backdrop-filter přes
   jednolitou plochu nedělá nic. Pevná vrstva, aby se při scrollování
   nepřepočítávala. */
.v-stranka::before {
  content: "";
  /* z-index: -1, aby vrstva ležela za obsahem sama od sebe. Dřív měla 0
     a obsah se nad ni zvedal pravidlem .v-stranka > * { position: relative;
     z-index: 1 }. Jenže to pravidlo sedělo i na liště „ukázkový web“, která
     má z ukazka.css position: sticky — a relative jí ji přebilo (stejná
     specificita, tenhle stylopis se načítá později). Lišta tím přestala
     být lepivá a při scrollování odjela pryč. */
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%,  rgba(253, 149, 0, .17), transparent 60%),
    radial-gradient(44rem 34rem at 6% 18%,   rgba(96, 132, 255, .10), transparent 62%),
    radial-gradient(50rem 40rem at 50% 108%, rgba(253, 149, 0, .08), transparent 60%);
}

:where(.v-stranka) h1,
:where(.v-stranka) h2,
:where(.v-stranka) h3 {
  font-family: var(--v-sans);
  color: var(--v-bila);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}
:where(.v-stranka) a { color: inherit; }
:where(.v-stranka) img { display: block; max-width: 100%; height: auto; }

.v-stranka :target { scroll-margin-top: calc(var(--v-demo) + var(--v-hlava) + 2rem); }
.v-stranka :focus-visible {
  outline: 2px solid var(--v-ohen);
  outline-offset: 3px;
  border-radius: 999px;
}

.v-wrap { width: min(93%, 1200px); margin-inline: auto; }
.v-sekce { padding-block: var(--v-sekce); }
.v-cislice { font-family: var(--v-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ==========================================================================
   Odkrývání při doscrollování
   ========================================================================== */
.v-js .v-odkryv { opacity: 0; transform: translateY(16px); }
.v-js .v-odkryv.je-videt {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--v-zpozdeni, 0) * 65ms);
}
@media (prefers-reduced-motion: reduce) {
  .v-js .v-odkryv, .v-js .v-odkryv.je-videt { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Sklo
   Jedna třída, dvě varianty. .v-sklo--zive má rozostření a používá se jen
   tam, kde pod dlaždicí něco je (hlavička, hero). Všude jinde by blur
   spotřeboval výkon a nebylo by ho vidět.
   ========================================================================== */
.v-sklo {
  position: relative;
  background: var(--v-sklo);
  border: 1px solid var(--v-okraj);
  border-radius: var(--v-radius);
}
/* Světelný lem po horní hraně — bez něj vypadá sklo jako šedý obdélník.
   Je to jediná ozdoba na stránce a stojí jeden pseudoprvek. */
.v-sklo::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 42%);
  mask-image: linear-gradient(180deg, #000 0 42%, transparent 42%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 42%);
}
.v-sklo--zive {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Prohlížeč bez backdrop-filter (starší Androidy, Firefox s vypnutým
   nastavením) by z průsvitné dlaždice udělal jen o chlup světlejší plochu
   a dlaždice v hero by splynuly s pozadím. Třídu nasazuje skript po testu
   CSS.supports; plná výplň vypadá jinak, ale zůstane čitelná. */
.v-bez-skla .v-sklo { background: var(--v-deska); }
.v-bez-skla .v-head { background: rgba(9, 11, 16, .97); }
.v-bez-skla .v-dlazdice--volat {
  background: linear-gradient(140deg, #2a1d06, #16161c);
}
.v-bez-skla .v-kontakt-deska {
  background: linear-gradient(150deg, #2a1d06, #14161f 58%);
}

/* ==========================================================================
   Bento
   Šest sloupců, dlaždice si říkají o šířku i výšku proměnnými. Na mobilu
   se všechno srovná pod sebe — bento se čte jako deska jen tehdy, když je
   vidět celá; na úzkém displeji by z toho byl jen sloupec s divnými výškami.
   ========================================================================== */
.v-bento { display: grid; gap: .9rem; }
@media (min-width: 46rem) {
  .v-bento { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .v-bento > * { grid-column: span var(--v-sir, 3); }
  .v-bento > [style*="--v-vys"] { grid-row: span var(--v-vys); }
}
.v-dlazdice { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.v-dlazdice--tesna { padding: 0; overflow: hidden; }

/* ==========================================================================
   Hlavička
   ========================================================================== */
.v-head {
  position: sticky; top: var(--v-demo); z-index: 40;
  background: rgba(9, 11, 16, .6);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.v-head.je-posunuta { background: rgba(9, 11, 16, .88); border-bottom-color: var(--v-okraj); }
.v-head-in { display: flex; align-items: center; gap: 1.5rem; min-height: var(--v-hlava); }

.v-logo { display: inline-flex; align-items: center; flex: none; }
.v-logo img { height: 42px; width: auto; }

.v-menu {
  display: none; margin: 0 auto 0 .5rem; padding: 0; list-style: none;
  gap: .3rem; font-size: .9375rem; font-weight: 600;
}
.v-menu a {
  display: block; padding: .45rem .9rem; border-radius: 999px;
  text-decoration: none; color: var(--v-text);
  transition: background .18s ease, color .18s ease;
}
.v-menu a:hover { background: var(--v-sklo-silne); color: var(--v-bila); }
@media (min-width: 64rem) { .v-menu { display: flex; } }

.v-head-vpravo { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
/* V hlavičce je tlačítko nižší: v pruhu vysokém 68 px vypadala plná výška
   jako přetlak a tlačila na logo i na telefon. */
.v-head .v-btn { padding: .58rem 1.3rem; font-size: .875rem; }
.v-head-tel { display: none; text-decoration: none; font-weight: 700; color: var(--v-bila); white-space: nowrap; }
@media (min-width: 34rem) { .v-head-tel { display: block; } }

/* ==========================================================================
   Tlačítka — plně oblá
   ========================================================================== */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.6rem; border-radius: 999px;
  font-family: var(--v-sans); font-size: .9375rem; font-weight: 700;
  /* Bez vlastního řádkování zdědí tlačítko 1.62 ze stránky a je o osm
     pixelů vyšší, než vypadá jeho vlastní odsazení. */
  line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .25s ease, transform .18s ease;
}
.v-btn--ohen {
  background: var(--v-ohen); color: #1b1000;
  box-shadow: 0 0 0 0 var(--v-ohen-svit), 0 10px 30px -12px var(--v-ohen-svit);
}
.v-btn--ohen:hover {
  background: #ffa61f;
  box-shadow: 0 0 0 6px var(--v-ohen-slabe), 0 14px 34px -12px var(--v-ohen-svit);
}
.v-btn--sklo { background: var(--v-sklo-silne); color: var(--v-bila); border-color: var(--v-okraj-silny); }
.v-btn--sklo:hover { background: rgba(255, 255, 255, .14); }
.v-btn--velke { padding: 1.05rem 2rem; font-size: 1rem; }
.v-btn svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: no-preference) {
  .v-btn--ohen:hover, .v-btn--sklo:hover { transform: translateY(-1px); }
}

/* Telefon jako oblá pilulka. Na ukázce nevede na tel:, ale na kotvu —
   čísla jsou smyšlená a mohla by patřit skutečnému člověku. */
.v-tel { gap: .7rem; }
.v-tel strong { font-family: var(--v-mono); font-size: 1.0625rem; font-weight: 700; }

/* ==========================================================================
   Štítky a nadpisy sekcí
   ========================================================================== */
.v-stitek {
  /* align-self, protože dlaždice je sloupcový flex a ten by pilulku roztáhl
     přes celou šířku — z odznaku by byl pruh. */
  display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem;
  padding: .35rem .85rem .35rem .6rem; margin-bottom: 1.1rem;
  border-radius: 999px; background: var(--v-ohen-slabe);
  border: 1px solid rgba(253, 149, 0, .22);
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #ffc367;
}
.v-stitek::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--v-ohen); box-shadow: 0 0 10px 2px var(--v-ohen-svit);
}
.v-hlavicka { max-width: 46rem; margin-bottom: 2.4rem; }
.v-nadpis { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem); }
.v-perex { margin-top: 1rem; color: var(--v-tlum); font-size: 1.0625rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.v-hero { padding-block: clamp(1.6rem, 1rem + 2.6vw, 2.8rem) var(--v-sekce); }
.v-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); }
.v-hero-lead { margin-top: 1.2rem; color: var(--v-tlum); font-size: 1.0625rem; max-width: 34rem; }
.v-hero-akce { margin-top: auto; padding-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Fotka na celou dlaždici, s přechodem dolů, aby popisek držel čitelnost. */
.v-foto { position: relative; overflow: hidden; border-radius: var(--v-radius); min-height: 15rem; }
.v-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Široký pás pod ceníkem. Bez vlastního poměru mu výšku určila jen
   min-height a object-fit: cover z fotky 2:1 vyřízl proužek 5:1 — technikovi
   to uřízlo hlavu. Poměr sedí na skutečný poměr souboru, takže se nic
   neořezává a nemusí se hádat object-position. */
.v-foto--pas { aspect-ratio: 1800 / 686; min-height: 0; }

.v-foto--kryt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9, 11, 16, .88) 0%, rgba(9, 11, 16, .25) 38%, transparent 68%);
}
.v-foto-popis {
  position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; z-index: 2;
  font-size: .9375rem; color: rgba(255, 255, 255, .88);
}
.v-foto-popis b { display: block; color: var(--v-bila); font-weight: 800; font-size: 1.0625rem; }

/* Údaj v dlaždici: velké číslo a popis pod ním. */
.v-udaj { justify-content: center; }
.v-udaj b {
  display: block; font-family: var(--v-mono); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 700; color: var(--v-bila); line-height: 1; letter-spacing: -.045em;
}
.v-udaj b small { font-size: .55em; font-weight: 500; color: var(--v-tlum); letter-spacing: 0; }
.v-udaj span { display: block; margin-top: .55rem; font-size: .8125rem; line-height: 1.4; color: var(--v-tlum); }

/* Dlaždice s telefonem — nejzářivější místo v hero. */
.v-dlazdice--volat {
  justify-content: center; gap: 1rem;
  background: linear-gradient(140deg, rgba(253, 149, 0, .16), rgba(253, 149, 0, .04));
  border-color: rgba(253, 149, 0, .26);
}
.v-volat-popis { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffc367; }
.v-volat-cislo {
  display: block; margin-top: .3rem; font-family: var(--v-mono);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); font-weight: 700;
  color: var(--v-bila); letter-spacing: -.045em; text-decoration: none;
}

/* ==========================================================================
   Služby — bento s různě velkými dlaždicemi
   ========================================================================== */
.v-sluzba { gap: .7rem; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.v-sluzba:hover { border-color: var(--v-okraj-silny); background: var(--v-sklo-silne); }
@media (prefers-reduced-motion: no-preference) { .v-sluzba:hover { transform: translateY(-3px); } }
.v-sluzba-znak {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: .3rem;
  border-radius: 999px; background: var(--v-ohen-slabe); color: var(--v-ohen);
  border: 1px solid rgba(253, 149, 0, .2);
}
.v-sluzba-znak svg { width: 24px; height: 24px; }
.v-sluzba h3 { font-size: 1.125rem; }
.v-sluzba p { font-size: .9375rem; color: var(--v-tlum); }
/* Výčet v hlavní dlaždici. Odrážka je zářící tečka, ne fajfka — fajfka
   slibuje odškrtnutý stav, tohle je obsah dodávky. */
.v-body { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.v-body li {
  position: relative; padding-left: 1.4rem;
  font-size: .9375rem; color: var(--v-text);
}
.v-body li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v-ohen); box-shadow: 0 0 9px 1px var(--v-ohen-svit);
}

.v-sluzba-vic {
  margin-top: auto; padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .4rem;
}
.v-znacka {
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--v-sklo-silne); border: 1px solid var(--v-okraj);
  font-size: .75rem; font-weight: 600; color: var(--v-text);
}

/* ==========================================================================
   Průběh stavby — vodorovná osa
   ========================================================================== */
.v-etapy { display: grid; gap: 1rem; counter-reset: v-etapa; }
@media (min-width: 52rem) { .v-etapy { grid-template-columns: repeat(5, 1fr); gap: .9rem; } }
.v-etapa { position: relative; counter-increment: v-etapa; gap: .55rem; }
.v-etapa-cislo {
  display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 999px; background: var(--v-sklo-silne); border: 1px solid var(--v-okraj-silny);
  font-family: var(--v-mono); font-size: .8125rem; font-weight: 700; color: var(--v-bila);
}
.v-etapa:last-child .v-etapa-cislo {
  background: var(--v-ohen); border-color: var(--v-ohen); color: #1b1000;
  box-shadow: 0 0 22px -2px var(--v-ohen-svit);
}
.v-etapa h3 { font-size: 1rem; margin-top: .3rem; }
.v-etapa p { font-size: .875rem; color: var(--v-tlum); }
.v-etapa-kdy {
  margin-top: auto; padding-top: .9rem;
  font-family: var(--v-mono); font-size: .8125rem; color: #ffc367; letter-spacing: -.02em;
}

/* ==========================================================================
   Ceny
   ========================================================================== */
.v-cena b {
  display: block; font-family: var(--v-mono); font-size: 1.75rem; font-weight: 700;
  color: var(--v-bila); letter-spacing: -.045em; line-height: 1;
}
.v-cena b small { font-size: .5em; font-weight: 500; color: var(--v-tlum); letter-spacing: 0; }
.v-cena h3 { font-size: 1rem; margin-top: .75rem; }
.v-cena p { margin-top: .4rem; font-size: .875rem; color: var(--v-tlum); }
.v-ceny-pozn { margin-top: 1.3rem; font-size: .875rem; color: var(--v-tlum); }

/* ==========================================================================
   Dotazy
   ========================================================================== */
/* Otázky samotné by na širokém displeji nechaly půlku sekce prázdnou.
   Vedle nich stojí dlaždice s výzvou — na bento desce je to přirozenější
   než prázdno a je to zároveň jediná cesta k telefonu v dolní třetině
   stránky. Drží se při scrollování, takže je vidět i u poslední otázky. */
.v-faq-mrizka { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 62rem) { .v-faq-mrizka { grid-template-columns: 1fr 19rem; gap: 1.4rem; } }
.v-faq-vyzva { gap: .8rem; }
@media (min-width: 62rem) {
  .v-faq-vyzva { position: sticky; top: calc(var(--v-demo) + var(--v-hlava) + 1.4rem); }
}
.v-faq-vyzva h3 { font-size: 1.125rem; }
.v-faq-vyzva p { font-size: .9375rem; color: var(--v-tlum); }

.v-faq { display: grid; gap: .7rem; }
.v-otazka { padding: 0; overflow: hidden; }
.v-otazka summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.5rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--v-bila);
}
.v-otazka summary::-webkit-details-marker { display: none; }
.v-otazka summary:hover { color: var(--v-ohen); }
.v-znak {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 999px; background: var(--v-sklo-silne); border: 1px solid var(--v-okraj);
  position: relative;
}
.v-znak::before, .v-znak::after {
  content: ""; position: absolute; width: 11px; height: 2px; border-radius: 2px;
  background: var(--v-ohen); transition: transform .2s ease;
}
.v-znak::after { transform: rotate(90deg); }
.v-otazka[open] .v-znak::after { transform: rotate(0); }
.v-otazka-telo { padding: 0 3.6rem 1.3rem 1.5rem; font-size: .9688rem; color: var(--v-tlum); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.v-kontakt-deska {
  padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  background: linear-gradient(150deg, rgba(253, 149, 0, .14), rgba(255, 255, 255, .04) 55%);
  border-color: rgba(253, 149, 0, .22);
}
.v-kontakt-mrizka { display: grid; gap: 2.2rem; }
@media (min-width: 56rem) { .v-kontakt-mrizka { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.v-udaje { margin: 0; display: grid; gap: .9rem; }
.v-udaje > div { padding-bottom: .9rem; border-bottom: 1px solid var(--v-okraj); }
.v-udaje dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--v-tlum); }
.v-udaje dd { margin: .3rem 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--v-bila); }
.v-pozn { margin-top: 1.6rem; font-size: .8125rem; color: var(--v-tlum); }