/* Verejná web stránka MONTIQ — bez externých písiem a bez sledovania */
:root {
  --navy: #0b1a33;
  --navy2: #10264a;
  --modra: #1c75bc;
  --modra-tm: #14588f;
  --akcent: #4da3ff;
  --cervena: #e2231a;
  --zelena: #059669;
  --text: #16202e;
  --tlmeny: #566275;
  --okraj: #e2e7ee;
  --pozadie: #f5f7fa;
  --biela: #ffffff;
  --polomer: 16px;
  --tien: 0 1px 2px rgba(11, 26, 51, 0.06), 0 8px 24px rgba(11, 26, 51, 0.07);
  --tien-velky: 0 2px 4px rgba(11, 26, 51, 0.08), 0 24px 60px rgba(11, 26, 51, 0.22);
  --sirka: 1180px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--biela); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--modra); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.02em; color: var(--navy); }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 1.25rem; }
.skry { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskocit { position: absolute; left: -999px; top: 0; background: var(--biela); padding: 0.6rem 1rem; z-index: 100; }
.preskocit:focus { left: 0; }

/* ----- tlačidlá ----- */
.tl { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 12px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; line-height: 1.2; }
.tl:hover { transform: translateY(-1px); }
.tl-primarne { background: var(--modra); color: #fff; box-shadow: 0 6px 18px rgba(28, 117, 188, 0.35); }
.tl-primarne:hover { background: var(--modra-tm); }
.tl-svetle { background: #fff; color: var(--navy); }
.tl-okraj { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: transparent; }
.tl-okraj:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.tl-tmave { background: var(--navy); color: #fff; }
.tl-velke { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
button.tl[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ----- hlavička ----- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: rgba(11, 26, 51, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: box-shadow 0.2s ease; }
.hlavicka.posunuta { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.hlavicka-vnutro { display: flex; align-items: center; gap: 1.5rem; min-height: 4.4rem; }
.logo { display: inline-flex; flex: none; color: #fff; }
.logo svg { height: 2.1rem; width: auto; display: block; }
.menu { display: flex; gap: 0.2rem; margin-left: 1rem; flex: 1; }
.menu a { color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 0.5rem 0.85rem; border-radius: 9px; font-weight: 600; font-size: 0.97rem; }
.menu a:hover, .menu a[aria-current='page'] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hlavicka-akcie { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.prihlasit { padding: 0.7rem 1.6rem; font-size: 1.02rem; background: #fff; color: var(--navy); border-radius: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.prihlasit:hover { background: var(--akcent); color: #fff; }
.jazyky { position: relative; }
.jazyky summary { list-style: none; cursor: pointer; padding: 0.5rem 0.7rem; border-radius: 9px; font-weight: 700; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 0.35rem; }
.jazyky summary::-webkit-details-marker { display: none; }
.jazyky summary:hover, .jazyky[open] summary { background: rgba(255, 255, 255, 0.1); }
.jazyky ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 0.4rem; list-style: none; min-width: 10.5rem; background: #fff; border-radius: 12px; box-shadow: var(--tien-velky); }
.jazyky li a { display: flex; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.jazyky li a:hover, .jazyky li a[aria-current='true'] { background: var(--pozadie); }
.jazyky li a b { color: var(--modra); width: 1.6rem; }
.menu-tl { display: none; background: transparent; border: 0; color: #fff; padding: 0.5rem; cursor: pointer; border-radius: 9px; }
.menu-tl svg { width: 1.7rem; height: 1.7rem; display: block; }

/* ----- hero ----- */
.hero { background: radial-gradient(1200px 520px at 75% -10%, rgba(77, 163, 255, 0.28), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); color: #fff; padding: 4.2rem 0 6rem; position: relative; overflow: hidden; }
.hero-mriezka { display: grid; grid-template-columns: 1.02fr 1fr; gap: 3rem; align-items: center; }
.stitok { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(77, 163, 255, 0.16); border: 1px solid rgba(77, 163, 255, 0.4); color: #bfe0ff; font-weight: 700; font-size: 0.85rem; margin-bottom: 1.2rem; }
.hero h1 { color: #fff; margin-bottom: 0.45em; }
.hero h1 em { font-style: normal; color: var(--akcent); }
.hero-podnadpis { font-size: 1.2rem; color: rgba(255, 255, 255, 0.82); max-width: 34rem; }
.hero-tlacidla { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 1.6rem; }
.hero-body { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; color: rgba(255, 255, 255, 0.85); font-size: 0.98rem; }
.hero-body li { display: flex; gap: 0.6rem; align-items: center; }
.hero-body svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--akcent); }

/* ----- ukážka aplikácie (kreslená, nie fotka) ----- */
.mock { position: relative; padding: 0 0 2.2rem; }
.mock-okno { background: #fff; border-radius: 18px; box-shadow: var(--tien-velky); overflow: hidden; color: var(--text); transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.mock-lista { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: #eef1f6; border-bottom: 1px solid var(--okraj); }
.mock-lista i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #cfd6e2; display: block; }
.mock-lista i:nth-child(1) { background: #ff6b60; } .mock-lista i:nth-child(2) { background: #ffc24d; } .mock-lista i:nth-child(3) { background: #3ecf8e; }
.mock-lista span { margin-left: 0.7rem; font-size: 0.78rem; color: var(--tlmeny); background: #fff; border-radius: 6px; padding: 0.15rem 0.8rem; }
.mock-telo { display: grid; grid-template-columns: 8.2rem 1fr; min-height: 21rem; }
.mock-menu { background: var(--navy); padding: 0.9rem 0.6rem; display: grid; align-content: start; gap: 0.25rem; }
.mock-menu b { color: #fff; font-size: 0.78rem; padding: 0 0.5rem 0.6rem; letter-spacing: 0.04em; }
.mock-menu span { color: rgba(255, 255, 255, 0.7); font-size: 0.74rem; padding: 0.4rem 0.55rem; border-radius: 7px; }
.mock-menu span.akt { background: rgba(77, 163, 255, 0.22); color: #fff; font-weight: 700; }
.mock-obsah { padding: 1.1rem 1.2rem; background: #f7f9fc; }
.mock-nadpis { font-weight: 800; font-size: 0.98rem; color: var(--navy); margin-bottom: 0.15rem; }
.mock-pod { font-size: 0.75rem; color: var(--tlmeny); margin-bottom: 0.9rem; }
.mock-dlazdice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 0.9rem; }
.mock-dlazdice div { background: #fff; border: 1px solid var(--okraj); border-radius: 11px; padding: 0.6rem 0.7rem; border-top: 3px solid var(--modra); }
.mock-dlazdice div:nth-child(2) { border-top-color: #e2a21a; }
.mock-dlazdice div:nth-child(3) { border-top-color: var(--zelena); }
.mock-dlazdice small { display: block; font-size: 0.68rem; color: var(--tlmeny); }
.mock-dlazdice strong { font-size: 1.02rem; color: var(--navy); }
.mock-dlazdice div:nth-child(3) strong { color: var(--zelena); }
.mock-pruhy { background: #fff; border: 1px solid var(--okraj); border-radius: 11px; padding: 0.7rem 0.8rem; display: grid; gap: 0.45rem; }
.mock-pruh { display: grid; grid-template-columns: 4.6rem 1fr 3.6rem; gap: 0.5rem; align-items: center; font-size: 0.72rem; color: var(--tlmeny); }
.mock-pruh span:last-child { text-align: right; color: var(--text); font-weight: 700; }
.mock-pruh i { display: block; height: 0.5rem; border-radius: 99px; background: #e8edf5; position: relative; overflow: hidden; }
.mock-pruh i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); background: var(--modra); border-radius: 99px; }
.mock-telefon { position: absolute; right: -0.4rem; bottom: 0; width: 10.4rem; background: #0e1830; border-radius: 22px; padding: 0.5rem; box-shadow: var(--tien-velky); border: 2px solid #26324f; }
.mock-telefon-obr { background: #fff; border-radius: 16px; padding: 0.8rem 0.7rem; color: var(--text); text-align: center; }
.mock-telefon-obr small { display: block; color: var(--tlmeny); font-size: 0.66rem; }
.mock-telefon-cas { font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.1; margin: 0.15rem 0 0.45rem; }
.mock-telefon-ok { background: #d1fae5; color: #065f46; border-radius: 9px; padding: 0.4rem 0.3rem; font-weight: 700; font-size: 0.72rem; margin-bottom: 0.5rem; }
.mock-telefon-dnes { font-size: 0.7rem; color: var(--tlmeny); }
.mock-telefon-dnes b { color: var(--navy); }

/* ----- pás remesiel ----- */
.pas { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); padding: 1.2rem 0; text-align: center; font-size: 0.92rem; }
.pas p { margin: 0 0 0.6rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.pas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.pas li { font-weight: 600; color: rgba(255, 255, 255, 0.88); }

/* ----- sekcie ----- */
.sekcia { padding: 5.2rem 0; }
.sekcia.svetla { background: var(--pozadie); }
.sekcia-hlavicka { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.sekcia-hlavicka p { color: var(--tlmeny); font-size: 1.12rem; margin: 0; }
.mriezka { display: grid; gap: 1.3rem; }
.mriezka.m3 { grid-template-columns: repeat(3, 1fr); }
.mriezka.m4 { grid-template-columns: repeat(4, 1fr); }
.mriezka.m2 { grid-template-columns: repeat(2, 1fr); }
.karta { background: #fff; border: 1px solid var(--okraj); border-radius: var(--polomer); padding: 1.6rem; box-shadow: var(--tien); height: 100%; }
.karta h3 { margin-bottom: 0.4em; }
.karta p { color: var(--tlmeny); margin: 0; font-size: 0.98rem; }
.ik { width: 1.5rem; height: 1.5rem; display: block; }
.ik-obal { width: 3rem; height: 3rem; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #e6f1fb, #d4e8fa); color: var(--modra); margin-bottom: 1rem; }
.problem .karta { background: #fff; border-top: 4px solid var(--cervena); }
.riesenie { margin-top: 1.6rem; background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; border-radius: var(--polomer); padding: 2rem 2.2rem; display: flex; gap: 1.4rem; align-items: center; box-shadow: var(--tien); }
.riesenie h3 { color: #fff; font-size: 1.4rem; margin-bottom: 0.3em; }
.riesenie p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.riesenie .ik-obal { background: rgba(77, 163, 255, 0.2); color: var(--akcent); flex: none; width: 3.6rem; height: 3.6rem; }

/* ----- ukážky modulov ----- */
.ukazky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ukazka { background: #fff; border: 1px solid var(--okraj); border-radius: var(--polomer); box-shadow: var(--tien); overflow: hidden; display: flex; flex-direction: column; }
.ukazka-obr { background: #f2f5fa; padding: 1.1rem; border-bottom: 1px solid var(--okraj); min-height: 12.5rem; display: grid; align-content: center; }
.ukazka-text { padding: 1.3rem 1.4rem 1.5rem; }
.ukazka-text p { color: var(--tlmeny); font-size: 0.96rem; margin: 0; }
.plan { display: grid; grid-template-columns: 3.4rem repeat(5, 1fr); gap: 0.3rem; font-size: 0.66rem; color: var(--tlmeny); align-items: center; }
.plan b { font-weight: 700; text-align: center; color: var(--navy); }
.plan > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan i { display: block; height: 1.5rem; border-radius: 6px; background: #d9e8f8; border-left: 3px solid var(--modra); }
.plan i.b { background: #fdeccb; border-left-color: #e2a21a; } .plan i.c { background: #d6f5e8; border-left-color: var(--zelena); } .plan i.p { background: transparent; border: 1px dashed #c4cddb; border-left-width: 1px; }
.tab { background: #fff; border: 1px solid var(--okraj); border-radius: 10px; overflow: hidden; font-size: 0.72rem; }
.tab > div { display: grid; grid-template-columns: 1fr 3.6rem 3.4rem; gap: 0.4rem; padding: 0.5rem 0.7rem; border-top: 1px solid var(--okraj); align-items: center; }
.tab > div:first-child { border-top: 0; background: #eef2f8; color: var(--tlmeny); font-weight: 700; }
.tab .nizko { color: #b91c1c; font-weight: 800; }
.tab .nizko-zn { display: inline-block; background: #fee2e2; color: #b91c1c; border-radius: 99px; padding: 0 0.4rem; font-weight: 700; font-size: 0.64rem; }
.konto { display: grid; gap: 0.5rem; }
.konto-r { background: #fff; border: 1px solid var(--okraj); border-radius: 10px; padding: 0.6rem 0.8rem; display: grid; grid-template-columns: 1fr auto; font-size: 0.74rem; gap: 0 0.5rem; }
.konto-r small { color: var(--tlmeny); grid-column: 1; }
.konto-r strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 1.05rem; color: var(--navy); }
.konto-r.hlavne { background: var(--navy); border-color: var(--navy); } .konto-r.hlavne small, .konto-r.hlavne span { color: rgba(255, 255, 255, 0.8); } .konto-r.hlavne strong { color: #fff; }

/* ----- remeslá ----- */
.remeslo { position: relative; padding-top: 1.9rem; }
.remeslo::before { content: ''; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--c, var(--modra)); }
.remeslo .ik-obal { background: color-mix(in srgb, var(--c, var(--modra)) 14%, #fff); color: var(--c, var(--modra)); }
.remeslo-servis { background: linear-gradient(135deg, var(--navy), var(--navy2)); border-color: transparent; }
.remeslo-servis h3 { color: #fff; } .remeslo-servis p { color: rgba(255, 255, 255, 0.8); }
.remeslo-servis .ik-obal { background: rgba(255, 255, 255, 0.12); color: var(--akcent); }

/* ----- ako to funguje ----- */
.kroky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: krok; }
.krok { position: relative; padding: 0 0 0 4.2rem; counter-increment: krok; }
.krok::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--modra); color: #fff; font-weight: 800; font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(28, 117, 188, 0.35); }
.krok p { color: var(--tlmeny); margin: 0; }

/* ----- video ----- */
.video-ramik { max-width: 62rem; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: var(--tien-velky); background: var(--navy); aspect-ratio: 16 / 9; }
.video-ramik iframe, .video-ramik video { width: 100%; height: 100%; border: 0; display: block; }

/* ----- ceny: úvod ----- */
.cenovky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.cena-karta { background: #fff; border: 2px solid var(--okraj); border-radius: 20px; padding: 2rem 1.8rem; box-shadow: var(--tien); display: flex; flex-direction: column; position: relative; }
.cena-karta.odporucane { border-color: var(--modra); box-shadow: 0 18px 50px rgba(28, 117, 188, 0.22); }
.cena-stitok { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--modra); color: #fff; font-weight: 800; font-size: 0.78rem; padding: 0.3rem 0.9rem; border-radius: 99px; white-space: nowrap; }
.cena-karta h3 { font-size: 1.5rem; margin-bottom: 0.2em; }
.cena-popis { color: var(--tlmeny); font-size: 0.96rem; min-height: 3.1rem; }
.cena-suma { font-size: 2.8rem; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -0.03em; margin-top: 0.4rem; }
.cena-suma small { font-size: 1rem; font-weight: 600; color: var(--tlmeny); letter-spacing: 0; }
.cena-detail { color: var(--tlmeny); font-size: 0.9rem; margin: 0.5rem 0 1.4rem; min-height: 2.8rem; }
.cena-detail b { color: var(--text); }
.cena-body { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.6rem; font-size: 0.97rem; flex: 1; }
.cena-body li { display: flex; gap: 0.6rem; align-items: flex-start; }
.cena-body svg { width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; flex: none; color: var(--zelena); }
.cena-body li.vsetko { font-weight: 800; color: var(--navy); }
.cena-karta .tl { width: 100%; }
.cena-poznamka { text-align: center; color: var(--tlmeny); font-size: 0.92rem; margin-top: 1.6rem; }

/* ----- ceny: stránka ----- */
.page-hlavicka { background: radial-gradient(900px 420px at 80% -20%, rgba(77, 163, 255, 0.25), transparent 60%), linear-gradient(180deg, var(--navy), var(--navy2)); color: #fff; padding: 3.6rem 0 3.4rem; text-align: center; }
.page-hlavicka h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 0.35em; }
.page-hlavicka p { color: rgba(255, 255, 255, 0.82); font-size: 1.15rem; max-width: 40rem; margin: 0 auto; }
.kalk { background: #fff; border: 1px solid var(--okraj); border-radius: 20px; box-shadow: var(--tien); padding: 1.8rem; margin-top: -2.6rem; position: relative; margin-bottom: 3rem; }
.kalk-hlava { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.kalk-pocet { display: flex; align-items: center; gap: 1.1rem; flex: 1; min-width: 17rem; }
.kalk-pocet label { font-weight: 700; color: var(--navy); white-space: nowrap; }
.kalk-pocet input[type='number'] { width: 5.4rem; padding: 0.6rem 0.7rem; font: inherit; font-weight: 800; font-size: 1.15rem; border: 2px solid var(--okraj); border-radius: 10px; text-align: center; color: var(--navy); }
.kalk-pocet input[type='range'] { flex: 1; accent-color: var(--modra); min-width: 8rem; }
.prepinac { display: inline-flex; background: var(--pozadie); border-radius: 12px; padding: 0.25rem; gap: 0.2rem; border: 1px solid var(--okraj); }
.prepinac button { border: 0; background: transparent; padding: 0.55rem 1.1rem; border-radius: 9px; font: inherit; font-weight: 700; color: var(--tlmeny); cursor: pointer; }
.prepinac button.aktivny { background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(11, 26, 51, 0.12); }
.prepinac small { color: var(--zelena); font-weight: 800; margin-left: 0.3rem; }
.kalk .cena-karta { box-shadow: none; }
.kalk-pre-vas { font-weight: 700; color: var(--modra); margin-bottom: 0.1rem; min-height: 1.5rem; font-size: 0.92rem; }
.tabulka-obal { overflow-x: auto; border: 1px solid var(--okraj); border-radius: var(--polomer); background: #fff; box-shadow: var(--tien); }
.porovnanie { width: 100%; border-collapse: collapse; min-width: 38rem; }
.porovnanie th, .porovnanie td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--okraj); text-align: center; font-size: 0.97rem; }
.porovnanie th:first-child, .porovnanie td:first-child { text-align: left; }
.porovnanie thead th { background: var(--pozadie); color: var(--navy); font-size: 1rem; position: sticky; top: 0; }
.porovnanie tbody tr:last-child td { border-bottom: 0; }
.porovnanie svg { width: 1.2rem; height: 1.2rem; color: var(--zelena); }
.porovnanie .nie { color: #b4bccb; }
.faq { max-width: 52rem; margin: 0 auto; display: grid; gap: 0.8rem; }
.faq details { background: #fff; border: 1px solid var(--okraj); border-radius: 14px; padding: 0 1.3rem; box-shadow: var(--tien); }
.faq summary { cursor: pointer; font-weight: 700; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--modra); }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--tlmeny); padding-bottom: 1.1rem; margin: 0; }

/* ----- bezpečnosť, výzva ----- */
.cta { background: radial-gradient(900px 420px at 15% 120%, rgba(77, 163, 255, 0.3), transparent 60%), linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; padding: 4.6rem 0; text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.82); max-width: 38rem; margin: 0 auto 2rem; font-size: 1.15rem; }

/* ----- kontakt ----- */
.kontakt-mriezka { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2rem; align-items: start; margin-top: -2.6rem; position: relative; margin-bottom: 4rem; }
.formular { background: #fff; border: 1px solid var(--okraj); border-radius: 20px; box-shadow: var(--tien); padding: 2rem; display: grid; gap: 1.1rem; }
.formular label { display: grid; gap: 0.35rem; font-weight: 700; font-size: 0.93rem; color: var(--navy); }
.formular input[type='text'], .formular input[type='email'], .formular select, .formular textarea { width: 100%; padding: 0.8rem 0.9rem; font: inherit; font-weight: 400; color: var(--text); border: 1.5px solid #cfd7e3; border-radius: 11px; background: #fff; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--modra); box-shadow: 0 0 0 3px rgba(28, 117, 188, 0.18); }
.formular textarea { min-height: 7.5rem; resize: vertical; }
.dva { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.suhlas { display: flex !important; grid-template-columns: none; gap: 0.7rem; align-items: flex-start; font-weight: 400 !important; color: var(--tlmeny) !important; font-size: 0.9rem !important; }
.suhlas input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--modra); }
.navnada { position: absolute !important; left: -9999px !important; opacity: 0; }
.stav { min-height: 1.4rem; font-weight: 700; }
.stav.ok { color: var(--zelena); } .stav.chyba { color: #b91c1c; }
.kontakt-box { background: #fff; border: 1px solid var(--okraj); border-radius: 20px; box-shadow: var(--tien); padding: 1.8rem; }
.kontakt-box h3 { margin-bottom: 0.3em; }
.kontakt-box p { color: var(--tlmeny); }
.kontakt-box .mail { font-weight: 800; font-size: 1.15rem; word-break: break-all; }
.kontakt-box ul { padding-left: 1.1rem; color: var(--tlmeny); margin: 0.6rem 0 0; }

/* ----- právne texty ----- */
.pravne { max-width: 50rem; margin: 3.2rem auto 5rem; }
.pravne h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.pravne p, .pravne li { color: #36424f; }
.pravne .aktual { color: var(--tlmeny); font-size: 0.92rem; }

/* ----- pätička ----- */
.pata { background: var(--navy); color: rgba(255, 255, 255, 0.72); padding: 3.4rem 0 2rem; font-size: 0.95rem; }
.pata-mriezka { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pata .logo svg { height: 2rem; }
.pata h4 { color: #fff; font-size: 0.95rem; margin-bottom: 0.8em; }
.pata a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.pata a:hover { color: #fff; text-decoration: underline; }
.pata ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pata p { margin: 0 0 0.5rem; }
.pata-spodok { padding-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); }

/* ----- zobrazenie na telefóne a tablete ----- */
@media (max-width: 1000px) {
  .hero-mriezka { grid-template-columns: 1fr; }
  .mock { max-width: 36rem; margin: 0 auto; width: 100%; }
  .mock-okno { transform: none; }
  .mriezka.m3, .cenovky, .ukazky, .kroky { grid-template-columns: 1fr; }
  .mriezka.m4 { grid-template-columns: repeat(2, 1fr); }
  .kontakt-mriezka { grid-template-columns: 1fr; }
  .pata-mriezka { grid-template-columns: 1fr 1fr; }
  .cena-popis, .cena-detail { min-height: 0; }
}
@media (max-width: 860px) {
  .menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--navy); padding: 0.6rem 1.25rem 1rem; margin: 0; display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .hlavicka.menu-otvorene .menu { display: flex; }
  .menu a { padding: 0.8rem 0.5rem; font-size: 1.05rem; }
  .menu-tl { display: block; }
  .hlavicka-vnutro { gap: 0.6rem; }
  .logo svg { height: 1.8rem; }
  .prihlasit { padding: 0.6rem 1.1rem; font-size: 0.95rem; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sekcia { padding: 3.6rem 0; }
  .hero { padding: 2.6rem 0 4rem; }
  .mriezka.m4, .mriezka.m2, .dva { grid-template-columns: 1fr; }
  .pata-mriezka { grid-template-columns: 1fr; }
  .mock-telo { grid-template-columns: 1fr; }
  .mock-menu { display: none; }
  .mock-telefon { width: 8.6rem; right: 0; }
  .riesenie { flex-direction: column; align-items: flex-start; }
  .kalk { padding: 1.2rem; }
  .hlavicka-akcie .jazyky summary span.nazov { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tl, .hlavicka { transition: none; } }

/* ----- klikateľné karty funkcií a remesiel ----- */
.karta-klik, .karta-odkaz { cursor: pointer; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; text-decoration: none; color: inherit; }
.karta-klik:hover, .karta-odkaz:hover { transform: translateY(-3px); border-color: #b9d4ee; box-shadow: 0 2px 4px rgba(11, 26, 51, 0.06), 0 16px 36px rgba(11, 26, 51, 0.13); }
.karta-klik p, .karta-odkaz p { flex: 1; }
.karta-viac { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.93rem; color: var(--modra); cursor: pointer; align-self: flex-start; }
.karta-viac .ik { width: 1rem; height: 1rem; transition: transform 0.15s ease; }
.karta-klik:hover .karta-viac .ik, .karta-odkaz:hover .karta-viac .ik { transform: translateX(3px); }
.remeslo-servis .karta-viac { color: var(--akcent); }
.sekcia-odkaz { text-align: center; margin: 2.2rem 0 0; }
.karta-odkaz h3 { color: var(--navy); }
.remeslo-servis.karta-odkaz h3 { color: #fff; }

/* ----- vyskakovacie okno s popisom funkcie ----- */
html:has(dialog[open]) { overflow: hidden; }
.okno { border: 0; padding: 0; border-radius: 22px; width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); box-shadow: var(--tien-velky); color: var(--text); background: #fff; overflow: hidden; }
.okno[open] { display: flex; animation: okno-vstup 0.18s ease; }
.okno::backdrop { background: rgba(11, 26, 51, 0.62); backdrop-filter: blur(3px); }
.okno-vnutro { position: relative; padding: 2rem 2rem 0; overflow-y: auto; width: 100%; }
.okno-zavriet { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--pozadie); color: var(--navy); font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.okno-zavriet:hover { background: #e3e9f1; }
.okno-hlava { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; padding-right: 2.6rem; }
.okno-hlava .ik-obal { margin: 0; flex: none; width: 3.4rem; height: 3.4rem; }
.okno-hlava h2 { font-size: 1.6rem; margin: 0.15rem 0 0; }
.okno-balicek { display: inline-block; font-size: 0.74rem; font-weight: 800; padding: 0.15rem 0.6rem; border-radius: 99px; background: #d6f5e8; color: #065f46; }
.okno-balicek.b1 { background: #dbeafe; color: #1e40af; }
.okno-balicek.b2 { background: #ede9fe; color: #5b21b6; }
.okno-lead { font-size: 1.1rem; color: var(--navy); font-weight: 600; }
.okno h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tlmeny); margin: 1.4rem 0 0.4rem; }
.okno p { color: #36424f; }
.okno-zoznam { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.okno-zoznam li { display: flex; gap: 0.6rem; align-items: flex-start; }
.okno-zoznam svg { width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; flex: none; color: var(--zelena); }
.okno-akcie { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.8rem 0 1.2rem; }
.tl-svetle-okraj { border-color: var(--okraj); color: var(--navy); background: #fff; }
.tl-svetle-okraj:hover { border-color: var(--modra); }
.okno-navig { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 1rem; margin: 0 -2rem; padding: 0.8rem 2rem; background: var(--pozadie); border-top: 1px solid var(--okraj); }
.okno-navig button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--modra); cursor: pointer; padding: 0.3rem 0; }
.okno-navig button:hover { text-decoration: underline; }
@keyframes okno-vstup { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ----- stránka jedného remesla ----- */
.remeslo-hlavicka .obal { display: grid; justify-items: center; }
.remeslo-hlavicka .spat { justify-self: start; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-bottom: 1.4rem; }
.remeslo-hlavicka .spat:hover { color: #fff; text-decoration: underline; }
.ik-velky { width: 4.4rem; height: 4.4rem; border-radius: 18px; margin: 0 auto 1.2rem; background: color-mix(in srgb, var(--c, var(--modra)) 30%, #0b1a33); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.ik-velky .ik { width: 2.2rem; height: 2.2rem; }
.remeslo-tl { margin: 2rem 0 0 !important; }
.kroky.k4 { grid-template-columns: repeat(4, 1fr); }
.kroky.k4 .krok p { color: var(--text); font-weight: 600; }
.cipy { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cip { display: inline-flex; align-items: center; gap: 0.6rem; background: #fff; border: 1px solid var(--okraj); border-radius: 99px; padding: 0.65rem 1.2rem; font-weight: 700; color: var(--navy); text-decoration: none; box-shadow: var(--tien); }
.cip:hover { border-color: var(--modra); color: var(--modra); }
.cip .ik { width: 1.25rem; height: 1.25rem; }

/* ----- mini kalkulačka cien na úvode ----- */
.kalk-mini { margin-top: 0; margin-bottom: 0; }
.cena-karta.mini { padding: 1.5rem 1.5rem 1.6rem; }
.cena-karta.mini h3 { font-size: 1.3rem; }
.cena-karta.mini .cena-popis { min-height: 0; margin-bottom: 0.2rem; }
.cena-karta.mini .cena-suma { font-size: 2.3rem; }
.cena-karta.mini .cena-detail { margin-bottom: 1.1rem; min-height: 0; }
.cena-karta.mini .tl { margin-top: auto; }

@media (max-width: 1000px) { .kroky.k4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .kroky.k4 { grid-template-columns: 1fr; }
  .okno-vnutro { padding: 1.5rem 1.3rem 0; }
  .okno-navig { margin: 0 -1.3rem; padding: 0.8rem 1.3rem; }
  .okno-hlava h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .okno[open] { animation: none; } .karta-klik, .karta-odkaz { transition: none; } }

/* ----- kalkulačka ceny na telefóne ----- */
@media (max-width: 640px) {
  .kalk-hlava { gap: 1rem; }
  .kalk-pocet { flex-wrap: wrap; min-width: 0; width: 100%; gap: 0.6rem 0.9rem; }
  .kalk-pocet label { white-space: normal; flex: 1 0 100%; }
  .kalk-pocet input[type='range'] { min-width: 0; flex: 1 1 8rem; }
  .prepinac { width: 100%; }
  .prepinac button { flex: 1; padding: 0.55rem 0.5rem; }
  .cena-suma { font-size: 2.4rem; }
}

/* ----- dotykové plochy na telefóne (aspoň 44 px) ----- */
@media (max-width: 860px) {
  .okno-zavriet { width: 2.9rem; height: 2.9rem; }
  .okno-navig button { min-height: 2.75rem; padding: 0 0.4rem; }
  .karta-viac { padding: 0.55rem 0; margin-top: 0.4rem; }
  .cip { padding: 0.8rem 1.2rem; }
  .okno-akcie .tl { flex: 1 1 100%; }
  .faq summary { padding: 1.2rem 0; }
}

/* prepínač jazykov: ikona sa na úzkej hlavičke nesmie zmenšiť */
.jazyky summary svg { flex: none; width: 1.3rem; height: 1.3rem; }
.jazyky summary { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
.jazyky ul { max-width: calc(100vw - 1.5rem); z-index: 60; }