/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Lumen (drop: Night Foundry)
 * enrichment: Tier-B hand-SVG (apparatus = půdorys domu se živými stavy) · nav: N5 Floating pill · footer: Ft5 Statement
 * adaptace: český trh — próza v běžné sazbě, lowercase jen display titulky; mono štítky UPPERCASE (dvouregistrová typografie drží)
 * fonts: Instrument Serif 400 (display) + Manrope variable (text) + IBM Plex Mono 400/500 (štítky)
 * accent: molten brass H50 (medová DNA značky) · accent-2: coral H18 (verb landmark)
 * pozn.: stamp opraven po auditu design-critica — deklarovana Map/Diagram neplatila,
 * diagram je hero enrichment a pod nim jede klasicky stack. Marquee Hero je poctivy popis.
 * pre-emit critique: P5 H4 E4 S4 R4 V5
 */

/* ---------- Fonty (self-host, zadne CDN) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin-400.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin-ext-400.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin-500.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-v20-latin-ext-500.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 ---------- */
:root{
  --color-paper:oklch(13% 0.014 265);
  --color-paper-2:oklch(16.5% 0.016 265);
  --color-paper-3:oklch(20% 0.018 265);
  --color-ink:oklch(96% 0.006 262);
  --color-ink-2:oklch(88% 0.008 262);
  --color-muted:oklch(71% 0.012 262);
  /* faint: zvednuto z 54% na 62% — puvodni hodnota mela na paper kontrast 3,97:1
     a padala na WCAG AA pro maly text (D26). Pouziva se na 11 az 13px popiskach
     vcetne poznamky u formulare, takze to neni kosmetika. */
  --color-faint:oklch(62% 0.012 262);
  --color-accent:oklch(76% 0.17 50);
  --color-accent-strong:oklch(83% 0.155 58);
  --color-accent-ink:oklch(17% 0.03 60);
  --color-accent-2:oklch(70% 0.155 22);
  --color-glow:oklch(80% 0.16 50 / 0.42);
  --color-glow-2:oklch(80% 0.16 50 / 0.14);
  --color-paper-emit:oklch(76% 0.17 50 / 0.045);
  --color-warn:oklch(70% 0.17 25);
  --color-rule:oklch(96% 0.006 262 / 0.10);
  --color-rule-2:oklch(96% 0.006 262 / 0.17);
  --rule-blueprint:oklch(96% 0.006 262 / 0.045);
  --color-focus:oklch(83% 0.155 58);
  /* tinktury akcentu jako tokeny: driv bylo 19 improvizovanych oklch() v pravidlech
     a posun odstinu mosazi by je rozesel (brana 48) */
  --color-accent-wash:oklch(76% 0.17 50 / 0.05);
  --color-accent-wash-2:oklch(76% 0.17 50 / 0.13);
  --color-accent-wash-3:oklch(76% 0.17 50 / 0.28);
  --color-hover-veil:oklch(96% 0.006 262 / 0.06);
  /* Neprusvitna. Driv 0.82 (18 % pruhlednost) a text pod plovouci pilulkou
     pri rolovani prosvital jako necitelna smes. Zmereno 12. 8. na produkci:
     3 az 10 textovych bloku na stranku napric mobilem, tabletem i desktopem.
     Otakar rozhodl pro neprusvitne pozadi. Hodnota je presne --color-paper-2,
     takze pilulka splyva s podkladem karet a vzhled se nemeni, jen prestane
     prosvitat. NEVRACET alfa kanal. */
  --color-nav-bg:oklch(16.5% 0.016 265);
  --color-nav-panel:oklch(16.5% 0.016 265);
  --color-mistnost:oklch(17% 0.016 265 / 0.8);

  --font-display:'Instrument Serif','Tiempos Headline',ui-serif,Georgia,serif;
  --font-body:'Manrope',system-ui,'Segoe UI',sans-serif;
  --font-label:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --text-display:clamp(2.7rem, 6vw + 1rem, 5.3rem);
  --text-display-s:clamp(2.1rem, 3.4vw + 1rem, 3.4rem);
  --text-3xl:clamp(1.65rem, 2vw + .8rem, 2.3rem);
  --text-2xl:1.4rem;
  --text-xl:1.17rem;
  --text-body:1.0625rem;
  --text-sm:.9rem;
  --text-xs:.8125rem;
  --text-micro:.6875rem;

  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px;
  --space-md:24px; --space-lg:36px; --space-xl:52px; --space-2xl:76px; --space-3xl:112px;
  --sekce:clamp(72px, 10vw, 140px);
  --page-gutter:clamp(20px, 4.5vw, 56px);
  --sirka:1200px;
  --sirka-cteni:70ch;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:160ms; --dur-2:220ms; --dur-3:320ms; --dur-4:600ms; --dur-pulse:4s;

  --radius-sm:4px; --radius-md:5px; --radius-lg:8px; --radius-pill:999px;
  --rule-hair:1px;
  --tracking-micro:.10em;
  --stin-chrome:0 8px 24px -12px oklch(0% 0 0 / 0.45);
  --stin-karta:0 24px 60px -28px oklch(0% 0 0 / 0.55);
}
@supports not (color: oklch(0% 0 0)){
  :root{
    --color-paper:#0e0e16; --color-paper-2:#15151f; --color-paper-3:#1b1b27;
    --color-ink:#f2f1f5; --color-ink-2:#dcdbe2; --color-muted:#a7a6b1; --color-faint:#8c8b94;
    --color-accent:#e0a04c; --color-accent-strong:#f0b969; --color-accent-ink:#241705;
    --color-accent-2:#e2705e; --color-glow:rgba(235,175,90,.42); --color-glow-2:rgba(235,175,90,.14);
    --color-paper-emit:rgba(224,160,76,.05); --color-warn:#d96f52;
    --color-rule:rgba(242,241,245,.10); --color-rule-2:rgba(242,241,245,.17);
    --rule-blueprint:rgba(242,241,245,.045); --color-focus:#f0b969;
  }
}

/* ---------- Reset a zaklad ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:96px}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; overflow-x:clip;
  background:var(--color-paper); color:var(--color-ink-2);
  font-family:var(--font-body); font-size:var(--text-body); line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0 0 .5em; color:var(--color-ink); font-weight:600; line-height:1.15; overflow-wrap:anywhere; min-width:0; font-style:normal}
h1,h2{font-family:var(--font-display); font-weight:400; letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:var(--color-ink); text-decoration:underline; text-decoration-color:var(--color-rule-2); text-underline-offset:3px; transition:color var(--dur-2) var(--ease-soft), text-decoration-color var(--dur-2) var(--ease-soft)}
a:hover{color:var(--color-accent-strong); text-decoration-color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-focus); outline-offset:3px; border-radius:2px}
::selection{background:var(--color-accent-wash-3); color:var(--color-ink)}
button{font:inherit}
strong{color:var(--color-ink); font-weight:700}
em{font-style:normal; color:var(--color-accent-2)}
hr{border:0; border-top:var(--rule-hair) solid var(--color-rule); margin:var(--space-xl) 0}
table{border-collapse:collapse; width:100%}

.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--color-accent); color:var(--color-accent-ink); padding:10px 18px; border-radius:0 0 var(--radius-sm) 0; text-decoration:none; font-weight:700}
.skip-link:focus-visible{left:0}

.obal{max-width:var(--sirka); margin-inline:auto; padding-inline:var(--page-gutter)}
.sekce{padding-block:var(--sekce)}
.sekce + .sekce{padding-block-start:0}

/* ---------- Dvouregistrova typografie ---------- */
.eyebrow, .mono-label{
  font-family:var(--font-label); font-size:var(--text-micro); font-weight:500;
  letter-spacing:var(--tracking-micro); text-transform:uppercase;
  color:var(--color-muted);
}
.eyebrow{display:block; margin-block-end:var(--space-sm)}
.eyebrow b{color:var(--color-accent); font-weight:500}

.titulek{font-size:var(--text-display-s); max-width:24ch; text-transform:lowercase}
.titulek--display{font-size:var(--text-display); line-height:1.02; letter-spacing:-.032em; max-width:16ch}
.titulek em{font-style:normal; color:var(--color-accent-2); position:relative; white-space:nowrap}
.titulek em::after{
  content:""; position:absolute; left:.05em; right:.05em; bottom:.02em; height:1px;
  background:var(--color-accent-2); transform-origin:left;
  animation:podtrzeni 320ms var(--ease-soft) 900ms backwards;
}
@keyframes podtrzeni{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lede{font-size:var(--text-xl); line-height:1.55; color:var(--color-muted); max-width:60ch}
.lede strong{color:var(--color-ink-2)}

/* ---------- Zkušební provoz (2026-09-05, rozhodnutí Otakara) ----------
   Web je živý, ale službu zatím neposkytujeme. Pruh to říká na KAŽDÉ stránce,
   ne jen na kontaktu: návštěvník přijde z vyhledávání rovnou do článku Poradny
   a bez pruhu by se o zkušebním provozu nedozvěděl nikdy.

   Nedá se zavřít a nemá časovač. Není to marketingové sdělení, je to sdělení
   o stavu služby, a to se návštěvníkovi neschovává za křížek.

   Pruh je fixed, protože .nav-pill je taky fixed a musí se posunout pod něj.
   Vazbu drží --zp-vyska, jediné místo, kde se výška píše. Hodnoty jsou
   ZMĚŘENÉ ve vykresleném webu (viewport 1280 a 375 px), ne odhadnuté. */
:root{ --zp-vyska:38px }
@media (max-width: 900px){ :root{ --zp-vyska:56px } }

.zkusebni-provoz{
  position:fixed; top:0; left:0; right:0; z-index:60;
  min-height:var(--zp-vyska); box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  padding:8px var(--space-sm);
  background:var(--color-accent); color:var(--color-accent-ink);
  font-family:var(--font-label); font-size:var(--text-xs); line-height:1.35;
  text-align:center; text-wrap:balance;
  box-shadow:var(--stin-chrome);
}
.zkusebni-provoz b{ text-transform:uppercase; letter-spacing:var(--tracking-micro); font-weight:600 }
body{ padding-block-start:var(--zp-vyska) }

/* Delší verze těsně nad poptávkovým formulářem. Pruh nahoře řekne stav webu,
   tenhle blok řekne, co to znamená pro člověka, který se právě chystá odeslat
   poptávku. Bez něj by odeslal v domnění, že si objednává hotovou službu. */
.zkusebni-blok{
  margin-block-end:var(--space-md); padding:var(--space-sm) var(--space-md);
  border:var(--rule-hair) solid var(--color-accent);
  border-inline-start:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-paper-2); color:var(--color-ink-2);
  font-size:var(--text-sm); line-height:1.6;
}
.zkusebni-blok strong{ color:var(--color-accent-strong) }

/* ---------- Navigace (N5 floating pill) ---------- */
.nav-pill{
  position:fixed; top:calc(var(--space-sm) + var(--zp-vyska)); left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:var(--space-sm);
  padding:8px 10px 8px 18px; max-width:min(94vw, 760px);
  background:var(--color-nav-bg);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  /* pozn.: filtr dela z pilulky containing block pro fixed potomky, proto se
     panel mobilniho menu poziciuje pres vlastni obal .nav-panel, ne primo tady */
  border:var(--rule-hair) solid var(--color-rule-2);
  border-radius:var(--radius-pill);
  box-shadow:var(--stin-chrome);
  z-index:40; white-space:nowrap;
}
.wordmark{
  font-family:var(--font-label); font-weight:500; font-size:.95rem; letter-spacing:.02em;
  color:var(--color-ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.wordmark:hover{color:var(--color-accent-strong)}
.wordmark .hex{width:12px; height:13.86px; flex:none; background:var(--color-accent); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wordmark small{color:var(--color-faint); font-size:.75em; font-weight:400}
.nav-pill__links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-pill__links a{
  display:inline-block; padding:8px 12px; border-radius:var(--radius-pill);
  font-size:var(--text-sm); font-weight:600; color:var(--color-muted); text-decoration:none;
}
.nav-pill__links a:hover{color:var(--color-ink); background:var(--color-hover-veil)}
.nav-pill__links a[aria-current="page"]{color:var(--color-accent)}
.nav-pill .cta{margin-inline-start:4px}
.nav-burger{display:none}

/* mobil: pill -> rohovy chip + panel */
@media (max-width: 900px){
  .nav-pill{
    top:calc(var(--space-xs) + var(--zp-vyska)); left:var(--space-xs); right:var(--space-xs); transform:none;
    max-width:none; justify-content:space-between; padding:8px 8px 8px 14px;
  }
  .wordmark{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .wordmark small{display:none}
  .nav-pill .cta{flex:0 0 auto}
  .nav-pill__links{
    /* Sirku pocitame z VIEWPORTU, ne z pilulky. Duvod: backdrop-filter na
       .nav-pill z ni dela containing block pro fixed potomky, takze `inset`
       merilo od okraju pilulky a panel vychazel o 26 px uzsi, nez CSS rikalo.
       Jednotka vw ten posun obchazi, protoze je vzdy vuci oknu. */
    position:fixed; top:64px; left:50%; transform:translateX(-50%);
    width:calc(100vw - 2 * var(--space-xs)); right:auto; bottom:auto;
    max-height:calc(100dvh - 84px); overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--color-paper-2);
    border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-lg);
    padding:10px; box-shadow:var(--stin-karta);
    opacity:0; visibility:hidden;
    transition:opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft), visibility 0s linear var(--dur-2);
  }
  .nav-pill__links a{padding:12px 14px; min-height:44px; display:flex; align-items:center}
  .nav-pill.otevrene .nav-pill__links{opacity:1; visibility:visible; transform:translateX(-50%); transition-delay:0s}
  /* CTA na mobilu ZUSTAVA. Driv se skryvala (display:none) a jedina cesta ke
     kontaktu byl burger nebo scroll na konec stranky, coz je presne ta chvile,
     kdy se clovek na stavbe rozhodne zavolat (nalez ghost-visitora). */
  .nav-pill .cta{padding:10px 14px; font-size:var(--text-xs)}
  .nav-burger{margin-inline-start:-4px}
  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; flex:0 0 44px; padding:0;
    border:0; background:transparent; color:var(--color-ink);
    border-radius:var(--radius-pill); cursor:pointer;
  }
  .nav-burger:hover{background:var(--color-hover-veil)}
  .nav-burger svg{width:20px; height:20px}
  .nav-burger .zavrit{display:none}
  .nav-pill.otevrene .nav-burger .otevrit{display:none}
  .nav-pill.otevrene .nav-burger .zavrit{display:block}
}

/* ---------- Tlacitka (8 stavu) ---------- */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; min-height:44px; border-radius:var(--radius-pill);
  background:var(--color-accent); color:var(--color-accent-ink);
  font-weight:800; font-size:var(--text-sm); letter-spacing:.01em; text-decoration:none;
  border:0; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.cta:hover, .cta.is-hover{background:var(--color-accent-strong); color:var(--color-accent-ink); transform:translateY(-1px); box-shadow:0 6px 20px -8px var(--color-glow)}
.cta:active, .cta.is-active{transform:translateY(1px); box-shadow:none}
.cta:disabled, .cta[aria-disabled="true"]{background:var(--color-paper-3); color:var(--color-faint); cursor:not-allowed; transform:none; box-shadow:none}
.cta[data-state="loading"]{color:transparent; position:relative; pointer-events:none}
.cta[data-state="loading"]::after{content:""; position:absolute; width:16px; height:16px; border:2px solid var(--color-accent-ink); border-top-color:transparent; border-radius:50%; animation:tocit .8s linear infinite}
@keyframes tocit{to{transform:rotate(360deg)}}
.cta[data-state="error"]{background:var(--color-warn); color:var(--color-paper)}
.cta[data-state="success"]{background:var(--color-accent-strong)}
.cta--obrys{background:transparent; color:var(--color-ink); border:var(--rule-hair) solid var(--color-rule-2)}
.cta--obrys:hover{background:var(--color-hover-veil); color:var(--color-ink); box-shadow:none}
.odkaz-sipka{font-weight:700; text-decoration:none; border-bottom:1px solid var(--color-accent); padding-bottom:2px; color:var(--color-ink)}
.odkaz-sipka::after{content:" →"; color:var(--color-accent)}
.odkaz-sipka:hover{color:var(--color-accent-strong)}

/* ---------- Hero (blueprint grid + emit) ---------- */
.hero{
  position:relative; overflow:clip;
  background:
    radial-gradient(60% 50% at 76% 24%, var(--color-paper-emit) 0%, transparent 65%);
  padding-block:calc(var(--space-3xl) + 40px) var(--space-3xl);
}
.hero__mrizka{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
.hero__cta-radek{display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; margin-block-start:var(--space-lg)}
.hero__pozn{font-size:var(--text-xs); color:var(--color-faint); margin-block-start:var(--space-sm)}
@media (max-width: 900px){
  .hero__mrizka{grid-template-columns:minmax(0,1fr); gap:var(--space-xl)}
}

/* ---------- Aparat: pudorys domu ---------- */
.aparat{position:relative; margin:0; justify-self:center; width:min(100%, 480px)}
.aparat svg{display:block; width:100%; height:auto}
.aparat figcaption{margin-block-start:var(--space-sm); text-align:center}

.dum-stena{fill:none; stroke:var(--color-rule-2); stroke-width:1.5}
.dum-pricka{fill:none; stroke:var(--color-rule); stroke-width:1}
.dum-mistnost{fill:var(--color-mistnost); transition:fill var(--dur-4) var(--ease-soft)}
.dum-mistnost.sviti{fill:var(--color-accent-wash-2)}
.dum-popisek{font-family:var(--font-label); font-size:9.5px; letter-spacing:.08em; fill:var(--color-faint); text-transform:uppercase}
@media (max-width: 700px){
  /* SVG se skaluje dolu, takze user units musi nahoru: pri 320 px viewportu
     vychazelo 9.5px na 5,1 px na displeji, coz je sedy sum, ne popisek */
  .dum-popisek{font-size:15px; letter-spacing:.04em}
}
.dum-uzel{fill:var(--color-paper-3); stroke:var(--color-rule-2); stroke-width:1; transition:fill var(--dur-4) var(--ease-soft), stroke var(--dur-4) var(--ease-soft)}
.dum-uzel.aktivni{fill:var(--color-accent); stroke:var(--color-accent-strong); animation:uzelPulz var(--dur-pulse) ease-in-out infinite}
.dum-uzel.varovani{fill:var(--color-warn); stroke:var(--color-warn); animation:uzelPulz 1.6s ease-in-out infinite}
@keyframes uzelPulz{0%,100%{opacity:1}50%{opacity:.78}}
.dum-zaluzie{stroke:var(--color-accent); stroke-width:3; stroke-linecap:round; opacity:.85; transition:transform var(--dur-4) var(--ease-in-out); transform-origin:center top}
.dum-tok{fill:none; stroke:var(--color-glow); stroke-width:1.5; stroke-dasharray:3 7; animation:tok 2.6s linear infinite; opacity:0; transition:opacity var(--dur-4) var(--ease-soft)}
.dum-tok.aktivni{opacity:1}
@keyframes tok{to{stroke-dashoffset:-40}}

.aparat__callouts{
  list-style:none; margin:var(--space-sm) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  border-block:var(--rule-hair) solid var(--color-rule);
}
.callout{
  position:relative; font-family:var(--font-label); font-size:10.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted);
  padding:9px 10px 9px 16px; overflow-wrap:anywhere;
  border-top:var(--rule-hair) solid var(--color-rule);
}
.callout:nth-child(-n+2){border-top:0}
.callout:nth-child(even){border-inline-start:var(--rule-hair) solid var(--color-rule)}
.callout b{color:var(--color-accent); font-weight:500}
/* zbytek vynosky: kratka linka u leveho okraje, aby to poradz cetlo jako odecet z pristroje */
.callout::before{content:""; position:absolute; left:0; top:50%; width:8px; height:1px; background:var(--color-accent); opacity:.6}
@media (max-width: 420px){
  .aparat__callouts{grid-template-columns:minmax(0,1fr)}
  .callout:nth-child(even){border-inline-start:0}
  .callout:nth-child(2){border-top:var(--rule-hair) solid var(--color-rule)}
}

.sceny{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-block-start:var(--space-md); padding:0; list-style:none}
.scena-chip{
  font-family:var(--font-label); font-size:var(--text-micro); font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 14px; min-height:36px; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-muted); border:var(--rule-hair) solid var(--color-rule);
  cursor:pointer; transition:color var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
.scena-chip:hover{color:var(--color-ink); border-color:var(--color-rule-2)}
.scena-chip[aria-pressed="true"]{background:var(--color-accent-wash-2); color:var(--color-accent-strong); border-color:var(--color-accent)}

/* ---------- Meter strip (spotova krivka) ---------- */
.meter{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-md);
  align-items:center; padding:12px var(--page-gutter);
  border-block:var(--rule-hair) solid var(--color-rule);
}
.meter__label{margin:0}
.meter__bars{display:flex; gap:2px; align-items:end; height:30px}
.meter__bars > span{
  flex:1 1 auto; min-width:1px; background:var(--color-accent); border-radius:.5px;
  opacity:.55; transform-origin:bottom;
  animation:meterVlna 3.2s var(--ease-in-out) infinite;
  animation-delay:calc(var(--i, 0) * 42ms);
}
.meter__bars > span.udoli{background:var(--color-faint); opacity:.35}
@keyframes meterVlna{
  0%, 100%{opacity:.5; transform:scaleY(1)}
  38%     {opacity:1;  transform:scaleY(1.13)}
  70%     {opacity:.62; transform:scaleY(1.02)}
}
@media (prefers-reduced-motion: reduce){
  .meter__bars > span{animation:none; opacity:.85}
  .meter__bars > span.udoli{opacity:.5}
}
@media (max-width: 700px){
  .meter{grid-template-columns:minmax(0,1fr); gap:var(--space-2xs); text-align:center}
  .meter__label{font-size:10px}
}

/* ---------- Karty (hairline, svetlo zevnitr) ---------- */
.karty{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:var(--space-sm)}
.karta{
  position:relative; padding:var(--space-md);
  border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-md);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--color-accent-wash) 0%, transparent 60%),
    var(--color-paper-2);
  transition:transform var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft);
}
.karta:hover{transform:translateY(-4px); border-color:var(--color-rule-2);
  background:radial-gradient(120% 90% at 50% 0%, var(--color-accent-wash-2) 0%, transparent 62%), var(--color-paper-2)}
.karta h3{font-size:var(--text-xl); margin-block:2px 8px}
.karta p{color:var(--color-muted); font-size:var(--text-sm); margin:0}
.karta .mono-label{display:block; margin-block-end:var(--space-xs)}
.karta--odkaz{display:block; text-decoration:none}
.karta--odkaz:hover h3{color:var(--color-accent-strong)}

/* ---------- Kroky (F4 step sequence 1.0 -> 4.0) ---------- */
.kroky{list-style:none; margin:0; padding:0; display:grid; gap:0}
.krok{
  display:grid; grid-template-columns:minmax(72px, auto) minmax(0,1fr); gap:var(--space-md);
  padding-block:var(--space-lg); border-top:var(--rule-hair) solid var(--color-rule);
}
.krok:last-child{border-bottom:var(--rule-hair) solid var(--color-rule)}
.krok__num{font-family:var(--font-display); font-size:var(--text-3xl); color:var(--color-accent); line-height:1}
.krok h3{font-size:var(--text-2xl); font-family:var(--font-display); font-weight:400; text-transform:lowercase}
.krok p{color:var(--color-muted); max-width:62ch}
.krok .mono-label{display:block; margin-block-start:var(--space-xs); color:var(--color-faint)}
@media (max-width: 560px){
  .krok{grid-template-columns:minmax(0,1fr); gap:var(--space-2xs)}
}

/* ---------- Stat rada (3 bunky, serif cislice) ---------- */
.staty{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-block:var(--rule-hair) solid var(--color-rule);
  background:var(--color-paper-2); box-shadow:var(--stin-karta)}
.stat{padding:var(--space-lg) var(--space-md); text-align:center}
.stat + .stat{border-inline-start:var(--rule-hair) solid var(--color-rule)}
.stat__cislo{font-family:var(--font-display); font-size:clamp(2.2rem, 4vw + .5rem, 4.2rem); color:var(--color-ink); line-height:1; font-variant-numeric:tabular-nums}
.stat__cislo small{font-size:.45em; color:var(--color-accent)}
.stat .mono-label{display:block; margin-block-start:var(--space-xs)}
@media (max-width: 700px){
  .staty{grid-template-columns:minmax(0,1fr)}
  .stat + .stat{border-inline-start:0; border-block-start:var(--rule-hair) solid var(--color-rule)}
}

/* ---------- Protokoly / chips ---------- */
.chipy{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none}
.chip{
  font-family:var(--font-label); font-size:var(--text-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-pill);
  padding:7px 13px;
}

/* ---------- Split sekce ---------- */
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 4vw, 64px); align-items:start}
.split--stred{align-items:center}
@media (max-width: 860px){ .split{grid-template-columns:minmax(0,1fr)} }

/* ---------- Tabulky (F3 spec sheet) ---------- */
.spec{border-block:var(--rule-hair) solid var(--color-rule-2)}
.spec th, .spec td{padding:14px 16px; text-align:left; vertical-align:top; border-top:var(--rule-hair) solid var(--color-rule); font-size:var(--text-sm)}
.spec thead th{font-family:var(--font-label); font-size:var(--text-micro); letter-spacing:var(--tracking-micro); text-transform:uppercase; color:var(--color-muted); font-weight:500; border-top:0}
.spec tbody th{color:var(--color-ink); font-weight:700; width:34%}
.spec td{color:var(--color-muted)}
.spec td b, .spec td strong{color:var(--color-ink)}
.spec .ano{color:var(--color-accent-strong); font-weight:700}
.spec .ne{color:var(--color-faint)}
.tabulka-obal{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabulka-obal table{min-width:min(560px, 100%)}
@media (max-width: 700px){
  /* radeji vodorovny scroll nez rozlamane cislo: 560 px je min. sirka, pri ktere
     se cena vejde na jeden radek */
  .tabulka-obal table{min-width:560px}
}
.spec td, .spec th{overflow-wrap:normal}
/* cena, jednotka a rozsah drzi pohromade */
.spec td{text-wrap:pretty}

/* ---------- FAQ (details) ---------- */
.faq{border-top:var(--rule-hair) solid var(--color-rule)}
.faq details{border-bottom:var(--rule-hair) solid var(--color-rule)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-sm);
  padding:18px 4px; font-weight:700; color:var(--color-ink); min-height:44px;
}
/* Otazka v FAQ je nadpis, ne jen text summary: odpovedove enginy ctou h2-h6,
   text uvnitr <summary> jim propadne. Vzhled zustava presne stejny. */
.faq summary h3{font:inherit; color:inherit; margin:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-label); color:var(--color-accent); font-size:1.1rem; transition:transform var(--dur-2) var(--ease-soft); flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--color-accent-strong)}
.faq .faq__telo{padding:0 4px 18px; color:var(--color-muted); max-width:68ch}
.faq .faq__telo p:last-child{margin-bottom:0}

/* ---------- Formular (8 stavu) ---------- */
.pole{display:grid; gap:6px; margin-block-end:var(--space-sm)}
.pole label{font-weight:700; font-size:var(--text-sm); color:var(--color-ink)}
.pole .napoveda{font-size:var(--text-xs); color:var(--color-faint)}
.pole input, .pole textarea, .pole select{
  width:100%; padding:12px 14px; min-height:44px;
  background:var(--color-paper-2); color:var(--color-ink);
  border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-sm);
  font:inherit; transition:border-color var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft);
}
.pole input:hover, .pole textarea:hover{border-color:oklch(96% 0.006 262 / 0.28)}
.pole input:focus-visible, .pole textarea:focus-visible, .pole select:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px; border-color:var(--color-accent)}
.pole input:disabled, .pole textarea:disabled{background:var(--color-paper); color:var(--color-faint); cursor:not-allowed}
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"]{border-color:var(--color-warn)}
.pole .chyba{color:var(--color-warn); font-size:var(--text-xs); font-weight:600; display:none}
.pole input[aria-invalid="true"] ~ .chyba, .pole textarea[aria-invalid="true"] ~ .chyba{display:block}
.form-stav{margin-block-start:var(--space-sm); font-weight:600; display:none; padding:14px 16px; border-radius:var(--radius-sm); border:var(--rule-hair) solid var(--color-rule-2)}
.form-stav.ok{display:block; color:var(--color-accent-strong); border-color:var(--color-accent)}
.form-stav.selhani{display:block; color:var(--color-warn); border-color:var(--color-warn)}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Footer (Ft5 statement) ---------- */
.foot{padding:var(--space-2xl) var(--page-gutter) var(--space-xl); border-top:var(--rule-hair) solid var(--color-rule); background:var(--color-paper)}
.foot__vnitrek{max-width:var(--sirka); margin-inline:auto; display:grid; gap:var(--space-lg)}
.foot__veta{font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem, 4.4vw, 3.1rem); line-height:1.05; letter-spacing:-.02em; max-width:26ch; margin:0; color:var(--color-ink); text-transform:lowercase}
.foot__veta em{font-style:normal; color:var(--color-accent)}
.foot__meta{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:var(--space-md); padding-block-start:var(--space-md); border-top:var(--rule-hair) solid var(--color-rule); font-size:var(--text-sm); color:var(--color-muted)}
.foot__meta h3{font-family:var(--font-label); font-size:var(--text-micro); font-weight:500; letter-spacing:var(--tracking-micro); text-transform:uppercase; color:var(--color-faint); margin-block-end:var(--space-xs)}
.foot__meta ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.foot__meta a{color:var(--color-muted); text-decoration:none}
.foot__meta a:hover{color:var(--color-accent-strong)}
.foot__pata{display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-md); justify-content:space-between; align-items:baseline; padding-block-start:var(--space-md); border-top:var(--rule-hair) solid var(--color-rule); font-size:var(--text-xs); color:var(--color-faint)}

/* ---------- Reveal ---------- */
/* Reveal se aktivuje jen tam, kde skripty bezi. Bez toho by .reveal{opacity:0}
   drzelo obsah neviditelny do doby, nez dobehne defer skript (FOUC a riziko LCP).
   Starsi prohlizec bez podpory (scripting) proste ukaze obsah rovnou, coz je spravny fallback. */
@media (scripting: enabled){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out)}
}
.reveal.videt{opacity:1; transform:none}
.reveal[data-zpozdeni="1"]{transition-delay:60ms}
.reveal[data-zpozdeni="2"]{transition-delay:120ms}
.reveal[data-zpozdeni="3"]{transition-delay:180ms}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- Poradna: rozcestnik ---------- */
.filtr{display:flex; flex-wrap:wrap; gap:8px; margin-block:var(--space-md) var(--space-lg); padding:0; list-style:none}
.filtr__chip{
  font-family:var(--font-label); font-size:var(--text-micro); font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 14px; min-height:36px; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-muted); border:var(--rule-hair) solid var(--color-rule); cursor:pointer;
  transition:color var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
.filtr__chip:hover{color:var(--color-ink); border-color:var(--color-rule-2)}
.filtr__chip[aria-pressed="true"]{background:var(--color-accent-wash-2); color:var(--color-accent-strong); border-color:var(--color-accent)}
.poradna-mrizka{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:var(--space-sm)}
.pclanek{
  display:flex; flex-direction:column; gap:10px; padding:var(--space-md);
  border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-md);
  background:radial-gradient(120% 90% at 50% 0%, var(--color-accent-wash) 0%, transparent 60%), var(--color-paper-2);
  text-decoration:none; transition:transform var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
.pclanek:hover{transform:translateY(-4px); border-color:var(--color-rule-2)}
.pclanek h3{font-size:var(--text-xl); margin:0; color:var(--color-ink)}
.pclanek:hover h3{color:var(--color-accent-strong)}
.pclanek p{color:var(--color-muted); font-size:var(--text-sm); margin:0; flex:1}
.pclanek__meta{display:flex; gap:10px; align-items:center; color:var(--color-faint)}
.pocet-vysledku{color:var(--color-faint); font-size:var(--text-sm)}

/* ---------- Poradna: clanek ---------- */
.clanek-hlava{position:relative; padding-block:calc(var(--space-3xl) + 20px) var(--space-lg); border-bottom:var(--rule-hair) solid var(--color-rule);
  background:
    radial-gradient(50% 40% at 80% 10%, var(--color-paper-emit) 0%, transparent 65%);
}
.clanek-hlava h1{font-size:clamp(2rem, 3.6vw + .8rem, 3.4rem); max-width:22ch; text-transform:lowercase}
.clanek-hlava .lede{font-size:var(--text-xl)}
.clanek-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-block-start:var(--space-md); color:var(--color-faint)}
.clanek-telo{max-width:var(--sirka-cteni); margin-inline:auto; padding-block:var(--space-xl); font-size:1.125rem; line-height:1.75}
.clanek-telo h2{font-size:var(--text-3xl); margin-block:1.6em .5em; text-transform:lowercase}
.clanek-telo h3{font-size:var(--text-xl); margin-block:1.5em .4em}
.clanek-telo p, .clanek-telo li{color:var(--color-ink-2)}
.clanek-telo ul, .clanek-telo ol{padding-inline-start:1.3em; margin-block:0 1.2em}
.clanek-telo li{margin-block-end:.4em}
.clanek-telo li::marker{color:var(--color-accent)}
.clanek-telo blockquote{margin:1.4em 0; padding:var(--space-sm) var(--space-md); border-inline-start:2px solid var(--color-accent); background:var(--color-paper-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--color-muted)}
.clanek-telo table{font-size:var(--text-sm)}
.ramecek{
  margin:1.6em 0; padding:var(--space-md); box-shadow:var(--stin-karta);
  border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-md);
  background:radial-gradient(120% 90% at 50% 0%, var(--color-accent-wash) 0%, transparent 60%), var(--color-paper-2);
}
.ramecek > .mono-label{display:block; margin-block-end:var(--space-xs); color:var(--color-accent)}
.ramecek p:last-child{margin-bottom:0}
.clanek-pata{max-width:var(--sirka-cteni); margin-inline:auto; padding-block:var(--space-lg) var(--space-2xl); display:grid; gap:var(--space-lg)}
.sousedi{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:var(--space-sm)}
.zpet-radek{margin-block-start:var(--space-md)}

/* ---------- Widgety v clancich ---------- */
.widget{margin:1.8em 0; padding:var(--space-md); border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-md);
  background:radial-gradient(120% 90% at 50% 0%, var(--color-accent-wash) 0%, transparent 55%), var(--color-paper-2)}
.widget__hlava{display:flex; justify-content:space-between; gap:var(--space-sm); align-items:baseline; margin-block-end:var(--space-sm); flex-wrap:wrap}
.widget__hlava .mono-label{color:var(--color-accent)}
.widget__pozn{font-size:var(--text-xs); color:var(--color-faint); margin-block-start:var(--space-sm)}
.widget .radek{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-sm); align-items:center; padding-block:10px; border-top:var(--rule-hair) solid var(--color-rule)}
.widget .radek:first-of-type{border-top:0}
.widget output, .widget .vysledek{font-family:var(--font-label); color:var(--color-accent-strong); font-weight:500; font-variant-numeric:tabular-nums}
.widget input[type="range"]{width:100%; accent-color:var(--color-accent); min-height:24px}
.widget input[type="number"], .widget select{
  padding:8px 10px; min-height:40px; background:var(--color-paper); color:var(--color-ink);
  border:var(--rule-hair) solid var(--color-rule-2); border-radius:var(--radius-sm); font:inherit; max-width:130px;
}
.widget .velky-vysledek{font-family:var(--font-display); font-size:var(--text-3xl); color:var(--color-ink); margin-block:var(--space-xs)}
.widget .velky-vysledek b{color:var(--color-accent); font-weight:400}
.widget .check{display:flex; gap:10px; align-items:flex-start; padding-block:8px; border-top:var(--rule-hair) solid var(--color-rule)}
.widget .check:first-of-type{border-top:0}
.widget .check input[type="checkbox"]{width:20px; height:20px; margin-top:2px; accent-color:var(--color-accent); flex:none}
.widget .check label{cursor:pointer}
.widget .check .splneno{text-decoration:line-through; color:var(--color-faint)}
.widget .strom-krok p{font-weight:600; color:var(--color-ink)}
.widget .strom-volby{display:flex; flex-wrap:wrap; gap:8px}
.widget .strom-volby button, .widget .kviz-volba{
  padding:10px 16px; min-height:44px; border-radius:var(--radius-sm);
  background:var(--color-paper); color:var(--color-ink-2); border:var(--rule-hair) solid var(--color-rule-2);
  cursor:pointer; font:inherit; font-weight:600; transition:color var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft); text-align:left;
}
.widget .strom-volby button:hover, .widget .kviz-volba:hover{border-color:var(--color-accent); color:var(--color-ink)}
.widget .kviz-volba[aria-pressed="true"]{background:var(--color-accent-wash-2); border-color:var(--color-accent); color:var(--color-accent-strong)}
.widget .lišta{height:8px; background:var(--color-paper); border-radius:var(--radius-pill); overflow:hidden; border:var(--rule-hair) solid var(--color-rule)}
.widget .lišta > span{display:block; height:100%; background:var(--color-accent); border-radius:var(--radius-pill); transition:width var(--dur-4) var(--ease-out)}
.widget noscript p{color:var(--color-muted)}

/* ---------- Drobky, stitky ---------- */
.drobky{font-size:var(--text-xs); color:var(--color-faint); display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0; margin:0 0 var(--space-md); list-style:none}
.drobky a{color:var(--color-faint); text-decoration:none; display:inline-block; padding-block:5px}
.drobky a:hover{color:var(--color-accent-strong)}
.drobky li + li::before{content:"›"; margin-inline-end:6px; color:var(--color-faint)}

/* ---------- CTA pas ---------- */
.cta-pas{
  border-block:var(--rule-hair) solid var(--color-rule);
  background:
    radial-gradient(70% 120% at 50% 130%, var(--color-paper-emit) 0%, transparent 60%),
    var(--color-paper-2);
  text-align:center; padding:var(--space-2xl) var(--page-gutter);
}
.cta-pas h2{font-size:var(--text-display-s); max-width:20ch; margin-inline:auto; text-transform:lowercase}
.cta-pas p{color:var(--color-muted); max-width:48ch; margin-inline:auto}
.cta-pas .cta{margin-block-start:var(--space-md)}

/* ---------- Pomocne ---------- */
.stred{text-align:center}
.stred .titulek, .stred .lede{margin-inline:auto}
.max-cteni{max-width:var(--sirka-cteni)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.mezera-md{margin-block-start:var(--space-md)}
.mezera-lg{margin-block-start:var(--space-lg)}
.mezera-xl{margin-block-start:var(--space-xl)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .dum-tok{opacity:0 !important}
  .titulek em::after{animation:none}
}

/* ---------- Tisk (clanky svetle) ---------- */
@media print{
  body{background:#fff; color:#111}
  .nav-pill, .foot, .cta-pas, .sceny, .meter, .skip-link, .zpet-radek, .sousedi{display:none !important}
  a{color:#111; text-decoration:underline}
  .clanek-telo, .clanek-hlava{background:#fff; color:#111}
  .clanek-hlava h1, .clanek-telo h2, .clanek-telo h3, .clanek-telo p, .clanek-telo li{color:#111}
  .ramecek, .widget{border:1px solid #999; background:#fff}
}


/* ---------- Spec list (misto dlazdicoveho pole karet) ---------- */
.spec-list{display:grid; gap:0; border-block:var(--rule-hair) solid var(--color-rule-2); margin-block-start:var(--space-lg)}
.spec-list > div{
  display:grid; grid-template-columns:minmax(140px, 1fr) minmax(0, 3fr); gap:var(--space-md);
  padding-block:var(--space-md); border-top:var(--rule-hair) solid var(--color-rule);
}
.spec-list > div:first-child{border-top:0}
.spec-list dt{font-family:var(--font-label); font-size:var(--text-micro); font-weight:500; letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--color-accent); margin:0; padding-top:4px}
.spec-list dd{margin:0}
.spec-list dd b{display:block; color:var(--color-ink); font-family:var(--font-display); font-weight:400;
  font-size:var(--text-2xl); line-height:1.2; margin-block-end:6px; text-transform:lowercase}
.spec-list dd span{color:var(--color-muted); font-size:var(--text-sm)}
@media (max-width: 640px){
  .spec-list > div{grid-template-columns:minmax(0,1fr); gap:var(--space-2xs)}
}

/* ---------- Marnice platforem (vypnute cloudy jako dukaz, ne poznamka pod carou) ---------- */
.marnice{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-block:var(--rule-hair) solid var(--color-rule-2); margin-block-start:var(--space-xl);
}
.marnice > div{padding:var(--space-md); border-inline-start:var(--rule-hair) solid var(--color-rule)}
.marnice > div:first-child{border-inline-start:0}
.marnice .rok{font-family:var(--font-display); font-size:var(--text-3xl); color:var(--color-faint); line-height:1;
  font-variant-numeric:tabular-nums; display:block}
.marnice .kdo{font-family:var(--font-label); font-size:var(--text-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--color-muted); display:block; margin-block-start:8px}
.marnice__popis{grid-column:1 / -1; padding:var(--space-sm) var(--space-md); border-top:var(--rule-hair) solid var(--color-rule);
  color:var(--color-muted); font-size:var(--text-sm); margin:0}

/* ---------- Varianty komponent (misto inline patchovani v HTML) ---------- */
.karty--dve{grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr))}
.krok--drobny{padding-block:14px}
.krok--drobny .krok__num{font-size:var(--text-xl)}
.krok--drobny p{margin:0}
.split--kontakt{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width: 860px){ .split--kontakt{grid-template-columns:minmax(0,1fr)} }
.karta--kontakt{margin-block-end:var(--space-sm)}
.karta--kontakt h3{margin-block-end:4px}
.karta--kontakt h3 a{text-decoration:none}

/* Ovladace, ktere bez JavaScriptu nic nedelaji, se ani nezobrazuji. Fokusovatelne
   tlacitko, po kterem se nic nestane, je horsi nez zadne (nalez validation). */
@media not (scripting: enabled){
  .sceny, #poradna-filtr, .pocet-vysledku{display:none}
}


/* ---------- Hexagonove pole a kurzorovy reflektor ----------
   Prevzato z puvodni coming-soon stranky (Otakar: „libilo se mi pozadi
   z puvodni stranky, hexagony a pri pohybu mysi reflektor"). Vcelí plast je
   znacka Bee Workers, takze to nese identitu, ne jen dekoraci.
   Sedi POD blueprint mrizkou hera: mrizka je technicka linka, hexagony jsou
   material. Nikdy nesmi prekryt obsah (z-index 0, obsah 2). */
.hexpole{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:0; animation:hexNaběh 1.6s var(--ease-out) .15s forwards;
}
@keyframes hexNaběh{to{opacity:.62}}
.hexpole .bunka{
  fill:transparent; stroke:var(--color-rule); stroke-width:1;
  transform-origin:center; transform-box:fill-box;
  animation-name:hexPuls; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes hexPuls{
  0%, 100%{fill:transparent; stroke:var(--color-rule)}
  50%     {fill:var(--color-accent-wash); stroke:var(--color-accent-wash-2)}
}
@media (prefers-reduced-motion: no-preference){
  .hexpole .bunka{stroke-width:.85}
}
.reflektor{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 40%),
    oklch(76% 0.17 50 / 0.20), oklch(76% 0.17 50 / 0.05) 9%, transparent 20%);
  opacity:0; transition:opacity var(--dur-4) var(--ease-soft);
}
body.pripraveno .reflektor{opacity:1}
/* Vsechen obsah plave nad polem. Sekce dostavaji pozadi papiru jen tam, kde
   by pole rusilo cteni dlouheho textu (telo clanku, tabulky, formular). */
main, .foot{position:relative; z-index:2}
/* navigace drzi svou vlastni hladinu (40), nesmi se srovnat s obsahem */
.nav-pill{z-index:40}
.meter, .cta-pas, .staty{position:relative; z-index:2}
.clanek-telo, .clanek-pata{position:relative; z-index:2}
@media (prefers-reduced-motion: reduce){
  .hexpole{animation:none; opacity:1}
  .hexpole .bunka{animation:none}
  .reflektor{display:none}
}

/* Zavoj pod dlouhym textem: plastev je material pozadi, ne vzor pres pismo.
   Karty a ramecky maji vlastni papir uz z designu, telo clanku dostane zavoj
   s pruhlednosti, aby plastev zustala citelna po okrajich. */
.clanek-telo{
  background-color:oklch(13% 0.014 265 / 0.90);
  padding-inline:clamp(14px, 2vw, 30px);
  border-radius:var(--radius-md);
}
.meter{background-color:oklch(13% 0.014 265 / 0.92)}
.cta-pas{background-color:oklch(16.5% 0.016 265 / 0.92)}
.staty{background-color:oklch(16.5% 0.016 265 / 0.92)}
.foot{background-color:oklch(13% 0.014 265 / 0.94)}

/* Otevrene menu zamyka rolovani stranky. Driv se dalo scrollovat pod nim
   a menu zustalo viset nad ujizdejicim obsahem (nalez mobilniho auditu). */
body.menu-otevrene{overflow:hidden}

/* Dotykove plochy: WCAG 2.5.8 zada aspon 24x24, cil je 44x44 */
.widget .check input[type="checkbox"]{width:24px; height:24px}
.widget input[type="range"]{min-height:44px}
.scena-chip, .filtr__chip{min-height:44px}
.foot__meta a, .foot__pata a{display:inline-block; padding-block:6px}

/* Vodorovne scrollovatelna tabulka musi jit ovladat i klavesnici */
.tabulka-obal:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}


/* ---------- Osa faze x naklad (chytra-domacnost) ----------
   Nalez design-critica: podstranky byly ozvenou uvodni stranky, stejny skelet
   hero -> mrizka karet -> mrizka karet -> split -> kroky -> FAQ -> CTA. Tahle
   stranka argumentuje CASEM ("cim driv, tim levneji"), takze dostava vlastni
   patefr: kreslenou osu, kde se s fazi stavby zvedaji naklady. */
.osa{position:relative; margin-block-start:var(--space-xl)}
.osa__cara{
  position:absolute; left:0; right:0; top:38px; height:1px;
  background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 78%, var(--color-warn) 100%);
  opacity:.55;
}
.osa__body{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-md); position:relative}
.osa__bod{padding-block-start:64px; position:relative}
.osa__bod::before{
  content:""; position:absolute; top:31px; left:0; width:15px; height:15px; border-radius:50%;
  background:var(--color-paper); border:2px solid var(--color-accent);
}
.osa__bod--stred::before{border-color:var(--color-accent-2)}
.osa__bod--pozde::before{border-color:var(--color-warn)}
.osa__faze{font-family:var(--font-label); font-size:var(--text-micro); font-weight:500;
  letter-spacing:var(--tracking-micro); text-transform:uppercase; color:var(--color-accent); display:block}
.osa__bod--stred .osa__faze{color:var(--color-accent-2)}
.osa__bod--pozde .osa__faze{color:var(--color-warn)}
.osa__naklad{font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-ink);
  line-height:1.15; margin-block:6px 8px; display:block; text-transform:lowercase}
.osa__bod p{color:var(--color-muted); font-size:var(--text-sm); margin:0}
.osa__pozn{margin-block-start:var(--space-md); color:var(--color-faint); font-size:var(--text-xs)}
@media (max-width: 760px){
  .osa__cara{left:7px; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-2) 78%, var(--color-warn) 100%)}
  .osa__body{grid-template-columns:minmax(0,1fr); gap:var(--space-lg)}
  .osa__bod{padding-block-start:0; padding-inline-start:34px}
  .osa__bod::before{top:4px; left:0}
}

/* ---------- Casova osa terminu (pro-developery) ----------
   Termíny byly pohrbene ve tretim sloupci tabulky. Jako osa je videt poradi
   i to, co uz plati dnes. Tabulka pod ni zustava jako detail. */
.terminy{list-style:none; margin:var(--space-lg) 0 0; padding:0; position:relative}
.terminy::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--color-rule-2)}
.terminy li{position:relative; padding:0 0 var(--space-md) 30px}
.terminy li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--color-paper); border:2px solid var(--color-rule-2);
}
.terminy li.plati::before{border-color:var(--color-accent); background:var(--color-accent)}
.terminy li.neplati::before{border-style:dashed; background:transparent}
.terminy .kdy{font-family:var(--font-label); font-size:var(--text-micro); font-weight:500;
  letter-spacing:var(--tracking-micro); text-transform:uppercase; color:var(--color-muted); display:block}
.terminy li.plati .kdy{color:var(--color-accent)}
.terminy .co{color:var(--color-ink-2); display:block; margin-block-start:4px}
.terminy .co b{color:var(--color-ink)}