/* ==========================================================================
   coolsoft.cz — návrh webu
   --------------------------------------------------------------------------
   Jeden stylopis pro celý statický návrh. VŠECHNY barvy jsou jen v sekci 1;
   komponenty níž sahají výhradně na role (--brand, --accent, --hero-bg…),
   nikdy na konkrétní hodnotu. Změna barevnosti je proto přepis jednoho bloku.

   Bez externích zdrojů — návrh se musí dát otevřít i přímo z disku (file://).
   ========================================================================== */

/* ==========================================================================
   1. BAREVNÉ ROLE — navy + jantar
   --------------------------------------------------------------------------
   Vybráno 2026-08-17 ze čtyř variant. Navy drží vizuální most na manuál CoolCMS,
   jantar odlišuje coolsoft.cz od zelené vytvorweb.cz.

   Role:
     --ink          hlavní text a tmavé plochy
     --brand        primární akce, odkazy, aktivní stavy
     --accent       zvýraznění, malé plochy, dekorace
     --hero-*       hlavička + hero, které mají vlastní kontrastní režim
   ========================================================================== */

:root {
	--ink:            #0f1e38;
	--ink-2:          #33415c;
	--muted:          #64748b;

	--brand:          #1a2b4a;
	--brand-700:      #0f1e38;
	--brand-300:      #7d90b3;
	--brand-50:       #eef2f8;

	--accent:         #e8890c;
	--accent-700:     #b96b06;
	--accent-50:      #fdf3e3;

	--bg:             #ffffff;
	--bg-soft:        #f6f8fb;
	--surface:        #ffffff;
	--border:         #e3e8f0;

	--hero-bg:        radial-gradient(120% 120% at 82% 0%, #24406e 0%, #16294a 45%, #0e1c33 100%);
	--hero-ink:       #ffffff;
	--hero-muted:     #a9bad6;
	--hero-line:      rgba(255, 255, 255, .14);

	--dark-bg:        #0f1e38;

}

/* ==========================================================================
   2. ZBYLÉ TOKENY — rozměry, poloměry, stíny, typografie
   ========================================================================== */

:root {
	--container:   1200px;
	--container-narrow: 780px;

	--r-sm:  8px;
	--r-md:  12px;
	--r-lg:  18px;
	--r-xl:  26px;
	--r-pill: 999px;

	--shadow-1: 0 1px 2px rgba(15, 30, 56, .06), 0 1px 3px rgba(15, 30, 56, .04);
	--shadow-2: 0 4px 12px rgba(15, 30, 56, .07), 0 2px 4px rgba(15, 30, 56, .04);
	--shadow-3: 0 18px 40px rgba(15, 30, 56, .12), 0 4px 10px rgba(15, 30, 56, .06);
	--shadow-4: 0 40px 90px rgba(15, 30, 56, .22), 0 8px 20px rgba(15, 30, 56, .10);

	/* Bez Google Fonts — písmo se nesmí stahovat, návrh musí fungovat i z disku. */
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--section-y: clamp(56px, 8vw, 104px);
}

/* ==========================================================================
   3. ZÁKLAD
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	/* Kotva pod lepivou hlavičkou nesmí skončit schovaná za ní. */
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	font-weight: 700;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); text-decoration-color: currentColor; }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   4. ROZVRŽENÍ
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 22px;
}

.section { padding-block: var(--section-y); }
.section--muted { background: var(--bg-soft); }
.section--dark { background: var(--dark-bg); color: var(--hero-muted); }
.section--dark h2, .section--dark h3 { color: var(--hero-ink); }

/* 🔴 Karta si i v tmavé sekci nechává SVĚTLÝ podklad (`.card` má --surface).
   Nadpis a cena v ní proto musí zůstat tmavé — jinak je pravidlo o řádek výš
   přebarví na bílou a na bílé kartě úplně zmizí. */
.section--dark .card h3,
.section--dark .card .card__price { color: var(--ink); }

.grid { display: grid; gap: 22px; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   5. HLAVIČKA SEKCE
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 14px;
}
.eyebrow::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--accent);
	border-radius: 2px;
}
.section--dark .eyebrow { color: var(--accent); }

.section-head { max-width: 640px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.lead { font-size: 1.1rem; color: var(--muted); }
.section--dark .lead { color: var(--hero-muted); }

/* ==========================================================================
   6. TLAČÍTKA
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
	background: var(--brand);
	color: #fff;
	box-shadow: var(--shadow-2);
}
.btn--primary:hover { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-3); }

.btn--accent {
	background: var(--accent);
	color: #fff;
	box-shadow: var(--shadow-2);
}
.btn--accent:hover { background: var(--accent-700); color: #fff; box-shadow: var(--shadow-3); }

.btn--outline {
	background: transparent;
	border-color: var(--border);
	color: var(--ink);
}
.btn--outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }

/* Na tmavém podkladu (hero, tmavá section) je obrysové tlačítko světlé. */
.on-dark .btn--outline {
	border-color: var(--hero-line);
	color: var(--hero-ink);
	background: rgba(255, 255, 255, .04);
}
.on-dark .btn--outline:hover {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.btn--sm  { padding: 9px 16px; font-size: .9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ==========================================================================
   7. ODZNAKY
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: var(--r-pill);
	font-size: .82rem;
	font-weight: 600;
	background: var(--brand-50);
	color: var(--brand);
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}
.badge--accent { background: var(--accent-50); color: var(--accent-700); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.badge--light {
	background: rgba(255, 255, 255, .1);
	color: var(--hero-ink);
	border-color: var(--hero-line);
	backdrop-filter: blur(6px);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ==========================================================================
   8. LOGO
   --------------------------------------------------------------------------
   Znak je stavebnice: čtyři dlaždice, které do sebe zapadají — jantarová je
   ten modul, který si zákazník doplní. Kreslí se přes `currentColor` + akcent,
   takže se sám přebarví s paletou.

   Logotyp je ve zkoušce ve dvou podobách; přepíná je `data-logo` na <html>
   (viz `?_logo=5b`). Až padne rozhodnutí, poražená varianta z kódu zmizí.
   ========================================================================== */

.logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--ink);
	font-size: 1.24rem;
	line-height: 1;
}
.logo:hover { color: var(--ink); }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__word { display: flex; flex-direction: column; gap: 3px; }

/* Logotyp — písmena zůstávají textem, obličej je vsazená kresba. Rozměry jsou
   v `em`, aby logotyp šel zvětšit jediným `font-size` na `.logo`. */
.logo__name {
	display: inline-flex;
	align-items: center;
	font-weight: 800;
	letter-spacing: -.025em;
}
/* Jantarový dovětek — odlišuje název produktu od „cool" barvou, ne verzálkou. */
.logo__suffix { color: var(--accent); }

.logo__face   { width: 1.53em; height: 1.53em; flex: none; margin: 0 .04em; }
.logo__smiley { width: .77em;  height: .77em;  flex: none; margin: 0 .03em; }

/* Výchozí je 7d; 5b se zapne atributem, který nastaví přepínač v hlavičce.
   Třídy `.logo--7d` / `.logo--5b` vynutí variantu bez ohledu na přepínač —
   to potřebuje jen design systém, kde stojí obě vedle sebe. */
.logo__name--5b { display: none; }
html[data-logo="5b"] .logo__name--7d { display: none; }
html[data-logo="5b"] .logo__name--5b { display: inline-flex; }
.logo.logo--7d .logo__name--7d,
.logo.logo--5b .logo__name--5b { display: inline-flex; }
.logo.logo--7d .logo__name--5b,
.logo.logo--5b .logo__name--7d { display: none; }

.logo__sub {
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}
.on-dark .logo, .on-dark .logo:hover { color: var(--hero-ink); }
.on-dark .logo__sub { color: var(--hero-muted); }

/* ==========================================================================
   9. HLAVIČKA WEBU
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid var(--border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 74px;
}
.site-header__nav {
	display: none;
	gap: 4px;
	margin-inline: auto;
}
@media (min-width: 1000px) { .site-header__nav { display: flex; } }

.site-header__link {
	padding: 9px 14px;
	border-radius: var(--r-pill);
	font-size: .96rem;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.site-header__link:hover { background: var(--brand-50); color: var(--brand); }

.site-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1000px) { .site-header__actions { margin-left: 0; } }
.site-header__actions .btn--primary { display: none; }
@media (min-width: 620px) { .site-header__actions .btn--primary { display: inline-flex; } }

/* Mobilní menu — bez JavaScriptu, na prvku <details>. Nad 1000 px se schová,
   protože tam je vidět plné vodorovné menu. */
.nav-toggle { position: relative; }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-toggle > summary {
	list-style: none;
	cursor: pointer;
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--ink);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary svg { width: 20px; height: 20px; }
.nav-toggle[open] > summary { border-color: var(--brand); color: var(--brand); }
.nav-toggle[open] > summary .nav-toggle__close { display: block; }
.nav-toggle[open] > summary .nav-toggle__open { display: none; }
.nav-toggle__close { display: none; }

.nav-toggle__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 220px;
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
	display: grid;
	gap: 2px;
	z-index: 60;
}
.nav-toggle__panel a {
	padding: 11px 14px;
	border-radius: var(--r-sm);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}
.nav-toggle__panel a:hover { background: var(--brand-50); color: var(--brand); }

/* Přepínač jazyka */
.lang-switch {
	display: flex;
	align-items: center;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--surface);
}
.lang-switch a {
	padding: 5px 11px;
	border-radius: var(--r-pill);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--muted);
}
.lang-switch a:hover { color: var(--brand); background: var(--brand-50); }
.lang-switch a[aria-current="true"] { background: var(--brand); color: #fff; }

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
	position: relative;
	background: var(--hero-bg);
	color: var(--hero-muted);
	overflow: hidden;
	padding-block: clamp(56px, 8vw, 96px) clamp(60px, 9vw, 110px);
}
/* Jemný rastr — dělá z ploché barvy povrch, ale nesmí soupeřit s textem. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--hero-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
	background-size: 62px 62px;
	mask-image: radial-gradient(80% 70% at 50% 20%, #000 0%, transparent 78%);
	opacity: .5;
	pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid {
	display: grid;
	gap: clamp(38px, 5vw, 60px);
	align-items: center;
}
/* Položky mřížky nesmí roztáhnout sloupec svým min-content — na 390 px by hero
   přetekl o 24 px a text by se ořízl (naměřeno 3. 9. 2026). */
.hero__grid > * { min-width: 0; }
@media (min-width: 1040px) {
	.hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.12fr); }
}

.hero h1 { color: var(--hero-ink); margin-bottom: .35em; }
.hero__lead { font-size: clamp(1.06rem, 1.7vw, 1.24rem); color: var(--hero-muted); max-width: 34em; margin-bottom: 30px; }
.hero .btn-row { margin-bottom: 30px; }

.hero__sign {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-top: 22px;
	border-top: 1px solid var(--hero-line);
	font-size: .93rem;
	color: var(--hero-muted);
}
.hero__sign strong { color: var(--hero-ink); font-weight: 600; }

.avatar {
	width: 46px; height: 46px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: .95rem;
	color: #fff;
	background: linear-gradient(140deg, var(--accent), var(--accent-700));
	box-shadow: 0 0 0 2px var(--hero-line);
	letter-spacing: .02em;
}

/* ==========================================================================
   11. MOCKUP APLIKACE
   --------------------------------------------------------------------------
   Ukázka rozhraní kreslená v CSS. Záměr: při porovnávání barevných variant se
   přebarví spolu se zbytkem webu — na rozdíl od printscreenu, který by ve všech
   variantách vypadal stejně a výběr barvy by zkresloval.
   ========================================================================== */

.mock {
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-4);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
}
.mock--tilted { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); }
@media (max-width: 1039px) { .mock--tilted { transform: none; } }

.mock__chrome {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: none; }
.mock__url {
	margin-left: 10px;
	padding: 4px 14px;
	border-radius: var(--r-pill);
	background: #fff;
	border: 1px solid var(--border);
	font-size: .72rem;
	color: var(--muted);
	font-family: var(--font-mono);
	/* Na úzké obrazovce se adresa musí uříznout, ne zalomit na dva řádky —
	   dvouřádkový „adresní řádek" v prohlížeči neexistuje a kazí iluzi. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.mock__body { display: flex; min-height: 340px; background: var(--bg-soft); }

.mock__sidebar {
	width: 168px;
	flex: none;
	padding: 16px 12px;
	background: var(--dark-bg);
}

/* 🔴 Na úzké obrazovce se z bočního menu stane vodorovný pruh — NESMÍ zmizet.
   Dřív tu bylo `display: none`, jenže tím se na telefonu ztratila jediná
   interakce v hero: tlačítka měla rozměr 0×0 a nápověda pod mockupem
   odkazovala na menu, které nebylo vidět.

   Nekliknutelné položky (statické `div`) se schovají, aby ve čtyřech
   tlačítkách nezanikla ta, na která se dá sáhnout. */
@media (max-width: 559px) {
	.mock__body { flex-direction: column; }

	.mock__sidebar {
		width: auto;
		display: flex;
		gap: 4px;
		padding: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.mock__sidebar::-webkit-scrollbar { display: none; }

	.mock__brand,
	.mock__sidebar div.mock__item { display: none; }

	/* Dvě třídy schválně — `button.mock__item` výš nastavuje `width: 100 %`
	   a jednou třídou by se to nepřebilo. */
	.mock__sidebar .mock__item {
		width: auto;
		flex: none;
		white-space: nowrap;
		padding: 7px 12px;
	}
	.mock__sidebar .mock__item i { display: none; }
}

.mock__brand {
	display: flex; align-items: center; gap: 8px;
	padding: 0 6px 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mock__brand-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); flex: none; }
.mock__brand-name { font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }

.mock__item {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 8px;
	border-radius: var(--r-sm);
	font-size: .74rem;
	color: rgba(255, 255, 255, .62);
}
.mock__item i { width: 13px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, .28); flex: none; }
.mock__item.is-active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.mock__item.is-active i { background: var(--accent); }

/* Položky, které jsou doopravdy klikací, jsou <button>. Musí vypadat stejně jako
   nekliknutelné, jinak by mockup přestal vypadat jako mockup — proto reset. */
button.mock__item {
	width: 100%;
	font: inherit;
	font-size: .74rem;
	text-align: left;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
button.mock__item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
button.mock__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Obsah se při přepnutí pohledu prolne. Záměrně JEN opacita — žádný posun,
   aby se nic „nestěhovalo" na své místo. */
.mock__main { transition: opacity .18s ease; }
.mock__body.is-switching .mock__main { opacity: 0; }

/* Nápověda, že mockup žije. Bez ní na něj nikdo nesáhne a celý efekt zůstane
   neobjevený; po prvním kliknutí zmizí, protože už nemá co říct. */
.mock-hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--hero-line);
	color: var(--hero-muted);
	font-size: .84rem;
	transition: opacity .3s ease;
}
.mock-hint svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.mock-hint[hidden] { display: none; }
.mock-napoveda__puls {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
	animation: mock-puls 2.4s ease-in-out infinite;
}
/* Kontinuální dýchání — nemá začátek ani konec, takže nic nikam „nedojíždí". */
@keyframes mock-puls {
	0%, 100% { opacity: 1;  box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
	50%      { opacity: .5; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%,  transparent); }
}

.mock__main { flex: 1; padding: 18px; min-width: 0; }
.mock__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mock__title { font-size: .92rem; font-weight: 700; color: var(--ink); }
.mock__action {
	padding: 5px 13px;
	border-radius: var(--r-pill);
	background: var(--brand);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	white-space: nowrap;
}

.mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.mock__stat {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: 11px;
}
.mock__stat small { display: block; font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.mock__stat b { font-size: 1.02rem; color: var(--ink); letter-spacing: -.02em; }
.mock__stat em { font-style: normal; font-size: .62rem; color: var(--accent-700); font-weight: 700; margin-left: 5px; }

.mock__table { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mock__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.mock__row:last-child { border-bottom: 0; }
.mock__row--head { background: var(--bg-soft); }
.mock__skeleton { height: 7px; border-radius: 4px; background: var(--border); }
.mock__row--head .mock__skeleton { background: var(--brand-300); opacity: .5; height: 6px; }
.mock__status {
	margin-left: auto; flex: none;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	font-size: .58rem;
	font-weight: 700;
	background: var(--accent-50);
	color: var(--accent-700);
}
.mock__status--ok { background: var(--brand-50); color: var(--brand); }

/* ==========================================================================
   12. PRUH ČÍSEL
   ========================================================================== */

.stats {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(2, 1fr);
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { background: var(--surface); padding: 26px 22px; text-align: center; }
.stat b {
	display: block;
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--brand);
	line-height: 1.05;
}
/* Jantar je na bílém podkladu čitelnější v tmavším odstínu než na tmavém pozadí. */
.stat b { color: var(--accent-700); }
.stat span { display: block; font-size: .88rem; color: var(--muted); margin-top: 5px; }

/* ==========================================================================
   13. KARTY
   ========================================================================== */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 26px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-3);
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	color: inherit;
}
.card h3 { margin-bottom: .4em; }
.card p { font-size: .96rem; color: var(--muted); }

.icon {
	width: 46px; height: 46px;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	background: var(--brand-50);
	color: var(--brand);
	margin-bottom: 16px;
}
.icon svg { width: 23px; height: 23px; }
.card--link:hover .icon { background: var(--brand); color: #fff; }
.icon--accent { background: var(--accent-50); color: var(--accent-700); }

/* Velká varianta do hlavičky podstránky modulu. Zvětšit se musí i glyf uvnitř —
   .icon svg má jinak pevných 23 px a ikona by se v dlaždici ztratila. */
.icon--xl { width: 92px; height: 92px; border-radius: var(--r-xl); margin-bottom: 0; }
.icon--xl svg { width: 44px; height: 44px; }
.card--link:hover .icon--accent { background: var(--accent); color: #fff; }

/* Seznam částí modulu uvnitř karty */
.tag-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tag-list li {
	font-size: .78rem;
	color: var(--muted);
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	padding: 3px 10px;
}

/* ==========================================================================
   14. PILÍŘE (dvousloupcová section text + mock)
   ========================================================================== */

.split {
	display: grid;
	gap: clamp(34px, 5vw, 58px);
	align-items: center;
}
@media (min-width: 960px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--reverse > *:first-child { order: 2; }
@media (max-width: 959px) { .split--reverse > *:first-child { order: 0; } }

.feature-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list svg {
	width: 21px; height: 21px;
	flex: none;
	margin-top: 3px;
	color: var(--accent);
}
.feature-list strong { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.feature-list span { font-size: .96rem; color: var(--muted); }
.section--dark .feature-list span { color: var(--hero-muted); }
.section--dark .feature-list strong { color: var(--hero-ink); }

/* ==========================================================================
   15. CENÍK
   ========================================================================== */

.plans { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: 32px 28px;
}
.plan--featured {
	border-color: var(--brand);
	box-shadow: var(--shadow-3);
	border-width: 2px;
}
.plan__badge {
	position: absolute;
	top: -13px; left: 50%;
	transform: translateX(-50%);
	padding: 5px 15px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
}
.plan h3 { font-size: 1.28rem; margin-bottom: 6px; }
.plan__desc { font-size: .93rem; color: var(--muted); min-height: 3.2em; }
.plan__price {
	margin: 20px 0 4px;
	font-size: 2.3rem;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--ink);
	line-height: 1.05;
}
.plan__price small { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-bottom: 4px; }
.plan__price em { font-style: normal; font-size: 1.1rem; font-weight: 700; }
.plan__note { font-size: .82rem; color: var(--muted); margin-bottom: 22px; }

.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.plan ul li { display: flex; gap: 11px; font-size: .95rem; align-items: flex-start; }
.plan ul svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--accent); }
.plan .btn { margin-top: auto; width: 100%; }

.pricing-note {
	margin-top: 26px;
	padding: 18px 22px;
	border-radius: var(--r-lg);
	background: var(--brand-50);
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
	font-size: .93rem;
	color: var(--ink-2);
}

/* ==========================================================================
   16. OSOBNÍ SEKCE
   ========================================================================== */

.about { display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 300px minmax(0, 1fr); } }

.about__photo {
	aspect-ratio: 1;
	border-radius: var(--r-xl);
	background: linear-gradient(150deg, var(--brand) 0%, var(--brand-700) 60%, var(--accent-700) 160%);
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 4.4rem;
	font-weight: 800;
	letter-spacing: -.04em;
	box-shadow: var(--shadow-3);
	position: relative;
	overflow: hidden;
}
.about__photo::after {
	content: attr(data-caption);
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 9px;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-align: center;
	background: rgba(0, 0, 0, .35);
	color: rgba(255, 255, 255, .85);
}

.quote {
	font-size: clamp(1.15rem, 2.1vw, 1.42rem);
	line-height: 1.5;
	color: var(--ink);
	letter-spacing: -.015em;
	margin-bottom: 22px;
}
.sign__name { font-weight: 700; color: var(--ink); }
.sign__role { font-size: .92rem; color: var(--muted); }

/* ==========================================================================
   17. PRUH S VÝZVOU
   ========================================================================== */

.cta {
	position: relative;
	border-radius: var(--r-xl);
	padding: clamp(34px, 5vw, 60px);
	background: var(--hero-bg);
	color: var(--hero-muted);
	overflow: hidden;
	text-align: center;
}
/* 🔴 Nadhlaví v tmavém pruhu s výzvou dědilo `--brand` (navy) na navy podkladu —
   bylo prakticky neviditelné. `.cta` není `.section--dark`, takže se na něj
   výjimka o pár řádků výš nevztahuje a potřebuje vlastní. */
.cta .eyebrow { color: var(--accent); }
.cta h2 { color: var(--hero-ink); }
.cta .lead { color: var(--hero-muted); margin-inline: auto; max-width: 46em; }
.cta .btn-row { justify-content: center; margin-top: 26px; }

/* ==========================================================================
   18. ČASTÉ DOTAZY
   ========================================================================== */

.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq__item {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface);
	margin-bottom: 10px;
	overflow: hidden;
}
.faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 17px 22px;
	font-weight: 600;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 14px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: "";
	margin-left: auto;
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item[open] summary { color: var(--brand); }
.faq__body { padding: 0 22px 20px; font-size: .97rem; color: var(--muted); }

/* ==========================================================================
   19. PATIČKA
   ========================================================================== */

.site-footer {
	background: var(--dark-bg);
	color: var(--hero-muted);
	padding-block: clamp(46px, 6vw, 72px) 30px;
}
.site-footer__grid {
	display: grid;
	gap: 34px;
	margin-bottom: 44px;
}
@media (min-width: 760px)  { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; } }

.site-footer h4 {
	color: var(--hero-ink);
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 15px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--hero-muted); text-decoration: none; font-size: .94rem; }
.site-footer a:hover { color: var(--hero-ink); text-decoration: underline; }
.site-footer__about { font-size: .94rem; max-width: 30em; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid var(--hero-line);
	font-size: .87rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   20. TOK OBJEDNÁVKY — živý důkaz věty „objednávka projde celým domem"
   --------------------------------------------------------------------------
   Spouští se TLAČÍTKEM, ne scrollem. Uzly jsou od začátku na svých místech,
   mění se jen jejich stav; spojnice se dokresluje zleva doprava. Nic nepřijíždí
   zvenčí — pohyb zůstává uvnitř ohraničeného schématu a nekonkuruje čtení.
   ========================================================================== */

/* Bez JavaScriptu se interaktivní ukázky nevykreslí vůbec. Tvrzení, které
   dokazují, stojí v textu nad nimi a to zůstává čitelné — mrtvé tlačítko by
   působilo hůř než chybějící prvek. */
html:not(.js) .flow,
html:not(.js) .snapshot { display: none; }

.flow {
	margin-top: 26px;
	padding: clamp(22px, 3vw, 34px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-2);
}

.flow__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-bottom: 30px;
}
.flow__head > div { flex: 1 1 300px; }
.flow__head h3 { margin-bottom: .25em; }
.flow__head p { font-size: .95rem; color: var(--muted); }
.flow__head .btn { flex: none; }

.flow__nodes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px 38px;
	counter-reset: uzel;
}
@media (min-width: 780px) { .flow__nodes { grid-template-columns: repeat(4, 1fr); } }

.flow__node {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-template-areas: "icon nazev" "icon udalost";
	align-items: center;
	gap: 0 14px;
}
@media (min-width: 780px) {
	.flow__node {
		grid-template-columns: 1fr;
		grid-template-areas: "icon" "nazev" "udalost";
		align-items: start;
		gap: 12px 0;
	}
}

/* Spojnice mezi uzly — dvě vrstvy nad sebou: ::after je světlý podklad (cesta je
   čitelná i než po ní něco projde), ::before je jantarová čára, která se dokresluje.

   Na mobilu svisle v mezeře mezi řádky. Na šířce musí sahat od PRAVÉHO okraje
   předchozí ikony k levému okraji té současné — ne jen přes mezeru mřížky. Ikony
   sedí u levého kraje širokých sloupců, takže čára přes mezeru by visela ve vzduchu.
   Vzdálenost = šířka sloupce (100 %) + mezera (38px) − šířka ikony (48px). */
.flow__node + .flow__node::before,
.flow__node + .flow__node::after {
	content: "";
	position: absolute;
	/* svisle (mobil) */
	left: 23px;
	top: -20px;
	width: 2px;
	height: 20px;
}
.flow__node + .flow__node::after { background: var(--border); }
.flow__node + .flow__node::before {
	background: var(--accent);
	/* ::after se v pořadí kreslí později, takže by jantarovou čáru překryl. */
	z-index: 1;
	transform-origin: center top;
	transform: scaleY(0);
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.flow__node.is-linked::before { transform: scaleY(1); }

@media (min-width: 780px) {
	.flow__node + .flow__node::before,
	.flow__node + .flow__node::after {
		left: calc(10px - 100%);
		top: 23px;
		width: calc(100% - 10px);
		height: 2px;
	}
	.flow__node + .flow__node::before {
		transform-origin: left center;
		transform: scaleX(0);
	}
	.flow__node.is-linked::before { transform: scaleX(1); }
}

.flow__icon {
	grid-area: icon;
	width: 48px; height: 48px;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	color: var(--muted);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.flow__icon svg { width: 22px; height: 22px; }

.flow__name {
	grid-area: nazev;
	font-weight: 650;
	color: var(--muted);
	transition: color .3s ease;
	line-height: 1.3;
}

.flow__event {
	grid-area: udalost;
	font-size: .84rem;
	color: var(--muted);
	opacity: 0;
	transition: opacity .3s ease;
	font-variant-numeric: tabular-nums;
	min-height: 1.4em;
}

.flow__node.is-active .flow__icon {
	background: var(--accent-50);
	border-color: var(--accent);
	color: var(--accent-700);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.flow__node.is-active .flow__name  { color: var(--ink); }
.flow__node.is-active .flow__event { opacity: 1; color: var(--accent-700); font-weight: 600; }

.flow__status {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	font-size: .93rem;
	color: var(--muted);
	min-height: 1.6em;
}
.flow__status strong { color: var(--ink); }

/* ==========================================================================
   21. DOKLAD JE OTISK — mikrodemo v kartě
   --------------------------------------------------------------------------
   Adresa v adresáři se vymění, faktura se nehne. Obojí na místě: crossfade
   dvou vrstev v jedné buňce mřížky, razítko se otiskne zvětšením, ne příletem.
   ========================================================================== */

.snapshot { margin-top: 20px; display: grid; gap: 10px; }

.snapshot__doc {
	position: relative;
	padding: 13px 15px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--bg-soft);
	font-size: .86rem;
	overflow: hidden;
}
.snapshot__label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}
.snapshot__line { display: grid; color: var(--ink); font-variant-numeric: tabular-nums; }
.snapshot__line > span {
	grid-area: 1 / 1;
	transition: opacity .35s ease, transform .35s ease;
}
.snapshot__new { opacity: 0; transform: translateY(7px); }

.snapshot.is-moved .snapshot__old { opacity: 0; transform: translateY(-7px); }
.snapshot.is-moved .snapshot__new  { opacity: 1; transform: none; }

.snapshot__stamp {
	position: absolute;
	right: 10px;
	top: 50%;
	padding: 3px 9px;
	border: 2px solid currentColor;
	border-radius: 5px;
	color: var(--accent-700);
	font-size: .56rem;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	/* Mírný přestřel dělá „doraz razítka" — bez něj to vypadá jako obyčejný fade. */
	transform: translateY(-50%) rotate(-9deg) scale(1.7);
	transition: opacity .12s ease, transform .42s cubic-bezier(.2, 1.4, .35, 1);
	pointer-events: none;
}
.snapshot.is-moved .snapshot__stamp {
	opacity: .92;
	transform: translateY(-50%) rotate(-9deg) scale(1);
}

.snapshot__btn {
	justify-self: start;
	margin-top: 4px;
}

/* ==========================================================================
   22. SLUŽBY — cena v kartě, sazebník, tabulka
   ========================================================================== */

/* Cena přilepená ke spodní hraně karty, aby v mřížce seděly na stejné lince
   i u karet s různě dlouhým popisem. */
.card--priced { display: flex; flex-direction: column; }
.card--priced > p { flex: 1; }

.card__price {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.card__price small {
	display: block;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--muted);
	margin-top: 3px;
}

/* Sazebník — řádkový seznam položek s cenou vpravo. */
.rate-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
}
.rate {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	align-items: baseline;
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
}
.rate:last-child { border-bottom: 0; }
.rate__name { font-weight: 650; color: var(--ink); flex: 1 1 220px; }
.rate__desc { flex: 999 1 100%; font-size: .92rem; color: var(--muted); }
@media (min-width: 760px) { .rate__desc { flex: 2 1 260px; order: 1; } }
.rate__price {
	flex: none;
	font-weight: 800;
	color: var(--accent-700);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	order: 2;
}

/* Tabulka (SLA, srovnání). Na úzké obrazovce se posouvá ve vlastním rámu,
   aby stránka nikdy nerolovala do strany. */
.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
}
/* Popisek nad tabulkou. Nese to nejdůležitější sdělení celé sekce — že jde
   o REAKČNÍ dobu, ne o dobu vyřešení — takže nesmí vypadat jako popisek obrázku. */
.table caption {
	caption-side: top;
	text-align: left;
	padding: 15px 20px;
	background: var(--accent-50);
	border-bottom: 1px solid var(--border);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accent-700);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	min-width: 480px;
}
.table th, .table td {
	text-align: left;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.table th {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--bg-soft);
	white-space: nowrap;
}
.table td strong { color: var(--ink); }

/* Vysvětlující blok, který srovnává očekávání (jednorázová cena × paušál). */
.note {
	padding: 20px 24px;
	border-radius: var(--r-lg);
	background: var(--brand-50);
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
	font-size: .96rem;
	color: var(--ink-2);
}
.note strong { color: var(--ink); }

/* ==========================================================================
   23. NÁHLED WEBU — jak modul vypadá návštěvníkovi
   --------------------------------------------------------------------------
   Sourozenec `.mock` (sekce 11). Zatímco mock ukazuje ADMINISTRACI, tenhle
   ukazuje FRONT — co uvidí zákazník. Na podstránce modulu jsou oba: náhled
   webu v hlavičce, administrace níž.

   Skládá se z několika primitiv (pruh, karta, řádek, doklad), ze kterých se
   všechny moduly poskládají bez tolika různých stylopisů.
   ========================================================================== */

.pv { background: #fff; }

/* Hlavička webu */
.pv__nav {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--border);
}
.pv__logo { width: 17px; height: 17px; border-radius: 5px; background: var(--brand); flex: none; }
.pv__brand { font-size: .68rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pv__menu { margin-left: auto; display: flex; gap: 9px; }
.pv__menu i { display: block; width: 26px; height: 5px; border-radius: 3px; background: var(--border); }

/* Barevný pruh v hlavičce stránky */
.pv__hero { padding: 18px 16px; background: var(--brand-50); }
.pv__hero--dark { background: var(--dark-bg); }
.pv__hero--dark .pv__line { background: rgba(255, 255, 255, .34); }
.pv__hero--dark .pv__line--sm { background: rgba(255, 255, 255, .18); }

.pv__line { height: 9px; border-radius: 5px; background: var(--brand-300); margin-bottom: 7px; }
.pv__line--sm { height: 6px; background: var(--border); }
.pv__line:last-child { margin-bottom: 0; }

.pv__body { padding: 14px; display: grid; gap: 12px; }
.pv__label {
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Mřížka karet — produkty, články, firmy */
.pv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pv__grid--2 { grid-template-columns: repeat(2, 1fr); }
.pv__card {
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: #fff;
}
.pv__img { height: 42px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.pv__card-body { padding: 7px 8px; }
.pv__price { font-size: .64rem; font-weight: 800; color: var(--ink); margin-top: 5px; font-variant-numeric: tabular-nums; }
.pv__tag {
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	background: var(--accent-50);
	color: var(--accent-700);
	font-size: .55rem;
	font-weight: 800;
}

/* Řádkový seznam — inzeráty, vlákna, platby */
.pv__rows { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.pv__row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	font-size: .62rem;
	color: var(--ink-2);
}
.pv__row:last-child { border-bottom: 0; }
.pv__row .pv__line { flex: 1; margin: 0; }
.pv__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.pv__dot--on { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2px #fff; }

/* Postranní filtr */
.pv__split { display: flex; gap: 10px; }
.pv__aside { width: 78px; flex: none; display: grid; gap: 6px; align-content: start; }
.pv__aside .pv__line { margin: 0; }

/* Doklad — faktura, příjemka */
.pv__doc {
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: 12px;
	background: #fff;
	box-shadow: var(--shadow-1);
}
.pv__doc-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--ink);
	font-size: .66rem;
	font-weight: 800;
	color: var(--ink);
}
.pv__doc-total {
	display: flex;
	justify-content: space-between;
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px solid var(--border);
	font-size: .68rem;
	font-weight: 800;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Formulář — přihlášení, výběr platby */
.pv__field {
	height: 24px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--bg-soft);
}
.pv__btn {
	padding: 7px 12px;
	border-radius: var(--r-pill);
	background: var(--brand);
	color: #fff;
	font-size: .62rem;
	font-weight: 700;
	text-align: center;
}
.pv__btn--accent { background: var(--accent); }

/* Kód — ukázka odpovědi API */
.pv__code {
	background: var(--dark-bg);
	border-radius: var(--r-sm);
	padding: 11px 13px;
	font-family: var(--font-mono);
	font-size: .58rem;
	line-height: 1.7;
	color: #a9bad6;
	overflow: hidden;
	white-space: pre;
}
.pv__code b { color: #fff; font-weight: 600; }
.pv__code em { color: var(--accent); font-style: normal; }

/* Přepínače jazyka a měny */
.pv__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv__chip {
	padding: 3px 9px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border);
	font-size: .58rem;
	font-weight: 700;
	color: var(--muted);
}
.pv__chip--on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ==========================================================================
   24. STRÁNKA DESIGN SYSTÉMU
   ========================================================================== */

.ds-group { margin-bottom: 52px; }
.ds-group > h3 {
	font-size: .82rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 26px;
}
.ds-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.ds-swatch { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.ds-swatch__color { height: 74px; }
.ds-swatch__meta { padding: 10px 12px; font-size: .78rem; }
.ds-swatch__meta b { display: block; color: var(--ink); }
.ds-swatch__meta code { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

.ds-dark { background: var(--dark-bg); border-radius: var(--r-lg); padding: 26px; }

/* ==========================================================================
   25. DROBNOSTI
   ========================================================================== */

.sr-only {
	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: absolute;
	left: 12px; top: -60px;
	z-index: 200;
	padding: 11px 20px;
	background: var(--brand);
	color: #fff;
	border-radius: var(--r-pill);
	text-decoration: none;
	font-weight: 600;
	transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.mock--tilted { transform: none; }
}

/* ==========================================================================
   26. VARIANTA index2 — důvěra v hero, kroky nasazení, záruky v patičce
   --------------------------------------------------------------------------
   Komponenty přidané pro `index2.html` (přestavba homepage podle oponentury
   z 20. 8. 2026). Nic z toho nepoužívá `index.html`, takže se to dá smazat
   spolu s ním. Až se varianta schválí, sekce se přečísluje k příbuzným.
   ========================================================================== */

/* Tři důkazy pod tlačítky v hero. Nahrazují osobní podpis (`.hero__sign`),
   který podle oponentury působí hned v úvodu na větší firmy jako riziko —
   člověk zůstává na webu, ale níž, jako odpověď na otázku „kdo to spraví". */
.hero__trust {
	list-style: none;
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--hero-line);
	display: grid;
	gap: 12px;
	font-size: .93rem;
	color: var(--hero-muted);
}
/* Čtyři důkazy ve dvou řadách. Do tří sloupců se čtvrtý nevejde a do čtyř je
   levý sloupec hero moc úzký — na 2×2 zbývá na položku pohodlných ~250 px. */
@media (min-width: 620px) {
	.hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
}
.hero__trust li { display: flex; gap: 9px; align-items: flex-start; }
.hero__trust svg {
	width: 17px; height: 17px;
	flex: none;
	margin-top: 3px;
	color: var(--accent);
}
.hero__trust strong { color: var(--hero-ink); font-weight: 600; }

/* Kroky spolupráce. Čtyři karty s číslem — na široké obrazovce je spojuje
   tečkovaná linka, aby bylo vidět, že jde o posloupnost, ne o výčet.
   Linka je kreslená, nic se nehýbe. */
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}
@media (min-width: 720px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 26px 24px;
}
.step h3 { font-size: 1.06rem; margin-bottom: .4em; }
.step p { font-size: .94rem; color: var(--muted); }

.step__no {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--brand-50);
	color: var(--brand);
	font-weight: 800;
	font-size: .95rem;
	margin-bottom: 15px;
}
/* Poslední krok je cíl cesty — dostane jantar, aby oko došlo až na konec. */
.step:last-child .step__no { background: var(--accent-50); color: var(--accent-700); }

@media (min-width: 1040px) {
	.step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 42px;
		right: -22px;
		width: 22px; height: 2px;
		background: repeating-linear-gradient(90deg,
			var(--border) 0 5px, transparent 5px 10px);
	}
}

/* Záruky v patičce — odpověď na námitku „co když ten jeden člověk vypadne".
   Patří nahoru nad odkazy, protože je to argument, ne navigace. */
.site-footer__guarantee {
	display: grid;
	gap: 20px;
	padding: 22px 24px;
	margin-bottom: 30px;
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--hero-line);
}
@media (min-width: 860px) {
	.site-footer__guarantee { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
.site-footer__guarantee div { display: flex; gap: 12px; align-items: flex-start; }
.site-footer__guarantee svg {
	width: 20px; height: 20px;
	flex: none;
	margin-top: 2px;
	color: var(--accent);
}
.site-footer__guarantee strong {
	display: block;
	color: var(--hero-ink);
	font-weight: 600;
	margin-bottom: 3px;
}
.site-footer__guarantee p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* Zvýrazněná část titulku v hero — jantar na navy, žádná dekorace navíc. */
.hero h1 em { color: var(--accent); font-style: normal; }

/* Titulek hero ve variantě index2 je delší než původní („Jeden systém…"),
   proto o stupeň menší — jinak se „e-shop" láme přes spojovník na dva řádky. */
.hero__title { font-size: clamp(1.95rem, 4.1vw, 2.85rem); }
.hero__title .nowrap { white-space: nowrap; }

/* Karta vzhledu: snímek nahoře na hraně karty, popis pod ním. */
.theme-card { padding: 0; overflow: hidden; }
/* Deset šablon: 5 sloupců na širokých obrazovkách (dvě plné řady), jinak 2 —
   ve třech sloupcích by desátá karta zůstala sama v řadě. */
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 519px) { .theme-grid { grid-template-columns: 1fr; } }
/* Mozaika bez mezer a bez názvů (Lukáš 3. 9. 2026): jen snímky ve stejném poměru 1200×771,
   4 sloupce od 1100 px, 3 od 700 px, 2 níž. Zaoblení má jen celek, ne dlaždice. */
@media (min-width: 700px)  { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme-grid { gap: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.theme-grid .theme-card { border: 0; border-radius: 0; box-shadow: none; background: var(--surface); }

/* ==========================================================================
   27. SKUPINA MODULŮ — co je v základní verzi a co se přidává
   --------------------------------------------------------------------------
   Rámeček kolem části mřížky nejde nakreslit přes buňky gridu tak, aby držel
   na všech šířkách. Základní verze je proto vlastní ohraničený blok s vlastní
   mřížkou; rozšiřující moduly stojí pod ním jako druhá skupina.
   ========================================================================== */

.module-group {
	position: relative;
	border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
	border-radius: var(--r-xl);
	padding: clamp(38px, 4vw, 46px) clamp(16px, 2.4vw, 26px) clamp(24px, 3vw, 30px);
	background: color-mix(in srgb, var(--accent) 3%, transparent);
}

/* Štítek sedí na horní hraně rámečku, stejným způsobem jako .plan__badge. */
.module-group__label {
	position: absolute;
	top: -14px; left: 50%;
	transform: translateX(-50%);
	padding: 6px 20px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: var(--shadow-1);
}

/* Nadpis druhé skupiny. Ne section-head — ta je na celou sekci, tohle je
   mezititulek uvnitř ní a nesmí ji přebít. */
.module-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: clamp(34px, 4vw, 48px) 0 22px;
}
.module-group__head h3 { margin: 0; }
.module-group__head p { margin: 0; font-size: .96rem; color: var(--muted); }

/* Štítek u druhé skupiny modulů. Základní verzi drží jantarová plomba nahoře,
   tohle je její protějšek: bez něj vypadají rozšiřující moduly jako součást
   balíku, který si zákazník zapne, kdy se mu zachce. */
.module-group__tag {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-700);
	background: var(--accent-50);
	border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
	border-radius: var(--r-pill);
	padding: 3px 12px;
}

/* ==========================================================================
   28. LIGHTBOX — sdílená komponenta na <dialog>, bez závislostí
   --------------------------------------------------------------------------
   Otevírá se kliknutím na a[data-lightbox="skupina"] (viz site.js). Zobrazení
   je JEN opacity — žádný translate, aby obrázek „nepřijížděl" zvenčí. Bez JS
   zůstává odkaz funkční (prohlížeč otevře velký obrázek samostatně).
   ========================================================================== */

.lightbox {
	position: fixed;
	inset: 0;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hero-ink, #fff);
}

/* `<dialog>` má vlastní ::backdrop — barvíme ho tady, ne extra divem navíc. */
.lightbox::backdrop {
	background: rgba(10, 16, 28, .92);
}

/* Otevření/zavření řídí jen atribut `open` a opacity — žádný posun. Element
   dřív, než se otevře přes showModal(), stejně nejde vidět, takže přechod
   se uplatní jen při zavírání (JS na chvíli podrží `open`, než dialog skryje). */
.lightbox {
	opacity: 1;
	transition: opacity .18s ease;
}
.lightbox.is-closing { opacity: 0; }

.lightbox__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(16px, 4vw, 48px);
	box-sizing: border-box;
}

.lightbox__img {
	max-width: 100%;
	max-height: calc(100% - 56px);
	width: auto;
	height: auto;
	border-radius: var(--r-md, 10px);
	box-shadow: var(--shadow-4);
	background: var(--bg-soft);
}

.lightbox__caption {
	margin-top: 14px;
	max-width: 62ch;
	text-align: center;
	font-size: .95rem;
	color: var(--hero-muted, rgba(255, 255, 255, .75));
}

/* Tlačítka jsou <button> se čtvercovým klikacím polem — i ta „šipková",
   protože nejde o odkazy, ale o ovládání komponenty. */
.lightbox__close,
.lightbox__prev,
.lightbox__next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg { width: 22px; height: 22px; }

.lightbox__close { top: clamp(10px, 3vw, 22px); right: clamp(10px, 3vw, 22px); }
.lightbox__prev  { left: clamp(6px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(6px, 2vw, 22px); top: 50%; transform: translateY(-50%); }

/* Skupina s jedním obrázkem šipky nepotřebuje — JS je skryje přes `hidden`. */
.lightbox__prev[hidden],
.lightbox__next[hidden] { display: none; }

@media (max-width: 560px) {
	.lightbox__prev, .lightbox__next { width: 38px; height: 38px; }
}

/* ==========================================================================
   29. GALERIE MODULU + KARTY ŠABLON — skutečné snímky (ne kreslené mockupy)
   --------------------------------------------------------------------------
   Galerie na podstránce modulu a mřížka šablon na homepage sdílí stejný
   vzor: dlaždice s obrázkem, klik otevře lightbox. Rozměr snímků je pevný
   (1200×771 desktop náhledy), aby mřížka nerozjížděla řádky.
   ========================================================================== */

.shot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.shot-grid figure {
	margin: 0;
	border-radius: var(--r-lg, 14px);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-1);
}

.shot-grid a { display: block; }

.shot-grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 771;
	object-fit: cover;
	background: var(--bg-soft);
}

.shot-grid figcaption {
	padding: 10px 14px 14px;
	font-size: .86rem;
	color: var(--muted);
}

/* Karta šablony v mřížce deseti vzhledů — obrázek nahoře, popis a štítek
   skupiny dole. Nahrazuje dřívější kreslený `.pv--themed` mockup. */
.theme-card__shot {
	display: block;
	aspect-ratio: 1200 / 771;
	overflow: hidden;
	background: var(--bg-soft);
}
.theme-card__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.theme-card__group {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-700);
	background: var(--accent-50);
	border-radius: var(--r-pill);
	padding: 3px 12px;
	display: inline-block;
	margin-top: 10px;
}

/* ==========================================================================
   30. BLOK CENY NA PODSTRÁNCE MODULU
   --------------------------------------------------------------------------
   Nahrazuje větu „Součástí tarifu X". Dvě položky u rozšiřujících modulů
   (doinstalace × nový web), jedna u modulů základní verze.
   ========================================================================== */

.price-box {
	margin-top: 22px;
	padding: 16px 20px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg, 14px);
	background: var(--bg-soft);
}
.price-box__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .96rem;
	padding: 5px 0;
}
.price-box__row strong { color: var(--ink); }
/* Doplňující řádek (sklad je s e-shopem v ceně) — tišší, bez ceny vpravo. */
.price-box__row--note { font-size: .86rem; color: var(--muted); }
.price-box__note {
	margin: 10px 0 0;
	font-size: .82rem;
	color: var(--muted);
}
.price-box__note a { color: inherit; text-decoration: underline; }

/* Zvýraznění části nadpisu jantarem (barva akčního tlačítka), bez kurzívy. */
.accent-text { color: var(--accent); font-style: normal; }