/* =========================================================
   AIR TRIBE — vizuální styl webu (verze 4)
   Profesionální, moderní a přirozený tmavý design pro firmy,
   organizátory plesů a akcí, školy a instituce.
   Písma: Manrope (nadpisy) + Inter (text). Jedna klidná modrá.
   ========================================================= */

:root {
  --bg:        #0a0b0d;
  --bg-2:      #0e1013;
  --surface:   #14171b;
  --surface-2: #1a1e23;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.14);
  --text:      #f2f3f5;
  --muted:     #a4a9b1;
  --dim:       #868c96;   /* přezdívky a poznámky: 5,8 : 1 — #737983 bylo 4,5, tedy těsně na hraně čitelnosti */
  --accent:    #ff6b00;
  --accent-2:  #ff9447;
  --accent-ink:#2b1000;
  --accent-soft: rgba(255, 107, 0, 0.16);

  --head: "Manrope", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stitek: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 4.5vw, 48px);
  /* Svislý rytmus — jedna škála pro celý web.
     --space          odsazení sekce shora i zdola (mezi sekcemi je dvojnásobek)
     --mezera-blok    mezi segmenty uvnitř jedné sekce
     --mezera-hlavicka  hlavička sekce -> její obsah
     --mezera-prvek   mezi prvky uvnitř jednoho bloku */
  --space: clamp(56px, 6.4vw, 88px);
  --mezera-blok: clamp(36px, 4.4vw, 60px);
  --mezera-hlavicka: clamp(24px, 3vw, 40px);
  --mezera-prvek: clamp(16px, 1.8vw, 24px);
  --radius: 14px;
  --radius-s: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 72px;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}

/* ---------- Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
/* Stránka Kontakt — zelený akcent (jako na filipdvorak.cz) */

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Barevná témata sekcí — sada „Signál“.
   Elektrická modrá = vystoupení, signální oranžová = workshopy a výuka,
   signální zelená = kombinace a akce na míru, výstražná žlutá =
   kvalifikace a bezpečnost.

   Oranžová zůstává i hlavní barvou značky (`:root` výš) — logo, hlavní
   tlačítka a patička tedy drží oranžovou bez ohledu na sekci.
   Žlutá u bezpečnosti není náhoda: je to barva výstražného značení a jako
   jediná zbývající se dala vzít v plné sytosti. Fialová by musela být
   zesvětlená skoro do pastelu, aby prošla kontrastem, proto tady není.

   Všechny čtyři jsou schválně na hraně sytosti (čisté nebo skoro čisté tóny),
   žádná není zesvětlená do pastelu — pastel na tmavém pozadí vypadá měkce
   a tady má web působit ostře. Zesvětlené odstíny zůstávají jen v `--accent-2`
   pro jemné přechody a záře.

   Hranice, pod kterou se nesmí jít: každá barva musí mít vůči pozadí #0a0b0d
   aspoň 6 : 1, protože se používá i jako drobný text (eyebrow, odkazy).
   Sytost je tady důležitější než maximální kontrast, takže hlavní oranžová
   není nejsvětlejší — dominuje plochou (plná tlačítka), ne jasem.
   Čísla v závorce jsou kontrast vůči pozadí. */
.t-show  { --accent: #00a3ff; --accent-2: #7ad2ff; --accent-ink: #001a2b; --accent-soft: rgba(0,163,255,.16); }  /*  7,2 */
.t-learn { --accent: #ff6b00; --accent-2: #ff9447; --accent-ink: #2b1000; --accent-soft: rgba(255,107,0,.16); }  /*  6,9 */
.t-mix   { --accent: #00e676; --accent-2: #6ff2ad; --accent-ink: #00220f; --accent-soft: rgba(0,230,118,.16); }  /* 11,8 */
.t-trust { --accent: #ffd400; --accent-2: #ffe670; --accent-ink: #2a2200; --accent-soft: rgba(255,212,0,.16); }  /* 13,8 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Ukotvování scrollu vypnuté: když se lišta po přilepení stáhne, prohlížeč
   si sám posunul stránku o desítky pixelů a skoky na kotvy pak míjely. */
main { overflow-anchor: none; }
.section { padding: var(--space) 0; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 999; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 12px; }

/* ---------- Typografie ---------- */
.h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
/* Eyebrow — označení sekce nad nadpisem.
   Sází se Sorou, ne Interem jako běžný text: geometrický bezpatkový řez
   se širokými otevřenými verzálkami proti mohutnému nadpisu z Manrope
   drží vlastní hlas a díky šířce písmen nepůsobí drobný text stísněně.
   Hodně prostrkaný, takže čte jako přesná popiska, ne jako podnadpis. */
.eyebrow { display: inline-block; font-family: var(--stitek);
  font-size: clamp(.8rem, 1.1vw, .95rem); font-weight: 600; letter-spacing: .2em;
  line-height: 1.5; text-transform: uppercase; color: var(--accent); }

}
}
}
}
}
.lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--muted); max-width: 54ch; margin: 0; }

/* Hlavička sekce je mřížka, ne flex: popis tak začíná na všech stránkách
   ve stejném sloupci a nespadne pod nadpis, když je nadpis delší. */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 18px 48px; margin-bottom: var(--mezera-hlavicka); }
.sec-head h2 { margin-top: 10px; }
.sec-head > p { color: var(--muted); margin: 0; }

/* ---------- Tlačítka ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .95rem; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-2); }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(10,11,13,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================
   Navigace (vždy viditelná)
   ========================================================= */
/* Menu nahoře jemně rozostřené; po odscrollování zprůhlední a pozadí převezme
   jedna společná rozostřená vrstva .sticky-blur, která pokrývá menu i přilepenou
   orientační lištu najednou — bez švů mezi nimi (stejně jako na filipdvorak.cz). */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: linear-gradient(180deg, rgba(10,11,13,.42), rgba(10,11,13,.18)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: background .35s; }
.nav.is-solid { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sticky-blur { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 55; background: rgba(10,11,13,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); pointer-events: none; opacity: 0; transition: opacity .4s cubic-bezier(.4,0,.2,1); }
.sticky-blur.show { opacity: 1; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.logo svg { width: 28px; height: 28px; flex: none; }
/* Značka Air Tribe — psané AT. Je to tenký rukopisný tah, takže potřebuje
   víc výšky než původní ikona, jinak se vlasové linky ztratí. */
.logo-znak { height: 40px; width: auto; flex: none; display: block; }
.footer .logo-znak { height: 44px; }
@media (max-width: 560px) { .logo-znak { height: 32px; } .footer .logo-znak { height: 38px; } }
.logo-word { font-family: var(--head); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: .94rem; font-weight: 500; color: var(--muted); transition: color .2s, background .2s; }
.nav-links a:not(.btn):hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-links a:not(.btn)[aria-current="page"] { color: var(--text); }
/* Tlačítko Kontakt přesně jako na filipdvorak.cz: světlá pilulka, při najetí zelená */
.nav-links a.cta, .nav-links a.cta[aria-current="page"] { display: inline-block; border: 0; margin-left: 8px; padding: 9px 15px; border-radius: 999px; background: #f4f4f5; color: #0b0b0e; font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 600; line-height: 21px; transition: color .2s, background .2s; }
.nav-links a.cta:hover, .nav-links a.cta[aria-current="page"]:hover { background: var(--accent); color: var(--accent-ink); }
.btn-contact { background: #f4f4f5; color: #0b0b0e; transition: color .2s, background .2s; }
.btn-contact:hover { background: var(--accent); color: var(--accent-ink); }

.burger { display: none; position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span { transition: transform .35s var(--ease), top .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
/* Otevřené menu: krajní čárky se zkříží, prostřední zmizí. */
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 20px) var(--gutter) 28px; background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--ease), visibility 0s linear .4s; }
.menu-open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease), visibility 0s; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px solid var(--line); }
/* Velikost drží krok s tlačítkem Kontakt pod nimi (.btn má .95rem,
   výšku 50 px) — dřív byly položky 1,6rem a vedle tlačítka působily
   jako nadpisy, ne jako položky jednoho menu. */
.menu li a { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; font-family: var(--head); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.menu li a svg { width: 18px; height: 18px; color: var(--dim); }
.menu li a[aria-current="page"] { color: var(--accent); }
.menu .btn { width: 100%; margin-top: 24px; }
.menu-foot { display: grid; gap: 4px; color: var(--muted); font-size: .95rem; }

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; min-height: 90svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + 48px) 0 clamp(44px, 6vw, 80px); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* Úvodních fotek je pět, leží přes sebe a plynule se střídají (main.js).
   Na širokých obrazovkách je to sada záběrů na šířku, na telefonu se
   prohlížeč přepne na výškové výřezy (<source> v index.html) — jinak by
   z fotky na úzkém displeji zbyl jen svislý proužek. Každá fotka si
   v `--pos` nese, která její část má být v úzkém pásu vidět. */
.hero-media picture { display: block; position: absolute; inset: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 35%); opacity: 0; transform: scale(1);
  transition: opacity 2s var(--ease), transform 12s linear; }
.hero-media img.is-on { opacity: 1; }
/* Decentní přiblížení: dokud je fotka vidět, sotva znatelně se přibližuje
   (o 4 % za 12 s). Třídu přidává main.js až o snímek později, jinak by
   prohlížeč přechod nespustil. Při odchodu se zase odebere — návrat zpět
   trvá taky 12 s, takže za ty dvě vteřiny prolnutí není vidět. */
.hero-media img.se-priblizuje { transform: scale(1.04); }
/* Dvě samostatné sady: fotky na šířku pro počítač, na výšku pro telefon.
   Ta nepoužitá se schová a main.js jí ani nedoplní zdroj, takže se
   nestahuje. První snímek obou sad je společné <picture>. */
.hero-media .h-uzka { display: none; }
@media (max-width: 760px) {
  .hero-media .h-siroka { display: none; }
  .hero-media .h-uzka { display: block; }
}
@media (max-width: 760px) {
  /* Na telefonu se úvodní fotka NEOŘEZÁVÁ. Pás úvodu je vždycky užší než
     kterákoli fotka ve složce výška/ (mají 2:3 až 4:5), takže `cover` jim
     ubíral ze stran — z té nejširší skoro čtvrtinu a na stránce vypadala
     zúžená. `contain` fotku naopak celou vejde do šířky pásu: je vidět
     přesně to, co je ve složce, a dole zbude kus pozadí, do kterého fotka
     přechází ztmavením níž. */
  .hero-media img { height: auto; bottom: auto; object-fit: fill; object-position: 50% 0;
    /* Fotka končí tam, kde jí vyjde výška — a přesně tam se musí vytratit,
       aby po ní nezůstala vodorovná hrana. Prolnutí je proto na samotném
       obrázku, ne na pásu: drží se jeho spodního okraje, ať je fotka 2:3
       nebo 4:5. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%); }
  .hero { padding-top: calc(var(--nav-h) + 5vh); padding-bottom: 32px; }
  .hero::after { background:
    linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,.1) 14%, rgba(10,11,13,.55) 40%, rgba(10,11,13,.9) 66%, var(--bg) 88%); }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,.25) 35%, rgba(10,11,13,.55) 65%, var(--bg) 100%), linear-gradient(90deg, rgba(10,11,13,.75) 0%, rgba(10,11,13,.1) 70%); }
.hero h1 { max-width: 16ch; margin: 14px 0 18px; }
.hero .lead { color: rgba(242,243,245,.82); margin-bottom: 30px; }
.hero-audience { list-style: none; margin: var(--mezera-blok) 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 10px 32px; color: rgba(242,243,245,.78); font-size: .95rem; }
.hero-audience li { display: flex; align-items: center; gap: 10px; }
.hero-audience svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* =========================================================
   Orientační lišta sekcí (domovská stránka)
   ========================================================= */
/* O kolik se skok na sekci odsadí, aby horní hrana sekce dosedla přesně
   pod pevnou hlavičku a přilepenou orientační lištu. Přesnou hodnotu
   dopočítá main.js podle skutečné výšky obou lišt; tahle je záloha,
   kdyby JS neběžel. */
html { scroll-padding-top: var(--odsazeni-scroll, calc(var(--nav-h) + 8px)); }
.pillnav { position: sticky; top: var(--nav-h); z-index: 60; background: rgba(10,11,13,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pillnav.docked { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Lišta na O nás leží mezi úvodní sekcí a „Kdo jsme" a přilepuje se
   stejně jako na domovské stránce. */
.pillnav .wrap { display: flex; justify-content: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.pillnav .wrap::-webkit-scrollbar { display: none; }
.pillnav a { flex: none; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s, border-color .2s; }
/* Po přilepení se lišta stáhne, aby ubírala z výšky obrazovky co nejmíň —
   ale **jen tam, kde se pilulky ve výchozím stavu nevejdou na jeden
   řádek**. To se stává jen na úzkých telefonech; všude jinde (a tedy i na
   celém počítači) zůstává lišta pořád stejná. Rozhoduje o tom main.js:
   spočítá řádky a podle toho přidá třídu `stahovat`, na kterou jsou
   navázaná pravidla v mobilním bloku níž. Kolem textu musí i po stáhnutí
   zůstat pohodlné místo k hraně pilulky, takže se krátí hlavně svislé
   mezery a postranní okraj lišty. */
/* Lišta drží místo v toku stránky, i když se sama stáhne — o co se zkrátí,
   o to se pod ní přidá mezera. Bez toho by se při přilepení všechno pod
   lištou posunulo o těch pár pixelů vzhůru a skoky na sekce by kvůli tomu
   dosedaly nepřesně. Hodnotu dopočítá main.js podle skutečných výšek. */
/* Stažení lišty se odehraje v jediném snímku: rozměry pilulek ani
   rezerva pod lištou se neanimují. Kdyby se animovaly, musely by si po
   celou dobu přesně odpovídat — a protože se pilulky uprostřed přechodu
   přeskládají ze dvou řádků na jeden, odpovídat si nemohou a obsah pod
   lištou se v tu chvíli houpal o 30 px. Takhle je součet výšky lišty
   a rezervy pořád stejný a stránka se nehne.
   Aby přepnutí nepůsobilo tvrdě, jen se pilulky krátce prolnou —
   krytí na rozvržení nesahá, takže nic neposouvá. */
.pillnav.docked { margin-bottom: var(--dock-rezerva, 0px); }
.pillnav.stahovat.docked .wrap { animation: pill-stah .24s var(--ease); }
@keyframes pill-stah { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pillnav.stahovat.docked .wrap { animation: none; } }
/* Při měření výšky lišty se stav „přilepeno" zapne naráz, bez animace. */
.pillnav.bez-prechodu, .pillnav.bez-prechodu .wrap, .pillnav.bez-prechodu a { transition: none !important; }
.pillnav.bez-prechodu { margin-bottom: 0 !important; }
.pillnav a:hover { color: var(--text); border-color: rgba(255,255,255,.35); }
.pillnav a.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* =========================================================
   Pro koho — dlaždice
   ========================================================= */
.audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aud { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.aud img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.aud::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,11,13,0) 30%, rgba(10,11,13,.92) 100%); }
.aud:hover img { transform: scale(1.05); }
.aud h3 { font-size: 1.2rem; }
.aud p { color: rgba(242,243,245,.78); font-size: .9rem; margin: 6px 0 0; line-height: 1.5; }

/* =========================================================
   Nabídka — podrobné řádky
   ========================================================= */
.offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 56px); align-items: stretch; }
/* fotka roztažená na výšku textu vedle ní */
.offer .offer-media { position: relative; top: auto; aspect-ratio: auto; height: 100%; min-height: 0; }
/* Kompaktní seznam údajů o nabídce */
.spec-list { margin: var(--mezera-prvek) 0 0; border-top: 1px solid var(--line); }
.variants { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.variants li { display: flex; justify-content: space-between; gap: 12px; }
.variants b { color: var(--text); font-weight: 600; white-space: nowrap; }
.variants li:first-child b { color: var(--accent); }
.offer-intro .eyebrow { margin-bottom: 10px; }
.offer.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.offer.is-flipped .offer-media { order: 2; }
.offer.is-flipped .offer-intro { order: 1; }
.offer-body .eyebrow { margin-bottom: 10px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Poloměr 17 px: u jednořádkového štítku je to pořád pilulka (zaoblení se
   ořízne na polovinu výšky), ale u štítku přes dva řádky už nevznikne
   stadion, ve kterém se text mačká do oblouků. Proto i širší odsazení. */
.tags li { font-size: .86rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 19px; padding: 6px 14px; }
.tags li:not(:only-child) { max-width: 100%; }
/* Přehled tří formátů nahoře v nabídce */
.offer-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: var(--mezera-blok); }
.ov { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 4px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s, background .25s, transform .3s var(--ease); }
.ov:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface-2); transform: translateY(-3px); }
.ov-title { font-family: var(--head); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.ov-text { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ov-price { margin-top: 8px; font-weight: 600; font-size: .95rem; }

/* Specifikace nabídky: přehledná mřížka se stejnými nadpisy */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: var(--mezera-hlavicka); }
.spec.is-wide { grid-column: span 2; }
.spec.is-wide .bullets { display: block; columns: 2; column-gap: 32px; }
.spec.is-wide .bullets li { margin-bottom: 6px; break-inside: avoid; }

/* Loga institucí (kvalifikace) */
.inst-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 80px); margin-top: var(--mezera-blok); padding-top: var(--mezera-hlavicka); border-top: 1px solid var(--line); }
.price small { display: block; font-size: .78rem; color: var(--dim); }
.price b { font-family: var(--head); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.price span { color: var(--muted); font-size: .9rem; margin-left: 6px; }
.offer-foot .btn { height: 44px; padding: 0 20px; font-size: .9rem; }

/* =========================================================
   Proč my
   ========================================================= */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* =========================================================
   Karusel (galerie i ohlasy)
   ========================================================= */
.carousel { position: relative; }
.carousel:focus { outline: none; }
.carousel:focus-visible .car-viewport { outline: 2px solid var(--accent); outline-offset: 6px; }
/* šipky stojí vedle karuselu, nikdy nezasahují do fotek */
.car-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.car-viewport { overflow: hidden; border-radius: var(--radius); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.carousel.is-dragging .car-viewport { cursor: grabbing; }
.car-track { --n: 4; --gap: 16px; display: flex; gap: var(--gap); will-change: transform; }
/* V medailonku je v záběru vždycky jen jedna fotka přes celou šířku —
   mezera mezi snímky by tam při posouvání jen problikla jako pruh pozadí.
   Fotky proto na sebe navazují bez ní. (Karusely v nabídce ukazují víc
   snímků vedle sebe, tam mezera smysl má, a proto zůstává.) */
.m-gal .car-track { --gap: 0px; }
.car-track.is-anim { transition: transform var(--car-anim, .6s) var(--ease); }
/* Jednofotkové karusely (nabídka, galerie v medailoncích) se chovají jako
   rotátor na filip-dvorak.com: automatická změna se prolne, ruční posune.
   Prolnutí dělá neživá kopie další fotky položená nad tu současnou —
   viz karusel() v main.js. */
.car-rotator .car-viewport { position: relative; }
/* Kopie další fotky leží přímo v rámečku té současné (viz prolni() v
   main.js), takže ji kreslí stejná vrstva a má přesně stejný ořez — jinak
   fotka na konci prolnutí o zlomek pixelu cukla. Zároveň tím zůstává pod
   ztmavením dolního okraje i pod ovládáním, která patří k rámu karuselu. */
.car-rotator .car-slide figure { position: relative; }
.car-rotator .car-prolnuti { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity var(--rot-fade, 1.1s) linear; }
.car-rotator .car-prolnuti.je-videt { opacity: 1; }
/* Šipky jsou v klidu neviditelné a plynule se objeví při najetí kurzorem,
   stejně jako u rotátoru na filip-dvorak.com. Záměrně NE :focus-within —
   po kliknutí myší zůstane tlačítko zaostřené a šipky by po odjetí kurzoru
   zůstaly viset. Na dotykovém displeji se šipky schovávají úplně (pravidlo
   v bloku `pointer: coarse`), takže se tohle uplatní jen tam, kde je myš. */
@media (hover: hover) {
  .car-rotator .car-arrow { opacity: 0;
    transition: opacity .3s var(--ease), background .25s, border-color .25s, color .25s; }
  .car-rotator:hover .car-arrow,
  .car-rotator:focus-visible .car-arrow,
  .car-rotator .car-arrow:focus-visible { opacity: 1; }
  /* V medailoncích zůstávají šipky vidět pořád. Fotka je tam malá a hned
     vedle textu, takže schovávat ovládání nemá smysl — v nabídce je fotka
     velká a šipky by do ní jinak pořád zasahovaly. */
  .car-rotator.m-gal .car-arrow { opacity: 1; }
}
.car-slide { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
.car-arrow { flex: none; }
.car-dots { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 22px; }
.car-dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; transition: width .35s var(--ease), background .3s; }
.car-dots button[aria-current="true"] { width: 10px; height: 10px; background-color: var(--accent); background-clip: content-box; }
/* Ovládání karuselu je tlačítko, ne text. Bez tohohle stačilo dvakrát
   rychle klepnout na šipku a prohlížeč označil nejbližší slovo v
   medailonku — vybírat se dá jen samotný text. */
.icon-btn, .car-ctr, .car-arrow, .car-dots, .car-dots button {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.icon-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.ref-slide { height: 100%; display: flex; flex-direction: column; margin: 0; }
.ref-slide .ref-img { flex: 1; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.ref-slide img { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; border-radius: 18px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ref-slide p { margin: 16px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }
.ref-slide p b { color: var(--text); font-weight: 600; }
.car-track.is-stretch { align-items: stretch; }

/* =========================================================
   Postup + výzva
   ========================================================= */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(32px, 5vw, 60px); border-radius: calc(var(--radius) + 6px); background: radial-gradient(120% 140% at 0% 0%, rgba(255,107,0,.16), transparent 55%), var(--surface); border: 1px solid var(--line); }
.cta h2 { margin: 10px 0 12px; }
.cta .lead { margin-bottom: var(--mezera-prvek); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; background: rgba(10,11,13,.45); border: 1px solid var(--line); border-radius: var(--radius-s); }
.steps li::before { content: counter(s); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; }
.steps b { display: block; font-weight: 600; }
.steps span { color: var(--muted); font-size: .92rem; }

/* =========================================================
   Podstránky
   ========================================================= */
.page-top { padding: calc(var(--nav-h) + var(--space)) 0 var(--mezera-hlavicka); }
.page-top h1 { margin: 12px 0 16px; max-width: 18ch; }

/* =========================================================
   Vystupující
   ========================================================= */
.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.member { cursor: pointer; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s, transform .35s var(--ease); }
.member:hover { border-color: var(--line-2); transform: translateY(-3px); }
/* Karta má stejný poměr jako výřez fotky (4:5), takže se z fotky nic
   neořízne. Na kartě je jen první fotka člena, zbytek je v medailonku. */
.m-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); }
.m-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.member:hover .m-photo img { transform: scale(1.04); }
.m-initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--dim); letter-spacing: .02em; }
/* Plus je vpravo nahoře, ikony sítí vlevo dole — na úzké kartě by se u
   sebe nevešly a ikony by plus překryly. Takto má každé svůj roh. */
.m-plus { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s var(--ease); }
.m-plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.member:hover .m-plus, .member:focus-visible .m-plus { opacity: 1; transform: none; }
.m-meta { display: block; padding: 14px 16px 16px; }
.m-name { display: block; font-family: var(--head); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.m-nick { display: block; margin-top: 2px; font-size: .88rem; color: var(--accent); }
.member-bio { display: none; }
@media (hover: none) { .m-plus { opacity: 1; transform: none; } }

.drawer { margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); width: min(1180px, calc(100vw - 32px)); max-height: min(700px, calc(100dvh - 40px)); background: var(--bg-2); color: var(--text); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); }
.drawer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer[open] { animation: modalIn .4s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
/* Fotka si nechá menší díl, zbytek šířky patří textu. Hodnoty v min() se
   postarají o to, že na užších a nižších obrazovkách se okno samo srazí. */
.drawer-inner { position: relative; display: grid; grid-template-columns: min(440px, 46vh, 34vw) minmax(0, 1fr); max-height: inherit; }
/* Rozkliknutá fotka je na výšku — vedle textu na to je místo a postava
   se vejde celá. Na nízkých obrazovkách se výška zastropuje a fotka se
   sama srazí do ležatějšího výřezu, ať se okno vejde na displej.
   Na úzkých displejích jde fotka přes celou šířku nad text (viz níže). */
.drawer-photo { align-self: start; margin: 22px 0 22px 22px; }
/* Galerie fotek člena: karusel se šipkami, tečkami a tažením. Rámeček
   má stejný poměr jako výřez fotky, takže se nic neořezává. */
.m-shot { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.m-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drawer-photo .car-ctr { margin-top: 10px; }
/* Tečky u fotky člena jen nenápadně ukazují, kolikátá fotka je vidět —
   nejsou to ovládací prvky, proto menší a tlumené. */
.drawer-photo .car-dots button { width: 6px; height: 6px; background-color: rgba(255, 255, 255, .4); }
.drawer-photo .car-dots button[aria-current="true"] { width: 7px; height: 7px; background-color: rgba(255, 255, 255, .92); }
/* Na dotyk zůstává terčík velký, vidět je z něj ale jen malá tečka
   (`background-clip: content-box` — pozor, zkratka `background` by ho
   přepsala, proto se barva nastavuje přes `background-color`). */
@media (pointer: coarse) {
  .drawer-photo .car-dots button { width: 32px; height: 32px; padding: 13px; background-clip: content-box; }
  .drawer-photo .car-dots button[aria-current="true"] { width: 32px; height: 32px; padding: 12.5px; }
}
.drawer .drawer-top { inset: 34px 14px auto 34px; }
.drawer-inner:focus { outline: none; }
.drawer-top { position: absolute; inset: 14px 14px auto 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.drawer-top > * { pointer-events: auto; }
.drawer .icon-btn { background: rgba(10,11,13,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: 40px; height: 40px; }
/* Tlačítka v medailonku mají vlastní tmavé pozadí, které přebíjí i to
   z běžného `:hover`. Bez tohohle řádku zůstalo pozadí tmavé, ale ikona
   se podle hoveru obarvila na tmavou — a šipka při najetí myší zmizela.
   Při najetí se proto rozsvítí celé tlačítko, stejně jako jinde na webu. */
.drawer .icon-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.drawer .icon-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.drawer-photo { position: relative; }
.drawer-photo .m-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.drawer-photo .m-plus { display: none; }
.drawer-body { padding: clamp(64px, 6vw, 72px) clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px); overflow-y: auto; overscroll-behavior: contain; max-height: min(640px, calc(100dvh - 40px)); }
.drawer-body .m-nick { font-size: .95rem; }
.drawer-body h3 { font-size: clamp(1.6rem, 4vw, 2rem); margin-top: 4px; }
.drawer-bio { margin-top: var(--mezera-prvek); }
.drawer-bio p { color: var(--muted); }
.drawer-bio .tags { margin: 18px 0; }
.drawer-bio .soon { color: var(--dim); }
@media (max-width: 720px) {
  .drawer { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .drawer-inner { grid-template-columns: 1fr; max-height: none; }
  .drawer-photo { min-height: 0; margin: 0; border-radius: 0; }
  .drawer .drawer-top { inset: 14px 14px auto 14px; }
  .drawer-body { max-height: none; overflow: visible; padding-top: 24px; }
}

/* =========================================================
   Kontakt
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.c-list { display: grid; gap: 10px; }
.c-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s, transform .3s, background .3s; }
.c-row:hover { transform: translateY(-3px); background: var(--surface-2); }
.c-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); transition: background .3s, color .3s; }
.c-ic svg { width: 22px; height: 22px; fill: currentColor; }
.c-row[href*="instagram"]:hover { border-color: transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(45deg, #feda75, #fa7e1e 35%, #d62976 70%, #962fbf) border-box; }
.c-row[href*="instagram"]:hover .c-ic { background: linear-gradient(45deg, rgba(254,218,117,.18), rgba(250,126,30,.18) 40%, rgba(214,41,118,.18) 72%, rgba(150,47,191,.18)); }
.c-row[href*="instagram"]:hover .c-ic svg { fill: url(#igGrad); }
.c-row[href*="wa.me"]:hover { border-color: #25d366; }
.c-row[href*="wa.me"]:hover .c-ic { background: rgba(37,211,102,.16); color: #25d366; }
.c-row[href^="mailto"]:hover { border-color: var(--accent); }
.c-row[href^="mailto"]:hover .c-ic { background: var(--accent-soft); color: var(--accent); }
.c-row small { display: block; font-size: .8rem; color: var(--dim); }
/* Hodnota kontaktu (adresa, číslo) se zalomí jen tam, kde je v HTML <wbr>,
   tedy e-mail za zavináčem. Dřív tu bylo `overflow-wrap: anywhere` a na úzkém
   sloupci kvůli tomu zbylo na druhém řádku jedno písmeno. */
.c-row b { display: block; font-weight: 600; overflow-wrap: break-word; }
.c-row > svg { width: 18px; height: 18px; color: var(--dim); transition: transform .3s var(--ease), color .25s; }
.c-row:hover > svg { color: var(--text); transform: translate(2px, -2px); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3.2vw, 34px); transition: border-color .3s, box-shadow .3s; }
.form h2 { font-size: 1.3rem; margin-bottom: 20px; }
.chips legend, .field label { font-size: .85rem; font-weight: 500; color: var(--muted); padding: 0; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); color: var(--text); font: inherit; font-size: .98rem; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #f07167; }
.form .btn { width: 100%; }
.btn .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(6,18,26,.25); border-top-color: var(--accent-ink); border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .spin { display: inline-block; }
.btn.is-loading svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { margin: 12px 0 0; font-size: .92rem; min-height: 1.3em; }
.form-status.is-success { color: #6fd39a; }
.form-status.is-error { color: #f59b92; }
.form-status.is-loading { color: var(--muted); }

/* =========================================================
   Patička
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding: var(--space) 0 0; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid.no-billing { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.footer h5 { margin: 0 0 14px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.footer-col a, .footer-col span { display: block; padding: 3px 0; color: var(--muted); font-size: .93rem; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-about p { color: var(--muted); font-size: .93rem; margin: 14px 0 18px; max-width: 32ch; }
.socials { display: flex; gap: 8px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 12px; color: var(--muted); transition: all .25s; }
.socials a:hover { color: var(--text); border-color: var(--text); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.socials a[aria-label="Instagram"]:hover { border-color: transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(45deg, #feda75, #fa7e1e 35%, #d62976 70%, #962fbf) border-box; }
.socials a[aria-label="Instagram"]:hover svg path { fill: url(#igGrad); }
.socials a[aria-label="WhatsApp"]:hover { color: #25d366; border-color: #25d366; background: rgba(37,211,102,.14); }
.socials a[aria-label="E-mail"]:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: var(--mezera-blok); padding: 20px 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--dim); }

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease), background .25s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nf { min-height: 80svh; display: flex; align-items: center; padding-top: var(--nav-h); }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =========================================================
   Responzivita
   ========================================================= */
@media (max-width: 1024px) {
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud { aspect-ratio: 1 / 1; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer, .offer.is-flipped { grid-template-columns: 1fr; }
  .offer-overview { grid-template-columns: 1fr; }
  .offer.is-flipped .offer-media { order: 0; }
  .offer.is-flipped .offer-intro { order: 1; }
}
@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  .nav-links { display: none; }
  .burger { display: block; }
  .cta, .about, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Širší písmo potřebuje na úzkém displeji míň prostrkání. */
  .eyebrow { font-size: .74rem; letter-spacing: .12em; }
  body { font-size: 16px; }
  .pillnav .wrap { justify-content: flex-start; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .pillnav a { padding: 7px 15px; font-size: .84rem; }
  /* Stahuje se jen lišta, která se ve výchozím stavu nevejde na jeden
     řádek — třídu `stahovat` dá main.js podle skutečného počtu řádků.
     Stahuje se pořádně, aby se po přilepení na jeden řádek vešla (od
     360 px výš; na užších displejích se radši zalomí, než aby byl
     popisek nečitelný). Kolem textu zůstává 11 px k hraně pilulky,
     krátí se hlavně svislé mezery a postranní okraj lišty. */
  .pillnav.stahovat.docked .wrap { padding: 5px 10px; gap: 5px; }
  .pillnav.stahovat.docked a { padding: 5px 11px; font-size: .7rem; }
  .hero { min-height: 72svh; }
  .hero .btn-row .btn { flex: 1; }
  .hero-audience { gap: 8px 20px; font-size: .88rem; }
  .audience { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aud { aspect-ratio: 1 / 1; padding: 14px; }
  .aud h3 { font-size: 1rem; }
  .aud p { display: none; }
  .spec.is-wide { grid-column: auto; }
  .spec.is-wide .bullets { columns: 1; }
  .offer-foot .btn { width: 100%; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .footer-grid, .footer-grid.no-billing { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .car-stage { gap: 8px; }
  .car-arrow { width: 36px; height: 36px; }
  .car-arrow svg { width: 16px; height: 16px; }
  .car-dots { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ===== Nabídka — balíčky: čtvercová fotka + panel údajů stejně vysoký ===== */
.pkg + .pkg { margin-top: var(--mezera-blok); padding-top: var(--mezera-blok); border-top: 1px solid var(--line); }
/* První položka nabídky nemá nad sebou odsazení jako ty další, takže by
   po skoku začínala těsně pod lištou. Chybějící vzduch dodá skoku sama. */
.pkg { scroll-margin-top: var(--mezera-blok); }
.pkg + .pkg { scroll-margin-top: 0; }
.pkg-head, .pkg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pkg-head { column-gap: 16px; row-gap: 14px; align-items: end; margin-bottom: 16px; }
.pkg-title .eyebrow { margin-bottom: 10px; }
.pkg-title .h2 { margin: 0; }
.pkg-lead p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.pkg-price { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; padding: 10px 10px 10px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
/* Celá pilulka s cenou je odkaz na kontakt. Barevný nádech leží v ::before,
   aby se při najetí dal plynule přesunout zleva (od ceny) k tlačítku Poptat.
   Tlačítko si drží svůj vlastní hover (.btn-accent:hover), ten zůstal zvlášť. */
.pkg-price { position: relative; overflow: hidden; }
/* Nádech je široký a přesahuje o kus doleva mimo pilulku: najíždí měkkým
   náběhem (bez přesahu měl ostrou hranu) a posun je kvůli šířce nenápadný.
   Posun 45 % z jeho šířky (1,6× pilulka) je 72 % šířky pilulky — barva
   tak dosedne pod tlačítko Poptat. Zároveň se roztáhne (scaleX 1,6 kolem
   svého vrcholu, odtud transform-origin 37,5 %), takže na konci animace je
   gradient ještě širší než na začátku a dojezd je úplně klidný. */
.pkg-price::before { content: ""; position: absolute; inset: 0 0 0 -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--accent-soft) 37.5%, rgba(0, 0, 0, 0) 130%);
  transform-origin: 37.5% 50%;
  transition: transform .55s var(--ease); }
.pkg-price > * { position: relative; z-index: 1; }
.pkg-price:hover::before, .pkg-price:focus-visible::before { transform: translateX(45%) scaleX(1.6); }
.pkg-price:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pkg-price .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pkg-price .price small { display: inline; font-size: .8rem; }
.pkg-price .price b { font-size: 1.12rem; }
.pkg-price .btn { height: 40px; padding: 0 18px; font-size: .88rem; }
.pkg-body { align-items: stretch; }
.pkg-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pkg-col .pkg-specs { flex: 1 1 auto; }
.pkg-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-content: stretch; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ps { background: var(--surface); padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps.is-tall { grid-row: span 2; }
.ps dt { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text); }
.ps dt svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ps dd { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.ps dd b { color: var(--text); font-weight: 600; }
.ps .variants { gap: 6px; }
.pkg.is-flipped .pkg-media { order: 2; }

@media (max-width: 1280px) {
  .ps { padding: 12px 14px 13px; }
  .ps dd { font-size: .86rem; }
}
@media (max-width: 1160px) {
  .pkg-head, .pkg-body { grid-template-columns: 1fr; }
  .pkg-media, .pkg.is-flipped .pkg-media { order: 0; width: 100%; max-width: 560px; justify-self: center; }
}
@media (max-width: 720px) {
  .pkg-specs { grid-template-columns: 1fr; }
  .ps.is-tall { grid-row: auto; }
  .pkg-price { border-radius: var(--radius-s); padding: 14px 16px; }
  .pkg-price .btn { width: 100%; }
}

/* ===== O nás — úvod s mozaikou fotek ===== */
.ah { position: relative; padding: calc(var(--nav-h) + var(--space)) 0 var(--space); overflow: hidden; }
.ah-glow { position: absolute; top: -20%; right: -10%; width: min(820px, 64vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255,107,0,.12), transparent 72%); pointer-events: none; }
.ah-grid { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "text mosaic" "facts mosaic"; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; align-items: stretch; }
.ah-text { grid-area: text; align-self: start; }
.ah-photos { grid-area: mosaic; position: relative; min-height: 380px; }
.ah-facts { grid-area: facts; align-self: start; }
.ah .h1 { margin: 12px 0 16px; font-size: clamp(2.1rem, 3.8vw, 3.2rem); max-width: 19ch; }
.ah .btn-row { margin-top: 26px; }
.ah-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ah-facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s, background .3s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.ah-facts li:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--surface-2); }
.ah-ic { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.ah-ic svg { width: 20px; height: 20px; }
/* Licence ČAPK nese místo ikony skutečný znak asociace. Znak má kromě
   modré a červené i bílý prstenec, takže patří na TMAVÝ podklad — na
   světlém by prstenec zmizel. Dlaždice je proto neutrálně tmavá, aby
   barvy znaku nic nebarvilo; rám, velikost i poloměr rohů zůstávají
   stejné jako u ostatních ikon, aby řada držela pohromadě. */
.ah-ic.je-logo { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); padding: 5px; }
.ah-ic.je-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ah-facts li:hover .ah-ic.je-logo { background: #20252b; }
.ah-facts b { font-family: var(--head); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.ah-facts li > span:last-child { font-size: .82rem; color: var(--muted); line-height: 1.3; }

/* Sloupce i poměr mozaiky dopočítává gen/mozaika_fotky.py z poměrů fotek:
   každá dlaždice má tvar své fotky (nic se neořezává) a oba sloupce díky
   tomu vyjdou stejně vysoké. Po výměně fotek obě čísla přepsat podle toho,
   co skript vypíše. */
.ah-mosaic { --g: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.038fr); gap: var(--g); align-content: center; justify-content: center; position: absolute; inset: 0; margin: auto; height: 100%; width: auto; aspect-ratio: .9057; max-width: 100%; }
.am-col { display: flex; flex-direction: column; gap: var(--g); }
.am { margin: 0; position: relative; overflow: hidden; aspect-ratio: var(--ar, 1); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.am[data-reveal] { transform: translateY(14px); }
.am[data-reveal].is-in { transform: none; }
.am img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.am:hover img { transform: scale(1.03); }

/* ===== O nás — Kdo jsme ===== */
.who-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 16px 48px; margin-bottom: var(--mezera-hlavicka); }
.who-head .h2 { margin-top: 10px; max-width: 20ch; }
.who-head p { color: var(--muted); margin: 0; }
/* Tři panely: první nese nejvíc textu, proto dostane víc místa — výšky
   se tím srovnají a v kratších panelech nezůstává prázdné místo. */
.who-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.who-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding: 24px 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); transition: opacity .8s var(--ease), transform .8s var(--ease), translate .4s var(--ease), border-color .3s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.who-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity .35s; }
a.who-card:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a.who-card:hover::after { opacity: 1; }
/* Karty „Kdo jsme" jsou bez ikon — začínají rovnou nadpisem. */
.who-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
/* Karty jsou bez ikon a bez odkazu, výšku si tedy udává text; mřížka je
   pak srovná na stejnou. Spodní odsazení drží jen tehdy, když pod textem
   ještě něco je (odkaz). */
.who-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.who-card p:not(:last-child) { margin-bottom: 18px; }
a.who-card:hover .who-more svg { translate: 4px 0; }

/* ===== Karty týmu: přezdívka nahoře, jméno pod ní ===== */
.m-meta .m-name { margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--text); }
.m-meta .m-nick { margin-top: 2px; font-family: var(--body); font-weight: 400; font-size: .84rem; color: var(--dim); }

/* ===== Medailonek: vždy celý obsah bez vnitřního posouvání ===== */
.drawer { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* Fotka vedle textu, a to přesně v poměru, ve kterém je výřez udělaný
   (4:5) — rám se nikdy neroztáhne jinak, takže se z fotky nic neořízne.
   Šířku drží stejný výpočet jako sloupec mřížky, `58vh` ji na nízkých
   obrazovkách zmenší, aby se okno vešlo na displej. */
.drawer-inner { grid-template-columns: min(460px, 40vw, 58vh) minmax(0, 1fr); max-height: none; align-items: start; }
.drawer-photo { align-self: center; width: auto; min-height: 0; max-height: none; }
/* Text se srovná na střed fotky, ať krátký medailonek nevisí v rohu.
   `safe` hlídá, aby se delší text nevysunul nahoru mimo okno. */
.drawer-body { align-self: stretch; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
.drawer-body { max-height: none; overflow: visible; }
.drawer-body .drawer-name { font-size: clamp(1.7rem, 3.6vw, 2.15rem); margin: 0; }
/* Jméno vlevo, věk jako samostatný štítek vpravo na jeho úrovni.
   Štítek se srovnává na střed řádku se jménem, ne na účaří: na účaří
   totiž sedí drobné písmo ve štítku, a celá pilulka pak visí o 5–8 px
   níž než jméno. Přezdívka je v HTML zabalená se jménem do jednoho
   <div>; `display: contents` ten obal zruší, takže jméno, štítek i
   přezdívka jsou tři samostatné položky a dají se srovnat každá zvlášť —
   jméno se štítkem na jeden řádek, přezdívka přes celou šířku pod ně. */
.drawer-hlavicka { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.drawer-hlavicka > div { display: contents; }
.drawer-hlavicka .drawer-name { grid-area: 1 / 1; }
.drawer-hlavicka .drawer-vek { grid-area: 1 / 2; }
.drawer-hlavicka .drawer-nick { grid-area: 2 / 1 / 3 / -1; }
/* Na nejužších telefonech by se delší jméno vedle štítku zalomilo na dva
   řádky a štítek by pak visel mezi nimi. Menší jméno se vejde vedle něj. */
@media (max-width: 370px) {
  .drawer-body .drawer-name { font-size: 1.45rem; }
}
.drawer-vek { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: .88rem; white-space: nowrap; }
.drawer-vek[hidden] { display: none; }
.drawer-nick { display: block; margin-top: 4px; color: var(--dim); font-weight: 400; font-size: .95rem; }

@media (max-width: 1024px) {
  .ah-grid { grid-template-columns: 1fr; grid-template-areas: "text" "mosaic" "facts"; row-gap: 32px; }
  .ah-photos { min-height: 0; }
  .ah-mosaic { position: relative; inset: auto; height: auto; width: 100%; aspect-ratio: auto; }
  .ah-facts { margin-top: 0; }
  .ah .h1 { max-width: 20ch; }
  .ah-photos, .ah-mosaic { max-width: 640px; }
}
@media (max-width: 1160px) {
  /* Dva sloupce a tři panely: první jde přes celou šířku, aby nikde
     nezůstalo prázdné políčko. */
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-card { min-height: 0; }
  .who-card:first-child { grid-column: auto; }
}
/* Užší displeje: dvousloupcové rozvržení by text zmáčklo do úzkého
   proužku, proto se fotka přesune nad něj a jde přes celou šířku.
   Na nízkých displejích se zastropuje a sama se ořízne doležata. */
@media (max-width: 900px) {
  .drawer-inner { grid-template-columns: 1fr; align-items: start; }
  /* Galerie jde přes celou šířku nad text, ovládání zůstane pod fotkou.
     Tady se přepne na výřez na šířku (5:4) — rám má stejný poměr, takže
     se z fotky pořád nic neořízne, ale zabere o dost míň výšky a jméno
     i text pod ní jsou hned vidět. Verzi vybírá <picture> v medailonku. */
  .drawer-photo { position: relative; width: auto; max-height: none; margin: 0 0 6px; border-radius: 0; }
  .drawer-photo .m-shot { aspect-ratio: 5 / 4; }
  .drawer-photo .car-viewport, .drawer-photo .m-shot { border-radius: 0; box-shadow: none; }
  /* fotka je nad textem, není co srovnávat na střed */
  .drawer-body { display: block; }
}
/* Na tabletu by fotka přes celou šířku zabrala skoro celou obrazovku,
   tak se zastropuje podle výšky okna — poměr 5:4 zůstává. */
@media (min-width: 561px) and (max-width: 900px) {
  .drawer-photo .m-gal { width: min(100%, 78vh); margin-inline: auto; }
  .drawer .drawer-top { inset: 14px 14px auto auto; }
  .drawer-body { padding: 22px 22px 26px; }
}
@media (max-width: 560px) {
  .ah-facts { gap: 8px; }
  .ah-facts li { grid-template-columns: 1fr; padding: 10px 12px; }
  .ah-ic { display: none; }
  .ah-facts b { font-size: .92rem; }
  .ah-facts li > span:last-child { font-size: .78rem; }
  .ah-mosaic { --g: 8px; }
}

/* ===== Medailonek: šipky pro přepínání členů vedle okna ===== */
/* Šířka okna medailonku (včetně šipek po stranách). Text tak dostane víc
   místa; min() zajistí, že se okno na užších displejích samo srazí. */
.drawer { width: min(1220px, calc(100vw - 16px)); max-height: none; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.drawer[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.drawer-panel { position: relative; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* Sousední medailonky stojí po stranách mimo panel — `clip` je zahodí,
   aniž by z vodorovné osy udělal rolovatelnou plochu (starší prohlížeče
   pravidlo přeskočí a drží se `overflow: hidden` výš). */
.drawer-panel { overflow-x: clip; }
.drawer .drawer-nav { width: 46px; height: 46px; background: var(--surface-2); border-color: var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.drawer .drawer-nav:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.drawer .drawer-top { inset: 14px 14px auto auto; }

@media (max-width: 720px) {
  .drawer { width: calc(100vw - 16px); }
  .drawer[open] { grid-template-columns: 1fr 1fr; grid-template-areas: "panel panel" "prev next"; gap: 10px; }
  .drawer-panel { grid-area: panel; }
  .drawer-prev { grid-area: prev; justify-self: start; }
  .drawer-next { grid-area: next; justify-self: end; }
  .drawer .drawer-top { inset: 14px 14px auto auto; }
  /* Okno se vystředí na výšku. Aby se přitom nikdy neořízlo, má panel
     zastropovanou výšku (obrazovka minus šipky pod ním a okraje) — díky
     tomu je celé okno vždycky nižší než obrazovka a `margin: auto` ho může
     bezpečně posadit doprostřed. Dřív bylo přilepené nahoru právě proto,
     že bez toho stropu přerostlo obrazovku a ořízlo se nahoře i dole. */
  .drawer { margin-block: auto; max-height: calc(100dvh - 20px); }
  .drawer[open] { align-content: center; }
  .drawer-panel { max-height: calc(100dvh - 96px); }
  /* Křížek zůstane po ruce i při posouvání textu. Nesmí ale dostat vlastní
     řádek mřížky nad fotkou — dělal by nad ní prázdný pruh. Sdílí proto
     buňku s fotkou, takže fotka začíná rovnou u horní hrany okna. */
  .drawer-inner { grid-template-areas: "foto" "text"; }
  .drawer .drawer-top { grid-area: foto; position: sticky; top: 14px; right: auto; left: auto;
    align-self: start; justify-self: end; width: max-content; margin: 14px 14px 0 0; }
  .drawer-photo { grid-area: foto; }
  .drawer-body { grid-area: text; }
  /* Na dotykovém displeji se fotky posouvají tažením, šipky jsou zbytečné.
     Tečky se přesunou na spodní okraj fotky — tím se jméno i text pod ní
     posunou výš a je hned vidět, že medailonek pokračuje dál. */
  .drawer-photo .car-arrow { display: none; }
  .drawer-photo .m-gal { position: relative; }
  .drawer-photo .car-ctr { position: absolute; left: 0; right: 0; bottom: 8px;
    margin: 0; gap: 0; pointer-events: none; z-index: 2; }
  .drawer-photo .car-dots { pointer-events: auto; }
  /* Jemné ztmavení pod tečkami, ať jsou čitelné i na světlé fotce. */
  .drawer-photo .car-viewport { position: relative; }
  .drawer-photo .car-viewport::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    background: linear-gradient(180deg, rgba(10, 11, 13, 0), rgba(10, 11, 13, .5)); pointer-events: none; }
}

/* =========================================================
   Optimalizace pro telefony a tablety
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --space: clamp(44px, 6vw, 68px);
    --mezera-blok: clamp(28px, 4vw, 44px);
    --mezera-hlavicka: clamp(20px, 3.4vw, 32px);
    --mezera-prvek: clamp(14px, 2vw, 20px);
    --nav-h: 64px;
  }
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .sec-head, .who-head { grid-template-columns: 1fr; }
  .price small, .footer-bottom, .footer h5 { font-size: .84rem; }
  .menu { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .to-top { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Orientační lišta na tabletu: pohodlné posouvání prstem */
@media (min-width: 761px) and (max-width: 900px) {
  .pillnav .wrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-padding-left: var(--gutter); }
  .pillnav .wrap::-webkit-scrollbar { display: none; }
  .pillnav a { scroll-snap-align: start; }
}

/* Na telefonu se lišta neposouvá do stran — všechny pilulky musí být
   vidět naráz. Zůstávají v běžné velikosti a místo posouvání se řádek
   zalomí; zmenšovat písmo se neosvědčilo, popisky byly pak nečitelné. */
@media (max-width: 760px) {
  .pillnav .wrap { flex-wrap: wrap; justify-content: center; row-gap: 5px; overflow: visible;
    padding-top: 8px; padding-bottom: 8px; }
  /* Každý ušetřený pixel výšky úvodu zvedá poměr jeho pásu, a tím se
     z úvodních fotek ubere méně ze stran. */
  .hero .lead { margin-bottom: 22px; }
  .hero-audience { margin: 22px 0 0; padding-top: 14px; }
}

/* Dotykové ovládání: větší plochy pro prst */
@media (pointer: coarse) {
  a, button, [role="button"], input, textarea, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  /* Na dotykovém displeji se karusel ovládá tažením, takže šipky jen
     zabírají místo a odvádějí pozornost od fotky — zůstanou jenom
     drobné tečky. Vidět je z nich 5 px, ale prstem se dá trefit
     plocha 30 px, protože kroužek je vykreslený až uvnitř odsazení. */
  .car-arrow { display: none; }
  .car-ctr { gap: 0; }
  .car-dots { gap: 0; margin-top: 6px; }
  .car-dots button { width: 30px; height: 30px; padding: 12.5px; background-clip: content-box;
    background-color: rgba(242, 243, 245, .3); }
  .car-dots button[aria-current="true"] { width: 30px; height: 30px; padding: 11.5px;
    background-color: rgba(242, 243, 245, .8); }
  .footer-col a, .footer-col span { padding: 9px 0; }
  .nav-links a { padding-block: 10px; }
  .logo { padding-block: 7px; }
  .c-row { padding: 20px; }
  .menu-foot a { padding: 10px 0; }
  .drawer .drawer-nav { width: 50px; height: 50px; }
}

/* Telefony */
@media (max-width: 560px) {
  /* Horní odsazení nechává nad textem pruh, kde je úvodní fotka vidět. */
  .hero { min-height: 68svh; padding-top: calc(var(--nav-h) + 4vh); padding-bottom: 28px; }
  .cta { padding: 26px 20px; }
  .hero .lead { margin-bottom: 24px; }
  .h1 { font-size: clamp(2.05rem, 8.6vw, 2.7rem); }
  .h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .lead { font-size: 1.02rem; }
  .ah-facts li > span:last-child, .fact span, .ov-text { font-size: .82rem; }
  .ps dd { font-size: .9rem; }
  .pkg-head { row-gap: 10px; margin-bottom: 14px; }
  .pkg-body, .pkg-col { gap: 12px; }
  .who-card { padding: 22px; }
  .steps li { padding: 14px 16px; }
  .form { padding: 20px 18px 22px; }
  .field input, .field textarea { font-size: 16px; }
  .footer-about p { max-width: none; }
}

/* Na výšku i na šířku: ať úvod nezabere celou obrazovku */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding: calc(var(--nav-h) + 28px) 0 32px; }
  .menu li a { padding: 13px 2px; font-size: 1.05rem; }
}

/* =========================================================
   Nabídka: jednotlivé popisky jako rozbalovací (mobil a tablet)
   ========================================================= */
.ps dt { margin: 0; }
.ps-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text); background: none; border: 0; text-align: left; cursor: default; }
.ps-btn > svg:first-child { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ps-label { flex: 1 1 auto; min-width: 0; }
.ps-chev { display: none; width: 20px; height: 20px; flex: none; color: var(--accent); transition: transform .3s var(--ease); }
.ps-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

@media (min-width: 1161px) {
  .ps-body { max-height: none !important; opacity: 1 !important; }
}
@media (max-width: 1160px) {
  .pkg-specs { grid-template-columns: 1fr; }
  .ps.is-tall { grid-row: auto; }
  .ps { padding: 0; gap: 0; }
  .ps-btn { padding: 12px 14px; gap: 12px; cursor: pointer; font-size: .78rem; }
  /* Z nové podoby na počítači si mobil bere kroužky s ikonou — vzhled
     drží pohromadě a navíc je hned vidět, která položka je rozkrytá
     (kroužek se u ní rozsvítí). Rozbalování ani rozměry řádku se jinak
     nemění, text pod popiskem zůstává přes celou šířku kvůli čitelnosti. */
  .ps-btn > svg:first-child { width: 30px; height: 30px; padding: 7px; border-radius: 50%;
    border: 1px solid var(--line-2); background: var(--bg-2); color: var(--accent); overflow: visible;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
  .ps-btn[aria-expanded="true"] > svg:first-child { background: var(--accent);
    color: var(--accent-ink); border-color: var(--accent); }
  /* Pilulka s cenou nese stejný barevný nádech jako pruh na počítači. */
  .pkg-price { background: var(--surface); }
  .ps-chev { display: block; }
  .ps-btn[aria-expanded="true"] .ps-chev { transform: rotate(180deg); }
  .ps-body { max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px; transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, padding-bottom .35s ease; }
  .ps-body.is-open { opacity: 1; padding-bottom: 15px; }
}

/* Přehled nabídky bez pořadových čísel */
.ov { grid-template-columns: minmax(0, 1fr); }
.ov-price { color: var(--accent); }

@media (max-width: 1160px) {
  .pkg-col { gap: 12px; }
}

/* =========================================================
   Nabídka: karusel fotek u položky (ovládání pod fotkou)
   ========================================================= */
.pkg-gal { align-self: start; min-width: 0; }
.pkg.is-flipped .pkg-gal { order: 2; }

/* Vedle sebe (dva sloupce) mají obě poloviny nabídky sedět hranami.
   Výšku udává fotka — zůstává čtvercová, jinak by u položky s kratší
   tabulkou vyšel z rámu placatý pruh a ze čtvercových fotek by zmizela
   třetina. Sloupec s údaji se k fotce dotáhne (`.pkg-specs` má flex: 1),
   takže jeho spodní hrana sedne na spodní hranu fotky. Ovládání karuselu
   už pod fotkou nestojí — leží na ní, viz blok na konci souboru. */
@media (min-width: 1161px) {
  .pkg-gal { align-self: start; }
}
.car-compact .car-stage { display: block; }
.car-compact .car-viewport { border-radius: var(--radius); box-shadow: var(--shadow); }
/* Fotka v nabídce vyplní rám celý, aby kolem ní nezůstalo prázdné místo.
   Rám není u všech fotek stejného tvaru jako ony, takže si každá nese
   vlastní `--vyrez` (object-position) — tím se určí, která část fotky
   v rámu zůstane, ať se neuřízne to podstatné. Nastavuje ho `galerie.py`. */
.pkg-shot { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.pkg-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--vyrez, 50% 50%); }
.car-ctr { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.car-ctr .car-dots { margin-top: 0; }
.pkg-gal:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: calc(var(--radius) + 4px); }

@media (max-width: 1160px) {
  .pkg-gal, .pkg.is-flipped .pkg-gal { order: 0; width: 100%; max-width: 560px; justify-self: center; }
}

/* =========================================================
   Spolupráce — loga partnerů, každé právě jednou
   ========================================================= */
/* Sekce má jen jeden velký vystředěný nadpis, žádné označení ani popis. */
.logos-title { max-width: 22ch; margin: 0 auto; text-align: center; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; color: var(--text); }
/* Záře u krajních log vyčnívá ven z obrazovky, proto se celá sekce
   ořízne — jinak by se stránkou na telefonu šlo posouvat do strany. */
.section:has(.logos) { overflow: hidden; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin-top: var(--mezera-blok); }
.logo-item { position: relative; display: flex; align-items: center; justify-content: center; height: 96px;
  transition: translate .35s var(--ease); }

/* Loga svítí pořád stejně a nic se samo nehýbe — efekt se pustí až při
   najetí kurzorem: měkká bílá záře za logem, zvětšení a drobné nadzvednutí. */
/* Záře se rozměřuje podle loga, ne podle buňky: k šířce loga se přidá pevných
   100 px, takže i úzký znak obce dostane záři výrazně širší než sám je —
   u procent by u něj vyšla pořád úzká. Výška vychází z výšky řádku. */
.logo-item::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(100% + 100px); height: calc(100% + 44px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022) 45%, transparent 78%);
  opacity: 0; transition: opacity .35s var(--ease); }

/* Každé logo má vlastní rozměry (třídy .lg-* níže) spočítané tak, aby měla
   všechna srovnatelnou optickou velikost — hustý znak se nesmí sázet stejně
   velký jako řídký wordmark s tenkými tahy. Násobitel --k celou sadu zmenší
   na užších displejích, takže čísla jsou jen na jednom místě. */
.logo-item img { position: relative; z-index: 1;
  max-height: calc(var(--lh, 52px) * var(--k, 1)); max-width: calc(var(--lw, 120px) * var(--k, 1)); width: auto; height: auto; object-fit: contain;
  transition: scale .35s var(--ease); }
a.logo-item:hover, a.logo-item:focus-visible { translate: 0 -4px; }
a.logo-item:hover img, a.logo-item:focus-visible img { scale: 1.08; }
a.logo-item:hover::before, a.logo-item:focus-visible::before { opacity: 1; }
a.logo-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 10px; }

/* Rozměry jednotlivých log (výška × šířka v px při --k: 1). */
.lg-stillproduction { --lh: 60px; --lw: 125px; }
.lg-zliv            { --lh: 47px; --lw: 104px; }
.lg-vrcovice        { --lh: 62px; --lw:  56px; }
.lg-divcice         { --lh: 62px; --lw:  57px; }
.lg-vetrni          { --lh: 63px; --lw:  52px; }
.lg-fueltra         { --lh: 74px; --lw:  48px; }

@media (max-width: 1100px) {
  .logos { gap: 8px 22px; --k: .9; }
  .logo-item { height: 86px; }
}
@media (max-width: 700px) {
  /* Na telefonu se loga do řady nevejdou a zalomí se nastřídačku (4 + 3),
     což vypadá rozsypaně. Mřížka 3 × 2 je drží v zákrytu. */
  .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 30px; gap: 10px; --k: .72; }
  .logo-item { height: 70px; }
}
@media (hover: none) {
  a.logo-item:hover { translate: 0; }
  a.logo-item:hover img { scale: 1; }
  a.logo-item:hover::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-price::before { transition: none; }
  .pkg-price:hover::before, .pkg-price:focus-visible::before { transform: none; }
  .logo-item, .logo-item img, .logo-item::before { transition: none; }
  a.logo-item:hover { translate: 0; }
  a.logo-item:hover img { scale: 1; }
}

/* =========================================================
   Ikony sociálních sítí u členů týmu
   ========================================================= */
/* Karta je sloupec, řádek ikon se drží u dolního okraje — díky tomu jsou
   ikony na všech kartách v jedné linii, i když někdo nemá přezdívku. */
.member { display: flex; flex-direction: column; }
.member .m-meta { flex: 1 1 auto; display: flex; flex-direction: column; }
.m-soc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* Na kartě v mřížce sedí ikony na spodním okraji fotky. Text karty tím
   zůstane čistý (jen jméno a přezdívka) a řádek ikon je u všech členů na
   stejném místě, ať jich mají jednu nebo čtyři. */
/* Řádek se nezalamuje a nesahá doprostřed karty — jinak by překryl místo,
   kam se klepe pro otevření medailonku (klik na ikonu vede na odkaz). */
.m-photo .m-soc { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0;
  flex-wrap: nowrap; gap: var(--soc-mezera, 6px); }
.m-photo .soc-link { width: var(--soc, 30px); height: var(--soc, 30px); border-radius: 9px;
  background: rgba(10, 11, 13, .55); border-color: rgba(255, 255, 255, .18); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.m-photo .soc-link svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .m-photo { --soc: 26px; --soc-mezera: 5px; } .m-photo .soc-link svg { width: 13px; height: 13px; } }
.soc-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  transition: color .3s, background .3s, border-color .3s, translate .3s var(--ease); }
.soc-link svg { width: 17px; height: 17px; fill: currentColor; }
/* Ikony kreslené tahem (např. glóbus) mají vlastní fill="none" — CSS by ho jinak přebilo. */
.soc-link svg[stroke] { fill: none; stroke: currentColor; }
.soc-link:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); translate: 0 -2px; }
.soc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* V medailonku je řádek ikon o kus níž a trochu větší. */
.drawer-bio .m-soc { margin-top: 18px; gap: 8px; }
.drawer-bio .soc-link { width: 38px; height: 38px; border-radius: 12px; }
.drawer-bio .soc-link svg { width: 19px; height: 19px; }
@media (pointer: coarse) {
  .soc-link { width: 40px; height: 40px; }
  .soc-link:hover { translate: 0; }
}

/* Barvy platforem, stejný princip jako u ikon v patičce: v klidu neutrální,
   při najetí se obarví do barev dané sítě. */
.soc-link[data-soc="instagram"]:hover { color: #fff; border-color: transparent;
  background: linear-gradient(45deg, #feda75, #fa7e1e 35%, #d62976 70%, #962fbf); }
.soc-link[data-soc="youtube"]:hover   { color: #fff; border-color: #ff3b3b; background: #ff3b3b; }
.soc-link[data-soc="facebook"]:hover  { color: #fff; border-color: #0866ff; background: #0866ff; }
.soc-link[data-soc="tiktok"]:hover    { color: #fff; border-color: #fe2c55; background: #fe2c55; }
.soc-link[data-soc="strava"]:hover    { color: #fff; border-color: #fc4c02; background: #fc4c02; }
.soc-link[data-soc="web"]:hover       { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }

/* =========================================================
   Nabídka — ovládání karuselu leží na fotce
   Stejně jako v medailonku patří šipky i tečky k fotce, ne pod ni:
   šipky po stranách, tečky dole uprostřed. Pod nimi je jemné ztmavení,
   aby byly čitelné i na světlém snímku. Na dotykovém displeji se šipky
   samy schovají (pravidlo v bloku `pointer: coarse`) a zůstanou tečky.
   ========================================================= */
.pkg-gal { position: relative; }
.pkg-gal .car-viewport { position: relative; }
.pkg-gal .car-viewport::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0), rgba(10, 11, 13, .6)); pointer-events: none; z-index: 1; }
.pkg-gal .car-ctr { position: absolute; inset: 0; display: block; margin: 0; height: auto;
  pointer-events: none; z-index: 2; }
.pkg-gal .car-arrow { position: absolute; top: 50%; translate: 0 -50%; pointer-events: auto;
  background: rgba(10, 11, 13, .62); border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pkg-gal .car-arrow:hover, .pkg-gal .car-arrow:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pkg-gal [data-prev] { left: 12px; }
.pkg-gal [data-next] { right: 12px; }
.pkg-gal .car-dots { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0;
  justify-content: center; pointer-events: auto; }
.pkg-gal .car-dots button { background-color: rgba(242, 243, 245, .45); }
.pkg-gal .car-dots button[aria-current="true"] { background-color: var(--accent); }

/* =========================================================
   Nabídka na počítači — údaje jako osa s kroužky
   Místo tabulky o dvou sloupcích stojí údaje pod sebou na svislé ose:
   u každého kroužek s ikonou, vedle něj název a pod ním text. Osa vede
   za kroužky a shora dolů slábne, takže oko jde přirozeně od programu
   až k ceně. Řádky se rozprostřou po výšce fotky, aby spodní hrany
   obou sloupců seděly — na tom Filip trvá.
   ========================================================= */
@media (min-width: 1161px) {
  .pkg-body { gap: 34px; align-items: stretch; }
  .pkg-col { gap: 0; }
  /* Rám fotky se natáhne na výšku sloupce s údaji, takže spodní hrany
     sedí u každé položky samy od sebe — i u té s nejdelšími texty. Uvnitř
     rámu fotka dál vyplňuje plochu (`cover`) a co v ní zůstane, určuje
     `--vyrez` u každého snímku. */
  .pkg-gal { align-self: stretch; display: flex; flex-direction: column; }
  .pkg-gal .car-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: stretch; gap: 0; }
  .pkg-gal .car-viewport { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: stretch; }
  .pkg-gal .car-track { flex: 1 1 auto; min-height: 0; width: 100%; align-items: stretch; }
  .pkg-gal .car-slide { display: flex; }
  .pkg-gal .pkg-shot { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .pkg-specs { position: relative; display: flex; flex-direction: column; justify-content: space-between;
    flex: 1 1 auto; gap: 0; padding: 0 0 14px; margin: 0;
    background: none; border: 0; border-radius: 0; overflow: visible; }
  /* Osa spojuje kroužky: každý údaj si nese úsek od svého kroužku k tomu
     dalšímu, poslední už žádný — čára tak přesně končí u posledního
     kroužku a nepokračuje do prázdna nad cenou. Je celá v barvě položky,
     přechod do ztracena se neosvědčil. Úseky naskakují spolu s řádky. */
  .ps:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: -2px;
    width: 2px; border-radius: 2px; background: var(--accent); opacity: .65; }
  .ps { position: relative; display: block; background: none; padding: 0; min-width: 0; }
  .ps + .ps { margin-top: 2px; }
  .ps dt { margin: 0; }
  .ps-btn { gap: 14px; align-items: center; font-size: .76rem; letter-spacing: .09em; }
  .ps-btn > svg:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 50%;
    border: 1px solid var(--line-2); background: var(--bg-2); color: var(--accent); overflow: visible;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
  .ps dd { margin: 4px 0 0 48px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
  /* Najetí myší zvýrazní právě čtený údaj. */
  .ps:hover .ps-btn > svg:first-child { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .ps:hover dd { color: var(--text); }
  .ps .variants { margin-top: 6px; }

  /* Cena uzavírá sloupec jako pruh, ne pilulka — drží hranu s fotkou. */
  .pkg-price { border-radius: var(--radius); padding: 12px 12px 12px 20px; background: var(--surface); }
  .pkg-price .price small { color: var(--dim); }
  .pkg-price .price b { font-size: 1.28rem; letter-spacing: -.01em; }
  .pkg-price .btn { height: 42px; padding: 0 20px; font-size: .9rem; }

  /* Řádky naskakují jeden po druhém — decentně, jen jednou. */
  .pkg-col[data-reveal] .ps { opacity: 0; transform: translateY(10px);
    transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .pkg-col[data-reveal].is-in .ps { opacity: 1; transform: none; }
  .pkg-col[data-reveal].is-in .ps:nth-child(1) { transition-delay: .06s; }
  .pkg-col[data-reveal].is-in .ps:nth-child(2) { transition-delay: .12s; }
  .pkg-col[data-reveal].is-in .ps:nth-child(3) { transition-delay: .18s; }
  .pkg-col[data-reveal].is-in .ps:nth-child(4) { transition-delay: .24s; }
  .pkg-col[data-reveal].is-in .ps:nth-child(5) { transition-delay: .30s; }
  .pkg-col[data-reveal].is-in .ps:nth-child(6) { transition-delay: .36s; }
  .no-js .pkg-col[data-reveal] .ps { opacity: 1; transform: none; }
}
@media (min-width: 1161px) and (prefers-reduced-motion: reduce) {
  .pkg-col[data-reveal] .ps { opacity: 1; transform: none; transition: none; }
}

/* Kontaktní řádky na telefonu: užší ikona a mezery dají hodnotě dost místa,
   aby se e-mailová adresa vešla na jeden řádek i na 390px displeji. */
@media (max-width: 700px) {
  .c-row { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 16px; }
  .c-ic { width: 40px; height: 40px; }
  .c-ic svg { width: 20px; height: 20px; }
}

/* Pod 380 px jsou tři sloupce log už moc úzké. */
@media (max-width: 380px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Výzva k poptávce na stránce O nás (sekce hned za Spoluprací): na úzkém
   displeji mířila tlačítka doprava, zatímco nadpis i text začínaly vlevo —
   dlaždice působila rozhozeně. Na počítači zůstávají vpravo, na telefonu
   jdou pod sebe přes celou šířku. */
#spoluprace + .section .cta .btn-row { justify-content: flex-end; }
@media (min-width: 701px) {
  #spoluprace + .section .cta .btn-row { flex-direction: column; align-items: stretch; width: max-content; margin-left: auto; }
}
@media (max-width: 700px) {
  #spoluprace + .section .cta .btn-row { gap: 12px; }
  #spoluprace + .section .cta .btn-row .btn { flex: 1 1 100%; }
}