/* Rozvaděče MR – styl. Bez externích fontů a CDN, everything local. */
:root{
  --bg:#f4f7fb; --panel:#ffffff; --ink:#101826; --ink-2:#1b2637; --muted:#5b6776;
  --line:#dde5ee; --line-2:#eef3f8;
  --accent:#0b7fb8; --accent-2:#0ea5e9; --accent-soft:#e4f2fa;
  --amber:#b45309; --amber-soft:#fdf1e3;
  --grid:rgba(11,127,184,.07);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 14px 34px -18px rgba(16,24,40,.18);
  --r:.95rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#080d16; --panel:#111a27; --ink:#e8eef6; --ink-2:#dbe4ef; --muted:#96a3b4;
    --line:#22303f; --line-2:#1a2532; --accent:#4bb8e8; --accent-2:#7dd3fc;
    --accent-soft:#12283a; --amber:#f0b46b; --amber-soft:#2a1f10;
    --grid:rgba(125,211,252,.06);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px -18px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800}
h2{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700}
h3{font-size:1.02rem;font-weight:650}
p{margin:.5rem 0}
a{color:var(--accent)}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.15rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:.5rem;background:var(--panel);padding:.5rem .8rem;border:1px solid var(--accent);border-radius:.5rem;z-index:20}

/* hlavička */
header.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-size:1rem;letter-spacing:-.01em;display:block;line-height:1.25}
.brand small{display:block;color:var(--muted);font-size:.72rem;line-height:1.25}
.nav-links{display:none;gap:.2rem;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.86rem;padding:.45rem .6rem;border-radius:.5rem}
.nav-links a:hover{background:var(--accent-soft);color:var(--accent)}
@media (min-width:56rem){.nav-links{display:flex}}
.tel{margin-left:auto;text-decoration:none;font-weight:650;font-size:.88rem;color:#fff;background:var(--accent);
  padding:.5rem .8rem;border-radius:.55rem;white-space:nowrap}
.tel:hover{background:var(--accent-2)}
@media (min-width:56rem){.tel{margin-left:0}}

/* hero */
.hero{padding:2.6rem 0 2.2rem}
.hero-grid{display:grid;gap:2rem}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center}}
.eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.lead{color:var(--muted);font-size:1.06rem;max-width:34rem}
ul.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:1.2rem 0 0}
ul.chips li{font-size:.8rem;padding:.32rem .7rem;border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--muted);display:inline-flex;align-items:center;gap:.45rem}
ul.chips li b{width:.45rem;height:.45rem;border-radius:99px;background:var(--accent-2);flex:none}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.btn{text-decoration:none;font-weight:650;font-size:.92rem;padding:.7rem 1.05rem;border-radius:.6rem;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* panel / cabinet ilustrace */
.shot{border:1px solid var(--line);border-radius:1rem;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.shot figcaption{border-top:1px solid var(--line);padding:.55rem .8rem;font-size:.76rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.shot svg{display:block;width:100%;height:auto}

/* sekce */
section{padding:2.4rem 0;border-top:1px solid var(--line)}
.sec-head{max-width:44rem;margin-bottom:1.2rem}
.sec-head .eyebrow{margin-bottom:.35rem;display:block}
.sec-head p{color:var(--muted)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:1.1rem;box-shadow:var(--shadow)}
.card .ico{width:2.1rem;height:2.1rem;border-radius:.55rem;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:.6rem}
.card .ico svg{width:1.2rem;height:1.2rem}
.card p{color:var(--muted);font-size:.9rem}
.card ul{margin:.6rem 0 0;padding-left:1.05rem;color:var(--muted);font-size:.86rem}
.card li{margin:.25rem 0}

/* proces */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:.7rem}
ol.steps li{counter-increment:s;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:1rem 1.1rem 1rem 3.4rem;position:relative;box-shadow:var(--shadow)}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.1rem;top:1rem;
  font-size:.9rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
ol.steps h3{margin:0}
ol.steps p{color:var(--muted);font-size:.9rem}
.hint{border:1px dashed var(--line);border-left:3px solid var(--accent);border-radius:.6rem;background:var(--panel);
  padding:.9rem 1.05rem;font-size:.9rem;color:var(--muted);margin-top:1rem}
.hint b{color:var(--ink)}

/* vizualizace demo */
.demo{display:grid;gap:1rem}
@media (min-width:52rem){.demo{grid-template-columns:1.15fr .85fr;align-items:start}}
.hmi{border:1px solid var(--line);border-radius:1rem;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.hmi-top{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);
  font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:.5rem;height:.5rem;border-radius:99px;background:#22c55e;flex:none}
.hmi-body{padding:.9rem;display:grid;gap:.7rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem}
.tile{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;background:var(--bg)}
.tile span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tile b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile i{font-style:normal;font-size:.8rem;color:var(--muted)}
.bar{height:.35rem;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:.4rem}
.bar i{display:block;height:100%;background:var(--accent-2);transition:width .9s linear}
.bars{border:1px solid var(--line);border-radius:.6rem;padding:.7rem;background:var(--bg)}
.bars svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--muted);padding:.4rem .1rem 0}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend s{width:1.1rem;height:.25rem;border-radius:2px;text-decoration:none;display:inline-block}

/* pripravuji */
.soon{border:1px dashed var(--line);border-radius:var(--r);background:var(--panel);padding:1.1rem}
.soon .tag{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--amber);background:var(--amber-soft);border-radius:.4rem;padding:.2rem .5rem;margin-bottom:.5rem}
.soon p{color:var(--muted);font-size:.9rem}

/* inzerce ucto / sesit */
.ad-grid{display:grid;gap:1rem}
@media (min-width:48rem){.ad-grid{grid-template-columns:1.35fr .65fr}}
.ad{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:1.15rem;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden}
.ad:hover{border-color:var(--accent)}
.ad .head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.ad code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--accent);
  background:var(--accent-soft);padding:.15rem .4rem;border-radius:.35rem}
.ad p{color:var(--muted);font-size:.9rem}
.ad .go{margin-top:.6rem;font-size:.85rem;font-weight:650;color:var(--accent)}
.spec{margin:.7rem 0 0;font-size:.88rem}
.spec div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dashed var(--line)}
.spec div:last-child{border-bottom:0}
.spec dt{color:var(--muted)}
.spec dd{margin:0;font-weight:600}

/* faq */
details{border:1px solid var(--line);border-radius:.7rem;background:var(--panel);padding:.85rem 1rem;margin-bottom:.5rem}
details summary{cursor:pointer;font-weight:650;font-size:.95rem;list-style:none;display:flex;gap:.6rem;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";color:var(--accent);font-weight:700;flex:none}
details[open] summary::before{content:"–"}
details p{color:var(--muted);font-size:.9rem;margin:.5rem 0 0}

/* kontakt */
.contact{display:grid;gap:1rem}
@media (min-width:48rem){.contact{grid-template-columns:1.1fr .9fr}}
.kv{margin:0;font-size:.95rem}
.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line-2)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;text-align:right}
.vat{margin-top:.9rem;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:.6rem;
  background:var(--amber-soft);padding:.8rem 1rem;font-size:.88rem;color:var(--ink)}
/* formulář poptávky */
.form-card{padding:1.3rem 1.2rem}
.form-note{font-size:.9rem;color:var(--muted);margin:.35rem 0 1.1rem}
.fgrid{display:grid;gap:.9rem}
@media (min-width:42rem){.fgrid{grid-template-columns:1fr 1fr}}
.f{display:grid;gap:.35rem;font-size:.85rem;font-weight:650;color:var(--ink)}
.f b{color:var(--accent)}
.f.wide{grid-column:1 / -1}
.f input,.f select,.f textarea{
  font:inherit;font-size:.95rem;font-weight:400;padding:.62rem .75rem;border:1px solid var(--line);
  border-radius:.55rem;background:var(--line-2);color:var(--ink);width:100%;
  -webkit-appearance:none;appearance:none
}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 1.05rem,calc(100% - .78rem) 1.05rem;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.1rem}
.f textarea{resize:vertical;min-height:7rem;line-height:1.55;font-weight:400}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);background:var(--panel)}
.f input:user-invalid,.f select:user-invalid,.f textarea:user-invalid{border-color:#c2410c;background:var(--amber-soft)}
.fbot{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;margin-top:1rem}
.fbot .hint{border:0;padding:0;background:none;margin:0;font-size:.82rem;flex:1 1 16rem}
.bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-msg{margin:.8rem 0 0;font-size:.92rem;font-weight:650}
.form-msg[data-state="ok"]{color:#15803d}
.form-msg[data-state="err"]{color:#b91c1c}
button[disabled]{opacity:.55;cursor:progress}

footer{border-top:1px solid var(--line);padding:1.4rem 0 2.4rem;font-size:.82rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between}
footer a{color:var(--muted)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ukázka výkresů – výkres je list papíru, proto bílý i v tmavém režimu */
.vykresy{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:56rem){.vykresy{grid-template-columns:1fr 1fr}}
.vykres{margin:0}
.vykres a{display:block;background:#fff}
.vykres img{display:block;width:100%;height:auto}
.vykres a:hover{outline:2px solid var(--accent);outline-offset:-2px}
.vykres a{cursor:zoom-in}
/* lupa – zvětšený výkres přes celou obrazovku */
.lupa{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:2vmin;
  background:rgba(8,13,22,0);transition:background .3s ease;cursor:zoom-out}
.lupa.lupa-otevrena{background:rgba(8,13,22,.82)}
.lupa img{max-width:96vw;max-height:94vh;width:auto;height:auto;background:#fff;border-radius:.4rem;
  box-shadow:0 20px 60px rgba(0,0,0,.45);transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lupa-zavrit{position:fixed;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:0;
  background:#fff;color:#101826;font-size:1.6rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s}
.lupa.lupa-otevrena .lupa-zavrit{opacity:1}
.card.zdarma{border-color:var(--accent)}
.card.zdarma .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.15rem .6rem;margin-bottom:.4rem}
.card.zdarma .cta{margin:.8rem 0 1rem}