/* Vygenerovano z _styles.latte — needituj tady, edituj tenhle soubor a sablona uz jen linkuje. */
	:root {
		--navy-900: #081326;
		--navy-800: #0d1f3c;
		--navy-700: #143055;

		/* ── Brand paleta dle MůjIMPnet loga ─────────────────────────
		   4 čtvrtiny loga: modrá / červená / žlutá / zelená.
		   Primární = modrá (logo bottom-left quadrant). Ostatní jako accenty / semantické. */
		--brand-blue:   #2E70C4;
		--brand-red:    #D63230;
		--brand-yellow: #E8A50C;
		--brand-green:  #2E9B49;
		/* Druhý konec dekorativních přechodů (tlačítka, aktivní menu, ikony sekcí). U IMPnetu zelená; firma si ho
		   nastaví ve Značce portálu. --brand-green zůstává sémantická „OK" barva. */
		--brand-accent: var(--brand-green);
		--brand-orange: #E8650C;  /* naléhavost (Po SLA, stáří požadavků, náklady) — žlutá --brand-yellow je na to moc mírná */
		--brand-blue-light: #4a90d4;
		--brand-blue-dark:  #245aa3;

		/* Zpětně kompatibilní názvy (teal-* alias na nové brand modré, aby se neměnilo všech 36 výskytů). */
		--teal-400: var(--brand-blue-light);
		--teal-500: var(--brand-blue);
		--teal-600: var(--brand-blue-dark);
		--cyan-500: var(--brand-green);
		--teal-soft: rgba(46, 112, 196, 0.12);
		--accent-grad: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-accent) 100%);

		--ink: #16202e;
		--muted: #66748a;
		--line: #e9edf4;
		--bg: #f4f7fb;
		--card-bg: #ffffff;
		--input-bg: #ffffff;
		--input-border: #d4dce8;
		--radius: 16px;
		--radius-lg: 22px;
		/* Poloměr karet — do 9. 9. 2026 si každá sekce psala vlastní (10/11/12/13/14/16 px).
		   Dvě velikosti stačí: `-lg` pro hlavní plochy stránky (portal-card, feature-card),
		   `--card-radius` pro kompaktní karty uvnitř. V šablonách se používají s fallbackem
		   `var(--card-radius, 13px)`, aby držely i na stránkách s vlastní paletou (Status). */
		--card-radius: 13px;
		--card-radius-lg: var(--radius);
		/* Systémové písmo: na Macu SF Pro, na Windows Segoe UI, na Androidu Roboto.
		   Načte se okamžitě a neprobleskne náhradou, protože se nic nestahuje. */
		--font-head: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		--font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		--shadow-sm: 0 2px 10px rgba(13, 31, 60, 0.05);
		--shadow-md: 0 14px 40px -12px rgba(13, 31, 60, 0.18);
		--shadow-glow: 0 10px 26px -8px rgba(46, 112, 196, 0.55);
	}

	body {
		background: var(--bg);
		color: var(--ink);
		font-family: var(--font-body);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		/* Sticky footer: tělo na min. výšku okna, footer níže přišpendlí margin-top:auto */
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* Hlavní obsahový sloupec portálu — full width bez UIkit container omezení.
	   Padding 10% desktop / postupně menší na mobilu. Sticky footer: flex:1. */
	.portal-main {
		width: 100%;
		max-width: none;
		padding: 0 10%;
		box-sizing: border-box;
		flex: 1 0 auto;
	}
	@media (max-width: 960px) {
		.portal-main { padding: 0 24px; }
	}
	@media (max-width: 640px) {
		.portal-main { padding: 0 14px; }
	}

	h1, h2, h3, h4, h5, .uk-heading-divider {
		font-family: var(--font-head);
		color: var(--navy-900);
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	a { color: var(--teal-600); transition: color 0.15s; }
	a:hover { color: var(--cyan-500); }

	.text-grad {
		background: var(--accent-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: var(--teal-500);
	}

	/* ── Hlavička (tmavá navy + transparentní mark loga) ─────────── */
	.portal-header {
		background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
		color: #fff;
		position: sticky;
		top: 0;
		z-index: 980;
		padding-top: 14px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		box-shadow: 0 6px 26px -10px rgba(8, 19, 38, 0.6);
	}
	.portal-header .uk-container { min-height: 66px; }
	.portal-header a { color: #fff; }
	.portal-brand {
		font-family: var(--font-head);
		font-weight: 800;
		font-size: 1.28rem;
		letter-spacing: -0.03em;
		display: inline-flex;
		align-items: center;
	}
	.portal-brand .brand-mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 11px;
		background: var(--accent-grad);
		color: #fff;
		margin-right: 11px;
		font-size: 1.05rem;
		box-shadow: var(--shadow-glow);
	}

	/* ── Brand lockup: transparentní mark + custom HTML text "MůjIMPnet"
	   Outfit: "Můj" ExtraBold 800, "IMPnet" Medium 500, letter-spacing -0.02em.
	   Bez tečky, slova spojena bez mezery. */
	.portal-brand-mark {
		height: 42px;
		width: auto;
		display: block;
		margin-right: 11px;
		flex-shrink: 0;
	}
	.portal-brand-text {
		font-family: 'Outfit', var(--font-head);
		letter-spacing: -0.02em;
		font-size: 1.5rem;
		line-height: 1;
		color: inherit;
		display: inline-flex;
		align-items: baseline;
	}
	.portal-brand-text .pb-muj  { font-weight: 800; }
	.portal-brand-text .pb-imp  { font-weight: 500; }
	@media (max-width: 640px) {
		.portal-brand-mark { height: 34px; }
		.portal-brand-text { font-size: 1.25rem; }
	}

	/* ── Navigace ─────────────────────────────────────────────── */

	.portal-user { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 500; }

	/* ── Hero / uvítací pruh (dashboard) ──────────────────────── */
	.portal-hero {
		background:
			radial-gradient(680px 320px at 12% -30%, rgba(41, 169, 224, 0.35), transparent 60%),
			radial-gradient(520px 320px at 100% 0%, rgba(20, 189, 176, 0.30), transparent 55%),
			linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 100%);
		color: #fff;
		border-radius: var(--radius-lg);
		/* Uvítání nese pozdrav a jednu větu — 34px odsazení z něj dělalo 170px pruh,
		   který na dashboardu odtlačil čísla pod ohyb. */
		padding: 22px 28px;
		margin-bottom: 20px;
		box-shadow: var(--shadow-md);
		position: relative;
		overflow: hidden;
	}
	.portal-hero h2 { color: #fff; margin: 0 0 4px; font-size: 1.4rem; }
	.portal-hero .lead { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 0.95rem; }

	/* ── Karty ────────────────────────────────────────────────── */
	.portal-card {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: var(--card-radius-lg, 16px);
		padding: 26px;
		margin-bottom: 22px;
		box-shadow: var(--shadow-sm);
		transition: box-shadow 0.2s, transform 0.2s;
	}
	.portal-card:hover { box-shadow: var(--shadow-md); }
	.portal-card h3 {
		margin-top: 0;
		font-size: 1.1rem;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--line);
		margin-bottom: 18px;
	}

	/* Dlaždice s číslem (jen dashboard). Na šířku, ne na výšku: svisle skládaná varianta
	   s ikonou nad číslem dělala ze čtyř údajů 200px vysoké kachle a na mobilu, kde jde
	   jedna pod druhou, se dashboard natáhl na dva a půl tisíce pixelů. */
	/* margin-bottom nuluje dědictví po `.portal-card` — svislé mezery mezi řádky dlaždic
	   drží mřížka, spodní okraj navíc dělal jen prázdno na dně obalové karty. */
	.stat-card { display: grid; gap: 1px; text-align: left; padding: 15px 17px; margin-bottom: 0; position: relative; overflow: hidden; }
	.stat-card::before {
		content: '';
		position: absolute;
		inset: 0 0 auto 0;
		height: 3px;
		background: var(--accent-grad);
		opacity: 0;
		transition: opacity 0.2s;
	}
	.stat-card:hover { transform: translateY(-3px); }
	.stat-card:hover::before { opacity: 1; }
	/* Ikona vlevo vedle čísla. Přes :has(), aby dlaždice bez ikony neměla prázdný sloupec;
	   kde :has() chybí, ikona spadne nad číslo — tedy zpět na původní vzhled, ne rozbitá. */
	.stat-card:has(.stat-icon) { grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; }
	.stat-card:has(.stat-icon) .stat-icon { grid-row: 1 / span 2; }
	.stat-card .stat-icon {
		width: 42px;
		height: 42px;
		margin: 0;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
		background: var(--accent-grad);
		color: #fff;
		box-shadow: var(--shadow-glow);
	}
	/* tabular-nums: čísla pod sebou v mřížce dlaždic musí mít stejně široké číslice, jinak
	   se řádově stejné hodnoty opticky rozjedou. */
	.stat-card .stat-value { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--navy-900); line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
	.stat-card .stat-label { color: var(--muted); font-size: 0.8rem; }

	/* ── Tlačítka (override UIkit) ────────────────────────────── */
	.uk-button {
		border-radius: 11px;
		font-family: var(--font-body);
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
		transition: background 0.15s, box-shadow 0.18s, transform 0.06s, filter 0.15s;
	}
	.uk-button-large { border-radius: 13px; }
	.uk-button:active { transform: translateY(1px); }
	.uk-button-primary {
		background: var(--accent-grad);
		color: #fff;
		border: none;
		box-shadow: var(--shadow-glow);
	}
	.uk-button-primary:hover, .uk-button-primary:focus { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(46, 112, 196, 0.7); }
	.uk-button-default {
		background: #fff;
		border: 1px solid #d4dce8;
		color: var(--navy-800);
	}
	.uk-button-default:hover { border-color: var(--teal-500); color: var(--teal-600); background: #fff; }
	.portal-header .uk-button-default {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.22);
		color: #fff;
	}
	.portal-header .uk-button-default:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

	/* ── Profil a odhlášení přímo v hlavičce (dřív schované v dropdownu) ──── */
	.phead-profile {
		max-width: 260px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* ── Přepínač firem v hlavičce (_tenantSwitch.latte) ──── */
	.ptenant-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 280px;
		padding-left: 6px;
	}
	.ptenant-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ptenant-caret { opacity: 0.7; transition: transform 0.15s ease; }
	.ptenant-btn[aria-expanded="true"] .ptenant-caret { transform: rotate(180deg); }
	.ptenant-ava {
		flex: none;
		display: inline-grid;
		place-items: center;
		width: 24px;
		height: 24px;
		border-radius: 7px;
		background: linear-gradient(135deg, var(--teal-500), var(--navy-800));
		color: #fff;
		font-size: 0.68rem;
		font-weight: 800;
		letter-spacing: 0.02em;
		line-height: 1;
	}
	.ptenant-drop.uk-dropdown {
		min-width: 300px;
		padding: 8px;
		border-radius: 14px;
		box-shadow: 0 18px 40px -12px rgba(13, 31, 60, 0.35);
	}
	.ptenant-head {
		padding: 6px 10px 8px;
		color: var(--muted);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.ptenant-list > li > a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px 10px;
		border-radius: 10px;
		color: var(--navy-800);
	}
	.ptenant-list > li > a:hover { background: rgba(46, 112, 196, 0.08); color: var(--navy-800); }
	.ptenant-list > li.is-current > a { background: rgba(46, 112, 196, 0.06); cursor: default; }
	.ptenant-list .ptenant-ava { width: 34px; height: 34px; border-radius: 10px; font-size: 0.8rem; }
	.ptenant-list > li:not(.is-current) .ptenant-ava { background: #e8eef7; color: var(--navy-800); }
	.ptenant-logo {
		display: inline-flex;
		align-items: center;
		height: 28px;
		padding: 3px 9px;
		border-radius: 8px;
		background: #fff;
	}
	.ptenant-logo img { height: 100%; width: auto; max-width: 120px; object-fit: contain; display: block; }
	.ptenant-ava.is-logo { display: inline-flex; justify-content: center; overflow: hidden; background: #fff !important; border: 1px solid #e3e9f2; padding: 4px; width: 64px !important; }
	.ptenant-ava.is-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
	/* Logo firmy v hlavičce místo textu (Značka portálu → Logo). */
	.portal-brand-logo {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding: 5px 12px;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
	}
	.portal-brand-logo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; display: block; }
	.ptenant-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
	.ptenant-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ptenant-txt small { color: var(--muted); font-size: 0.75rem; }
	.ptenant-ico { color: var(--muted); }
	.ptenant-list > li.is-current .ptenant-ico { color: var(--teal-500); }

	.phead-logout:hover {
		background: rgba(214, 50, 48, 0.85) !important;
		border-color: rgba(214, 50, 48, 0.95) !important;
	}

	/* ── Description list (dt/dd) — label/value styl pro detaily ──── */
	dt, .uk-description-list > dt {
		color: var(--teal-600);
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		font-weight: 700;
		margin-bottom: 4px;
	}

	/* ── Tabulky ──────────────────────────────────────────────── */
	.uk-table th {
		color: var(--muted);
		text-transform: uppercase;
		font-size: 0.72rem;
		letter-spacing: 0.05em;
		font-weight: 700;
	}
	.uk-table td { vertical-align: middle; padding: 12px 14px; }
	.uk-table th { padding: 12px 14px; }
	.uk-table-divider > :first-child > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > tr:not(:first-child) { border-top: 1px solid var(--line); }

	/* ── Labely / odznaky ─────────────────────────────────────── */
	.uk-label {
		border-radius: 8px;
		font-weight: 600;
		text-transform: none;
		padding: 7px 14px;
		font-size: 0.82rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
		white-space: nowrap;
		display: inline-block;
		vertical-align: middle;
	}
	.uk-label-success { background: var(--teal-500); color: #fff; }
	.uk-label-warning { background: #f5c447; color: #5a4400; }
	.uk-label-danger  { background: #e8484f; color: #fff; }

	.uk-text-primary { color: var(--teal-600) !important; }

	/* ── Formuláře ────────────────────────────────────────────── */
	.uk-input, .uk-select, .uk-textarea {
		border-radius: 11px;
		border: 1px solid #d4dce8;
		height: 44px;
	}
	.uk-textarea { height: auto; }
	.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
		border-color: var(--teal-500);
		box-shadow: 0 0 0 3px var(--teal-soft);
	}
	.uk-form-label { font-weight: 600; color: var(--navy-800); font-size: 0.85rem; }

	/* ── Alerty ───────────────────────────────────────────────── */
	.uk-alert { border-radius: 12px; }

	/* ── Patička (tmavá navy) ────────────────────────────────── */
	.portal-footer {
		background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
		color: rgba(255, 255, 255, 0.6);
		margin-top: auto;       /* přišpendlí footer ke spodku i na krátkých stránkách */
		flex-shrink: 0;
		padding: 40px 0 32px;
		font-size: 0.88rem;
	}
	/* Vpravo dole plave bublina asistenta (64 px + odsazení) a sedla si přesně na copyright.
	   Uvolníme jí místo, ať si text a bublina nelezou do zelí. */
	.portal-footer .uk-text-right\@s { padding-right: 78px; }
	@media (max-width: 640px) { .portal-footer .uk-text-right\@s { padding-right: 0; } }
	.portal-footer a { color: rgba(255, 255, 255, 0.82); }
	.portal-footer a:hover { color: var(--brand-blue-light); }
	.portal-footer .footer-brand { color: #fff; font-family: var(--font-head); font-weight: 700; }
	.portal-footer .footer-brand-mark {
		height: 34px;
		width: auto;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}
	.portal-footer .footer-brand-text {
		font-family: 'Outfit', var(--font-head);
		letter-spacing: -0.02em;
		font-size: 1.2rem;
		line-height: 1;
		vertical-align: middle;
		color: #fff;
	}
	.portal-footer .footer-brand-text .pb-muj { font-weight: 800; }
	.portal-footer .footer-brand-text .pb-imp { font-weight: 500; }
	.portal-footer .footer-credit-row {
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		text-align: right;
	}
	/* V přihlášeném portálu plave vpravo dole bublina asistenta — stejné odsazení jako pravý sloupec výš. */
	.portal-shell .footer-credit-row { padding-right: 78px; }
	@media (max-width: 640px) { .portal-shell .footer-credit-row { padding-right: 0; } }

	/* ── Podpis autora (Petr Husnaj) — jen tmavá varianta, patička je vždy tmavá ── */
	.ph-sig {
		--ph-gold: #D4A95E;
		--ph-name: #F2F1ED;
		--ph-pillar: #F2F1ED;   /* pravý sloup symbolu */
		--ph-shade: #C9C6BE;    /* stín pod příčkou */
		--ph-accent: var(--ph-gold);
		display: inline-flex;
		align-items: center;
		gap: .5em;
		cursor: pointer;
		font: inherit;
	}
	/* `.portal-footer a` a UIkit `a:hover` by podpisu vnutily barvu a podtržení. */
	.portal-footer a.ph-sig,
	.portal-footer a.ph-sig:hover { color: inherit; text-decoration: none; }
	.ph-sig__pillar { fill: var(--ph-pillar); }
	.ph-sig__shade  { fill: var(--ph-shade); }
	.ph-sig__sym {
		flex: none;
		margin: 0 -.25em;       /* symbol má ve viewBoxu vlastní prázdný okraj */
		transition: transform .35s ease;
	}
	.ph-sig__name {
		color: var(--ph-name);
		font-weight: 500;
		padding-bottom: 1px;
		border-bottom: 1px dashed color-mix(in srgb, var(--ph-accent) 55%, transparent);
		transition: color .2s ease, border-color .2s ease;
	}
	.ph-sig__dot   { color: var(--ph-gold); }
	.ph-sig__arrow { color: var(--ph-accent); display: inline-block; transition: transform .25s ease; }
	/* Odkryje se při najetí. Záporný margin v klidu vrací mezeru flexboxu, jinak je před šipkou dvojitá. */
	.ph-sig__more {
		max-width: 0;
		margin-left: -.5em;
		overflow: hidden;
		white-space: nowrap;
		opacity: 0;
		color: var(--ph-accent);
		transition: max-width .35s ease, margin-left .35s ease, opacity .25s ease;
	}
	.ph-sig:hover .ph-sig__name,
	.ph-sig:focus-visible .ph-sig__name {
		color: var(--ph-accent);
		border-bottom-color: var(--ph-accent);
		border-bottom-style: solid;
	}
	.ph-sig:hover .ph-sig__more,
	.ph-sig:focus-visible .ph-sig__more { max-width: 10em; margin-left: 0; opacity: 1; }
	.ph-sig:hover .ph-sig__arrow,
	.ph-sig:focus-visible .ph-sig__arrow { transform: translate(2px, -2px); }
	.ph-sig:hover .ph-sig__sym,
	.ph-sig:focus-visible .ph-sig__sym { transform: rotate(-5deg) scale(1.06); }
	.ph-sig:focus-visible {
		outline: 2px solid var(--ph-accent);
		outline-offset: 4px;
		border-radius: 3px;
	}
	@media (hover: none) { .ph-sig__more { display: none; } }
	@media (prefers-reduced-motion: reduce) { .ph-sig, .ph-sig * { transition: none !important; } }

	/* ── Login / Registrace ───────────────────────────────────── */
	.login-shell {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background:
			radial-gradient(820px 460px at 12% -10%, rgba(41, 169, 224, 0.40), transparent 60%),
			radial-gradient(680px 440px at 100% 110%, rgba(20, 189, 176, 0.38), transparent 55%),
			linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
		padding: 28px;
	}
	.login-box {
		background: #fff;
		border-radius: var(--radius-lg);
		padding: 40px 36px;
		width: 100%;
		max-width: 430px;
		box-shadow: 0 30px 70px -20px rgba(8, 19, 38, 0.6);
		position: relative;
		overflow: hidden;
	}
	.login-box::before {
		content: '';
		position: absolute;
		inset: 0 0 auto 0;
		height: 4px;
		background: var(--accent-grad);
	}
	.login-brand { text-align: center; margin-bottom: 28px; }
	.login-brand .brand-mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 62px;
		height: 62px;
		border-radius: 18px;
		background: var(--accent-grad);
		color: #fff;
		font-size: 1.9rem;
		margin-bottom: 14px;
		box-shadow: var(--shadow-glow);
	}
	.login-brand h1 { margin: 0; font-size: 1.55rem; color: var(--navy-900); }
	.login-brand .subtitle { color: var(--muted); font-size: 0.88rem; margin-top: 3px; }
	.login-brand-mark {
		width: 96px;
		height: 96px;
		display: block;
		margin: 0 auto 10px;
		object-fit: contain;
	}
	@media (max-width: 480px) {
		.login-brand-mark { width: 80px; height: 80px; }
	}

	/* ── Veřejný landing ──────────────────────────────────────── */
	.public-nav a.nav-link {
		color: rgba(255, 255, 255, 0.8);
		padding: 8px 12px;
		font-weight: 500;
		font-size: 0.9rem;
	}
	.public-nav a.nav-link:hover { color: #fff; text-decoration: none; }

	.landing-hero {
		background:
			radial-gradient(900px 520px at 14% -20%, rgba(41, 169, 224, 0.42), transparent 60%),
			radial-gradient(760px 520px at 92% -10%, rgba(20, 189, 176, 0.40), transparent 55%),
			linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
		color: #fff;
		padding: 104px 0 112px;
		text-align: center;
		position: relative;
		overflow: hidden;
	}
	.landing-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
		background-size: 26px 26px;
		mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
		-webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
	}
	.landing-hero .uk-container { position: relative; z-index: 1; }
	.landing-hero h1 { color: #fff; font-size: 3.3rem; line-height: 1.08; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.035em; }
	.landing-hero .hero-sub { color: rgba(255, 255, 255, 0.82); font-size: 1.2rem; max-width: 660px; margin: 0 auto 34px; line-height: 1.6; }
	.landing-hero .hero-badge {
		display: inline-block;
		background: rgba(255, 255, 255, 0.08);
		color: var(--teal-400);
		border: 1px solid rgba(43, 212, 196, 0.4);
		padding: 6px 16px;
		border-radius: 999px;
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		margin-bottom: 26px;
		backdrop-filter: blur(4px);
	}
	.landing-hero .uk-button-large { padding: 0 32px; height: 54px; line-height: 54px; font-size: 1.02rem; margin-bottom: 10px; }
	.cta-band .uk-button-large { margin-bottom: 10px; }
	.hero-trust { margin-top: 34px; color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; letter-spacing: 0.03em; }
	.hero-trust strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

	.section { padding: 78px 0; }
	.section-eyebrow { text-align: center; color: var(--teal-600); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
	.section-title { text-align: center; font-size: 2.1rem; margin: 0 0 10px; }
	.section-lead { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 48px; font-size: 1.05rem; }

	.feature-card {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: var(--card-radius-lg, 16px);
		padding: 30px;
		height: 100%;
		box-shadow: var(--shadow-sm);
		transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	}
	.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
	.feature-card .feature-icon {
		width: 56px;
		height: 56px;
		border-radius: 15px;
		background: var(--accent-grad);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.4rem;
		margin-bottom: 18px;
		box-shadow: var(--shadow-glow);
	}
	.feature-card h4 { margin: 0 0 8px; font-size: 1.12rem; }
	.feature-card p { color: var(--muted); margin: 0; font-size: 0.94rem; line-height: 1.6; }

	.about-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
	.about-band .stat-num { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
	.about-band .stat-cap { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

	.cta-band {
		background:
			radial-gradient(620px 300px at 15% -40%, rgba(41, 169, 224, 0.4), transparent 60%),
			radial-gradient(520px 320px at 100% 120%, rgba(20, 189, 176, 0.38), transparent 55%),
			linear-gradient(120deg, var(--navy-900), var(--navy-700));
		color: #fff;
		border-radius: var(--radius-lg);
		padding: 60px 48px;
		text-align: center;
		box-shadow: var(--shadow-md);
		position: relative;
		overflow: hidden;
	}
	.cta-band h2 { color: #fff; margin: 0 0 12px; font-size: 1.9rem; }
	.cta-band p { color: rgba(255, 255, 255, 0.78); margin: 0 0 28px; font-size: 1.05rem; }

	@media (max-width: 960px) {
		.landing-hero h1 { font-size: 2.2rem; }
		.landing-hero { padding: 64px 0 72px; }
		.landing-hero .hero-sub { font-size: 1.05rem; }
		.section { padding: 50px 0; }
		.section-title { font-size: 1.7rem; }
		.cta-band { padding: 38px 22px; }
		.cta-band h2 { font-size: 1.5rem; }
		.portal-hero { padding: 26px 22px; }
	}

	/* ── Mobil (< 640px) ───────────────────────────────────── */
	@media (max-width: 640px) {
		.portal-header { padding-top: 8px; }
		.portal-header .uk-container { min-height: 56px; }
		.portal-brand { font-size: 1.1rem; }
		.portal-brand .brand-mark { width: 32px; height: 32px; margin-right: 8px; font-size: 0.95rem; border-radius: 9px; }
		.portal-hero { padding: 20px 18px; border-radius: 14px; margin-bottom: 18px; }
		.portal-hero h2 { font-size: 1.3rem; }
		.portal-hero .lead { font-size: 0.92rem; }
		.portal-card { padding: 18px 16px; border-radius: var(--card-radius-lg, 16px); }
		.portal-card h3 { font-size: 1rem; padding-bottom: 10px; margin-bottom: 14px; }
		/* Vlastní padding, jinak by ho přebil `.portal-card` výš v tomhle bloku (stejná
		   specificita, pozdější pravidlo vyhrává) a dlaždice by na mobilu zase narostly. */
		.stat-card { padding: 13px 14px; }
		.stat-card:has(.stat-icon) { column-gap: 11px; }
		.stat-card .stat-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
		.stat-card .stat-value { font-size: 1.3rem; }
		.stat-card .stat-label { font-size: 0.76rem; }
		.feature-card { padding: 22px 18px; }
		.feature-card .feature-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 1.15rem; margin-bottom: 14px; }
		.landing-hero h1 { font-size: 1.75rem; }
		.landing-hero .hero-sub { font-size: 0.95rem; }
		.landing-hero { padding: 52px 0 58px; }
		.uk-table th, .uk-table td { font-size: 0.85rem; padding: 8px 6px; }
		h1 { font-size: 1.55rem; }
		h2 { font-size: 1.3rem; }
		h3 { font-size: 1.1rem; }
	}

	/* Tabulky na mobilu horizontálně scrollují (display:block + overflow-x:auto).
	   Globální fallback — admin nemusí ručně přidávat .uk-overflow-auto na každý template. */
	.portal-main .uk-table {
		max-width: 100%;
	}
	@media (max-width: 768px) {
		.portal-main .uk-table {
			display: block;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
		}
	}