/* Realitní šikula – barvy, písmo a rozměry podle podklady/design-system (tokens.json, README.md). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");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:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");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}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format("woff2");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";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");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{
  --bg:#F4F5F7;--surface:#FFFFFF;--sunken:#ECEEF2;--ink:#141824;--ink-2:#4A5163;--ink-3:#646B7C;
  --line:#DADDE4;--line-strong:#868D9C;--primary:#2B44D6;--primary-hover:#2236B4;--on-primary:#FFFFFF;
  --primary-soft:#E7EBFD;--primary-text:#2438C2;--brass:#F2B93B;--brass-soft:#FCEFC9;--brass-ink:#5C3D00;
  --on-brass:#141824;--ok:#1C7342;--ok-bg:#E2F2E8;--info:#1F5FAD;--info-bg:#E3EDFA;
  --shadow-1:0 1px 2px rgba(20,24,36,.06),0 1px 1px rgba(20,24,36,.04);--shadow-2:0 6px 20px rgba(20,24,36,.08),0 1px 3px rgba(20,24,36,.06);
  --logo-body:#2B44D6;--logo-check:#F2B93B;--logo-hacek:#D99A1E;--focus:#2B44D6;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;--text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:6px;--r-m:10px;--r-l:16px;--r-xl:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1118;--surface:#161A24;--sunken:#1D2230;--ink:#E9ECF3;--ink-2:#A9B0C0;--ink-3:#8C93A5;
  --line:#2A3040;--line-strong:#687086;--primary:#8FA1FF;--primary-hover:#A7B5FF;--on-primary:#0B1030;
  --primary-soft:#1F2750;--primary-text:#A9B6FF;--brass:#F2C14E;--brass-soft:#3A2E12;--brass-ink:#F7D47E;
  --on-brass:#0E1118;--ok:#6FD39C;--ok-bg:#13291D;--info:#8EB9F5;--info-bg:#142338;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);--shadow-2:0 8px 24px rgba(0,0,0,.45);
  --logo-body:#F2C14E;--logo-check:#0E1118;--logo-hacek:#F2C14E;--focus:#A9B6FF;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/24px var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--primary-text)}
a:hover{color:var(--primary-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.obal{max-width:1280px;margin:0 auto;padding:0 clamp(16px,5.56vw,80px)}

.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--ink)}
.logo svg{flex:none}
.telo{fill:var(--logo-body)}
.fajfka{stroke:var(--logo-check)}
.hacek{stroke:var(--logo-hacek)}

.tl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:var(--r-m);font:600 17px/20px var(--text);text-decoration:none;white-space:nowrap}
.tl-1{background:var(--primary);color:var(--on-primary)}
.tl-1:hover{background:var(--primary-hover);color:var(--on-primary)}
.tl-2{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong)}
.tl-2:hover{color:var(--ink);border-color:var(--ink)}

.nadtitul{font:600 12px/16px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.uvod{font:400 18px/28px var(--text);color:var(--ink-2);text-wrap:pretty;max-width:60ch}
h1{font:700 64px/68px var(--display);letter-spacing:-.02em;text-wrap:balance}
h2{font:700 32px/38px var(--display);letter-spacing:-.01em;text-wrap:balance}
h3{font:650 22px/28px var(--display);letter-spacing:-.005em}
h4{font:600 17px/24px var(--text)}

.lista{background:var(--brass-soft);color:var(--brass-ink);font:500 14px/20px var(--text)}
.lista p{padding:10px 0}
.hlava{background:var(--surface);border-bottom:1px solid var(--line)}
.hlava .obal{min-height:72px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 40px}
.hlava ul{display:flex;flex-wrap:wrap;column-gap:28px}
.hlava nav a{display:inline-flex;align-items:center;min-height:44px;font:600 15px/20px var(--text);color:var(--ink-2);text-decoration:none}
.hlava nav a:hover{color:var(--primary-text)}

section{scroll-margin-top:16px}
.sekce{padding:96px 0}
.sekce-hlava{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-bottom:40px}
.hero{padding:80px 0 96px}
.hero .obal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:48px 56px;align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.tlacitka{display:flex;flex-wrap:wrap;gap:12px}
.fajfky{display:flex;flex-direction:column;gap:12px}
.fajfky li{display:flex;align-items:flex-start;gap:12px;font:500 16px/24px var(--text)}
.fajfky li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7342' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8'/%3E%3C/svg%3E") center/18px no-repeat}

.deska{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:72px 28px 28px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-2);overflow:hidden}
.deska::before{content:"";position:absolute;left:28px;right:28px;top:36px;height:8px;border-radius:4px;background:var(--brass)}
.stitek{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px 8px 14px;border-radius:26px 10px 10px 26px;background:var(--info-bg);color:var(--info);font:600 14px/20px var(--text);box-shadow:var(--shadow-1)}
.stitek::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px currentColor}
.stitek:nth-child(1){margin-left:18%;transform:rotate(-2deg);background:var(--ok-bg);color:var(--ok)}
.stitek:nth-child(2){margin-left:10%;transform:rotate(2deg)}
.stitek:nth-child(3){margin-left:4%;transform:rotate(-1deg)}
.stitek.hotovo{margin-left:0;transform:rotate(2deg);padding:12px 24px 12px 16px;border-radius:42px 14px 14px 42px;background:var(--brass);color:var(--on-brass);box-shadow:var(--shadow-2);font:700 13px/16px var(--text);letter-spacing:.06em;text-transform:uppercase}
.stitek.hotovo b{display:block;margin-top:6px;font:700 22px/26px var(--display);letter-spacing:0;text-transform:none}
.popisek{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;font:500 13px/18px var(--text);color:var(--ink-2)}
.ukazka{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px dashed var(--line-strong);border-radius:4px;background:var(--surface);font:600 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.pruh{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kroky{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:24px}
.krok{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg)}
.krok .cislo{font:600 13px/18px var(--text);color:var(--primary-text)}
.krok p{color:var(--ink-2)}
.krok .kdo{margin-top:auto;padding-top:8px;font:500 13px/18px var(--text);color:var(--ink-2)}

.ceny{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:24px}
.cena{display:flex;flex-direction:column;gap:24px;padding:32px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1)}
.cena-typ{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font:500 14px/20px var(--text);color:var(--ink-2)}
.cena-typ h3{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 16px 0 30px;border-radius:16px 6px 6px 16px;background:var(--primary);color:var(--on-primary);font:700 15px/1 var(--text)}
.cena-typ h3::before{content:"";position:absolute;left:11px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--surface)}
.castka{font:700 40px/44px var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.levne{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;padding:12px 16px;border-radius:var(--r-m);background:var(--sunken);font:400 15px/22px var(--text);color:var(--ink-2)}
.levne b{font:700 17px/22px var(--display);color:var(--ink)}
.cena hr{margin:0;border:0;border-top:1px solid var(--line)}
.cena .skupina{display:flex;flex-direction:column;gap:12px}
.polozky{border-top:1px solid var(--line)}
.polozky li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font:400 15px/22px var(--text)}
.polozky span:last-child{flex:none;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.poznamka{display:flex;flex-direction:column;gap:2px;margin-top:24px;padding:16px 20px;border-radius:var(--r-m);background:var(--brass-soft);color:var(--brass-ink);font:400 14px/20px var(--text)}
.poznamka b{font:600 15px/22px var(--text)}
.mala{margin-top:12px;font:400 14px/20px var(--text);color:var(--ink-2)}

.kalk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:32px 56px;align-items:center;padding:32px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.kalk-vstup{display:flex;flex-direction:column;gap:24px;min-width:0}
.radek{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.radek label,.radek legend{font:600 14px/20px var(--text);padding:0}
.radek output,.radek b{font:700 22px/28px var(--display);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:28px;margin:8px 0 0;accent-color:var(--primary);cursor:pointer}
.meze{display:flex;justify-content:space-between;font:500 13px/18px var(--text);color:var(--ink-2)}
fieldset{margin:0;padding:0;border:0;min-width:0}
fieldset legend{margin-bottom:8px;font:600 14px/20px var(--text);padding:0}
.sazby{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--sunken)}
.sazby label{position:relative;display:inline-flex}
.sazby input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sazby span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;border-radius:9px;font:600 15px/1 var(--text);color:var(--ink-2)}
.sazby input:checked+span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);font-weight:700}
.sazby input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.kalk-vysledek{display:flex;flex-direction:column;gap:20px;min-width:0}
.pruhy{display:block;height:12px;margin-top:8px;border-radius:6px;background:var(--sunken)}
.pruhy i{display:block;height:12px;min-width:14px;border-radius:6px;background:var(--line-strong)}
.pruhy i.nas{background:var(--primary)}
.rozdil{padding-top:20px;border-top:1px solid var(--line)}

.otazky{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:880px}
.otazky details{border-bottom:1px solid var(--line)}
.otazky summary{min-height:56px;padding:16px 0;font:600 17px/24px var(--text);cursor:pointer}
.otazky p{padding:0 0 20px;color:var(--ink-2);max-width:68ch}

.pata{background:var(--surface);border-top:1px solid var(--line);padding:40px 0;font:400 14px/20px var(--text);color:var(--ink-2)}
.pata .obal{display:flex;flex-direction:column;gap:12px}

@media (max-width:599px){
  .logo svg:first-child{width:28px;height:28px}
  .logo .znacka{width:auto;height:22px}
  h1{font-size:40px;line-height:44px}
  h2{font-size:24px;line-height:30px}
  h3{font-size:20px;line-height:26px}
  .uvod{font-size:17px;line-height:26px}
  .sekce{padding:56px 0}
  .hero{padding:40px 0 56px}
  .cena,.kalk{padding:20px}
  .castka{font-size:32px;line-height:36px}
  .tl{width:100%;white-space:normal;text-align:center}
  .polozky li{align-items:flex-start}
  .stitek,.stitek:nth-child(n){margin-left:0}
}