/* =========================================================================
   NEW ANGLE — jediný stylesheet
   =========================================================================
   00 — Proměnné
   01 — Reset
   02 — Písma
   03 — Typografie
   04 — Layout
   05 — Značka
   06 — Hlavička a navigace
   07 — Tlačítka a odkazy
   08 — Pohyb
   09 — Pomocné třídy
   10 — Úvod
   10b — Odpočet
   11 — Proč NEW ANGLE
   12 — Práce
   13 — Služby
   13b — Ceník
   14 — Průsečík
   15 — Kontakt a patička
   18 — Zásady, popisy pro SEO a informační lišta

   Styly pro `styleguide.html` sem NEPATŘÍ — jsou v <style> přímo v něm.
   Styleguide na produkci nejde a produkční stylesheet nemá nést jeho mřížku.
   ========================================================================= */


/* === 00 — Proměnné ====================================================== */

:root {
  /* --- Úhel -------------------------------------------------------------
     JEDINÁ hodnota, ze které vychází každý náklon, řez a maska na webu.
     Nic nesmí být pod náhodným úhlem — to je celý ten systém. */
  --uhel: 7deg;
  --uhel-tan: 0.1228;          /* tan(7°) — pro výpočty výšky řezu z šířky */

  /* --- Barvy: JEN černá, bílá a šedá -------------------------------------
     Web nemá barvu. Stojí na čisté černé, píše bílou a jediné, co plochu
     rozehrává, je měkký šedý opar — „sem tam lehký nádech“, ne barevné pole.

     MODRÁ A TYRKYSOVÁ TU BYLY A ODEŠLY na přání klienta. Byla to celá
     poloha: skvrny, plochy, akcent, záře hlavičky. Nevracet bez vyžádání.

     Šedá je ZÁMĚRNĚ skoro neutrální. Předchozí šedá `#8FA3B4` měla modrý
     spád, který dával smysl vedle modré — na holé černé by ale četl přesně
     jako ta odstraněná modrá. */
  --cerna:         #000000;    /* podklad stránky */
  --plocha-zaklad: #000000;
  --bila:          #FFFFFF;    /* text */
  --seda-svit:     #C9CBCF;    /* skvrny, akcent — na černé 12,93:1 */
  --text-svetly:   #BABDC2;    /* tlumený text, 5,09:1 i na skle nad skvrnou */
  --linka-svetla:  rgba(255, 255, 255, 0.14);

  /* Padající hvězdy na cloně — JEDINÁ barva na jinak černobílém webu, a je
     to vědomá výjimka na přání klienta. Nikde jinde se nepoužívá.

     Jádro je skoro bílé s modrým nádechem, sytá modř je až v záři. Barva
     nese ZÁŘ, ne kresbu: na čáře vysoké 1 px by sytější jádro proti černé
     zešedlo místo aby svítilo. */
  --hvezda-jadro: rgba(224, 244, 255, 0.95);
  --hvezda-svit:  rgba(178, 232, 240, 0.80);
  --hvezda-zare:  rgba(126, 212, 222, 0.60);

  /* --- JEDINÁ BARVA WEBU -------------------------------------------------
     Světlá tyrkysová `rgb(126, 212, 222)`. Nic jiného barevného na webu
     není.

     Prošly tudy a odešly zeleno-tyrkysová a neutrální šedá jako druhé
     a třetí skvrny: při přejezdu na video se barvy pozadí a obrazu
     rozcházely a bylo to znát. Jedna barva ten přechod drží pohromadě.

     Na černé má 12,36:1, takže projde i jako text — a používá se tak:
     pole skvrn, závoj přes video, ukazatel postupu v liště, číslo na
     druhém slajdu i záře padajících hvězd.

     Odstín prošel dvěma koly: nejdřív sytá modrá `rgb(38, 112, 214)`, pak
     světlejší `rgb(90, 169, 255)` a teď tahle světlá tyrkysová. Klient ji
     chtěl světlejší a tlumenější. */
  --barva:        rgb(126, 212, 222);
  --skvrna-barva: 126, 212, 222;

  /* Strop krytí. Mez drží MOBIL, ne desktop: velikost skvrn je v `rem`,
     ale rozmístění v procentech dokumentu, takže na úzkém okně se jich přes
     sebe poskládá mnohem víc a pole je jasnější. Změřeno vykreslením celého
     pole a hledáním nejjasnějšího pixelu, ve skladbě pole → zrno → sklo:

       375 px  5,05:1      768 px  5,29:1      1440 px  5,81:1

     Zrno se do skladby MUSÍ počítat — je to světlý šum přes celý web, takže
     podklad zvedá. Bez něj vycházelo 0,24 ještě jako průchozí, se zrnem
     spadlo na 4,32:1. */
  /* Strop krytí skvrn. Platí od 48 rem výš; níž se všechny alfy násobí
     `--pole-sila`, protože mez drží MOBIL. Skvrny mají velikost v `rem`
     (42–46 rem, přes 670 px), takže se na úzké obrazovce překrývají mnohem
     víc a pole je jasnější. Změřeno vykreslením a hledáním nejjasnějšího
     pixelu, ve skladbě pole → mřížka → zrno → sklo:

       od 48 rem   krytí 0,15 → nejhorší 5,03:1 (768 px)
       pod 48 rem  krytí 0,11 → nejhorší 4,95:1 (375 px)

     Krytí je ZÁMĚRNĚ POD MEZÍ (0,18 a 0,13): klient chtěl barvu ztlumit,
     takže je pole slabší, než co by kontrast ještě unesl.

     Jeden násobek místo druhé sady spádů: přepsat 50 zarážek dvakrát je
     cesta k tomu, že se jedna z nich časem rozejde s druhou. */
  --skvrna-max: 0.15;
  /* Plná síla. Dither (rastr ve WebGL pod polem) tu byl a odešel;
     dokud byl, nesl polovinu barvy a pole jelo na 0,5 / 0,365. */
  --pole-sila: 1;

  /* --- Sklo -------------------------------------------------------------
     Matné sklo z předlohy — a ta je taky tmavá: průsvitná BÍLÁ v nízkém
     krytí, rozostřený podklad, světlá hrana, měkký stín.

     Krytí 0,07 je zároveň záruka kontrastu: i kdyby prohlížeč
     `backdrop-filter` neuměl, zůstane pod textem stejně tmavá plocha
     a měření platí. Nad nejjasnější skvrnou drží bílá 8,30:1. */
  --sklo:        rgba(255, 255, 255, 0.07);
  --sklo-silne:  rgba(255, 255, 255, 0.12);
  --sklo-hrana:  rgba(255, 255, 255, 0.16);
  --sklo-stin:   0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.6);
  --sklo-rozostreni: blur(18px) saturate(1.4);

  /* Role — sekce si je přepisují, komponenty sahají jen sem. */
  --plocha:     var(--cerna);
  --text:       var(--bila);
  --text-mute:  var(--text-svetly);
  --linka:      var(--linka-svetla);
  --akcent:     var(--seda-svit);

  /* --- Typografie ------------------------------------------------------- */
  /* Systémové písmo — dnes už jen ZÁLOHA za Urbanistem (než se stáhne, nebo
     kdyby se nestáhl). Na Macu a iPhonu je to SF Pro, tedy přesně to, co
     používá Apple. SF Pro se NESMÍ hostovat — licence Applu ji váže na
     vývoj pro jejich platformy — takže se nestahuje, jen se o ni řekne
     systému. Na Windows z toho vyjde Segoe UI, na Androidu Roboto:
     pokaždé systémové písmo daného zařízení, což je tentýž princip. */
  /* SF Pro se NESMÍ hostovat. Licence Applu ji váže na vývoj pro jejich
     platformy, takže stáhnout soubor z apple.com a nahrát ho na server je
     porušení. Proto se o písmo jen ŘEKNE SYSTÉMU — a výsledek je týž:
     na Macu a iPhonu z toho vyjde San Francisco, tedy přesně to, co má
     Apple. Na Windows Segoe UI, na Androidu Roboto.

     Ověřeno měřením šířky vzorku při 40 px: lišta kreslí 459,59 px, což
     sedí na `system-ui` (přes `BlinkMacSystemFont`). `-apple-system` dává
     460,49 px — je to týž San Francisco, jen jiný optický řez. Helvetica
     Neue by dala 482,37 a Arial 485,43, takže systémové písmo se opravdu
     použilo a nepropadlo se na náhradu.

     POZNÁMKA K LADĚNÍ: Chrome vypisuje `BlinkMacSystemFont` v computed
     stylu jako `"system-ui"` v uvozovkách. Vypadá to jako chyba zápisu,
     ale není — nehledat tu chybu znovu. */
  --pismo-apple: -apple-system, BlinkMacSystemFont, system-ui,
                 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;

  /* VŠECHNO sází Urbanist, stejně jako Amazing Heroes (klient: „u všeho
     používej font jak u Amazing Heroes“). Prošly tudy a odešly Outfit
     (obsah), Geist Mono (drobné popisky) a systémové písmo (lišta). Jen
     čísla na druhém slajdu zůstávají v Syne podle klientovy předlohy. */
  --pismo:      'Urbanist', var(--pismo-apple);
  /* Displejové písmo nadpisu úvodu je URBANIST — totéž, co nese web Amazing
     Heroes. Klient ho chtěl „hlavně u hero textu“.

     Prošlo tudy a odešlo SYSTÉMOVÉ PÍSMO (na Applu SF Pro podle snímku
     z apple.com) a před ním Instrument Serif. Dnes Urbanist nese celý web
     (viz `--pismo`). */
  --pismo-display: 'Urbanist', var(--pismo-apple);
  --pismo-cislo: 'Syne', var(--pismo-display);

  /* Sazba horní lišty. Změřeno na předloze `nebudnoname.cz`, která shodou
     okolností sází taky Outfitem: 12,48 px, prostrkání 0,06 em, verzálky.
     Bereme o půl pixelu víc, protože jdeme na lehčí řez. */
  --t-lista:   0.8125rem;         /* 13 px */
  --prostrk-lista: 0.06em;

  --t-xs:      clamp(0.688rem, 0.672rem + 0.078vw, 0.750rem);   /* 11 → 12 */
  --t-sm:      clamp(0.813rem, 0.781rem + 0.156vw, 0.938rem);   /* 13 → 15 */
  --t-base:    clamp(1.000rem, 0.969rem + 0.156vw, 1.125rem);   /* 16 → 18 */
  --t-md:      clamp(1.188rem, 1.109rem + 0.391vw, 1.500rem);   /* 19 → 24 */
  --t-lg:      clamp(1.500rem, 1.344rem + 0.781vw, 2.125rem);   /* 24 → 34 */
  --t-xl:      clamp(2.125rem, 1.781rem + 1.719vw, 3.500rem);   /* 34 → 56 */
  --t-2xl:     clamp(2.750rem, 1.938rem + 4.063vw, 6.000rem);   /* 44 → 96 */
  /* Velikost nadpisu úvodu je ODVOZENÁ OD ŠÍŘKY NADPISU, ne zvolená.

     Nadpis „See what / others don’t.“ — nejširší řádek „others don’t.“ má
     v Urbanistu 700 5,16 em. 12 vw drží řádek na zhruba 62 % okna (týž
     poměr jako u všech nadpisů předtím). 14,5 svh je strop z výšky: obsah
     úvodu je 2,12 × písmo + 124 px a musí se vejít mezi lištu a rezervu
     pro odznak (na 1280 × 600 nejvýš 89 px).

     PŘI ZMĚNĚ TEXTU NEBO PÍSMA SE TOHLE MUSÍ PŘEMĚŘIT. Prošlo tudy mimo jiné
     9,6 vw (Outfit, tři řádky po diagonále), 6,7 vw („Vytvořme TO, co lidem
     bude chybět.“), 9,2 a 10,8 vw (verzálková anglická varianta). */
  --t-display: clamp(3rem, min(12vw, 14.5svh), 8rem);

  /* Displejová sazba je monumentální: verzálky, KLADNÉ prostrkání, řádkování
     pod jedničkou. Verzálky nemají dolní dotažnice, takže se řádky smí sesadit
     těsněji než u minusky, aniž by do sebe narazily. */
  --lh-display: 0.92;
  --lh-nadpis:  1.05;
  --lh-text:    1.55;
  --ls-display: 0.015em;
  --ls-nadpis:  -0.01em;
  --ls-mono:    0.1em;

  /* --- Prostor ---------------------------------------------------------- */
  --okraj:  clamp(1.25rem, 4vw, 4rem);   /* boční okraj stránky */
  --mezera: clamp(1rem, 2vw, 2rem);      /* mezera ve mřížce */
  --sekce:  clamp(5rem, 12vw, 12rem);    /* svislý rytmus mezi sekcemi */
  --sirka:  90rem;                        /* max. šířka obsahu */

  /* --- Pohyb -----------------------------------------------------------
     Tři doby, dvě křivky. Víc jich nebude. */
  --doba-r: 180ms;                              /* stavy prvků */
  --doba-s: 420ms;                              /* přechody v rozhraní */
  --doba-p: 900ms;                              /* odkrývání obsahu */
  --krivka:       cubic-bezier(0.16, 1, 0.3, 1);   /* dojezd, expo out */
  /* Přelet loga z clony do hlavičky. Vlastní doba i křivka, protože
     `--krivka` je expo-out a odbyla by skoro celý pohyb hned na začátku.

     Hledala se měřením a přes dva extrémy:
       · `cubic-bezier(0.62, 0.03, 0.20, 1)` — v 60 % času 85 % dráhy;
         přelet VYPADAL, že skončil v půlce, a zbytek bylo doplazení,
       · `cubic-bezier(0.34, 0.08, 0.62, 0.98)` — skoro lineární; pohyb sice
         držel do konce, ale konstantní rychlost působí mechanicky.

     Tahle je souměrné S: pomalý rozjezd, rychlý střed, měkký dojezd —
     pohyb je nerovnoměrný, a přesto viditelný až do dosednutí.

     Doba prošla 900 → 1400 → 2000 → 1250 ms. Poměry v `@keyframes` jsou
     na době nezávislé, takže se mění jedno číslo a nic dalšího. */
  --doba-prelet:   1250ms;
  --krivka-prelet: cubic-bezier(0.65, 0, 0.35, 1);

  --krivka-ostra: cubic-bezier(0.7, 0, 0.2, 1);    /* přepnutí stavu */

  /* --- Ostatní ---------------------------------------------------------- */
  /* Hrany jsou měkké — celý web mluví jazykem úvodu, a ten stojí na pilulce.
     `--radius` je poloměr tlačítek a chipů, `--radius-blok` obrázků a panelů. */
  --radius:      999px;
  --radius-blok: 1.25rem;
  --hlavicka-v: 5.5rem;        /* výška hlavičky */

  /* Úvod má vlastní světlou paletu — odebranou přímo z předlohy
     `hero section.png`. Zbytek webu zůstává černý. */
  --uvod-tmava:  #6E747A;      /* horní okraj přechodu */
  --uvod-svetla: #B6C1C6;      /* spodní okraj */
  --uvod-zare:   #DCEDF1;      /* prosvětlení dole uprostřed */
  --uvod-text:   #EAF7F4;      /* nadpis — bledá máta, ne čistá bílá */
}

/* ŽÁDNÁ sekce nemaluje vlastní plochu. Krycí ani průsvitná plocha přeřízne
   pole skvrn vodorovnou hranou a je vidět, kde sekce začíná — pole má přes
   celý web navazovat. Sekce si proto přepisují jen ROLE.

   Odlišení nese pole samo: za Průsečíkem je v něm silnější modrá skvrna. */
.svetla-plocha {
  --plocha:    var(--cerna);
  --text:      var(--bila);
  --text-mute: var(--text-svetly);
  --linka:     var(--linka-svetla);
  --akcent:    var(--seda-svit);
  color: var(--text);
}

.tmava-plocha {
  /* Kdysi to byla hluboká modrá plocha. Na černobílém webu nejde plochu
     odlišit ztmavením — černá je už na dně — takže Průsečík odlišuje
     SILNĚJŠÍ šedý opar v poli za ním. Sekce sama pořád nic nemaluje,
     jen si zesvětlí tlumený text a linky, protože podklad je pod ní
     o něco jasnější. */
  --plocha:    var(--cerna);
  --text:      var(--bila);
  --text-mute: #C6C9CE;
  --linka:     rgba(255, 255, 255, 0.18);
  --akcent:    var(--seda-svit);
  color: var(--text);
}


/* === 01 — Reset ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, ne `hidden` — `hidden` na kořeni udělá ze stránky scrollovací
     kontejner a rozbije scrollové časové osy i `position: sticky`. `clip`
     jen ořízne. Pojistka proti prvkům, které záměrně přetékají mimo obraz. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--plocha-zaklad);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, NE `hidden` — ze stejného důvodu jako na `html`. Kořen má
     `clip`, takže se přetečení z `body` na okno NEPŘENESE a `hidden` by
     z `body` udělalo vlastní scrollovací kontejner, který se nikdy
     neposouvá. `position: sticky` se pak vztahuje k němu a přilepený
     slajd se třemi čísly by se vůbec nepřilepil. */
  overflow-x: clip;
}

/* Pole měkkých skvrn za CELÝM dokumentem — modrá, tyrkysová a šedý opar.

   Je `absolute` přes celou výšku stránky, ne `fixed` přes okno: fixní vrstva
   při scrollu stojí, takže se na každé obrazovce opakovala táž kompozice
   a mezi sekcemi to nenavazovalo. Takhle je to jedna souvislá malba, kterou
   stránka odkrývá shora dolů.

   Skvrny jsou rozmístěné po CELÉ výšce v procentech dokumentu, ale jejich
   VELIKOST je v `rem`, ne v procentech — procenta by se s výškou dokumentu
   roztáhla a z každé skvrny by byl pás přes celou obrazovku.

   `z-index: -1` je tu BEZPEČNÉ: `body` nemá `isolation`, takže vrstva leží
   nad podkladem plátna a pod obsahem. Uvnitř `isolation: isolate` by zmizela
   za vlastní pozadí prvku — narazilo se na to jinde.

   Krytí každé skvrny drží pod `--skvrna-max`; nad tím padá tlumený text.

   SPÁD JE HLADKÝ, ne lineární rampa do `transparent`. Alfa jde podle
   (1 − t²)², rozepsané do deseti zarážek. Ta křivka má NULOVOU derivaci na
   obou koncích, takže spád nemá kde udělat hranu — kdežto rampa končící
   `transparent 70%` má na tom místě zlom a ten je vidět jako světlý
   prstenec kolem skvrny. Přesně ty „čáry zesvětlení“.

   Poslední zarážka je `rgba(<táž barva>, 0)`, ne `transparent`. Rozdíl je
   v tom, co se interpoluje: `transparent` je průhledná ČERNÁ, takže spád
   po cestě ztmavne a u některých vykreslení z toho vznikne šedý lem.

   Změřeno na vykresleném profilu: největší skok mezi sousedními pixely je
   1 stupeň z 256, a to i na nejdelším poloměru (64 rem). To je na hranici
   viditelnosti a zbytek rozbije zrno. */
body { position: relative; }

/* Pole skvrn a mřížka jsou FIXNÍ přes okno — při scrollování STOJÍ a hýbe
   se jen obsah. Klient si to vyžádal.

   Dřív to bylo `absolute` přes celou výšku dokumentu, tedy jedna malba,
   kterou stránka odkrývala shora dolů. Ta poloha odešla i s rozmístěním:
   třináct skvrn rozsazených po 8000 px dokumentu by se ve fixním okně
   slilo do jedné přesvětlené plochy. Pole se proto přeskládalo pro JEDNU
   obrazovku — pět skvrn a slabší krytí.

   Strop krytí spadl z 0,19 na 0,13. Mez drží MOBIL: skvrny mají velikost
   v `rem` (42–46 rem, tedy přes 670 px), takže se na úzké obrazovce
   překrývají mnohem víc. Změřeno vykreslením celého pole a hledáním
   nejjasnějšího pixelu, ve skladbě pole → mřížka → zrno → sklo:

     375×812   4,80:1      768×1024  5,65:1
     1280×720  6,05:1      1920×1080 6,16:1 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Mřížka. Je PRVNÍ v seznamu, tedy nejvýš — kreslí se přes barevný
       opar, ne pod ním. Buňka 80 px a síla čáry jsou obojí změřené
       z klientovy předlohy: v jejím snímku (2×) mají čáry rozestup 160 px
       a jsou o 8 stupňů světlejší než vnitřek buňky, což na tmavém
       podkladu odpovídá bílé v krytí 0,035.

       DLAŽDICE 80×80, NE `repeating-linear-gradient` PŘES CELÝ PRVEK.
       Tenhle prvek je vysoký přes 12 000 px. Opakující se gradient by se
       musel vykreslit v celé té výšce naráz — prohlížeč si ho rastruje do
       textury omezené velikosti a pak ji roztáhne, takže ze 152 opakování
       tenké čáry zbude nepravidelná kaše: některé čáry chybí, jiné jsou
       dvojité nebo rozmazané. Přesně tak se to rozbilo.

       Malá dlaždice se naopak rastruje jednou a ve své skutečné velikosti;
       opakování pak řeší `background-repeat`, kde se nic nepřepočítává.
       Výsledek je proto ostrý bez ohledu na výšku stránky. Velikost se
       nastavuje níž v `background-size` — pro tyhle dvě vrstvy 80px 80px,
       pro skvrny `auto`, ať si drží vlastní rozměr v `rem`.

       Konec je `rgba(255, 255, 255, 0)`, ne `transparent`: zarážky sice
       leží na sobě a mezi nimi se nic neinterpoluje, ale na zlomcích
       zařízených pixelů prohlížeč hranu vyhlazuje — a průhledná ČERNÁ by
       kolem každé čáry udělala tmavý lem. */
    linear-gradient(to right,
      rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px),
    radial-gradient(42rem 30rem at 12% 8%,
      rgba(126, 212, 222, calc(0.15 * var(--pole-sila))) 0%,
      rgba(126, 212, 222, calc(0.1457 * var(--pole-sila))) 12%,
      rgba(126, 212, 222, calc(0.1332 * var(--pole-sila))) 24%,
      rgba(126, 212, 222, calc(0.1136 * var(--pole-sila))) 36%,
      rgba(126, 212, 222, calc(0.0888 * var(--pole-sila))) 48%,
      rgba(126, 212, 222, calc(0.0614 * var(--pole-sila))) 60%,
      rgba(126, 212, 222, calc(0.0348 * var(--pole-sila))) 72%,
      rgba(126, 212, 222, calc(0.013 * var(--pole-sila))) 84%,
      rgba(126, 212, 222, calc(0.0035 * var(--pole-sila))) 92%,
      rgba(126, 212, 222, 0) 100%),
    radial-gradient(46rem 32rem at 88% 14%,
      rgba(126, 212, 222, calc(0.15 * var(--pole-sila))) 0%,
      rgba(126, 212, 222, calc(0.1457 * var(--pole-sila))) 12%,
      rgba(126, 212, 222, calc(0.1332 * var(--pole-sila))) 24%,
      rgba(126, 212, 222, calc(0.1136 * var(--pole-sila))) 36%,
      rgba(126, 212, 222, calc(0.0888 * var(--pole-sila))) 48%,
      rgba(126, 212, 222, calc(0.0614 * var(--pole-sila))) 60%,
      rgba(126, 212, 222, calc(0.0348 * var(--pole-sila))) 72%,
      rgba(126, 212, 222, calc(0.013 * var(--pole-sila))) 84%,
      rgba(126, 212, 222, calc(0.0035 * var(--pole-sila))) 92%,
      rgba(126, 212, 222, 0) 100%),
    radial-gradient(40rem 28rem at 44% 50%,
      rgba(126, 212, 222, calc(0.068 * var(--pole-sila))) 0%,
      rgba(126, 212, 222, calc(0.0661 * var(--pole-sila))) 12%,
      rgba(126, 212, 222, calc(0.0604 * var(--pole-sila))) 24%,
      rgba(126, 212, 222, calc(0.0515 * var(--pole-sila))) 36%,
      rgba(126, 212, 222, calc(0.0403 * var(--pole-sila))) 48%,
      rgba(126, 212, 222, calc(0.0279 * var(--pole-sila))) 60%,
      rgba(126, 212, 222, calc(0.0158 * var(--pole-sila))) 72%,
      rgba(126, 212, 222, calc(0.0059 * var(--pole-sila))) 84%,
      rgba(126, 212, 222, calc(0.0016 * var(--pole-sila))) 92%,
      rgba(126, 212, 222, 0) 100%),
    radial-gradient(44rem 30rem at 76% 88%,
      rgba(126, 212, 222, calc(0.128 * var(--pole-sila))) 0%,
      rgba(126, 212, 222, calc(0.1243 * var(--pole-sila))) 12%,
      rgba(126, 212, 222, calc(0.1137 * var(--pole-sila))) 24%,
      rgba(126, 212, 222, calc(0.097 * var(--pole-sila))) 36%,
      rgba(126, 212, 222, calc(0.0758 * var(--pole-sila))) 48%,
      rgba(126, 212, 222, calc(0.0524 * var(--pole-sila))) 60%,
      rgba(126, 212, 222, calc(0.0297 * var(--pole-sila))) 72%,
      rgba(126, 212, 222, calc(0.0111 * var(--pole-sila))) 84%,
      rgba(126, 212, 222, calc(0.003 * var(--pole-sila))) 92%,
      rgba(126, 212, 222, 0) 100%),
    radial-gradient(42rem 30rem at 8% 84%,
      rgba(126, 212, 222, calc(0.135 * var(--pole-sila))) 0%,
      rgba(126, 212, 222, calc(0.1311 * var(--pole-sila))) 12%,
      rgba(126, 212, 222, calc(0.1199 * var(--pole-sila))) 24%,
      rgba(126, 212, 222, calc(0.1023 * var(--pole-sila))) 36%,
      rgba(126, 212, 222, calc(0.08 * var(--pole-sila))) 48%,
      rgba(126, 212, 222, calc(0.0553 * var(--pole-sila))) 60%,
      rgba(126, 212, 222, calc(0.0313 * var(--pole-sila))) 72%,
      rgba(126, 212, 222, calc(0.0117 * var(--pole-sila))) 84%,
      rgba(126, 212, 222, calc(0.0032 * var(--pole-sila))) 92%,
      rgba(126, 212, 222, 0) 100%);

  background-size: 80px 80px, 80px 80px,
    auto, auto, auto, auto, auto;
}


/* Na úzkých obrazovkách se skvrny překrývají víc, takže se pole ztlumí.
   0,73 × 0,15 = 0,11, tedy stejná rezerva jako na desktopu. */
@media (max-width: 47.99rem) {
  :root { --pole-sila: 0.73; }
}

/* Prach přes celý web. Leží nad polem skvrn a pod obsahem; kreslí ho
   modul 06. Hustota se po stránce mění a místy se částice skládají do
   obrazců — vlna, sbíhavé paprsky, diagonální pás.

   Vrstva je `fixed` přes okno, ale částice žijí v souřadnicích DOKUMENTU
   a modul kreslí jen ty, které jsou zrovna v obraze. Plátno přes celou
   výšku stránky by na 9000 px dokumentu bylo přes 25 megapixelů.

   `position` NENÍ volitelné: bez něj je `<canvas>` v toku, roztlačí obsah
   o celou výšku okna a kreslí přes něj. Pravidlo se jednou ztratilo při
   strojové úpravě souboru a projevilo se to přesně takhle.

   Bez JS zůstane plátno prázdné a nic nechybí. */
.prach {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}


/* Po dobu načítání leží pole skvrn i zrno NAD clonou (`z-index: 301` proti
   jejím 300), místo aby byly za obsahem. Clona tím neukazuje NAPODOBENINU
   pozadí, ale doslova totéž pozadí, jaké bude mít úvod — stejné pixely.
   Při jejím odchodu se pozadí vůbec nemění, zmizí jen černý závoj mezi ním
   a obsahem, takže přechod nemá kde poskočit.

   Vlastní kopie na cloně se shodovat NEMOHLA: pole stránky je rozmístěné
   v procentech DOKUMENTU a velké v `rem`, kdežto clona je vysoká jednu
   obrazovku, takže táž čísla dají jinou kompozici.

   Třídu `.nacita` nasazuje a snímá modul 04 — nasadí ji při startu, sundá
   ve chvíli, kdy clonu odstraňuje z dokumentu. Přepnutí z 301 na −1 je
   neviditelné: v tu chvíli je clona už průhledná a pole vypadá nad obsahem
   i pod ním stejně.

   PROČ TŘÍDA A NE `:has(.nacitani)`: bez JS clona z dokumentu nikdy
   nezmizí (CSS ji jen skryje), takže by `:has()` platilo napořád a pole by
   zůstalo nad obsahem celého webu. */
.nacita body::before,
.nacita body::after { z-index: 301; }


/* Jemné zrno přes celý web. Měkké přechody na černé jinak PRUHUJÍ —
   osmibitový kanál nemá mezi tmavými odstíny dost kroků a schody jsou vidět.
   Zrno je rozbije a spád vypadá prokreslený.

   Je to inline SVG, ne obrázek: pár set bajtů a žádný další požadavek.
   `fixed`, aby se při scrollu nehýbalo a nedělalo s obsahem moaré. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

/* Pozor: `fill: currentColor` v resetu přebíjí `fill="none"` zapsané jako
   atribut na <svg> — CSS má přednost před prezentačním atributem a obrysová
   ikona se vykreslí jako vyplněná kaňka. Proto se sem `fill` NEPÍŠE a barva
   se řídí přes `stroke: currentColor` na jednotlivých tvarech. */
svg { stroke-linecap: square; stroke-linejoin: miter; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

/* Výběr převrací plochu, na které leží — funguje tedy na bílé, tmavé
   i modré sekci bez jediné výjimky. Pevná barva by na jedné ze tří ploch
   vždycky zmizela. */
::selection { background: var(--text); color: var(--plocha); }

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }


/* === 02 — Písma ========================================================= */

/* Self-hosted, žádné volání na fonts.googleapis.com / gstatic za běhu (GDPR).
   Obojí variabilní, subsetované na latinku + češtinu + typografické znaky.
   Rozsah je popsaný v unicode-range — znak mimo něj propadne na Arial.
   Postup pro obnovu subsetu je v CLAUDE.md.

   Tyhle URL NESMÍ mít `?v=` — musí se do znaku shodovat s `<link rel="preload">`
   v HTML. Když se rozejdou, prohlížeč stáhne každý font dvakrát (změřeno:
   240 kB místo 120 kB). Nová verze písma se nasazuje přejmenováním souboru. */

/* Urbanist — písmo CELÉHO webu, převzaté z projektu Amazing Heroes (tam
   taky nese celý web). Nejdřív neslo jen nadpis úvodu. Variabilní, osa 100–900. Subset na latinku,
   češtinu a typografické znaky, 23 kB. ZNAK MIMO `unicode-range` propadne
   na systémové písmo a je to na první pohled vidět.

   Licence je OFL, takže se smí hostovat — na rozdíl od SF Pro, které tu
   nadpis neslo kolo předtím a hostovat se nesmělo. */
@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/urbanist-var.woff2') format('woff2-variations'),
       url('../fonts/urbanist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7e, U+c1-c2, U+c4-c5, U+c9-cb, U+cd-cf, U+d3-d4, U+d6-d7, U+da-dd, U+e1-e2, U+e4-e5, U+e9-eb, U+ed-ef, U+f3-f4, U+f6, U+fa-fd, U+ff, U+106-109, U+10c-10f, U+11a-11d, U+124-125, U+134-135, U+139-13a, U+13d-13e, U+143-144, U+147-148, U+154-155, U+158-15d, U+160-161, U+164-165, U+16e-16f, U+174-17a, U+17d-17e, U+1cd-1d4, U+1d7-1da, U+1e6-1e9, U+1f0, U+1f4-1f5, U+1fa-1fb, U+21e-21f, U+301-302, U+308, U+30a, U+30c, U+1e26-1e27, U+1e2e-1e31, U+1e3e-1e3f, U+1e54-1e55, U+1e82-1e85, U+1e8c-1e8d, U+1e90-1e91, U+1e97-1e99, U+1ea4-1ea5, U+1ebe-1ebf, U+1ed0-1ed1, U+2013-2014, U+2018-2019, U+201c-201e, U+2026, U+20ac;
}

/* Syne 800 — JEN pro číslo na druhém slajdu („98 %“). Klient poslal
   předlohu (široké, tučné geometrické písmo), Syne ExtraBold jí odpovídá
   tvarem: devítka se šikmým ocáskem svěšeným pod účaří, plochá široká
   osmička, procento se šikmým lomítkem. OFL, smí se hostovat. Subset jen
   číslice, `%`, `+`, `∞` a mezera — přes Google `text=`, 3,7 kB. Bez
   preloadu: čísla jsou až na druhém slajdu.

   NOVÁ VERZE = NOVÉ JMÉNO SOUBORU (`-2`). URL fontu nesmí mít `?v=`, a kdo
   by měl v cache starý subset bez `+` a `∞`, viděl by je systémovým písmem. */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-800-2.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0025, U+002B, U+0030-0039, U+221E;
}

/* === 03 — Typografie ==================================================== */

/* Displejová sazba — technická, ne editoriální. Neproporcionální verzálka
   s kladným prostrkáním: čte se jako údaj na přístroji, ne jako titulek. */
.display {
  font-family: var(--pismo);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Nadpisy sekcí */
.nadpis-xl { font-size: var(--t-2xl); }
.nadpis-l  { font-size: var(--t-xl);  }
.nadpis-m  { font-size: var(--t-lg);  }

.nadpis-xl, .nadpis-l, .nadpis-m {
  /* Nadpisy sekcí jsou v řezu 500 — velké, ne tučné. Tak zůstaly i po
     přechodu na Urbanist, který by unesl i 700. */
  font-family: var(--pismo-display);
  font-weight: 500;
  line-height: var(--lh-nadpis);
  letter-spacing: var(--ls-nadpis);
  text-wrap: balance;
}

/* Text */
.text-l    { font-size: var(--t-md); line-height: 1.4; letter-spacing: -0.01em; }
.text      { font-size: var(--t-base); }
.text-mute { color: var(--text-mute); }

/* Odstavce mají měřítko čitelnosti, ne šířku sloupce mřížky. */
p { max-width: 62ch; text-wrap: pretty; }

/* Mono = data. Indexy, roky, disciplíny, popisky, čísla. Nikdy souvislý text. */
.mono {
  font-family: var(--pismo);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.2;
}
.mono--xs { font-size: var(--t-xs); }

/* Popiska sekce — pořadové číslo + název. Jediný způsob, jak se sekce hlásí.
   Akcent tu je jako značka, ne jako text: na papíru má 3,21:1, což stačí na
   grafiku (limit 3:1), ale ne na text (limit 4,5:1). Číslo proto zůstává
   inkoustové a barvu nese čtvereček před ním. */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  color: var(--text-mute);
  /* Nadpisek je `<p>`, takže by zdědil `p { max-width: 62ch }` — a ve
     vystředěné sekci by se pak vystředil jen uvnitř levého bloku o ~500 px,
     ne na stránce. Stalo se to: „— PROČ NEW ANGLE —“ i „— KONTAKT —“ stály
     vlevo od středu, zatímco nadpisy pod nimi byly na středu. */
  max-width: none;
}
.eyebrow::before {
  content: '';
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  flex: none;
  background: var(--akcent);
}
.eyebrow__index { color: var(--text); }

/* Nadpisek s ČÁRKAMI po stranách — „— PROČ NEW ANGLE —“, „— KONTAKT —“.
   Čárky jsou kresba (pseudo-prvky), ne pomlčky v textu, takže je čtečka
   nečte; verzálky dělá CSS. Přepisuje čtvereček z `.eyebrow::before`. */
.eyebrow--carky {
  gap: 0.9em;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.eyebrow--carky::before,
.eyebrow--carky::after {
  content: '';
  align-self: center;
  flex: none;
  width: 1.75em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* Nadpisek STRÁNKY („— SLUŽBY —“, „— PORTFOLIO —“) — větší a svítí bíle,
   klient ho chtěl výraznější. Čárky svítí s ním. Táž bílá záře jako čísla
   a zvýraznění v nadpisech. */
.eyebrow--svit {
  font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.2rem);
  letter-spacing: 0.18em;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.6), 0 0 36px rgba(255, 255, 255, 0.3);
}
.eyebrow--svit::before,
.eyebrow--svit::after {
  width: 2.25em;
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

/* Užší řez pro technické údaje — osa šířky nese význam, ne dekoraci. */
/* Zbylo po ose šířky Archiva. Mono ji nemá — třída je tu jen proto,
   aby se nemusel přepisovat každý výskyt v HTML. */
.uzsi { opacity: 1; }


/* === 04 — Layout ======================================================== */

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--okraj);
}

/* Mřížka je vždy na explicitně otřídovaném wrapperu — nikdy `> *` ani
   `:nth-child()`. Gutenberg blok „Skupina" vkládá při portu do WP vnitřní
   kontejner a selektory závislé na zanoření by se rozpadly. */
.mrizka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mezera);
}

.sekce {
  padding-block: var(--sekce);
  /* Bez vlastní výplně — sekce nechává prosvítat spád stránky. Plochu si
     kreslí jen ta sekce, která se od stránky odlišuje (`.svetla-plocha`,
     `.tmava-plocha`); ty mají `background` ve své vlastní třídě. */
  color: var(--text);
}

/* Vodorovná linka pod celou šířkou — dělič sekcí. */
.linka-plna {
  border: 0;
  border-top: 1px solid var(--linka);
  margin: 0;
}


/* === 05 — Značka ======================================================== */

/* Značka je vektorová dráha z `logo NEW ANGLE.svg` — jedna uzavřená křivka.
   Vkládá se inline, aby ji šlo obarvit přes `currentColor`: dědí tedy barvu
   textu a funguje na černé, bílé i modré ploše.

   Předchozí značka byla světelná malba a musela se vkládat jako maska
   z rastru; tahle je čistý vektor, takže je ostrá v každé velikosti a váží
   300 bajtů místo 13 kB. */
.znacka {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--t-base);
}

.znacka__mark {
  width: 3.2em;
  height: 1.29em;      /* poměr stran výřezu 1030 : 415 */
  flex: none;
  overflow: visible;
  transition: transform var(--doba-s) var(--krivka);
}
.znacka__mark path { fill: currentColor; }
/* Při najetí se stuha nakloní o --uhel — týž tvar z jiného úhlu. */
.znacka:hover .znacka__mark,
.znacka:focus-visible .znacka__mark { transform: rotate(calc(var(--uhel) * -1)); }

.znacka__text {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--pismo-display);
  /* Řez 500 — kreslená lambda má tloušťku tahu k němu; tučnější nápis by
     vedle ní ztloustl jinak než ona. */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* „A" ve slově Angle nemá příčku. Písmo ji má, takže se glyf nahrazuje
   kresbou dvou tahů.

   POZOR: nápis dnes sází Urbanist, ale poměry lambdy jsou pořád ZMĚŘENÉ
   z Geist Mono a pro nové písmo se nepřeměřily. Rozměry jsou z Geist Mono: v neproporcionálním
   písmu má každý glyf stejnou šířku, takže lambda musí zabrat přesně jednu
   buňku — jinak by se v nápisu rozbil rastr. Naměřeno: buňka 0,60 em,
   verzálka 0,71 em, dřík 0,11 em. ViewBox je v setinách em, aby ta čísla
   šla přepsat přímo.

   V textu zůstává normální „A" ve `.jen-pro-ctecku` — pro čtečku i pro
   vyhledávání. Řecké lambda by se přečetlo špatně a slovo „Angle" by se
   nedalo najít. */
.znacka__lambda {
  width: 0.6em;        /* šířka buňky Geist Mono */
  height: 0.71em;      /* výška verzálky */
  align-self: baseline;
  flex: none;
  overflow: visible;
}
/* Tah je v jednotkách viewBoxu, NE `vector-effect: non-scaling-stroke` — ten
   drží šířku v CSS pixelech, takže při 14px nápisu v hlavičce vyšel 14px tah
   a písmeno přerostlo celé slovo. */
.znacka__lambda path {
  fill: none;
  stroke: currentColor;
  stroke-width: 11;    /* dřík Geist Mono */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

/* === 06 — Hlavička a navigace =========================================== */

/* Hlavička leží přes obsah a NEPŘEBARVUJE SE — každá její skupina si nese
   vlastní tmavou pilulku a světlý text.

   Dřív barvu přepínal modul 04 podle sekce pod hlavičkou. Odešlo to ve chvíli,
   kdy se úvod stal tmavou fotografií: inkoustový text by na ní byl nečitelný,
   a hlavně by byl nečitelný i BEZ JS, protože skript je to, co barvu měnil.
   Pilulka s krytím 0,72 drží světlý text nad ≥5,98:1 na všech plochách webu
   i nad čistě bílým odleskem ve fotce — hlavička tedy nemusí vědět, co je pod
   ní, a nemá jak se rozbít. Změřeno.

   Dřív to dělalo `mix-blend-mode: difference` bez jediného řádku JS. S modrou
   plochou to ale přestalo jít: odečtení bílé od #0F2AFF dá #F0D500, tedy
   sytě žlutou hlavičku nad modrou sekcí. Odečítání funguje jen tam, kde jsou
   plochy blízko krajním hodnotám. */
.hlavicka {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--hlavicka-v);
  display: flex;
  align-items: center;
  color: var(--bila);
  --akcent: var(--seda-svit);
  transition: color var(--doba-s) var(--krivka);
  pointer-events: none;   /* klikatelné jsou jen prvky uvnitř */
}

.hlavicka__obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--okraj);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mezera);
}
/* --- Ukazatel postupu v liště ---
   Jede po HORNÍ hraně lišty a říká, jak daleko po webu člověk je. Šířku
   nese `--postup` (0–1), kterou počítá modul 08.

   TMAVÝ PRUH POD LIŠTOU TU BYL A ODEŠEL na přání klienta. Nesl čitelnost
   navigace nad obsahem — bez něj leží lišta nad polem i nad videem. Nad
   polem to vyjde (bílá 10,6:1 v nejhorším místě), nad světlým místem
   videa ne; je to vědomý ústupek vzhledu.

   Je to `transform: scaleX()`, ne `width`: měnit šířku by na každý snímek
   přepočítalo layout, kdežto měřítko skládá kompozitor. `transform-origin`
   vlevo, aby čára rostla zleva doprava.

   ČÁRA SVÍTÍ — dvě vrstvy záře, těsná a široká. Jedna vrstva dá buď tvrdý
   lem, nebo mlhu bez jádra; je to týž postup jako u padajících hvězd. */
.hlavicka__postup {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--barva);
  box-shadow:
    0 0 6px  rgba(126, 212, 222, 0.85),
    0 0 16px rgba(126, 212, 222, 0.45);
  transform: scaleX(var(--postup, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* Navigace vlevo, ZNAČKA NA STŘEDU, Kontakt vpravo. Značka musí být přesně
   na ose okna — je to cíl přeletu z načítací clony. */
.hlavicka .nav          { grid-column: 1; justify-self: start; }
.hlavicka .znacka       { grid-column: 2; justify-self: center; }


/* Pod 64 rem je vpravo mobilní přepínač a tlačítko by se s ním pralo
   o týž sloupec mřížky — naměřeno: pilulka přelezla značku, uřízla se
   o pravý okraj a přepínač spadl na druhý řádek. Výzvu proto pod tímhle
   zlomem nese panel. */

@media (min-width: 64rem) {
  
}
.hlavicka .nav-kontakt    { grid-column: 3; justify-self: end; }
.hlavicka .nav-prepinac   { grid-column: 3; justify-self: end; }

/* Kontakt a výzva vedle sebe. Prostrkání přidává mezeru i ZA poslední
   písmeno, takže Kontakt drží od tlačítka menší odstup, než jaký je vidět —
   proto ta mezera vypadá vyváženě až na 1,4 rem. */


/* Kontakt stojí sám vpravo, mimo pilulku.

   `justify-self` musí být přímo tady, ne přes `:last-child` na obalu:
   posledním dítětem hlavičky je mobilní přepínač, a i když je nad 48 rem
   `display: none`, selektor na něj pořád míří. Kontakt se pak roztáhl přes
   celý třetí sloupec a slovo zůstalo viset u jeho levého okraje —
   změřeno: 459 px široký rámeček pro jedno slovo. */
.nav-kontakt {
  display: none;
  justify-self: end;
  /* Kontakt drží plnou bílou, ostatní položky lišty jsou tlumené. */
  color: var(--text);
  /* Kontakt NEDOSEDÁ na pravý okraj — klient ho chtěl víc ke středu.
     Stojí tak, aby jeho střed ZRCADLIL střed navigace vlevo: odsazení je
     (šířka navigace − šířka Kontaktu) / 2. Navigace roste s mezerami
     v `vw`, takže odsazení je přímka proložená změřenými body — po
     přejmenování na „Proč NEW ANGLE“ a přechodu na Urbanist: 140 px na
     1024, 147 px na 1280, 151 px na 1440. Nad zhruba 1500 px mezery
     v navigaci přestanou růst, takže přímka má STROP 9,6 rem (na 1920
     změřeno 153,6 px — bez stropu byl Kontakt o 11 px vedle). Dřív pevných
     8 rem (to sedělo na kratší „Proč my“ v Outfitu). PŘI ZMĚNĚ POLOŽEK
     NEBO PÍSMA LIŠTY PŘEMĚŘIT. Prostrkání přidává mezeru i ZA poslední písmeno, proto se
     od odsazení ještě odečítá. */
  margin-right: calc(min(6.9rem + 2.84vw, 9.6rem) - var(--prostrk-lista));
}
@media (min-width: 64rem) { .nav-kontakt { display: inline-block; } }
.hlavicka a,
.hlavicka button { pointer-events: auto; }

/* --- Výzva v liště ---
   Jediná plná plocha na celém webu, a je to schválně: má si jí být vidět.
   Bílá pilulka s černým textem drží 21:1 a na černém webu s tlumenou šedou
   lištou nejde přehlédnout — barvu na to zavádět nemusíme.

   Hrana kolem jemně svítí, aby na sebe upozornila i v klidu. Je to táž
   záře, jakou měly zrušené skleněné pilulky; tady zůstala schválně, protože
   na JEDNOM prvku je to důraz, kdežto na všech to byla dekorace.

   Sazba se drží lišty (verzálky, 13 px, prostrkání), jen o řez těžší —
   tlačítko smí být pevnější než odkazy vedle. */
.btn-lista {
  display: inline-flex;
  align-items: center;
  padding: 0.62em 1.25em;
  border-radius: 999px;
  background: var(--bila);
  color: var(--cerna);
  font-size: var(--t-lista);
  font-weight: 500;
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 22px -4px rgba(255, 255, 255, 0.45);
  transition: box-shadow var(--doba-s) var(--krivka),
              transform var(--doba-s) var(--krivka);
}
/* Prostrkání přidává mezeru ZA poslední písmeno; bez tohohle by text
   v pilulce seděl o polovinu prostrkání vlevo od středu. */
.btn-lista { padding-right: calc(1.25em - var(--prostrk-lista)); }

.btn-lista:hover,
.btn-lista:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 30px -4px rgba(255, 255, 255, 0.65);
}

/* V mobilním panelu stojí sama a smí být větší — je to tam jediná akce. */
.btn-lista--panel {
  margin-top: 2rem;
  font-size: var(--t-sm);
  padding: 0.8em 1.6em;
}
@media (min-width: 64rem) { .btn-lista--panel { display: none; } }

/* Hlavička nesmí být vnořená do ničeho s `transform`, `filter` ani
   `perspective` — `position: fixed` se v takovém rodiči přestane vztahovat
   k oknu a hlavička odjede s obsahem. */

/* Navigace je prostý řádek odkazů vlevo, Kontakt stojí vpravo. Bez
   podkladu, bez rámu — hlavička má být lišta, ne panel. */
.nav {
  display: none;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 1.8rem);
}
/* Hlavička je HOLÁ: prostý řádek textu na ploše, žádné skleněné pilulky.

   Pilulky tu byly a odešly na přání klienta podle jeho předlohy. Nesly
   tehdy kontrast, protože skvrny měly krytí až 0,35; při dnešních 0,19 je
   pole tak tmavé, že je nepotřebuje. Změřeno na NEJJASNĚJŠÍM místě celého
   pole — hlavička je `fixed`, takže pluje nad celou stránkou a rozhoduje
   maximum, ne okolí vrcholu stránky — i s čárou mřížky a zrnem:

     mobil 375 px  bílý text 10,58:1     tablet 768 px  11,11:1
     desktop 1440 px  12,22:1            (tlumený text nejhůř 5,62:1)

   ZNAČKA zůstává tam, kde byla — uprostřed. Klient si to výslovně vymínil,
   ačkoli předloha má logo vlevo. Dosedá na ni logo z načítací clony, takže
   posun by znamenal přepsat i cíl přeletu. */

/* Stuha bez nápisu a bez podkladu. Na tuhle značku dosedá logo z načítací
   clony, takže její poloha a velikost jsou zároveň cílem přeletu; modul 04
   si je měří za běhu, takže se to samo srovná při každé změně rozměru. */
.znacka--sama .znacka__mark { width: 3.9em; height: 1.57em; }
/* Pět položek ve větším písmu potřebuje širší obraz než dřívější čtyři
   v drobném — pod 64 rem se lámaly do druhého řádku. Zlom navigace proto
   NENÍ tentýž jako zlom zbytku webu (48 rem) a je to schválně. */
@media (min-width: 64rem) {
  .nav { display: flex; }
}

/* Sazba celé lišty: VERZÁLKY v lehkém řezu, drobně a s prostrkáním.
   Předlohou je `nebudnoname.cz` — měřeno v prohlížeči, ne odhadem.

   Verzálka BEZ prostrkání se slepí: velká písmena mají svislé dříky vedle
   sebe a mezery mezi nimi jsou navržené pro minusky. Záporné prostrkání,
   které tu bylo pro sentence case, by verzálku znečitelnilo.

   Řez 400, lehčí než předloha (500): předloha sází o půl pixelu míň a v
   poloviční bílé; my jdeme na lehčí řez, protože tolik ubrat na barvě
   nemůžeme (viz `--text-mute`). */
.nav__odkaz,
.nav-kontakt,
.btn-lista {
  /* Lišta sází Urbanistem jako zbytek webu (dřív systémovým písmem —
     SF Pro se nesmí hostovat, proto se o něj jen „řeklo systému“). */
  font-family: var(--pismo);
  font-size: var(--t-lista);
  font-weight: 400;
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
}

.nav__odkaz {
  position: relative;
  /* Tlumená bílá, ne plná — lišta má být tichá. Předloha má bílou na 50 %,
     ta by u nás měla na nejjasnějším místě pole jen 3,98:1 a na 13px textu
     by propadla. `--text-mute` drží 5,65:1. */
  color: var(--text-mute);
  transition: color var(--doba-s) var(--krivka);
  /* Bez svislého odsazení, ať mají obě skupiny lišty stejnou výšku.
     Podtržení si místo bere posunem dolů, ne paddingem. */
  padding-block: 0;
}
.nav__odkaz:hover,
.nav__odkaz:focus-visible { color: var(--text); }

/* Podtržení se kreslí od levého okraje, ne roztahuje ze středu — směr má
   souhlasit se směrem čtení. */
.nav__odkaz::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--doba-s) var(--krivka);
}
.nav__odkaz:hover::after,
.nav__odkaz:focus-visible::after,
.nav__odkaz[aria-current='page']::after { transform: scaleX(1); }


/* --- Mobilní navigace --------------------------------------------------
   Přepínač je součástí odečítané hlavičky, panel ne — panel má vlastní
   plochu a musí být plně neprůhledný, aby se přes něj nedalo číst obsah. */

.nav-prepinac {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;   /* opticky zarovnat kresbu s okrajem, ne rámeček */
  display: grid;
  place-items: center;
}
.nav-prepinac__carky {
  display: block;
  width: 1.35rem;
  height: 0.7rem;
  position: relative;
}
.nav-prepinac__carky::before,
.nav-prepinac__carky::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--doba-s) var(--krivka-ostra);
}
.nav-prepinac__carky::before { top: 0; }
.nav-prepinac__carky::after  { bottom: 0; }

/* Otevřeno: z dvou čárek se stane kříž. Úhel křížení je --uhel doplněný
   do 45°, aby i tenhle detail vycházel z jedné hodnoty. */
[aria-expanded='true'] .nav-prepinac__carky::before {
  transform: translateY(0.34rem) rotate(45deg);
}
[aria-expanded='true'] .nav-prepinac__carky::after {
  transform: translateY(-0.34rem) rotate(-45deg);
}

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cerna);
  color: var(--bila);
  padding: calc(var(--hlavicka-v) + 2rem) var(--okraj) var(--okraj);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  /* Panel přijíždí maskou pod úhlem — stejný pohyb jako odkrývání obsahu,
     jen rychlejší. Zavřený panel je pro čtečku i tab skrytý přes `hidden`. */
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path var(--doba-s) var(--krivka);
}
.nav-panel[hidden] { display: none; }
.nav-panel.je-otevreny {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.nav-panel__seznam { display: grid; gap: 0.25em; }
.nav-panel__odkaz {
  display: block;
  font-size: var(--t-xl);
  font-weight: 500;
  font-family: var(--pismo-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  padding-block: 0.12em;
}
.nav-panel__odkaz[aria-current='page'] { color: var(--text-svetly); }

/* Skrývání obou mobilních prvků musí stát AŽ ZA jejich základními pravidly —
   `.nav-prepinac { display: grid }` má stejnou váhu, takže by media query
   uvedená dřív v souboru přebilo pravidlo uvedené později. */
@media (min-width: 64rem) {
  .nav-prepinac { display: none; }
  .nav-panel    { display: none; }
}

/* Otevřený panel zamyká scroll pod sebou. */
.nav-je-otevrena, .nav-je-otevrena body { overflow: hidden; }


/* === 07 — Tlačítka a odkazy ============================================= */

/* Jedno tlačítko ve dvou váhách. Víc jich nebude — každý další styl je další
   otázka „co to znamená?", kterou uživatel nemá řešit. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.9em 1.4em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--pismo);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--doba-s) var(--krivka),
              opacity var(--doba-s) var(--krivka),
              transform var(--doba-s) var(--krivka);
}

/* Jakmile se začne scrollovat, ukazatel odejde — už splnil, co měl.
   `visibility` až v koncovém stavu, aby zůstal mimo pořadí tabu; samotná
   `opacity: 0` by z něj nechala zaměřitelný odkaz uprostřed ničeho. */


/* --- Ukazatel scrollování ---
   Tenká svislá čárka, která se pohupuje — místo dřívějšího „Objevte více“
   se šipkou. Předlohou je `nebudnoname.cz`; změřeno v prohlížeči: stopa
   1 × 32 px, spád z barvy do průhledna, a pulz `scaleY(1 → 0,4 → 1)`
   s krytím `1 → 0,3 → 1` ve dvousekundové smyčce.

   Je to jen grafika, ne odkaz: na 1px terč se nedá kliknout ani zamířit
   klávesnicí a do sekcí vede navigace. */
.uvod__cara {
  position: absolute;
  left: 50%;
  bottom: var(--cara-dole);
  width: 1px;
  height: var(--cara-v);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.uvod__cara > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--barva), rgba(126, 212, 222, 0));
  animation: cara-pulz 2s ease-in-out infinite;
}
@keyframes cara-pulz {
  0%, 100% { transform: scaleY(1);   opacity: 1; }
  50%      { transform: scaleY(0.4); opacity: 0.3; }
}

/* Jakmile se začne scrollovat, ukazatel odejde — už splnil, co měl. */
.scrollovano .uvod__cara {
  opacity: 0;
  transition: opacity var(--doba-s) var(--krivka);
}

/* Utlumený pohyb: čárka stojí, ale zůstane vidět — nese smysl, ne jen pohyb. */
@media (prefers-reduced-motion: reduce) {
  .uvod__cara > span { animation: none; }
}

/* --- Odznak „Nejlepší agentura roku“ ---
   Na STŘEDU spodní hrany úvodu, bíle, 0,75 rem nad čárkou. Klient ho dodal
   jako černou kresbu na průhledném PNG (1254 px); na webu je bílá WebP
   336 px — přes 3× největší zobrazené velikosti, 13 kB.

   Prošly tudy dvě polohy v levém dolním rohu: nejdřív lícovaná s navigací
   (72–112 px), pak menší a posunutá od oka. Klient chtěl střed.

   Místo pro odznak rezervuje `--uvod-dole` na `.uvod` — viz tam.

   Není to odkaz. Tvrzení nese `alt`, protože drobné písmo v kruhu se při
   60–88 px přečíst nedá — oko pozná odznak, čtečka dostane celou větu. */
.uvod__odznak {
  position: absolute;
  left: 50%;
  bottom: var(--odznak-dole);
  z-index: 1;
  width: var(--odznak-sirka);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

/* Výplň nastupuje pod úhlem --uhel, ne vodorovně. Jediné místo, kde se úhel
   objevuje v běžném rozhraní — a i tam je sotva vidět. */
.btn::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: currentColor;
  transform: translateY(101%) skewY(calc(var(--uhel) * -1));
  transition: transform var(--doba-s) var(--krivka);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0) skewY(calc(var(--uhel) * -1)); }

.btn:hover, .btn:focus-visible { color: var(--plocha); }

.btn--plny {
  background: var(--text);
  color: var(--plocha);
  border-color: var(--text);
}
.btn--plny::before { background: var(--akcent); }
.btn--plny:hover, .btn--plny:focus-visible { color: var(--plocha); }

/* Šipka v tlačítku odjíždí ve směru čtení. */
.btn__sipka {
  width: 0.8em;
  height: 0.8em;
  flex: none;
  transition: transform var(--doba-s) var(--krivka);
}
.btn__sipka path { fill: none; stroke: currentColor; stroke-width: 2; }
.btn:hover .btn__sipka,
.btn:focus-visible .btn__sipka { transform: translateX(0.35em); }

/* Textový odkaz uvnitř odstavce — podtržený vždy, aby se poznal bez barvy. */
.odkaz {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--linka);
  transition: text-decoration-color var(--doba-r) var(--krivka);
}
.odkaz:hover, .odkaz:focus-visible { text-decoration-color: currentColor; }


/* === 08 — Pohyb ========================================================= */

/* Odkrývání obsahu při vstupu do obrazu. JS jen přidá `.je-videt` —
   bez JS zůstává obsah viditelný, protože výchozí stav je až uvnitř
   `.js` třídy, kterou nasazuje skript sám. */
.js .odkryv {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity   var(--doba-p) var(--krivka),
    transform var(--doba-p) var(--krivka);
}
.js .odkryv.je-videt {
  opacity: 1;
  transform: none;
}

/* Odkrývání obrazu maskou pod úhlem — clip se odsune po diagonále. */
.js .odkryv-maska {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path var(--doba-p) var(--krivka);
}
.js .odkryv-maska.je-videt {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Zpoždění pro řady prvků — nastavuje se inline jako --poradi. */
.js .odkryv,
.js .odkryv-maska { transition-delay: calc(var(--poradi, 0) * 80ms); }

/* Žádný pohyb, který nese význam, nesmí zůstat bez statické náhrady. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .odkryv { opacity: 1; transform: none; }
  .js .odkryv-maska { clip-path: none; }
}


/* === 09 — Pomocné třídy ================================================= */

.jen-pro-ctecku {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Odkaz na přeskočení navigace — první v pořadí tabu, viditelný až v zaměření. */
.preskocit {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  padding: 0.75em 1.25em;
  background: var(--bila);
  color: var(--cerna);
  font-family: var(--pismo);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  transform: translateY(-110%);
  transition: transform var(--doba-r) var(--krivka);
}
.preskocit:focus { transform: translateY(0); }

/* Odsazení pod pevnou hlavičkou. Úvod homepage ho nepoužívá — tam má
   hlavička ležet přes obsah. Všude jinde by pod ní obsah zmizel. */
.pod-hlavickou { padding-top: var(--hlavicka-v); }

/* Cíl kotvy nesmí skončit pod hlavičkou. */
[id] { scroll-margin-top: calc(var(--hlavicka-v) + 1rem); }


/* --- Načítací clona ------------------------------------------------------
   Přes celou obrazovku, černá s polem skvrn, uprostřed samotná stuha
   značky — bez nápisu, čistě bílá.

   Odchod je PŘELET NA MÍSTO ZNAČKY: stuha se nepřibližuje, ale odletí nahoru
   přesně na pozici značky v hlavičce, tam se zmenší na její velikost a
   prolne se s ní. Pozadí clony se přitom odkryje, takže poslední kus cesty
   letí stuha už nad hotovým webem.

   CÍL LETU POČÍTÁ JS, protože závisí na rozměru okna: modul 04 změří značku
   v hlavičce a zapíše `--cil-x`, `--cil-y` a `--cil-mer`. Výchozí hodnoty
   v `@keyframes` jsou nastavené tak, aby to dávalo smysl i bez skriptu —
   stuha vyjede nahoru a zmenší se, jen ne na pixel přesně.

   ODCHOD ZAŘIZUJE CSS, NE SKRIPT. Animace mají zpoždění 1,6 s a doběhnou
   samy — kdyby se `main.js` nestáhl nebo v něm byla chyba, stránka se prostě
   odkryje.

   POZOR: pozadí je na `::before`, ne na `.nacitani`. Kdyby se prolínala celá
   clona, zmizela by s ní i stuha a žádný přelet by vidět nebyl.

   POZOR: samotná změna `animation-delay` u BĚŽÍCÍ animace ji nerestartuje —
   clona pak zůstala viset přes celou stránku a chytala kliknutí. Změřeno.
   Restart se musí vynutit (`animation: none` → přečíst `offsetHeight` →
   vrátit zpět), stejně jako u mobilního panelu.

   `visibility: hidden` a `pointer-events: none` v koncovém snímku jsou
   nutné — samotná `opacity: 0` nechá clonu dál chytat kliknutí.

   Uvnitř není nic zaměřitelného a celek je `aria-hidden`, takže clona
   nezasahuje do pořadí tabu ani do čtečky. */
.nacitani {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  animation: nacitani-konec var(--doba-prelet) var(--krivka-prelet) 1.6s both;
}

/* Pozadí clony je ČISTĚ ČERNÝ ZÁVOJ, žádná kopie pole skvrn — to leží
   po dobu načítání nad ní (viz `.nacita` výš). Bez JS se třída nenasadí
   a clona je prostě černá; nic se nerozbije, jen na ní není opar. */
.nacitani::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cerna);
  animation: nacitani-pozadi var(--doba-prelet) var(--krivka-prelet) 1.6s both;
}

/* Stuha je rozměrovaná v `em` (3,2 × 1,29 em), takže se zvětšuje velikostí
   písma obalu, ne vlastní šířkou. Přepsat jen `width` ji zploští — výška by
   zůstala na 1,29 em rodiče. */
/* Plátno prachu leží nad pozadím clony a pod značkou. Kreslí ho modul 05;
   bez JS zůstane prázdné a nic nechybí. */
.nacitani__prach {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.nacitani__znacka {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  color: #FFFFFF;
  line-height: 0;
  animation: nacitani-let var(--doba-prelet) var(--krivka-prelet) 1.6s both;
}

/* --- Světelné čáry ---
   Dvě tenké bílé čáry přeletí clonu během přeletu loga: jedna vodorovně
   zprava doleva, druhá po úhlopříčce z pravého horního do levého dolního
   rohu. Jsou to pruhy s průsvitnými konci, ne plné linky — plná čára by
   vypadala jako rozhraní, tohle vypadá jako světlo. Záře drží čáru tenkou
   a přitom viditelnou; bez ní je to na tmavém podkladu vlásová linka.

   ÚHEL ÚHLOPŘÍČKY POČÍTÁ JS, protože závisí na poměru stran okna: modul 04
   zapíše `--uhel-uhlopricka`. Výchozích −32° odpovídá poměru 16:10, takže
   i bez skriptu čára letí zhruba přes roh. */
.nacitani__cara {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62vmax;
  height: 1px;
  margin: -1px 0 0 -31vmax;
  /* Jediná barva na jinak černobílém webu, a je to vědomá výjimka: padající
     hvězdy mají být světle modré.

     Jádro drží SKORO bílé a modrá je až v záři kolem. Čára je vysoká 1 px,
     takže obarvit jádro znamená obarvit celou stopu — a sytější barva na
     jediném pixelu proti černé zešedne, místo aby svítila. Takhle to čte
     jako modré světlo, ne jako modrá linka. */
  background: linear-gradient(90deg,
    rgba(224, 244, 255, 0) 0%,
    var(--hvezda-jadro) 50%,
    rgba(224, 244, 255, 0) 100%);
  box-shadow:
    0 0 4px  var(--hvezda-svit),
    0 0 14px var(--hvezda-zare);
  opacity: 0;
  pointer-events: none;
}

.nacitani__cara--vodorovna {
  animation: cara-vodorovna var(--doba-prelet) var(--krivka-prelet) 1.6s both;
}
.nacitani__cara--sikma {
  /* Druhá čára jde o kus později, ať se obě neslijí do jedné události. */
  animation: cara-sikma var(--doba-prelet) var(--krivka-prelet)
             calc(1.6s + var(--doba-prelet) * 0.16) both;
}

@keyframes cara-vodorovna {
  0%        { transform: translateX(105vw); opacity: 0; }
  12%, 72%  { opacity: 1; }
  100%      { transform: translateX(-105vw); opacity: 0; }
}
@keyframes cara-sikma {
  0%        { transform: rotate(var(--uhel-uhlopricka, -32deg)) translateX(105vmax); opacity: 0; }
  12%, 72%  { opacity: 1; }
  100%      { transform: rotate(var(--uhel-uhlopricka, -32deg)) translateX(-105vmax); opacity: 0; }
}


.nacitani.je-hotovo,
.nacitani.je-hotovo::before,
.nacitani.je-hotovo .nacitani__znacka,
.nacitani.je-hotovo .nacitani__cara--vodorovna { animation-delay: 0s; }

.nacitani.je-hotovo .nacitani__cara--sikma {
  animation-delay: calc(var(--doba-prelet) * 0.16);
}

/* Clona sama se neprolíná — jen na konci přestane existovat pro kliknutí. */
@keyframes nacitani-konec {
  0%, 99%  { visibility: visible; }
  100%     { visibility: hidden; pointer-events: none; }
}

/* Pozadí drží plně krycí, dokud stuha SKUTEČNĚ nedosedne (88 %), a teprve
   pak se za posledních 12 % rozplyne. Do té chvíle není z webu vidět nic.

   Je to zároveň nejlacinější způsob, jak splnit „texty až po přeletu“:
   nic se neschovává třídou, kterou by musel někdo zase sundat, takže se
   obsah nemá jak zaseknout v neviditelném stavu.

   Odkrytí na 60 % a pak na 78 % obojí ukazovalo obsah, když stuha ještě
   letěla — proto až 88 %. */
@keyframes nacitani-pozadi {
  0%, 88% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Přelet na místo značky v hlavičce. Výchozí hodnoty platí tam, kde cíl
   nespočítá JS — stuha pak vyjede nahoru a zmenší se přibližně. */
/* Stuha DOLETÍ na 88 % a zbylých 12 % už jen stojí v cíli a prolíná se
   se značkou v hlavičce pod sebou. Kdyby doletěla až na 100 %, mizela by
   ještě za letu a nebylo by poznat, kam vlastně dosedla. */
@keyframes nacitani-let {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  88%  {
    transform: translate(var(--cil-x, 0px), var(--cil-y, -38vh))
               scale(var(--cil-mer, 0.32));
    opacity: 1;
  }
  100% {
    transform: translate(var(--cil-x, 0px), var(--cil-y, -38vh))
               scale(var(--cil-mer, 0.32));
    opacity: 0;
  }
}


/* Utlumený pohyb: žádný přelet, clona jen zmizí. */
@media (prefers-reduced-motion: reduce) {
  .nacitani { animation: nacitani-konec 1ms linear 0.2s both; }
  .nacitani::before { animation: nacitani-pozadi 1ms linear 0.2s both; }
  .nacitani__znacka { animation: none; opacity: 0; }
  .nacitani__cara { animation: none; display: none; }
}


/* --- Sklo ---------------------------------------------------------------
   Matné sklo z předlohy: průsvitná bílá, rozostřený podklad, tenká světlá
   hrana a měkký stín. Nosí ho panel úvodu, služby, ceník i položky průsečíku.

   `backdrop-filter` je OZDOBA, ne nosný prvek. Krytí 0,48 samo o sobě dá pod
   textem dost světlou plochu, takže tam, kde prohlížeč rozostření neumí,
   se nezmění kontrast, jen dojem. Změřeno nad nejsytější skvrnou: ink na
   skle 13,9:1, tlumený text 6,8:1.

   POZOR: `backdrop-filter` dělá z prvku obalový blok pro `position: fixed`
   uvnitř. Hlavička proto nesmí být vnořená do ničeho se sklem. */
.sklo {
  position: relative;
  border-radius: var(--radius-blok);
  background: var(--sklo);
  backdrop-filter: var(--sklo-rozostreni);
  -webkit-backdrop-filter: var(--sklo-rozostreni);
  border: 1px solid var(--sklo-hrana);
  box-shadow: var(--sklo-stin);
}


/* === 10 — Úvod ========================================================== */

/* Úvod je skleněný panel nad polem barevných skvrn. Nadpis v něm jde po
   diagonále, „the“ zůstává na ose.

   Prošlo tudy a odešlo — nevracet bez vyžádání:
     · celoplošná fotografie skla a mechu (klientovi se nelíbila)
     · čtyřobrazovková scéna s otáčenou vyříznutou strukturou
     · vlastní 3D model tělesa

   Úvod má vlastní, silnější skvrny než zbytek webu: je to jediné místo, kde
   má barva křičet. Krytí přesto drží pod `--skvrna-max`. */

/* Úvod. Prošel tudy a odešel PRŮLET ZNAČKOU řízený scrollem: úvod se
   přilepil, přibližoval se do značky v hlavičce a skrz ni se odkrývala
   sekce 01. Klientovi se to nelíbilo. Nevracet bez vyžádání — a s ním
   odešlo i lepení, maska, závoj a modul 07. */
.uvod {
  /* Spodní hrana úvodu: čárka, nad ní vystředěný odznak. Obojí je
     `absolute`, takže si místo musí úvod REZERVOVAT paddingem — jinak na
     nízké obrazovce (1280 × 600) odznak najede do tlačítek.

     Rezerva je JEN DOLE, takže se obsah vystředí v prostoru mezi lištou
     a odznakem, ne na geometrickém středu obrazovky — sedí tím výš, jak
     klient chtěl („ať to není tak dole“). Prošla tudy a odešla rezerva
     nahoře i dole stejně: držela střed obsahu na středu okna, jenže tam
     kompozice opticky padala dolů, protože shora ubírá místo lišta. */
  --cara-dole: clamp(2rem, 6vh, 4rem);
  --cara-v: 32px;
  --odznak-sirka: clamp(3.75rem, 5.5vw, 5.5rem);
  --odznak-dole: calc(var(--cara-dole) + var(--cara-v) + 0.75rem);
  --uvod-dole: max(4rem, calc(var(--odznak-dole) + var(--odznak-sirka) + 1rem));
  position: relative;
  min-height: 100svh;
  padding-block: calc(var(--hlavicka-v) + 2rem) var(--uvod-dole);
  display: grid;
  align-content: center;
  overflow: hidden;
}


/* Úvod NEMÁ vlastní pole skvrn. Mělo ho, ale `.uvod` má `overflow: hidden`,
   takže se pole na hraně sekce useklo a bylo vidět, kde úvod končí. Teď
   prosvítá jedno souvislé pole z `body::before` přes celou stránku. */

/* Panel je vystředěný a nechává kolem sebe dýchat pole skvrn. Šířka je
   omezená na měřítko sazby, ne na šířku obalu — plakát nemá být pás. */
/* V úvodu je JEN nadpis — věta, výzva i skleněný panel odešly. Nadpis
   stojí volně na poli skvrn a je vystředěný v obou osách.

   Bílá na nejjasnější skvrně drží 10,1:1, takže podklad nepotřebuje. */
.uvod__nadpis {
  margin: 0;
  font-family: var(--pismo-display);
  /* Řez 700, řádkování 1,06 a prostrkání −0,03 em jsou převzaté beze změny
     z nadpisů Amazing Heroes (`h1, h2, h3` v jejich styles.css). Urbanist
     je variabilní, takže 700 je skutečný řez, ne dopočítaný. */
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-align: center;
  /* Nadpis se sází VĚTNĚ, přesně jak stojí v HTML: „See what others
     don’t.“ — velké jen S na začátku. Prošly tudy a odešly verzálka přes
     celý nadpis, verzálkami jen „DON’T.“ a celý nadpis malými. */
  text-transform: none;
  color: var(--bila);
}

/* Nadpis jde PO DIAGONÁLE, ne pod sebou: „the“ zůstává na ose panelu
   a krajní řádky se od něj rozestupují.

   Odsazení je ODVOZENÉ, ne zvolené od oka. Osa má svírat 45° + `--uhel`,
   tedy týž úhel jako dřívější pole lomítek. Vodorovný krok mezi řádky pak
   je řádkování ÷ tan(52°) = 0,98 em ÷ 1,2799 = 0,766 em. Kdo změní řádkování
   nebo úhel, musí ten podíl přepočítat. */
/* Řádky stojí NA STŘEDU, ne po diagonále. Diagonální posun odvozený
   z `--uhel` tu byl od začátku jako podpis celého webu a odešel na přání
   klienta — nadpis je teď vycentrovaný blok. Úhel drží dál řezy a náklony
   jinde na stránce.

   `width: fit-content` zůstává: bez něj by byl řádek blok přes celou šířku
   a `text-align` by na střed sice srovnal text, ale ne jeho rám. */
/* --- Video JEN V PÍSMENECH (knockout) ---
   Klient chce budovy vidět uvnitř písmen, ne v pozadí — a zároveň chce
   kolem písmen zpátky barevné pole a mřížku. To jsou dvě věci naráz a
   samotné násobení je nezvládne, protože umí nechat projít obraz, ne
   udělat průhledno; kolem písmen by zůstala plná čerň.

   ŘEŠÍ TO DVĚ VRSTVY BLENDU NAD SEBOU:

     1) UVNITŘ SKUPINY se černá deska s bílým nadpisem NÁSOBÍ s videem.
        Násobení dá: kde je deska černá → 0 × video = čerň; kde je bílá
        (písmena) → 1 × video = video projde. Výsledek skupiny je tedy
        video v písmenech a čerň všude jinde.

     2) CELÁ SKUPINA se pak na stránku položí SCREENEM. Screen s černou
        nedělá nic (`255 − (255−a)(255−0)/255 = a`), takže kolem písmen
        zůstane vidět pole skvrn i mřížka; v písmenech projde video.

   `isolation: isolate` patří na SKUPINU, ne na úvod. Ohraničí násobení
   dovnitř skupiny; kdyby bylo na úvodu, screen by se neměl s čím míchat
   a pole by nezůstalo vidět.

   Žádná maska ze SVG, žádné `background-clip` s videem (to CSS neumí)
   a nic, co by se rozešlo při změně písma nebo šířky okna. */
.uvod__knock {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mix-blend-mode: screen;
}

.uvod__knock .video__stopa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video je v písmenech BEZ ÚPRAV — žádný filtr, žádné zesvětlení.
     Klient chce obraz výrazný a v původních barvách. Prošel tudy a odešel
     `filter: saturate(0.85) contrast(1.05)`.

     `opacity` i `filter` se tu MUSÍ vynulovat výslovně: obecné
     `.video__stopa` níž patří videu na druhém slajdu a nastavuje krytí
     0,92 a `blur(2px)`. Tohle pravidlo je sice silnější, ale co samo
     nenastaví, to zdědí — video v nadpisu tak bylo celou dobu lehce
     rozmazané a ztlumené. */
  opacity: 1;
  filter: none;
}

/* Prošlo tudy a odešlo ZVEDNUTÍ — bílá vrstva (0,20–0,35) mezi videem
   a deskou, která zesvětlovala tmavá místa videa, aby písmena nesplývala
   s tmavým polem. Klient chce video v původních barvách.

   CENA, změřeno na tomhle videu (mrakodrapy, 8 snímků): typické písmeno
   4,62:1, ale kde přes písmeno přejede skoro černá fasáda, klesne na
   1,03:1 — písmeno tam s polem splyne. Kdyby to vadilo, řešením, které
   barvy videa nemění, je tenký světlý obrys písmen ve vrstvě nad skupinou. */

/* Deska sází nadpis stejně jako úvod, aby písmena seděla tam, kde mají. */
.uvod__deska {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding-block: calc(var(--hlavicka-v) + 2rem) var(--uvod-dole);
  background: var(--cerna);
  mix-blend-mode: multiply;
  color: #FFFFFF;
}
.uvod__deska .uvod__nadpis { margin: 0; }

/* Prošlo tudy a odešlo zvýrazněné „TO“ (plně krémové `#F6F0E4`, dřív
   obrys) a s ním celá TŘETÍ VRSTVA — kopie nad knockoutem, která nesla
   jen to jedno slovo. Nadpis „See what others don’t.“ žádné zvýraznění
   nemá, takže vrstvy jsou dvě: knockout a skutečný text. */

/* Podtitul pod nadpisem. Sází se Urbanistem jako celý web, drobně —
   je to druhý hlas vedle displejové sazby nadpisu, ne jeho pokračování.

   Je v OBOU vrstvách sazby, aby měly stejnou výšku a jejich obsah se
   vycentroval stejně; vidět je jen ten ve skutečné vrstvě. */
.uvod__podtitul {
  margin: 1.25rem 0 0;
  font-family: var(--pismo);
  /* O stupeň větší než lišta (13 → 15 px): podtitul má být čitelnější
     než navigace, ale pořád drobný proti nadpisu. */
  font-size: var(--t-sm);
  font-weight: 500;
  /* Verzálky s prostrkáním jako v liště — je to popisek, ne věta k přečtení.
     V HTML je zapsaný VĚTNĚ a kapitálky dělá `text-transform`: kapitálky
     napsané rovnou v textu čte část čteček po písmenech. */
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-mute);
  /* Obecné pravidlo `p { max-width: 62ch }` drží míru u odstavců, ale tady
     by podtitul uřízlo na 867 px z 1163 a `text-align: center` by ho pak
     vycentroval jen uvnitř toho useknutého bloku — tedy opticky doleva.
     Změřeno, ne odhadnuto. */
  max-width: none;
}

/* V knockoutu podtitul jen DRŽÍ MÍSTO. V desce je černý, takže se do
   knockoutu nevyřízne a video jím neprojde. */
.uvod__deska .uvod__podtitul { color: var(--cerna); }

/* --- Tlačítka v úvodu ---
   Dvě výzvy vedle sebe pod podtitulem. Obě jsou pilulky s obrysem a měkkou
   září: jedna bílá, druhá v barvě webu. Plnou plochu tu nechceme — ta zbyla
   jen na jednom místě webu a dvě plné pilulky vedle sebe by se praly.

   Jsou i v OBOU vrstvách sazby, aby měly stejnou výšku; v přízračné desce
   jsou to `<span>`, ne `<a>`. Deska je `aria-hidden` a zaměřitelný
   odkaz v nich by byl past pro klávesnici — člověk by tabem skočil na odkaz,
   který čtečka neohlásí a oko nevidí. */
.uvod__akce {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn-uvod {
  display: inline-flex;
  align-items: center;
  padding: 0.92em 1.7em;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--pismo);
  font-size: var(--t-lista);
  font-weight: 500;
  letter-spacing: var(--prostrk-lista);
  /* Prostrkání přidává mezeru i ZA poslední písmeno; bez tohohle by text
     v pilulce seděl o polovinu prostrkání vlevo od středu. */
  padding-right: calc(1.7em - var(--prostrk-lista));
  text-transform: uppercase;
  white-space: nowrap;
  transition: box-shadow var(--doba-s) var(--krivka),
              border-color var(--doba-s) var(--krivka),
              transform var(--doba-s) var(--krivka);
}
.btn-uvod:hover,
.btn-uvod:focus-visible { transform: translateY(-1px); }

.btn-uvod--bila {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 20px -6px rgba(255, 255, 255, 0.55);
}
.btn-uvod--bila:hover,
.btn-uvod--bila:focus-visible {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 28px -6px rgba(255, 255, 255, 0.8);
}

/* Druhá výzva je PLNÁ PLOCHA, ne obrys — táž pilulka, jaká stávala v pravém
   horním rohu lišty. Je to hlavní akce úvodu, takže smí být nejvýraznější
   věcí na obrazovce; černá na bílé drží 21:1. */
.btn-uvod--plna {
  background: var(--bila);
  color: var(--cerna);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 22px -4px rgba(255, 255, 255, 0.45);
}
.btn-uvod--plna:hover,
.btn-uvod--plna:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 30px -4px rgba(255, 255, 255, 0.7);
}

/* V desce tlačítka jen DRŽÍ MÍSTO — černá, takže se nevyříznou do
   knockoutu. Rám i záře musí zmizet taky, jinak by se kreslily dvakrát. */
.uvod__deska .btn-uvod {
  background: var(--cerna);
  color: var(--cerna);
  border-color: var(--cerna);
  box-shadow: none;
}

/* Skutečná vrstva: nadpis je jen pro čtečku, podtitul je vidět. */
.uvod__text { position: relative; z-index: 2; }

/* Skutečný nadpis nese jen význam; kresbu dělá knockout výš. `opacity: 0`
   místo `display: none` nebo `visibility: hidden` — obojí by ho vzalo
   i čtečce, a `clip` na blokové sazbě přes dva řádky dělá neplechu. */
.uvod__nadpis--ctecka {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.uvod__radek {
  display: block;
  width: fit-content;
  margin-inline: auto;
}


/* Na úzkém obraze se rozestup krátí na polovinu — v plné šíři by delší
   řádek vyjel z panelu. */
@media (max-width: 47.99rem) {
  
  
}

/* `.uvod__veta` a `.btn-pilulka` odsud zmizely spolu s větou a výzvou
   v úvodu. Pilulkové tlačítko na webu nezůstalo nikde jinde; kdyby se
   vracelo, byla to modrá plocha s bílým textem (4,80:1). */

/* --- Objevte více ---
   Ukazatel na spodní hraně úvodu: slovo a pod ním drobná šipka. Vede na
   první sekci, takže to není jen ozdoba — je to odkaz, který někam jde.

   Šipka pomalu klesá a vrací se. Při `prefers-reduced-motion` stojí; smysl
   nese slovo, ne pohyb. */
.uvod__vic {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  color: var(--text-svetly);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--doba-s) var(--krivka);
}
.uvod__vic:hover,
.uvod__vic:focus-visible { color: var(--bila); }

.uvod__sipka {
  width: 1.15rem;
  height: 1.15rem;
  animation: sipka-klesa 2.4s var(--krivka) infinite;
}
.uvod__sipka path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uvod__vic:hover .uvod__sipka { animation-play-state: paused; }

@keyframes sipka-klesa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .uvod__sipka { animation: none; }
}


/* === 10b — Odpočet ====================================================== */

/* „Již brzy / TOHLE SI ZATÍM NECHÁME PRO SEBE. / Ale ne na dlouho.“ a odpočet
   pod úvodem. Čísla v Syne 800 se září — týž jazyk jako 98 % / 120+ / ∞ na
   slajdu hned pod tím. Dlaždice jsou sklo jako karty služeb, jen menší.

   Každá číslice má PEVNOU šířku (`.odpocet__znak`): Syne není
   neproporcionální a měnící se vteřiny by jinak cukaly do stran.
   Šířka je ZMĚŘENÁ (canvas, Syne 800): 1 → 0,529 em, 0 → 1,066,
   9 → 1,158 em (nejširší). Buňka 1,12 em — nejširší číslice přesahuje jen
   o boční mezeru kresby. Prvních 0,8 em bylo odhadem a číslice se
   překrývaly. Z toho i velikost: dvě číslice po 1,12 em se musí vejít do
   dlaždice široké ~70 px (375 px okno, mezi dlaždicemi jsou dvojtečky),
   proto 1,6 rem na mobilu.

   Záře za dlaždicemi jde podle (1 − t²)², ne lineárně — lineární spád se na
   konci zlomí a oko vidí prstenec (viz „Spád skvrny“ v CLAUDE.md). */
.odpocet-sekce { padding-bottom: clamp(2rem, 5vw, 4rem); }
.odpocet {
  position: relative;
  isolation: isolate;
  text-align: center;
}
.odpocet::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8%;
  z-index: -1;
  width: min(52rem, 90%);
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(126, 212, 222, 0.16) 0%,
    rgba(126, 212, 222, 0.147) 20%,
    rgba(126, 212, 222, 0.113) 40%,
    rgba(126, 212, 222, 0.066) 60%,
    rgba(126, 212, 222, 0.021) 80%,
    rgba(126, 212, 222, 0) 100%);
  pointer-events: none;
}
/* Prošel tudy a odešel nadpis „Chystá se něco velkého“ a podtitul „Dosud
   náš největší projekt.“ — klient je odebral. Sekce začíná cedulkou. */
.odpocet__brzy { max-width: none; }
.odpocet__brzy .stitek-brzy { font-size: 0.8rem; padding: 0.5em 1.15em; }
/* „Tohle si zatím necháme pro sebe. / ALE NE NA DLOUHO.“ — dodal klient.
   Nadpis sekce (h2) NORMÁLNĚ, druhý řádek VERZÁLKOU s prostrkáním jako
   popisky webu. Prošlo tudy obráceně (nadpis verzálkou, druhý řádek
   normálně a tlumeně) — klient chtěl nahoře malá a dole velká písmena. */
.odpocet__tajemstvi {
  max-width: none;
  margin-top: 1.25rem;
  font-family: var(--pismo-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.odpocet__dlouho {
  max-width: none;
  margin-top: 0.6rem;
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Dlaždice jen s běžícím odpočtem — bez skriptu by stály na „30 12 00 00“
   a tvářily se živě. Bez JS zůstane vidět datum pod nimi. */
.odpocet__mrizka { display: none; }
/* Mezi dlaždicemi DVOJTEČKY — klient poslal odpočet jako „31 : 12 : 48 : 27“. */
.odpocet--zive .odpocet__mrizka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
  gap: clamp(0.35rem, 1.2vw, 1rem);
  max-width: 46rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}
.odpocet__dlazdice {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(1rem, 2.5vw, 1.75rem) 0.25rem;
  border-radius: clamp(14px, 2vw, 22px);
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.025) 55%,
    rgba(126, 212, 222, 0.05));
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 24px 50px -26px rgba(0, 0, 0, 0.85);
}
.odpocet__cislo {
  display: flex;
  justify-content: center;
  font-family: var(--pismo-cislo);
  font-size: clamp(1.6rem, 0.8rem + 3.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}
/* Dvojtečka stojí na výšce čísel: stejné odsazení shora jako dlaždice,
   stejná velikost a řádkování jako číslo. Syne ji v subsetu nemá, kreslí
   ji Urbanist. */
.odpocet__dvojtecka {
  align-self: start;
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--pismo-cislo);
  font-size: clamp(1.6rem, 0.8rem + 3.4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}
.odpocet__znak {
  display: inline-block;
  width: 1.12em;
  text-align: center;
}
/* Změněná číslice přijede shora. Jen ta, která se změnila — celé číslo
   by každou vteřinu poskakovalo. */
.odpocet__znak--tik { animation: odpocet-tik 0.45s var(--krivka); }
@keyframes odpocet-tik {
  from { opacity: 0; transform: translateY(-0.25em); }
}
.odpocet__jednotka {
  font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.odpocet__datum {
  max-width: none;
  margin-top: 1.5rem;
  font-size: var(--t-sm);
  color: var(--text-mute);
}


/* === 11 — Proč NEW ANGLE =============================================== */



/* --- Proč NEW ANGLE ----------------------------------------------------
   Celá sekce je VYSTŘEDĚNÁ: nadpisek s čárkami, nadpis „Kolik dobrých věcí
   zůstane bez povšimnutí?“, čtyři krátké věty, výzva „Dejte mu důvod
   zůstat.“ a heslo „S TÍM UŽ SI NEW ANGLE PORADÍ.“ verzálkami (v HTML
   větně). Pod tím vzorec Digital × Physical × Visual × Space, bubliny
   Co děláme a rozcestník. Prošla tudy a odešla verze „Dobré nestačí.
   Musí to zůstat v hlavě.“ s heslem „JINÝ POHLED. SILNĚJŠÍ VÝSLEDEK.“ Prošel tudy a odešel manifest „Většina firem vypadá hůř,
   než jaké doopravdy jsou.“ se dvěma odstavci ve dvou sloupcích. */
.proc__obal { text-align: center; }
.proc .eyebrow { justify-content: center; }
/* Nadpis „Kolik dobrých věcí zůstane / bez povšimnutí?“ — DVA PEVNÉ
   ŘÁDKY (první čtyři slova, pak zbytek), písmem i řezem HLAVNÍHO HESLA
   úvodu (Urbanist 700, řádkování 1,06, prostrkání −0,03 em) a velikostí
   jako „Spojme síly“ — o stupeň menší než ostatní nadpisy sekcí. Na úzkém
   displeji se první řádek smí zalomit. Prošel tudy a odešel nadpis „Dobré
   nestačí. / Musí to zůstat v hlavě.“ */
.proc__nadpis {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.proc__radek { display: block; }
/* „povšimnutí?“ — malými a svítí JEN BÍLE, záře ve dvou vrstvách (těsná
   a široká) jako čísla na druhém slajdu. Prošla tudy verzálka
   „POVŠIMNUTÍ?“ s tyrkysovou září. */
.proc__zvyrazneni {
  color: var(--text);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.55),
    0 0 44px rgba(255, 255, 255, 0.30);
}
/* Krátké věty pod sebou, každá na vlastním řádku — rytmus, ne odstavec.
   Prošel tudy a odešel odstavec „Hledáme příležitosti tam, kde ostatní
   vidí hotovou věc…“. */
.proc__pribeh {
  display: grid;
  gap: 0.35rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.proc__veta {
  max-width: none;
  /* O trochu menší než `--t-md` (19–24 px) — klient chtěl menší: 16–20 px,
     na 1280 ≈ 19 px. */
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-mute);
}
/* Za „Scrolluje. Porovnává. Rozhoduje.“ je pauza jako prázdný řádek —
   klient ji chtěl mezi tím, jak zákazník vybírá, a tím, že vás přeskočil. */
.proc__veta--pauza { margin-bottom: 1.1em; }
/* Prošla tudy a odešla výzva „Dejte mu důvod zůstat.“ (větší, bíle) —
   heslo teď navazuje přímo na věty. */
.proc__heslo {
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}


/* --- Co děláme: čtyři bubliny -----------------------------------------
   Podle bloku „Co děláme“ na nebudnoname.cz (změřeno v prohlížeči na
   1280 px): 4 karty vedle sebe s mezerou 16 px, SKLO — jemný diagonální
   přechod v barvě webu, rozostření 28 px, rámeček 1 px, rohy 20 px —
   odsazení 36 × 28 px, text zarovnaný VLEVO (v rohu měla předloha měkkou
   svítící kouli 200 px — ta tu nakonec není). Ikona ve čtverečku 44 px s rohy 12 px, podbarvená a orámovaná,
   pod ní 18 px mezera; název tučně (~16,8 px), text 14 px / 1,7. Při
   najetí ikona zesvítí a zvětší se o 10 % a název se přebarví; navíc
   (klientovo přání) se bublina lehce zvedne a rozsvítí se jí obrys.
   Svítící koule z předlohy odešla.

   JINÉ JE: barva (jejich magenta → naše tyrkysová), písmo (Urbanist),
   názvy verzálkami (tak je klient napsal; v HTML větně) a ikony: místo
   jejich geometrických znaků (◎ ◆ ▲ ◈, které Urbanist nemá) tenké čáry
   k významu — oko, úhel s obloučkem, jiskra, srdce. Na tabletu 2 × 2,
   na mobilu pod sebou. */
.co-delame { margin-top: clamp(3rem, 6vw, 5rem); }
.co-delame__mrizka {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 63.99rem) {
  .co-delame__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 39.99rem) {
  .co-delame__mrizka { grid-template-columns: minmax(0, 1fr); }
}
.bublina {
  position: relative;
  overflow: hidden;
  padding: 36px 28px;
  border-radius: 20px;
  border: 1px solid rgba(126, 212, 222, 0.12);
  background: linear-gradient(160deg, rgba(126, 212, 222, 0.06), rgba(255, 255, 255, 0.016) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  text-align: left;
}
/* Přechody jsou tu s VYŠŠÍ vahou (dvě třídy) a za pravidlem odkrývání:
   bublina má i `.odkryv`, jehož `.js .odkryv { transition: … }` by jinak
   přebilo přechod obrysu i zvednutí. Odkrývání si nechává svoje postupné
   zpoždění (`--poradi`), najetí reaguje hned. */
.co-delame__mrizka .bublina {
  transition:
    opacity var(--doba-p) var(--krivka) calc(var(--poradi, 0) * 80ms),
    transform var(--doba-p) var(--krivka) calc(var(--poradi, 0) * 80ms),
    translate 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
/* Při najetí se bublina LEHCE ZVEDNE a ROZSVÍTÍ se jí obrys. Zvednutí je
   `translate`, ne `transform`: `transform` drží odkrývací animace
   (`.js .odkryv.je-videt { transform: none }` má vyšší váhu) a zvednutí
   přes něj by se nikdy neprojevilo. */
.bublina:hover {
  translate: 0 -4px;
  border-color: rgba(126, 212, 222, 0.55);
  box-shadow:
    0 0 0 1px rgba(126, 212, 222, 0.18),
    0 0 28px -4px rgba(126, 212, 222, 0.35);
}
/* Prošly tudy a odešly SVÍTÍCÍ KOULE v rozích bublin (radiální záře
   200 px — nejdřív všude vpravo nahoře jako v předloze, pak u každé
   bubliny jinde). Klient je nakonec nechtěl vůbec. */
.bublina__ikona {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid rgba(126, 212, 222, 0.12);
  background: rgba(126, 212, 222, 0.08);
  color: var(--barva);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.bublina__ikona svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bublina__nazev {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--pismo-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.25s ease;
}
.bublina__text {
  position: relative;
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-mute);
}
.bublina:hover .bublina__ikona {
  transform: scale(1.1);
  background: rgba(126, 212, 222, 0.15);
  border-color: rgba(126, 212, 222, 0.3);
  box-shadow: 0 0 20px rgba(126, 212, 222, 0.15);
}
.bublina:hover .bublina__nazev { color: var(--barva); }


/* --- Rozcestník Služby / Portfolio (tvar z Amazing Heroes) ---------------
   Klient poslal předlohu: panel „Úspěchy / Neúspěchy“ z webu Amazing Heroes
   (`.ref-split` / `.ref-half` v jejich styles.css). Převzaté beze změny:
   mřížka 2 × 1fr, rohy 34 px, rámeček 1 px, poloviny s vystředěným
   nápisem, min. výška 200 px, odsazení 46 × 30 px, svislá dělicí linka,
   nápis `clamp(1.5rem, 3vw, 2.2rem)` v Urbanistu 700, zespodu rozsvícená
   radiální záře při najetí a na mobilu poloviny pod sebou (38 × 28 × 34 px).

   JINÉ JE: plocha je SKLENĚNÁ (průsvitná, s rozostřením), záře i barva
   nápisu při najetí jsou v jediné barvě webu (Heroes mají magentu a azur
   s přechodem v textu) a nápis je `<span>`, ne `<h3>` — je to navigace,
   ne nadpisy. */
.rozcestnik {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -40px rgba(0, 0, 0, 0.8);
}
.rozcestnik__pul {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 200px;
  padding: 46px 30px;
  color: var(--text);
  transition: background 0.25s ease, color 0.25s ease;
}
.rozcestnik__pul + .rozcestnik__pul { border-left: 1px solid rgba(255, 255, 255, 0.1); }
/* Záře zespodu — vlastní vrstva, aby se dala prolnout jen průhledností. */
.rozcestnik__pul::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 50% 110%, rgba(126, 212, 222, 0.18), rgba(126, 212, 222, 0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.rozcestnik__pul:hover::after,
.rozcestnik__pul:focus-visible::after { opacity: 1; }
.rozcestnik__pul:hover,
.rozcestnik__pul:focus-visible { color: var(--barva); }
/* Obrys fokusu dovnitř — `overflow: hidden` panelu by vnější uřízl. */
.rozcestnik__pul:focus-visible { outline-offset: -6px; }
.rozcestnik__nazev {
  position: relative;
  font-family: var(--pismo-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
@media (max-width: 40rem) {
  .rozcestnik { grid-template-columns: minmax(0, 1fr); }
  .rozcestnik__pul + .rozcestnik__pul { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .rozcestnik__pul { padding: 38px 28px 34px; }
}


/* --- Skleněná tlačítka (tvar z Amazing Heroes) -------------------------
   Klient chtěl tlačítka VZHLEDOVĚ STEJNĚ jako u Amazing Heroes, jen víc
   „glassy“. Z Heroes je převzaté beze změny: pilulka, Urbanist 700,
   1,08 rem, prostrkání −0,01 em, odsazení 16 × 34 px, rámeček 1,5 px,
   mezera 10 px, zvednutí o 2 px při najetí a časování přechodů. Na tmavé
   ploše tam je první plné bílé a druhé průhledné s bílým obrysem (28 %).

   JINÉ JE SKLO A BARVA ZÁŘE: plocha je průsvitná s rozostřením pozadí
   a světelnou hranou nahoře; při najetí Heroes přelévají svůj přechod
   magenta → azurová — tady svítí jediná barva webu, jinak by na web
   přišly cizí barvy. Černá na plném skle drží přes 12:1. */
.akce-sklo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.btn-sklo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--pismo-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 30px -14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease,
    color 0.25s ease, border-color 0.25s ease;
}
.btn-sklo:hover,
.btn-sklo:focus-visible {
  transform: translateY(-2px);
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 16px 34px -14px rgba(126, 212, 222, 0.6);
}
.btn-sklo--plne {
  color: #0A0A10;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.btn-sklo--plne:hover,
.btn-sklo--plne:focus-visible {
  color: #0A0A10;
  background: rgba(255, 255, 255, 0.95);
  border-color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 16px 34px -14px rgba(126, 212, 222, 0.7);
}

/* První sekce PODSTRÁNKY začíná pod lištou — na úvodní stránce tuhle roli
   nese úvod, který má odsazení na lištu vlastní. */
.sekce--uvodni { padding-top: calc(var(--hlavicka-v) + var(--sekce)); }


/* --- Slajd se třemi čísly ---------------------------------------------
   Video je v OBDÉLNÍKU SE ZAOBLENÝMI ROHY a přes něj se střídají tři čísla
   (98 % · 120+ · ∞). Se skriptem se slajd při scrollu PŘILEPÍ, video se
   přibližuje, čísla se vystřídají a na konci se videem proletí a scéna se
   prolne do další sekce — viz „Režim přilepení“ níž a modul 09.

   Tady je KLIDNÁ PODOBA: bez JS a při utlumeném pohybu se nic nelepí ani
   nepřibližuje a panel ukáže všechna tři čísla pod sebou. Dřív se slajd
   v takovém případě schoval celý — s jedním číslem to šlo, se třemi by
   o ně tihle lidé přišli.

   Rám NEMÁ vytrácející se okraje: hranou je sám obdélník a panel video
   prostě ořízne (`overflow: hidden`). Prošel tudy a odešel pás přes celou
   šířku vysoký 72 svh. */
.slajd-video { position: relative; }

.slajd-video__scena {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--hlavicka-v) + 3rem) 3rem;
}

/* Rám nese rozměr a text; panel s videem je v něm jen VRSTVA. Díky tomu se
   panel může zvětšovat, aniž by se zvětšoval text nad ním. */
.slajd-video__ram {
  position: relative;
  /* Obal obsahu má 90 rem, panel jen 62 — má to být panel, ne pás. */
  max-width: 62rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
}

.video {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-blok);
  overflow: hidden;
  /* Bez videa (bez JS, utlumený pohyb) je panel černá deska s mřížkou
     a závojem, ne díra do pole. */
  background: var(--cerna);
}

.video__stopa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  /* Jen tolik rozostření, aby se nedrolila komprese — ne aby se obraz
     schoval. Dokud přes video šel text sekce, muselo být 14 px. */
  filter: blur(2px) saturate(1.05);
}

.video__clona {
  position: absolute;
  inset: 0;

  /* 1) MŘÍŽKA, kterou chce klient vidět i přes video. `background-attachment:
        fixed` ji váže k oknu, ne k panelu, takže navazuje na mřížku stránky
        (ta je taky fixní) a na hraně panelu se nezlomí.
     2) LEHKÝ ZÁVOJ v jediné barvě webu — široký měkký spád přes celý panel.
     3) CLONA POD TEXTEM. Tyrkysový text na jasném videu propadá; clona 0,68
        mu dá 5,41:1, tedy i na drobný text. Není to plotna přes celý panel,
        ale měkký eliptický stín pod textem — zbytek videa zůstane v plné
        síle. Bílý popisek má na témž místě 9,20:1. */
  background-image:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px),
    radial-gradient(95% 110% at 50% 45%,
      rgba(126, 212, 222, 0.18) 0%, rgba(126, 212, 222, 0.13) 38%,
      rgba(126, 212, 222, 0.06) 70%, rgba(126, 212, 222, 0) 100%),
    radial-gradient(52% 66% at 50% 50%,
      rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.62) 42%,
      rgba(0, 0, 0, 0.34) 72%, rgba(0, 0, 0, 0) 100%);
  background-size: 80px 80px, 80px 80px, auto, auto;
  background-attachment: fixed, fixed, scroll, scroll;
}

.video__text {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  /* Rozestup mezi čísly v klidné podobě, kde stojí pod sebou. */
  gap: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.video__cislo {
  margin: 0;
  display: grid;
  justify-items: center;
  /* Odstup čísla od řádku pod ním. Syne kreslí devítku skoro až na spodní
     hranu řádku (kresba končí 0,02 em nad ní), takže viditelná mezera je
     skoro celá tahle hodnota. Dřív 0,35 em (6 px, vidět ~12 px) — klient
     chtěl text pod číslem níž. */
  gap: 1.1rem;
}
.video__cislo-hodnota {
  /* Syne 800 podle klientovy předlohy. Prošel tudy a odešel Urbanist
     (nejdřív 400, pak 700 jako nadpis úvodu). */
  font-family: var(--pismo-cislo);
  font-weight: 800;
  /* O čtvrtinu menší než dřív (3–6,5 rem) — klient chtěl číslo menší. */
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  /* BÍLÉ A SVÍTÍCÍ. Záře má dvě vrstvy, těsnou a širokou — jedna vrstva dá
     buď tvrdý lem, nebo mlhu bez jádra. Týž postup jako u padajících hvězd
     a u ukazatele postupu v liště. Záře je BÍLÁ — klient nechtěl, ať
     čísla svítí modře. Prošla tudy a odešla tyrkysová záře. */
  color: var(--text);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.55),
    0 0 44px rgba(255, 255, 255, 0.30);
}
/* V „120+“ stojí DVACÍTKA VÝŠ než jednička — stejně jako v „98“ stojí
   osmička výš než devítka. Změřeno v Syne 800 (vrchol kresby nad účařím):
   9 → 0,515 em, 8 → 0,660 em, tedy osmička o 0,145 em výš; 1 → 0,490,
   2 a 0 → 0,505 em. Dvacítka se proto zvedá o 0,14 em. `position:
   relative` hýbe jen kresbou, ne řádkem, a mezi 1 a 20 v HTML není
   mezera — čtečka dál čte souvislé „120+“. „+“ zůstává na místě. */
.video__cislo-vys {
  position: relative;
  top: -0.14em;
}

/* ∞ je v Syne ŠIROKÉ A PLOCHÉ — stejně vysoké jako číslice, ale přes
   1,5 em široké a se štěrbinami místo oček; klient řekl, že vypadá divně.
   Natahuje se svisle ×1,4. Vybráno vykreslením vedle „120+“ a „98 %“:
   ∞ z jiných písem (Urbanist, Manrope, Lexend) je malé a úzké a k širokým
   číslicím Syne nesedí, natažené Syne zůstává v jejich stylu.

   Natahuje se OD ÚČAŘÍ nahoru: v Syne při řádkování 1 leží účaří 0,83 em
   od horní hrany řádku (ascent 0,93 + descent 0,27 přes 1 em řádku).
   Transformace nemění rozložení a v HTML zůstává znak ∞, takže čtečka
   přečte „nekonečno“. */
.video__nekonecno {
  display: inline-block;
  transform: scaleY(1.4);
  transform-origin: 50% 0.83em;
}
/* Prošlo tudy a odešlo RUČNÍ ZVEDNUTÍ OSMIČKY (`top: −0.1em`). V Syne
   visí devítka sama pod účaří, takže osmička už stojí výš — přesně jako
   na předloze; ruční posun by to zdvojil. */
/* JEDEN ŘÁDEK pod číslem: „spokojených zákazníků. Buďte další.“ —
   popisek a odkaz vedle sebe, stejným písmem. Na úzkém displeji se smí
   zalomit, ale JEN MEZI popiskem a odkazem — oba kusy mají `nowrap`.
   Na 320 px je řádek o 4 px širší než obsah a bez toho se zalomil
   uvnitř odkazu („BUĎTE“ / „DALŠÍ.“) — odkaz se má číst jako celek. */
.video__cislo-radek {
  max-width: 100%;
  text-align: center;
}
.video__cislo-popis,
.video__vyzva { white-space: nowrap; }
.video__cislo-popis {
  font-size: var(--t-lista);
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  /* Bílá, ne barva — dvě barevné řádky pod sebou by si braly důraz. */
  color: var(--text);
}

/* „Buďte další.“ a „Začněme tím vaším.“ jsou ODKAZY na Kontakt, ne jen
   řádky textu — jediné věci na slajdu, které můžou někam vést. */
.video__vyzva {
  /* Písmem, řezem a barvou TOTÉŽ co popisek „spokojených zákazníků.“,
     se kterým stojí na JEDNOM ŘÁDKU (písmo obsahu, drobná verzálka
     s prostrkáním, bílá). Prošly tudy a odešly tyrkysová drobná verzálka,
     Urbanist 700 větně a samostatný řádek pod popiskem. */
  font-size: var(--t-lista);
  font-weight: 400;
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  color: var(--text);
  /* ODKAZ BEZ PODTRŽENÍ — odlišuje ho BÍLÁ ZÁŘE ve dvou vrstvách (těsná
     a široká), stejně jako číslo nad ní. Klient chtěl, ať víc svítí, není
     podtržený a svítí bíle, ne modře (prošla tudy tyrkysová záře). Prošlo tudy a odešlo podtržení (`::after`
     přes šířku odkazu, při najetí se stahovalo). Při najetí a fokusu záře
     zesílí; klávesnice má navíc globální obrys `:focus-visible`.

     Bílá drží na cloně 9,20:1; záře kolem písmen podklad zesvětlí, ale
     i v jejím nejsilnějším místě zůstává bílá nad 6:1. */
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.75),
    0 0 22px rgba(255, 255, 255, 0.40);
  transition: text-shadow var(--doba-s) var(--krivka);
}
.video__vyzva:hover,
.video__vyzva:focus-visible {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 30px rgba(255, 255, 255, 0.6);
}

/* --- Režim přilepení ----------------------------------------------------
   Třídu `.slajd-video--scroll` nasadí modul 09 (jen se skriptem a bez
   utlumeného pohybu). Slajd je pak vysoký 4 obrazovky: 1 je scéna, která
   se přilepí k oknu, 3 jsou dráha. Skript píše `--slajd-p` (0–1), kolik
   z dráhy je proscrollováno; všechno ostatní se počítá tady. Na konci
   dráhy se scéna odlepí a web pokračuje NORMÁLNĚ dolů.

   ČASOVÁNÍ (z dráhy 0–1) — každé číslo chvíli STOJÍ, mezi nimi je krátká
   pauza, ∞ už zůstane:
     0,00–0,25  98 %     · odchod 0,25–0,31
     0,31–0,33  pauza
     0,33–0,62  120+     · příchod 0,33–0,39, odchod 0,62–0,68
     0,68–0,70  pauza
     0,70–      ∞        · příchod 0,70–0,76, ZŮSTANE (`--do: 2`)
     0,00–1,00  panel se přibližuje až na `--slajd-max`, video v něm ×1,5
                (kolo s „úplně mini“ ×1,03 / ×1,05 klient vrátil zpátky)

   PŘIBLÍŽENÍ MÁ STROP: panel smí narůst jen tak, aby od všech okrajů okna
   zůstaly aspoň 2 cm (CSS cm = 96/2,54 px, tedy 76 px). `--slajd-max`
   počítá modul 09 a nikdy není pod 1 — na mobilu je panel k okraji blíž
   už v klidu, takže tam roste jen video v něm. Dřív byly 3 cm a panel
   pod lištou; klient chtěl, ať se video zvětší víc.

   Prošel tudy a odešel PRŮLET (panel naroste přes celé okno, scéna
   zprůhlední) a PROLNUTÍ do další sekce (záporný okraj o obrazovku, sekce
   vyjížděla zpod scény). Klient chtěl, ať se video nepřiblíží úplně a web
   za slajdem pokračuje normálně. */
.slajd-video--scroll {
  height: 400svh;
  z-index: 1;
}
.slajd-video--scroll .slajd-video__scena {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  /* Panel je ve scéně NA STŘEDU OKNA, ne pod lištou: lišta je průhledná
     a nad panelem jen visí, a vystředěný panel má k hornímu i dolnímu
     okraji stejně daleko — může narůst víc (strop viz modul 09). */
  padding-block: 1rem;
  /* Zvětšené video se ořízne o okraj scény — stránka se do stran
     neposouvá nikdy. */
  overflow: hidden;
}

.slajd-video--scroll .slajd-video__ram {
  /* Lehce víc do šířky než 16:9 — klient chtěl protáhnout. */
  aspect-ratio: 1.9 / 1;
  padding: 0;
}
/* Na telefonu by široký pás měl jen 176 px na výšku a přilepená scéna
   by nad ním i pod ním nechala po 300 px prázdna. Na výšku ho proto
   panel vyplní — video se ořízne (`cover`), čísla zůstanou na středu. */
@media (max-width: 47.99rem) {
  .slajd-video--scroll .slajd-video__ram {
    aspect-ratio: 4 / 5;
    max-height: 72svh;
  }
}

.slajd-video--scroll .video {
  transform: scale(calc(1 + (var(--slajd-max, 1) - 1) * var(--slajd-p, 0)));
  will-change: transform;
}
.slajd-video--scroll .video__stopa {
  transform: scale(calc(1 + 0.5 * var(--slajd-p, 0)));
}
/* `background-attachment: fixed` uvnitř transformovaného prvku nefunguje,
   takže mřížka v panelu je tu vázaná k panelu a počátek jí posune modul 09
   o polohu panelu v okně — dokud je scéna přilepená, navazuje na mřížku
   stránky. Při přiblížení se zvětšuje s panelem, jako by byla na něm. */
.slajd-video--scroll .video__clona {
  background-attachment: scroll, scroll, scroll, scroll;
  background-position: var(--slajd-mrizka, 0 0), var(--slajd-mrizka, 0 0), 0 0, 0 0;
}

/* Tři stavy leží PŘES SEBE a každý přijde zdola a odejde nahoru. `--od`
   a `--do` má každý stav v HTML — skript z nich čte totéž. */
.slajd-video--scroll .video__stav {
  grid-area: 1 / 1;
  --stav-vstup: clamp(0, calc((var(--slajd-p, 0) - var(--od)) / 0.06), 1);
  --stav-odchod: clamp(0, calc((var(--slajd-p, 0) - var(--do)) / 0.06), 1);
  opacity: calc(var(--stav-vstup) - var(--stav-odchod));
  transform: translateY(calc((1 - var(--stav-vstup)) * 1.5rem - var(--stav-odchod) * 1.5rem));
  pointer-events: none;
}
/* Klikat se dá jen na stav, který je zrovna vidět (`data-stav` píše skript). */
.slajd-video[data-stav="1"] .video__stav--1,
.slajd-video[data-stav="2"] .video__stav--2,
.slajd-video[data-stav="3"] .video__stav--3 { pointer-events: auto; }


/* === 12 — Práce ========================================================= */

/* Portfolio ve STEJNÉM SKLENĚNÉM SYSTÉMU jako karty služeb — `.karta`
   (sklo, lom světla, odlesk a náklon z modulu 11), stejná hlavička stránky.
   Projekty zatím NEJSOU, klient si je nechal na později: šest zástupných
   karet stejné velikosti, v každé místo pro obraz se značkou a cedulka
   „Připravujeme“. Až budou projekty, obraz půjde do `.projekt-karta__obraz`
   a pod něj název a obory.

   Prošel tudy a odešel editoriální seznam (Amazing LAB · Amazing Heroes ·
   TOMINTER, obraz střídavě vlevo a vpravo) i s pravidly `.projekt*`
   a `.prace__seznam`. Fotky v `assets/img/prace/` zůstaly na disku. */

/* Dva řádky nadpisu, druhý svítí bíle — táž záře jako „povšimnutí?“. */
.portfolio__nadpis { max-width: none; }
.portfolio__radek { display: block; }
/* „NÁPADY JSOU ZAČÁTEK.“ drobnou verzálkou s prostrkáním — jako popisky
   pod čísly a nadpisky; velké zůstává jen „Tohle jsou výsledky.“ */
.portfolio__radek--male {
  margin-bottom: 0.9rem;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.portfolio__zvyrazneni {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}

.projekty {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
}
@media (min-width: 40rem) {
  .projekty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .projekty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Místo pro obraz: tmavá deska s jemnou mřížkou (jako pozadí webu, jen
   hustší), měkká záře v barvě webu podle (1 − t²)² a značka ve stínu. */
.projekt-karta__obraz {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 1.25rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.28);
  background-image: radial-gradient(closest-side at 50% 55%,
    rgba(126, 212, 222, 0.14) 0%,
    rgba(126, 212, 222, 0.129) 20%,
    rgba(126, 212, 222, 0.099) 40%,
    rgba(126, 212, 222, 0.057) 60%,
    rgba(126, 212, 222, 0.018) 80%,
    rgba(126, 212, 222, 0) 100%);
}
.projekt-karta__obraz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, rgba(255, 255, 255, 0) 1px);
  background-size: 24px 24px;
  background-position: center;
}
.projekt-karta__znak {
  position: relative;
  width: 38%;
  height: auto;
  color: #FFFFFF;
  opacity: 0.16;
}
.projekt-karta__znak path { fill: currentColor; }
.projekt-karta__stav {
  max-width: none;
  margin-top: 1.1rem;
}


/* === 13 — Služby ======================================================== */

/* Čtyři kategorie jako ČTYŘI STEJNÉ SKLENĚNÉ KARTY — Digital, Brand,
   Experience, Next Angle. Klient chtěl identickou šířku i výšku, „jeden
   čistý prémiový systém“ a žádný SaaS vzhled. Každá služba v kartě je
   odkaz na svůj detail: se skriptem se detail otevře v okně (modul 12),
   bez skriptu kotva skočí na seznam detailů pod kartami.

   Prošel tudy a odešel rejstřík deseti služeb (`.sluzba`) a ceník s TODO
   cenami (`.polozka`) — i s pravidly. */

/* Hlavička podstránky (Služby, Portfolio): nadpisek s čárkami a h1 na středu. */
.stranka-hlava { text-align: center; }
.stranka-hlava .eyebrow { justify-content: center; }
/* Karty mají být NAHOŘE — sekce začíná těsněji pod lištou než ostatní
   úvodní sekce podstránek (`--sekce` by je na 1280 × 820 stáhlo pod ohyb). */
.sekce--nahore { padding-top: calc(var(--hlavicka-v) + clamp(2rem, 5vw, 4.5rem)); }
/* Velikostí a řezem jako „Spojme síly“ — nadpis stránky, ne plakát. */
.stranka-hlava__nadpis {
  max-width: 18ch;
  margin: 1.25rem auto 0;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* Stejná výška drží `grid-auto-rows: 1fr` — platí pro VŠECHNY řádky
   mřížky, takže i na tabletu (2 × 2) a na mobilu (pod sebou) jsou karty
   stejně vysoké. Next Angle má jen dvě služby, takže má dole vzduch;
   klient chtěl identickou výšku.

   Čtyři sloupce až od 75 rem: „EXPERIENCE“ verzálkou potřebuje kolem
   200 px a na 1024 px by v kartě o šířce 175 px přeteklo. */
.kategorie {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
}
@media (min-width: 40rem) {
  .kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .kategorie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Položka seznamu nese odkrývání (`transform`), karta v ní náklon —
   dvě vlastnosti `transform` na jednom prvku by se přepisovaly. */
.kategorie__polozka { display: grid; }

/* --- Karta: sklo s lomem světla ------------------------------------------
   Vrstvy: průsvitná plocha se spádem (světlo shora zleva, v protějším
   rohu nádech barvy webu) → rozostřené pozadí → světelné hrany ve stínu
   `inset` → `::after` odlesk, který jede za kurzorem → `::before` hrana
   s lomem (bílá nahoře vlevo, barva webu vpravo dole).

   Náklon a polohu odlesku píše modul 11 do `--rx`, `--ry`, `--mx`, `--my`,
   jen pro myš a mimo utlumený pohyb. Bez skriptu karta stojí a odlesk je
   nahoře vlevo. */
.karta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border-radius: 24px;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.035) 38%,
    rgba(255, 255, 255, 0.02) 64%,
    rgba(126, 212, 222, 0.055) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -28px rgba(0, 0, 0, 0.85);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--krivka), box-shadow 0.4s ease;
}
.karta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.08) 30%,
    rgba(126, 212, 222, 0) 55%,
    rgba(126, 212, 222, 0.32) 88%,
    rgba(255, 255, 255, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Odlesk leží POD obsahem: `z-index: −1` uvnitř `isolation: isolate` se
   kreslí nad plochou karty, ale pod textem. */
.karta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Prošel tudy a odešel ŠIKMÝ PAPRSEK přes celou kartu (pruh pod 115°) —
     klient ho v kartách nechtěl. Zůstal jen měkký odlesk za kurzorem. */
  background:
    radial-gradient(26rem circle at var(--mx, 18%) var(--my, 0%),
      rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 60%);
  opacity: 0.75;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.karta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(126, 212, 222, 0.22),
    0 0 44px -14px rgba(126, 212, 222, 0.32),
    0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.karta:hover::after { opacity: 1; }
/* Během pohybu myši náklon jen krátce dotahuje, jinak by karta za
   kurzorem viditelně zaostávala. Třídu nasazuje modul 11. */
.karta--nad { transition: transform 0.12s linear, box-shadow 0.4s ease; }

.karta__hlava {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.karta__hlava::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
/* Číslo v Syne jako čísla na druhém slajdu homepage — subset ho má. */
.karta__cislo {
  font-family: var(--pismo-cislo);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-mute);
}
.karta__nazev {
  margin-top: 1.5rem;
  font-family: var(--pismo-display);
  font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Heslo drží dva řádky i tam, kde se vejde na jeden — seznamy služeb pak
   začínají ve všech kartách na stejné výšce. */
.karta__heslo {
  max-width: none;
  min-height: calc(2 * 1.35em);
  margin-top: 0.6rem;
  font-size: 1.02rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: balance;
}
.karta__sluzby {
  margin-top: 1.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.karta__sluzba + .karta__sluzba { border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* Řádek služby je odkaz na detail: jméno, pod ním orientační cena, vpravo
   kroužek se šipkou — ten říká „tohle se dá otevřít“. */
.sluzba-radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  margin-inline: -0.6rem;
  padding: 0.75rem 0.6rem;
  border-radius: 12px;
  transition: background 0.25s ease;
}
.sluzba-radek__nazev {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}
.sluzba-radek__cena {
  grid-column: 1;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.sluzba-radek__sipka {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-mute);
  transition: translate 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sluzba-radek__sipka svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sluzba-radek:hover,
.sluzba-radek:focus-visible { background: rgba(255, 255, 255, 0.05); }
.sluzba-radek:hover .sluzba-radek__sipka,
.sluzba-radek:focus-visible .sluzba-radek__sipka {
  translate: 2px 0;
  color: var(--barva);
  border-color: rgba(126, 212, 222, 0.6);
  box-shadow: 0 0 16px -2px rgba(126, 212, 222, 0.45);
}

/* Hvězdička u Moment — klient ji tam napsal.
   Kresba, ne emoji: emoji by přineslo žlutou, tedy druhou barvu webu.
   Stojí v řádku za posledním slovem a s ním se i zalamuje (`.bez-zlomu`) —
   jako samostatná položka flexu padala na vlastní řádek. `inline-block`
   výslovně, reset dává `svg` blok. */
.bez-zlomu { white-space: nowrap; }
.hvezda {
  display: inline-block;
  vertical-align: -0.02em;
  margin-left: 0.15em;
  width: 0.8em;
  height: 0.8em;
  color: var(--barva);
  filter: drop-shadow(0 0 5px rgba(126, 212, 222, 0.6));
}
.hvezda path { fill: currentColor; }

/* „Již brzy“ — cedulka místo ceny. Služba se nedá objednat ani nacenit. */
.stitek-brzy {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  border: 1px solid rgba(126, 212, 222, 0.4);
  background: rgba(126, 212, 222, 0.06);
  color: var(--barva);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.kategorie__pozn {
  max-width: none;
  margin-top: 1.75rem;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-mute);
}

/* „Víc služeb. Lepší podmínky.“ + věta pod tím (text dodal klient) —
   NORMÁLNĚ NA STŘEDU, bez karty a bez verzálek. Prošel tudy skleněný pruh
   s ikonou a nadpisem verzálkou; klient ho nechtěl v kartě. */
.vyhoda {
  max-width: 44rem;
  margin: var(--kolem-vyhody, clamp(4.5rem, 10vw, 8.5rem)) auto 0;
  text-align: center;
}
/* Mezera NAD a POD „Víc služeb“ je STEJNÁ — klient si to vyžádal. Jedno
   číslo pro obojí: nad blokem je to jeho horní okraj (od poznámky pod
   kartami), pod ním spodní odsazení sekce. Další viditelná věc je až panel
   ceníku (seznam detailů mezi nimi skript skryje), a ten si proto horní
   odsazení nebere — jinak by se dvě odsazení sekcí sečetla (~300 px dole
   proti ~90 px nahoře, tak to bylo). Bez JS stojí mezi nimi seznam
   detailů, který horní odsazení nemá, takže navazuje stejně. */
.sekce--vyhoda {
  --kolem-vyhody: clamp(4.5rem, 10vw, 8.5rem);
  padding-bottom: var(--kolem-vyhody);
}
.sekce--za-vyhodou { padding-top: 0; }
.vyhoda__nadpis {
  font-family: var(--pismo-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.vyhoda__zvyrazneni {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}
.vyhoda__text {
  max-width: 36ch;
  margin: 0.9rem auto 0;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--text-mute);
  text-wrap: balance;
}

/* --- Detail služby -------------------------------------------------------
   Bez skriptu je to SEZNAM panelů pod kartami (kotvy z karet na něj
   skočí). Se skriptem ho modul 12 přestěhuje do okna `.okno--detail`
   a ukáže vždy jen jeden. Texty jsou tedy v HTML jednou a čte je
   i vyhledávač. */
.detaily-sekce { padding-top: 0; }
.detaily__nadpis {
  justify-content: center;
  margin-bottom: 1.5rem;
}
.detaily {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 16px;
}
.detail {
  scroll-margin-top: calc(var(--hlavicka-v) + 1rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
}
.detail__kategorie {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.detail__nazev {
  margin-top: 0.5rem;
  padding-right: 2.5rem;
  font-family: var(--pismo-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.detail__nazev .hvezda { width: 0.55em; height: 0.55em; }
.detail__headline {
  max-width: none;
  margin-top: 0.9rem;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
}
.detail__text {
  max-width: 44ch;
  margin-top: 0.75rem;
  line-height: 1.6;
  color: var(--text-mute);
}
.detail__slova {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.4rem;
}
.detail__slovo {
  padding: 0.4em 0.95em;
  border-radius: 999px;
  border: 1px solid rgba(126, 212, 222, 0.28);
  background: rgba(126, 212, 222, 0.06);
  color: var(--barva);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.detail__pata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.detail__cena {
  display: grid;
  gap: 0.2rem;
  max-width: none;
}
.detail__cena-popisek {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.detail__cena-hodnota {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.detail__pata .stitek-brzy { font-size: 0.85rem; padding: 0.55em 1.1em; }

/* Velká písmena na CTA si klient napsal („MÁM ZÁJEM“, „SPOJME SÍLY“…).
   Tvar zůstává ze skleněné pilulky, jen sazba je verzálková. */
.btn-sklo--verzalky {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 32px;
}

/* --- Okna (detail služby, konfigurátor) ----------------------------------
   Nativní `<dialog>` přes `showModal()`: past na fokus, Esc, zbytek
   stránky mimo dosah čtečky — nic z toho se nepíše ručně. Plocha okna
   je sytější než karty, protože pod ní je ztlumená stránka a text musí
   držet kontrast i bez `backdrop-filter`. */
.okno {
  width: min(34rem, calc(100% - 1.5rem));
  max-width: none;
  max-height: calc(100svh - 1.5rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 28px;
  /* Tmavé posuvníky — bez toho kreslí prohlížeč v okně bílé. */
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  color: var(--text);
  background: linear-gradient(155deg, rgba(38, 46, 50, 0.78), rgba(8, 10, 12, 0.86));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 40px 100px -30px rgba(0, 0, 0, 0.9);
}
.okno::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.okno[open] { animation: okno-vjezd 0.45s var(--krivka); }
@keyframes okno-vjezd {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}
/* Stránka pod otevřeným oknem se neposouvá. */
html:has(.okno[open]) { overflow: hidden; }

.okno__zavrit {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.okno__zavrit:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.okno__zavrit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* V okně je detail bez vlastního panelu — panelem je okno. */
.okno .detaily { display: block; }
.okno .detail {
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* === 13b — Ceník ======================================================== */

/* Ceník už není seznam cen — ty jsou u služeb v kartách. Je to VÝRAZNÁ
   VÝZVA „Kolik bude stát váš nový úhel?“ a za ní konfigurátor odhadu
   v okně (modul 13). Bez skriptu vede tlačítko rovnou na dotazník.

   Záře pod panelem jde podle (1 − t²)², ne lineárně: lineární spád se na
   konci zlomí a oko to vidí jako prstenec (viz „Spád skvrny“ v CLAUDE.md). */
.odhad {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 32px;
  text-align: center;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.02) 55%,
    rgba(126, 212, 222, 0.06));
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.odhad::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -45%;
  z-index: -1;
  width: 85%;
  height: 95%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(126, 212, 222, 0.22) 0%,
    rgba(126, 212, 222, 0.203) 20%,
    rgba(126, 212, 222, 0.155) 40%,
    rgba(126, 212, 222, 0.09) 60%,
    rgba(126, 212, 222, 0.029) 80%,
    rgba(126, 212, 222, 0) 100%);
  pointer-events: none;
}
.odhad .eyebrow { justify-content: center; }
/* „Kolik bude stát váš NOVÝ ÚHEL?“ — věta normálně, verzálkou jen NOVÝ
   ÚHEL (tak to klient napsal). Prošla tudy verzálka přes celý nadpis. */
.odhad__nadpis {
  max-width: 20ch;
  margin: 1.25rem auto 0;
  font-family: var(--pismo-display);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* NOVÝ ÚHEL verzálkou, v řezu 800 a svítí bíle — táž záře jako
   „povšimnutí?“ a čísla na homepage. */
.odhad__zvyrazneni {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}
.odhad__podtext {
  max-width: none;
  margin-top: 1.1rem;
  font-size: var(--t-md);
  color: var(--text-mute);
}
.odhad .akce-sklo { justify-content: center; }

/* --- Konfigurátor --------------------------------------------------------
   Jedna otázka na obrazovku, velké dlaždice, ukazatel postupu a průběžný
   odhad dole. Okno má PEVNOU výšku, aby při přechodu mezi otázkami
   neposkakovalo; když se obsah nevejde, posouvá se jen scéna uprostřed. */
.konfigurator {
  width: min(46rem, calc(100% - 1.5rem));
  height: min(44rem, calc(100svh - 1.5rem));
  max-height: none;
  overflow: hidden;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
/* `display` jen u OTEVŘENÉHO okna — jinak by přebil `display: none`
   zavřeného `<dialog>` z prohlížeče. */
.konfigurator[open] {
  display: flex;
  flex-direction: column;
}
@media (max-width: 33.99rem) {
  .konfigurator {
    width: calc(100% - 1rem);
    height: calc(100svh - 1rem);
    border-radius: 22px;
  }
}

.konf-hlava {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 40px;
  padding-right: 3.25rem;
}
.konf-titul,
.konf-krok-text {
  max-width: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.konf-krok-text {
  margin-left: auto;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Postup je `scaleX`, ne `width` — skládá ho kompozitor, nepřepočítává
   se layout. Týž postup jako ukazatel v liště. */
.konf-postup {
  position: relative;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.konf-postup__cara {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 212, 222, 0.5), var(--barva));
  box-shadow: 0 0 12px rgba(126, 212, 222, 0.7);
  transform: scaleX(var(--postup, 0));
  transform-origin: left center;
  transition: transform 0.5s var(--krivka);
}

.konf-scena {
  flex: 1 1 auto;
  min-height: 0;
  /* `overflow-x` VÝSLOVNĚ skrytý: s `overflow-y: auto` by se dopočítal
     na `auto` a vjezd kroku o 22 px do strany by ukázal vodorovný
     posuvník. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 1.75rem;
  /* Místo pro obrys fokusu — `overflow` by ho jinak uřízl. */
  padding: 4px;
  margin-inline: -4px;
}
.konf-krok { animation: konf-vjezd 0.45s var(--krivka) both; }
.konf-krok--zpet { animation-name: konf-vjezd-zpet; }
@keyframes konf-vjezd {
  from { opacity: 0; transform: translateX(22px); }
}
@keyframes konf-vjezd-zpet {
  from { opacity: 0; transform: translateX(-22px); }
}

.konf-stitek {
  max-width: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--barva);
}
.konf-otazka {
  margin-top: 0.6rem;
  font-family: var(--pismo-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Fokus sem dává skript po každém kroku, aby čtečka ohlásila novou otázku.
   Klávesnice ho nevidí jako zastávku (`tabindex="-1"`), obrys tu nepatří. */
.konf-otazka:focus { outline: none; }
.konf-napoveda {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-mute);
}

.konf-moznosti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 1.5rem;
}
@media (max-width: 33.99rem) {
  .konf-moznosti { grid-template-columns: minmax(0, 1fr); }
}
.konf-moznost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 4.5rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-align: left;
  transition: translate 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}
.konf-moznost__text {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}
.konf-moznost__popis {
  grid-column: 1;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-mute);
}
.konf-moznost__znak {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.konf-moznost--vice .konf-moznost__znak { border-radius: 7px; }
.konf-moznost__znak svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #0A0A10;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.konf-moznost:hover {
  translate: 0 -2px;
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
}
.konf-moznost[aria-pressed="true"] {
  border-color: rgba(126, 212, 222, 0.7);
  background: linear-gradient(155deg, rgba(126, 212, 222, 0.16), rgba(126, 212, 222, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(126, 212, 222, 0.25),
    0 0 30px -8px rgba(126, 212, 222, 0.45);
}
.konf-moznost[aria-pressed="true"] .konf-moznost__znak {
  background: var(--barva);
  border-color: var(--barva);
  box-shadow: 0 0 12px rgba(126, 212, 222, 0.7);
}
.konf-moznost[aria-pressed="true"] .konf-moznost__znak svg { opacity: 1; }
/* Next Angle: vidět ano, vybrat ne. `aria-disabled`, ne `disabled` —
   vypnuté tlačítko by klávesnice přeskočila a „Již brzy“ by se nedozvěděla. */
.konf-moznost[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  translate: none;
  border-color: rgba(255, 255, 255, 0.12);
}
.konf-dale { margin-top: 1.25rem; }

.konf-pata {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.konf-zpet {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mute);
  transition: color 0.2s ease;
}
.konf-zpet:hover { color: var(--text); }
.konf-zpet svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.konf-odhad {
  display: grid;
  gap: 0.1rem;
  max-width: none;
  margin-left: auto;
  text-align: right;
}
/* Obě třídy nastavují `display`, takže by přebily `[hidden]` z prohlížeče. */
.konf-zpet[hidden],
.konf-odhad[hidden] { display: none; }
.konf-odhad__popisek {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.konf-odhad__hodnota {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Výsledek: rozpětí v Syne 800 se září — stejný jazyk jako 98 % / 120+ / ∞
   na homepage. „Kč“ a pomlčku Syne v subsetu nemá, ty kreslí Urbanist. */
/* Mezery jsou úsporné: výsledek se má na 1280 × 820 vejít do scény bez
   posouvání (s pěti odpověďmi měl dřív o 33 px navíc). */
.konf-vysledek {
  display: grid;
  justify-items: center;
  text-align: center;
}
.konf-vysledek .eyebrow { justify-content: center; }
.konf-vysledek__cena {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.15em;
  max-width: none;
  margin-top: 0.9rem;
  font-family: var(--pismo-cislo);
  font-size: clamp(2rem, 1.2rem + 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}
.konf-vysledek__cast { white-space: nowrap; }
.konf-vysledek__cena--na-miru {
  font-family: var(--pismo-display);
  text-transform: uppercase;
}
.konf-vysledek__text {
  max-width: 34ch;
  margin-top: 0.9rem;
  font-size: var(--t-md);
  line-height: 1.4;
  text-wrap: balance;
}
.konf-vysledek__pozn {
  margin-top: 0.6rem;
  font-size: var(--t-sm);
  color: var(--text-mute);
}
.konf-souhrn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 36rem;
  margin-top: 1rem;
}
.konf-souhrn__polozka {
  padding: 0.35em 0.8em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  color: var(--text-mute);
}
.konf-vysledek .akce-sklo {
  justify-content: center;
  margin-top: 1.25rem;
}
.konf-znovu {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
.konf-znovu:hover { color: var(--text); }
/* Cedulka „Již brzy“ stojí v dlaždici na místě zaškrtávátka. */
.konf-moznost .stitek-brzy {
  grid-column: 2;
  grid-row: 1 / span 2;
}
/* Fokus na výsledek dává skript (čtečka ohlásí cenu), klávesnice tu nestojí. */
.konf-vysledek__cena:focus { outline: none; }

/* === 14 — Průsečík ====================================================== */

/* Vzorec stojí v sekci Proč mezi textem a bublinami — dřív měl vlastní
   sekci Průsečík. Je to `<p>`, takže potřebuje zrušit `max-width` z `p`. */
/* Kolem vzorce je HODNĚ místa nahoře i dole — má stát volně jako
   samostatné prohlášení. Klient ho třikrát zvětšoval: 3–5 rem jen nad
   ním → 5–9 rem → 8–15 rem → dnes 10–20 rem (na 1280 ≈ 280 px, na
   mobilu 160 px). Bubliny pod ním si proto svůj horní okraj neberou,
   jinak by se mezery sčítaly. */
.proc__vzorec { margin-block: clamp(10rem, 22vw, 20rem); }
.proc__vzorec + .co-delame { margin-top: 0; }
.prusecik__vzorec {
  max-width: none;
  /* TŘI SLOUPCE, ne řádek s `justify-content: center`: vystředěný řádek
     má na středu střed CELÉHO textu, a protože „Digital × Physical“ je
     širší než „Visual × Space“, prostřední křížek ležel mimo střed. Tady
     jsou krajní sloupce stejně široké (1fr), takže prostřední × stojí
     přesně na středu stránky. Klient to chtěl výslovně. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.5em;
  font-size: var(--t-xl);
  font-weight: 500;
  font-family: var(--pismo-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.prusecik__pul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.5em;
}
.prusecik__pul--leva { justify-content: flex-end; text-align: right; }
.prusecik__pul--prava { justify-content: flex-start; text-align: left; }
/* Prostřední křížek — na středu svého sloupce, a tím i stránky. */
.prusecik__krat--stred { justify-self: center; }
/* Na úzkém displeji se dvojice vedle sebe nevejdou. Tři sloupce tam ale
   zůstat NESMÍ: prostřední × zbylo samo na vlastním řádku a odsazené od
   obou dvojic — vypadalo jako překlep, klient si toho všiml. Vzorec se
   proto na mobilu sází jako JEDEN vystředěný řádek, který se láme sám
   mezi slovy, takže každý × zůstane mezi svými dvěma slovy.
   `display: contents` pustí slova z obou půlek přímo do řádku. */
@media (max-width: 47.99rem) {
  .prusecik__vzorec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.15em 0.4em;
    text-align: center;
  }
  .prusecik__pul,
  .prusecik__pul--leva,
  .prusecik__pul--prava {
    flex: 1 0 100%;
    justify-content: center;
    text-align: center;
  }
  /* Prostřední × spojuje dvojice VEDLE SEBE. Pod sebou nemá co spojovat:
     na vlastním řádku vypadalo jako překlep a na konci prvního řádku zase
     jako ulétlý znak u pravého okraje. Zbydou dva čisté řádky, každý se
     svým ×. Pro čtečku se nic nemění — křížky jsou `aria-hidden`. */
  .prusecik__krat--stred { display: none; }
}
/* Krát je oddělovač, ne zvýraznění — proto tlumený tón. Na modré ploše je
   akcentem bílá, takže by splynul se zbytkem vzorce. */
.prusecik__krat { color: var(--text-mute); }
/* === 15 — Kontakt a patička ============================================= */

/* --- Kontakt: dotazník -------------------------------------------------
   Stavba podle nebudnoname.cz (změřeno v prohlížeči na 1280 px): jeden
   vystředěný sloupec 720 px — nadpis, úvodní věta 460 px, čtyři kartičky
   kontaktů vedle sebe (mezera 10 px, rohy 16 px, odsazení 18 × 16 px),
   oddělovač „nebo napište rovnou“ s linkami a SKLENĚNÝ PANEL formuláře
   560 px (rozostření 28 px, rohy 16 px, odsazení 26 × 22 px, pole po 14 px,
   Jméno a E-mail vedle sebe, tlačítko přes celou šířku). Pole: tmavé
   průsvitné pozadí, rámeček 1 px, rohy 12 px, Outfit 16 px / 300.

   JINÉ JE: barva (jejich magenta → naše jediná tyrkysová), tlačítko je
   naše skleněná pilulka, ikony jsou tenké čáry místo emoji a texty sekce
   jsou naše. Kontakty jsou TODO. */
.kontakt {
  max-width: calc(45rem + 2 * var(--okraj));
  text-align: center;
}
.kontakt .eyebrow { justify-content: center; }
/* Nadpis kontaktu „Váš nápad. / Náš nový úhel.“ — každá věta na vlastním
   řádku, „nový úhel.“ svítí bíle jako NOVÝ ÚHEL v ceníku. Písmem a řezem
   hlavního nadpisu úvodu (Urbanist 700, řádkování 1,06, prostrkání
   −0,03 em). Prošel tudy a odešel nadpis „Spojme síly“ (klient). */
.kontakt__nadpis {
  max-width: 16ch;
  margin-inline: auto;
  /* O něco menší než ostatní nadpisy sekcí (`--t-2xl` 44–96 px) —
     klient chtěl menší. */
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
/* „Váš nápad. Náš nový úhel. Těšíme se na spolupráci.“ — menší a normálním
   písmem. Prošly tudy a odešly verzálky (klient je nechtěl). Vyvážené
   zalomení, aby na druhém řádku nezůstal jen konec věty. */
.kontakt__radek { display: block; }
.kontakt__zvyrazneni {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55), 0 0 44px rgba(255, 255, 255, 0.3);
}
.kontakt__uvod {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: var(--t-base);
  text-wrap: balance;
}

.kontakt__kanaly {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  /* Dvě kartičky (e-mail, Instagram) — telefon a WhatsApp klient zatím
     nemá. Úzký blok na středu, ať dvě karty nestojí roztažené přes 720 px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 30rem;
  margin-inline: auto;
}
@media (max-width: 25rem) {
  .kontakt__kanaly { grid-template-columns: minmax(0, 1fr); }
}
.kanal {
  display: grid;
  justify-items: center;
  /* Obsah kartičky na středu i SVISLE — kartičky s delším a kratším
     údajem pak vypadají stejně. */
  align-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(126, 212, 222, 0.14);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.kanal__ikona {
  width: 22px;
  height: 22px;
  margin-bottom: 0.35rem;
  fill: none;
  stroke: var(--barva);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kanal__nazev {
  font-size: var(--t-lista);
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  color: var(--text-mute);
}
.kanal__hodnota {
  font-size: 0.95rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* Celá kartička je odkaz: `::after` přes kartu natáhne klikací plochu
   odkazu, text a ikona zůstávají, kde jsou. */
.kanal { position: relative; transition: border-color 0.25s ease, background 0.25s ease; }
.kanal__odkaz::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kanal:hover {
  border-color: rgba(126, 212, 222, 0.45);
  background: rgba(255, 255, 255, 0.07);
}
.kanal__odkaz:focus-visible { outline: none; }
.kanal:has(.kanal__odkaz:focus-visible) {
  outline: 2px solid var(--barva);
  outline-offset: 3px;
}

.kontakt__predel {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 32.5rem;
  margin: 2rem auto 1.25rem;
  font-size: var(--t-lista);
  letter-spacing: var(--prostrk-lista);
  text-transform: uppercase;
  color: var(--text-mute);
}
.kontakt__predel::before,
.kontakt__predel::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.kontakt__predel span { white-space: nowrap; }

.formular {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 35rem;
  margin-inline: auto;
  padding: 26px 22px;
  border-radius: 16px;
  border: 1px solid rgba(126, 212, 222, 0.14);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  text-align: left;
}
.formular__radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 30rem) {
  .formular { padding: 20px 16px; }
  .formular__radek { grid-template-columns: minmax(0, 1fr); }
}
.pole {
  margin: 0;
  display: grid;
  gap: 6px;
  max-width: none;
}
.pole__popisek { font-size: 1rem; color: rgba(255, 255, 255, 0.88); }
.pole__nepovinne { color: var(--text-mute); }
.pole__vstup {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(126, 212, 222, 0.14);
  border-radius: 12px;
  padding: 14px 15px;
  transition: border-color var(--doba-s) var(--krivka),
              box-shadow var(--doba-s) var(--krivka);
}
.pole__vstup::placeholder { color: rgba(255, 255, 255, 0.4); }
.pole__vstup:focus {
  border-color: var(--barva);
  box-shadow: 0 0 0 3px rgba(126, 212, 222, 0.18);
}
.pole__vstup--text { min-height: 7.2rem; resize: vertical; }

/* Past na roboty — mimo obraz, ne `display: none` (to by část robotů
   poznala a pole vynechala). */
.formular__past {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular__odeslat { width: 100%; margin-top: 4px; }
.formular__odeslat:disabled,
.formular__odeslat:disabled:hover {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.formular__stav {
  margin: 0;
  min-height: 1.5em;
  font-size: 0.95rem;
  text-align: center;
  color: var(--text-mute);
  max-width: none;
}
.formular__stav[data-stav="ok"] { color: var(--barva); }
.formular__stav[data-stav="chyba"] { color: var(--text); }
.formular__souhlas {
  margin: 0;
  font-size: var(--t-sm);
  text-align: center;
  color: var(--text-mute);
  max-width: none;
}

/* Přenos z konfigurátoru na podstránce Služby (modul 14): vybraná služba,
   odpovědi a orientační odhad nad poli formuláře. Odesílá se v skrytém poli
   `konfigurace`; „Odebrat“ ho vyprázdní. */
.formular__prenos {
  display: grid;
  gap: 0.45rem;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(126, 212, 222, 0.3);
  background: rgba(126, 212, 222, 0.06);
}
.formular__prenos[hidden] { display: none; }
.formular__prenos-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.formular__prenos-titul {
  max-width: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--barva);
}
.formular__prenos-odebrat {
  font-size: 0.85rem;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.formular__prenos-odebrat:hover { color: var(--text); }
.formular__prenos-sluzba {
  max-width: none;
  font-size: 1.15rem;
  font-weight: 700;
}
.formular__prenos-odpovedi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.formular__prenos-odpovedi:empty { display: none; }
.formular__prenos-odpoved {
  padding: 0.3em 0.75em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  color: var(--text-mute);
}
.formular__prenos-odhad {
  max-width: none;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.formular__prenos-odhad:empty { display: none; }

.patka {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linka);
  display: grid;
  gap: 2rem;
}
@media (min-width: 56rem) {
  .patka { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--mezera); }
}
.patka__odkazy { display: flex; flex-wrap: wrap; gap: 0.75em 1.5em; }
.patka__radek { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; color: var(--text-mute); }
/* Na telefonu jsou odkazy v patičce terč pro PRST: písmo 13 px místo 11
   a každý odkaz ve dvou sloupcích s výškou aspoň 44 px (dřív 13 px). */
@media (max-width: 47.99rem) {
  .patka__odkazy,
  .patka__radek { font-size: 0.8125rem; }
  .patka__odkazy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }
  .patka__odkazy .odkaz {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .patka__radek .odkaz { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Placeholder `TODO` — údaj, který ještě chybí (e-mail, telefon, IČO…).
   Prošla tudy a odešla ČERVENÁ plocha (#D62828 s bílým textem): klient ji
   na webu nechtěl. Placeholder je teď jen drobná mono sazba v barvě okolí;
   najít se dá hledáním `TODO` / `doplnit` v HTML. */
.doplnit {
  font-family: var(--pismo);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}


/* === 18 — Zásady, popisy pro SEO a informační lišta ===================== */

/* Český popis studia v patičce každé stránky. Úvod webu je anglický
   („See what others don’t.“), takže tohle je místo, kde vyhledávač
   i jazykový model najdou větou, co studio dělá. Viditelný text, žádné
   skryté klíčové slovo. */
.patka__popis {
  max-width: 46ch;
  margin-top: 1rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-mute);
}

/* Věta pod nadpisem podstránky (Služby, Zásady) — řekne obyčejnou češtinou,
   co na stránce je. */
.stranka-hlava__perex {
  max-width: 52ch;
  margin: 1rem auto 0;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--text-mute);
  text-wrap: balance;
}

/* --- Zásady ochrany osobních údajů ---------------------------------------
   Dlouhý text ke čtení: úzký sloupec (≈ 65 znaků), větší řádkování,
   nadpisy oddílů. Seznamy vracejí odrážky, které reset webu maže. */
.pravni__obal { max-width: calc(46rem + 2 * var(--okraj)); }
.pravni__text {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.65;
}
.pravni__text h2 {
  margin-top: 1.5rem;
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--hlavicka-v) + 1rem);
}
.pravni__text p,
.pravni__text li { color: var(--text-mute); }
.pravni__text ul {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.pravni__text li::marker { color: var(--barva); }
.pravni__text strong { font-weight: 600; color: var(--text); }
.pravni__text code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9em;
  color: var(--text);
}
.pravni__datum { margin-top: 1.5rem; font-size: var(--t-sm); }

/* --- Informační lišta o cookies -------------------------------------------
   Web NEPOUŽÍVÁ sledovací cookies, takže lišta jen informuje a odkáže na
   zásady — žádné „Přijmout“. Vkládá ji modul 18; bez JS se neukáže, a bez
   JS web nic neukládá, takže není o čem informovat. Leží pod načítací
   clonou (250 < 300), aby vyjela až po ní. */
.lista-info {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 250;
  width: min(40rem, calc(100% - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  border-radius: 18px;
  background: rgba(10, 12, 14, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 50px -20px rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
  animation: lista-info-vjezd 0.5s var(--krivka) both;
}
.lista-info__text {
  flex: 1 1 16rem;
  max-width: none;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--text-mute);
}
.lista-info__text .odkaz { color: var(--text); }
.lista-info__ok {
  flex: none;
  padding: 10px 22px;
  font-size: 0.92rem;
}
@keyframes lista-info-vjezd {
  from { opacity: 0; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce) {
  .lista-info { animation: none; }
}