/* Písma uložená na vlastním webu (ne z Google – rychlejší a bez předávání IP adres návštěvníků) */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda-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:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda-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:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda-latin-italic.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:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-moda-latin-ext-italic.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:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-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:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-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}

/* ── Tokeny ──────────────────────────────────────────────
   Zlatý řez φ = 1,618
   Písmo: 18 → 29 → 47 → 76 px (každý krok × φ)
   Mezery: Fibonacci 8 · 13 · 21 · 34 · 55 · 89 · 144
   Rozvržení: hlavní : vedlejší sloupec = 1,618 : 1      */
:root{
  color-scheme: dark;
  --console:#1E2B33;   /* podklad – modrošedý pult */
  --panel:#26363F;     /* panely a pole */
  --rule:#3A4C56;      /* linky */
  --face:#E9E4D8;      /* text – čelní panel */
  --mute:#9AABB2;      /* vedlejší text */
  --brass:#C8A25A;     /* mosaz – akcent */
  --brass-hi:#DDBB78;
  --vu:#EDE3C8;        /* stupnice VU metru */
  --vu-red:#B8402E;

  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;
  --t0:.786rem; --t1:1.125rem; --t2:1.8rem; --t3:clamp(2.1rem,4.4vw,2.94rem); --t4:clamp(2.6rem,7vw,4.75rem);
  --phi:1.618;
  --display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --text:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--console);color:var(--face);font:400 var(--t1)/var(--phi) var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.005em}
h1{font-size:var(--t4);line-height:1.04}
h2{font-size:var(--t3);line-height:1.1}
h3{font-size:var(--t2);line-height:1.2}
p{margin:0 0 var(--s3)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 var(--s4)}}
.mute{color:var(--mute)}
.small{font-size:var(--t0)}

/* pracovní poznámka */
.draft{font-size:var(--t0);color:var(--console);background:var(--brass);padding:var(--s1) 16px;text-align:center}
.todo{font-size:var(--t0);color:var(--brass);font-style:italic}

/* hlavička */
.brand{text-decoration:none;font-family:var(--display);font-size:1.4rem;line-height:1}
.brand small{display:block;font-family:var(--text);font-size:var(--t0);color:var(--mute);margin-top:4px;letter-spacing:.02em}

/* zlatý řez: 1,618 : 1 */
.golden{display:grid;gap:var(--s5)}
@media(min-width:900px){
  .golden{grid-template-columns:1.618fr 1fr;align-items:center}
  .golden.top-align{align-items:start}
  .golden.flip{grid-template-columns:1fr 1.618fr}
}

/* úvod */
.hero{padding-top:var(--s6);padding-bottom:var(--s6)}
.hero h1{max-width:14ch}
.hero.sub h1{max-width:16ch}
.lead{font-size:1.3rem;color:var(--mute);max-width:34ch;margin-top:var(--s4)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn{font:600 1rem var(--text);display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid var(--brass);background:transparent;color:var(--face);transition:background .2s,color .2s}
.btn:hover{background:var(--panel)}
.btn.gold{background:var(--brass);color:var(--console)}
.btn.gold:hover{background:var(--brass-hi)}
.btn[disabled]{opacity:.35;cursor:not-allowed}

/* VU metr */
.meter{background:linear-gradient(#2b3c45,#22323a);border:1px solid var(--rule);border-radius:6px;padding:var(--s3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.meter svg{display:block;width:100%;height:auto;border-radius:3px}
.meter-cap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s2);font-size:var(--t0);color:var(--mute)}
.lamp{width:8px;height:8px;border-radius:50%;background:#4a5a62;display:inline-block;margin-right:6px;vertical-align:middle;transition:background .2s,box-shadow .2s}
.playing .lamp{background:var(--vu-red);box-shadow:0 0 8px var(--vu-red)}

/* sekce */
section{padding:var(--s6) 0;border-top:1px solid var(--rule)}
.head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media(min-width:900px){.head{grid-template-columns:1.618fr 1fr;align-items:end}}
.head p{margin:0;color:var(--mute)}

/* služby v řádcích */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--brass)}
.rows li{display:grid;gap:var(--s2) var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
@media(min-width:900px){.rows li{grid-template-columns:1fr 1.618fr auto;align-items:baseline}}
.rows h3 a{text-decoration:none}
.rows h3 a:hover{color:var(--brass)}
.rows p{margin:0;color:var(--mute);max-width:52ch}
.rows .from{font-family:var(--display);font-size:var(--t2);white-space:nowrap;color:var(--brass)}
.rows .from small{font-family:var(--text);font-size:var(--t0);color:var(--mute);display:block}

/* mřížky */
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.item h3{font-size:1.35rem;margin-bottom:var(--s1)}
.item p{color:var(--mute);margin:0}
.item{padding-top:var(--s3);border-top:1px solid var(--rule)}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:var(--s4)}
.panel.gold{border-color:var(--brass)}
.panel h3{margin-bottom:var(--s2)}

/* postup – skutečná posloupnost */
.steps{list-style:none;margin:0;padding:var(--s4) 0 0;counter-reset:k;display:grid;gap:var(--s4);border-top:1px solid var(--brass)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:k}
.steps li::before{content:counter(k);display:block;font-family:var(--display);font-size:var(--t3);line-height:1;color:var(--brass);margin-bottom:var(--s2)}
.steps strong{display:block;margin-bottom:4px;font-weight:600}
.steps span{color:var(--mute)}

/* fakta */
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.facts b{font-family:var(--display);font-weight:500;font-size:var(--t2);color:var(--brass);min-width:4.2em}
.facts span{color:var(--mute)}

/* ukázky */
.samples{list-style:none;margin:0;padding:0;display:grid;gap:0 var(--s5)}
@media(min-width:800px){.samples{grid-template-columns:1fr 1fr}}
.samples li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.play{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--brass);background:transparent;color:var(--brass);cursor:pointer;display:grid;place-items:center}
.play:hover{background:var(--brass);color:var(--console)}
.play svg{width:14px;height:14px;margin-left:2px}
.samples b{display:block;font-weight:600}
.samples small{color:var(--mute)}

/* ceny */
.prices{display:grid;gap:var(--s3)}
@media(min-width:800px){.prices{grid-template-columns:1fr 1.618fr 1fr}}
.price{padding:var(--s4);border:1px solid var(--rule);border-radius:4px}
.price.main{border-color:var(--brass);background:var(--panel)}
.price .num{font-family:var(--display);font-size:var(--t3);line-height:1.1;margin:var(--s2) 0 4px}
.price ul{margin:var(--s3) 0 0;padding-left:1.1em;color:var(--mute)}
table{width:100%;border-collapse:collapse}
td,th{padding:var(--s2) var(--s1);border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{color:var(--mute);font-weight:500;font-size:var(--t0)}
td.c{font-family:var(--display);font-size:1.15rem;white-space:nowrap;text-align:right}
.tbl{overflow-x:auto}

/* časté otázky */
details{border-bottom:1px solid var(--rule);padding:var(--s3) 0}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brass);font-family:var(--display);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:var(--s2) 0 0;color:var(--mute)}

/* formuláře */
form{display:grid;gap:var(--s3)}
label{display:block;font-weight:500;font-size:.95rem;margin-bottom:6px}
.check{display:flex;gap:var(--s2);align-items:flex-start;font-weight:400}
.check input{width:auto;margin-top:6px;accent-color:var(--brass)}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--face);background:var(--console);border:1px solid var(--rule);border-radius:2px;padding:var(--s2)}
input:focus,select:focus,textarea:focus{border-color:var(--brass);outline:none}
input[type=radio]{width:auto;accent-color:var(--brass)}
.promise{border-left:2px solid var(--brass);padding-left:var(--s3);color:var(--mute)}
.promise b{color:var(--face);font-weight:600}
.big{font-family:var(--display);font-size:var(--t3);line-height:1.1}

footer{border-top:1px solid var(--rule);padding:var(--s5) 0;color:var(--mute);font-size:var(--t0)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.pdf{flex:none;width:46px;height:46px;border:1px solid var(--rule);border-radius:3px;display:grid;place-items:center;font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--brass)}

.rows .more{font-weight:600;color:var(--brass);text-decoration:none;white-space:nowrap}
.rows .more:hover{text-decoration:underline}
.facts a{color:var(--face);text-decoration:none;font-family:var(--display);font-size:1.25rem}
.facts a:hover{color:var(--brass)}

/* poptávky */
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hlaseni{margin:var(--s2) 0 0;color:var(--mute)}
.hlaseni[data-druh=chyba]{color:var(--brass-hi);border-left:3px solid var(--vu-red);padding-left:var(--s2)}
.check a{color:var(--brass-hi)}
.hlasky-souhrn{white-space:pre-wrap;font-size:var(--t0);color:var(--mute);margin:var(--s2) 0 0;max-height:240px;overflow:auto}
/* podpis v úvodu – kdo nahrává */
.podpis{display:flex;flex-direction:column;gap:4px;margin:var(--s3) 0 var(--s4);padding-left:var(--s2);border-left:2px solid var(--brass)}
.podpis-jmeno{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--brass-hi);line-height:1.2}
.podpis-fakta{font-size:var(--t0);color:var(--mute);letter-spacing:.02em;line-height:1.7}
.podpis-fakta i{font-style:normal;color:var(--brass);margin:0 .5em}

@media(min-width:1000px){.steps.s3{grid-template-columns:repeat(3,1fr)}}

/* ── Horní lišta: zůstává nahoře při posouvání, aktivní stránka je jasně vidět (22. 10., připomínka z testu) ── */
html{scroll-padding-top:96px}
.top{position:sticky;top:0;z-index:50;background:rgba(30,43,51,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-top:var(--s2);padding-bottom:var(--s2)}
.top nav{display:flex;align-items:center;gap:var(--s3)}
.top nav a{text-decoration:none;color:var(--mute);font-weight:500;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.top nav a:hover{color:var(--face);border-bottom-color:var(--rule)}
.top nav a[aria-current]{color:var(--brass-hi);font-weight:600;border-bottom-color:var(--brass)}
.top nav a.nav-cta{color:var(--brass-hi);border:1px solid var(--brass);border-radius:2px;padding:6px 14px}
.top nav a.nav-cta:hover{background:var(--brass);color:var(--console)}
.top nav a.nav-cta[aria-current]{background:var(--brass);color:var(--console);border-color:var(--brass)}
@media(max-width:900px){
  html{scroll-padding-top:110px}
  .top .wrap{flex-direction:column;align-items:stretch;gap:6px;padding-top:10px;padding-bottom:0}
  .brand{font-size:1.25rem}
  .brand small{display:none}
  .top nav{gap:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px;margin:0 -16px;padding-left:16px;padding-right:64px;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .top nav::-webkit-scrollbar{display:none}
}

/* ── Výraznější lišta (22. 10., 2. připomínka z testu: větší a barevnější) ── */
.top{background:var(--panel);border-bottom:2px solid var(--brass)}
.brand{font-size:1.85rem;letter-spacing:.005em}
.brand span{color:var(--brass-hi)}
.brand small{font-size:.8rem;color:var(--face);opacity:.75}
.top nav a{color:var(--face);opacity:.85;font-size:1.02rem}
.top nav a:hover{opacity:1}
.top nav a[aria-current]{opacity:1;color:var(--brass-hi);border-bottom-width:3px}
.top nav a.nav-cta{opacity:1}
@media(max-width:900px){.brand{font-size:1.5rem}}

/* ── Menu jako výrazné „záložky“ už bez najetí myší (22. 10., 3. připomínka) ── */
.top nav{gap:10px}
.top nav a{opacity:1;color:var(--face);font-weight:600;font-size:1rem;padding:8px 14px;border:1px solid var(--rule);border-radius:3px;background:rgba(233,228,216,.06)}
.top nav a:hover{border-color:var(--brass);background:rgba(200,162,90,.14);color:var(--face)}
.top nav a[aria-current]{background:var(--brass);border-color:var(--brass);color:var(--console)}
.top nav a.nav-cta{color:var(--brass-hi);border-color:var(--brass);background:transparent;padding:8px 14px}
.top nav a.nav-cta:hover,.top nav a.nav-cta[aria-current]{background:var(--brass);color:var(--console)}
@media(max-width:1100px){.top nav a{padding:7px 10px;font-size:.95rem}}
@media(max-width:900px){.top nav{gap:8px;padding-bottom:10px}}

/* ── Mobil: menu pod tlačítkem se třemi čárkami + tlačítko Zavolat (22. 10.) ── */
.menu-btn,.tel-btn{display:none}
@media(max-width:900px){
  html{scroll-padding-top:80px}
  .top .wrap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
  .brand{margin-right:auto}
  .tel-btn{display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--console);background:var(--brass);border-radius:3px;padding:8px 14px}
  .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;background:transparent;border:1px solid var(--brass);border-radius:3px;cursor:pointer}
  .menu-btn span{display:block;height:2px;background:var(--face);border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .top:has(.menu-btn) nav{display:none}
  .top nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:8px;overflow:visible;margin:4px 0 6px;padding:0;-webkit-mask-image:none;mask-image:none}
  .top nav.open{display:flex}
  .top nav a{padding:12px 14px;font-size:1.05rem}
}