/* Spoločné štýly návrhov webu (balík 4: homepage, cenník, účtovné kancelárie, OG obrázok).
   Tokeny = dizajn manuál aplikácie (manual/katalog.html). Hlavička = tá istá lišta ako v aplikácii. */
@font-face{font-family:'Inter';src:url('inter-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';src:url('inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--navy:#17234A;--ink:#0F172A;--txt:#334155;--sed:#64748B;--cara:#E2E8F0;--platno:#F3F6FC;
--a6:#2563EB;--a7:#1D4ED8;--a5:#EFF4FF;--a1:#DBE7FF;--zel:#15803D;--zelbg:#E8F7EE;--zlt:#92400E;--zltbg:#FEF3C7;
--fak:#2563EB;--sch:#0E7490;--pen:#3F6212;--uct:#4F46E5;--obc:#BE185D;--skl:#C2410C;--pra:#7E22CE;--int:#475569;
--r-s:10px;--r-m:12px;--r-l:18px;--t-karta:0 14px 30px -18px rgba(23,35,74,.35),0 2px 6px -2px rgba(23,35,74,.08)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
.w{max-width:1200px;margin:0 auto;padding:0 24px}
svg.i{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* HLAVIČKA — rovnaký komponent ako lišta aplikácie: navy #17234A, výška 48 px, logo 24 px, biely text */
.hl{background:var(--navy);color:#fff;height:48px;position:sticky;top:0;z-index:20;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.hl .w{display:flex;align-items:center;height:48px;gap:4px}
.hl .logo{height:24px;margin-right:28px;display:block}
.hl nav{display:flex;gap:2px}
.hl nav a{font-size:14px;font-weight:500;padding:6px 12px;border-radius:8px;color:#E2E8F0}
.hl nav a.on,.hl nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.hl .vpravo{margin-left:auto;display:flex;gap:8px;align-items:center}
.hl .prihl{font-size:14px;font-weight:600;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.1)}
.hl .zac{font-size:14px;font-weight:600;padding:6px 14px;border-radius:8px;background:var(--a6)}

/* TLAČIDLÁ — tri úrovne z manuálu, bez verzálok */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-m);font-weight:700;font-size:16px;white-space:nowrap}
.btn.hl1{background:var(--a6);color:#fff;box-shadow:0 8px 18px -10px rgba(37,99,235,.8)}
.btn.ton{background:var(--a1);color:var(--a7)}
.btn.obr{border:1px solid #CBD5E1;color:var(--ink);background:#fff}
.btn.sm{height:40px;font-size:14px;padding:0 16px}

.oko{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a6);margin-bottom:10px}
h1{font-size:56px;line-height:1.04;letter-spacing:-.045em;font-weight:800;color:var(--navy)}
h2{font-size:40px;line-height:1.1;letter-spacing:-.04em;font-weight:800;color:var(--navy)}
h3{font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:700;color:var(--navy)}
.lead{font-size:19px;color:var(--txt);line-height:1.55}
p{color:var(--txt)}
section{padding:96px 0}
.doplnit{display:inline-block;background:var(--zltbg);color:var(--zlt);border:1px dashed #D97706;border-radius:6px;padding:0 6px;font-size:.85em;font-weight:600}

/* Snímka aplikácie v ráme prehliadača */
.okno{background:#fff;border-radius:14px;box-shadow:0 30px 60px -30px rgba(23,35,74,.45),0 0 0 1px rgba(23,35,74,.08);overflow:hidden}
.okno .lista{height:26px;background:#F1F5F9;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--cara)}
.okno .lista i{width:8px;height:8px;border-radius:50%;background:#CBD5E1}
.okno img{display:block;width:100%}
.orez{overflow:hidden}.orez img{width:100%;display:block}

/* Výrez telefónu zo schváleného mobilného návrhu (_balik-2/po-mobil-peniaze.png, 1745 px, telefóny 375×812) */
.tel{overflow:hidden;border-radius:34px;box-shadow:0 30px 50px -24px rgba(5,11,31,.6);flex-shrink:0;background:var(--navy)}
.tel img{display:block}

/* PÄTA */
.pata{background:var(--navy);color:#CBD5E1;padding:64px 0 28px;font-size:14px}
.pata .stlp{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.pata h4{color:#fff;font-size:14px;margin-bottom:12px}
.pata li{list-style:none;margin-bottom:8px}
.pata .spod{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;color:#94A3B8;font-size:13px}
.pata a:hover{color:#fff}

/* Náhľad účtovníckeho režimu (kreslený panel klientov kancelárie) */
.kl{background:#fff;color:#0F172A;text-align:left;font-size:13px}
.kl .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #E2E8F0}
.kl .hd b{font-size:16px;font-weight:700;color:#17234A}
.kl .hd span{color:#64748B;font-size:12.5px}
.kl .sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px 6px}
.kl .sum div{border:1px solid #E2E8F0;border-radius:10px;padding:9px 12px}
.kl .sum small{display:block;color:#64748B;font-size:11.5px}
.kl .sum strong{font-size:20px;font-weight:700;color:#3730A3}
.kl .th,.kl .tr{display:grid;grid-template-columns:1.5fr .85fr .6fr 1.1fr;gap:8px;align-items:center;padding:0 18px}
.kl .th{white-space:nowrap;height:34px;background:#3730A3;color:#fff;font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-top:8px}
.kl .tr{height:40px;border-bottom:1px solid #EEF2F7;font-weight:400}
.kl .tr b{font-weight:700}
.kl .tr .n{text-align:right}
.kl .z{display:inline-block;font-style:normal;white-space:nowrap;border:1px solid #CBD5E1;border-radius:999px;padding:1px 9px;font-size:12px;color:#475569;font-weight:400}
.kl .z.ok{border-color:#86EFAC;color:#166534}
.kl .z.nov{border-color:#A5B4FC;color:#3730A3}
.v2-page img{height:auto}.v2-page button,.v2-page input,.v2-page select,.v2-page textarea{font-family:inherit}.v2-page button{cursor:pointer}.v2-page [hidden]{display:none!important}
/* Kontrakt polí používa rovnaký schválený obrys v pokojnom aj hover stave. */
.v2-page{--pole-obrys:#CBD5E1;--pole-obrys-hover:#CBD5E1;--pole-obrys-focus:#2563EB}
.v2-page input[type=checkbox]{color:var(--navy)}
.v2-page .form .in:focus{border-color:var(--pole-obrys-focus)}