/* Marketingové stránky hmi.urportal.sk (index.html, ako-to-funguje.html, cennik.php
   a právne stránky). Tokeny sú v /assets/tokens.css — načítava sa PRED týmto súborom.

   Redizajn 6. 8. 2026. Reč je editoriálna a technická: serif nadpisy, mono metadáta,
   vlásočnicové linky, hranaté plochy, žiadne tiene ani posuny pri hoveri.
   Hĺbku robí linka a rozostup, nie rozostrenie. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); color:var(--ink);
  background:var(--page-bg); line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* v2: obsah nikdy neleží priamo na ploche stránky — vždy je v paneli. */
.panel-card{background:var(--paper); border:1px solid var(--line); padding:30px 34px}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--shell); margin:0 auto; padding:0 var(--pad-x)}

/* ---------- topbar ---------- */
/* Zdieľaný naprieč subdoménami urportal.sk. Vľavo lockup, vpravo mono navigácia.
   Bez sticky, bez rozostrenia — lišta je súčasť stránky, nie plávajúci panel. */
header.site{ background:var(--paper); border-bottom:1px solid var(--line); }
footer.site{ background:var(--paper) }
.nav{display:flex; align-items:center; gap:var(--space-5); height:var(--topbar-h)}

/* lockup — zhodný s rozcestníkom na urportal.sk: ikona 24px + medzera 10px + názov */
.znacka{display:flex; align-items:center; gap:10px; color:var(--ink);
  font-family:var(--font-sans); font-weight:600; font-size:15px; letter-spacing:-.01em}
.znacka svg{width:24px; height:24px; flex:none; display:block}
/* staršie meno .logo drží rovnaký tvar, nech sa nemusí siahať na každú stránku */
.logo{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px;
  letter-spacing:-.01em; color:var(--ink); font-family:var(--font-sans)}
.logo .mark{width:24px; height:24px; flex:none; display:block; color:var(--ink)}
.logo .mark svg{width:24px; height:24px; display:block}
.logo .tld{color:inherit}

.nav-links{margin-left:auto; display:flex; align-items:center; gap:10px}
/* v2: položky topbaru sú taby — tvar nesie výplň, nie obrys */
.nav-links a{
  font-family:var(--font-mono); font-size:var(--nav); letter-spacing:var(--ls-nav);
  text-transform:uppercase; color:var(--steel);
  padding:8px 14px; border:1px solid var(--tab-line); background:var(--tab-bg);
  display:inline-flex; align-items:center;
}
.nav-links a:hover{background:var(--tab-hover); color:var(--ink)}
.nav-links a.active{background:var(--action,#3e7fb4); border-color:var(--action-d,#35709f); color:#fff}

/* Vstup do portálu je jediná akcia v lište. Tri jednoznačné úrovne: sivý tab =
   ostatné stránky, modrý = tá otvorená, tmavomodrý so žiarou = kam má zákazník
   kliknúť. Tieň je odstupňovaný v troch vrstvách — tesná žiara okolo, mäkký
   spád a široký rozptyl — aby sa tlačidlo dvíhalo z lišty a nemalo tvrdý okraj.
   Náhradné hodnoty vo var() sú zámerné: bez nich by starý tokens.css v cache
   spravil tlačidlo neviditeľné. */
.nav-links a.btn,
.nav-links a.cta{
  background:var(--cta,#27587f); border-color:var(--cta-d,#1e4767); color:#fff;
  padding:10px 18px; gap:9px; letter-spacing:.16em;
  box-shadow:0 0 0 3px rgba(var(--cta-glow,39,88,127),.12),
             0 2px 6px rgba(var(--cta-glow,39,88,127),.30),
             0 8px 20px rgba(var(--cta-glow,39,88,127),.22);
}
.nav-links a.cta::after{content:"\2192"; color:var(--ur-blue,#5c9fd6)}
.nav-links a.btn:hover,
.nav-links a.cta:hover{
  background:var(--cta-d,#1e4767); border-color:var(--cta-d,#1e4767); color:#fff;
  box-shadow:0 0 0 4px rgba(var(--cta-glow,39,88,127),.18),
             0 3px 8px rgba(var(--cta-glow,39,88,127),.36),
             0 10px 26px rgba(var(--cta-glow,39,88,127),.26);
}
.nav-links a.cta:hover::after{color:#fff}

/* ---------- tlačidlá ---------- */
/* v2: jeden vzor. Rám 2px, radius 0, mono verzálky. Primárne = ink, sekundárne = biele.
   Akcent už NIE je farba tlačidla — nesie ho len šípka a aktívne prvky. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-mono); font-size:var(--btn-size); letter-spacing:var(--btn-ls);
  text-transform:uppercase; font-weight:500; padding:var(--btn-pad); cursor:pointer;
  border:var(--btn-border) solid transparent; min-height:var(--tap);
}
.btn.primary{background:var(--action,#3e7fb4); color:#fff; border-color:var(--action-d,#35709f)}
.btn.primary:hover{background:var(--action-d,#35709f); border-color:var(--action-d,#35709f)}
.btn.primary .sipka{color:var(--action-bg)}
.btn.ghost{background:var(--paper); color:var(--ink); border-color:var(--btn-2-line)}
.btn.ghost:hover{background:var(--btn-2-hover); border-color:var(--action)}
.btn.royal{background:var(--action); color:#fff; border-color:var(--action-d)}
.btn.royal:hover{background:var(--action-d); border-color:var(--action-d)}
.btn.lg{padding:14px 24px; font-size:12.5px}
.btn.sm{padding:8px 14px; font-size:10.5px; min-height:0}
.btn.danger{background:var(--error); color:#fff; border-color:var(--error-text)}
.btn.danger:hover{background:var(--error-text); border-color:var(--error-text)}

/* ---------- sekcie a typografia ---------- */
section.block{padding:var(--block-gap) 0}
/* eyebrow nad nadpisom — mono, verzálky, riedke */
.kicker{
  font-family:var(--font-mono); font-size:var(--meta); letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--steel-2); font-weight:400; margin:0 0 14px;
}
h1{font-family:var(--font-serif); font-size:var(--h1); line-height:1.12;
  letter-spacing:var(--ls-h1); margin:0 0 18px; font-weight:600}
h2{font-family:var(--font-sans); font-size:19px; line-height:1.3;
  letter-spacing:-.01em; margin:0 0 14px; font-weight:600}
h3{font-family:var(--font-sans); font-size:16px; margin:0 0 8px; font-weight:600}
/* zvýraznené slová v nadpise: v novej palete nie je druhá farba, akcent stačí */
.grad{color:var(--ur-blue)}
.sub{font-family:var(--font-sans); color:var(--ink-2); font-size:var(--lead);
  line-height:1.6; max-width:640px; margin:0 0 var(--space-6)}
.lead{font-family:var(--font-sans); font-size:var(--lead); color:var(--ink-2);
  line-height:1.65; max-width:620px; margin:0 0 var(--space-6)}

/* hlavná deliaca linka pod leadom — 1px ink */
.rule{border:0; border-top:1px solid var(--ink); margin:0 0 var(--rule-gap)}

/* ---------- karty a mriežky ---------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--block-gap)}
.card{background:var(--paper); border:1px solid var(--line); padding:28px 30px}
/* žiadny posun ani tieň pri hoveri — mení sa len farba linky a nadpisu */
.card.hover:hover{border-color:var(--ink-2)}
.card.hover:hover h3{color:var(--action)}
/* ikonový štvorec v karte: bez podkladu, ikona nesie farbu sama.
   background sa tu NIKDY nenastavuje — farebná dlaždica za ikonou je pozostatok
   prvej verzie a v tejto reči dizajnu vyzerá ako cudzí prvok. */
.fi{width:44px;height:44px;display:grid;place-items:start;margin-bottom:var(--space-4);
  color:var(--ink);background:none;border-radius:0}
.fi .ico{width:32px;height:32px;color:inherit}

/* ---------- štítok ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--meta); letter-spacing:var(--ls-meta);
  text-transform:uppercase; color:var(--steel-2);
  background:transparent; border:0; padding:0;
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ur-blue);box-shadow:none}

/* ---------- záverečná výzva ---------- */
/* Bez farebného bloku: tmavá plocha, hranatá, bez tieňa. */
.cta-banner{
  position:relative; overflow:hidden; padding:var(--space-7) var(--pad-x);
  text-align:left; color:#fff; background:var(--ink);
}
.cta-banner::before{content:none}
.cta-banner h2{color:#fff; font-size:var(--h2); margin:0 0 10px}
.cta-banner p{color:rgba(255,255,255,.78); font-size:var(--lead);
  font-family:var(--font-serif); margin:0 0 var(--space-5); max-width:620px}
.cta-banner .btn.primary{background:var(--action); color:#fff; border-color:var(--action-d)}
.cta-banner .btn.primary:hover{background:var(--action-d); border-color:var(--action-d)}
.cta-banner .cta-row{display:flex; gap:var(--space-3); flex-wrap:wrap}
.btn.banner-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn.banner-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ---------- pätička ---------- */
footer.site{border-top:1px solid var(--line); padding:var(--space-6) 0;
  color:var(--steel); font-size:13px}
.foot{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap}
.foot .logo{font-size:14px}
.foot .sp{margin-left:auto}
.foot a{font-family:var(--font-mono); font-size:var(--nav); letter-spacing:var(--ls-nav);
  text-transform:uppercase; color:var(--steel);
  padding:10px 0; min-height:var(--tap); display:inline-flex; align-items:center}
.foot a:hover{color:var(--ink)}
.foot .copy{font-family:var(--font-mono); font-size:var(--nav);
  letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--steel-2); padding:10px 0}

/* ---------- odhalenie pri scrolle ----------
   Handoff: žiadne fade-in-up pri načítaní. Trieda v HTML ostáva, aby sa nemuselo
   siahať na šesť stránok, ale nič nerobí. */
.js .reveal{opacity:1; transform:none; transition:none}
.js .reveal.in{opacity:1; transform:none}

/* ---------- ikony ---------- */
.ico{width:24px; height:24px; display:block; stroke:currentColor; fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
/* sada portálu je kreslená v 32×32 s hrúbkou 2.6 a vlastnou akcentovou výplňou */
.ur-ico{width:32px; height:32px; display:block; color:var(--ink)}

/* ---------- bočná poznámka ---------- */
.aside-note{
  font-family:var(--font-mono); font-size:11px; line-height:1.7; color:var(--steel-2);
  border-left:1px solid var(--line); padding-left:var(--space-4); max-width:var(--aside-w);
}

@media (max-width:1100px){
  .wrap{padding:0 var(--space-5)}
}
@media (max-width:900px){
  h1{font-size:32px} h2{font-size:21px}
  .cards3{grid-template-columns:1fr}
  .nav-links a.hide{display:none}
  .nav-links{gap:var(--space-4)}
}

/* Lockup podľa stránky (handoff v2): ikona je ikona TEJ stránky, za značkou
   nasleduje názov podsekcie — rovnako veľký, ale váha 400 a farba steel-2.

   Selektor je zámerne bez rodiča: ten istý tvar „URportal HMI" nesie topbar
   marketingu (.znacka), portálu a správy (.brand) aj dizajnéra (#logo). Keď bol
   naviazaný na .znacka, portál si písal vlastný názov a lockup sa rozišiel. */
.sekcia{margin-left:6px; font-weight:400; color:var(--steel-2,#4a555f)}