/* Štýly webu ekonomickesluzby.sk (marve s.r.o.)
 *
 * Vizuálny smer: sklo na farebnom prechode. Pozadie stránky nesie mäkký
 * prechod z farieb loga, obsah leží na priesvitných tabuliach s rozostrením.
 *
 * Farby sú prevzaté z loga — tmavomodrá #14395e a modrá #2e7bc4. Tretia
 * farba (tyrkysová) sa objavuje len v rozostrených škvrnách na pozadí,
 * nikdy v texte ani v tlačidle. Odvaha patrí na jedno miesto.
 *
 * Poradie: premenné → základ → sklo → skladba → hlavička → sekcie → mobil.
 */

/* ------------------------------------------------------------ PREMENNÉ */
:root {
	/* Priamo z loga. */
	--marve-navy: #14395e;
	--marve-modra: #2e7bc4;

	--marve-navy-tmava: #081c33;
	--marve-modra-tmava: #1e5c9c;

	/* Modrá na drobný text — menovky, hlavičky tabuliek, odkazy v texte.
	   Firemná --marve-modra má na svetlom skle pomer 4,3 : 1 a WCAG žiada
	   pri bežnom texte 4,5 : 1. Rozdiel je okom sotva viditeľný, ale
	   nástroje ho hlásia a ľuďom so slabším zrakom naozaj chýba.
	   Na ikony a rámy sa ďalej používa --marve-modra: pri grafike stačí
	   3 : 1 a tam značka nemá dôvod blednúť. */
	--marve-modra-text: var(--marve-modra-tmava);
	--marve-modra-svetla: #6fb2e8;
	/* Len do rozostrených škvŕn na pozadí. */
	--marve-tyrkys: #2fb6d9;

	/* Neutrály sú posunuté do modra, aby na prechode nepôsobili špinavo. */
	--marve-text: #0b1d30;
	--marve-text-tlmeny: #52667d;
	--marve-podklad: #eef4fb;

	/* Sklo na svetlom podklade. */
	--marve-sklo: rgba(255, 255, 255, .72);
	--marve-sklo-plne: rgba(255, 255, 255, .9);
	--marve-sklo-okraj: rgba(255, 255, 255, .9);

	/* Sklo na tmavom podklade. */
	--marve-sklo-tmave: rgba(255, 255, 255, .07);
	--marve-sklo-tmave-okraj: rgba(255, 255, 255, .16);

	--marve-obal: 1640px;

	--marve-r-velky: 26px;
	--marve-r-stredny: 16px;
	--marve-r-maly: 10px;
	--marve-r-pilulka: 999px;

	/* Tieň je mäkký a modrý — čierny tieň by na farebnom prechode zošedol. */
	--marve-tien: 0 2px 6px rgba(11, 29, 48, .05), 0 22px 50px -24px rgba(20, 57, 94, .38);
	--marve-tien-vyssi: 0 4px 10px rgba(11, 29, 48, .07), 0 34px 70px -26px rgba(20, 57, 94, .48);

	--marve-pismo: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--marve-pismo-nadpis: 'Plus Jakarta Sans', 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------- ZÁKLAD */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	/* Podklad musí byť vyplnený aj pod škvrnami — inak presvitá biela. */
	background: var(--marve-podklad);
	color: var(--marve-text);
	font-family: var(--marve-pismo);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Farebné škvrny pozadia. Sú v jednom prvku na pozadí stránky, aby sa
   nemuseli opakovať v každej sekcii a aby ich rozostrenie nezaťažovalo
   vykresľovanie obsahu. */
.marve-skvrny {
	position: fixed;
	inset: -20vh -10vw;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(38vw 38vw at 12% 8%, rgba(46, 123, 196, .30), transparent 62%),
		radial-gradient(34vw 34vw at 88% 22%, rgba(47, 182, 217, .22), transparent 64%),
		radial-gradient(42vw 42vw at 72% 78%, rgba(20, 57, 94, .18), transparent 66%),
		radial-gradient(30vw 30vw at 20% 92%, rgba(46, 123, 196, .20), transparent 64%);
	filter: blur(30px);
}

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

a {
	color: var(--marve-modra-tmava);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--marve-navy);
}

h1, h2, h3, h4 {
	font-family: var(--marve-pismo-nadpis);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.025em;
	margin: 0 0 .5em;
	text-wrap: balance;
	color: var(--marve-navy);
}

h1 {
	font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
}

h2 {
	font-size: clamp(1.65rem, 1.2rem + 2vw, 2.5rem);
}

h3 {
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: -.015em;
}

p {
	margin: 0 0 1.1em;
}

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Atribút hidden musí prebiť display z triedy — inak zostane zavreté
   mobilné menu vidieť, lebo .marve-menu má display: flex a v poradí
   špecifickosti vyhrá nad [hidden] z prehliadača. */
[hidden] {
	display: none !important;
}

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

.marve-skryte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.marve-preskoc {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--marve-navy);
	color: #fff;
	border-radius: var(--marve-r-maly);
	text-decoration: none;
	transition: top .15s ease;
}

.marve-preskoc:focus {
	top: 12px;
	color: #fff;
}

/* ------------------------------------------------------------------ SKLO */
/* Jedna trieda, ktorú nosia všetky priesvitné tabule. Keď sa raz ukáže,
   že rozostrenie je na starších telefónoch pomalé, vypne sa na jednom
   mieste. */
.marve-sklo {
	background: var(--marve-sklo);
	border: 1px solid var(--marve-sklo-okraj);
	border-radius: var(--marve-r-velky);
	box-shadow: var(--marve-tien);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}

.marve-sklo--plne {
	background: var(--marve-sklo-plne);
}

.marve-sklo--tmave {
	background: var(--marve-sklo-tmave);
	border-color: var(--marve-sklo-tmave-okraj);
	box-shadow: none;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* -------------------------------------------------------------- SKLADBA */
/* Bočné odsadenie celého webu. Na počítači 60 px, na užších
   obrazovkách sa zmenšuje — 60 px z každej strany by na telefóne
   zjedlo tretinu šírky a text by sa lámal po troch slovách. */
.marve-obal {
	width: 100%;
	max-width: var(--marve-obal);
	margin-inline: auto;
	padding-inline: clamp(16px, 4.2vw, 60px);
}

.marve-sekcia {
	padding-block: clamp(56px, 4vw + 34px, 96px);
}

.marve-sekcia__hlavicka {
	max-width: 660px;
	margin-bottom: clamp(30px, 3vw, 46px);
}

.marve-sekcia__hlavicka--stred {
	margin-inline: auto;
	text-align: center;
}

/* Nadradený riadok nad nadpisom — nesie zmysel sekcie jedným slovom. */
.marve-nadradene {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: var(--marve-r-pilulka);
	background: rgba(46, 123, 196, .1);
	color: var(--marve-modra-tmava);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.marve-perex {
	max-width: 62ch;
	font-size: 1.08rem;
	color: var(--marve-text-tlmeny);
}

/* ------------------------------------------------------------- TLAČIDLÁ */
.marve-tlacidlo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: var(--marve-r-pilulka);
	font-family: var(--marve-pismo);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.marve-tlacidlo:hover {
	transform: translateY(-1px);
}

.marve-tlacidlo--hlavne {
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(46, 123, 196, .8);
}

.marve-tlacidlo--hlavne:hover {
	color: #fff;
	box-shadow: 0 16px 34px -12px rgba(46, 123, 196, .9);
}

/* Sklenené tlačidlo na tmavom podklade. */
.marve-tlacidlo--sklo {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.marve-tlacidlo--sklo:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.marve-tlacidlo--obrys {
	background: rgba(255, 255, 255, .6);
	border-color: rgba(20, 57, 94, .18);
	color: var(--marve-navy);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.marve-tlacidlo--obrys:hover {
	border-color: var(--marve-modra);
	color: var(--marve-modra-tmava);
}

.marve-tlacidlo--biele {
	background: #fff;
	color: var(--marve-navy);
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .5);
}

.marve-tlacidlo--biele:hover {
	color: var(--marve-navy);
}

/* ------------------------------------------------------------- HLAVIČKA */
/* Hlavička nesedí na okraji okna, ale pláva ako sklenená lišta. */
.marve-hlavicka {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 14px;
}

/* Nie plná pilulka: pri polomere polovice výšky by rohový oblúk zaťal
   do tlačidla vpravo a to by z lišty vytŕčalo. */
.marve-hlavicka__vnutro {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 14px 10px 22px;
	border-radius: var(--marve-r-velky);
}

.marve-znacka {
	display: block;
	margin-right: auto;
	line-height: 0;
}

.marve-znacka img {
	width: 170px;
	max-width: 44vw;
}

.marve-menu {
	display: flex;
	align-items: center;
	gap: 2px;
}

.marve-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--marve-r-pilulka);
	color: var(--marve-navy);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.marve-menu a:hover {
	background: rgba(46, 123, 196, .1);
	color: var(--marve-modra-tmava);
}

.marve-menu .marve-aktivna {
	background: rgba(46, 123, 196, .14);
	color: var(--marve-modra-tmava);
}

.marve-hlavicka__akcie {
	display: flex;
	align-items: center;
	gap: 10px;
}

.marve-telefon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 4px;
	font-weight: 700;
	font-size: .92rem;
	color: var(--marve-navy);
	text-decoration: none;
	white-space: nowrap;
}

.marve-telefon:hover {
	color: var(--marve-modra-tmava);
}

.marve-telefon svg {
	flex: none;
	color: var(--marve-modra);
}

.marve-prepinac {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: rgba(46, 123, 196, .1);
	border: 0;
	border-radius: var(--marve-r-pilulka);
	color: var(--marve-navy);
	cursor: pointer;
}

/* ----------------------------------------------------------------- HERO */
.marve-hero {
	position: relative;
	isolation: isolate;
	border-radius: 34px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--marve-navy-tmava) 0%, var(--marve-navy) 45%, var(--marve-modra-tmava) 100%);
	color: #fff;
}

/* Fotografia je pod prechodom len ako štruktúra — v plnej sile by
   s prechodom bojovala a text by na nej prestal držať. */
.marve-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .22;
	mix-blend-mode: luminosity;
	z-index: -2;
}

.marve-hero__zavoj {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(48% 60% at 78% 18%, rgba(47, 182, 217, .38), transparent 70%),
		radial-gradient(52% 62% at 12% 92%, rgba(46, 123, 196, .42), transparent 70%),
		linear-gradient(100deg, rgba(8, 28, 51, .82) 0%, rgba(8, 28, 51, .42) 52%, rgba(8, 28, 51, .1) 100%);
}

/* Vnútorné odsadenie si hero nesie samo — kontajner okolo neho drží
   len šírku, rovnakú ako má hlavička. */
.marve-hero__vnutro {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(32px, 4vw, 60px);
	align-items: center;
	padding-block: clamp(56px, 6vw, 96px);
	padding-inline: clamp(24px, 3.5vw, 56px);
}

.marve-hero__vnutro > * {
	min-width: 0;
}

.marve-hero__nadradene {
	display: inline-block;
	margin-bottom: 20px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: var(--marve-r-pilulka);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: .78rem;
	font-weight: 600;
	color: #dbeaf7;
}

.marve-hero h1 {
	color: #fff;
	margin-bottom: 20px;
}

.marve-hero__perex {
	max-width: 56ch;
	margin-bottom: 30px;
	font-size: 1.1rem;
	color: #c3d7e9;
}

.marve-hero__akcie {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Sklenená karta v hlavičke — najkratšia cesta k dopytu. */
.marve-rychla {
	padding: 26px;
	border-radius: var(--marve-r-velky);
}

.marve-rychla h2 {
	margin-bottom: 6px;
	font-size: 1.22rem;
	color: #fff;
}

.marve-rychla__popis {
	margin-bottom: 18px;
	font-size: .92rem;
	color: #b7cee2;
}

.marve-rychla__pole {
	display: grid;
	gap: 10px;
}

.marve-rychla input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--marve-r-stredny);
	color: #fff;
	font-family: var(--marve-pismo);
	font-size: 1rem;
}

.marve-rychla input::placeholder {
	color: #90aac2;
}

.marve-rychla input:focus {
	border-color: var(--marve-modra-svetla);
	background: rgba(255, 255, 255, .14);
}

.marve-rychla__poznamka {
	margin-top: 14px;
	font-size: .78rem;
	line-height: 1.5;
	color: #9db6cd;
}

/* ------------------------------------------------------ PÁS DÔVERY */
/* Pás sa prekrýva s dolným okrajom hlavičky — sklo tak má cez čo
   presvitať a švík medzi sekciami zmizne. */
.marve-dovera {
	position: relative;
	z-index: 2;
	margin-top: -46px;
}

.marve-dovera__mriezka {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 14px;
}

.marve-dovera__mriezka > * {
	min-width: 0;
}

.marve-dovera__polozka {
	padding: 16px 18px;
	border-radius: var(--marve-r-stredny);
}

.marve-dovera__polozka:hover {
	background: rgba(255, 255, 255, .55);
}

.marve-dovera__nazov {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 5px;
	font-family: var(--marve-pismo-nadpis);
	font-weight: 700;
	font-size: .97rem;
	color: var(--marve-navy);
}

.marve-dovera__nazov svg {
	flex: none;
	color: var(--marve-modra);
}

.marve-dovera__popis {
	margin: 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--marve-text-tlmeny);
}

/* ------------------------------------------------ ZAČÍNAJÚCE FIRMY */
.marve-start__mriezka {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 30px;
}

.marve-start__mriezka > * {
	min-width: 0;
}

.marve-start__polozka {
	display: flex;
	gap: 16px;
	padding: 24px 26px;
}

.marve-start__cislo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
	color: #fff;
	font-family: var(--marve-pismo-nadpis);
	font-size: .95rem;
	font-weight: 800;
	box-shadow: 0 8px 18px -8px rgba(46, 123, 196, .9);
}

.marve-start__polozka h3 {
	margin-bottom: 5px;
	font-size: 1.04rem;
}

.marve-start__polozka p {
	max-width: 58ch;
	font-size: .92rem;
	color: var(--marve-text-tlmeny);
}

.marve-start__zaver {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 28px 30px;
	border-radius: var(--marve-r-velky);
	background: linear-gradient(120deg, var(--marve-navy-tmava) 0%, var(--marve-navy) 55%, var(--marve-modra-tmava) 100%);
	color: #c7dcee;
	box-shadow: var(--marve-tien);
}

.marve-start__zaver p {
	flex: 1 1 320px;
	max-width: 68ch;
	margin: 0;
	font-size: 1rem;
}

.marve-start__zaver strong {
	color: #fff;
}

/* -------------------------------------------------------------- SLUŽBY */
.marve-sluzby {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.marve-sluzby > * {
	min-width: 0;
}

.marve-sluzba {
	display: flex;
	flex-direction: column;
	padding: 32px 30px 30px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.marve-sluzba:hover {
	transform: translateY(-3px);
	box-shadow: var(--marve-tien-vyssi);
}

.marve-sluzba__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border-radius: 17px;
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(46, 123, 196, .95);
}

.marve-sluzba h3 {
	margin-bottom: 10px;
	font-size: 1.24rem;
}

.marve-sluzba__popis {
	margin-bottom: 18px;
	font-size: .95rem;
	color: var(--marve-text-tlmeny);
}

.marve-zoznam {
	margin-bottom: 24px;
	display: grid;
	gap: 9px;
}

.marve-zoznam li {
	position: relative;
	padding-left: 26px;
	font-size: .93rem;
	line-height: 1.5;
}

/* Odrážka je vlastná — znak zoznamu sa nedá zafarbiť ani zarovnať
   na prvý riadok textu. */
.marve-zoznam li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
}

.marve-sluzba__odkaz {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: .94rem;
	color: var(--marve-modra-tmava);
	text-decoration: none;
}

.marve-sluzba__odkaz svg {
	transition: transform .15s ease;
}

.marve-sluzba__odkaz:hover svg {
	transform: translateX(4px);
}

/* -------------------------------------------------------------- POSTUP */
.marve-postup {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	counter-reset: krok;
}

.marve-postup > * {
	min-width: 0;
}

.marve-krok {
	position: relative;
	padding: 28px 26px;
	counter-increment: krok;
}

.marve-krok::before {
	content: counter(krok, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.04em;
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.marve-krok h3 {
	margin-bottom: 8px;
	font-size: 1.08rem;
}

.marve-krok p {
	font-size: .93rem;
	color: var(--marve-text-tlmeny);
}

/* ----------------------------------------------------------------- CENY */
.marve-ceny {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

.marve-ceny > * {
	min-width: 0;
}

.marve-cena {
	padding: 28px;
}

.marve-cena__zaklad {
	display: block;
	margin-bottom: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--marve-modra-text);
}

.marve-cena__nazov {
	margin-bottom: 10px;
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.16rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--marve-navy);
}

.marve-cena p {
	font-size: .93rem;
	color: var(--marve-text-tlmeny);
}

.marve-poznamka-cien {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 26px 30px;
}

.marve-poznamka-cien p {
	flex: 1 1 320px;
	max-width: 68ch;
	margin: 0;
	font-size: .98rem;
	color: var(--marve-navy);
}

/* ---------------------------------------------------------------- O NÁS */
.marve-o-nas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, 4vw, 60px);
	align-items: center;
}

.marve-o-nas > * {
	min-width: 0;
}

.marve-o-nas p,
.marve-o-nas .marve-citat {
	max-width: 58ch;
}

/* Fotografia v sklenenom ráme — sklo tak nie je len na kartách s textom. */
.marve-o-nas__ram {
	padding: 12px;
	border-radius: 30px;
}

.marve-o-nas__foto {
	width: 100%;
	border-radius: 20px;
}

.marve-citat {
	margin: 26px 0 0;
	padding: 18px 22px;
	border-radius: var(--marve-r-stredny);
	border-left: 3px solid var(--marve-modra);
	background: rgba(46, 123, 196, .08);
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.14rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--marve-navy);
}

/* ------------------------------------------------------ ČASTÉ OTÁZKY */
.marve-otazky {
	max-width: 840px;
	margin-inline: auto;
	display: grid;
	gap: 12px;
}

.marve-otazka {
	padding: 4px 24px;
}

.marve-otazka > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--marve-navy);
	cursor: pointer;
	list-style: none;
}

.marve-otazka > summary::-webkit-details-marker {
	display: none;
}

.marve-otazka__znak {
	flex: none;
	color: var(--marve-modra);
	transition: transform .18s ease;
}

.marve-otazka[open] .marve-otazka__znak {
	transform: rotate(45deg);
}

.marve-otazka__odpoved {
	padding: 0 0 20px;
	max-width: 68ch;
	font-size: .97rem;
	color: var(--marve-text-tlmeny);
}

/* --------------------------------------------------------------- DOPYT */
.marve-dopyt {
	position: relative;
	border-radius: 34px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--marve-navy-tmava) 0%, var(--marve-navy) 50%, var(--marve-modra-tmava) 100%);
	color: #c3d7e9;
}

.marve-dopyt::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46% 58% at 84% 12%, rgba(47, 182, 217, .32), transparent 70%),
		radial-gradient(50% 60% at 8% 88%, rgba(46, 123, 196, .38), transparent 70%);
	pointer-events: none;
}

.marve-dopyt__vnutro {
	position: relative;
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(32px, 4vw, 60px);
	align-items: start;
	padding-block: clamp(52px, 4vw + 30px, 88px);
	padding-inline: clamp(24px, 3.5vw, 56px);
}

.marve-dopyt__vnutro > * {
	min-width: 0;
}

.marve-dopyt h2 {
	color: #fff;
}

.marve-dopyt__vnutro > div > p {
	max-width: 56ch;
}

.marve-dopyt .marve-nadradene {
	background: rgba(255, 255, 255, .12);
	color: #cfe3f5;
}

.marve-formular {
	display: grid;
	gap: 16px;
	padding: 30px;
	border-radius: var(--marve-r-velky);
}

.marve-pole--dvojica {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.marve-pole--dvojica > * {
	min-width: 0;
}

.marve-pole label {
	display: block;
	margin-bottom: 7px;
	font-size: .86rem;
	font-weight: 600;
	color: #b9cbdb;
}

.marve-pole input,
.marve-pole select,
.marve-pole textarea {
	width: 100%;
	padding: 13px 15px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--marve-r-stredny);
	color: #fff;
	font-family: var(--marve-pismo);
	font-size: 1rem;
}

.marve-pole textarea {
	min-height: 104px;
	resize: vertical;
}

.marve-pole input::placeholder,
.marve-pole textarea::placeholder {
	color: #8ba5bd;
}

.marve-pole input:focus,
.marve-pole select:focus,
.marve-pole textarea:focus {
	border-color: var(--marve-modra-svetla);
	background: rgba(255, 255, 255, .13);
}

/* Šípka vlastného výberu — natívna je na tmavom pozadí nečitateľná. */
.marve-pole select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238ba5bd' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 42px;
}

.marve-pole select option {
	background: var(--marve-navy-tmava);
	color: #fff;
}

.marve-suhlas {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	font-size: .83rem;
	line-height: 1.5;
	color: #b9cbdb;
}

.marve-suhlas input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--marve-modra-svetla);
}

.marve-suhlas a {
	color: var(--marve-modra-svetla);
}

.marve-kontakty {
	display: grid;
	gap: 12px;
}

.marve-kontakt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: var(--marve-r-stredny);
	color: #fff;
	text-decoration: none;
}

.marve-kontakt:hover {
	background: rgba(255, 255, 255, .13);
	color: #fff;
}

.marve-kontakt svg {
	flex: none;
	color: var(--marve-modra-svetla);
}

.marve-kontakt__popis {
	display: block;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #93aec7;
}

.marve-kontakt__hodnota {
	display: block;
	font-weight: 700;
	font-size: 1.04rem;
}

/* --------------------------------------------------------------- PÄTIČKA */
/* Pätička je zaoblený blok v rovnakom kontajneri ako hero — nie tmavý
   pruh cez celé okno. Spodná medzera drží web „odlepený“ od okraja
   obrazovky, inak sa pätička opiera o dolnú hranu prehliadača. */
.marve-pata {
	margin-top: clamp(56px, 5vw, 90px);
	margin-bottom: clamp(24px, 3vw, 48px);
	border-radius: 34px;
	overflow: hidden;
	background: linear-gradient(140deg, var(--marve-navy-tmava) 0%, #0b2749 60%, var(--marve-navy) 100%);
	color: #93aec7;
	font-size: .93rem;
}

.marve-pata__vnutro {
	padding-inline: clamp(24px, 3.5vw, 56px);
}

.marve-pata__mriezka {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-block: 48px 36px;
}

.marve-pata__mriezka > * {
	min-width: 0;
}

.marve-pata__logo {
	width: 200px;
	max-width: 60%;
	margin-bottom: 18px;
}

.marve-pata h2 {
	margin-bottom: 16px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.marve-pata a {
	color: #93aec7;
	text-decoration: none;
}

.marve-pata a:hover {
	color: #fff;
}

.marve-pata__zoznam {
	display: grid;
	gap: 9px;
}

.marve-pata__spodok {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .85rem;
}

.marve-pata__pravne {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Zápis v obchodnom registri je povinný údaj, ale nikto ho nečíta —
   patrí na koniec a menším písmom. */
.marve-pata__register {
	margin: 0;
	padding-block: 16px 26px;
	font-size: .8rem;
	line-height: 1.5;
	color: #8ba3b9;
}

/* --------------------------------------------- LIŠTA S VOLANÍM NA MOBILE */
/* Cieľ webu je telefonát alebo dopyt. Na mobile sú preto obidve
   po celý čas na dosah palca. */
.marve-lista-mobil {
	display: none;
}

/* ------------------------------------------------------- REKONŠTRUKCIA */
/* Stránka, ktorá je na webe, kým sa pripravuje obsah. Používa tie isté
   farby a to isté sklo — návštevník uvidí, kam sa web uberá. */
.marve-rekonstrukcia {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.marve-rekonstrukcia__karta {
	width: 100%;
	max-width: 620px;
	padding: clamp(30px, 5vw, 52px);
	text-align: center;
}

.marve-rekonstrukcia__logo {
	width: 260px;
	max-width: 78%;
	margin: 0 auto 30px;
}

.marve-rekonstrukcia h1 {
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
	margin-bottom: 14px;
}

.marve-rekonstrukcia__perex {
	max-width: 46ch;
	margin: 0 auto 30px;
	color: var(--marve-text-tlmeny);
}

.marve-rekonstrukcia__kontakty {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.marve-rekonstrukcia__pata {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(20, 57, 94, .12);
	font-size: .85rem;
	color: var(--marve-text-tlmeny);
}

/* ----------------------------------------------------------------- MOBIL */
@media (max-width: 1080px) {
	.marve-hero__vnutro {
		grid-template-columns: 1fr;
	}

	.marve-rychla {
		max-width: 460px;
	}

	.marve-dovera__mriezka {
		grid-template-columns: repeat(2, 1fr);
	}

	.marve-sluzby,
	.marve-postup,
	.marve-ceny {
		grid-template-columns: 1fr;
	}

	.marve-o-nas,
	.marve-dopyt__vnutro,
	.marve-pata__mriezka {
		grid-template-columns: 1fr;
	}

	.marve-o-nas__ram {
		order: -1;
	}
}

@media (max-width: 1150px) {
	.marve-prepinac {
		display: inline-flex;
	}

	.marve-hlavicka__akcie .marve-tlacidlo {
		display: none;
	}

	/* Rozbaľovanie riadi atribút hidden, nie display v štýloch — inak sa
	   čítačke obrazovky ponúkne obsah, ktorý nie je vidieť. */
	.marve-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 10px);
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 12px;
		border-radius: var(--marve-r-velky);
		background: var(--marve-sklo-plne);
		border: 1px solid var(--marve-sklo-okraj);
		box-shadow: var(--marve-tien);
		backdrop-filter: blur(20px) saturate(160%);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
	}

	.marve-menu a {
		padding: 13px 14px;
		border-radius: var(--marve-r-stredny);
		font-size: 1rem;
	}

	.marve-lista-mobil {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 120;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 8px;
		border-radius: var(--marve-r-pilulka);
	}

	.marve-lista-mobil .marve-tlacidlo {
		padding: 13px 10px;
		font-size: .93rem;
	}

	/* Bez odsadenia by lišta prekryla poslednú položku pätičky. */
	body {
		padding-bottom: 86px;
	}
}

@media (max-width: 760px) {
	.marve-start__mriezka {
		grid-template-columns: 1fr;
	}

	.marve-hero,
	.marve-dopyt,
	.marve-pata {
		border-radius: 22px;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 16px;
	}

	.marve-dovera__mriezka {
		grid-template-columns: 1fr;
	}

	.marve-hero__akcie .marve-tlacidlo {
		width: 100%;
	}

	.marve-pole--dvojica {
		grid-template-columns: 1fr;
	}

	.marve-formular {
		padding: 22px 20px;
	}

	/* Na úzkom displeji zostane z telefónu len ikona. Číslo sa ale nesmie
	   vypnúť cez display: none — tým zmizne aj z prístupnostného stromu
	   a odkaz ostane úplne bez názvu: čítačka obrazovky prečíta „odkaz“
	   a nič viac, lebo ikona je aria-hidden. Skryjeme ho teda len pre oči.
	   Aria-label by fungoval tiež, ale číslo sa mení v administrácii
	   a dva zdroje tej istej hodnoty sa raz rozídu. */
	.marve-telefon span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.marve-hlavicka__vnutro {
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ----------------------------------------------------- OBSAH PODSTRÁNOK */
/* Text z editora WordPressu. Nadpisy a odseky sú riešené vyššie, tu je
   len šírka riadka a odsadenie zoznamov — dlhý riadok sa zle číta. */
.marve-stranka {
	padding: clamp(28px, 4vw, 52px);
}

.marve-obsah {
	max-width: 68ch;
}

.marve-obsah h2 {
	margin-top: 1.4em;
}

.marve-obsah h3 {
	margin-top: 1.2em;
}

.marve-obsah ul,
.marve-obsah ol {
	margin: 0 0 1.1em;
	padding-left: 22px;
	list-style: disc;
}

.marve-obsah ol {
	list-style: decimal;
}

.marve-obsah li {
	margin-bottom: 6px;
}

.marve-obsah table {
	width: 100%;
	border-collapse: collapse;
}

/* Široká tabuľka nesmie roztiahnuť stránku — posúva sa vo vlastnom rámci. */
.marve-obsah figure.wp-block-table {
	overflow-x: auto;
}

/* ------------------------------------------------- HLÁSENIE FORMULÁRA */
.marve-hlasenie {
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--marve-r-stredny);
	background: rgba(111, 178, 232, .18);
	border: 1px solid rgba(111, 178, 232, .4);
	color: #eaf3fb;
	font-size: .95rem;
}

.marve-hlasenie--chyba {
	background: rgba(232, 130, 111, .18);
	border-color: rgba(232, 130, 111, .45);
}

/* ------------------------------------------------- HLAVIČKA PODSTRÁNKY */
/* Rovnaký prechod a fotografia ako úvodný banner, len nižšia — podstránka
   nepotrebuje prvú obrazovku na celú výšku, potrebuje rýchlo povedať,
   o čom je, a ponúknuť telefón. */
.marve-hlavicka-stranky {
	position: relative;
	isolation: isolate;
	border-radius: 34px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--marve-navy-tmava) 0%, var(--marve-navy) 45%, var(--marve-modra-tmava) 100%);
	color: #fff;
}

.marve-hlavicka-stranky__vnutro {
	position: relative;
	padding-block: clamp(40px, 4.5vw, 72px);
	padding-inline: clamp(24px, 3.5vw, 56px);
	max-width: 62ch;
}

/* Nadpis podstránky je menší než na domovskej — tam nesie prvú
   obrazovku, tu má nad sebou omrvinky a pod sebou perex. */
.marve-hlavicka-stranky h1 {
	font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
	color: #fff;
	margin-bottom: 18px;
}

.marve-omrvinky {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: .84rem;
	color: #9db6cd;
}

.marve-omrvinky a {
	color: #c3d7e9;
	text-decoration: none;
}

.marve-omrvinky a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------------------------------------------------- DROBNOSTI SEKCIÍ */
/* Sekcia, ktorá nesie len jeden pás — nepotrebuje plnú medzeru zhora
   aj zdola, inak medzi pásmi vznikne prázdna obrazovka. */
.marve-sekcia--tesna {
	padding-block: clamp(24px, 2vw + 12px, 40px);
}

/* Karta v mriežke krokov, ktorá nie je krokom v poradí — číslo by
   tvrdilo poradie, ktoré tam nie je. */
.marve-krok--bez-cisla::before {
	content: none;
}

/* Nadpis vnútri farebného pásu. Musí mať váhu nadpisu, ale nie veľkosť
   nadpisu sekcie — pás je nižší. */
.marve-pas__nadpis {
	margin-bottom: 10px;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
	color: #fff;
}

.marve-pas__nadpis--tmavy {
	color: var(--marve-navy);
}

/* Pásy majú v texte niekedy nadpis a odsek, nie len odsek. */
.marve-start__zaver > div,
.marve-poznamka-cien > div {
	flex: 1 1 340px;
	max-width: 68ch;
}

/* ------------------------------------------------ FORMULÁR — SKUPINY */
.marve-skupina-poli {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 16px;
}

/* legend sa v mriežke správa nepredvídateľne, preto je vyňatý z toku
   a odsadenie rieši margin. */
.marve-skupina-poli__nadpis {
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 0;
	font-family: var(--marve-pismo-nadpis);
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
}

.marve-skupina-poli__nadpis span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(111, 178, 232, .22);
	border: 1px solid rgba(111, 178, 232, .5);
	font-size: .78rem;
	color: #cfe3f5;
}

.marve-pomocny-text {
	margin: -6px 0 12px;
	font-size: .83rem;
	color: #93aec7;
}

.marve-nepovinne {
	margin-left: 6px;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7f97ad;
}

.marve-pole__nadpis {
	display: block;
	margin-bottom: 9px;
	font-size: .86rem;
	font-weight: 600;
	color: #b9cbdb;
}

/* ------------------------------------------------- FORMULÁR — VÝBER */
.marve-vyber {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.marve-vyber > * {
	min-width: 0;
}

.marve-vyber__polozka {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--marve-r-stredny);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.marve-vyber__polozka:hover {
	border-color: rgba(255, 255, 255, .35);
}

/* Zvolenú možnosť treba vidieť na prvý pohľad — samotné zaškrtávacie
   políčko je na to primalé. */
.marve-vyber__polozka:has(input:checked) {
	background: rgba(111, 178, 232, .16);
	border-color: var(--marve-modra-svetla);
}

.marve-vyber__polozka input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--marve-modra-svetla);
}

.marve-vyber__polozka strong {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}

.marve-vyber__polozka em {
	display: block;
	margin-top: 2px;
	font-size: .81rem;
	font-style: normal;
	color: #93aec7;
}

.marve-vyber--drobny .marve-vyber__polozka {
	padding: 10px 13px;
}

.marve-vyber--drobny strong {
	font-size: .89rem;
	font-weight: 500;
}

/* --------------------------------------- FORMULÁR — OTÁZKY K SLUŽBE */
.marve-otazky-sluzby {
	display: grid;
	gap: 16px;
}

.marve-otazky-sluzby:empty {
	display: none;
}

.marve-skupina {
	margin: 0;
	padding: 20px;
	display: grid;
	gap: 16px;
	background: rgba(111, 178, 232, .07);
	border: 1px solid rgba(111, 178, 232, .28);
	border-radius: var(--marve-r-velky);
}

.marve-skupina__nadpis {
	float: left;
	width: 100%;
	margin-bottom: 14px;
	padding: 0;
	font-family: var(--marve-pismo-nadpis);
	font-size: .92rem;
	font-weight: 700;
	color: var(--marve-modra-svetla);
}

@media (max-width: 640px) {
	.marve-vyber {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------- STRÁNKA KONTAKT */
.marve-kontakt-karty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.marve-kontakt-karty > * {
	min-width: 0;
}

.marve-kontakt-karta {
	display: block;
	padding: 28px 26px;
	color: var(--marve-text);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Karta s telefónom a e-mailom je odkaz, karta so sídlom nie —
   posúvať pri prejdení myšou má zmysel len pri tej, na ktorú sa klikne. */
a.marve-kontakt-karta:hover {
	transform: translateY(-3px);
	box-shadow: var(--marve-tien-vyssi);
	color: var(--marve-text);
}

.marve-kontakt-karta__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 15px;
	background: linear-gradient(135deg, var(--marve-modra) 0%, var(--marve-navy) 100%);
	color: #fff;
	box-shadow: 0 10px 22px -12px rgba(46, 123, 196, .95);
}

.marve-kontakt-karta__popis {
	display: block;
	margin-bottom: 6px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--marve-modra-text);
}

.marve-kontakt-karta__hodnota {
	display: block;
	margin-bottom: 8px;
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--marve-navy);
}

.marve-kontakt-karta__vysvetlenie {
	display: block;
	font-size: .89rem;
	line-height: 1.5;
	color: var(--marve-text-tlmeny);
}

.marve-kontakt-karta__odkaz {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: .89rem;
	font-weight: 600;
	text-decoration: none;
}

.marve-kontakt-karta__odkaz:hover {
	text-decoration: underline;
}

/* ------------------------------------------------- FAKTURAČNÉ ÚDAJE */
.marve-udaje {
	padding: clamp(26px, 3vw, 40px);
}

.marve-udaje__zoznam {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px 28px;
	margin: 0;
}

.marve-udaje__zoznam > div {
	min-width: 0;
}

.marve-udaje__zoznam dt {
	margin-bottom: 3px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--marve-modra-text);
}

.marve-udaje__zoznam dd {
	margin: 0;
	font-weight: 600;
	color: var(--marve-navy);
	/* Číslice v stĺpci pod sebou musia mať rovnakú šírku. */
	font-variant-numeric: tabular-nums;
}

.marve-udaje__register {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--marve-linka, rgba(20, 57, 94, .12));
	font-size: .86rem;
	color: var(--marve-text-tlmeny);
}

/* Kolízia v kaskáde: `.marve-pole label` má špecifickosť 0-1-1 a prebíja
   `.marve-vyber__polozka` (0-1-0). Možnosti vnútri poľa tak dostali
   display: block a zaškrtávacie políčko spadlo nad text. Trieda v triede
   vyrovná skóre na 0-2-0 a vráti im riadok. */
.marve-vyber .marve-vyber__polozka {
	display: flex;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- VÝZVA */
/* Krátky pás na konci podstránok. Formulár je len na Kontakte — päťkrát
   ten istý dlhý blok návštevník po druhej stránke prestane vidieť. */
.marve-vyzva {
	position: relative;
	border-radius: 34px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--marve-navy-tmava) 0%, var(--marve-navy) 50%, var(--marve-modra-tmava) 100%);
	color: #c3d7e9;
}

.marve-vyzva::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46% 62% at 84% 14%, rgba(47, 182, 217, .32), transparent 70%),
		radial-gradient(50% 64% at 8% 86%, rgba(46, 123, 196, .38), transparent 70%);
	pointer-events: none;
}

.marve-vyzva__vnutro {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 44px);
	padding-block: clamp(38px, 3vw + 20px, 60px);
	padding-inline: clamp(24px, 3.5vw, 56px);
}

.marve-vyzva__text {
	flex: 1 1 380px;
	min-width: 0;
}

.marve-vyzva__text h2 {
	margin-bottom: 10px;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	color: #fff;
}

.marve-vyzva__text p {
	max-width: 58ch;
}

.marve-vyzva .marve-nadradene {
	background: rgba(255, 255, 255, .12);
	color: #cfe3f5;
}

.marve-vyzva__akcie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 760px) {
	.marve-vyzva {
		border-radius: 22px;
	}

	.marve-vyzva__akcie .marve-tlacidlo {
		width: 100%;
	}
}

/* ------------------------------------------- PÁS DÔVERY — DROBNEJŠIE */
/* Pás pod bannerom nemá súťažiť s nadpisom H1. Zmenšené odsadenie
   aj písmo, aby zostal tým, čím má byť — potvrdením, nie sekciou. */
.marve-dovera {
	margin-top: -36px;
}

.marve-dovera__mriezka {
	gap: 6px;
	padding: 10px;
}

.marve-dovera__polozka {
	padding: 13px 15px;
	border-radius: 12px;
}

.marve-dovera__nazov {
	gap: 8px;
	margin-bottom: 3px;
	font-size: .9rem;
}

.marve-dovera__nazov svg {
	width: 16px;
	height: 16px;
}

.marve-dovera__popis {
	font-size: .82rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------- CENNÍK */
/* Kým nie je vyplnená sadzba, na mieste sumy stojí základ ceny. Preto
   nie je veľkosť písma nastavená na číslo — text „Počet účtovných
   zápisov za obdobie“ by v 2rem vyzeral ako nadpis. */
.marve-cena__suma {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(20, 57, 94, .12);
	font-family: var(--marve-pismo-nadpis);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--marve-modra-tmava);
}

.marve-zoznam-v-cene {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 14px 30px;
	margin: 0;
	padding: clamp(24px, 3vw, 36px);
	list-style: none;
}

.marve-zoznam-v-cene li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	min-width: 0;
	font-size: .96rem;
	color: var(--marve-text);
}

.marve-zoznam-v-cene svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--marve-modra);
}

/* ------------------------------------------------------------ O NÁS */
/* Citát má vlastný štýl už vyššie — tu sa len obmedzí šírka riadka,
   aby sa na podstránke nečítal cez celú tabuľu. */
.marve-stranka .marve-citat {
	max-width: 58ch;
	line-height: 1.45;
}

.marve-poznamka-pod {
	margin: 16px 4px 0;
	font-size: .88rem;
	color: var(--marve-text-tlmeny);
}

/* ------------------------------------------------------- ROZCESTNÍK 404 */
.marve-rozcestnik {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 26px 0 0;
}

.marve-rozcestnik__polozka {
	display: block;
	min-width: 0;
	padding: 16px 18px;
	border: 1px solid rgba(20, 57, 94, .14);
	border-radius: var(--marve-r-stredny);
	background: rgba(255, 255, 255, .55);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.marve-rozcestnik__polozka:hover {
	border-color: var(--marve-modra);
	transform: translateY(-2px);
	box-shadow: var(--marve-tien);
}

.marve-rozcestnik__polozka strong {
	display: block;
	margin-bottom: 3px;
	font-family: var(--marve-pismo-nadpis);
	font-size: 1rem;
	color: var(--marve-navy);
}

.marve-rozcestnik__polozka span {
	font-size: .88rem;
	color: var(--marve-text-tlmeny);
}

.marve-stranka__akcie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

/* ------------------------------------------- ÚDAJE A TABUĽKY V TEXTE */
/* Právne stránky vkladajú údaje prevádzkovateľa skratkou. Vnútri textu
   majú užšie stĺpce než na samostatnej karte — inak by sa pri troch
   riadkoch roztiahli cez celý riadok textu. */
.marve-udaje__zoznam--v-texte {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 18px 0 22px;
	padding: 22px 24px;
	border: 1px solid rgba(20, 57, 94, .12);
	border-radius: var(--marve-r-stredny);
	background: rgba(255, 255, 255, .5);
}

.marve-tabulka-obal {
	margin: 0 0 24px;
	overflow-x: auto;
	border-radius: var(--marve-r-stredny);
	border: 1px solid rgba(20, 57, 94, .12);
	background: rgba(255, 255, 255, .5);
}

.marve-tabulka {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: .9rem;
}

.marve-tabulka th,
.marve-tabulka td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(20, 57, 94, .1);
}

.marve-tabulka thead th {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--marve-modra-text);
	white-space: nowrap;
}

.marve-tabulka tbody tr:last-child th,
.marve-tabulka tbody tr:last-child td {
	border-bottom: 0;
}

.marve-tabulka code {
	font-size: .86em;
	color: var(--marve-navy);
	word-break: break-word;
}

/* Hlásenie v úvodnom banneri potrebuje pod sebou medzeru — bez nej
   sadne rovno na políčko s telefónnym číslom. */
.marve-rychla .marve-hlasenie {
	margin-bottom: 14px;
}

/* --------------------------------------------- ZAROVNANIE VÝZVY V PÁSE */
/* Text v týchto pásoch má obmedzenú šírku riadka (68ch), takže sa nikdy
   neroztiahne cez celú tabuľu — tlačidlo potom zostalo visieť kdesi
   v strede. Odsunieme ho automatickým okrajom na pravý kraj, kam v páse
   s výzvou patrí: oko prechádza text zľava doprava a na konci nájde
   ďalší krok.
   Netýka sa to .marve-vyzva — tá má vlastné rozloženie s dvoma tlačidlami. */
.marve-start__zaver > .marve-tlacidlo,
.marve-poznamka-cien > .marve-tlacidlo {
	margin-left: auto;
}

/* Keď sa tlačidlo zalomí pod text, automatický okraj by ho pritlačil
   doprava pod ľavý odsek a väzba medzi nimi by sa stratila. Na úzkej
   obrazovke je preto cez celú šírku. */
@media (max-width: 760px) {
	.marve-start__zaver > .marve-tlacidlo,
	.marve-poznamka-cien > .marve-tlacidlo {
		margin-left: 0;
		width: 100%;
	}
}

/* Posuvná tabuľka sa dá ovládať aj z klávesnice (tabindex v šablóne),
   takže musí byť vidieť, keď je zameraná — inak človek nevie, že šípky
   teraz posúvajú tabuľku a nie stránku. */
.marve-tabulka-obal:focus-visible {
	outline: 3px solid var(--marve-modra);
	outline-offset: 2px;
}