/* ══════════════════════════════════════════════════════════════
   Filip Lejček — profesionální moderátor
   Hero sekce · design tokens + layout + motion
   Paleta: béžová základna + olivový akcent
   ══════════════════════════════════════════════════════════════ */

/* ── 0. Písmo ─────────────────────────────────────────────────────
   PP Neue Montreal (Pangram Pangram) — shodné písmo jako referenční
   web heynesh.com. Self-hostované z /fonts, žádný externí CDN.
   Jedno písmo pro nadpisy i běžný text. Pokrývá kompletní českou
   diakritiku (Č Ž Š Ř Ď Ť Ň Ů …).
   Váhy: 400 Book (základ) · 500 Medium (nadpisy, tlačítka) · 700 Bold. */
@font-face{
  font-family:"PP Neue Montreal";
  src:url("../fonts/pp-neue-montreal-book.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP Neue Montreal";
  src:url("../fonts/pp-neue-montreal-medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"PP Neue Montreal";
  src:url("../fonts/pp-neue-montreal-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ── 1. Design tokens ─────────────────────────────────────────── */
:root{
  /* Barvy */
  --bg:          #D5CFBE;   /* béžová základna */
  --bg-warm:     #E0DACA;   /* světlejší béžová (gradient nahoře) */
  --bg-deep:     #C6BFAB;   /* tmavší béžová (gradient dole) */
  --ink:         #1C1E17;   /* text — téměř černá s olivovým nádechem */
  --ink-soft:    #4A4D42;   /* sekundární text */
  --cream:       #F8F7F3;   /* text přes fotku */
  --olive:       #4F5D3A;   /* hlavní akcent — CTA */
  --olive-dk:    #3A4529;   /* akcent hover */
  --olive-lt:    #8B9A6B;   /* jemné detaily */

  /* Tmavé sklo — karty stojí vedle fotky na světlé béžové, ne na ní.
     Světlý odstín (194,184,172 @ .30) by tam nechal krémový text
     prakticky nečitelný (kontrast ~1,5:1). Tmavá varianta drží čitelnost
     bez ohledu na to, co je vzadu. */
  --glass:       rgba(28,30,23,.65);
  --glass-bd:    rgba(248,247,243,.34);
  --glass-hi:    rgba(248,247,243,.10);

  /* Typografie — jedno písmo (viz sekce 0). Dvě proměnné zůstávají
     kvůli sémantice: kdyby nadpisy měly někdy dostat vlastní řez,
     stačí přepsat --f-display. */
  --f-display: "PP Neue Montreal", "Segoe UI", system-ui, sans-serif;
  --f-body:    "PP Neue Montreal", "Segoe UI", system-ui, sans-serif;

  /* Prostor */
  --pad:  clamp(18px, 2.8vw, 44px);
  /* Levý odstup obsahu od okraje. 0 dokud není lišta (< 1280 px);
     na širším okně = šířka lišty + mezera (viz media dotaz u sekce 5.11).
     Sekce, které nemají jít pod lištu, používají místo levého --pad tohle. */
  --rail-space: var(--pad);
  --s-1:  clamp(6px, .8vw, 10px);
  --s-2:  clamp(10px, 1.2vw, 16px);
  --s-3:  clamp(16px, 2vw, 26px);
  --s-4:  clamp(24px, 3.2vw, 42px);

  /* Rádiusy */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;

  /* Motion */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.25, .46, .45, .94);
  --t-fast: .18s;
  --t-mid:  .32s;

  /* Vrstvy */
  --z-aurora:   1;
  --z-wordmark: 2;   /* obří „LEJČEK“ sedí POD fotkou — postava ho tam, kde se kryjí, zakrývá */
  --z-photo:    3;
  --z-grain:    4;
  --z-cards:    5;
  --z-copy:     6;
  --z-nav:      10;
}

/* ── 2. Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100svh;
  font-family:var(--f-body);
  font-size:16px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,svg,picture{ display:block; max-width:100%; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }

/* ── 3. Utility ───────────────────────────────────────────────── */
.u-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-100px; left:var(--pad);
  z-index:1000;
  padding:12px 20px;
  background:var(--olive); color:var(--cream);
  border-radius:var(--r-md);
  font-weight:500; font-size:15px;
  transition:top var(--t-mid) var(--e-out);
}
.skip-link:focus-visible{ top:var(--pad); }

/* Viditelný focus na všem interaktivním */
:where(a,button,[tabindex]):focus-visible{
  outline:2.5px solid var(--olive);
  outline-offset:3px;
  border-radius:4px;
}
.hero :where(a):focus-visible{
  outline-color:var(--cream);
}

/* ── 4. Tlačítka ──────────────────────────────────────────────── */
.btn{
  --btn-py:11px; --btn-px:22px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  min-height:44px;                       /* touch target */
  padding:var(--btn-py) var(--btn-px);
  font-family:var(--f-display);
  font-size:clamp(14px,1.12vw,15.5px);
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.2;
  border-radius:var(--r-md);
  border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft),
             border-color var(--t-mid) var(--e-soft),
             transform var(--t-fast) var(--e-out),
             box-shadow var(--t-mid) var(--e-soft);
}
.btn--sm{ --btn-py:8px; --btn-px:16px; min-height:44px; font-size:14px; }

.btn--primary{
  background:var(--olive);
  color:var(--cream);
  box-shadow:0 2px 10px rgba(28,30,23,.16);
}
.btn--primary:hover{
  background:var(--olive-dk);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(28,30,23,.26);
}
.btn--primary:active{ transform:translateY(0) scale(.985); }

.btn--ghost{
  /* Tmavý (ne světlý) skleněný tón — funguje spolehlivě i tam, kde fotka
     nezakrývá pozadí a scrim za textem je slabý. Sytost odpovídá glass
     kartám, takže styl ladí s nimi. */
  background:rgba(20,22,17,.34);
  color:var(--cream);
  border-color:rgba(248,247,243,.48);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:var(--cream);
  color:var(--ink);
  border-color:var(--cream);
  transform:translateY(-2px);
}
.btn--ghost:active{ transform:translateY(0) scale(.985); }

/* ══════════════════════════════════════════════════════════════
   5. HERO
   ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  z-index:5;
  height:200svh;                 /* prostor pro scroll choreografii */
  background:
    radial-gradient(120% 80% at 50% 0%,   var(--bg-warm) 0%, transparent 62%),
    radial-gradient(120% 70% at 50% 100%, var(--bg-deep) 0%, transparent 58%),
    var(--bg);
}

.hero__sticky{
  position:sticky; top:0;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  padding:var(--pad);
  padding-top:max(var(--pad), env(safe-area-inset-top));
  padding-bottom:max(var(--pad), env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto 1fr;
  isolation:isolate;
}

/* ── 5.1 Atmosféra (aurora) ───────────────────────────────────── */
.hero__aurora{
  position:absolute; inset:-10%;
  z-index:var(--z-aurora);
  pointer-events:none;
  background:
    radial-gradient(38% 44% at 22% 32%, rgba(139,154,107,.34) 0%, transparent 70%),
    radial-gradient(42% 40% at 80% 28%, rgba(214,205,182,.55) 0%, transparent 72%),
    radial-gradient(46% 52% at 52% 88%, rgba(79,93,58,.20)  0%, transparent 74%);
  filter:blur(28px);
  animation:aurora 22s var(--e-soft) infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(-2.2%,1.6%,0) scale(1.07); }
  100% { transform:translate3d(2%,-1.4%,0) scale(1.03); }
}

/* ── 5.2 Fotografie ───────────────────────────────────────────── */
.hero__photo-layer{
  position:absolute; inset:0;
  z-index:var(--z-photo);
  pointer-events:none;
}
/* <picture> nemá vlastní rozměr — bez toho nemá width:100% na <img> k čemu se vztáhnout */
.hero__photo-layer picture{ display:block; width:100%; height:100%; }
.hero__photo{
  width:100%; height:100%;
  object-fit:contain;
  object-position:bottom center;
  /* jemné podsvícení výřezu, aby nesplýval s pozadím */
  filter:drop-shadow(0 22px 48px rgba(28,30,23,.30))
         drop-shadow(0 2px 6px rgba(28,30,23,.14));
}

/* Desktop: portrét po pas jako na heynesh.com — velká postava kotvená
   ke spodní hraně, klín „vytéká" pod fold (ořízne overflow:hidden na
   .hero__sticky). Rozměr sedí na <picture>, aby GSAP transformace na
   .hero__photo (reveal, scale, parallax) zůstaly nedotčené.
   Výřez: img/filip-lejcek.* = 1244×1500 (bez pozadí, po pas). */
@media (min-width:981px){
  .hero__photo-layer picture{
    position:absolute;
    left:50%;
    bottom:calc(var(--pad) * -1);
    width:auto;
    height:clamp(640px, 104vh, 1120px);
    aspect-ratio:1244 / 1500;
    /* Ve výřezu má postava hlavu ~90 px vlevo od svého středu (pravá ruka
       gestikuluje → bbox je širší doprava). Posun doprava ji vrátí nad
       střed viewportu — hlava tím sjede z písmene „J" do mezery „J | Č"
       (viz .wordmark__l:nth-child(4) níž). Užší okno = „J" víc schované →
       potřebuje větší posun, proto inverzní vw. */
    transform:translateX(-50%) translateX(clamp(58px, 120px - 3.2vw, 90px));
  }
  .hero__photo{ object-position:bottom center; }
}
/* Scrim — garantuje kontrast bílého textu přes fotku */
.hero__photo-layer::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(24,26,20,.60) 0%,
    rgba(24,26,20,.40) 30%,
    rgba(24,26,20,.16) 52%,
    transparent 70%);
}

/* ── 5.3 Zrno ─────────────────────────────────────────────────── */
.hero__grain{
  position:absolute; inset:0;
  z-index:var(--z-grain);
  pointer-events:none;
  opacity:.30;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── 5.4 Horní blok: wordmark + navigace ──────────────────────── */
.hero__top{
  /* Bez vlastního z-indexu — značka a navigace níže mají KAŽDÁ svou vrstvu
     (grid items mají z-index bez ohledu na position), takže se nezabalí
     společně do jedné bubliny nad fotkou. */
  position:relative;
  display:grid;
  gap:clamp(14px,2.2vw,30px);
}

/* Horní lišta — jen mobil (viz @media níže), na desktopu skrytá */
.hero__bar{ display:none; }

/* Malý štítek „FILIP" nad obří „LEJČEK" (jen desktop), v běžném toku
   nad wordmarkem uvnitř .hero__brand. Zarovnaný na svislý tah „L". */
.hero__brand{ z-index:var(--z-wordmark); }
.hero__brand-pre{
  overflow:hidden;                            /* maska pro reveal */
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(16px,1.55vw,23px);
  line-height:1;                              /* těsné — zvětšení fontu neposune wordmark */
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  /* margin-left = levý side-bearing velkého „L" (≈ .058em z --wm-size),
     aby „FILIP" opticky začínalo na svislém tahu „L", ne u hrany boxu */
  margin:0 0 clamp(2px,0.5vw,7px) calc(var(--wm-size, 25vw) * .058);
  /* posunout „FILIP" do středové úrovně háčku nad „Č" — bez vlivu na
     pozici wordmarku (proto transform, ne margin). Kalibrováno podle
     skutečného screenshotu vykreslené stránky (ne teoretických
     font-metrik — ty se u tohoto webfontu neshodovaly se skutečným
     renderem). */
  transform:translateY(calc(var(--wm-size, 25vw) * .04 + 11px));  /* +11px ≈ 0,3cm doladění na přání */
}
.hero__brand-pre__i{
  display:block;
  will-change:transform;
}
.js .hero__brand-pre__i{ transform:translate3d(0,-105%,0); }  /* skryté před JS; sjede shora */

/* Obří typografická značka */
.wordmark{
  z-index:var(--z-wordmark);
  font-family:var(--f-display);
  font-weight:700;
  line-height:.76;
  letter-spacing:-.028em;
  color:var(--ink);
  overflow:hidden;                /* maska pro reveal */
  padding-bottom:.04em;
  transform-origin:left top;
  will-change:transform, opacity;
}
.wordmark__inner{
  display:flex;
  justify-content:space-between;
  font-size:var(--wm-size, 25vw);  /* přesnou velikost dopočítá JS */
  white-space:nowrap;
}
.wordmark__l{
  display:inline-block;
  will-change:transform;
}
.js .wordmark__l{ transform:translate3d(0,110%,0); }

/* Desktop: háček nad Č se dřív ořízl (těsný line-height + overflow maska)
   a „LEJČEK" vypadalo jako „LEJCEK". Přidáme prostor uvnitř clip-boxu
   (padding-top) a částečně kompenzujeme posun dolů (margin-top).
   Mobil má vlastní řešení (viz @media max-width:980px). */
@media (min-width:981px){
  /* wordmark co nejvýš — malý horní padding sekce + agresivnější
     záporný margin-top wordmarku (padding-top drží prostor pro háček,
     který sedí těsně pod horní hranou stránky) */
  .hero__sticky{ padding-top:clamp(2px,0.5vh,8px); }
  .wordmark{
    line-height:1;
    padding-top:calc(var(--wm-size, 25vw) * .205);   /* prostor pro háček nad Č — jen tak akorát */
    margin-top:calc(var(--wm-size, 25vw) * -.185);   /* wordmark až k horní hraně stránky */
    margin-bottom:calc(var(--wm-size, 25vw) * -.15);   /* stáhnout navigaci blíž (line-height přidalo vzduch pod textem) */
  }
  /* Mezera „J | Č" — postava (posunutá doprava, viz .hero__photo-layer
     picture) stojí v tomhle okně, ne přes „J". fitWordmark() měří i tuhle
     mezeru a o její šířku písmena zmenší, takže „LEJČEK" pořád bleeduje
     přes celou šířku, jen se čte jako „LEJ · ČEK" s postavou uprostřed
     (což je i slabičný předěl Lej-ček). Hodnota v em = poměr k --wm-size. */
  .wordmark__l:nth-child(4){ margin-left:.32em; }
}

/* Navigace v hero */
.hero__nav{
  z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  flex-wrap:wrap;
}
.navgroup{
  display:flex; align-items:center;
  gap:clamp(9px,1vw,15px);
}
.navgroup li{ display:flex; align-items:center; }
.navgroup a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;   /* dotykový cíl — krátká slova ("foto") by bez toho byla užší */
  padding:2px;
  font-family:var(--f-body);
  font-size:clamp(12.5px,1.05vw,15px);
  font-weight:400;
  color:var(--ink);
  letter-spacing:.002em;
  position:relative;
  transition:color var(--t-mid) var(--e-soft), opacity var(--t-mid) var(--e-soft);
}
.navgroup a::after{
  content:"";
  position:absolute; left:2px; right:2px;
  bottom:calc(50% - .72em);       /* drží se textu, ne hrany tap-boxu */
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--t-mid) var(--e-out);
}
.navgroup a:hover{ color:var(--olive); }
.navgroup a:hover::after{ transform:scaleX(1); transform-origin:left; }

.navsep{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--ink);
  opacity:.32;
}

/* ── 5.5 Střed: headline + CTA ────────────────────────────────── */
.hero__center{
  position:relative;
  z-index:var(--z-copy);
  align-self:end;
  justify-self:center;
  display:grid;
  justify-items:center;
  gap:clamp(20px,2.6vw,34px);
  text-align:center;
  padding-bottom:clamp(74px,9vh,104px);   /* místo pro spodní řádek */
  max-width:min(94vw, 900px);
}

/* Garantuje kontrast krémového textu nad libovolně světlým místem fotky
   (bílé tričko a světlé ruce padnou přesně pod spodní řádek + CTA) */
.hero__center::before{
  content:"";
  position:absolute; z-index:-1;
  left:50%; top:52%;
  width:140%; height:178%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(60% 56% at 50% 52%,
    rgba(18,20,15,.66) 0%,
    rgba(18,20,15,.44) 44%,
    rgba(18,20,15,.14) 68%,
    transparent 80%);
  filter:blur(10px);
}

.hero__headline{
  font-family:var(--f-display);
  font-size:clamp(2.05rem, 5.3vw, 4.3rem);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.028em;
  color:var(--cream);
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(24,26,20,.44),
              0 1px 3px rgba(18,20,15,.55);
}

.hero__cta{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  flex-wrap:wrap;
}

/* Obě hero CTA = stejné „flow" tlačítko jako v kontaktu a patičce.
   Základ (ink text, tmavý obrys) sedí na béžové — použije ho mobil.
   Nad fotkou (≥ 981 px) přepínáme na krémový text + světlý obrys
   a jemné sklo, ať drží kontrast i bez hoveru. */
.hero__cta .flow-btn{
  min-height:44px;
  font-size:12px;
  text-decoration:none;
}
@media (min-width:981px){
  .hero__cta .flow-btn{
    color:var(--cream);
    border-color:rgba(248,247,243,.55);
    background:rgba(20,22,17,.30);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .hero__cta .flow-btn__arr{ color:var(--cream); }
}
@media (max-width:980px){
  .hero__cta .flow-btn{ flex:1 1 auto; }
}

/* Řádkový reveal (maska) */
.ln{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}
.ln__i{
  display:block;
  will-change:transform;
}
.js .ln__i{ transform:translate3d(0,110%,0); }

/* ── 5.6 Spodní řádek: kicker | lede ──────────────────────────── */
.hero__bottom{
  position:absolute;
  left:var(--pad); right:var(--pad);
  bottom:max(var(--pad), env(safe-area-inset-bottom));
  z-index:var(--z-copy);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4);
  pointer-events:none;
}
.hero__kicker,
.hero__lede{
  font-size:clamp(13px,1.06vw,15.2px);
  line-height:1.6;
  color:var(--ink);
  font-weight:400;
}
.hero__kicker{ max-width:20ch; }
.hero__lede{ max-width:44ch; text-align:right; }

/* ── 5.7 Plovoucí glass karty ─────────────────────────────────── */
.hero__cards{
  position:absolute; inset:0;
  z-index:var(--z-cards);
  pointer-events:none;
}

.cards-left{
  position:absolute;
  left:clamp(var(--pad), 3.5vw, 92px); right:auto;
  /* svisle na střed mezi spodkem "domů•o mně•portfolio" (.hero__nav)
     a vrškem "Profesionální moderátor…" (.hero__kicker) — přeměřeno
     na 1280×900: (356+821)/2=588.5, výška bloku 187 -> top 495 = 55% */
  top:55%;
  display:grid; gap:clamp(10px,1.2vw,16px);
  justify-items:start;
}

.card{
  pointer-events:auto;
  background:var(--glass);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
  backdrop-filter:blur(16px) saturate(1.12);
  color:var(--cream);
  box-shadow:0 8px 30px rgba(28,30,23,.16),
             inset 0 1px 0 var(--glass-hi);
  will-change:transform, opacity;
}

.card__txt{
  font-family:var(--f-display);
  line-height:1.12;
  letter-spacing:-.012em;
}
.card__txt strong{
  display:block;
  font-size:clamp(21px,2.05vw,29px);
  font-weight:700;
}
.card__txt span{
  display:block;
  margin-top:3px;
  font-family:var(--f-body);
  font-size:clamp(11.5px,.94vw,13.5px);
  font-weight:400;
  opacity:.88;
  letter-spacing:0;
}

.card--wide{
  display:flex; align-items:center; gap:clamp(10px,1.1vw,15px);
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.7vw,23px);
}
.card--tall{
  display:grid; gap:clamp(10px,1.1vw,15px);
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.7vw,23px);
  margin-left:clamp(20px,2.6vw,40px);   /* schodovité odsazení jako v referenci */
}

.card--traits{
  position:absolute;
  right:clamp(var(--pad), 3.5vw, 92px); left:auto;
  /* na nižších oknech by top:57% zajel pod .hero__bottom — na výšku
     ubereme, jakmile by k tomu docházelo, jinak necháme 57 %.
     Rezerva 380px (nejen výška .hero__lede, ale i prostor pro
     box-shadow karty, který jinak vizuálně "leze" do textu). */
  top:min(57%, calc(100% - 380px));
  padding:clamp(14px,1.5vw,20px) clamp(18px,1.9vw,26px) clamp(14px,1.5vw,20px) clamp(15px,1.6vw,21px);
}
.card--traits ul{ display:grid; gap:clamp(7px,.75vw,10px); }
.card--traits li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-display);
  font-size:clamp(12.5px,1.02vw,14.5px);
  font-weight:500;
  letter-spacing:-.006em;
}
.card--traits svg{ width:13px; height:13px; flex:none; opacity:.9; }

/* ══════════════════════════════════════════════════════════════
   5.9 REFERENCE — nekonečný pás log značek
   Marquee pohyb podle heynesh.com: měkké okraje (mask-gradient),
   svižné lineární tempo, pauza na hover, spotlight na najeté dlaždici.
   Bez nadpisu — jen samotný pás. Loga jsou barevná rastrová
   (z filiplejcek.lovable.app), proto sedí na krémových dlaždicích
   a ve výchozím stavu jsou v odstínech šedi; hover je rozsvítí.
   Vypnuto při reduced-motion (zbyde statická první skupina).
   ══════════════════════════════════════════════════════════════ */
.brands{
  position:relative;
  z-index:6;
  padding:clamp(72px,11vh,132px) 0;
  background:var(--bg);
}

/* Pás */
.brands__marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.brands__row{
  display:flex;
  width:max-content;
  animation:brands-marquee 42s linear infinite;
  will-change:transform;
}
.brands__marquee:hover .brands__row{ animation-play-state:paused; }

.brands__group{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.4vw,18px);
  padding-right:clamp(12px,1.4vw,18px);   /* mezera na švu opakování */
  flex:0 0 auto;
}

@keyframes brands-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* Jedna dlaždice — krémové pole. Šířka se řídí obsahem (široké wordmarky
   dostanou širokou dlaždici, kompaktní znaky úzkou) při pevné výšce a
   svislém rytmu — vypadá to organicky jako skutečná zeď log. Logo je
   ve výchozím stavu v odstínech šedi a ztlumené; hover je rozsvítí,
   dlaždici nadzvedne a přidá stín (spotlight), ostatní decentně ustoupí. */
.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(78px,9vw,108px);
  min-width:clamp(116px,13vw,148px);
  padding:0 clamp(24px,3vw,40px);
  background:var(--cream);
  border:1px solid rgba(28,30,23,.07);
  border-radius:var(--r-md);
  transition:transform .5s var(--e-out),
             box-shadow .5s var(--e-soft),
             opacity .5s var(--e-soft);
}
.brand img{
  width:auto;
  height:auto;
  max-width:clamp(170px,20vw,248px);
  max-height:clamp(34px,4vw,46px);
  object-fit:contain;
  filter:grayscale(1) contrast(1.05) opacity(.72);
  transition:filter .5s var(--e-soft);
}
.brands__row:hover .brand{ opacity:.5; }                 /* ostatní ustoupí */
.brands__row:hover .brand:hover{ opacity:1; }
.brands__row .brand:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(28,30,23,.14);
}
.brands__row .brand:hover img{ filter:grayscale(0) contrast(1) opacity(1); }

/* Fallback: dlaždice bez loga — jen název. Teď se nepoužívá (všech 11 má
   logo), zůstává pro případ dočasně chybějícího assetu. */
.brand--word span{
  font-family:var(--f-display);
  font-size:clamp(14px,1.5vw,17px);
  font-weight:500;
  letter-spacing:-.006em;
  line-height:1.15;
  text-align:center;
  color:var(--ink);
  opacity:.72;
  transition:opacity .5s var(--e-soft);
}
.brands__row .brand--word:hover span{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .brands__row{ animation:none; }
  .brands__group:nth-child(2){ display:none; }   /* statická jen první */
  .brands__marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ══════════════════════════════════════════════════════════════
   5.10 O MNĚ
   Dvousloupcový editorial: staggered dvojice fotek + text s pevným
   měřítkem řádku. Nadpis „vyjede" zpod masky, odstavce a fotky
   nabíhají při scrollu (JS: buildAbout v main.js). Fotky mají rám
   z jemné světlé linky a hluboký měkký stín — „prémiový" dojem.
   ══════════════════════════════════════════════════════════════ */
.about{
  position:relative;
  z-index:6;
  padding:clamp(84px,13vh,168px) 0;
  background:var(--bg);   /* shodné s .brands — bez viditelného švu mezi sekcemi */
}
.about__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,0.86fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
}

/* ── Fotky ──────────────────────────────────────────────────────────
   Větší, překrývající se dvojice: dominantní fig--a + menší fig--b,
   která na ni s odsazením „pluje". Kontejner drží 3D perspektivu pro
   pointer-parallax (JS). */
.about__media{
  position:relative;
  display:flex;
  align-items:flex-start;
  perspective:1200px;
  transform-style:preserve-3d;
}
.about__fig{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--bg-deep);
  box-shadow:
    0 40px 74px -24px rgba(28,30,23,.44),
    0 12px 28px -14px rgba(28,30,23,.3);
  will-change:transform;
}
.about__fig::after{               /* jemný světlý rám + vinětace */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(248,247,243,.16),
    inset 0 -70px 60px -50px rgba(28,30,23,.5);
  pointer-events:none;
}
.about__fig picture{ display:block; width:100%; height:100%; }
.about__fig img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--e-out);
}
.about__fig:hover img{ transform:scale(1.05); }

.about__fig--a{
  flex:0 0 63%;
  aspect-ratio:4/5;
}
.about__fig--a img{ object-position:50% 12%; }   /* drží Filipův obličej v záběru */
.about__fig--b{
  flex:0 0 47%;
  margin-left:-10%;
  margin-top:clamp(52px,13vw,148px);
  aspect-ratio:3/4;
  z-index:2;
  box-shadow:
    0 50px 88px -26px rgba(28,30,23,.52),
    0 16px 34px -14px rgba(28,30,23,.34);
}

/* Reveal maska fotek — obsah startuje schovaný pod spodní hranou */
.js .about__fig picture{ transform:translate3d(0,101%,0); }

/* ── Text ───────────────────────────────────────────────────────── */
.about__body{
  transform:translateY(clamp(-64px,-5vw,-28px));   /* jemné posazení výš */
}
.about__title{
  overflow:hidden;                /* maska pro reveal */
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.4vw,2.8rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
  max-width:20ch;
}
.about__title-i{ display:block; will-change:transform; }
.js .about__title-i{ transform:translate3d(0,110%,0); }

.about__text{
  margin-top:clamp(20px,2.6vw,32px);
  display:grid;
  gap:clamp(11px,1.3vw,17px);
  max-width:56ch;
}
.about__text p{
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.72;
  color:var(--ink-soft);
}

/* ── Reveal — počáteční stavy (JS je rozanimuje) ───────────────── */
.js .about__text p{ opacity:0; }

/* ══════════════════════════════════════════════════════════════
   5.10b  MÉDIA — sportovní komentátor Nova Sport
   Editoriální blok hned za „O mně": vlevo nadpis + krátký text
   (1. osoba, jako zbytek O mně), vpravo cream panel s logy
   (Nova Sport + MS 2026 + Liga mistrů + Bundesliga + La Liga).
   Pozadí bezešvé s .about/.brands; spodní padding velký, protože
   .services „vyjede" zaoblenou hranou přes konec bloku.
   JS: buildMedia() v main.js.
   ══════════════════════════════════════════════════════════════ */
.media{
  position:relative;
  z-index:6;
  /* Blok drží blízko sekce „O mně" — malý horní padding + zápor. margin
     ukusuje z prázdného spodního odsazení .about (nekříží obsah). */
  margin-top:clamp(-84px,-10vh,-40px);
  padding:clamp(12px,2.4vh,36px) 0 clamp(120px,16vh,180px);
  background:var(--bg);
}
.media__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(28px,4.5vw,60px);
  align-items:center;
}

.media__title{
  overflow:hidden;                 /* maska pro reveal */
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
  max-width:18ch;
}
.media__title-i{ display:block; will-change:transform; }

.media__text{
  margin-top:clamp(18px,2.4vw,28px);
  display:grid;
  gap:clamp(10px,1.2vw,15px);
  max-width:52ch;
}
.media__text p{
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.72;
  color:var(--ink-soft);
}

.media__logos{
  display:grid;
  grid-template-columns:repeat(6,1fr);   /* 6 = 3× dvojité pole → 3+2 s vycentrovaným spodním řádkem */
  gap:clamp(14px,1.8vw,22px);
  align-items:center;
  padding:clamp(20px,2.6vw,34px);
  background:var(--cream);
  border:1px solid rgba(28,30,23,.07);
  border-radius:var(--r-lg);
}
.media__logo{
  display:flex; align-items:center; justify-content:center;
  grid-column:span 2;
  width:100%;
  min-height:clamp(66px,8vw,90px);
  will-change:transform;                 /* magnetický posun (JS: mediaMagnetic) */
  transition:opacity .4s var(--e-soft);
}
.media__logo:nth-child(4){ grid-column:2 / span 2; }   /* spodní řádek 2 loga vprostřed */
.media__logo:nth-child(5){ grid-column:4 / span 2; }
.media__logo img{
  width:auto; height:auto;
  max-width:100%;
  max-height:clamp(40px,4.8vw,56px);   /* výchozí: „badge"/stacked znaky soutěží */
  object-fit:contain;
  transition:transform .55s var(--e-out), filter .4s var(--e-soft);
}
/* Prémiová interakce — jen desktop s myší:
   ostatní loga při najetí ustoupí (opacity), aktivní se zvedne a lehce
   „prosvětlí" (drop-shadow). Magnetický posun celého .media__logo řeší JS. */
@media (hover:hover) and (pointer:fine){
  .media__logos:hover .media__logo{ opacity:.4; }
  .media__logos:hover .media__logo:hover{ opacity:1; }
  .media__logo:hover img{
    transform:translateY(-3px) scale(1.05);
    filter:drop-shadow(0 8px 18px rgba(28,30,23,.16));
  }
}
@media (prefers-reduced-motion:reduce){
  .media__logo:hover img{ transform:none; }
}
/* Nova Sport je široký wordmark — nižší strop, ať nepřebíjí ostatní šířkou. */
.media__logo img[src*="nova-sport"]{ max-height:clamp(20px,2.4vw,28px); }
/* MS 2026 je vysoký portrét (poměr ~1:1.9) — potřebuje víc výšky. */
.media__logo img[src*="ms-2026"]{ max-height:clamp(48px,5.6vw,66px); }

/* ── Reveal — počáteční stavy (JS je rozanimuje) ───────────────── */
.js .media__title-i{ transform:translate3d(0,110%,0); }
.js .media__text p{ opacity:0; }
.js .media__logo{ opacity:0; }

/* ══════════════════════════════════════════════════════════════
   5.11 LEVÁ LIŠTA (rail)
   Vzor podle heynesh.com: fixní svislá lišta u levého okraje, stack
   matných „skleněných" panelů na béžové (identita + claim, čísla,
   navigace) a dole plný CTA button. Po odscrollování ~42 % hero sjede
   zleva dovnitř (buildRail() v js/main.js) a nahrazuje mizející hero
   navigaci. Akcent = olivová (u heynesh žlutá). Jen desktop ≥ 1280 px
   — pod tím pro ni není místo (viz posun .about__inner doprava níže).
   ══════════════════════════════════════════════════════════════ */
.rail{
  position:fixed;
  left:clamp(14px,1.5vw,22px);
  top:0;
  height:100svh;
  width:clamp(190px,18.5vw,240px);
  z-index:40;
  display:none;                     /* zapíná se až v media dotazu níže */
  padding:clamp(16px,2vh,24px) 0;
  font-family:var(--f-body);
}
.rail__inner{
  display:flex;
  flex-direction:column;
  gap:clamp(8px,.9vw,12px);
  width:100%;
  height:100%;
}

/* Skleněný panel — společný styl (jako .nav-*-bg na referenci):
   teplé krémové sklo, jemný světlý obrys, malý rádius, bez stínu. */
.rail__card{
  background:rgba(240,237,228,.68);
  -webkit-backdrop-filter:blur(15px) saturate(1.1);
          backdrop-filter:blur(15px) saturate(1.1);
  border:1px solid rgba(255,255,255,.4);
  border-radius:8px;
}

/* Identita — jako .nav-profile na heynesh.com: logo + sociální ikony
   v horní řádce, pod tím krátký popis. */
.rail__id{
  display:flex; flex-direction:column; align-items:stretch;
  gap:9px;
  padding:13px 14px 14px;
}
.rail__id-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.rail__mark{
  padding:5px 9px 4px;
  background:var(--olive);
  color:var(--cream);
  border-radius:6px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  line-height:1;
  transition:background-color var(--t-mid) var(--e-soft);
}
.rail__mark:hover{ background:var(--olive-dk); }
.rail__social{ display:flex; gap:5px; flex:none; }
.rail__social a{
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:6px;
  background:rgba(28,30,23,.06);
  color:var(--ink-soft);
  transition:background-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft);
}
.rail__social a:hover{ background:var(--olive); color:var(--cream); }
.rail__social svg{ width:13px; height:13px; }
.rail__role{
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rail__bio{
  font-size:10.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
/* Čísla */
.rail__stats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px;
  padding:13px 14px;
}
.rail__stat strong{
  display:block;
  font-family:var(--f-display);
  font-weight:700; font-size:19px; line-height:1;
  color:var(--olive);
}
.rail__stat span{
  display:block; margin-top:5px;
  font-size:9.5px; line-height:1.32;
  color:var(--ink-soft);
}

/* Navigace — karta se roztáhne na volnou výšku lišty (jako na
   referenci) a položky se rovnoměrně rozprostřou. */
.rail__nav{
  position:relative;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:10px 6px;
  gap:2px;
  margin-bottom:clamp(14px,1.8vw,22px);   /* odstup od pásu log dole */
}
/* Aktivní stav = jedna olivová „pilulka", která klouže mezi položkami
   (JS: railNavMarker) — místo blikání pozadí u každého odkazu zvlášť. */
.rail__nav-marker{
  position:absolute;
  left:0; top:0;
  border-radius:7px;
  background:var(--olive);
  opacity:0;
  pointer-events:none;
  z-index:0;
  will-change:transform,width,height;
}
.rail__nav a{
  position:relative;
  z-index:1;
  display:flex; align-items:center; gap:8px;
  padding:9px 8px;
  border-radius:7px;
  font-family:var(--f-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  transition:background-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft);
}
/* Ikonka v malém zaobleném „čipu" jako na referenci. */
.rail__nav-ico{
  display:grid; place-items:center;
  width:24px; height:24px; flex:none;
  border-radius:6px;
  background:rgba(28,30,23,.06);
  transition:background-color var(--t-mid) var(--e-soft);
}
.rail__nav a svg{
  width:14px; height:14px; flex:none;
  opacity:.55;
  transition:opacity var(--t-mid) var(--e-soft);
}
.rail__nav a:hover{ background:rgba(28,30,23,.055); }
.rail__nav a:hover .rail__nav-ico{ background:rgba(28,30,23,.1); }
.rail__nav a:hover svg{ opacity:.85; }
.rail__nav a.is-active{ color:var(--cream); }
.rail__nav a.is-active:hover{ background:transparent; }
.rail__nav a.is-active .rail__nav-ico{ background:rgba(255,255,255,.16); }
.rail__nav a.is-active svg{ opacity:1; }
/* Bez JS drží aktivní pilulku pozadí odkazu (fallback). */
html:not(.js) .rail__nav a.is-active{ background:var(--olive); }

/* Mini pás log — jako .nav-comapny-wrap na heynesh.com. Vlastní
   skleněný panel (jako ostatní .rail__card), aby loga byla čitelná
   i nad tmavou sekcí Fotogalerie. Maska měkkých okrajů je na vnitřní
   dráze .rail__logos-track, ať nevybledává i pozadí panelu.
   Dekorativní (aria-hidden) — přístupný seznam značek je v Referencích. */
.rail__logos{
  margin-top:auto;            /* pás + e-mail + CTA drží u spodní hrany lišty */
  margin-bottom:36px;         /* volný pruh pod pásem pro tooltip „Kopírovat e-mail" */
  padding:6px 6px;
  background:rgba(240,237,228,.72);
  -webkit-backdrop-filter:blur(15px) saturate(1.1);
          backdrop-filter:blur(15px) saturate(1.1);
  border:1px solid rgba(255,255,255,.4);
  border-radius:8px;
}
.rail__logos-track{
  overflow:hidden;
  padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.rail__logos-row{
  display:flex;
  width:max-content;
  animation:rail-logos 26s linear infinite;
  will-change:transform;
}
.rail__logos-group{
  display:flex; align-items:center;
  gap:24px;
  padding-right:24px;
  flex:0 0 auto;
}
/* Loga v původních barvách, dostatečně velká, aby byly čitelné
   i klubové znaky. */
.rail__logos-group img{
  height:19px; width:auto;
  max-width:104px;
  object-fit:contain;
  flex:none;
}
/* Kompaktní/čtvercové znaky dostanou víc výšky, ať nejsou jen tečka */
.rail__logos-group img[src*="ac-sparta"],
.rail__logos-group img[src*="rytiri-kladno"],
.rail__logos-group img[src*="hc-sparta"],
.rail__logos-group img[src*="red-bull"],
.rail__logos-group img[src*="playzone"]{ height:25px; }
@keyframes rail-logos{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion:reduce){
  .rail__logos-row{ animation:none; }
  .rail__logos-group:nth-child(2){ display:none; }
}

/* E-mail pill — klik = kopírování do schránky, na hover „tooltip"
   nad pilulkou. Chování jako .nav-email-item na heynesh.com
   (JS: railEmailCopy). */
.rail__email{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding:9px 34px;           /* místo pro ikonu vpravo, text zůstává na středu */
  background:rgba(240,237,228,.68);
  -webkit-backdrop-filter:blur(15px) saturate(1.1);
          backdrop-filter:blur(15px) saturate(1.1);
  border:1px solid rgba(255,255,255,.4);
  border-radius:8px;
  cursor:pointer;
  font-family:var(--f-body);
  text-align:center;
  transition:border-color var(--t-mid) var(--e-soft);
}
.rail__email:hover{ border-color:rgba(28,30,23,.16); }
.rail__email:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
.rail__email-addr{
  min-width:0;
  font-family:var(--f-display);
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail__email-copy{
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  width:13px; height:13px; flex:none;
  color:var(--ink-soft);
  transition:color var(--t-mid) var(--e-soft);
}
.rail__email:hover .rail__email-copy{ color:var(--olive); }

.rail__email-tip{
  position:absolute;
  left:0; right:0; bottom:calc(100% + 8px);
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 10px;
  background:rgba(240,237,228,.94);
  -webkit-backdrop-filter:blur(15px);
          backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.4);
  border-radius:7px;
  font-family:var(--f-display);
  font-size:10px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--t-mid) var(--e-soft);   /* CSS fallback bez JS */
}
.rail__email:hover .rail__email-tip,
.rail__email:focus-visible .rail__email-tip{ opacity:1; }
.rail__email-tip.is-copied{
  background:var(--olive); color:var(--cream);
  border-color:transparent;
}
/* check se ukáže až po zkopírování (JS); do té doby skrytý */
.rail__email-check{ width:12px; height:12px; flex:none; display:none; }
.rail__email-tip.is-copied .rail__email-check{ display:block; }

/* CTA — hover = „roll" textu po slovech (JS: railCtaHover), stejně jako
   [data-button-hover] na heynesh.com. Bez posunu/změny pozadí. */
.rail__cta{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px;
  background:var(--olive);
  color:var(--cream);
  border-radius:8px;
  font-family:var(--f-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 2px 10px rgba(28,30,23,.14);
  overflow:hidden;
}
.rail__cta:active{ transform:scale(.985); transition:transform var(--t-fast) var(--e-out); }

/* Maska i slova mají stejnou výšku řádku (1.4) — dost místa pro čárky
   nad velkými písmeny (NEZÁVAZNÁ), a yPercent 100 = přesně jedna
   výška masky, takže „roll" pořád lícuje. */
.rail__cta-mask{
  position:relative;
  display:block;
  overflow:hidden;
  line-height:1.4;
  white-space:nowrap;
}
.rail__cta-row{ display:block; line-height:1.4; }
.rail__cta-row--clone{ position:absolute; left:0; top:0; }
.rail__cta-w{
  display:inline-block;
  line-height:1.4;
  will-change:transform;
}

/* Bez JS (nebo dotykově) zůstane jen text v masce — statický, čitelný */
.rail__cta-row--clone{ visibility:hidden; }
.js .rail__cta-row--clone{ visibility:visible; }

/* Výchozí skrytý stav — JS ji rozanimuje (autoAlpha + posun zleva) */
.js .rail{ opacity:0; visibility:hidden; }

/* ══════════════════════════════════════════════════════════════
   5.12 PORTFOLIO SLUŽEB
   Vzor animace podle „About me" na heynesh.com: svislá „scrollující
   čára", která se dokresluje podle scrollu (scaleY, scrub), a služby
   po stranách, které při najetí naběhnou (scale + fade, nadpis zpod
   masky) a tečka na čáře „lupne". JS: buildServices() v main.js.
   ══════════════════════════════════════════════════════════════ */
/* Prémiový přechod z „O mně": Portfolio je vyvýšený panel, který
   zaoblenou horní hranou „vyjíždí" přes konec předchozí sekce —
   měkký stín nad hranou + světelný nádech na náběhu + olivový steh
   ve švu (dokresluje se scrollem, JS: buildServices). */
.services{
  position:relative;
  z-index:7;
  margin-top:clamp(-104px,-11vh,-56px);
  padding:clamp(104px,15vh,184px) 0 clamp(84px,13vh,168px);
  background:var(--bg);
  border-radius:clamp(30px,5vw,60px) clamp(30px,5vw,60px) 0 0;
  overflow-x:clip;            /* dlaždice přijíždějí zpoza okraje */
  box-shadow:
    0 -34px 64px -34px rgba(28,30,23,.30),
    0 -10px 24px -14px rgba(28,30,23,.18),
    inset 0 1px 0 rgba(255,255,255,.65);
}
/* Jemný světelný nádech na horním náběhu panelu (rychle vyprchá). */
.services::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:clamp(120px,18vh,220px);
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 100%);
}
.services__inner{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
}
.services__intro{ margin-bottom:clamp(44px,7vh,88px); }
.services__head{
  overflow:hidden;
  font-family:var(--f-display);
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.024em;
  color:var(--ink);
}
.services__head-i{ display:block; will-change:transform; }
.js .services__head-i{ transform:translate3d(0,110%,0); }
.services__lead{
  margin-top:clamp(14px,2vw,20px);
  max-width:46ch;
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.65;
  color:var(--ink-soft);
}

/* ── Časová osa služeb ─────────────────────────────────────────── */
.services__timeline{ position:relative; }

.services__item{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:clamp(168px,23vh,240px);
}
/* Dlaždice služby — matné „sklo" jako .about-card na heynesh.com:
   krémové pozadí, jemný obrys, hluboký měkký stín, velké číslo nahoře.
   Prémiové efekty: 3D náklon za kurzorem, putující odlesk, jednorázový
   „sheen" při příchodu, rozsvícení akcentové linky. */
.services__card{
  --rx:0; --ry:0; --mx:50%; --my:50%;
  position:relative;
  display:flex; flex-direction:column;
  gap:clamp(8px,1vw,13px);
  width:min(100%, clamp(300px,34vw,428px));
  padding:clamp(22px,2.6vw,38px) clamp(22px,2.8vw,40px);
  background:rgba(240,237,228,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
          backdrop-filter:blur(16px) saturate(1.12);
  border:1px solid rgba(255,255,255,.5);
  border-radius:clamp(14px,1.8vw,22px);
  box-shadow:
    0 40px 70px -26px rgba(28,30,23,.4),
    0 12px 26px -14px rgba(28,30,23,.24);
  transform-origin:center;
  transform:
    perspective(950px)
    rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg));
  will-change:transform;
  transition:transform .6s var(--e-out), box-shadow .5s var(--e-soft);
}
/* Při aktivním sledování kurzoru řídí náklon JS (quickTo) → vypneme
   CSS přechod transformu, ať to neplave „za" myší. */
.services__card.is-live{ transition:box-shadow .5s var(--e-soft); }
.services__card.is-live,
.services__card:hover{
  transform:
    perspective(950px)
    rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg))
    translateY(-6px);
  box-shadow:
    0 56px 92px -24px rgba(28,30,23,.5),
    0 18px 38px -14px rgba(28,30,23,.32);
}

/* Putující odlesk + jednorázový „sheen" — clip uvnitř skla, ať nepřetéká
   přes akcentovou linku, která visí vně dlaždice. */
.services__glow{
  position:absolute; inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.services__glow::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(220px circle at var(--mx) var(--my),
    rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  opacity:0;
  transition:opacity .45s var(--e-soft);
}
.services__card:hover .services__glow::before,
.services__card.is-live .services__glow::before{ opacity:1; }
.services__glow i{
  position:absolute; top:-30%; left:0;
  width:55%; height:160%;
  background:linear-gradient(100deg,
    transparent 22%, rgba(255,255,255,.5) 50%, transparent 78%);
  transform:translateX(-190%) rotate(3deg);
  opacity:0;
}
.services__card.is-in .services__glow i{
  animation:svc-sheen 1.15s var(--e-out) .18s forwards;
}
@keyframes svc-sheen{
  0%   { transform:translateX(-190%) rotate(3deg); opacity:0; }
  14%  { opacity:.9; }
  70%  { opacity:.9; }
  100% { transform:translateX(330%)  rotate(3deg); opacity:0; }
}

.services__card > .services__num,
.services__card > .services__title,
.services__card > .services__desc{ position:relative; z-index:1; }

/* Svislá linka podél vnější hrany dlaždice — vlevo u levých, vpravo
   u pravých. Jemná olivová, konce vyblednou; při příchodu „vyroste"
   shora, při najetí kurzorem zesílí a rozsvítí se. */
.services__card::before{
  content:"";
  position:absolute;
  top:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px);
  width:2px;
  border-radius:2px;
  background:linear-gradient(to bottom,
    transparent 0, var(--olive) 16%, var(--olive) 84%, transparent 100%);
  opacity:.5;
  transition:opacity .5s var(--e-soft), box-shadow .5s var(--e-soft), width .4s var(--e-out);
}
.js .services__card::before{
  transform:scaleY(0);
  transform-origin:top center;
  opacity:0;
  transition:transform .9s var(--e-out), opacity .6s var(--e-soft),
             box-shadow .5s var(--e-soft), width .4s var(--e-out);
}
.js .services__card.is-in::before{ transform:scaleY(1); opacity:.5; }
.services__card.is-in:hover::before,
.services__card.is-in.is-live::before{
  opacity:.95;
  width:3px;
  box-shadow:0 0 16px rgba(79,93,58,.45);
}
.services__item:nth-of-type(odd)  .services__card::before{ left:calc(-1 * clamp(13px,1.7vw,24px)); }
.services__item:nth-of-type(even) .services__card::before{ right:calc(-1 * clamp(13px,1.7vw,24px)); }
/* Liché služby jsou přisazené doprava (ke středu), sudé doleva. */
.services__item:nth-of-type(odd) .services__card{
  grid-column:1;
  justify-self:end;
}
.services__item:nth-of-type(even) .services__card{
  grid-column:2;
  justify-self:start;
}

.services__num{
  overflow:hidden;
  font-family:var(--f-display);
  font-size:clamp(2.1rem,3.6vw,3.1rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--olive);
  transition:text-shadow .5s var(--e-soft);
}
.services__num i{ display:block; font-style:normal; will-change:transform; }
.js .services__num i{ transform:translate3d(0,115%,0); }
.services__card:hover .services__num,
.services__card.is-live .services__num{ text-shadow:0 10px 26px rgba(79,93,58,.3); }
.services__title{
  overflow:hidden;
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
}
.services__title span{ display:block; will-change:transform; }
.services__desc{
  font-size:clamp(13px,1vw,14.5px);
  line-height:1.6;
  color:var(--ink-soft);
}

/* Výchozí skrytý stav pro reveal (JS rozanimuje; bez JS je vše vidět) */
.js .services__card{ opacity:0; }
.js .services__desc{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .services__card{ transform:none; transition:none; }
  .services__card.is-live,
  .services__card:hover{ transform:translateY(-4px); }
  .services__glow i{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════
   5.13 PORTRÉT — profilová karta pod Portfoliem
   Vanilla rekonstrukce 21st.dev/@beratberkayg "glassmorphism-profile-
   card" (React/Tailwind/shadcn), přebarvená do palety webu: béžová
   karta jako .services__card, spodní olivový „glow" pruh se štítkem,
   tlačítka cream → olive na hoveru. JS: buildPortrait() (jen reveal).
   ══════════════════════════════════════════════════════════════ */
.portrait{
  position:relative;
  z-index:6;
  padding:clamp(40px,6vh,84px) 0 clamp(96px,14vh,176px);
  background:var(--bg);
  overflow-x:clip;
}
.portrait__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;
  justify-content:center;
}

.pcard-wrap{
  position:relative;
  width:100%;
  max-width:468px;
}
.js .pcard-wrap{ opacity:0; }   /* JS rozanimuje (buildPortrait) */

.pcard{
  position:relative; z-index:2;
  border-radius:24px;
  padding:clamp(26px,3.4vw,38px);
  background:rgba(240,237,228,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
          backdrop-filter:blur(16px) saturate(1.12);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    0 40px 70px -26px rgba(28,30,23,.4),
    0 12px 26px -14px rgba(28,30,23,.24),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.pcard__avatar{
  position:relative;
  width:clamp(196px,52vw,266px);
  aspect-ratio:1/1;
  margin:0 auto clamp(22px,3.2vw,30px);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 20px 38px -18px rgba(28,30,23,.45);
}
.pcard__avatar::after{               /* olivový vlas + spodní vinětace, jako u .about__fig */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(79,93,58,.26),
    inset 0 -34px 38px -28px rgba(28,30,23,.34);
  pointer-events:none;
}
.pcard__avatar img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

.pcard__id{ text-align:center; margin-bottom:clamp(24px,3.4vw,32px); }
.pcard__name{
  font-family:var(--f-display);
  font-size:clamp(26px,3.2vw,33px);
  font-weight:700;
  letter-spacing:-.014em;
  color:var(--ink);
}

.pcard__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.pcard__btn{
  display:flex; align-items:center; justify-content:center; gap:clamp(5px,1.6vw,8px);
  height:54px; padding:0 clamp(10px,2.4vw,16px);
  border-radius:14px;
  background:var(--cream);
  border:1px solid rgba(28,30,23,.14);
  font-family:var(--f-display);
  font-size:clamp(12px,3vw,13.5px); font-weight:500;
  letter-spacing:.03em;
  white-space:nowrap;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--t-mid) var(--e-soft),
             border-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft);
}
.pcard__btn:hover{
  background:var(--olive);
  border-color:var(--olive);
  color:var(--cream);
}
.pcard__btn svg{ width:16px; height:16px; flex:none; }

/* Instagram glyph (Lucide geometrie) — decentní „nakreslení" rámečku +
   pružný záblesk čočky při hoveru. Vše gatováno reduced-motion. */
.pcard__btn--ig svg .ig-frame{ stroke-dasharray:1; stroke-dashoffset:0; }
.pcard__btn--ig svg .ig-lens,
.pcard__btn--ig svg .ig-dot{ transform-box:view-box; }
.pcard__btn--ig svg .ig-lens{ transform-origin:12px 11.4px; }
.pcard__btn--ig svg .ig-dot{ transform-origin:17.5px 6.5px; }

@media (prefers-reduced-motion:no-preference){
  .pcard__btn--ig:hover svg .ig-frame,
  .pcard__btn--ig:focus-visible svg .ig-frame{
    animation:ig-frame-draw .6s cubic-bezier(.55,.06,.15,1);
  }
  .pcard__btn--ig:hover svg .ig-lens,
  .pcard__btn--ig:focus-visible svg .ig-lens{
    animation:ig-lens-pop .52s cubic-bezier(.34,1.56,.64,1) .07s both;
  }
  .pcard__btn--ig:hover svg .ig-dot,
  .pcard__btn--ig:focus-visible svg .ig-dot{
    animation:ig-dot-pulse .34s ease .15s both;
  }
}
@keyframes ig-frame-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes ig-lens-pop{ 0%{ transform:scale(.8); } 55%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes ig-dot-pulse{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.65); } }

/* Telefon (Lucide phone-forwarded) — při hoveru „přesměrování": šipka
   ťukne doprava, tělo šipky se stlačí, celá ikona jemně pulzne.
   Gatováno reduced-motion, funguje i na :focus-visible. */
.pcard__btn--tel svg{ overflow:visible; }
.pcard__btn--tel svg .pf-shaft,
.pcard__btn--tel svg .pf-head{ transform-box:view-box; }
.pcard__btn--tel svg .pf-shaft{ transform-origin:22px 6px; }

@media (prefers-reduced-motion:no-preference){
  .pcard__btn--tel:hover svg,
  .pcard__btn--tel:focus-visible svg{
    animation:pf-pulse .9s cubic-bezier(.4,0,.2,1);
  }
  .pcard__btn--tel:hover svg .pf-head,
  .pcard__btn--tel:focus-visible svg .pf-head{
    animation:pf-nudge .5s cubic-bezier(.4,0,.2,1);
  }
  .pcard__btn--tel:hover svg .pf-shaft,
  .pcard__btn--tel:focus-visible svg .pf-shaft{
    animation:pf-shaft .5s cubic-bezier(.4,0,.2,1);
  }
}
@keyframes pf-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
@keyframes pf-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
@keyframes pf-shaft{ 0%,100%{ transform:translateX(0) scaleX(1); } 50%{ transform:translateX(3px) scaleX(.85); } }

/* Rail nav „domů" (Iconify line-md:home-md) — při hoveru / :focus-visible
   se dům sekvenčně překreslí: střecha → stěny → podlaha → dveře.
   Gatováno reduced-motion. */
.rail__nav a[href="#hero"] svg path{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#hero"]:hover svg .hm-roof,
  .rail__nav a[href="#hero"]:focus-visible svg .hm-roof{ animation:hm-draw .34s ease; }
  .rail__nav a[href="#hero"]:hover svg .hm-walls,
  .rail__nav a[href="#hero"]:focus-visible svg .hm-walls{ animation:hm-draw .3s ease .12s both; }
  .rail__nav a[href="#hero"]:hover svg .hm-floor,
  .rail__nav a[href="#hero"]:focus-visible svg .hm-floor{ animation:hm-draw .26s ease .26s both; }
  .rail__nav a[href="#hero"]:hover svg .hm-door,
  .rail__nav a[href="#hero"]:focus-visible svg .hm-door{ animation:hm-draw .3s ease .38s both; }
}
@keyframes hm-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Rail nav „o mně" (Iconify line-md:account) — při hoveru / :focus-visible
   se postava sekvenčně překreslí: hlava → tělo. Gatováno reduced-motion. */
.rail__nav a[href="#o-mne"] svg path{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#o-mne"]:hover svg .pe-head,
  .rail__nav a[href="#o-mne"]:focus-visible svg .pe-head{ animation:hm-draw .42s ease; }
  .rail__nav a[href="#o-mne"]:hover svg .pe-body,
  .rail__nav a[href="#o-mne"]:focus-visible svg .pe-body{ animation:hm-draw .42s ease .2s both; }
}

/* Rail nav „portfolio" (Lucide layout-list) — při hoveru / :focus-visible
   boxy postupně lupnou, řádky se zleva „setřou" dovnitř. Gatováno
   reduced-motion. */
.rail__nav a[href="#portfolio"] svg .ll-box,
.rail__nav a[href="#portfolio"] svg .ll-line{ transform-box:fill-box; }
.rail__nav a[href="#portfolio"] svg .ll-box{ transform-origin:center; }
.rail__nav a[href="#portfolio"] svg .ll-line{ transform-origin:left; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#portfolio"]:hover svg .ll-box,
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-box{ animation:ll-pop .35s ease both; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-box:nth-of-type(2),
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-box:nth-of-type(2){ animation-delay:.08s; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-line,
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-line{ animation:ll-wipe .3s ease both; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-line:nth-of-type(3),
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-line:nth-of-type(3){ animation-delay:.15s; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-line:nth-of-type(4),
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-line:nth-of-type(4){ animation-delay:.22s; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-line:nth-of-type(5),
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-line:nth-of-type(5){ animation-delay:.29s; }
  .rail__nav a[href="#portfolio"]:hover svg .ll-line:nth-of-type(6),
  .rail__nav a[href="#portfolio"]:focus-visible svg .ll-line:nth-of-type(6){ animation-delay:.36s; }
}
@keyframes ll-pop{ 0%{ transform:scale(.85); opacity:.6; } 60%{ transform:scale(1.05); } 100%{ transform:scale(1); opacity:1; } }
@keyframes ll-wipe{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Rail nav „foto" (Lucide camera) — při hoveru / :focus-visible čočka
   „cvakne": prudce se stáhne, přeskočí přes a dosedne. Gatováno
   reduced-motion. */
.rail__nav a[href="#foto"] svg .cam-lens{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#foto"]:hover svg .cam-lens,
  .rail__nav a[href="#foto"]:focus-visible svg .cam-lens{ animation:cam-snap .8s cubic-bezier(.34,1.4,.64,1); }
}
@keyframes cam-snap{ 0%{ transform:scale(1); } 30%{ transform:scale(.45); } 65%{ transform:scale(1.15); } 100%{ transform:scale(1); } }

/* Rail nav „video" (Lucide video) — při hoveru / :focus-visible kamera
   „panuje": nakloní se, chvíli podrží, přehoupne zpět. Gatováno
   reduced-motion. */
.rail__nav a[href="#video"] svg .vid-cam{ transform-box:view-box; transform-origin:9px 18px; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#video"]:hover svg .vid-cam,
  .rail__nav a[href="#video"]:focus-visible svg .vid-cam{ animation:vid-pan .75s ease-in-out; }
}
@keyframes vid-pan{ 0%{ transform:rotate(0); } 32%{ transform:rotate(-6deg); } 50%{ transform:rotate(-6deg); } 80%{ transform:rotate(2.5deg); } 100%{ transform:rotate(0); } }

/* Rail nav „reference" (Lucide message-circle-heart) — při hoveru /
   :focus-visible bublina vyskočí a srdce uvnitř dvakrát tepne.
   Gatováno reduced-motion. */
.rail__nav a[href="#reference"] svg .mh-bubble,
.rail__nav a[href="#reference"] svg .mh-heart{ transform-box:view-box; }
.rail__nav a[href="#reference"] svg .mh-bubble{ transform-origin:4px 20px; }
.rail__nav a[href="#reference"] svg .mh-heart{ transform-origin:12px 12px; }
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#reference"]:hover svg .mh-bubble,
  .rail__nav a[href="#reference"]:focus-visible svg .mh-bubble{ animation:mh-bubble .55s cubic-bezier(.34,1.4,.64,1); }
  .rail__nav a[href="#reference"]:hover svg .mh-heart,
  .rail__nav a[href="#reference"]:focus-visible svg .mh-heart{ animation:mh-heart .7s ease-in-out .24s both; }
}
@keyframes mh-bubble{ 0%{ transform:scale(.3); opacity:0; } 70%{ transform:scale(1.05); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@keyframes mh-heart{ 0%{ transform:scale(.6); opacity:0; } 30%{ transform:scale(1.22); opacity:1; } 50%{ transform:scale(1); } 72%{ transform:scale(1.14); } 100%{ transform:scale(1); } }

/* Rail nav „kontakt" (Lucide message-square-more) — při hoveru /
   :focus-visible tři tečky „píšou": postupně 2× bliknou. Gatováno
   reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .rail__nav a[href="#kontakt"]:hover svg .msm-dot,
  .rail__nav a[href="#kontakt"]:focus-visible svg .msm-dot{ animation:msm-blink .5s ease-in-out 2; }
  .rail__nav a[href="#kontakt"]:hover svg .msm-dot:nth-of-type(3),
  .rail__nav a[href="#kontakt"]:focus-visible svg .msm-dot:nth-of-type(3){ animation-delay:.12s; }
  .rail__nav a[href="#kontakt"]:hover svg .msm-dot:nth-of-type(4),
  .rail__nav a[href="#kontakt"]:focus-visible svg .msm-dot:nth-of-type(4){ animation-delay:.24s; }
}
@keyframes msm-blink{ 0%,100%{ opacity:1; } 45%{ opacity:.12; } }

/* ══════════════════════════════════════════════════════════════
   5.14 FOTOGALERIE — „unfurling" panel + 3D parallax mřížka
   Inspirace: 3d-parallax-unfurling-gallery (21st.dev). Sekce je
   vysoká (520vh), vnitřek přišpendlený (sticky). Scroll nejdřív
   „rozbalí" tmavý zaoblený panel do celé plochy, pak odrotuje
   3D mřížku fotek a rozjede sloupce různou rychlostí. JS: buildGallery.
   ══════════════════════════════════════════════════════════════ */
.gallery{
  position:relative;
  z-index:6;
  height:380vh;
  background:var(--bg);
}
.gallery__pin{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}
/* „Unfurling" panel — začíná zaoblený a odsazený, scroll ho roztáhne. */
.gallery__banner{
  position:absolute;
  top:9vh; right:5vw; bottom:9vh; left:5vw;
  overflow:hidden;
  border:4px solid #2a2a22;
  border-radius:clamp(28px,3.4vw,52px);
  background:#141410;
}
.gallery__stage{
  position:absolute; inset:0;
  display:grid; place-items:center;
  perspective:1000px;
}
.gallery__matrix{
  display:flex;
  gap:clamp(14px,1.6vw,26px);
  width:124vw;
  height:112vh;              /* nižší než obsah sloupce (4–5 fotek) → přesah ořízne pin */
  transform-style:preserve-3d;
  will-change:transform;
}
.gallery__col{
  display:flex; flex-direction:column;
  justify-content:center;    /* přesah rozdělit nahoru/dolů (schová ho vinětace) */
  gap:clamp(14px,1.6vw,26px);
  width:22vw; min-width:170px;
  will-change:transform;
}
.gallery__fig{
  position:relative;
  margin:0;
  width:100%;
  height:clamp(220px,32vh,460px);
  flex:none;
  overflow:hidden;
  border-radius:10px;
  background:#111;
}
.gallery__fig img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.82;
  transition:opacity .35s var(--e-soft), transform .5s var(--e-out);
}
.gallery__fig:hover img{ opacity:1; transform:scale(1.045); }
/* Rámující ztmavení hran — jako „ambient shadow box" v předloze. */
.gallery__vignette{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
  box-shadow:
    inset 0 130px 170px -70px #141410,
    inset 0 -130px 170px -70px #141410,
    inset 170px 0 180px -70px #141410,
    inset -170px 0 180px -70px #141410;
}
/* Bez JS / omezený pohyb / menší displeje — klidná 2sloupcová mřížka. */
@media (max-width:900px), (prefers-reduced-motion:reduce){
  .gallery{ height:auto; background:#141410; padding:clamp(56px,10vh,110px) 0 clamp(64px,12vh,130px); }
  .gallery__pin{ position:static; height:auto; overflow:visible; }
  .gallery__banner{
    position:static; inset:auto;
    width:auto; height:auto;
    overflow:visible;
    border:0; border-radius:0; background:transparent;
    max-width:920px; margin:0 auto;
    padding:0 var(--pad);
  }
  .gallery__stage{ position:static; display:block; perspective:none; inset:auto; }
  .gallery__matrix{
    display:grid; grid-template-columns:repeat(2,1fr);
    width:100%; height:auto;
    gap:clamp(8px,2vw,14px);
    transform:none !important;
  }
  .gallery__col{ display:contents; }
  .gallery__col > .gallery__fig{ transform:none !important; }
  .gallery__fig{ width:auto; height:auto; aspect-ratio:4/5; }
  .gallery__vignette{ display:none; }
}
/* i na telefonu držíme 2 sloupce — jeden sloupec = 12 fotek na celou
   šířku ≈ 5000 px scrollu (viz mobilní průchod, sekce 6b) */
.gallery__fig{ cursor:pointer; }

/* ── Lightbox — zvětšení fotky po kliknutí (JS: galleryLightbox). */
.lightbox{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;
}
.lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(16,17,12,.94);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}
.lightbox__stage{
  position:relative; z-index:1; margin:0;
  display:flex;
}
.lightbox__stage picture{ display:block; }
.lightbox__img{
  display:block;
  max-width:92vw; max-height:86vh;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7);
}
.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(248,247,243,.1);
  color:var(--cream);
  cursor:pointer;
  transition:background-color var(--t-mid) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(248,247,243,.2); }
.lightbox__close:active,
.lightbox__nav:active{ transform:scale(.92); }
.lightbox__nav:active{ transform:translateY(-50%) scale(.92); }
.lightbox__close{
  top:clamp(12px,2.4vw,24px); right:clamp(12px,2.4vw,24px);
  width:44px; height:44px;
}
.lightbox__nav{
  top:50%; transform:translateY(-50%);
  width:46px; height:46px;
}
.lightbox__nav--prev{ left:clamp(8px,3vw,30px); }
.lightbox__nav--next{ right:clamp(8px,3vw,30px); }
.lightbox__close svg,
.lightbox__nav svg{ width:18px; height:18px; }
.lightbox__count{
  position:absolute; z-index:2;
  bottom:clamp(14px,3vh,30px); left:0; right:0;
  text-align:center;
  font:500 12px/1 var(--f-display);
  letter-spacing:.14em;
  color:rgba(248,247,243,.7);
}
@media (max-width:600px){
  .lightbox__nav{ width:38px; height:38px; }
  .lightbox__img{ max-width:94vw; max-height:78vh; }
}
@media (prefers-reduced-motion:reduce){
  .lightbox__close:active,
  .lightbox__nav:active{ transform:none; }
  .lightbox__nav:active{ transform:translateY(-50%); }
}

/* ══════════════════════════════════════════════════════════════
   5.15 VIDEO PREZENTACE — tři přehrávače pod sebou
   Vzhled podle video-player komponenty (21st.dev / chetanverma16),
   přepsáno do vanilla JS (buildVideos). Tmavý „skleněný" panel
   ovládání na béžové stránce, olivový accent. Každé video má nad
   sebou velké olivové číslo (jako Portfolio) a jemnou linku.
   ══════════════════════════════════════════════════════════════ */
.videos{
  position:relative;
  z-index:6;
  padding:clamp(84px,13vh,168px) 0;
  background:var(--bg);
}
.videos__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.8vw,26px);
  align-items:start;
}
.videos__item{ width:100%; }
@media (max-width:720px){
  .videos__inner{ grid-template-columns:1fr; gap:clamp(30px,8vw,48px); }
  .videos__item{ max-width:420px; margin-inline:auto; }
}
.vplayer{
  position:relative;
  width:100%;
  margin-inline:auto;
  aspect-ratio:1 / 2;              /* jednotná svislá výška všech tří přehrávačů */
  border-radius:clamp(14px,1.6vw,20px);
  overflow:hidden;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 32px 64px -30px rgba(28,30,23,.5),
    0 12px 28px -18px rgba(28,30,23,.28);
}
.js .vplayer{ opacity:0; }
.vplayer__video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;                 /* ořízne k obsahu — pryč s pillarboxem i „zapečenými" pruhy */
  background:var(--ink);
  cursor:pointer;
}

/* Filmový přechod: spodní stín pod ovládáním + jemná vinětace za „play".
   Mizí, jakmile video běží. */
.vplayer::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,11,7,.58) 0%, rgba(10,11,7,.14) 24%, rgba(10,11,7,0) 44%),
    radial-gradient(130% 62% at 50% 42%, rgba(10,11,7,.30), rgba(10,11,7,0) 60%);
  transition:opacity .45s var(--e-soft);
}
.vplayer.is-playing::after{ opacity:0; }

@media (hover:hover) and (pointer:fine){
  .vplayer__video{ transition:transform .6s var(--e-out); }
  .vplayer:hover:not(.is-playing) .vplayer__video{ transform:scale(1.045); }
}
@media (prefers-reduced-motion:reduce){
  .vplayer:hover:not(.is-playing) .vplayer__video{ transform:none; }
}

/* Velké „play" uprostřed, dokud se nepřehrává */
.vplayer__big{
  position:absolute; inset:0; margin:auto;
  z-index:2;
  width:clamp(56px,6.4vw,70px); height:clamp(56px,6.4vw,70px);
  display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
  color:#fff;
  cursor:pointer;
  transition:transform var(--t-mid) var(--e-out), background-color var(--t-mid) var(--e-soft), opacity var(--t-mid) var(--e-soft);
}
.vplayer__big svg{ width:42%; height:42%; margin-left:6%; filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.vplayer__big:hover{ transform:scale(1.06); background:rgba(255,255,255,.24); }
.vplayer.is-playing .vplayer__big{ opacity:0; transform:scale(.8); pointer-events:none; }

/* Panel ovládání */
.vplayer__controls{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  max-width:560px;
  margin:clamp(8px,1.4vw,14px) auto;
  padding:clamp(10px,1.5vw,15px) clamp(12px,1.8vw,18px);
  background:rgba(13,14,9,.52);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
          backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  color:var(--cream);
}
@media (hover:hover) and (pointer:fine){
  .vplayer__controls{
    opacity:0; transform:translateY(12px);
    pointer-events:none;
    transition:opacity .4s var(--e-soft), transform .5s var(--e-out), filter .4s var(--e-soft);
    filter:blur(6px);
  }
  .vplayer:hover .vplayer__controls,
  .vplayer:focus-within .vplayer__controls{
    opacity:1; transform:none; filter:blur(0); pointer-events:auto;
  }
}
.vplayer__scrub{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.vplayer__time{
  font:500 11px/1 var(--f-display);
  font-variant-numeric:tabular-nums;
  color:rgba(248,247,243,.75);
  min-width:32px;
}
.vplayer__time--dur{ text-align:right; }
.vplayer__bar{
  position:relative; flex:1;
  height:4px; border-radius:2px;
  background:rgba(248,247,243,.22);
  cursor:pointer;
  transition:height var(--t-fast) var(--e-out);
}
.vplayer__bar:hover{ height:6px; }
.vplayer__bar:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }
.vplayer__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  border-radius:2px;
  background:var(--cream);
}
.vplayer__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.vplayer__left{ display:flex; align-items:center; gap:6px; }
.vplayer__btn{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border:0; border-radius:8px;
  background:transparent;
  color:var(--cream);
  cursor:pointer;
  transition:background-color var(--t-mid) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.vplayer__btn svg{ width:18px; height:18px; }
.vplayer__btn:hover{ background:rgba(248,247,243,.14); }
.vplayer__btn:active{ transform:scale(.9); }
.vplayer__i-pause,
.vplayer__i-muted{ display:none; }
.vplayer.is-playing .vplayer__i-play{ display:none; }
.vplayer.is-playing .vplayer__i-pause{ display:block; }
.vplayer.is-muted .vplayer__i-vol{ display:none; }
.vplayer.is-muted .vplayer__i-muted{ display:block; }
.vplayer__vol{
  position:relative;
  width:84px; height:4px;
  border-radius:2px;
  background:rgba(248,247,243,.22);
  cursor:pointer;
}
.vplayer__vol:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }
.vplayer__vol-fill{
  position:absolute; left:0; top:0; bottom:0;
  width:100%;
  border-radius:2px;
  background:var(--cream);
}
.vplayer__speeds{ display:flex; gap:2px; }
.vplayer__speeds button{
  padding:5px 7px;
  font:500 11px/1 var(--f-display);
  color:rgba(248,247,243,.7);
  background:transparent;
  border:0; border-radius:7px;
  cursor:pointer;
  transition:background-color var(--t-mid) var(--e-soft), color var(--t-mid) var(--e-soft);
}
.vplayer__speeds button:hover{ color:var(--cream); }
.vplayer__speeds button.is-active{ background:rgba(248,247,243,.16); color:var(--cream); }

@media (max-width:600px){
  .vplayer__controls{ max-width:none; }
  .vplayer__vol{ width:56px; }
  .vplayer__speeds button{ padding:5px 5px; }
  .vplayer__left{ gap:3px; }
}
/* tři přehrávače v řadě jsou úzké — ovládání zkompaktnit i mimo mobil */
@media (min-width:721px){
  .vplayer__controls{ padding:10px 10px; }
  .vplayer__vol{ width:52px; }
  .vplayer__speeds button{ padding:5px 4px; letter-spacing:-.02em; }
  .vplayer__left{ gap:2px; }
  .vplayer__scrub{ gap:6px; }
  .vplayer__time{ min-width:28px; font-size:10px; }
}

/* ══════════════════════════════════════════════════════════════
   5.13b VÝZVA K AKCI — kompaktní CTA pás mezi Portrétem a Fotogalerií
   Vychází z „CTA section" (21st.dev), přizpůsobeno paletě webu:
   vzdušný centrovaný blok, měkký olivový glow, nadpis „vyjede"
   zpod masky, tlačítko je sdílené .flow-btn (jako kontakt/patička).
   ══════════════════════════════════════════════════════════════ */
.cta{
  position:relative;
  z-index:6;
  padding:clamp(76px,13vh,150px) 0;
  background:var(--bg);
  overflow:hidden;
}
.cta::before,
.cta::after{
  content:"";
  position:absolute; left:50%;
  width:min(560px,80vw); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(28,30,23,.14), transparent);
}
.cta::before{ top:0; }
.cta::after{ bottom:0; }
.cta__inner{
  position:relative;
  max-width:660px;
  margin:0 auto;
  padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,2.4vw,26px);
  text-align:center;
}
.cta__glow{
  position:absolute; z-index:-1;
  left:50%; top:46%;
  width:min(760px,94vw); height:min(360px,54vw);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(58% 58% at 50% 50%,
    rgba(139,154,107,.22) 0%, rgba(139,154,107,0) 70%);
  filter:blur(46px);
  pointer-events:none;
}
.cta__accent{
  width:46px; height:2px;
  border-radius:2px;
  background:var(--olive);
  transform-origin:center;
}
.cta__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.9rem,5vw,3.3rem);
  line-height:1.05;
  letter-spacing:-.026em;
  color:var(--ink);
  text-wrap:balance;
}
.cta__title .ln{
  display:block; overflow:hidden;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.cta__lead{
  max-width:44ch;
  font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.65;
  color:var(--ink-soft);
}
.js .cta__lead{ opacity:0; }
.cta__btn{ margin-top:clamp(4px,1vw,10px); }
.js .cta__btn{ opacity:0; }


   Přizpůsobeno paletě webu. Obří světlé číslo bleeduje vlevo (parallax
   na myš, blur-in přechod), vlevo svislý label „Reference" + progress
   linka, uprostřed badge + citace (reveal po slovech) + autor
   s narůstající linkou + kruhová navigace se sunoucí výplní. Dole
   Auto-přepínání po 6 s.
   ══════════════════════════════════════════════════════════════ */
.testi{
  position:relative;
  z-index:6;
  padding:clamp(96px,15vh,180px) 0;
  background:var(--bg);
  overflow:hidden;
}
.testi__stage{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  padding:0 var(--pad);
}
.testi__index{
  --px:0; --py:0;
  position:absolute;
  left:clamp(-32px,-2vw,-6px);
  top:50%;
  transform:translate(calc(var(--px) * 1px), calc(-50% + var(--py) * 1px));
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(9rem,26vw,22rem);
  line-height:.8;
  letter-spacing:-.05em;
  color:rgba(28,30,23,.045);
  pointer-events:none;
  user-select:none;
  z-index:0;
  will-change:transform,filter;
}
.testi__main{
  position:relative;
  z-index:1;
  display:flex;
}
.testi__aside{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding-right:clamp(24px,4vw,60px);
  border-right:1px solid rgba(28,30,23,.14);
}
.testi__vlabel{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font:500 11px var(--f-display);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.testi__progress{
  position:relative;
  width:1px; height:clamp(80px,14vh,128px);
  margin-top:clamp(18px,3vw,30px);
  background:rgba(28,30,23,.16);
}
.testi__progress-fill{
  position:absolute; top:0; left:0;
  width:100%; height:0;
  background:var(--ink);
}
.testi__content{
  flex:1;
  min-width:0;
  padding-left:clamp(26px,5vw,60px);
  padding-block:clamp(24px,4vw,48px);
}
.testi__badge{
  display:block;
  margin-bottom:clamp(20px,3vw,32px);
}
.testi__badge-logo{
  display:block;
  height:clamp(20px,2.3vw,26px);
  width:auto;
  max-width:min(64vw,210px);
  object-fit:contain;
  object-position:left center;
}
/* čtvercové znaky (např. AC Sparta) nechat větší, ať mají podobnou
   optickou váhu jako široký wordmark Škody */
.testi__badge-logo[src*="ac-sparta"]{
  height:clamp(40px,4.6vw,52px);
}
.testi__badge-logo[src*="playzone"]{   /* roundel + wordmark — vyšší, ať je kolečko čitelné */
  height:clamp(32px,3.6vw,42px);
}
.testi__badge-logo[src*="mongagua"]{   /* barevný znak (postava + míč) — vyšší jako čtvercové marky */
  height:clamp(38px,4.4vw,50px);
}
.testi__badge-logo[src*="hc-sparta"]{   /* čtvercový klubový znak — vyšší jako ostatní čtvercové marky */
  height:clamp(38px,4.4vw,50px);
}
.testi__quote{
  margin:0 0 clamp(28px,4vw,44px);
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink);
}
.testi__quote span{ display:inline-block; will-change:transform; }
.testi__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.testi__author{ display:flex; align-items:center; gap:14px; }
.testi__author-line{
  width:32px; height:1px; flex:none;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left;
}
.testi__author-name{
  font:500 15px var(--f-display);
  color:var(--ink);
}
.testi__author-role{
  margin-top:2px;
  font-size:13px;
  color:var(--ink-soft);
}
.testi__nav{ display:flex; gap:10px; }
.testi__nav-btn{
  position:relative;
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgba(28,30,23,.22);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--t-fast) var(--e-out);
}
.testi__nav-btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ink);
  transition:transform .38s var(--e-out);
}
.testi__prev::before{ transform:translateX(-101%); }
.testi__next::before{ transform:translateX(101%); }
.testi__nav-btn:hover::before{ transform:translateX(0); }
.testi__nav-btn:active{ transform:scale(.94); }
.testi__nav-btn svg{
  position:relative; z-index:1;
  width:17px; height:17px;
  transition:color var(--t-mid) var(--e-soft);
}
.testi__nav-btn:hover svg{ color:var(--cream); }

.js .testi__quote,
.js .testi__badge,
.js .testi__author{ opacity:0; }

@media (max-width:760px){
  .testi__aside{ display:none; }
  .testi__content{ padding-left:0; }
  .testi__index{ font-size:clamp(7rem,30vw,12rem); left:-14px; }
  .testi__foot{ flex-direction:column; align-items:flex-start; gap:22px; }
}

/* ══════════════════════════════════════════════════════════════
   5.17 KONTAKT — formulář (contact-card, 21st.dev)
   Přizpůsobeno paletě webu. Ostrá karta s „+" v rozích, vlevo text
   + kontaktní údaje, vpravo formulář na jemně odlišeném podkladu.
   Bez backendu: JS sestaví mailto (fallback action="mailto:").
   ══════════════════════════════════════════════════════════════ */
.contact{
  position:relative;
  z-index:6;
  padding:clamp(84px,13vh,168px) 0 clamp(96px,15vh,180px);
  background:var(--bg);
}
.contact__inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 var(--pad);
}
.contact__card{
  position:relative;
  display:grid;
  grid-template-columns:1.45fr 1fr;
  background:var(--cream);
  border:1px solid rgba(28,30,23,.16);
  box-shadow:
    0 40px 90px -34px rgba(28,30,23,.34),
    0 12px 30px -16px rgba(28,30,23,.22);
}
.js .contact__card{ opacity:0; }
/* Světlo sledující kurzor po kartě (jemné, nepřekáží psaní). */
.contact__glow{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(79,93,58,.07), rgba(79,93,58,0) 60%);
  opacity:0;
  transition:opacity .5s var(--e-soft);
}
.contact__card:hover .contact__glow{ opacity:1; }
.contact__intro,
.contact__form-wrap{ position:relative; z-index:1; }
.contact__plus{
  position:absolute;
  width:22px; height:22px;
  color:var(--olive);
  pointer-events:none;
}
.js .contact__plus{ opacity:0; }
.contact__plus svg{ width:100%; height:100%; display:block; }
.contact__plus--tl{ top:-11px; left:-11px; }
.contact__plus--tr{ top:-11px; right:-11px; }
.contact__plus--bl{ bottom:-11px; left:-11px; }
.contact__plus--br{ bottom:-11px; right:-11px; }

.contact__intro{
  padding:clamp(26px,4vw,52px);
}
.contact__title{
  overflow:hidden;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.06;
  letter-spacing:-.024em;
  color:var(--ink);
}
.contact__title span{ display:block; will-change:transform; }
.js .contact__title span{ transform:translate3d(0,120%,0); }
.contact__lead{
  margin-top:clamp(12px,1.6vw,18px);
  max-width:44ch;
  font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.65;
  color:var(--ink-soft);
}
.contact__info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(6px,1vw,14px);
  margin-top:clamp(24px,3.6vw,40px);
}
.contact__item{
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
}
.contact__item--wide{ grid-column:1 / -1; }
.contact__ico{
  flex:none;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(28,30,23,.05);
  color:var(--olive);
}
.contact__ico svg{ width:18px; height:18px; }

/* Telefon (Heroicons phone) — při hoveru / focusu na položku sluchátko
   „zazvoní" (rychlý shake). Gatováno reduced-motion. */
.contact__ico--phone svg{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .contact__item:hover .contact__ico--phone svg,
  .contact__item:focus-within .contact__ico--phone svg{ animation:contact-ring .6s ease-in-out; }
}
@keyframes contact-ring{
  0%{ transform:rotate(0); }
  14%{ transform:rotate(-10deg); }
  28%{ transform:rotate(10deg); }
  43%{ transform:rotate(-10deg); }
  57%{ transform:rotate(10deg); }
  71%{ transform:rotate(-5deg); }
  86%{ transform:rotate(5deg); }
  100%{ transform:rotate(0); }
}

/* E-mail (Lucide mail) — při hoveru / focusu na položku se obálka
   „otevře": chlopeň se nakreslí a ikona lehce poskočí. Gatováno
   reduced-motion. */
.contact__ico--mail svg{ transform-box:fill-box; transform-origin:center; }
.contact__ico--mail svg .mail-flap{ stroke-dasharray:24; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .contact__item:hover .contact__ico--mail svg,
  .contact__item:focus-within .contact__ico--mail svg{ animation:mail-pop .5s ease-out; }
  .contact__item:hover .contact__ico--mail svg .mail-flap,
  .contact__item:focus-within .contact__ico--mail svg .mail-flap{ animation:mail-flap .35s ease-out .22s both; }
}
@keyframes mail-pop{ 0%{ transform:scale(.85); } 55%{ transform:scale(1.06); } 80%{ transform:scale(.98); } 100%{ transform:scale(1); } }
@keyframes mail-flap{ from{ stroke-dashoffset:24; opacity:0; } to{ stroke-dashoffset:0; opacity:1; } }

/* Působnost (map-marker-alt) — při hoveru / focusu na položku špendlík
   „dopadne" od hrotu a tečka uvnitř vyskočí. Gatováno reduced-motion. */
.contact__ico--pin svg .pin-body{ transform-box:fill-box; transform-origin:bottom; }
.contact__ico--pin svg .pin-dot{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .contact__item:hover .contact__ico--pin svg .pin-body,
  .contact__item:focus-within .contact__ico--pin svg .pin-body{ animation:pin-drop .4s cubic-bezier(.34,1.5,.64,1); }
  .contact__item:hover .contact__ico--pin svg .pin-dot,
  .contact__item:focus-within .contact__ico--pin svg .pin-dot{ animation:pin-pop .2s ease-out .4s both; }
}
@keyframes pin-drop{ 0%{ transform:scale(.35); } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
@keyframes pin-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* Footer Facebook (Lucide facebook) — při hoveru / :focus-visible se
   obrys „nakreslí" a ikona pružně poskočí. Gatováno reduced-motion. */
.footer__social a[aria-label="Facebook"] svg{ transform-box:fill-box; transform-origin:center; overflow:visible; }
.footer__social a[aria-label="Facebook"] svg .fb-path{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .footer__social a[aria-label="Facebook"]:hover svg,
  .footer__social a[aria-label="Facebook"]:focus-visible svg{ animation:fb-pop .9s ease-out; }
  .footer__social a[aria-label="Facebook"]:hover svg .fb-path,
  .footer__social a[aria-label="Facebook"]:focus-visible svg .fb-path{ animation:fb-draw .8s ease-in-out; }
}
@keyframes fb-pop{
  0%{ transform:scale(1) rotate(0); }
  33%{ transform:scale(1.15) rotate(-4deg); }
  66%{ transform:scale(.92) rotate(4deg); }
  100%{ transform:scale(1) rotate(0); }
}
@keyframes fb-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Footer Instagram (Lucide instagram) — při hoveru / :focus-visible se
   všechny tři části obrysu naráz „nakreslí". Gatováno reduced-motion. */
.footer__social a[aria-label="Instagram"] svg rect,
.footer__social a[aria-label="Instagram"] svg path,
.footer__social a[aria-label="Instagram"] svg line{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .footer__social a[aria-label="Instagram"]:hover svg rect,
  .footer__social a[aria-label="Instagram"]:hover svg path,
  .footer__social a[aria-label="Instagram"]:hover svg line,
  .footer__social a[aria-label="Instagram"]:focus-visible svg rect,
  .footer__social a[aria-label="Instagram"]:focus-visible svg path,
  .footer__social a[aria-label="Instagram"]:focus-visible svg line{ animation:ig-trace .6s linear; }
}
@keyframes ig-trace{ from{ stroke-dashoffset:1; opacity:0; } 20%{ opacity:1; } to{ stroke-dashoffset:0; opacity:1; } }
.contact__item-label{
  font:500 13.5px/1.3 var(--f-display);
  color:var(--ink);
}
.contact__item-value{
  margin-top:2px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.contact__item-value a{
  color:inherit;
  text-decoration:none;
  transition:color var(--t-mid) var(--e-soft);
}
.contact__item-value a:hover{ color:var(--olive); }

.contact__form-wrap{
  display:flex; align-items:center;
  padding:clamp(24px,3.6vw,44px);
  background:rgba(28,30,23,.035);
  border-left:1px solid rgba(28,30,23,.16);
}
.contact__form{
  width:100%;
  display:grid;
  gap:clamp(13px,1.7vw,18px);
}
.contact__field{
  position:relative;
  margin:0;
  display:grid;
  gap:7px;
}
/* Podtržení, které se „nakreslí" při fokusu (i chybě). */
.contact__field::after{
  content:"";
  position:absolute; left:1px; right:1px; bottom:0;
  height:2px; border-radius:2px;
  background:var(--olive);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-out), background-color .3s var(--e-soft);
  pointer-events:none;
}
.contact__field:focus-within::after{ transform:scaleX(1); }
.contact__field:has(.is-invalid)::after{ background:#b3402f; transform:scaleX(1); }
.contact__field label{
  font:500 11px var(--f-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--t-mid) var(--e-soft), letter-spacing var(--t-mid) var(--e-soft);
}
.contact__field:focus-within label{ color:var(--olive); letter-spacing:.11em; }
.contact__opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.contact__field input,
.contact__field textarea{
  width:100%;
  padding:11px 13px;
  font:400 14px var(--f-body);
  color:var(--ink);
  background:var(--cream);
  border:1px solid rgba(28,30,23,.22);
  border-radius:8px;
  transition:border-color var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-soft);
}
.contact__field textarea{
  resize:vertical;
  min-height:96px;
  line-height:1.55;
}
.contact__field input:focus-visible,
.contact__field textarea:focus-visible{
  outline:none;
  border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(79,93,58,.14);
}
.contact__field input.is-invalid,
.contact__field textarea.is-invalid{
  border-color:#b3402f;
  box-shadow:0 0 0 3px rgba(179,64,47,.12);
}
.contact__hp{
  position:absolute !important;
  left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
/* „Flow" tlačítko (flow-button, 21st.dev): pilulka s obrysem →
   při najetí z ní vyroste olivový kruh, text posune, jedna šipka
   odjede vpravo a druhá přijede zleva, rohy se stáhnou na 12 px.
   Sdílený základ pro kontaktní formulář i patičku. */
.flow-btn{
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 26px;
  font:600 12px var(--f-display);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1.5px solid rgba(28,30,23,.4);
  border-radius:100px;
  cursor:pointer;
  transition:color .6s cubic-bezier(.23,1,.32,1),
             border-color .6s cubic-bezier(.23,1,.32,1),
             border-radius .6s cubic-bezier(.23,1,.32,1),
             transform var(--t-fast) var(--e-out);
}
.flow-btn:hover{
  color:var(--cream);
  border-color:transparent;
  border-radius:12px;
}
.flow-btn:active{ transform:scale(.95); }
.flow-btn[disabled]{ opacity:.6; cursor:default; }

.contact__submit{ width:100%; }

.flow-btn__txt{
  position:relative; z-index:1;
  transform:translateX(-11px);
  transition:transform .8s ease;
}
.flow-btn:hover .flow-btn__txt{ transform:translateX(11px); }

.flow-btn__arr{
  position:absolute;
  width:15px; height:15px;
  z-index:9;
  color:var(--ink);
  transition:left .8s cubic-bezier(.34,1.56,.64,1),
             right .8s cubic-bezier(.34,1.56,.64,1),
             color .8s cubic-bezier(.34,1.56,.64,1);
}
.flow-btn__arr--l{ left:-25%; }
.flow-btn__arr--r{ right:16px; }
.flow-btn:hover .flow-btn__arr--l{ left:16px; color:var(--cream); }
.flow-btn:hover .flow-btn__arr--r{ right:-25%; color:var(--cream); }

.flow-btn__circle{
  position:absolute; top:50%; left:50%;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--olive);
  opacity:0;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .8s cubic-bezier(.19,1,.22,1), opacity .8s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.flow-btn:hover .flow-btn__circle{
  opacity:1;
  transform:translate(-50%,-50%) scale(30);
}

/* Stav po odeslání — olivová výplň + fajfka + jedno „lupnutí" */
.flow-btn__check{
  position:relative; z-index:1;
  width:15px; height:15px;
  display:none;
}
.flow-btn.is-sent{
  color:var(--cream);
  background:var(--olive);
  border-color:transparent;
  border-radius:12px;
  animation:contact-pulse .55s var(--e-out);
}
.flow-btn.is-sent .flow-btn__arr{ opacity:0; }
.flow-btn.is-sent .flow-btn__txt{ transform:none; }
.flow-btn.is-sent .flow-btn__check{ display:block; }
@keyframes contact-pulse{
  0%   { box-shadow:0 0 0 0 rgba(79,93,58,.45); }
  100% { box-shadow:0 0 0 16px rgba(79,93,58,0); }
}
.contact__note{
  margin:0;
  min-height:1.2em;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s var(--e-soft), transform .35s var(--e-out);
}
.contact__note.is-shown{ opacity:1; transform:none; }
.contact__note.is-ok{ color:var(--olive); }
.contact__note.is-err{ color:#b3402f; }
.contact__consent{
  margin:2px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
.contact__consent a{
  color:var(--olive);
  text-decoration:underline;
  text-underline-offset:2px;
}
.js .contact__consent{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .flow-btn,
  .flow-btn__txt,
  .flow-btn__arr,
  .flow-btn__circle{ transition-duration:.001ms; }
  .flow-btn.is-sent{ animation:none; }
  .contact__field::after{ transition:none; }
  .flow-btn:hover{ background:var(--olive); }
  .flow-btn:hover .flow-btn__circle{ opacity:0; }
}

@media (max-width:900px){
  .contact__card{ grid-template-columns:1fr; }
  .contact__form-wrap{
    border-left:0;
    border-top:1px solid rgba(28,30,23,.16);
  }
}
@media (max-width:520px){
  .contact__info{ grid-template-columns:1fr; }
  .contact__item--wide{ grid-column:auto; }
}

/* ══════════════════════════════════════════════════════════════
   5.18 PATIČKA — footer-section (21st.dev), tmavá, 4 sloupce
   ══════════════════════════════════════════════════════════════ */
.footer{
  position:relative;
  z-index:6;
  background:var(--ink);
  color:var(--cream);
  padding:clamp(56px,9vh,100px) 0 clamp(26px,4vh,40px);
}
.footer__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(30px,4vw,56px);
}
.footer__col{ position:relative; min-width:0; }
.footer__glow{
  position:absolute; right:-8px; top:-14px;
  width:120px; height:120px;
  border-radius:50%;
  background:rgba(139,154,107,.2);
  filter:blur(44px);
  pointer-events:none;
}
.footer__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  letter-spacing:-.02em;
  margin-bottom:clamp(10px,1.4vw,16px);
}
.footer__lead{
  max-width:34ch;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(248,247,243,.55);
  margin-bottom:clamp(16px,2vw,22px);
}
.footer__head{
  font:600 13px/1 var(--f-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(248,247,243,.5);
  margin-bottom:clamp(14px,1.8vw,20px);
}
.footer__news{ display:flex; flex-direction:column; gap:10px; max-width:340px; }
.footer__news input{
  width:100%;
  padding:11px 16px;
  font:400 13.5px var(--f-body);
  color:var(--cream);
  background:rgba(248,247,243,.06);
  border:1px solid rgba(248,247,243,.16);
  border-radius:100px;
  transition:border-color var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-soft);
}
.footer__news input::placeholder{ color:rgba(248,247,243,.4); }
.footer__news input:focus-visible{
  outline:none;
  border-color:var(--olive-lt);
  box-shadow:0 0 0 3px rgba(139,154,107,.2);
}
.footer__news input.is-invalid{
  border-color:#c9553f;
  box-shadow:0 0 0 3px rgba(201,85,63,.18);
}
/* CTA v patičce = stejné „flow" tlačítko jako v kontaktu, na tmavém podkladu */
.footer__send{ width:100%; color:var(--cream); border-color:rgba(248,247,243,.32); }
.footer__send .flow-btn__arr{ color:var(--cream); }

.footer__links a{
  display:block;
  padding:5px 0;
  font-size:13.5px;
  color:rgba(248,247,243,.62);
  text-decoration:none;
  transition:color var(--t-mid) var(--e-soft), padding-left var(--t-mid) var(--e-out);
}
.footer__links a:hover{ color:var(--cream); padding-left:5px; }

.footer__addr{
  font-style:normal;
  font-size:13.5px;
  line-height:2;
  color:rgba(248,247,243,.62);
}
.footer__addr a{
  color:inherit; text-decoration:none;
  transition:color var(--t-mid) var(--e-soft);
}
.footer__addr a:hover{ color:var(--cream); }

.footer__social{ display:flex; gap:10px; }
.footer__social a{
  position:relative;
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid rgba(248,247,243,.2);
  border-radius:50%;
  color:var(--cream);
  transition:background-color var(--t-mid) var(--e-soft), border-color var(--t-mid) var(--e-soft), transform var(--t-mid) var(--e-out);
}
.footer__social a svg{ width:16px; height:16px; }
.footer__social a:hover{
  background:var(--olive);
  border-color:transparent;
  transform:translateY(-2px);
}
.footer__social a::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:4px 9px;
  background:var(--cream); color:var(--ink);
  font:500 10.5px var(--f-display);
  letter-spacing:.04em;
  border-radius:6px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid) var(--e-soft), transform var(--t-mid) var(--e-out);
}
.footer__social a:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

.footer__bottom{
  margin-top:clamp(38px,5vw,64px);
  padding-top:clamp(18px,2.6vw,26px);
  border-top:1px solid rgba(248,247,243,.12);
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:12px;
}
.footer__copy{ font-size:12px; color:rgba(248,247,243,.45); }
.footer__credit{ font-size:12px; color:rgba(248,247,243,.45); }
.footer__credit a{
  color:rgba(248,247,243,.7);
  text-decoration:none;
  border-bottom:1px solid rgba(248,247,243,.22);
  transition:color var(--t-mid) var(--e-soft), border-color var(--t-mid) var(--e-soft);
}
.footer__credit a:hover{ color:var(--cream); border-color:var(--cream); }
.footer__legal{ display:flex; gap:16px; }
.footer__legal a{
  font-size:12px;
  color:rgba(248,247,243,.45);
  text-decoration:none;
  transition:color var(--t-mid) var(--e-soft);
}
.footer__legal a:hover{ color:var(--cream); }

.js .footer__col{ opacity:0; }

@media (max-width:900px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; gap:clamp(26px,7vw,38px); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

@media (min-width:1280px){
  .rail{ display:block; }

  /* Jakmile je lišta na scéně, rezervujeme jí vlevo místo. Šířka lišty
     (clamp 190–240) + její odsazení (clamp 14–22) + pohodlná mezera. */
  :root{ --rail-space:clamp(292px,21vw,322px); }

  /* O mně + Média + Portfolio + portrét + video + výzva + reference — obsah začíná za lištou */
  .about__inner,
  .media__inner,
  .services__inner,
  .portrait__inner,
  .videos__inner,
  .cta__inner,
  .testi__stage,
  .contact__inner,
  .footer__inner{
    max-width:1440px;
    padding-left:var(--rail-space);
  }

  /* Obří číslo v Referencích bleeduje jen za levý okraj OBSAHU, ne přes
     lištu — jinak by se schovávalo za panely lišty. */
  .testi__index{ left:calc(var(--rail-space) - clamp(10px,1.4vw,22px)); }

  /* Pás log — vlevo přisvícený úsek pod lištou schová maska;
     první plné logo je až za --rail-space. Vpravo pás dál „vytéká". */
  .brands__marquee{
    --brands-mask-l:calc(var(--rail-space) - 12px);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0, transparent var(--brands-mask-l),
      #000 calc(var(--brands-mask-l) + 64px), #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg,
      transparent 0, transparent var(--brands-mask-l),
      #000 calc(var(--brands-mask-l) + 64px), #000 92%, transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   6. Responzivita
   ══════════════════════════════════════════════════════════════ */

/* ── Notebooky / menší desktopy ───────────────────────────────── */
@media (max-width:1180px){
  .cards-left{ right:auto; left:var(--pad); top:56%; justify-items:start; }
  .card--tall{ margin-right:0; margin-left:clamp(18px,2.4vw,34px); }
  .card--traits{ left:auto; right:var(--pad); top:min(54%, calc(100% - 380px)); }
}

/* ── Mobil / úzký tablet (≤ 980 px) ──────────────────────────────
   Hero přesně podle mobilní reference (heynesh): horní lišta
   (značka + CTA + menu), obří wordmark za fotkou, fotka přes celou
   plochu, karty plovou přes fotku (vlastnosti vlevo, „8+" vpravo),
   headline dole přes fotku, karta „150+" vlevo dole. Vše absolutně
   v jedné obrazovce — žádné skládání pod sebe. */
@media (max-width:980px){
  .hero{ height:auto; }
  .hero__sticky{
    position:relative;
    display:block;
    height:100svh;
    min-height:600px;
    max-height:940px;
    padding:0;
    overflow:hidden;
  }
  .hero__aurora{ filter:blur(34px); animation-duration:30s; }

  /* Fotka — plná vrstva pod obsahem */
  .hero__photo-layer{
    position:absolute;
    left:0; right:0;
    top:clamp(88px,17.5vh,142px);
    bottom:0;
    margin:0;
    aspect-ratio:auto;
    z-index:var(--z-photo);
  }
  .hero__photo{
    height:100%; width:100%;
    object-fit:cover;
    object-position:top center;
  }
  .hero__photo-layer::after{
    background:linear-gradient(to top,
      rgba(24,26,20,.6) 0%,
      rgba(24,26,20,.32) 26%,
      rgba(24,26,20,.05) 52%,
      transparent 70%);
  }

  /* Horní lišta */
  .hero__top{ position:static; display:block; }
  .hero__nav{ display:none; }
  .hero__brand{ display:contents; }   /* wrapper nesmí rozbít absolutní pozici wordmarku */
  /* „FILIP" — stejný holý text jako na desktopu (žádná bublina),
     jen samostatně pozicovaný v úrovni horní lišty (na desktopu sedí
     v běžném toku přímo nad wordmarkem, na mobilu wordmark i lišta
     jedou na position:absolute, takže potřebuje vlastní souřadnice). */
  .hero__brand-pre{
    display:block;
    position:absolute;
    left:var(--pad);
    top:calc(env(safe-area-inset-top) + 28px);  /* +19px ≈ 0,5cm doladění na přání */
    z-index:var(--z-nav);
  }
  .hero__bar{
    display:flex; align-items:center; gap:8px;
    position:absolute;
    left:var(--pad); right:var(--pad);
    top:calc(env(safe-area-inset-top) + 12px);
    z-index:var(--z-nav);
  }
  .hero__bar-brand{ display:none; }   /* nahrazeno .hero__brand-pre, viz výš */
  .hero__bar-cta{
    margin-left:auto; flex:none;
    padding:11px 17px;
    font:600 12px/1 var(--f-display);
    letter-spacing:.05em; text-transform:uppercase;
    color:var(--cream); background:var(--olive);
    border-radius:12px; text-decoration:none;
    transition:background-color var(--t-mid) var(--e-soft);
  }
  .hero__bar-cta:active{ background:var(--olive-dk); }
  .hero__bar-menu{
    flex:none;
    width:42px; height:40px;
    display:grid; place-items:center;
    color:var(--ink); background:var(--cream);
    border:1px solid rgba(28,30,23,.14);
    border-radius:12px; cursor:pointer;
  }
  .hero__bar-menu svg{ width:17px; height:17px; }

  /* Wordmark za fotkou (jen horní část vykoukne). Sjednoceno
     s desktopem (viz @media min-width:981px výš) — stejný poměr
     prostoru pro háček (.205×wm-size) i line-height:1 místo starého
     .76, ať je krok písma na mobilu i desktopu vizuálně stejný,
     jen o kousek výš, ať to působí sevřeněji/prémiověji. */
  .wordmark{
    position:absolute;
    left:var(--pad); right:var(--pad);
    top:clamp(28px,7.5vh,68px);
    z-index:var(--z-wordmark);
    color:var(--olive);
    line-height:1;
    padding-top:calc(var(--wm-size, 25vw) * .205);
  }

  /* Plovoucí karty — děti pozicujeme samostatně, wrappery rozpustíme */
  .hero__cards{ position:static; display:block; margin:0; inset:auto; }
  .cards-left{ display:contents; }

  /* Styl a schodovité rozmístění podle heynesh.com/ (mobilní hero):
     jednosloupcová traits karta + menší stat karta, mírně posazené
     do schodů. Na heynesh.com jsou vedle sebe vlevo/vpravo, ale
     Filipova fotka má obličej posazený jinak (víc doleva/doprostřed)
     — vlevo by traits karta zajela přes oči. Obě karty proto zůstávají
     na pravé straně, kde je fotka bez obličeje i bez gestikulující
     ruky (viz .card--tall komentář výš v souboru), jen naskládané
     schodovitě pod sebou stejně jako v referenci. */
  /* Posazená těsně nad traits kartu (níž, viz .card--traits) —
     spodek cca 0,5cm (19px) nad jejím vrškem; -64px ≈ vlastní
     výška téhle karty. */
  .card--tall{
    position:absolute;
    right:var(--pad); left:auto;
    top:calc(clamp(360px,45vh,420px) - 64px);
    margin:0;
    z-index:var(--z-cards);
    width:min(34vw,130px);
    padding:clamp(11px,3vw,15px);
  }

  /* Traits karta samostatně, v úrovni srdce postavy — pod rameny,
     nad headline blokem, mimo obličej i gestikulující ruku. */
  .card--traits{
    position:absolute;
    right:var(--pad); left:auto;
    top:calc(clamp(360px,45vh,420px) + 19px);  /* +19px ≈ 0,5cm doladění na přání */
    z-index:var(--z-cards);
    width:min(37vw,140px);
    padding:clamp(11px,3vw,15px);
  }
  .card--traits ul{ grid-template-columns:1fr; gap:clamp(6px,1.6vw,9px); }
  .card--traits li{ font-size:clamp(11px,2.9vw,12.5px); gap:7px; }
  .card--traits svg{ width:11px; height:11px; }

  .card--wide{
    position:absolute;
    left:var(--pad);
    bottom:calc(env(safe-area-inset-bottom) + 16px);
    z-index:var(--z-cards);
    max-width:min(66vw,262px);
  }

  /* Headline přes fotku, dolní třetina */
  .hero__center{
    position:absolute;
    left:var(--pad); right:var(--pad);
    bottom:clamp(104px,19vh,166px);
    z-index:var(--z-copy);
    display:block;
    justify-self:stretch; justify-items:start;
    align-self:auto;
    max-width:none;
    padding:0;
    text-align:left;
  }
  .hero__center::before{ display:none; }
  .hero__headline{
    color:var(--cream);
    text-shadow:0 2px 22px rgba(24,26,20,.45);
    font-size:clamp(2rem,9vw,3rem);
  }
  .hero__cta{ display:none; }        /* CTA je v horní liště (jako na referenci) */
  .hero__bottom{ display:none; }     /* referenční mobilní layout podpisy nemá */

  /* Karty: tmavé sklo na fotce */
  .card{
    background:rgba(16,18,12,.44);
    border-color:rgba(248,247,243,.16);
    color:var(--cream);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
            backdrop-filter:blur(14px) saturate(1.1);
    box-shadow:0 14px 36px -20px rgba(0,0,0,.55);
  }
  .card__txt strong{ color:var(--cream); }
  .card__txt span{ opacity:.82; }
}

/* Mobilní menu (overlay z hero lišty) */
.mnav{
  position:fixed; inset:0;
  z-index:300;
  background:var(--bg);
  opacity:0;
  transition:opacity .28s var(--e-soft);
}
.mnav[hidden]{ display:none; }
.mnav.is-open{ opacity:1; }
.mnav__panel{
  height:100%;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 16px) var(--pad) calc(env(safe-area-inset-bottom) + 24px);
}
.mnav__close{
  align-self:flex-end;
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--ink);
  background:var(--cream);
  border:1px solid rgba(28,30,23,.14);
  border-radius:12px;
  cursor:pointer;
}
.mnav__close svg{ width:20px; height:20px; }
.mnav__links{
  margin:auto 0;
  display:flex; flex-direction:column;
  gap:clamp(4px,1.4vh,12px);
}
.mnav__links a{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2rem,11vw,3.2rem);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--ink);
  text-decoration:none;
  transition:color var(--t-mid) var(--e-soft), transform var(--t-mid) var(--e-out);
}
.mnav__links a:active{ color:var(--olive); transform:translateX(4px); }
.mnav__foot{
  display:flex; gap:22px;
  padding-top:20px;
  border-top:1px solid rgba(28,30,23,.12);
  font-size:14px;
}
.mnav__foot a{ color:var(--ink-soft); text-decoration:none; }
.mnav__foot a:active{ color:var(--olive); }
@media (min-width:981px){ .mnav{ display:none; } }

/* ── Telefony ─────────────────────────────────────────────────────
   Tablet (721–980px) má na delší popisný odstavec dost místa a
   zůstává beze změny. Na užším telefonu by ale 5 řádků textu hned
   pod CTA jen oddalovalo fotku a přidávalo skenování navíc — hero
   má zůstat úderný. Krátký podpis (.hero__kicker) zůstává, nese tu
   samou informaci v jedné větě. */
@media (max-width:720px){
  .hero__lede{ display:none; }
}

/* ── Reference na užších displejích ───────────────────────────── */
@media (max-width:600px){
  .brands{ padding:clamp(64px,12vh,110px) 0; }
  .brands__group{ gap:10px; padding-right:10px; }
  .brand{ height:72px; min-width:100px; padding:0 20px; }
  .brand img{ max-width:158px; max-height:32px; }
  .brands__row{ animation-duration:33s; }
}

/* ── O mně: jednosloupcově, fotky nahoře ─────────────────────────
   Nadpis dřív než fotky by na telefonu odsunul první vizuál moc
   nízko; pořadí v DOM (media → body) tedy necháváme, na úzkém
   gridu se fotky ocitnou nad textem samy. */
@media (max-width:900px){
  .about__inner{ grid-template-columns:1fr; gap:clamp(30px,7vw,46px); }
  .about__media{
    max-width:600px;
    perspective:none;
    gap:clamp(12px,2vw,20px);
  }
  .about__fig--a{ flex:1 1 0; }
  .about__fig--b{ flex:1 1 0; margin-left:0; margin-top:clamp(24px,7vw,56px); }
  .about__body{ transform:none; }   /* jednosloupcově bez posunu */
  .about__title{ font-size:clamp(1.55rem,6vw,2.3rem); max-width:none; }
  .about__text{ max-width:60ch; }

  /* Média: jednosloupcově — text nad panelem log */
  .media__inner{ grid-template-columns:1fr; gap:clamp(28px,7vw,40px); }
  .media__title{ font-size:clamp(1.45rem,6vw,2.2rem); max-width:none; }
  .media__text{ max-width:60ch; }
}
@media (max-width:480px){
  .about{ padding:clamp(60px,12vh,96px) 0; }
  .about__media{ gap:10px; }
  .about__fig--b{ margin-top:clamp(20px,8vw,40px); }
  /* 5 log = 2+2+1, poslední přes celou šířku */
  .media__logos{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .media__logo,
  .media__logo:nth-child(4),
  .media__logo:nth-child(5){ grid-column:auto; }
  .media__logo:nth-child(5){ grid-column:1 / -1; }
  .media__logo{ min-height:52px; }
}

/* ── Portfolio služeb: jednosloupcově, akcentová čára vlevo ──────── */
@media (max-width:860px){
  .services__item{
    grid-template-columns:auto 1fr;
    column-gap:clamp(18px,5vw,32px);
    align-items:start;
    min-height:0;
    padding:clamp(20px,4vw,32px) 0;
  }
  .services__item:nth-of-type(odd) .services__card,
  .services__item:nth-of-type(even) .services__card{
    grid-column:2;
    justify-self:stretch;
    width:100%;
    max-width:none;
    transform-origin:left center;
    padding:clamp(20px,5vw,28px);
  }
  .services__card::before{ left:-10px; right:auto; }   /* linka u všech vlevo */
  .services__num{ font-size:clamp(1.9rem,9vw,2.6rem); }
}

/* ── Landscape na nízkých displejích ──────────────────────────── */
/* Nad 980px se hero pořád připíná (position:sticky, 100svh) — na nízkém
   displeji na šířku by karty ukously moc místa. Pod 980px content plyne
   přirozeně (viz blok výše), takže tam žádný zásah není potřeba. */
@media (max-height:560px) and (min-width:981px){
  .hero__cards{ display:none; }
  .hero__center{ padding-bottom:clamp(54px,8vh,74px); }
}

/* ══════════════════════════════════════════════════════════════
   6b. MOBILNÍ PRŮCHOD (≤ 600 px)
   Záměrný průchod pro telefon: HIDE (skrýt, co na malé ploše nic
   nepřidá a jen zdrží vykreslení), SHRINK (zkrátit video + svislé
   mezery), PERF (odlehčit blur/stíny/3D). Rozvržení hero sekce se
   nemění (má vlastní přepracování ≤ 980 px).
   ══════════════════════════════════════════════════════════════ */
@media (max-width:600px){

  /* Svislé mezery sekcí — clamp(…13vh…) přidával ~200 px mrtvého
     scrollu mezi každou dvojicí sekcí. */
  .brands  { padding-top:clamp(44px,8vh,66px);  padding-bottom:clamp(44px,8vh,66px); }
  .about   { padding-top:clamp(52px,9vh,78px);  padding-bottom:clamp(52px,9vh,78px); }
  .media   { padding-bottom:clamp(96px,13vh,120px); }  /* .services se ≤600 zasouvá jen ~‑89px */
  .services{ padding-bottom:clamp(48px,8vh,72px); }
  .portrait{ padding-top:clamp(28px,5vh,44px);  padding-bottom:clamp(48px,8vh,72px); }
  .cta     { padding-top:clamp(52px,9vh,80px);  padding-bottom:clamp(52px,9vh,80px); }
  .videos  { padding-top:clamp(52px,9vh,80px);  padding-bottom:clamp(52px,9vh,80px); }
  .testi   { padding-top:clamp(52px,9vh,80px);  padding-bottom:clamp(52px,9vh,80px); }
  .contact { padding-top:clamp(52px,9vh,80px);  padding-bottom:clamp(56px,9vh,84px); }
  .footer  { padding-top:clamp(48px,8vh,68px); }

  /* ── HIDE ──────────────────────────────────────────────────
     Dekorace / ovládání, které na telefonu hlavně zatěžuje
     vykreslení nebo se špatně ovládá prstem. */
  .hero__aurora   { display:none; }                /* rozmazaný blob za full-bleed fotkou */
  .hero__photo    { filter:none; }                 /* 2vrstvý drop-shadow, na cover fotce neviditelný */
  .hero__grain    { display:none; }                /* full-screen overlay vrstva */
  .cta__glow      { display:none; }                /* blur(46px) radial, čistě dekorace */
  .testi__index   { display:none; }                /* obří vybledlé číslo, teklo z okraje */
  .contact__plus  { display:none; }                /* rohové „+" značky karty */
  .footer__glow   { display:none; }                /* 4× rozmazaný olivový blob */
  .services__card { transform:none; }              /* zbytek perspektivy — na dotyku se nehýbe */
  .vplayer__speeds{ display:none; }                /* fiddly rychlosti; zůstává play/pauza + scrub + mute */
  .vplayer__vol   { display:none; }

  /* Portfolio — menší olivové číslo, těsnější karty. */
  .services__num  { font-size:clamp(1.35rem,7vw,1.85rem); }
  .services__item { padding:clamp(15px,3.4vw,22px) 0; }
  .services__item:nth-of-type(odd) .services__card,
  .services__item:nth-of-type(even) .services__card{ padding:clamp(16px,4vw,22px); }

  /* Fotogalerie — 2 sloupce i na telefonu. */
  .gallery__matrix{ grid-template-columns:repeat(2,1fr); }
  .gallery{ padding-top:clamp(44px,8vh,64px); padding-bottom:clamp(52px,9vh,72px); }

  /* ── SHRINK: video ────────────────────────────────────────
     6 přehrávačů 1/2 pod sebou = ~31 % výšky stránky. Zrušit
     pevný poměr a zastropovat výšku; video zůstává object-fit:cover. */
  .videos__item { max-width:440px; }
  .vplayer      { aspect-ratio:auto; height:min(58vh,520px); }
  .videos__inner{ gap:clamp(18px,4vw,26px); }

  /* ── PERF ─────────────────────────────────────────────────
     Vypnout backdrop-filter (u průsvitných karet zvýšit krytí
     pozadí) a zredukovat vícevrstvé stíny na jednu vrstvu. */
  .services__card,
  .pcard{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(240,237,228,.96);
  }
  .vplayer__controls{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(13,14,9,.82);
  }
  .vplayer__big{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(255,255,255,.22);
  }
  .about__fig, .about__fig--b,
  .services, .services__card,
  .pcard, .contact__card, .vplayer{
    box-shadow:0 14px 34px -18px rgba(28,30,23,.42);
  }

  /* Patička — 4 sloupce pod sebou; těsnější rozestupy. */
  .footer__grid{ gap:clamp(20px,4vw,28px); }
  .footer__links a{ padding:4px 0; }
  /* Cíl dotyku: e-mail/telefon v patičce byly ~15 px vysoké řádky. */
  .footer__addr a{ display:inline-block; padding:3px 0; }
}

/* Nejužší telefony — akční tlačítka karty pod sebou (2 sloupce se lámaly). */
@media (max-width:360px){
  .pcard__actions{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   7.x MIKROINTERAKCE — ruční detaily „za víc peněz"
   ══════════════════════════════════════════════════════════════ */

/* ── Počítadla čísel: než JS naběhne, ať neblikne 0 (drží finální
   hodnotu z HTML; JS si ji přečte do data-atributu a rozběhne). */
.stat-count[data-counting]{ font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   6. PRÁVNÍ STRÁNKA (GDPR) — samostatné .html, jen typografie
   ══════════════════════════════════════════════════════════════ */
.legal__top{
  max-width:760px;
  margin:0 auto;
  padding:clamp(20px,4vw,36px) var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.legal__brand{
  font:700 14px/1 var(--f-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.legal__back{
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color var(--t-mid) var(--e-soft);
}
.legal__back:hover{ color:var(--olive); }
.legal{
  max-width:760px;
  margin:0 auto;
  padding:clamp(14px,3vw,30px) var(--pad) clamp(64px,10vh,120px);
}
.legal h1{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.75rem,4vw,2.6rem);
  line-height:1.08;
  letter-spacing:-.022em;
  color:var(--ink);
}
.legal__meta{
  margin-top:8px;
  font-size:13px;
  color:var(--ink-soft);
}
.legal h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.05rem,2vw,1.3rem);
  letter-spacing:-.01em;
  color:var(--ink);
  margin:clamp(28px,4.5vw,44px) 0 10px;
}
.legal p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink);
}
.legal ul{
  margin:0 0 12px;
  padding-left:20px;
}
.legal li{
  margin-bottom:6px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink);
}
.legal strong{ font-weight:600; }
.legal a{
  color:var(--olive);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color var(--t-mid) var(--e-soft);
}
.legal a:hover{ color:var(--olive-dk); }
.legal__foot{
  max-width:760px;
  margin:0 auto;
  padding:22px var(--pad) 40px;
  border-top:1px solid rgba(28,30,23,.12);
  font-size:12px;
  color:var(--ink-soft);
}
.legal__foot a{ color:inherit; }
.legal__foot a:hover{ color:var(--olive); }

/* ══════════════════════════════════════════════════════════════
   8. Přístupnost — omezený pohyb
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero{ height:auto; }
  .hero__sticky{ position:relative; height:auto; min-height:100svh; }
  .wordmark__l,
  .ln__i{ transform:none !important; }
  .hero__aurora{ animation:none; }
}