/* AGORIVA landing — styleguide B1 (kinematický monochrom)
   Světelný oblouk: stránka tmavne nahoře a světlá dolů — scroll = expozice.
   Bez JS platí statický přechod po sekcích a vše zůstává čitelné. */

@font-face { font-family: 'Quicksand'; src: url('../fonts/Quicksand-Variable.ttf'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.ttf'); font-weight: 100 900; font-display: swap; }

:root {
  --noc: #0B0F14;
  --panel: #10161C;
  --povrch2: #161D26;
  --text1: #F4F6F8;
  --text2: #AFC4D6;
  --text3: #7A8B99;
  --paprsek: #DCE7F1;
  --odkaz: #4E8DD1; /* pův. #7FA8C9 */
  --most: #1C72D8; /* dashboardová modrá — jen produkt a interakce */
  --chyba: #D9776B;
  --uspech: #7FB89A;
  --uhel: 27deg;
  /* jednotný podklad všech skleněných panelů obsahu — jediný zdroj pravdy */
  --sklo: rgba(11, 15, 20, 0.68);   /* pův. 0.58 — přes světlá místa videa mělo písmo v panelu jen 3:1 */
  --sklo-ram: rgba(175, 196, 214, 0.16);
  --disp: 'Quicksand', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--noc);
  color: var(--text2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--paprsek); color: var(--noc); }

/* Zrno — statická filmová textura */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.026;
}

h1, h2, h3 { font-family: var(--disp); color: var(--text1); font-weight: 600; line-height: 1.13; }
h1 { font-size: clamp(42px, 7vw, 84px); }
h2 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 18px; letter-spacing: -0.01em; }
h3 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
p  { max-width: 64ch; }
a  { color: var(--odkaz); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--paprsek); outline-offset: 3px; border-radius: 4px; }
/* height: auto patří k max-width nerozlučně. Bez něj se atributy width/height
   z HTML chovají jako presentational hint (width: 1420px; height: 600px) —
   max-width srazí šířku na sloupec, ale výšku nepřebije nic a obrázek zůstane
   na původních 600 px. Bilo to na obrázcích v článcích, které atributy nesou
   (2× vyšší, než měly být); slidy a náhledy je nemají, tam se to neprojevilo. */
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
section { padding: 128px 0 104px; position: relative; z-index: 1; }
section h2::after { content: ''; display: block; width: 64px; height: 2px; margin-top: 18px; background: linear-gradient(90deg, var(--paprsek), transparent); }

/* ---------- světelný oblouk — statické zastávky sekcí ---------- */
#pribeh { background: var(--noc); }
#features { background: linear-gradient(180deg, var(--noc) 0, #0E141C 220px); }
#scenarios { background: linear-gradient(180deg, #0E141C 0, #131B26 220px); }
#how-it-works { background: linear-gradient(180deg, #131B26 0, #1B2634 220px); }
#for-professionals { background: linear-gradient(180deg, #1B2634 0, #2E4053 220px); border: none; }
#gallery { background: #2E4053; padding: 32px 0 110px; }
#showcase { background: linear-gradient(180deg, #2E4053 0, #2E4053 calc(100% - 200px), #A6BACB 100%); }
#contact { background: linear-gradient(180deg, #A6BACB 0, #E9EFF5 340px); padding-top: 64px; }
/* s aktivním videem nemá kontakt pevnou startovní barvu — vršek je průhledný
   (prosvítá doměkávající tělo stránky), do vlastní barvy se dolije až uvnitř;
   předěl sekcí tak nemůže vytvořit hranu při žádném stavu scrollu */
html.pribeh-aktivni #contact { background: linear-gradient(180deg, rgba(166, 186, 203, 0) 0, #A6BACB 260px, #E9EFF5 600px); }

/* světlý registr — tokeny se překlopí, komponenty se adaptují samy */
.svetly { --text1: #14181D; --text2: #262E36; --text3: #3D4A55; --panel: #FFFFFF; --povrch2: #D7E0E8; /* pův. text2 #3A444D, text3 #5C6B77 — na horním okraji kontaktu měly 3,3–3,9:1 */ }
.svetly ::selection { background: #14181D; color: #F4F6F8; }
.svetly h2::after { background: linear-gradient(90deg, #14181D, transparent); }
/* .svetly .btn.primarni { background: #14181D; color: #F4F6F8; }
.svetly .btn.primarni:hover { background: #26303A; } */
.svetly .btn.primarni { background: var(--most); color: #FFFFFF; box-shadow: none; }
.svetly .btn.primarni:hover { background: #1C6BD3; }
.svetly .btn.sekundarni { border-color: rgba(20, 24, 29, 0.4); color: #14181D; }
.svetly .btn.sekundarni:hover { border-color: #14181D; }

/* ---------- podpisové prvky ---------- */
.rez { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 10px; }
.rez i { display: inline-block; width: 5px; height: 14px; background: var(--odkaz); transform: skewX(calc(-1 * var(--uhel))); margin-right: 4px; }

.label { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paprsek); /* pův. --text2 — 12px nad videem mělo 4,05:1 */ }
/* ve světlé sekci sedí štítek na horním, ještě středně tmavém okraji — na --text2 měl 4,24:1 */
.svetly .label { color: var(--text1); }
.label-row { display: flex; align-items: center; margin-bottom: 16px; }

ul.rezlist { list-style: none; }
ul.rezlist li { padding: 8px 0; display: flex; gap: 12px; align-items: baseline; max-width: 72ch; }
ul.rezlist li::before { content: ''; width: 5px; height: 13px; background: var(--odkaz); transform: skewX(calc(-1 * var(--uhel))); flex-shrink: 0; box-shadow: 9px 0 0 var(--odkaz); margin-right: 9px; }

@keyframes dech { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.dycha { animation: dech 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dycha { animation: none !important; opacity: 0.6; } }

/* ---------- tlačítka ---------- */
.btn { display: inline-block; padding: 14px 26px; border-radius: 9px; font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer; border: none; text-decoration: none; }
.btn:hover { text-decoration: none; }
/* .btn.primarni { background: var(--paprsek); color: var(--noc); }
.btn.primarni:hover { background: #F1F5F8; } */
.btn.primarni { background: var(--most); color: #FFFFFF; box-shadow: 0 0 20px rgba(28, 114, 216, 0.28); }
.btn.primarni:hover { background: #2B82E3; }
.btn.sekundarni { border: 1.5px solid rgba(198, 211, 222, 0.5); color: var(--paprsek); background: transparent; }
.btn.sekundarni:hover { border-color: var(--paprsek); }
.btn:focus-visible { outline: 2px solid var(--paprsek); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(11, 15, 20, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(22, 29, 38, 0.9); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
/* monogram je čtvercový s ~11% průhledným okrajem — při 26px by opticky zdrobněl */
/* logo-nav.png je logo.png oříznuté na neprůhlednou plochu — díky tomu se výška
   elementu rovná výšce písmene A a dá se řídit přímo. Nepoužívat tu logo.png:
   to má kolem sebe 49 % průhledného okraje, takže by se A při stejné výšce
   zdrobnilo na polovinu. 24px drží A stejně velké jako dřívější monogram na 30px
   (ten měl 21 % průhledného okraje). */
.nav .logo img { height: 24px; width: auto; /* pův. monogram.png na 30px */ }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-size: 13.5px; color: #AFC4D6; font-weight: 500; }
.nav-links a:hover { color: #F4F6F8; text-decoration: none; }
/* Blog a jazyk nejsou sekce stránky — oddělené dělítkem a tišší než hlavní položky */
.nav-links .nav-blog { margin-left: 12px; padding-left: 22px; position: relative; color: #7A8B99; }
.nav-links .nav-blog::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: rgba(175, 196, 214, 0.22); }
.nav-links .nav-blog:hover, .nav-links .nav-blog[aria-current="page"] { color: #F4F6F8; }

/* přepínač jazyka — ukazuje aktuální jazyk, rozbaluje volbu */
.jazyk { position: relative; }
.jazyk summary { list-style: none; cursor: pointer; color: #7A8B99; border: 1px solid #161D26; border-radius: 7px; padding: 5px 9px 5px 11px; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.jazyk summary::-webkit-details-marker { display: none; }
.jazyk summary::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }
.jazyk summary:hover { color: #F4F6F8; border-color: var(--odkaz); }
.jazyk[open] summary { color: #F4F6F8; border-color: var(--odkaz); }
.jazyk-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 130px; background: #10161C; border: 1px solid #232C36; border-radius: 9px; padding: 5px; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.jazyk-list a { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #AFC4D6; white-space: nowrap; }
.jazyk-list a:hover { background: rgba(175, 196, 214, 0.09); color: #F4F6F8; text-decoration: none; }
.jazyk-list a[aria-current="true"] { color: #F4F6F8; background: rgba(28, 114, 216, 0.16); }
/* .nav-cta { background: var(--paprsek); color: var(--noc) !important; padding: 9px 16px; border-radius: 8px; font-weight: 600; }
.nav-cta:hover { background: #F1F5F8; } */
.nav-cta { background: var(--most); color: #FFFFFF !important; padding: 9px 16px; border-radius: 8px; font-weight: 600; }
.nav-cta:hover { background: #2B82E3; }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 24px; height: 2px; background: #F4F6F8; }
.menu-list { position: absolute; right: 0; top: calc(100% + 10px); background: #10161C; border: 1px solid #161D26; border-radius: 12px; padding: 10px; min-width: 230px; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.menu-list a { padding: 11px 14px; border-radius: 8px; color: #AFC4D6; font-size: 15px; }
.menu-list a:hover { background: #161D26; color: #F4F6F8; text-decoration: none; }

@media (max-width: 880px) {
  .nav:not(.minimal) .nav-links { display: none; }
  .menu { display: block; }
  /* Minimal varianta (právní stránky) žádné .menu nerenderuje — kdyby se jí lišta
     schovala jako plné, nezbyla by na mobilu navigace vůbec. Textové odkazy má
     stránka duplicitně dole v bloku .konec, takže tady stačí udržet přepínač jazyka
     a lišta si zachová výšku, se kterou počítá padding-top .pravni-stranka. */
  .nav.minimal .nav-links { display: flex; gap: 12px; }
  .nav.minimal .nav-links > a { display: none; }
}

/* ---------- zpět nahoru (jen mobil) ---------- */
/* Bez backdrop-filter schválně: leží nad fixní video vrstvou, kde filtr škube
   scrubem (viz CLAUDE.md). Neprůhledné pozadí dělá totéž levněji. */
.nahoru { position: fixed; right: 16px; bottom: 18px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; display: none; align-items: center; justify-content: center; border: 1px solid rgba(198, 211, 222, 0.35); background: rgba(11, 15, 20, 0.92); color: #F4F6F8; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease; }
.nahoru svg { width: 21px; height: 21px; }
.nahoru.vidno { opacity: 1; pointer-events: auto; transform: none; }
/* jen s JS — bez něj by se .vidno nikdy nepřepnulo a tlačítko by zůstalo neviditelné */
@media (max-width: 880px) { html.js .nahoru { display: flex; } }
@media (prefers-reduced-motion: reduce) { .nahoru { transition: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: flex-end; position: relative; overflow: hidden; padding: 150px 0 84px; }
html:not(.pribeh-aktivni) .hero { background: #0B0F14 url('../img/pribeh-uvod.jpg') center 30% / cover no-repeat; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 20, 0.6), rgba(11, 15, 20, 0.5) 42%, rgba(11, 15, 20, 0.88)); /* pův. 0.45/0.12/0.82 — podnadpis nad obrázkem měl 2,85:1 */ }
.hero .wrap { position: relative; }
/* margin-left kompenzuje průhledný okraj v logu — opticky ho zarovná s náběhem
   textu pod ním, bez něj se logo jevilo odsazené doprava */
.hero-logo { height: 80px; width: auto; margin-bottom: 14px; display: flex; margin-left: -11px; /* pův. 54px / margin-bottom 0 */ }
.hero h1 .slovo { display: inline-block; }
html.js .hero h1 .slovo { filter: blur(12px); opacity: 0; transform: translateY(10px); transition: filter 0.9s ease, opacity 0.9s ease, transform 0.9s ease; transition-delay: var(--zpoz, 0ms); }
html.js .hero h1.doostreno .slovo { filter: none; opacity: 1; transform: none; }
.hero p.sub { font-size: clamp(16px, 2vw, 19px); margin-top: 22px; max-width: 54ch; color: var(--paprsek); /* pův. --text2, nad hero obrázkem mělo 2,84:1 */ }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.trust { display: flex; gap: 10px 28px; flex-wrap: wrap; margin-top: 46px; padding-top: 18px; border-top: 1px solid rgba(175, 196, 214, 0.18); font-size: 13.5px; color: var(--text3); }

/* ---------- příběh — video podkres za obsahem (scrubovaný scrollem) ----------
   Postava se v pozadí narovnává, zatímco obsah normálně běží.
   Aktivuje se jen s JS, pohybem a širokou obrazovkou; jinak platí statický oblouk. */
.pribeh-pozadi { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; display: none; }
html.pribeh-aktivni .pribeh-pozadi { display: block; }
html.pribeh-aktivni .hero-scrim { display: none; }
.pribeh-pozadi video { position: absolute; top: 0; height: 100%; width: 118%; left: auto; right: -10%; object-fit: cover; transform: translateZ(0); }
/* Poster pod videem — než se video stáhne a dekóduje, byla tu černá plocha.
   Geometrie MUSÍ být totožná s `.pribeh-pozadi video` výš, jinak při naskočení
   videa obraz cukne. Žádné z-index: ::before je první potomek, takže se vykreslí
   pod videem i pod .pp-scrim čistě podle pořadí v DOM. */
.pribeh-pozadi::before { content: ''; position: absolute; top: 0; height: 100%; width: 118%; left: auto; right: -10%; background: #0B0F14 url('../img/pribeh-uvod.jpg') center / cover no-repeat; }
.pribeh-pozadi { will-change: opacity; }
.pribeh-pozadi .pp-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 20, 0.84) 0 22%, rgba(11, 15, 20, 0.56) 50%, rgba(11, 15, 20, 0.30) 100%), linear-gradient(rgba(11, 15, 20, 0.36), rgba(11, 15, 20, 0.36)); /* pův. 0.78/0.38/0.10 + 0.25 — text nad světlými místy záběru měl 2:1 */ }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .pribeh-pozadi .pp-scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--arc-bg, #0B0F14) 86%, transparent) 0 22%, color-mix(in srgb, var(--arc-bg, #0B0F14) 60%, transparent) 50%, color-mix(in srgb, var(--arc-bg, #0B0F14) 34%, transparent) 100%), linear-gradient(color-mix(in srgb, var(--arc-bg, #0B0F14) 36%, transparent), color-mix(in srgb, var(--arc-bg, #0B0F14) 36%, transparent)); /* pův. 80/42/12 + 25 */ }
}
html.pribeh-aktivni #features,
html.pribeh-aktivni #scenarios,
html.pribeh-aktivni #how-it-works,
html.pribeh-aktivni #for-professionals,
html.pribeh-aktivni #gallery,
html.pribeh-aktivni #showcase { background: transparent; }

/* ---------- Škála deseti jako scroll-progress — ZRUŠENO 7.8.2026 ----------
   Column-reverse plnil proužky zdola nahoru proti směru scrollu, četlo se to obráceně.
   Generování je vyřazené i v main.js.
.skala-prubeh { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 8px; z-index: 60; }
.skala-prubeh i { width: 8px; height: 22px; border-radius: 4px; background: rgba(175, 196, 214, 0.18); transition: background 300ms, box-shadow 300ms; }
.skala-prubeh i.lit { background: var(--paprsek); box-shadow: 0 0 10px rgba(28, 114, 216, 0.55); }
.skala-prubeh.tmava i { background: rgba(20, 24, 29, 0.14); }
.skala-prubeh.tmava i.lit { background: #14181D; box-shadow: none; }
@media (max-width: 1040px) { .skala-prubeh { display: none; } }
---------------------------------------------------------------------------- */

/* ---------- sekce 02: tři vlastnosti + featury ---------- */
.kroky3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.kroky4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.krok { position: relative; overflow: hidden; background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 14px; padding: 26px; /* pův. rgba(13,18,24,0.78) + rám 0.14 */ }
.krok::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 90% at 50% -20%, rgba(126, 174, 228, 0.2), transparent 60%); opacity: 0; transition: opacity 220ms ease-out; pointer-events: none; /* pův. rgba(190, 205, 220, 0.22) */ }
.krok:hover::before { opacity: 1; }
.krok .krok-ikona { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(175, 196, 214, 0.08); border: 1px solid rgba(175, 196, 214, 0.14); color: var(--text2); margin-bottom: 18px; }
.krok .krok-ikona svg { width: 24px; height: 24px; }
.krok .kt { display: block; font-family: var(--disp); font-weight: 500; font-size: 21px; color: var(--text1); margin-bottom: 10px; }
.kroky4 .krok .kt { font-size: 18px; }
.kroky4 .krok p { font-size: 13.5px; }
.krok p { font-size: 15px; }

/* ---------- sekce 03: scénáře ---------- */
/* .scen-duo { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-top: 52px; align-items: stretch; }
.scen-duo .scen-grid { margin-top: 0; } */
.scen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; /* pův. repeat(3, 1fr) bez margin */ }
.scen { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.scen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); transition: filter 450ms ease, transform 700ms ease-out; }
.scen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(207deg, transparent 48%, rgba(11, 15, 20, 0.8)); transition: opacity 450ms ease; }
.scen::before { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 80% 95% at 50% -15%, rgba(150, 193, 238, 0.34), transparent 65%); opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; /* pův. rgba(210, 225, 240, 0.4) */ }
.scen:hover::before { opacity: 1; }
.scen:hover::after { opacity: 0.55; }
.scen:hover img { filter: brightness(1.06); transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .scen img, .scen:hover img { transition: filter 450ms ease; transform: none; } }
@media (hover: none) { .scen img { filter: brightness(0.8); } }
.scen-t { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 3; }
.scen-t strong { display: block; font-family: var(--disp); font-weight: 600; font-size: 17.5px; color: #F4F6F8; }

/* detail scénáře — pás dlaždiček nahoře (bez scrollu, wrapuje), velký panel pod ním, vlastní scénář stále viditelný */
.scen[data-detail] { cursor: pointer; }
.scen-detail { display: none; } /* zdroj dat pro panel, samotné se nezobrazují */
.scen-fobie { display: none; }  /* totéž pro chipy s cílovými fobiemi */
.scen-obal { margin-top: 52px; }
/* overflow-y: hidden je nutnost, ne kosmetika — podle CSS specifikace se
   `overflow-y: visible` překlopí na `auto`, jakmile je overflow-x jiné než
   visible. Lišta pak byla svisle scrollovatelná o pár pixelů a šikmý tah
   s ní na mobilu „kroužil". touch-action: pan-x navíc pustí svislé gesto
   na stránku, místo aby ho spolkla lišta. */
.scen-pas { position: relative; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pinch-zoom; overscroll-behavior-x: contain; padding: 4px 4px 8px; scrollbar-width: none; --fadeL: 0px; --fadeR: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fadeL), #000 calc(100% - var(--fadeR)), transparent 100%); }
.scen-pas::-webkit-scrollbar { display: none; }
.scen-pas.lze-vlevo { --fadeL: 48px; }
.scen-pas.lze-vpravo { --fadeR: 48px; }
.scen-pas .scen { flex: 1 0 148px; min-width: 0; aspect-ratio: 16 / 10; border-radius: 10px; }
.scen-pas .scen-t { left: 10px; right: 10px; bottom: 8px; }
.scen-pas .scen-t strong { font-size: 12px; font-weight: 600; line-height: 1.25; }
.scen-pas.ma-aktivni .scen[data-detail] img { filter: brightness(0.4); }
.scen-pas.ma-aktivni .scen[data-detail]:hover img { filter: brightness(0.65); }
.scen-pas.ma-aktivni .scen[data-detail].aktivni-scen img { filter: brightness(0.9); }
.scen[data-detail].aktivni-scen { box-shadow: 0 0 0 1.5px rgba(220, 231, 241, 0.42); }
.scen-bok { position: relative; display: grid; grid-template-columns: 1fr 44%; background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 14px; overflow: hidden; min-height: 300px; margin-top: 14px; /* pův. 0.88 */ }
/* min-height dopočítá JS z nejvyššího ze sedmi detailů a zapíše ho inline.
   Pevná hodnota v CSS to neuhlídá — text se láme jinak v CZ a v EN a jinak na
   každé šířce, takže se panel při přepnutí scénáře natahoval a stránka poskakovala. */
/* min-height je nosné, ne kosmetické: obě textové vrstvy leží absolutně, takže
   výšku buňky nedrží obsah. JS ji přepíše změřeným maximem, hodnota v CSS je
   záchrana pro případ, že by neběžel. */
.scen-bok-text { position: relative; align-self: center; min-height: 300px; }
/* padding patří na vrstvu, ne na buňku — vrstvy jsou absolutní a musí mít vlastní
   vnitřní odsazení; min-height: 100 % je proti zamčené výšce a centruje obsah */
.scen-bok-vrstva { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 28px 34px 30px; }
.scen-bok-text h3 { font-family: var(--disp); font-weight: 600; font-size: 27px; color: var(--text1); margin: 0 0 12px; }
/* cílové fobie jako chipy — modrá je barva produktu, odliší je od odrážek pod nimi */
.scen-chipy { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; max-width: none; }
.scen-chipy span { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--paprsek); background: rgba(28, 114, 216, 0.16); border: 1px solid rgba(28, 114, 216, 0.34); }
.scen-bok .rezlist li { font-size: 15px; }
/* Rámeček drží šikmý ořez a stojí; posouvá se jen vrstva uvnitř. overflow: hidden
   je tu i kvůli mobilu, kde je clip-path vypnutý a jinak by přetékající vrstva
   koukala ven z panelu. */
.scen-bok-art { position: relative; overflow: hidden; clip-path: polygon(153px 0, 100% 0, 100% 100%, 0 100%); }
/* ±24px přetečení dává rezervu na 22px posun — obraz tak nikdy nedojde a na kraji
   se neobjeví prázdno */
.scen-bok-art i { position: absolute; top: 0; bottom: 0; left: -24px; right: -24px; background-size: cover; background-position: center; }

/* Výměna scénáře jako cross-fade dvou vrstev. Tři stavy, dvě třídy:
   bez třídy = zaparkovaná (startovní pozice, neviditelná, BEZ přechodu, čeká na
   naplnění), .aktivni = na místě a vidět, .odchozi = odjetá a zhasnutá.
   Text a obrázek jdou proti sobě: text přijíždí zleva a odchází doprava, obrázek
   naopak. Zaparkovaná i odchozí mají opacity 0, takže návrat odchozí vrstvy do
   parkování není vidět — a právě proto tu nic nebliká.
   Jen transform a opacity, obojí kompozitované, takže scrub videa pod panelem
   zůstane hladký. */
.scen-bok-vrstva, .scen-bok-art i { opacity: 0; transition: none; }
.scen-bok-vrstva { transform: translateX(-22px); }
.scen-bok-art i { transform: translateX(22px); }
.scen-bok-vrstva.aktivni, .scen-bok-art i.aktivni { opacity: 1; transform: none; transition: opacity 190ms ease, transform 190ms ease; }
.scen-bok-vrstva.odchozi { opacity: 0; transform: translateX(22px); transition: opacity 190ms ease, transform 190ms ease; }
.scen-bok-art i.odchozi { opacity: 0; transform: translateX(-22px); transition: opacity 190ms ease, transform 190ms ease; }
/* dvě třídy na .scen-bok schválně — přebíjí .aktivni i .odchozi bez !important */
.scen-bok.bez-prechodu .scen-bok-vrstva, .scen-bok.bez-prechodu .scen-bok-art i { transition: none; }
.scen-vlastni-pruh { display: flex; align-items: center; gap: 18px; margin-top: 14px; padding: 18px 22px; background: var(--sklo); border: 1px solid rgba(28, 114, 216, 0.38); border-radius: 14px; text-decoration: none;
  /* jediný prvek sekce, který vede na kontakt — modrá záře ho odliší od dlaždic */
  box-shadow: 0 0 24px rgba(28, 114, 216, 0.22), 0 0 62px 12px rgba(28, 114, 216, 0.1);
  transition: border-color 220ms ease, box-shadow 220ms ease; }
.scen-vlastni-pruh:hover { border-color: rgba(28, 114, 216, 0.62); box-shadow: 0 0 32px rgba(28, 114, 216, 0.34), 0 0 80px 16px rgba(28, 114, 216, 0.15); text-decoration: none; }
.scen-vlastni-pruh .vlastni-plus { font-size: 26px; }
.scen-vlastni-pruh .vp-text { flex: 1; font-size: 13.5px; color: var(--text3); line-height: 1.5; }
.scen-vlastni-pruh .vp-text strong { display: block; font-family: var(--disp); font-size: 16.5px; font-weight: 600; color: var(--text1); margin-bottom: 2px; }
.scen-vlastni-pruh .btn { flex-shrink: 0; }
/* reduced motion řeší JS — jede tam vždy větev bez animace, která si zapne
   .bez-prechodu, takže tu není co přebíjet */
@media (max-width: 700px) {
  .scen-pas { gap: 8px; }
  .scen-pas .scen-t strong { font-size: 11px; }
  .scen-bok { grid-template-columns: 1fr; min-height: 0; }
  .scen-bok-art { order: -1; height: 190px; clip-path: none; }
  /* na užším panelu působí kratší dráha líp; .aktivni má vyšší specificitu,
     takže mu tahle pravidla transform: none nepřebijí */
  .scen-bok-text { min-height: 240px; }
  .scen-bok-vrstva { transform: translateX(-14px); padding: 24px 22px 26px; }
  .scen-bok-art i { transform: translateX(14px); }
  .scen-bok-vrstva.odchozi { transform: translateX(14px); }
  .scen-bok-art i.odchozi { transform: translateX(-14px); }
  .scen-vlastni-pruh { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.scen.vlastni { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 20px 22px; background: rgba(13, 18, 24, 0.78); border: 1px solid rgba(175, 196, 214, 0.14); text-decoration: none; /* pův. gap 12px, padding 30px 28px, aspect-ratio: auto, height: 100% */ }
.scen.vlastni::after { display: none; }
.scen.vlastni::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 75% 90% at 50% -20%, rgba(190, 205, 220, 0.22), transparent 60%); opacity: 0; transition: opacity 220ms ease-out; pointer-events: none; }
.scen.vlastni:hover::before { opacity: 1; }
.scen.vlastni:hover { border-color: rgba(175, 196, 214, 0.35); text-decoration: none; }
.scen.vlastni > * { position: relative; }
.vlastni-plus { font-family: var(--disp); font-weight: 500; font-size: 30px; line-height: 1; color: var(--odkaz); /* pův. 48px */ }
.scen.vlastni strong { font-family: var(--disp); font-weight: 600; font-size: 18px; color: var(--text1); /* pův. 21px */ }
.scen.vlastni > span:not(.vlastni-plus):not(.vlastni-cta) { font-size: 12.5px; color: var(--text3); line-height: 1.5; /* pův. 13.5px, :not(.btn) */ }
.vlastni-cta { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--odkaz); }
.scen.vlastni:hover .vlastni-cta { color: #7FB0E0; }

/* ---------- carousely ---------- */
.band { margin-top: 72px; }
/* --slideW deklaruje výhradně obal — čte ho .carousel (padding), .slide (šířka)
   i vrstva se září. Kdyby si ho .carousel deklaroval taky, přebil by zděděnou
   hodnotu a záře by seděla na jiný rozměr než snímek. */
.carousel-obal { position: relative; margin-top: 6px; --slideW: min(900px, 84vw); }
.carousel { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pinch-zoom; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  /* boční padding = půl volného místa → i první a poslední snímek se dá vycentrovat,
     sousedé přitom zůstanou vidět (padding se neclipuje) */
  padding: 0 calc((100% - var(--slideW)) / 2) 8px; }
.carousel::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }
/* tmavý plát pod obrázkem — musí být na slidu, ne na <img>: to má při náběhu
   opacity 0 a schovalo by i vlastní pozadí, takže by slide byl zase průhledná díra */
.slide { flex: 0 0 var(--slideW); margin: 0; scroll-snap-align: center; background: #0B0E13; border-radius: 14px; }
/* podklad drží místo, dokud obrázek nedorazí — bez něj je slide průhledná díra,
   prosvítá jí video na pozadí a příchod tmavého screenshotu celou sekcí problikne */
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; display: block; }
/* obrázek nenaskočí, ale nabehne — osm slidů dorazí naráz a skokem by celá sekce problikla.
   Guard html.js je nutný: bez JS by se třída .nacteno nikdy nepřidala a slidy zůstaly prázdné. */
html.js .slide img { opacity: 0; transition: opacity 300ms ease; }
html.js .slide img.nacteno { opacity: 1; }
/* video ve slidu: čtvercový trailer v 16/9 rámu, dopočet tmavým plátem, bez autoplay.
   Nativní ovládání se zapne až po spuštění — do té doby je na posteru vlastní Play. */
.slide video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0B0E13; border-radius: 14px; display: block; }
.slide-video { position: relative; }
.video-hrat { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; cursor: pointer; }
.video-hrat span { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px 13px 19px; border-radius: 999px; background: rgba(11, 15, 20, 0.74); border: 1px solid rgba(198, 211, 222, 0.4); color: #F4F6F8; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: background 200ms ease, border-color 200ms ease; }
.video-hrat:hover span { background: rgba(28, 114, 216, 0.88); border-color: rgba(28, 114, 216, 0.95); }
.video-hrat svg { width: 15px; height: 15px; flex-shrink: 0; }
.slide-video.hraje .video-hrat { display: none; }

/* náhled videa v pásu pod karuselem nese trojúhelník, ať je poznat od fotek */
.car-dots.nahledy button.nahled-video::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 12px solid rgba(244, 246, 248, 0.96); border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)); }
@media (prefers-reduced-motion: reduce) { html.js .slide img { transition: none; } }
.slide figcaption { font-size: 13px; color: var(--text3); margin-top: 10px; }
/* Rozhraní je panel, ne pás: jeden snímek na plnou šířku sloupce a claim pod ním.
   (Pův. min(760px, 72vw) s vykukujícími sousedy — vedle popisku pod obrázkem by
   z nich koukaly useknuté kusy cizího textu.) */
#how-it-works .carousel-obal { --slideW: 100%; }
.car-btn { display: none; position: absolute; top: 50%; /* pův. 42 %, počítalo s popiskem pod obrázkem */ transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(198, 211, 222, 0.35); background: rgba(11, 15, 20, 0.72); backdrop-filter: blur(6px); color: #F4F6F8; font-size: 18px; cursor: pointer; align-items: center; justify-content: center; z-index: 5; }
.car-btn:hover:not(:disabled) { background: var(--paprsek); color: var(--noc); border-color: var(--paprsek); }
/* pás necyklí — na kraji šipka zšedne, ať je konec vidět */
.car-btn:disabled { opacity: 0.28; cursor: default; }
.car-prev { left: 10px; }
.car-next { right: 10px; }
html.js .car-btn { display: flex; }
.car-dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.car-dots i { width: 22px; height: 8px; border-radius: 4px; background: rgba(175, 196, 214, 0.16); transition: background 200ms; }
.car-dots i.aktivni { background: #5792CF; box-shadow: 0 0 10px rgba(28, 114, 216, 0.5); /* pův. var(--paprsek) + rgba(220, 231, 241, 0.45) */ }
/* Krajní snímky jsou jen kontext — plnou sytost má vždy ten prostřední. */
.carousel .slide { opacity: 0.28; transition: opacity 200ms ease; }
.carousel .slide.aktivni-slide { opacity: 1; }
/* při přeskoku přes klon se prohodí aktivní snímek — bez vypnutého přechodu by to bliklo */
.carousel.bez-prechodu .slide, .carousel.bez-prechodu .slide * { transition: none; }
@media (prefers-reduced-motion: reduce) { .carousel .slide { transition: none; } }

#how-it-works .carousel { padding-bottom: 0; }
/* snímek i claim v jednom plátu — figure je celý panel */
#how-it-works .slide { background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 16px; padding: 10px; }
#how-it-works .slide img { border-radius: 10px; }
/* margin-top: 0 přebíjí základní .slide figcaption — odsazení tu řídí padding uvnitř plátu */
#how-it-works .slide figcaption { display: block; margin-top: 0; padding: 15px 8px 7px; font-size: 14px; line-height: 1.5; color: var(--text2); }
#how-it-works .slide figcaption strong { display: block; font-family: var(--disp); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--text1); margin-bottom: 4px; }
/* šipky opticky na střed obrázku, ne celého panelu i s popiskem */
#how-it-works .car-btn { top: 42%; }
/* Modrá záře kolem aktivní obrazovky zrušena 7.8.2026.
   Třídu .pohyb JS dál přepíná, ale nic na ní nevisí — je to hook, kdyby se stav pásu
   měl někdy zase promítat do vzhledu. */
/* šířku obrazovky řídí --slideW na .carousel.dash, obal zůstává plný, aby bylo kam vykukovat */
/* popisky pod obrazovkami pryč — u dashboardu i v galerii, ta má místo nich náhledy */
#gallery .slide figcaption { display: none; }  /* galerie má místo nich náhledy */

/* náhledy místo teček (galerie) — miniatura každého slidu, aktivní se rozsvítí */
.car-dots.nahledy { gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.car-dots.nahledy button { position: relative; width: 112px; height: 63px; padding: 0; border-radius: 9px; border: 1px solid rgba(175, 196, 214, 0.18); background-color: var(--panel); background-size: cover; background-position: center; cursor: pointer; opacity: 0.42; transition: opacity 220ms ease, border-color 220ms ease; }
.car-dots.nahledy button:hover { opacity: 0.78; }
.car-dots.nahledy button.aktivni { opacity: 1; border-color: rgba(220, 231, 241, 0.55); }
@media (max-width: 700px) { .car-dots.nahledy button { width: 78px; height: 44px; } }

/* ---------- sekce 04: rozhraní ---------- */
/* Panel se snímkem vlevo, sloupec dalších claimů vpravo — jako návrhy videí na
   YouTube. Kolik claimů je vidět, řídí výška panelu: JS jí nastaví max-height
   sloupce, zbytek se v něm doroluje. Pod 1000 px sloupec mizí a claim nese
   popisek pod obrázkem, takže se nic neztratí. */
.plat { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 24px; align-items: start; margin-top: 52px; }
/* min-width: 0 zůstává jako pojistka — grid/flex potomci se jinak nesmrsknou pod
   min-content karuselu a stránka přeteče do stran */
.plat > * { min-width: 0; }
html.js .rezlist.sync li { cursor: pointer; transition: color 200ms; }
html.js .rezlist.sync li:hover { color: var(--text1); }
.rezlist.sync li.aktivni { color: var(--text1); }
/* aktivní bod musí být vidět na první pohled — odstín textu na to nestačil */
#dash-list li.aktivni { background: rgba(28, 114, 216, 0.17); box-shadow: inset 0 0 0 1px rgba(28, 114, 216, 0.38); }
#dash-list li.aktivni .bod { color: var(--text1); }
#dash-list li.aktivni .bod strong { color: #FFFFFF; }
html.js #dash-list li:hover:not(.aktivni) { background: rgba(175, 196, 214, 0.06); }
.rezlist.sync li.aktivni::before { background: #6AA6EC; box-shadow: 9px 0 0 #6AA6EC; }
/* body na skleněném podkladu, ať jsou nad videem čitelné.
   Bez backdrop-filter — nad video vrstvou je zakázaný, škubal scrub (viz CLAUDE.md). */
/* max-height dopisuje JS podle skutečné výšky panelu vedle; 460px je fallback,
   kdyby JS neběžel nebo se panel ještě nezměřil */
/* position: relative dělá ze seznamu offsetParent svých položek — JS z jejich
   offsetTop počítá, jestli aktivní návrh doskrolovat do výhledu. Bez toho by se
   měřily proti <section>, která je taky pozicovaná, a doroll by střílel mimo. */
#dash-list { position: relative; display: block; max-height: 460px; overflow-y: auto; overscroll-behavior-y: contain; background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 14px; padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(175, 196, 214, 0.3) transparent; /* pův. grid na 4 sloupce pod karuselem */ }
#dash-list::-webkit-scrollbar { width: 8px; }
#dash-list::-webkit-scrollbar-thumb { background: rgba(175, 196, 214, 0.28); border-radius: 4px; }
#dash-list li { max-width: none; align-items: flex-start; padding: 11px 13px; border-radius: 11px; transition: background 200ms ease, box-shadow 200ms ease; }
#dash-list li::before { position: relative; top: 6px; transition: background 200ms ease, box-shadow 200ms ease; }
/* každý bod má nadpis a popisek — odrážka sedí vedle nadpisu, text se pod ním zalomí */
#dash-list .bod { display: block; min-width: 0; font-size: 13.5px; color: var(--text2); }
#dash-list .bod strong { display: block; font-family: var(--disp); font-weight: 600; font-size: 15.5px; color: var(--text1); margin-bottom: 3px; line-height: 1.25; }
/* .integrace { margin-top: 20px; font-size: 13.5px; color: var(--text3); border-left: 2px solid rgba(175, 196, 214, 0.2); padding-left: 14px; }
   pův. samostatný odstavec pod seznamem — překlopeno na osmý bod seznamu 7.8.2026 */

/* ---------- sekce 05: pro odborníky ---------- */
/* .odb-chip byl jediný chip svého druhu na stránce — nahrazen vzorem .label-row 7.8.2026
.odb-chip { display: inline-block; border: 1px solid rgba(220, 231, 241, 0.35); color: var(--text1); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; } */
.odb-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; margin-top: 12px; }
/* jeden podklad pro všechny čtyři panely pravého sloupce — pilot, garanti, certifikace, partner
   (pův. pilot 0.45, medailon 0.35, odznak neprůhledný gradient 0.82→0.9) */
.pilot-box, .medailon, .odznak { background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 14px; }
.pilot-box { padding: 28px; position: relative; overflow: hidden; }
.pilot-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -15%, rgba(220, 231, 241, 0.12), transparent 60%); pointer-events: none; }
.pilot-num { font-family: var(--disp); font-weight: 700; font-size: 72px; color: var(--text1); line-height: 1; }
.pilot-box p { font-size: 14.5px; margin-top: 10px; }
/* Na skle je jen citát — úvodní odstavec zůstává volný jako popisky ostatních sekcí.
   Leží ale nad nejsvětlejší částí scroll videa, proto je o stupeň světlejší než běžný
   text a má měkký stín, aby se odlepil od obrazu (text-shadow je levný, na rozdíl od
   backdrop-filter, který je nad video vrstvou zakázaný). */
/* vedoucí odstavce sekcí leží nad videem — o stupeň světlejší a s měkkým stínem,
   aby se odlepily od obrazu (text-shadow je levný, backdrop-filter je nad videem zakázaný) */
.odb-uvod,
#features > .wrap > p,
#scenarios > .wrap > p { color: var(--paprsek); text-shadow: 0 1px 14px rgba(11, 15, 20, 0.55); }
.odb-citat-panel { background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 14px; padding: 26px 30px 22px; margin-top: 28px; }
.odb-citat-panel .citat { margin: 0; }
@media (max-width: 700px) { .odb-citat-panel { padding: 22px 20px 18px; } }
.citat { border-left: 3px solid var(--odkaz); padding: 4px 0 4px 20px; margin: 26px 0; font-size: 17px; color: var(--text1); font-style: italic; max-width: 60ch; }
.citat footer { font-style: normal; font-size: 13.5px; color: var(--text2); margin-top: 8px; /* pův. --text3, mělo 3,03:1 */ }
.odb-details { margin-top: 30px; border: 1px solid var(--sklo-ram); border-radius: 14px; background: var(--sklo); /* pův. 0.3 + rám 0.18 + r 12px */ }
.odb-details summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--text2); }
.odb-details summary::-webkit-details-marker { display: none; }
.odb-details summary::after { content: '+'; margin-left: auto; font-family: var(--disp); font-size: 20px; color: var(--text3); }
.odb-details[open] summary::after { content: '−'; }
.odb-details summary:hover { color: var(--text1); }
.dvoj { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 4px; padding: 0 20px 20px; }
.dvoj h3 { font-size: 18px; }
.dvoj ul.rezlist li { font-size: 14.5px; padding: 5px 0; }
/* Grid místo flexu kvůli stejné výšce karet, když jsou pod sebou (široký desktop
   a mobil). Vedle sebe je srovnával stretch a to nikdo neřešil; jakmile se ale
   zalomí pod sebe, je každý řádek sám za sebe a delší popisek jednu kartu zvýší.
   `grid-auto-rows: 1fr` to spraví přesně a bez magického čísla: v kontejneru bez
   pevné výšky se fr řádky nasadí na maximum z obsahu, takže jedno- i dvouřádkový
   medailonek vyjdou stejně vysoko.
   `auto-fit` + `minmax` drží původní chování flex-wrapu — dva sloupce od 496 px
   (2 × 240 + mezera), níž pod sebe. `min(240px, 100%)` je proti přetečení na
   velmi úzkých displejích. */
.medailonky { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 24px; }
/* flex: 1; min-width: 240px; — rozměr převzala mřížka výše */
.medailon { display: flex; align-items: center; gap: 15px; padding: 18px 20px; }
/* Portréty dorazily a jedou jako <img> se stejnou třídou. Kruh, rám i ikonová
   varianta níž zůstávají: kdo fotku nemá, dostane <span> s panáčkem a vypadá to
   stejně. */
.medailon-foto { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(175, 196, 214, 0.08); border: 1px solid rgba(175, 196, 214, 0.18); color: var(--text3); overflow: hidden; }
.medailon-foto svg { width: 27px; height: 27px; }
img.medailon-foto { object-fit: cover; }
.medailon-text { min-width: 0; }
.medailon strong { color: var(--text1); font-size: 15.5px; display: block; }
.medailon span { font-size: 13.5px; color: var(--text3); }
/* Medailonek býval odkaz na profil odborníka a měl stejné ražení jako a.odznak.
   Od 11. 8. 2026 je to zas neklikatelný div (anonymizace), takže pravidla nemají
   na co sedět — ponechána zakomentovaná pro případ, že se prokliky vrátí. */
/*
a.medailon { text-decoration: none; transition: border-color 220ms ease, background 220ms ease; }
a.medailon:hover { border-color: rgba(28, 114, 216, 0.45); background: rgba(11, 15, 20, 0.7); text-decoration: none; }
a.medailon:hover strong { color: #FFFFFF; }
*/

/* odznaky pod medailonky. Partnerský odznak šel 11. 8. 2026 pryč, takže zbyl
   jediný — certifikační. a.odznak a .partner-logo tím osiřely (viz níž). */
.odznak { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 22px; }
.odznak p { font-size: 14px; color: var(--text2); margin: 0; max-width: none; }
.odznak strong { color: var(--text1); }
.odzn-ikona { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(28, 114, 216, 0.14); border: 1px solid rgba(28, 114, 216, 0.38); color: #6AA6EC; }
.odzn-ikona svg { width: 22px; height: 22px; }
/* osiřelé s partnerským odznakem — jediný zbylý odznak je div, ne odkaz */
/*
a.odznak { text-decoration: none; transition: border-color 220ms ease, background 220ms ease; }
a.odznak:hover { border-color: rgba(28, 114, 216, 0.45); background: rgba(11, 15, 20, 0.7); text-decoration: none; }
.partner-logo { flex-shrink: 0; width: 104px; height: auto; opacity: 0.92; }
*/
@media (max-width: 560px) { .odznak { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ---------- sekce 06: showcase (tmavý registr — leží na video podkresu) ---------- */
.showcase .wrap { text-align: center; position: relative; }
.showcase h2 { margin-left: auto; margin-right: auto; }
.showcase h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--paprsek), transparent); }
.showcase p { margin-left: auto; margin-right: auto; }
.showcase .stav { display: inline-block; margin-top: 8px; margin-bottom: 4px; border: 1px solid rgba(220, 231, 241, 0.35); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--text1); letter-spacing: 0.04em; }
.disclaimer { font-size: 12.5px; color: var(--text3); margin-top: 24px; }
/* fakta o ukázce — krátké odrážky vedle sebe, na mobilu pod sebou */
.showcase-fakta { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font-size: 14.5px; color: var(--text2); }
.showcase-fakta li { display: flex; align-items: center; gap: 9px; }
.showcase-fakta li::before { content: ''; width: 5px; height: 13px; background: var(--odkaz); transform: skewX(calc(-1 * var(--uhel))); flex-shrink: 0; }
/* Sekce leží přesně v místě, kde se pozadí přelévá z tmavé do světlé — naměřeno
   rgb(121,140,158) v půlce sekce. Světlý text na tom nemá kontrast (disclaimer měl
   rgb(122,139,153), tedy prakticky barvu pozadí). Obsah proto sedí na stejném
   skleněném panelu jako zbytek stránky a světlo stoupá kolem něj. */
.showcase-panel { max-width: 900px; margin: 0 auto; background: var(--sklo); border: 1px solid var(--sklo-ram); border-radius: 18px; padding: 46px 44px 38px; }
.showcase-panel .stav-radek { margin-top: 30px; }
.showcase-panel .cta-radek { margin-top: 16px; }
.showcase-panel p { max-width: 58ch; }
/* disclaimer nesmí zhasnout: v --text3 měl na spodku sekce 2,75:1, což je u 12,5px
   pod AA. Je to zdravotnické upozornění, takže jede na --text2 (ověřeno 5,4:1). */
.showcase-panel .disclaimer { color: var(--text2); }
.showcase { padding-bottom: 210px; }
@media (max-width: 700px) {
  .showcase-panel { padding: 34px 22px 30px; border-radius: 15px; }
  .showcase { padding-bottom: 150px; }
}

/* ---------- kontakt (světlý registr) ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; margin-top: 10px; }
/* přímé kontakty místo formuláře — e-mail je hlavní prvek sekce */
.kontakt-udaje { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* #contact v selektoru schválně — .svetly a (ř. níže) má vyšší specificitu než samotná třída */
#contact .kontakt-mail { font-family: var(--disp); font-size: clamp(27px, 3.6vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; color: var(--text1); text-decoration: none; word-break: break-word; }
#contact .kontakt-mail:hover { color: var(--most); }
#contact .kontakt-radek { font-size: 17px; color: var(--text2); text-decoration: none; }
#contact .kontakt-radek:hover { color: var(--text1); }

/* formulář zrušen 7.8.2026 — nechceme řešit mailing, kontakt jde přímo
.pole { display: block; margin-bottom: 16px; }
.pole > span { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 7px; }
.inp { width: 100%; min-height: 46px; background: var(--panel); border: 1px solid var(--povrch2); border-radius: 9px; padding: 12px 14px; color: var(--text1); font: inherit; font-size: 15px; }
.inp::placeholder { color: var(--text3); }
.inp:focus-visible { outline: 2px solid #14181D; outline-offset: 2px; }
textarea.inp { min-height: 110px; resize: vertical; }
.kontakt-alt { font-size: 14px; color: var(--text3); margin-top: 16px; }
--------------------------------------------------------------------------- */
.svetly a { color: #2E5B82; }

/* ---------- footer (tmavý registr — v barvě horní lišty) ----------
   Pův. světlý #F3F6F9 jako dojezd světelného oblouku. Přebarveno 7.8.2026 na pokyn:
   bílá deska po tmavém blogu byla useknutá. Barva i barvy odkazů schválně kopírují
   .nav, ať se lišta a patička čtou jako jeden rám kolem stránky. Bez průhlednosti —
   .nav si může dovolit rgba + blur, patička leží na fixní video vrstvě (viz CLAUDE.md). */
footer.paticka { padding: 44px 0 50px; background: var(--noc); border-top: 1px solid #161D26; }
.paticka .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.paticka img { height: 24px; width: auto; }
.paticka nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.paticka nav a { color: #AFC4D6; }
.paticka nav a:hover { color: #F4F6F8; }
/* .pravni zůstává jen na právních stránkách a blogu (jednoduchá patička logo + copyright);
   landingy mají copyright v nav jako .paticka-copy */
.paticka .pravni { font-size: 12.5px; color: #7A8B99; width: 100%; margin-top: 10px; }
/* copyright na stejném řádku jako odkaz, oddělený pipou */
/* NE display:flex — <span id="rok"> uvnitř by se stal samostatnou flex položkou
   a „© 2026 More is More" by se roztrhlo na tři kusy s mezerou gapu */
.paticka nav .paticka-copy { color: #7A8B99; }
.paticka nav .paticka-copy::before { content: '|'; margin-right: 18px; color: rgba(175, 196, 214, 0.26); }
/* logová řada: AGORIVA + More is More (třetí, partnerské, šlo 11. 8. 2026 pryč).
   Výšky jsou dané opticky, ne shodně — loga mají různý poměr a různou výšku
   verzálek, na jednotných 24px by MiM wordmark (6:1) opticky přebil AGORIVU (2,8:1). */
.paticka-loga { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.paticka-loga a { display: flex; }
/* AGORIVA logo.png má kolem wordmarku 49 % průhledného okraje, takže na 24px byl
   vidět jen ~12px kresby a vedle ostatních log opticky zmizel. 40px dá stejnou
   výšku kresby jako 20px u tight-cropped SVG. */
.paticka-loga img { height: 40px; }
.paticka .logo-mim { height: 20px; }
/* .paticka .logo-partner { height: 21px; }  — logo odstraněno 11. 8. 2026 */

/* ---------- reveal (jen s JS; s vypnutým pohybem vše viditelné) ---------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.75s ease-out, transform 0.75s ease-out; }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal:nth-child(2) { transition-delay: 90ms; }
html.js .reveal:nth-child(3) { transition-delay: 180ms; }
html.js .reveal img { filter: blur(14px); transform: scale(1.03); transition: filter 0.9s ease, transform 0.9s ease; }
html.js .reveal.in img { filter: none; transform: none; }
/* velké slidy carouselů z unblur efektu vyjmuté — blur na celošířkovém obrázku je drahý */
/* transition: opacity, ne none — vyřadit se má jen blur/scale reveal, ale `none` zabíjelo
   i náběh obrázku po dotažení (toto pravidlo má vyšší specificitu než html.js .slide img) */
html.js .reveal .slide img, html.js .reveal.in .slide img { filter: none; transform: none; transition: opacity 300ms ease; }
.scen img { will-change: filter; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .reveal img { filter: none !important; transform: none !important; transition: none !important; }
}

/* ---------- responsivita ---------- */
/* sloupec claimů se vejde vedle panelu jen na širokém desktopu; níž zůstane
   samotný panel, jehož popisek nese tentýž text */
@media (max-width: 1000px) {
  .plat { grid-template-columns: 1fr; gap: 0; }
  #dash-list { display: none; }
}
@media (max-width: 980px) {
  section { padding: 96px 0 76px; }
  .odb-grid, .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
  /* .scen-duo { grid-template-columns: 1fr; }
  .scen.vlastni { min-height: 200px; } */
  .scen-grid { grid-template-columns: repeat(2, 1fr); }
  .featury { grid-template-columns: 1fr; gap: 34px; }
  .kroky3 { grid-template-columns: 1fr; gap: 34px; }
  /* kroky4 a seznam dashboardu neměly responzivní pravidlo vůbec — držely 4 sloupce
     do 390px, kde karta vycházela na 69px a text se lámal po jednom slově */
  .kroky4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  section { padding: 76px 0 60px; }
  .scen-grid { grid-template-columns: 1fr; }
  .dvoj { grid-template-columns: 1fr; }
  .kroky4 { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  html:not(.js) .pribeh-stage, .pribeh.staticky .pribeh-stage { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- právní stránky ---------- */
/* Vlastní blok, ne inline styl jako v privacy.html: privacy-vr a terms-vr jsou dlouhé
   číslované texty ve čtyřech zrcadlených souborech (CZ + EN), inline by se to nedalo
   držet v synchronu. Scope .pravni-stranka sedí na <section>. */
.pravni-stranka { padding-top: 140px; }
.pravni-stranka .wrap { max-width: 780px; }
.pravni-stranka h1 { font-size: clamp(30px, 4vw, 44px); }
.pravni-stranka h2 { font-size: 23px; margin: 46px 0 12px; letter-spacing: 0; }
.pravni-stranka h2::after { display: none; }
.pravni-stranka h3 { font-size: 17.5px; font-weight: 600; margin: 26px 0 6px; }
.pravni-stranka p { margin-bottom: 12px; }
.pravni-stranka ul.rezlist { margin-bottom: 12px; }
/* Základní ul.rezlist li je flex kontejner (kvůli zarovnání odrážky na baseline).
   V právním textu jsou uvnitř odrážek <strong> — ty by se v flexu staly samostatnými
   položkami a řádek by se rozpadl do sloupců. Proto je tu li blok s odrážkou
   napozicovanou absolutně; zachová se přesazení i obtékání víceřádkového textu.
   Levý odsazení 26px = původní 5px šířka + 9px margin + 12px gap. */
.pravni-stranka ul.rezlist li { display: block; position: relative; font-size: 15.5px; padding: 5px 0 5px 26px; max-width: 72ch; }
.pravni-stranka ul.rezlist li::before { position: absolute; left: 0; top: 11px; margin-right: 0; }
.pravni-stranka .meta { font-size: 14px; color: var(--text3); }
.pravni-stranka .navrh { margin-top: 24px; color: var(--chyba); font-size: 14px; }
/* shrnutí nahoře — recenzent Mety i uživatel mají odpověď dřív, než začne číst sekce.
   Záměrně NE var(--sklo): ten je průhledný pro čtení nad videem, ale právní stránka má
   plochý podklad var(--noc), takže by panel zmizel. Tady je potřeba světlejší --panel. */
.pravni-stranka .shrnuti { margin: 30px 0 10px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--povrch2); border-radius: 12px; }
.pravni-stranka .shrnuti ul.rezlist { margin-bottom: 0; }
.pravni-stranka .duraz { border-left: 2px solid var(--odkaz); padding-left: 16px; margin: 18px 0; color: var(--text1); }
.pravni-stranka .obsah { margin: 28px 0 10px; }
.pravni-stranka .obsah a { display: block; padding: 3px 0; font-size: 15px; }
/* nescopováno na .pravni-stranka: blok „Související dokumenty" má i privacy.astro,
   které tuhle třídu nemá. Blog si .konec přebíjí vlastním pravidlem s vyšší specificitou. */
.konec { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--povrch2); }
.konec p { font-size: 15px; }
@media (max-width: 700px) {
  .pravni-stranka { padding-top: 112px; }
  .pravni-stranka .shrnuti { padding: 16px 18px; }
}

/* ---------- blog ---------- */
/* Blogové stránky nemají video podkres ani světelný oblouk — leží na plochém var(--noc)
   jako právní stránky. Video je dramaturgicky vázané na sekce #intro → #showcase, mimo
   ně nedává smysl. Hlavičku, patičku a .reveal sdílejí s landingem beze změny. */

/* aktivní položka navigace — bez pomocné třídy, jde to z aria-current */
.nav-links a[aria-current="page"], .menu-list a[aria-current="page"] { color: var(--text1); }

/* ---- seznam článků ---- */
.blog-hlava { padding: 148px 0 96px; }
.blog-hlava h1 { font-size: clamp(34px, 5vw, 56px); }
.blog-perex { margin-top: 22px; font-size: 18.5px; color: var(--text2); max-width: 56ch; }

/* řádky oddělené linkou, ne mřížka dlaždic — při dvou článcích by mřížka vypadala prázdně */
.clanky { margin-top: 52px; }
.clanek-radek { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: center; padding: 32px 0; border-top: 1px solid var(--sklo-ram); color: inherit; text-decoration: none; }
.clanek-radek:last-child { border-bottom: 1px solid var(--sklo-ram); }
.clanek-radek:hover { text-decoration: none; }
.clanek-nahled { border-radius: 12px; overflow: hidden; background: var(--panel); }
.clanek-nahled img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 520ms ease; }
.clanek-radek:hover .clanek-nahled img { transform: scale(1.04); }
.clanek-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); }
.clanek-radek h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 12px 0 10px; letter-spacing: 0; }
.clanek-radek:hover h2 { color: var(--odkaz); }
.clanek-radek p { font-size: 15.5px; max-width: 54ch; margin: 0; }
.clanek-sipka { display: inline-block; margin-top: 14px; font-size: 14.5px; color: var(--odkaz); }

/* ---- článek ---- */
.clanek { padding-top: 140px; }
.clanek .wrap { max-width: 736px; }
.clanek h1 { font-size: clamp(31px, 4.4vw, 48px); margin-top: 6px; }
.clanek .datum { margin-top: 20px; font-size: 13.5px; color: var(--text3); letter-spacing: 0.04em; }
.clanek .lead { margin-top: 26px; font-family: var(--disp); font-weight: 500; font-size: 19.5px; line-height: 1.5; color: var(--text1); max-width: none; }
.clanek .telo p { max-width: none; margin-top: 20px; }
.clanek .telo h2 { font-size: 25px; margin: 48px 0 0; letter-spacing: 0; }
.clanek .telo strong { color: var(--text1); font-weight: 600; }
.clanek .telo .citat { margin: 26px 0 0; }
.clanek .telo .disclaimer { max-width: none; }
.clanek figure { margin: 40px 0 0; }
.clanek figure img { border-radius: 12px; width: 100%; }
.clanek figcaption { margin-top: 11px; font-size: 13.5px; line-height: 1.5; color: var(--text3); }
.clanek .konec { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--sklo-ram); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* v běžícím textu by gradientní linka pod každým mezititulkem dělala předěl sekce */
.clanek-radek h2::after, .clanek .telo h2::after { content: none; }
/* obrázky článku ven z blur-revealu — stejný důvod jako u slidů karuselů výš:
   blur přes obrázek na plnou šířku sloupce je drahý */
html.js .clanek .reveal img, html.js .clanek .reveal.in img { filter: none; transform: none; transition: none; }

@media (max-width: 760px) {
  .blog-hlava { padding: 112px 0 72px; }
  .clanek { padding-top: 112px; }
  .clanek-radek { grid-template-columns: 1fr; gap: 20px; padding: 26px 0; }
}

/* ---------- lupa: zvětšení snímku z karuselu ---------- */
/* Snímky dashboardu i galerie jsou na mobilu nečitelné a i na desktopu se
   zobrazují menší, než je jejich rozlišení. Klik je otevře přes celou plochu.
   Váže se jen na <img> — trailer v galerii je <video> a ten se neotevírá. */
.carousel .slide img { cursor: zoom-in; }

.lupa { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(6, 9, 12, 0.94); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.lupa.otevrena { opacity: 1; pointer-events: auto; }
.lupa img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
.lupa-zavrit { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 11px; background: rgba(175, 196, 214, 0.12); border: 1px solid var(--sklo-ram); color: var(--text1); font-family: var(--sans); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lupa-zavrit:hover { background: rgba(175, 196, 214, 0.2); }
.lupa-popis { position: absolute; left: 22px; right: 22px; bottom: 16px; text-align: center; font-size: 13.5px; color: var(--text2); max-width: none; }
/* nadpis popisku na vlastní řádek — v panelu pod obrázkem to dělá stejné pravidlo */
.lupa-popis strong { display: block; font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--text1); margin-bottom: 3px; }
html.lupa-otevrena, html.lupa-otevrena body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lupa { transition: none; } }
@media (max-width: 700px) {
  .lupa { padding: 12px; }
  .lupa-popis { bottom: 10px; font-size: 12.5px; }
}

/* ---------- vlaječky v přepínači jazyka ---------- */
/* Vlajka je čistě dekorace s aria-hidden — význam nese textový popisek vedle ní.
   Vlajka totiž označuje zemi, ne jazyk, takže sama o sobě by byla nejednoznačná. */
.vlajka { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset; }
.jazyk-list a { display: flex; align-items: center; gap: 9px; }
.menu-list a .vlajka { margin-right: 9px; display: inline-block; vertical-align: -1px; }