/* Sklenářství Vodháněl — světlá verze */

:root{
  --paper:#ffffff;
  --paper-2:#f2f6fa;
  --paper-3:#e7eef5;
  --ink:#12232f;
  --ink-2:#33505f;
  --muted:#6d8595;
  --line:#dfe8f0;
  --line-2:#c8d8e6;
  --blue:#3d8dbf;
  --blue-dk:#22688f;
  --blue-lt:#e8f2f9;
  --sky:#7fbde3;
  --r:14px;
  --maxw:1180px;
  --ff:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Playfair Display',Georgia,'Times New Roman',serif;
  --sh:0 1px 2px rgba(18,35,47,.04),0 8px 24px rgba(18,35,47,.06);
  --sh-lg:0 2px 4px rgba(18,35,47,.04),0 24px 60px rgba(18,35,47,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff);
  font-size:16.5px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
section{padding:clamp(56px,7vw,96px) 0}
.tint{background:var(--paper-2)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 6px 24px rgba(18,35,47,.07)}
.hdr-top{display:flex;align-items:center;gap:20px;padding:16px 0 14px}
.hdr-logo img{height:54px;width:auto}
.hdr-claim{margin-left:auto;display:flex;align-items:center;gap:22px}
.hdr-claim img{height:52px;width:auto;opacity:.9}
.hdr-tel{display:flex;flex-direction:column;line-height:1.3;text-align:right;flex-shrink:0}
.hdr-tel small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hdr-tel b{font-size:19px;font-weight:700;color:var(--blue-dk);letter-spacing:-.01em}
.hdr-tel b:hover{color:var(--blue)}

.navbar{border-top:1px solid var(--line);display:flex;align-items:center}
.nav{display:flex;flex-wrap:wrap;align-items:stretch}
.nav > a,.has-sub > a{display:block;padding:15px 20px;font-size:14px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--ink-2);transition:.2s;position:relative;white-space:nowrap}
.nav > a::after,.has-sub > a::after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav > a:hover::after,.has-sub:hover > a::after,.nav > a.on::after{transform:scaleX(1)}
.nav > a:hover,.has-sub:hover > a,.nav > a.on{color:var(--blue-dk)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:0;min-width:280px;padding:8px;background:#fff;
  border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;z-index:5}
.has-sub:hover .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:11px 16px;border-radius:8px;font-size:14.5px;color:var(--ink-2)}
.sub a:hover{background:var(--blue-lt);color:var(--blue-dk)}
.nav-cta{margin-left:auto;padding:8px 0 8px 16px}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);background:#fff;
  border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:2px;
  background:var(--ink);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid transparent;border-radius:6px;cursor:pointer;transition:.25s;white-space:nowrap;font-family:var(--ff)}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(61,141,191,.28)}
.btn-p:hover{background:var(--blue-dk);transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,104,143,.32)}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-o:hover{border-color:var(--blue);color:var(--blue-dk);background:var(--blue-lt)}
.btn-w{background:#fff;color:var(--blue-dk)}
.btn-w:hover{background:var(--blue-lt);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:12.5px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--paper-2)}
.hero-img{position:relative;height:clamp(340px,52vw,620px);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 35%,rgba(255,255,255,.35) 100%)}
.hero-card{position:relative;margin:-96px auto 0;max-width:920px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);
  padding:clamp(30px,4vw,52px);box-shadow:var(--sh-lg);text-align:center;z-index:2}
.hero-card h1{font-size:clamp(1.75rem,4.2vw,2.9rem)}
.hero-card h1 span{color:var(--blue-dk)}
.hero-card p{color:var(--ink-2);margin-top:20px;font-size:1.02rem;max-width:62ch;margin-inline:auto}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.hero-claim{display:block;margin:0 auto 22px;height:64px;width:auto;opacity:.88}

/* ---------- section head ---------- */
.sh{max-width:760px;margin-bottom:clamp(32px,4.5vw,52px)}
.sh.center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.kicker::before{content:'';width:26px;height:1.5px;background:var(--blue)}
.sh.center .kicker::after{content:'';width:26px;height:1.5px;background:var(--blue)}
.sh h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.sh p{color:var(--muted);margin-top:16px}
.rule{width:56px;height:3px;background:var(--blue);margin-top:20px;border-radius:2px}
.sh.center .rule{margin-inline:auto}

/* ---------- nabídka (seznam služeb) ---------- */
.offer{column-count:3;column-gap:40px}
.offer li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;break-inside:avoid;
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.offer li::before{content:'';flex-shrink:0;width:11px;height:11px;margin-top:8px;
  background:linear-gradient(135deg,var(--sky),var(--blue));transform:rotate(45deg);border-radius:2px}
.offer li.last{border-bottom:0;color:var(--muted);font-style:italic}
.offer li.last::before{opacity:.4}

/* ---------- cards ---------- */
.cards{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.35s;display:flex;flex-direction:column;box-shadow:var(--sh)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.7s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.06)}
.card-b{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.card-b h3{font-size:1.28rem}
.card-b p{color:var(--muted);font-size:14.5px;margin-top:10px;flex:1;line-height:1.65}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dk)}
.card-link svg{transition:.25s}
.card:hover .card-link svg{transform:translateX(5px)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-media::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.5);border-radius:var(--r);pointer-events:none}
.split h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}

/* ---------- prose ---------- */
.prose p{color:var(--ink-2);margin-top:18px;line-height:1.78}
.prose h3{margin-top:34px;font-size:1.3rem}
.prose > p:first-child{margin-top:0}
.prose ul:not(.offer):not(.chk){margin-top:18px;display:grid;gap:11px}
.prose ul:not(.offer):not(.chk) li{padding-left:24px;position:relative;color:var(--ink-2);font-size:15.5px}
.prose ul:not(.offer):not(.chk) li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:9px;
  background:linear-gradient(135deg,var(--sky),var(--blue));transform:rotate(45deg);border-radius:2px}
.chk{margin-top:24px;display:grid;gap:12px}
.chk li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.chk li::before{content:'';flex-shrink:0;width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--blue-lt);border:1px solid var(--sky);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322688f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.note{margin-top:26px;padding:20px 24px;border-radius:var(--r);background:var(--blue-lt);
  border-left:3px solid var(--blue);color:var(--ink-2);font-size:15px}

/* ---------- steps ---------- */
.steps{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.step{position:relative;padding:30px 26px 28px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--fd);
  font-size:2.4rem;font-weight:600;color:var(--sky);display:block;margin-bottom:10px;line-height:1}
.step h3{font-size:1.08rem}
.step p{color:var(--muted);font-size:14.5px;margin-top:9px}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px;justify-content:center}
.filters button{padding:11px 22px;border-radius:99px;background:#fff;border:1px solid var(--line-2);
  color:var(--ink-2);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:.25s;font-family:var(--ff)}
.filters button:hover{border-color:var(--blue);color:var(--blue-dk)}
.filters button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.gal{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gal figure{margin:0;position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;cursor:zoom-in;
  background:var(--paper-3);box-shadow:var(--sh);transition:.32s}
.gal figure:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.gal img{width:100%;height:100%;object-fit:cover;transition:.55s}
.gal figure:hover img{transform:scale(1.07)}
.gal figure::after{content:'';position:absolute;inset:0;border:2px solid var(--blue);
  border-radius:10px;opacity:0;transition:.3s}
.gal figure:hover::after{opacity:1}
.gal-more{text-align:center;margin-top:36px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(240,246,251,.97);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:88vh;border-radius:8px;box-shadow:0 30px 80px rgba(18,35,47,.3)}
.lb-x,.lb-p,.lb-n{position:absolute;width:50px;height:50px;border-radius:50%;background:#fff;
  border:1px solid var(--line-2);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-size:22px;transition:.2s;box-shadow:var(--sh)}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.lb-x{top:24px;right:24px}
.lb-p{left:22px;top:50%;transform:translateY(-50%)}
.lb-n{right:22px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:13px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
thead th{background:var(--blue-lt);padding:14px;text-align:left;font-weight:700;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--blue-dk);border-bottom:1px solid var(--line)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--paper-2)}
/* Poslední sloupec býval zarovnaný doprava, zatímco zbylých sedm doleva —
   v ceníku akvárií to bilo do očí („Krycí sklo (Kč)" uteklo na kraj).
   Všechny sloupce teď drží stejnou hranu. */
tbody td{font-variant-numeric:tabular-nums}
.price{color:var(--blue-dk);font-weight:700}

/* ---------- pdf ---------- */
/* min(300px,100%): bez toho drží sloupec 300 px i v užším kontejneru
   a na 320px displeji katalogy přetékaly ven ze stránky */
.pdfs{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.pdf{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:10px;background:#fff;
  border:1px solid var(--line);transition:.25s;font-size:14.5px;color:var(--ink-2);box-shadow:var(--sh)}
.pdf:hover{border-color:var(--blue);color:var(--blue-dk);transform:translateX(3px)}
.pdf svg{width:20px;height:20px;flex-shrink:0;stroke:var(--blue);fill:none;stroke-width:1.7}
.pdf span{color:var(--muted);font-size:12px;margin-left:auto;flex-shrink:0}
.pdf-grp{margin-top:38px}
.pdf-grp h3{font-size:1.2rem;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(38px,5.5vw,66px);
  text-align:center;background:linear-gradient(135deg,var(--blue-dk),var(--blue));box-shadow:var(--sh-lg)}
.cta::before{content:'';position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:44px 44px;transform:skewY(-4deg) scale(1.3)}
.cta > *{position:relative}
.cta h2{color:#fff;font-size:clamp(1.4rem,2.9vw,2.1rem);letter-spacing:.01em;line-height:1.35}
.cta p{color:rgba(255,255,255,.88);margin-top:16px;max-width:58ch;margin-inline:auto}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* ---------- page hero ---------- */
.ph{position:relative;padding:clamp(44px,6vw,76px) 0 clamp(28px,3.5vw,44px);
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:16px;letter-spacing:.03em}
.crumb a:hover{color:var(--blue-dk)}
.ph h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.ph p{color:var(--ink-2);margin-top:18px;max-width:68ch}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,52px);align-items:start}
.ct-card{padding:32px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ct-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
.ct-row:last-child{border:0;padding-bottom:0}
.ct-row svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.7;flex-shrink:0;margin-top:4px}
.ct-row small{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.ct-row b{font-weight:600;font-size:16px;color:var(--ink)}
.ct-row a:hover{color:var(--blue-dk)}

form{padding:32px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px;letter-spacing:.03em}
.fld input,.fld textarea,.fld select{width:100%;padding:13px 15px;border-radius:8px;background:var(--paper-2);
  border:1px solid var(--line-2);color:var(--ink);font-family:inherit;font-size:15px;transition:.2s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(61,141,191,.14)}
.fld textarea{resize:vertical;min-height:130px}
form .btn{width:100%;margin-top:6px}
.f-note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}
.f-ok{display:none;padding:16px;border-radius:10px;background:var(--blue-lt);border:1px solid var(--sky);
  color:var(--blue-dk);font-size:14.5px;text-align:center;margin-bottom:18px}
.f-ok.show{display:block}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-top:22px;line-height:0;box-shadow:var(--sh)}
.map iframe{width:100%;height:310px;border:0}

/* ---------- footer ---------- */
footer{background:#0f1f2a;color:#c3d3de;padding:clamp(46px,6vw,70px) 0 28px;margin-top:0}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ft-logo{background:#fff;padding:12px 16px;border-radius:8px;display:inline-block}
.ft-logo img{height:40px;width:auto}
.ft p{color:#8ba4b4;font-size:14.5px;margin-top:18px;max-width:36ch;line-height:1.7}
.ft h4{font-size:12px;font-family:var(--ff);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:18px}
.ft li{margin-bottom:10px}
.ft a{color:#8ba4b4;font-size:14.5px;transition:.2s}
.ft a:hover{color:var(--sky)}
.ft-b{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#6b8496}

/* mobile action bar */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:9px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(18,35,47,.08)}
.mbar .btn{flex:1;padding:13px 14px}

/* reveal */
/* 0,7 s + zpoždění vlny dělalo až 1,2 s, než se dlaždice ukázala — vypadalo to,
   že se fotky načítají pomalu, i když byly dávno stažené. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .34s cubic-bezier(.2,.7,.3,1),transform .34s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (scripting:none){.rv{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1050px){
  .navbar{display:none}
  .navbar.open{display:block;position:fixed;inset:0;top:0;background:#fff;z-index:200;
    overflow-y:auto;padding:80px 20px 40px;border:0}
  .navbar.open .nav{flex-direction:column;align-items:stretch}
  .navbar.open .nav > a,.navbar.open .has-sub > a{padding:15px 12px;font-size:15px;border-bottom:1px solid var(--line)}
  .navbar.open .nav > a::after,.navbar.open .has-sub > a::after{display:none}
  .navbar.open .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0 0 8px 14px;min-width:0}
  .navbar.open .nav-cta{margin:18px 0 0;padding:0}
  .navbar.open .nav-cta .btn{width:100%}
  .burger{display:flex;position:relative;z-index:210}
  .hdr-claim{display:none}
  /* minmax(0,…) — jinak dlouhé slovo (e-mail, adresa) roztáhne sloupec přes viewport */
  .split{grid-template-columns:minmax(0,1fr)}
  .split.rev .split-media{order:0}
  .ct{grid-template-columns:minmax(0,1fr)}
  .ft{grid-template-columns:1fr 1fr}
  .offer{column-count:2;column-gap:30px}
}
@media(max-width:720px){
  body{padding-bottom:70px}
  .mbar{display:flex}
  .hero-card{margin-top:-56px}
  .f-row{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr;gap:30px}
  .gal{grid-template-columns:1fr 1fr;gap:10px}
  .offer{column-count:1}
  .hdr-logo img{height:40px}
  .lb-p,.lb-n{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}


/* ============================================================
   SKLENĚNÁ VRSTVA — prostorové pozadí, průhlednost, odlesky
   ============================================================ */

html{background:#eef4fa}
body{background:transparent;position:relative}

/* světelná atmosféra na pozadí celého webu */
body::before{
  content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(920px 620px at 10% -8%, rgba(127,189,227,.34), transparent 62%),
    radial-gradient(860px 560px at 94% 4%, rgba(61,141,191,.20), transparent 64%),
    radial-gradient(760px 620px at 46% 108%, rgba(150,205,236,.26), transparent 62%),
    linear-gradient(178deg,#fcfdff 0%,#f3f8fc 42%,#e9f1f8 100%);
}

/* jemná technická mřížka, uprostřed silnější, ke krajům mizí */
body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(61,141,191,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,141,191,.09) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 22%,#000 0%,rgba(0,0,0,.5) 55%,transparent 82%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 22%,#000 0%,rgba(0,0,0,.5) 55%,transparent 82%);
}

/* plovoucí skleněné tabule — dekorace za obsahem */
.panes{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  perspective:1200px;contain:strict}
.pane{position:absolute;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(190,224,244,.16) 45%,rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 20px 60px rgba(61,141,191,.14),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  translate:0 var(--sy,0);
  animation:drift 26s ease-in-out infinite}
/* odlesk přes tabuli */
.pane::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.7) 47%,transparent 60%)}
.pane.p1{width:340px;height:460px;top:-70px;left:-90px;transform:rotate(-16deg) rotateY(16deg)}
.pane.p2{width:260px;height:340px;top:22%;right:-80px;transform:rotate(13deg) rotateY(-18deg);animation-delay:-9s}
.pane.p3{width:400px;height:250px;bottom:6%;left:-120px;transform:rotate(9deg) rotateX(14deg);animation-delay:-17s}
@keyframes drift{
  0%,100%{translate:0 0}
  50%{translate:0 -26px}
}

/* barevné pruhy sekcí nahradí prosklený panel */
.tint{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(232,242,249,.5));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85)}

/* ---------- sklo na kartách ---------- */
.card,.ct-card,form,.step,.tbl-wrap,.pdf,.gal figure{
  background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px rgba(28,68,96,.10)}
.card:hover,.pdf:hover{box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 60px rgba(28,68,96,.18)}

/* lom světla přes hranu karty při najetí */
.card{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.card::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  opacity:0;transition:opacity .5s}
.card:hover::before{opacity:1}

/* horní světelná hrana = odlesk na skle */
.card-b{position:relative}
.card-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 42%)}

/* ---------- hlavička jako matné sklo ---------- */
.hdr{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.9)}
.hdr.scrolled{box-shadow:0 10px 40px rgba(28,68,96,.13)}
.sub{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.9)}

/* ---------- hero s prostorovou hloubkou ---------- */
.hero{background:transparent}
.hero-img{border-radius:0 0 26px 26px}
.hero-img::after{
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 30%,rgba(238,244,250,.55) 100%)}
/* skleněná hrana pod fotkou */
.hero-img::before{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35));pointer-events:none}
.hero-card{
  background:linear-gradient(150deg,rgba(255,255,255,.80),rgba(255,255,255,.58));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 70px rgba(28,68,96,.18)}
.hero-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.5) 0%,transparent 38%)}

/* ---------- výzva k akci: prosklený modrý panel ---------- */
.cta{background:linear-gradient(135deg,rgba(34,104,143,.95),rgba(61,141,191,.92));
  box-shadow:0 30px 70px rgba(28,68,96,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.cta::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,transparent 42%)}

/* ---------- tlačítka s leskem ---------- */
.btn-p{background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  box-shadow:0 8px 24px rgba(61,141,191,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-o{background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.65));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.95);
  box-shadow:0 6px 20px rgba(28,68,96,.09)}

/* ---------- fotogalerie: sklo přes fotku ---------- */
.gal figure{border:1px solid rgba(255,255,255,.85)}
.split-media{box-shadow:0 30px 70px rgba(28,68,96,.20),inset 0 1px 0 rgba(255,255,255,.9)}
.split-media::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r);
  background:linear-gradient(125deg,rgba(255,255,255,.36) 0%,transparent 40%)}

/* ---------- odrážky jako skleněné střepy ---------- */
.offer li::before,.prose ul:not(.offer):not(.chk) li::before{
  background:linear-gradient(135deg,#fff,var(--sky) 40%,var(--blue));
  box-shadow:0 2px 6px rgba(61,141,191,.4),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- patička: přechod do hloubky ---------- */
footer{position:relative;
  background:linear-gradient(180deg,#12293a 0%,#0d1d29 100%)}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,189,227,.6),transparent)}

/* ---------- světlejší varianta pro slabší zařízení ---------- */
@supports not (backdrop-filter:blur(2px)){
  .card,.ct-card,form,.hero-card,.hdr,.tint{background:rgba(255,255,255,.94)}
}
@media(max-width:720px){
  .panes{display:none}
  body::after{opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  .pane{animation:none}
}


/* ============================================================
   NOVÉ ROZVRŽENÍ — jiná kompozice než původní web
   ============================================================ */

/* ---------- hlavička v jedné řadě ---------- */
.hdr-top{display:none}
.hdr-in{display:flex;align-items:center;gap:26px;padding:14px 0;min-height:78px}
.hdr-in .hdr-logo img{height:46px}
.hdr-in .nav{flex:1;justify-content:center;gap:2px}
.hdr-in .nav > a,.hdr-in .has-sub > a{padding:12px 14px;font-size:13px;letter-spacing:.07em}
.hdr-in .nav > a::after,.hdr-in .has-sub > a::after{left:14px;right:14px;bottom:6px}
.hdr-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.navbar{display:none}

/* ---------- hero: asymetrický, text vlevo, koláž vpravo ---------- */
.hero{padding:clamp(38px,5vw,72px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero-text .hero-claim{margin:0 0 24px;height:70px}
.hero-text h1{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.02em}
.hero-text h1 span{display:block;color:var(--blue-dk)}
.hero-text > p{color:var(--ink-2);margin-top:24px;font-size:1.06rem;max-width:54ch;
  padding-left:22px;border-left:2px solid var(--sky)}
.hero-text .hero-btns{justify-content:flex-start;margin-top:34px}

/* koláž ze tří tabulí skla */
.stack{position:relative;aspect-ratio:1/1;perspective:1400px}
.stack figure{position:absolute;margin:0;overflow:hidden;border-radius:16px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px rgba(28,68,96,.22),inset 0 1px 0 rgba(255,255,255,.9)}
.stack figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(122deg,rgba(255,255,255,.42) 0%,transparent 44%)}
.stack img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.stack figure:hover img{transform:scale(1.05)}
.stack .s1{width:74%;height:60%;top:0;right:0;transform:rotateY(-9deg) rotateX(4deg);z-index:1}
.stack .s2{width:56%;height:46%;bottom:4%;left:0;transform:rotateY(8deg) rotateX(-3deg);z-index:3}
.stack .s3{width:42%;height:34%;bottom:22%;right:6%;transform:rotateY(-6deg);z-index:2}

/* ---------- číslované nadpisy sekcí ---------- */
.sh{position:relative}
.sh[data-n]::before{content:attr(data-n);position:absolute;top:-34px;left:0;
  font-family:var(--fd);font-size:clamp(3.4rem,7vw,5.4rem);font-weight:600;line-height:1;
  color:rgba(61,141,191,.13);letter-spacing:-.04em;pointer-events:none;z-index:-1}
.sh.center[data-n]::before{left:50%;transform:translateX(-50%)}

/* ---------- „Nabízím Vám" jako editorial dvojsloup ---------- */
.offer-wrap{display:grid;grid-template-columns:.72fr 2fr;gap:clamp(28px,5vw,72px);align-items:start}
.offer-wrap .sh{position:sticky;top:110px;margin-bottom:0}
.offer{column-count:2;column-gap:44px}
.offer li{padding:13px 0}

/* ---------- bento mřížka služeb ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bento > :nth-child(1){grid-column:span 2;grid-row:span 2}
.bento > :nth-child(2){grid-column:span 2}
.bento > :nth-child(3),.bento > :nth-child(4){grid-column:span 1}
.bento > :nth-child(1) .card-img{aspect-ratio:auto;flex:1;min-height:280px}
.bento > :nth-child(1) .card-b h3{font-size:1.62rem}
.bento > :nth-child(1) .card-b p{font-size:15.5px}
.bento .card-img{aspect-ratio:16/11}

/* ---------- mozaiková ukázka galerie ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,13vw,175px);gap:14px}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:12px;cursor:zoom-in;
  background:var(--paper-3);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 34px rgba(28,68,96,.12);transition:.35s}
.mosaic figure:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(28,68,96,.2)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:.6s}
.mosaic figure:hover img{transform:scale(1.07)}
.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic figure:nth-child(6){grid-column:span 2;grid-row:span 2}

/* ---------- pruh se dvěma velkými poli ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.duo .card-img{aspect-ratio:21/10}

@media(max-width:1050px){
  .hdr-in .nav{display:none;flex:none}
  .hdr-in .nav.open{display:block;position:fixed;inset:0;background:#fff;z-index:200;
    overflow-y:auto;padding:86px 22px 40px}
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub > a{padding:15px 12px;font-size:15px;
    border-bottom:1px solid var(--line)}
  .hdr-in .nav.open .sub{position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0;background:none}
  .hdr-right .hdr-tel{display:none}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .stack{max-width:560px;margin-inline:auto;width:100%}
  .offer-wrap{grid-template-columns:1fr;gap:26px}
  .offer-wrap .sh{position:static}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > :nth-child(1){grid-column:span 2;grid-row:auto}
  .bento > :nth-child(2){grid-column:span 2}
  .bento > :nth-child(1) .card-img{min-height:240px}
  .duo{grid-template-columns:1fr}
}
@media(max-width:720px){
  .hdr-in{min-height:64px;gap:12px}
  .hdr-in .hdr-logo img{height:38px}
  .hdr-right .btn{display:none}
  .hero-text h1{font-size:clamp(1.75rem,7.5vw,2.4rem)}
  .hero-text .hero-claim{height:54px}
  .offer{column-count:1}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .mosaic figure:nth-child(1),.mosaic figure:nth-child(6){grid-column:span 2;grid-row:span 2}
  .stack{aspect-ratio:4/3}
}

/* doladění hlavičky — menu na jeden řádek */
.hdr-in .nav{flex-wrap:nowrap;gap:0}
.hdr-in .nav > a,.hdr-in .has-sub > a{padding:11px 11px;font-size:12.5px;letter-spacing:.05em}
.hdr-in .nav > a::after,.hdr-in .has-sub > a::after{left:11px;right:11px}
.hdr-in{gap:18px}
@media(max-width:1320px){
  .hdr-right .hdr-tel{display:none}
}
@media(max-width:1150px){
  .hdr-in .nav > a,.hdr-in .has-sub > a{padding:11px 8px;font-size:12px}
}

/* koláž — vyváženější rozmístění tabulí */
.stack .s1{width:70%;height:56%;top:2%;right:0}
.stack .s2{width:54%;height:44%;bottom:2%;left:0}
.stack .s3{width:38%;height:30%;bottom:26%;right:8%}


/* ---------- prostorová scéna na pozadí ---------- */
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  display:block;contain:strict}
.panes{display:none}
/* mřížka slabší, ať nekonkuruje tabulím ve scéně */
body::after{opacity:.32}

/* postupné odkrývání — dlaždice v mřížce naskakují za sebou */
.rv{transition-delay:var(--d,0ms)}
.bento .card,.duo .card,.cards .card,.mosaic figure,.gal figure,.step,.pdf-grp{will-change:opacity,transform}
.mosaic figure,.gal figure{opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.mosaic.in figure,.gal.in figure{opacity:1;transform:none}
@media (scripting:none){.mosaic figure,.gal figure{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .mosaic figure,.gal figure{opacity:1;transform:none}
}


/* ============================================================
   DOLADĚNÍ — větší koláž, výraznější tlačítko, fotopás
   ============================================================ */

/* koláž dostane víc místa a fotky jsou znatelně větší */
.hero-grid{grid-template-columns:.92fr 1.18fr}
.stack{aspect-ratio:1/.92}
.stack figure{border-radius:18px;border-width:2px}
.stack .s1{width:78%;height:62%;top:0;right:0;transform:rotateY(-10deg) rotateX(4deg)}
.stack .s2{width:60%;height:50%;bottom:0;left:0;transform:rotateY(9deg) rotateX(-3deg)}
.stack .s3{width:42%;height:34%;bottom:30%;right:2%;transform:rotateY(-7deg);z-index:4}
.stack .s4{width:36%;height:29%;top:6%;left:2%;transform:rotateY(11deg) rotateX(3deg);z-index:2;
  position:absolute;margin:0;overflow:hidden;border-radius:18px;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 30px 70px rgba(28,68,96,.22),inset 0 1px 0 rgba(255,255,255,.9)}
.stack .s4::after{content:'';position:absolute;inset:0;
  background:linear-gradient(122deg,rgba(255,255,255,.42) 0%,transparent 44%)}
.stack .s4 img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.stack .s4:hover img{transform:scale(1.05)}

/* světelná záře za koláží, ať fotky „drží" pohromadě */
.stack::before{content:'';position:absolute;inset:6% 4%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(127,189,227,.42),transparent 72%);filter:blur(24px)}

/* ---------- výraznější druhé tlačítko ---------- */
.btn-o{background:#fff;border:1.5px solid var(--blue);color:var(--blue-dk);
  box-shadow:0 8px 22px rgba(28,68,96,.14)}
.btn-o:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(34,104,143,.32)}

/* ---------- široký fotopás přes celou šířku ---------- */
.band-sec{padding:0}
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  height:clamp(190px,26vw,330px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1),filter .5s;
  filter:saturate(.94)}
.band img:hover{transform:scale(1.06);filter:saturate(1.08)}
.band-sec{position:relative}
.band-sec::before,.band-sec::after{content:'';position:absolute;left:0;right:0;height:64px;
  pointer-events:none;z-index:2}
.band-sec::before{top:0;background:linear-gradient(180deg,rgba(240,246,251,.95),transparent)}
.band-sec::after{bottom:0;background:linear-gradient(0deg,rgba(240,246,251,.95),transparent)}

@media(max-width:1050px){
  .hero-grid{grid-template-columns:1fr}
  .band{grid-template-columns:repeat(2,1fr);height:auto;grid-auto-rows:clamp(150px,30vw,210px)}
}
@media(max-width:720px){
  .stack{aspect-ratio:1/.9}
  .stack .s4{width:34%;height:26%}
}

/* velká karta: fotka vyplní zbytek, text drží dole */
.bento > :nth-child(1) .card-img{min-height:340px}
.bento > :nth-child(1) .card-b{flex:0 0 auto}
.bento > :nth-child(1) .card-b p{flex:0 0 auto}

/* fotopás — jemnější přechod, ať fotky nejsou vybledlé */
.band-sec::before,.band-sec::after{height:44px}
.band-sec::before{background:linear-gradient(180deg,rgba(240,246,251,.72),transparent)}
.band-sec::after{background:linear-gradient(0deg,rgba(240,246,251,.72),transparent)}

/* fotka zábradlí vlevo nahoře — větší */
.stack .s4{width:46%;height:38%;top:3%;left:0}
@media(max-width:720px){
  .stack .s4{width:42%;height:33%}
}


/* ============================================================
   MODERNIZACE — pill, karty služeb, sklo, tmavý kontrast
   ============================================================ */

/* ---------- 1) svítící pill místo psaného písma ---------- */
.hero-claim{display:none}
.pill{display:inline-flex;align-items:center;gap:11px;margin-bottom:26px;
  padding:9px 20px 9px 15px;border-radius:99px;
  font-family:var(--ff);font-size:14px;font-weight:600;letter-spacing:.005em;
  color:var(--blue-dk);
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(232,242,249,.7));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px rgba(127,189,227,.35),0 8px 26px rgba(61,141,191,.22),
             inset 0 1px 0 rgba(255,255,255,.95)}
.pill-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--blue);box-shadow:0 0 0 4px rgba(61,141,191,.18),0 0 12px 2px rgba(61,141,191,.75);
  animation:puls 2.6s ease-in-out infinite}
@keyframes puls{
  0%,100%{box-shadow:0 0 0 4px rgba(61,141,191,.18),0 0 12px 2px rgba(61,141,191,.75)}
  50%{box-shadow:0 0 0 7px rgba(61,141,191,.06),0 0 18px 4px rgba(61,141,191,.95)}
}

/* ---------- 4) služby jako mřížka karet s ikonami ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{display:flex;align-items:flex-start;gap:15px;padding:20px 22px;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.48));
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 28px rgba(28,68,96,.08);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s}
.svc:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(127,189,227,.55),0 1px 0 rgba(255,255,255,.95) inset,
             0 22px 46px rgba(28,68,96,.16)}
.svc-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(127,189,227,.28),rgba(61,141,191,.12));
  border:1px solid rgba(255,255,255,.7);transition:.32s}
.svc:hover .svc-ico{background:linear-gradient(140deg,rgba(127,189,227,.5),rgba(61,141,191,.22));
  box-shadow:0 0 16px rgba(61,141,191,.3)}
.svc-ico svg{width:20px;height:20px;stroke:var(--blue-dk);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc > span:last-child{font-size:14.6px;line-height:1.5;color:var(--ink-2);font-weight:500;padding-top:2px}
.svc-more{margin-top:22px;text-align:center;font-style:italic;color:var(--muted);font-size:15px}

/* ---------- 2) silnější sklo na kartách ---------- */
.card,.ct-card,form,.step,.tbl-wrap,.pdf,.gal figure,.mosaic figure{
  border:1px solid rgba(255,255,255,.4)}
.card:hover,.pdf:hover,.step:hover{transform:translateY(-5px);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(127,189,227,.5),0 1px 0 rgba(255,255,255,.95) inset,
             0 26px 56px rgba(28,68,96,.18)}
.step{transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s}

/* ---------- 5) tmavá kontrastní výzva k akci ---------- */
.cta{background:linear-gradient(150deg,#0a192f 0%,#102a43 55%,#0d2137 100%);
  border:1px solid rgba(127,189,227,.22);
  box-shadow:0 40px 90px rgba(10,25,47,.42),inset 0 1px 0 rgba(255,255,255,.14)}
.cta::before{opacity:.10}
.cta::after{background:
  radial-gradient(560px 240px at 50% -10%,rgba(95,190,240,.34),transparent 68%),
  radial-gradient(420px 200px at 8% 110%,rgba(61,141,191,.28),transparent 70%)}
.cta h2{color:#f2f8fc;text-shadow:0 2px 30px rgba(95,190,240,.28)}
.cta p{color:rgba(214,235,248,.82)}
.btn-w{background:#fff;color:#0a192f;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.btn-w:hover{background:#e8f2f9;color:#0a192f;box-shadow:0 16px 40px rgba(95,190,240,.35)}

/* patička ještě hlubší, ať navazuje na tmavou výzvu */
footer{background:linear-gradient(180deg,#0a192f 0%,#071322 100%)}
footer::before{background:linear-gradient(90deg,transparent,rgba(95,190,240,.75),transparent)}

@media(max-width:1050px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .svc-grid{grid-template-columns:1fr;gap:12px}
  .svc{padding:16px 18px}
  .pill{font-size:12.8px;padding:8px 16px 8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .pill-dot{animation:none}
}


/* ============================================================
   FINÁLNÍ LADĚNÍ — Inter, čistší sklo, timeline, tmavé sekce
   ============================================================ */

/* ---------- 1) jednotné bezpatkové písmo ---------- */
:root{
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.028em;line-height:1.12}
.hero-text h1{font-weight:800;letter-spacing:-.035em}
.hero-text h1 span{font-weight:700}
.sh h2{font-weight:800;letter-spacing:-.03em}
.ph h1{font-weight:800;letter-spacing:-.032em}
.card-b h3{font-weight:700;letter-spacing:-.02em}
.cta h2{font-weight:800;letter-spacing:-.025em}
.sh[data-n]::before{font-weight:800;letter-spacing:-.05em;color:rgba(61,141,191,.11)}
.ft h4{font-weight:700}

/* ---------- 2) jemnější sklo, měkčí stíny ---------- */
.svc,.card,.ct-card,form,.step,.tbl-wrap,.pdf,.gal figure,.mosaic figure{
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.45));
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 24px rgba(0,0,0,.05)}
.svc:hover,.card:hover,.pdf:hover,.step:hover{
  box-shadow:0 0 0 1px rgba(127,189,227,.45),0 1px 0 rgba(255,255,255,.9) inset,
             0 18px 40px rgba(0,0,0,.07)}
.gal figure,.mosaic figure{background:var(--paper-3)}

/* ---------- 3) služby: čtvercové karty, ikona nahoře, text na střed ---------- */
.svc-grid{grid-template-columns:repeat(4,1fr);gap:18px}
.svc{flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;
  gap:14px;padding:28px 20px;min-height:186px}
.svc-ico{width:52px;height:52px;border-radius:15px}
.svc-ico svg{width:24px;height:24px;stroke:var(--sky);stroke-width:1.6}
.svc:hover .svc-ico svg{stroke:var(--blue-dk)}
.svc > span:last-child{font-size:14.4px;font-weight:600;color:var(--ink-2);padding-top:0;
  letter-spacing:-.005em;line-height:1.45}
.svc-more{margin-top:26px;text-align:center;font-style:normal;color:var(--muted);font-size:14.5px}

/* odrážky v textu už nejsou kosočtverce */
.prose ul:not(.offer):not(.chk) li::before{
  width:6px;height:6px;border-radius:50%;transform:none;top:12px;
  background:var(--sky);box-shadow:0 0 0 3px rgba(127,189,227,.22)}

/* ---------- 4) galerie: jednotný grid a pill filtry ---------- */
.gal figure,.mosaic figure{border-radius:14px}
.gal figure::after{border-radius:14px}
.filters button{padding:10px 20px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:none;border-radius:99px;
  background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.5);color:var(--ink-2);
  box-shadow:0 4px 14px rgba(0,0,0,.04);transition:.26s}
.filters button:hover{border-color:rgba(127,189,227,.8);color:var(--blue-dk);transform:translateY(-2px)}
.filters button.on{background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(61,141,191,.32)}

/* ---------- 5) pracovní postup jako vodorovná časová osa ---------- */
.steps{position:relative;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:56px}
.steps::before{content:'';position:absolute;top:22px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(127,189,227,.75) 12%,
             rgba(127,189,227,.75) 88%,transparent)}
.step{padding:26px 20px 24px;text-align:center;position:relative;border-radius:16px}
.step::before{position:absolute;top:-56px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff;margin:0;line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  box-shadow:0 0 0 6px rgba(232,242,249,.9),0 8px 20px rgba(61,141,191,.4)}
.step p{color:var(--ink-2);font-size:14px;margin-top:0;line-height:1.6}

/* ---------- 6) tmavá sekce (kontakt) ---------- */
.dark-sec{position:relative;padding:clamp(50px,6vw,84px) 0;
  background:linear-gradient(160deg,#0a192f 0%,#102a43 60%,#0b1c30 100%);
  border-top:1px solid rgba(127,189,227,.2);border-bottom:1px solid rgba(127,189,227,.2)}
.dark-sec::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 260px at 20% -5%,rgba(95,190,240,.22),transparent 70%),
             radial-gradient(500px 240px at 85% 105%,rgba(61,141,191,.2),transparent 72%)}
.dark-sec > *{position:relative}
.dark-sec .ct-card,.dark-sec form{
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(127,189,227,.28);
  box-shadow:0 0 0 1px rgba(95,190,240,.12),0 24px 60px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.14)}
.dark-sec .ct-card:hover,.dark-sec form:hover{box-shadow:0 0 26px rgba(95,190,240,.22),
  0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16)}
.dark-sec h2{color:#f2f8fc}
.dark-sec .ct-row{border-bottom-color:rgba(255,255,255,.1)}
.dark-sec .ct-row svg{stroke:var(--sky)}
.dark-sec .ct-row small{color:rgba(174,205,225,.72)}
.dark-sec .ct-row b{color:#eaf4fb}
.dark-sec .ct-row a:hover{color:var(--sky)}
.dark-sec .fld label{color:rgba(200,224,240,.85)}
.dark-sec .fld input,.dark-sec .fld textarea{
  background:rgba(255,255,255,.07);border-color:rgba(127,189,227,.3);color:#eaf4fb}
.dark-sec .fld input:focus,.dark-sec .fld textarea:focus{
  background:rgba(255,255,255,.12);border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(95,190,240,.18)}
.dark-sec .map{border-color:rgba(127,189,227,.28)}
.dark-sec .f-ok{background:rgba(95,190,240,.12);border-color:rgba(127,189,227,.4);color:#eaf4fb}

/* ---------- 7) patička na střed s ikonami ---------- */
.ft{display:block;text-align:center}
.ft-logo{background:#fff;padding:12px 18px;border-radius:10px;display:inline-block}
.ft-lead{color:#8ba4b4;font-size:15px;margin:20px auto 0;max-width:52ch;line-height:1.7}
.ft-info{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin:44px auto 0;max-width:1000px}
.ft-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.ft-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(95,190,240,.1);border:1px solid rgba(127,189,227,.3)}
.ft-ico svg{width:20px;height:20px;color:var(--sky)}
.ft-item small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6b8496}
.ft-item b{font-weight:600;font-size:14.5px;color:#cfe0eb;line-height:1.6}
.ft-item a{color:#cfe0eb}
.ft-item a:hover{color:var(--sky)}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:44px}
.ft-nav a{color:#8ba4b4;font-size:14.5px;font-weight:500}
.ft-nav a:hover{color:var(--sky)}
.ft-b{margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:center;gap:8px 26px;flex-wrap:wrap;font-size:13px;color:#6b8496}

@media(max-width:1050px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);padding-top:0}
  .steps::before{display:none}
  .step::before{position:static;transform:none;margin:0 auto 14px}
  .ft-info{grid-template-columns:repeat(2,1fr);gap:32px 20px}
}
@media(max-width:720px){
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .svc{min-height:0;padding:22px 14px;gap:11px}
  .svc-ico{width:44px;height:44px}
  .svc > span:last-child{font-size:13.4px}
  .steps{grid-template-columns:1fr}
  .ft-info{grid-template-columns:1fr;gap:28px}
}

/* karty sluzeb: obsah svisle na stred */
.svc{justify-content:center;min-height:172px}


/* ============================================================
   OPRAVY PODLE PŘIPOMÍNEK
   ============================================================ */

/* ---------- 1) nadpis v úvodu: menší a s hierarchií ---------- */
.hero-text h1{
  font-size:clamp(.92rem,1.35vw,1.1rem);
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;margin-bottom:2px}
.hero-text h1 span{
  display:block;margin-top:10px;
  font-size:clamp(1.9rem,3.6vw,2.85rem);
  font-weight:800;letter-spacing:-.032em;text-transform:none;line-height:1.08;
  background:linear-gradient(118deg,#12232f 0%,#22688f 58%,#3d8dbf 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- 2) karty služeb zpět: ikona vlevo, text vlevo ---------- */
.svc-grid{grid-template-columns:repeat(3,1fr);gap:16px}
.svc{flex-direction:row;align-items:flex-start;justify-content:flex-start;
  text-align:left;gap:15px;padding:20px 22px;min-height:0}
.svc-ico{width:42px;height:42px;border-radius:12px}
.svc-ico svg{width:20px;height:20px;stroke:var(--blue-dk);stroke-width:1.7}
.svc > span:last-child{font-size:14.6px;font-weight:500;line-height:1.5;
  color:var(--ink-2);padding-top:2px;letter-spacing:0}
.svc-more{margin-top:22px;font-style:italic}

/* ---------- 3) filtry galerie větší ---------- */
.filters{gap:11px;margin-bottom:36px}
.filters button{padding:14px 30px;font-size:14.5px;font-weight:600;letter-spacing:.01em}

/* ---------- 4) koláž: fotky větší a míň přes sebe ---------- */
.stack{aspect-ratio:1/1}
.stack .s1{width:66%;height:55%;top:0;right:0;z-index:1}
.stack .s4{width:40%;height:35%;top:4%;left:0;z-index:2}
.stack .s2{width:60%;height:46%;bottom:2%;left:0;z-index:3}
.stack .s3{width:36%;height:31%;bottom:6%;right:0;z-index:4}

@media(max-width:1050px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .svc-grid{grid-template-columns:1fr;gap:12px}
  .svc{padding:16px 18px}
  .filters button{padding:12px 22px;font-size:13.5px}
  .stack{aspect-ratio:1/.95}
}


/* ============================================================
   PRÉMIOVÝ LAYOUT 2026 — širší plocha, nová paleta, víc vzduchu
   ============================================================ */

:root{
  --maxw:1280px;
  --r:20px;
  --blue:#0E5EA8;
  --blue-dk:#0A4B86;
  --sky:#2C7BC9;
  --blue-lt:#EAF2FA;
  --ink:#0F172A;
  --ink-2:#334155;
  --muted:#64748B;
  --paper:#FFFFFF;
  --paper-2:#F8FBFE;
  --paper-3:#EEF4FA;
  --line:#E2EAF2;
  --line-2:#CBD9E8;
}

/* oddálení — širší obsah a klidnější velikost písma */
html{background:#F8FBFE}
body{font-size:16px;line-height:1.75}
.wrap{width:min(100% - 56px,var(--maxw))}
section{padding:clamp(72px,8vw,124px) 0}

/* ---------- hlavička ---------- */
.hdr{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.04)}
.hdr.scrolled{box-shadow:0 6px 28px rgba(15,23,42,.08)}
.hdr-in{min-height:88px;padding:16px 0;gap:28px}
.hdr-in .hdr-logo img{height:52px}
.hdr-in .nav > a,.hdr-in .has-sub > a{padding:12px 15px;font-size:12.5px;
  font-weight:600;letter-spacing:.09em;color:var(--ink-2)}
.hdr-tel{flex-direction:row;align-items:center;gap:12px;text-align:left}
.hdr-tel-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:var(--blue-lt);border:1px solid var(--line-2)}
.hdr-tel-ico svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.8}
.hdr-tel-txt{display:flex;flex-direction:column;line-height:1.25}
.hdr-tel small{font-size:10.5px;letter-spacing:.18em;color:var(--muted)}
.hdr-tel b{font-size:18px;color:var(--blue);font-weight:700}
.hdr-right{gap:22px}

/* ---------- tlačítka ---------- */
.btn{padding:17px 34px;font-size:13.5px;letter-spacing:.09em;border-radius:12px;font-weight:700}
.btn-sm{padding:13px 24px;font-size:12px}
.btn svg{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--blue);box-shadow:0 10px 26px rgba(14,94,168,.26)}
.btn-p:hover{background:var(--blue-dk);box-shadow:0 16px 36px rgba(14,94,168,.34)}
.btn-o{background:#fff;border:1.5px solid var(--line-2);color:var(--blue)}
.btn-o:hover{background:#fff;border-color:var(--blue);color:var(--blue-dk);
  box-shadow:0 12px 30px rgba(14,94,168,.16)}

/* ---------- nadpisy sekcí: na střed, bez velkých číslic ---------- */
.sh{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(44px,5vw,68px)}
.sh[data-n]::before{display:none}
.sh .rule{margin-inline:auto}
.kicker{color:var(--sky);letter-spacing:.22em;font-size:11.5px}
.sh.center .kicker::after,.kicker::before{background:currentColor;opacity:.55}
.sh h2{font-size:clamp(1.85rem,3.2vw,2.7rem);letter-spacing:-.03em}
.rule{background:var(--blue);width:48px;height:3px}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,6vw,96px) 0 clamp(72px,8vw,116px)}
.hero-grid{grid-template-columns:1fr 1.12fr;gap:clamp(40px,5vw,84px)}
.hero-text h1{font-size:clamp(.86rem,1.2vw,1rem);letter-spacing:.28em;color:var(--muted)}
.hero-text h1 span{font-size:clamp(2rem,3.7vw,3.05rem);margin-top:12px;
  background:linear-gradient(116deg,#0F172A 0%,#0E5EA8 62%,#2C7BC9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-text > p{font-size:16.5px;line-height:1.85;color:var(--ink-2);
  padding-left:26px;border-left:3px solid var(--sky);max-width:52ch}
.hero-text .hero-btns{gap:14px;margin-top:40px}
.pill{padding:11px 22px 11px 17px;font-size:13.5px;border-radius:99px;
  color:var(--blue);border:1px solid var(--line-2);
  background:rgba(255,255,255,.86);
  box-shadow:0 6px 20px rgba(14,94,168,.1)}
.pill-dot{background:var(--sky);box-shadow:0 0 0 4px rgba(44,123,201,.16),0 0 12px 2px rgba(44,123,201,.6)}

/* koláž */
.stack figure,.stack .s4{border-radius:22px;border:3px solid #fff;
  box-shadow:0 26px 60px rgba(15,23,42,.16)}
.stack::before{background:radial-gradient(closest-side,rgba(44,123,201,.28),transparent 74%)}

/* ---------- karty ---------- */
.card,.svc,.ct-card,form,.step,.tbl-wrap,.pdf{border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 6px rgba(15,23,42,.03),0 12px 32px rgba(15,23,42,.05)}
.card:hover,.svc:hover,.pdf:hover,.step:hover{
  box-shadow:0 0 0 1px rgba(44,123,201,.35),0 20px 44px rgba(15,23,42,.09)}
.svc{padding:22px 24px;gap:16px}
.svc-ico{width:46px;height:46px;border-radius:14px;
  background:var(--blue-lt);border:1px solid var(--line-2)}
.svc-ico svg{stroke:var(--blue);width:21px;height:21px}
.svc:hover .svc-ico{background:var(--blue);border-color:var(--blue)}
.svc:hover .svc-ico svg{stroke:#fff}
.svc > span:last-child{font-size:15px;color:var(--ink-2);font-weight:500}
.card-b{padding:28px 30px 32px}
.card-b h3{font-size:1.3rem;letter-spacing:-.022em}
.card-b p{font-size:15px;color:var(--muted);line-height:1.7}
.card-link{color:var(--blue);font-size:12px;letter-spacing:.11em}
.gal figure,.mosaic figure{border-radius:18px}
.gal figure::after{border-radius:18px;border-color:var(--sky)}
.split-media{border-radius:22px}
.band img{filter:saturate(.98)}

/* ---------- filtry ---------- */
.filters button{border-radius:99px;padding:14px 30px;font-size:14px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 10px 26px rgba(14,94,168,.28)}

/* ---------- tmavé prvky ---------- */
.cta{border-radius:24px;padding:clamp(48px,6vw,84px);
  background:linear-gradient(140deg,#0B2545 0%,#0E5EA8 100%)}
.cta h2{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.btn-w{background:#fff;color:var(--blue);border-radius:12px}
.dark-sec{background:linear-gradient(160deg,#0B2545 0%,#0E3F6E 60%,#0B2545 100%)}
footer{background:linear-gradient(180deg,#0B2545 0%,#071829 100%)}
.ft-ico{border-radius:14px}

/* ---------- formulář ---------- */
.fld input,.fld textarea,.fld select{border-radius:12px;padding:15px 17px;font-size:15px}

@media(max-width:1050px){
  .wrap{width:min(100% - 40px,var(--maxw))}
  .hdr-tel{display:none}
}
@media(max-width:720px){
  body{font-size:15.5px}
  .wrap{width:min(100% - 32px,var(--maxw))}
  .btn{padding:15px 26px}
}


/* ============================================================
   SHODA S PŘEDLOHOU — logo, skleněná deska v hero
   ============================================================ */

/* ---------- logo: hranol + dvouřádkový nápis ---------- */
.hdr-logo{display:flex;align-items:center;gap:13px}
.hdr-logo img{display:none}
.logo-mark{width:46px;height:46px;flex-shrink:0;display:block}
.logo-mark svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 14px rgba(14,94,168,.28))}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt small{font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.logo-txt b{font-size:21px;font-weight:800;letter-spacing:-.012em;color:var(--ink)}
.ft-logo{background:none;padding:0}
.ft-logo img{height:44px;display:block}

/* ---------- velká skleněná deska v hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-slab{position:absolute;z-index:0;pointer-events:none;
  top:-8%;left:38%;width:64%;height:116%;
  transform:skewX(-13deg);border-radius:28px;
  background:linear-gradient(128deg,
    rgba(255,255,255,.72) 0%,
    rgba(214,234,249,.42) 38%,
    rgba(255,255,255,.55) 62%,
    rgba(196,225,246,.34) 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 40px 90px rgba(14,94,168,.10),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* světelný lom přes desku */
.hero-slab::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.75) 44%,transparent 56%)}
.hero-grid,.hero .wrap{position:relative;z-index:2}

/* jemnější podklad hero, ať deska vynikne */
.hero{background:linear-gradient(180deg,#F2F8FD 0%,#FAFCFE 62%,#F8FBFE 100%)}

@media(max-width:1050px){
  .hero-slab{left:auto;right:-14%;width:82%;height:56%;top:auto;bottom:2%;opacity:.75}
}
@media(max-width:720px){
  .hero-slab{display:none}
  .logo-mark{width:40px;height:40px}
  .logo-txt b{font-size:18px}
  .logo-txt small{font-size:10px;letter-spacing:.18em}
}


/* ============================================================
   ČISTÉ POZADÍ PŘESNĚ PODLE PŘEDLOHY — žádné létající tvary
   ============================================================ */
.scene{display:none}
body::after{display:none}
body::before{background:
  radial-gradient(900px 500px at 12% -6%, rgba(44,123,201,.07), transparent 60%),
  radial-gradient(800px 460px at 95% 2%, rgba(14,94,168,.05), transparent 62%),
  linear-gradient(180deg,#FBFDFF 0%,#F8FBFE 100%)}
.tint{background:#F8FBFE;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc,.card,.tbl-wrap,.pdf{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 8px 24px rgba(15,23,42,.04)}
.svc:hover,.card:hover,.pdf:hover{border-color:var(--line-2);
  box-shadow:0 2px 4px rgba(15,23,42,.04),0 18px 40px rgba(15,23,42,.08)}
form,.ct-card,.step{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line)}
.dark-sec form,.dark-sec .ct-card{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(127,189,227,.28)}


/* ============================================================
   TYPOGRAFICKÝ CHARAKTER + NÁVRAT KLIDNÉ 3D SCÉNY
   ============================================================ */

/* 3D scéna zpět — jen jako jemná hloubka za obsahem */
.scene{display:block;opacity:.55}

/* akcentové písmo: Lora kurzíva na vybraných místech */
em{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:.005em}
h1 em,h2 em,h3 em{font-weight:600;color:var(--blue)}
.cta h2 em{color:#A8D2F5}

/* claim v pilulce dostane rukopisný charakter */
.pill{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:500;
  font-size:15px;letter-spacing:.01em}

/* poznámky a dovětky kurzívou — působí lidsky, ne stroze */
.note{font-family:'Lora',Georgia,serif;font-style:italic;font-size:15.5px}
.svc-more{font-family:'Lora',Georgia,serif;font-style:italic;font-size:16px;color:var(--ink-2)}
.offer li.last{font-family:'Lora',Georgia,serif}
.ft-lead{font-family:'Lora',Georgia,serif;font-style:italic;font-size:15.5px}
.f-note{font-family:'Lora',Georgia,serif;font-style:italic}

/* drobečková navigace jemně odlišená */
.crumb{font-family:'Lora',Georgia,serif;font-style:italic;letter-spacing:.01em}

/* kurzívní dovětek pod nadpisy stránek */
.ph p{font-family:'Lora',Georgia,serif;font-style:italic;font-size:17px;color:var(--ink-2)}

/* 3D sklo naplno */
.scene{opacity:1}


/* ============================================================
   SCÉNA MUSÍ BÝT VIDĚT — sekce nesmí plátno zakrýt
   ============================================================ */
.hero{background:transparent}
.tint{background:rgba(248,251,254,.72);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.ph{background:rgba(242,248,253,.66);border-bottom:1px solid rgba(226,234,242,.9)}
section:not(.tint):not(.dark-sec):not(.band-sec){background:transparent}
/* skleněná deska v hero nechá scénu prosvítat */
.hero-slab{backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  background:linear-gradient(128deg,
    rgba(255,255,255,.55) 0%,
    rgba(214,234,249,.30) 38%,
    rgba(255,255,255,.42) 62%,
    rgba(196,225,246,.26) 100%)}


/* ============================================================
   HERO + HLAVIČKA PODLE ZADÁNÍ (23. 7. 2026)
   ============================================================ */

/* 1) bublina: čistý bezpatkový font místo kurzívy */
.pill{font-family:var(--ff);font-style:normal;font-weight:600;
  font-size:13.5px;letter-spacing:.02em}

/* 2) nový hlavní nadpis — velký, ne verzálkový popisek */
.hero-text h1.hero-h1{
  font-size:clamp(1.85rem,3.2vw,2.7rem);font-weight:800;
  letter-spacing:-.03em;text-transform:none;line-height:1.16;
  color:var(--ink);margin-bottom:0}
.hero-text h1.hero-h1 span{
  display:inline;font-size:inherit;font-weight:800;margin-top:0;
  background:linear-gradient(116deg,#0E5EA8 0%,#2C7BC9 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* 3) tlačítko GALERIE REALIZACÍ — výrazný rámeček, už nezapadá */
.btn-o{background:#fff;border:2px solid var(--blue);color:var(--blue-dk);
  box-shadow:0 10px 26px rgba(14,94,168,.16)}
.btn-o:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 16px 36px rgba(14,94,168,.3)}

/* 4) telefon v hlavičce — tučněji + podbarvená ikona */
.hdr-tel b{font-weight:800;font-size:19px;letter-spacing:-.01em}
.hdr-tel-ico{background:var(--blue);border-color:var(--blue);
  box-shadow:0 6px 16px rgba(14,94,168,.3)}
.hdr-tel-ico svg{stroke:#fff}
.hdr-tel:hover .hdr-tel-ico{background:var(--blue-dk)}


/* ============================================================
   FINÁLNÍ HERO — jmenovka, projíždějící pás, skleněné služby
   ============================================================ */
.hero-label{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:12.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);border:0;padding:0;max-width:none;font-family:var(--ff)}
.hero-label::before{content:'';width:34px;height:2px;background:currentColor;flex-shrink:0}
.hero-text h1.hero-h1{margin-bottom:0}
.hero-text > p.hero-lead,.hero-text > p{margin-top:24px}

.ticker{overflow:hidden;padding:18px 0;position:relative;z-index:3;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker-track{display:flex;width:max-content;animation:tick 26s linear infinite}
.ticker-grp{display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap}
.ticker-grp span{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:13px;color:var(--blue-dk)}
.ticker-grp .dot{font-size:9px;color:var(--sky);opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

.svc{background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.4)) !important;
  backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 10px 28px rgba(15,23,42,.06) !important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s !important}
.svc:hover{transform:translateY(-5px);border-color:rgba(127,189,227,.9) !important;
  box-shadow:0 0 0 1px rgba(44,123,201,.4),0 1px 0 rgba(255,255,255,.95) inset,
             0 22px 46px rgba(15,23,42,.12) !important}
.svc-ico{background:linear-gradient(140deg,rgba(127,216,255,.3),rgba(14,94,168,.14));
  border:1px solid rgba(255,255,255,.75)}
.svc:hover .svc-ico{background:var(--blue);border-color:var(--blue)}
.svc:hover .svc-ico svg{stroke:#fff}


/* ============================================================
   HERO: fotka skleněné budovy za průsvitnou vrstvou
   ============================================================ */
.hero{background:
  linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(250,253,255,.48) 42%,rgba(248,251,254,.85) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
@media(max-width:720px){
  .hero{background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(250,253,255,.62) 42%,rgba(248,251,254,.9) 100%),
    url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
}


/* ============================================================
   GRADIENTOVÉ AKCENTY — azurová → královská modrá → fialová
   ============================================================ */
:root{
  --grad:linear-gradient(135deg,#2FB8FF 0%,#0072FF 45%,#0A4DA6 100%);
  --grad-soft:linear-gradient(135deg,#1FA9FF 0%,#0B57AA 100%);
}

/* 1) přechod + záře na klíčových slovech */
.hero-h1 span,h2 em,h1 em,h3 em{
  background:var(--grad) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 20px rgba(0,162,255,.4))}
.hero-label{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,162,255,.35))}
.hero-label::before{background:linear-gradient(90deg,#2FB8FF,#0A4DA6)}

/* 2) tlačítka s přechodem a září */
.btn-p{background:var(--grad-soft) !important;border:none !important;
  box-shadow:0 8px 22px rgba(0,198,255,.42) !important}
.btn-p:hover{background:linear-gradient(135deg,#2FB8FF 0%,#0C63C4 100%) !important;
  box-shadow:0 10px 25px rgba(0,114,255,.4),0 18px 44px rgba(0,120,230,.28) !important;
  transform:translateY(-2px)}
.btn-o{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box !important;
  border:2px solid transparent !important;color:#0B57AA !important;
  box-shadow:0 8px 22px rgba(10,37,64,.12) !important}
.btn-o:hover{background:linear-gradient(rgba(244,248,255,1),rgba(244,248,255,1)) padding-box,var(--grad) border-box !important;
  color:#0072FF !important;transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,198,255,.45) !important}

/* 3) sjednocené akcenty napříč webem */
.svc-ico{background:var(--grad-soft) !important;border:1px solid rgba(255,255,255,.4) !important;
  box-shadow:0 6px 16px rgba(0,198,255,.42)}
.svc-ico svg{stroke:#fff !important}
.svc:hover .svc-ico{box-shadow:0 0 22px rgba(0,140,255,.4)}

.nav > a.on,.has-sub > a.on{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.nav > a::after,.has-sub > a::after{background:linear-gradient(90deg,#2FB8FF,#0A4DA6) !important}

.hdr-tel-ico{background:var(--grad-soft) !important;border:none !important;
  box-shadow:0 6px 16px rgba(0,198,255,.45) !important}
.hdr-tel b{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

.pill-dot{background:linear-gradient(135deg,#2FB8FF,#0A4DA6);
  box-shadow:0 0 0 4px rgba(0,162,255,.14),0 0 12px 2px rgba(0,140,255,.5)}
.rule{background:linear-gradient(90deg,#2FB8FF,#0A4DA6)}
.ticker-grp .dot{color:#0072FF}


/* ============================================================
   PROSVĚTLENÍ + 5. FOTKA V KOLÁŽI
   ============================================================ */
/* hero: světlé skleněné odlesky přes fotku */
.hero{background:
  radial-gradient(720px 420px at 22% 16%, rgba(0,150,255,.12), transparent 64%),
  radial-gradient(640px 400px at 80% 68%, rgba(10,77,166,.10), transparent 66%),
  linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(250,253,255,.5) 42%,rgba(248,251,254,.86) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}

/* ikony služeb: jasná světlá modrá s krystalickým zářením */
.svc-ico{background:linear-gradient(135deg,#1FA9FF 0%,#0B57AA 100%) !important;
  box-shadow:0 0 0 4px rgba(0,150,255,.10),0 6px 18px rgba(0,198,255,.42) !important}
.svc:hover .svc-ico{box-shadow:0 0 0 5px rgba(0,224,255,.16),0 0 24px rgba(0,224,255,.6) !important}

/* rozmístění pěti fotek */
.stack .s1{width:62%;height:48%;top:0;right:0;z-index:1}
.stack .s4{width:38%;height:32%;top:5%;left:0;z-index:2}
.stack .s2{width:54%;height:40%;bottom:0;left:0;z-index:3}
.stack .s5{width:40%;height:31%;bottom:27%;right:24%;z-index:4;transform:rotateY(7deg) rotateX(-2deg)}
.stack .s3{width:30%;height:26%;bottom:2%;right:0;z-index:5}
@media(max-width:720px){
  .stack .s5{display:none}
}


/* ============================================================
   KOLÁŽ V ČISTÉ MŘÍŽCE — zarovnané hrany, jednotné mezery
   ============================================================ */
.stack{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr .85fr;gap:16px;
  aspect-ratio:1/.92;perspective:none}
.stack figure,.stack .s4,.stack .s5{position:static !important;
  width:100% !important;height:100% !important;
  top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  transform:none;margin:0;overflow:hidden;
  border:3px solid #fff;border-radius:16px;
  box-shadow:0 16px 40px rgba(15,23,42,.13)}

.stack img{width:100%;height:100%;object-fit:cover}
.stack .s5{grid-column:1 / 3;grid-row:1}
.stack .s1{grid-column:3 / 5;grid-row:1 / 3}
.stack .s2{grid-column:1 / 3;grid-row:2 / 4}
.stack .s4{grid-column:3;grid-row:3}
.stack .s3{grid-column:4;grid-row:3}
.stack::before{display:none}
@media(max-width:720px){
  .stack{aspect-ratio:1/1;gap:10px}
  .stack .s5{display:block}
}

/* interiér s křeslem širší, pravý sloupec dominantní */
.stack{grid-template-columns:.82fr .82fr 1.18fr 1.18fr;grid-template-rows:1.08fr 1.08fr .78fr}

/* 3D naklon fotek v kolazi za mysi */
.stack .s1,.stack .s2,.stack .s3,.stack .s4,.stack .s5{transform:none}
.stack figure{transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s;will-change:transform}
.stack figure:hover{box-shadow:0 28px 64px rgba(15,23,42,.22);z-index:6}
@media(prefers-reduced-motion:reduce){.stack figure{transition:none}}


/* ============================================================
   WHATSAPP BUBLINA + RECENZE S POČÍTADLY
   ============================================================ */
.wa{position:fixed;right:22px;bottom:22px;z-index:150;width:58px;height:58px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42),0 4px 12px rgba(15,23,42,.18);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.wa svg{width:30px;height:30px}
.wa:hover{transform:scale(1.09) translateY(-2px);
  box-shadow:0 16px 38px rgba(37,211,102,.5),0 6px 16px rgba(15,23,42,.22)}
@media(max-width:720px){.wa{right:14px;bottom:84px;width:54px;height:54px}}

.rev-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:22px;align-items:stretch}
.rev-badge,.rev-card,.rev-stat{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;margin:0;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.rev-badge:hover,.rev-card:hover,.rev-stat:hover{transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(15,23,42,.1)}
.rev-num{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.stars{color:#F6B01E;font-size:21px;letter-spacing:3px;line-height:1}
.stars .off{color:#CBD8E6}
.rev-src{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rev-card blockquote{margin:0;font-size:16px;color:var(--ink-2);line-height:1.75}
.rev-card figcaption{font-weight:700;font-size:14.5px;color:var(--ink)}
.rev-card figcaption span{font-weight:500;color:var(--muted)}
@media(max-width:1050px){.rev-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.rev-grid{grid-template-columns:1fr;gap:14px}}


/* recenze: horni dvojice + mrizka karet */
.rev-top{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:680px;margin:0 auto 24px}
.rev-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rev-list .rev-card{padding:24px 22px;gap:9px}
.rev-list blockquote{font-size:14.6px;line-height:1.65}
.rev-list .stars{font-size:16px;letter-spacing:2px}
.rev-list figcaption{font-size:13.5px}
@media(max-width:1050px){.rev-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .rev-top{grid-template-columns:1fr 1fr;gap:12px}
  .rev-list{grid-template-columns:1fr;gap:12px}
}


/* Google logo v recenzich */
.rev-card{position:relative}
.rev-card > .gmark{position:absolute;top:16px;right:16px;width:19px;height:19px}
.gsrc{display:inline-flex;align-items:center;gap:8px}
.gsrc .gmark{position:static;width:17px;height:17px}


/* ============================================================
   BLUR-UP NÁHLEDY + PLYNULÉ PŘECHODY STRÁNEK
   ============================================================ */
figure.blur-bg{background-size:cover;background-position:center}
img.blurup{opacity:0;transition:opacity .5s ease}
img.blurup.loaded{opacity:1}

/* prolnutí mezi stránkami (Chrome/Edge/Opera; jinde se tiše ignoruje) */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.22s}
::view-transition-new(root){animation-duration:.22s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* klikací položky pásu */
.ticker-grp a{font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:13px;color:var(--blue-dk);transition:color .2s}
.ticker-grp a:hover{color:#0072FF;text-decoration:underline;text-underline-offset:4px}
.ticker:hover .ticker-track{animation-play-state:paused}


/* kontakt: karta údajů stejně vysoká jako formulář, mapa přes celou šířku */
.ct > div:first-child{display:flex;flex-direction:column}
.ct > div:first-child .ct-card{flex:1}
.map-wide{margin-top:26px}
.map-wide iframe{height:380px}
@media(max-width:720px){.map-wide iframe{height:280px}}

.ct{align-items:stretch}


/* ============================================================
   SORTIMENT BARTOSINI — kategorie, produkty, detail
   ============================================================ */
.srt-kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.srt-kat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:26px 24px 22px;text-align:center;gap:12px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.srt-kat:hover{transform:translateY(-4px);border-color:rgba(127,189,227,.9);
  box-shadow:0 16px 38px rgba(15,23,42,.1)}
.srt-kat-img{height:120px;display:grid;place-items:center}
.srt-kat-img img{max-height:120px;width:auto;max-width:80%}
.srt-kat-b b{font-size:1.06rem;font-weight:700;color:var(--ink);display:block}
.srt-kat-b small{color:var(--muted);font-size:13px}
.srt-kat .card-link{justify-content:center;margin-top:2px}

.srt-kotvy{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.srt-kotvy a{padding:9px 16px;border-radius:99px;background:#fff;border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--ink-2);transition:.2s}
.srt-kotvy a:hover{border-color:var(--blue);color:var(--blue-dk)}

.srt-serie{padding:clamp(40px,5vw,64px) 0}
.srt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.srt-p{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;
  font-family:var(--ff);text-align:center;
  box-shadow:0 2px 6px rgba(15,23,42,.03);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.srt-p:hover{transform:translateY(-4px);border-color:rgba(127,189,227,.9);
  box-shadow:0 14px 32px rgba(15,23,42,.1)}
.srt-p-img{height:130px;display:grid;place-items:center}
.srt-p-img img{max-height:130px;width:auto;max-width:100%}
.srt-p b{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.srt-p > span:last-child{font-size:12.8px;color:var(--muted);line-height:1.45}

.srt-modal[hidden]{display:none}
.srt-modal{position:fixed;inset:0;z-index:300;background:rgba(10,25,47,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.srt-box{position:relative;background:#fff;border-radius:20px;max-width:860px;width:100%;
  max-height:88vh;overflow:auto;display:grid;grid-template-columns:340px 1fr;
  box-shadow:0 40px 100px rgba(10,25,47,.4)}
.srt-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line-2);font-size:22px;cursor:pointer;z-index:2;
  display:grid;place-items:center;transition:.2s}
.srt-x:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.srt-mimg{background:var(--paper-2);display:grid;place-items:center;padding:28px;border-radius:20px 0 0 20px}
.srt-mimg img{max-width:100%;max-height:340px;width:auto}
.srt-mbody{padding:30px 32px}
.srt-mkod{font-size:1.5rem;margin-top:6px}
.srt-mpopis{color:var(--ink-2);margin-top:10px;line-height:1.65}
.srt-mtech{margin-top:18px}
.srt-mtech h4,.srt-mpovrchy h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px;font-family:var(--ff)}
.srt-mtech p{font-size:14.5px;color:var(--ink-2);padding:5px 0;border-bottom:1px solid var(--line)}
.srt-chip{display:inline-block;padding:6px 12px;margin:3px 5px 3px 0;border-radius:8px;
  background:var(--blue-lt);border:1px solid var(--line-2);
  font-size:12.5px;font-weight:700;color:var(--blue-dk);cursor:help}
@media(max-width:760px){
  .srt-box{grid-template-columns:1fr;max-height:92vh}
  .srt-mimg{border-radius:20px 20px 0 0;padding:20px}
  .srt-mimg img{max-height:200px}
  .srt-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* prezentacni serie (mobilni pricky) */
.srt-ifoto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px}
.srt-ifoto{margin:0;border-radius:14px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 14px 34px rgba(15,23,42,.12)}
.srt-ifoto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* recenze: zustava jen karta s lety praxe */
.rev-top{grid-template-columns:1fr;max-width:340px}

/* ---------- popisky pod fotkami (zateplování oken) ---------- */
figure.split-media{margin:0}
.split-media figcaption,.gal-cap figcaption{
  position:relative;z-index:3;padding:12px 18px 14px;
  font-size:14px;line-height:1.55;text-align:center;color:var(--ink-2);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.9)}
.gal-cap figure{aspect-ratio:auto;display:flex;flex-direction:column}
.gal-cap figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;flex:none}
.gal-cap figcaption{flex:1;display:flex;align-items:center;justify-content:center}

/* ---------- skupinova hlavicka tabulek (akvária) ---------- */
thead tr.grp th{background:var(--paper-2);color:var(--muted);text-align:center;
  padding:9px 14px;font-size:10.5px;border-bottom:1px solid var(--line)}
thead tr.grp th+th{border-left:1px solid var(--line)}
thead tr.grp th:last-child{text-align:center}

/* ---------- tvar akvária vedle názvu modelu ---------- */
.tvar-hl{display:flex;align-items:center;gap:16px;margin:38px 0 18px}
.tvar-hl img{width:104px;height:auto;flex:none;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:7px 8px}
.tvar-hl h3{margin:0}
@media(max-width:520px){.tvar-hl{gap:12px}.tvar-hl img{width:78px}}

/* ---------- hero pod sebe na tabletu a mobilu ---------- */
/* pozdější pravidlo .hero-grid (2 sloupce) přebíjelo starší media query, */
/* takže koláž fotek se na telefonu smrskla na pár desítek pixelů */
@media(max-width:1050px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .stack{max-width:560px;margin-inline:auto;width:100%}
}

/* ---------- mobil: pohodlné dotykové cíle a čitelné popisky ---------- */
@media(max-width:720px){
  /* telefon, e-mail a web se na displeji musí dát trefit prstem */
  .ft-item b a,.ct-row b a{display:inline-flex;align-items:center;min-height:40px}
  .ft-nav{gap:2px 24px}
  .ft-nav a{display:inline-flex;align-items:center;min-height:42px}
  .ft-b a{display:inline-flex;align-items:center;min-height:40px}
  .crumb a{display:inline-block;padding:6px 2px;margin:-6px -2px}
  /* drobné popisky o stupínek nahoru, ať jsou čitelné */
  .ct-row small,.ft-item small{font-size:12px;letter-spacing:.1em}
  .ct-row b,.ft-item b{font-size:15.5px}
}

/* ---------- úzké telefony (do 420 px) ---------- */
@media(max-width:420px){
  .wrap{width:min(100% - 32px,var(--maxw))}
  .ct-card,form{padding:22px 18px}
  .btn{white-space:normal;text-align:center;max-width:100%;padding:15px 20px;
    letter-spacing:.05em;line-height:1.35}
  .ct-row{gap:11px}
  /* dlouhé e-maily a adresy se smí zlomit */
  .ct-row,.ct-row *,.ft a,.f-row,.hdr-tel-txt b{overflow-wrap:anywhere}
  /* dlaždice sortimentu: sloupec se musí umět zúžit pod název produktu */
  .srt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .srt-p{padding:14px 10px}
  .srt-p b,.srt-p > span:last-child{overflow-wrap:anywhere}
}

/* ============================================================
   MOBIL — přestavba 18. 9. 2026
   ============================================================ */

/* --- 1) MOBILNÍ MENU ---
   Bylo úplně nefunkční: JS přidává .open na .nav, ale všechna CSS pravidla
   mířila na .navbar, který v HTML vůbec není. Na telefonu tak web neměl
   žádnou navigaci. */
@media(max-width:1200px){
  /* řádek hlavičky (logo + menu + tlačítko) se pod 1200 px nevejde,
     proto se tu přepíná na tlačítko menu */
  .hdr-in .nav{display:none}
  .burger{display:flex;position:relative}
  /* POZOR: .hdr má backdrop-filter, a ten z hlavičky dělá vztažný rámec pro
     position:fixed. Bez pevné výšky se menu otevře jen jako ~126px proužek
     uvnitř hlavičky — přesně to bylo na telefonu rozbité. */
  .hdr-in .nav.open{
    display:flex;position:fixed;left:0;right:0;top:0;bottom:auto;z-index:200;
    height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    background:#fff;overflow-y:auto;overscroll-behavior:contain;
    padding:86px 22px calc(40px + env(safe-area-inset-bottom,0px));gap:0}
  .nav.open > a,.nav.open .has-sub > a{
    display:block;padding:16px 2px;font-size:17px;font-weight:700;color:var(--ink);
    border-bottom:1px solid var(--line);letter-spacing:-.01em}
  .nav.open > a::after,.nav.open .has-sub > a::after{display:none}
  .nav.open .has-sub{position:static}
  .nav.open .sub{
    position:static;display:block;opacity:1;visibility:visible;transform:none;
    min-width:0;background:none;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;padding:4px 0 14px 14px;margin:0}
  .nav.open .sub a{
    display:block;padding:12px 0;font-size:15px;font-weight:500;
    color:var(--muted);border:0}
  /* hamburger se změní na křížek */
  .burger{z-index:210}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
}
body.menu-otevrene{overflow:hidden}

/* --- 2) HERO NA TELEFONU: fotky hned na první obrazovku ---
   Předtím byl na první obrazovce jen nadpis a deset řádků textu. */
@media(max-width:720px){
  .hero{padding-top:18px}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-text{display:contents}
  .pill{order:1;margin-bottom:18px;font-size:13.5px;padding:11px 16px;line-height:1.45}
  /* pozor na specificitu: .hero-text > p je silnější než .hero-label,
     jinak jmenovka spadne dolů k odstavci */
  .hero-text > p.hero-label{order:2;margin:0 0 10px;font-size:11.5px;letter-spacing:.16em;
    padding-left:0;border-left:0}
  .hero-text h1,.hero-h1{order:3;font-size:2.05rem;line-height:1.14;margin-bottom:22px}
  .stack{order:4;margin-bottom:24px}
  .hero-text > p{order:5;margin-top:0;font-size:1rem;line-height:1.72}
  .hero-btns{order:6;margin-top:24px !important;width:100%}
  .hero-btns .btn{flex:1 1 100%}
}

/* --- 3) KARTY POD SEBE ---
   .bento zůstávala na telefonu ve dvou sloupcích, text se mačkal a ořezával. */
@media(max-width:720px){
  .bento{grid-template-columns:1fr;gap:14px}
  .bento > :nth-child(1),.bento > :nth-child(2){grid-column:auto}
  .bento > :nth-child(1) .card-img{min-height:200px}
  .cards{grid-template-columns:1fr;gap:16px}
  .svc-grid{grid-template-columns:1fr;gap:12px}
}

/* --- 4) HLAVIČKA NA MENŠÍM NOTEBOOKU ---
   Mezi ~1050 a ~1160 px se řádek hlavičky (logo + menu + telefon + tlačítko)
   nevešel a stránka přetékala do strany. Telefon proto schováme dřív
   a položkám menu ubereme odsazení. */
@media(max-width:1250px){
  .hdr-tel{display:none}
}
/* Menu stáhneme od 1201 px výš, ať se řádek hlavičky vejde do .hdr-in.
   ⚠️ Dřív to platilo jen do 1420 px. Nad tím se odsazení vrátilo, řádek
   (logo + menu + telefon + tlačítko) byl širší než 1280 px a na displeji
   1440 px kvůli tomu stránka jezdila do strany. .hdr-in je zastropovaná
   na 1280 px, takže obsah se do ní musí vejít v KAŽDÉ šířce. */
@media(min-width:1201px){
  .hdr-in .nav > a,.hdr-in .has-sub > a{padding-left:10px;padding-right:10px;font-size:13px}
  .hdr-right .btn-sm{padding:11px 17px;font-size:11.5px}
}

/* ============================================================
   MOBIL v2 — hutnější první obrazovka + efekty
   Ondra: „oddal to, ať tam vidí fotky i text rovnou"
   ============================================================ */
@media(max-width:720px){
  /* --- text z bubliny je důležitý a musí zůstat nahoře;
         na displeji jen jako útlý řádek, ne velká bublina --- */
  .hero .pill{display:inline-flex;font-size:12.5px;line-height:1.38;
    padding:8px 14px;margin-bottom:12px;gap:8px;align-items:flex-start}
  .hero .pill .pill-dot{width:6px;height:6px;margin-top:5px}

  /* --- menší typografie, ať se toho vejde víc --- */
  body{font-size:15px;line-height:1.62}
  .hero{padding-top:14px;padding-bottom:30px}
  .hero-text > p.hero-label{font-size:10.5px;letter-spacing:.14em;margin-bottom:7px}
  .hero-text h1,.hero-h1{font-size:1.62rem;line-height:1.16;margin-bottom:14px;letter-spacing:-.03em}
  .hero-text > p{font-size:.95rem;line-height:1.6;padding-left:14px;border-left-width:2px}
  .hero-btns{margin-top:18px !important;gap:9px}
  .hero-btns .btn{padding:13px 18px;font-size:12.5px;letter-spacing:.05em}

  /* --- koláž jako široký nízký pruh, ne čtverec přes půl displeje --- */
  /* Koláž jako krátký pruh: 5 fotek ve dvou řadách, pevná výška.
     aspect-ratio tu nestačí — mřížka se nafoukne podle obrázků. */
  .stack{aspect-ratio:auto !important;height:214px;gap:7px;margin-bottom:14px;max-width:none;
    grid-template-columns:repeat(3,1fr) !important;grid-template-rows:1.3fr 1fr !important}
  .stack figure,.stack .s4,.stack .s5{border-width:2px;border-radius:12px;
    min-height:0;min-width:0;height:auto}
  .stack img{min-height:0;height:100%}
  .stack .s1{grid-column:1 / 3 !important;grid-row:1 !important}
  .stack .s5{grid-column:3 !important;grid-row:1 !important;display:block !important}
  .stack .s2{grid-column:1 !important;grid-row:2 !important}
  .stack .s3{grid-column:2 !important;grid-row:2 !important}
  .stack .s4{grid-column:3 !important;grid-row:2 !important}

  /* --- sekce a nadpisy těsněji --- */
  section{padding-top:38px;padding-bottom:38px}
  .sh{margin-bottom:22px}
  .sh h2,h2{font-size:1.5rem;line-height:1.2}
  .kicker{font-size:10px;letter-spacing:.14em}
  .rule{margin-top:12px}
  .svc{padding:13px 14px;gap:12px}
  .svc-ico{width:38px;height:38px}
  .card-b{padding:18px}
  .card-b h3{font-size:1.12rem}
  .card-b p{font-size:14px;line-height:1.6}
  .bento{gap:12px}
  .steps{gap:10px}
  .step{padding:16px}
  .prose p{font-size:.95rem}
  .ft{padding-top:34px}
}

/* --- EFEKTY NA MOBILU ---------------------------------------- */
/* menu se vysouvá, položky naskakují po sobě */
@media(max-width:1200px){
  .hdr-in .nav.open{
    animation:menu-dolu .34s cubic-bezier(.2,.75,.3,1) backwards}
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub{
    animation:menu-polozka .42s cubic-bezier(.2,.7,.3,1) backwards}
  .hdr-in .nav.open > *:nth-child(1){animation-delay:.04s}
  .hdr-in .nav.open > *:nth-child(2){animation-delay:.08s}
  .hdr-in .nav.open > *:nth-child(3){animation-delay:.12s}
  .hdr-in .nav.open > *:nth-child(4){animation-delay:.16s}
  .hdr-in .nav.open > *:nth-child(5){animation-delay:.2s}
  .hdr-in .nav.open > *:nth-child(6){animation-delay:.24s}
  .burger span,.burger span::before,.burger span::after{
    transition:transform .3s cubic-bezier(.2,.75,.3,1),background .2s,top .3s}
}
@keyframes menu-dolu{from{transform:translateY(-10px)}to{transform:none}}
@keyframes menu-polozka{from{transform:translateY(14px)}to{transform:none}}

/* fotky v koláži a v galerii naskakují s lehkým přiblížením */
@media(max-width:720px){
  /* animace, ne transition navázaná na třídu .in — koláž ji nikdy nedostane,
     fotky by pak zůstaly neviditelné */
  .stack figure{opacity:1;animation:foto-nabeh .62s cubic-bezier(.2,.7,.3,1) backwards}
  .stack figure:nth-child(1){animation-delay:.05s}
  .stack figure:nth-child(2){animation-delay:.12s}
  .stack figure:nth-child(3){animation-delay:.19s}
  .stack figure:nth-child(4){animation-delay:.26s}
  .stack figure:nth-child(5){animation-delay:.33s}
  /* karty a dlaždice se zvednou při doteku */
  .card-b:active,.svc:active,.gal figure:active,.srt-p:active{
    transform:scale(.985);transition:transform .12s}
}
@keyframes foto-nabeh{from{transform:translateY(16px) scale(.97)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .hdr-in .nav.open,.hdr-in .nav.open > a,.hdr-in .nav.open .has-sub,
  .stack figure{animation:none !important}
}

/* ============================================================
   MOBIL v3 — menu, hero, text
   ============================================================ */

/* --- spodní lišta uvnitř otevřeného menu (jinak zakrývala Kontakt) --- */
.mbar.v-menu{position:static;display:flex;gap:9px;padding:0 0 20px;
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  z-index:auto;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mbar.v-menu .btn{flex:1;padding:14px 12px;font-size:12.5px}
@media(max-width:1200px){
  .hdr-in .nav.open{padding-top:78px}
  /* poslední položka musí být dosažitelná */
  .hdr-in .nav.open > a:last-child{margin-bottom:26px}
}

/* --- HERO: vzdušnější nadpis, klidnější horní řádek, čitelnější text --- */
@media(max-width:720px){
  /* horní řádek bez „bubliny" — jen čistá linka s tečkou */
  .hero .pill{background:none;border:0;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;padding:0;margin-bottom:18px;
    font-size:13px;font-weight:600;color:var(--blue-dk);letter-spacing:.005em;
    line-height:1.5;gap:9px}
  .hero .pill .pill-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(61,141,191,.16);
    animation:none;margin-top:6px}

  /* nadpis: víc místa mezi řádky, ať není namačkaný */
  .hero-text h1,.hero-h1{font-size:1.72rem;line-height:1.28;letter-spacing:-.022em;
    margin-bottom:18px}
  .hero-text h1 span,.hero-h1 span{display:inline}

  /* text: kratší řádky se vzduchem, bez pruhu přes celou výšku */
  .hero-text > p{font-size:.97rem;line-height:1.75;padding-left:0;border-left:0;
    color:var(--ink-2)}
  .hero-text > p + p{margin-top:13px}
}

/* na počítači ať oba odstavce drží jeden svislý pruh, ne dva přerušené */
@media(min-width:721px){
  .hero-text > p + p{margin-top:0;padding-top:14px}
}

/* Menu dědí z desktopové hlavičky justify-content:center. Když je obsah vyšší
   než obrazovka, vycentrování ho vystrčí nad horní okraj a nejde tam doscrollovat. */
@media(max-width:1200px){
  .hdr-in .nav.open{justify-content:flex-start}
}

/* ============================================================
   MOBIL v4 — vzduch v hero, klikací služby, kratší menu
   ============================================================ */

/* --- 1) klikací dlaždice služeb (šest, co mají vlastní stránku) --- */
a.svc{text-decoration:none;position:relative;padding-right:38px}
a.svc .svc-sip{position:absolute;right:14px;top:50%;margin-top:-9px;
  width:18px;height:18px;color:var(--blue);opacity:.55;transition:.25s}
a.svc:hover .svc-sip{opacity:1;transform:translateX(3px)}
a.svc:hover{border-color:rgba(127,189,227,.9)}
a.svc span:not(.svc-ico){color:var(--ink)}

@media(max-width:720px){
  /* --- 2) HERO: nadpis nesmí sedět na fotkách --- */
  .hero-text h1,.hero-h1{margin-bottom:26px}
  .stack{margin-top:2px;margin-bottom:26px}

  /* text vzdušnější a o stupeň větší, ať se dobře čte */
  .hero-text > p{font-size:1.02rem;line-height:1.82;letter-spacing:.002em;
    color:#44536b}
  .hero-text > p + p{margin-top:16px}
  /* první věta jako uvozovací — dává odstavci hierarchii */
  .hero-text > p.hero-label + p{font-size:1.09rem;line-height:1.72;color:var(--ink);
    font-weight:500}

  /* --- 3) MENU: celé na jednu obrazovku, bez rolování --- */
  .hdr-in .nav.open{padding:72px 20px 16px}
  .mbar.v-menu{padding:0 0 12px;margin-bottom:4px}
  .mbar.v-menu .btn{padding:11px 10px;font-size:11.5px}
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub > a{
    padding:9px 2px;font-size:14.5px;line-height:1.25}
  .hdr-in .nav.open .sub{padding:0 0 6px 12px}
  .hdr-in .nav.open .sub a{padding:6px 0;font-size:13px;line-height:1.3}
  .hdr-in .nav.open > a:last-child{margin-bottom:0}
}

/* ============================================================
   MOBIL v5 — tlačítka na konec menu, čitelnější text v hero
   ============================================================ */

/* tlačítka jsou teď poslední prvek menu → dělicí čára nahoře, ne dole */
.mbar.v-menu{border-bottom:0;border-top:1px solid var(--line);
  padding:14px 0 0;margin:8px 0 0}

@media(max-width:720px){
  /* Text splýval s pozadím: světlá modrošedá na světlém podkladu,
     a k tomu za ním prosvítala 3D scéna. Tlumíme pozadí a přitvrzujeme text. */
  /* plátno scény je přímo v body, ne v .hero */
  canvas.scene{opacity:.4}
  .hero-text > p{color:#1f2b3d}
  .hero-text > p.hero-label + p{color:#0f172a;font-weight:500}
  /* jemný světlý podklad pod textem, ať neleží přímo na skle */
  .hero-text > p:not(.hero-label){
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));
    border-radius:12px;padding:14px 15px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 14px rgba(15,23,42,.05)}
  .hero-text > p + p{margin-top:10px}
}

/* ============================================================
   MOBIL v6 — míň cetek, klidnější hero
   Ondra: bublina pod textem pryč, nadpis menší, tečka a pomlčka pryč
   ============================================================ */

/* WhatsApp přečníval přes otevřené menu */
body.menu-otevrene .wa{opacity:0;pointer-events:none;transition:opacity .2s}

@media(max-width:720px){
  /* --- karta pod textem pryč, zůstává jen tmavý čitelný text --- */
  .hero-text > p:not(.hero-label){
    background:none;box-shadow:none;border-radius:0;padding:0}
  .hero-text > p + p{margin-top:14px}

  /* --- horní řádek bez tečky, zarovnaný na účaří --- */
  .hero .pill{display:block;gap:0;font-size:12.5px;font-weight:500;
    color:#3f5570;letter-spacing:.01em;line-height:1.55;margin-bottom:22px;
    max-width:34ch}
  .hero .pill .pill-dot{display:none}

  /* --- jmenovka bez pomlčky --- */
  .hero-text > p.hero-label{font-size:10.5px;letter-spacing:.2em;
    color:var(--blue-dk);margin-bottom:9px}
  .hero-text > p.hero-label::before{display:none}

  /* --- nadpis menší a s prostorem, ať nesedí na fotkách --- */
  /* pozor: .hero-text h1.hero-h1{margin-bottom:0} na ř. ~1269 má vyšší
     specificitu — bez stejně silného selektoru nadpis sedí přímo na fotkách */
  .hero-text h1.hero-h1,.hero-text h1,.hero-h1{
    font-size:1.46rem;line-height:1.32;letter-spacing:-.018em;
    margin-bottom:30px;max-width:19ch}
  .stack{margin-top:0;margin-bottom:28px}
}

/* ============================================================
   MOBIL v7 — hero podle Ondrovy skici
   Pořadí: NADPIS → jmenovka → věta → text → fotky → text → tlačítka
   ============================================================ */
@media(max-width:720px){
  /* align-items:center z desktopu centruje ve sloupci vodorovně — jmenovka
     a věta se pak odsadí doprava, protože mají omezenou šířku */
  .hero-grid{align-items:stretch}
  .hero{padding-top:20px}

  /* nadpis je hlavní prvek stránky */
  .hero-text h1.hero-h1,.hero-text h1,.hero-h1{
    order:1;font-size:2.12rem;line-height:1.18;letter-spacing:-.03em;
    margin:0 0 16px;max-width:none;font-weight:800}
  .hero-text h1.hero-h1 span,.hero-h1 span{display:block;color:var(--blue)}

  /* jmenovka hned pod nadpisem */
  .hero-text > p:nth-of-type(1){order:2;margin:0 0 10px;
    font-size:10.5px;letter-spacing:.2em;color:var(--blue-dk)}

  /* věta „Potřebujete něco ze skla?" */
  .hero .pill{order:3;margin:0 0 20px;font-size:13px;color:#3f5570;
    line-height:1.55;max-width:32ch}

  /* první odstavec */
  .hero-text > p:nth-of-type(2){order:4;margin:0 0 22px;
    font-size:1rem;line-height:1.78;color:#1f2b3d}

  /* fotky */
  .stack{order:5;margin:0 0 22px}

  /* druhý odstavec */
  .hero-text > p:nth-of-type(3){order:6;margin:0;
    font-size:.97rem;line-height:1.78;color:#3a4a61}

  .hero-btns{order:7;margin-top:24px !important}
}

/* ============================================================
   MOBIL v8 — čitelnost jmenovky, věty a textu
   Ondra: „prosvítá strašně do pozadí, musí to být výrazný"
   ============================================================ */
@media(max-width:720px){
  /* jmenovka: výraznější, ne šedivá skvrna */
  .hero-text > p:nth-of-type(1),.hero-label{
    font-size:11px;font-weight:800;letter-spacing:.185em;color:#0a4b86}

  /* věta „Potřebujete něco ze skla?" — tmavá, polotučná, s modrým proužkem */
  .hero .pill{color:#16233a;font-weight:600;font-size:13.5px;line-height:1.55;
    padding-left:13px;border-left:3px solid var(--blue);max-width:33ch;
    margin:0 0 22px}

  /* hlavní text: tmavší a s výraznější první větou */
  .hero-text > p:nth-of-type(2){color:#16233a;font-size:1.04rem;line-height:1.75;
    font-weight:450}
  .hero-text > p:nth-of-type(3){color:#2b3a52;font-size:.98rem;line-height:1.78}
}

/* ============================================================
   MOBIL v9 — jiné písmo v hero, klidnější věta, výraznější jmenovka
   ============================================================ */
@media(max-width:720px){
  /* --- text v hero serifem (Lora) místo univerzálního Interu --- */
  .hero-text > p:nth-of-type(2),
  .hero-text > p:nth-of-type(3){
    font-family:'Lora',Georgia,'Times New Roman',serif;
    letter-spacing:.002em}
  .hero-text > p:nth-of-type(2){font-size:1.06rem;line-height:1.82;font-weight:500;
    color:#16233a}
  .hero-text > p:nth-of-type(3){font-size:1.01rem;line-height:1.82;font-weight:400;
    color:#2b3a52}

  /* --- věta bez proužku, rovnoměrně zalomená --- */
  .hero .pill{border-left:0;padding-left:0;max-width:30ch;
    text-wrap:balance;font-weight:600;font-size:13.5px;color:#16233a;
    margin:0 0 24px}

  /* --- jmenovka: větší a sytější, ať nezapadá --- */
  .hero-text > p:nth-of-type(1),.hero-label{
    font-size:11.5px;font-weight:800;letter-spacing:.2em;color:#0a4b86;
    margin:0 0 12px}
}

/* ============================================================
   VARIANTY POZADÍ — přepínají se třídou na <html>
   poz-1 … poz-5. Bez třídy platí současné pozadí.
   ============================================================ */

/* ---------- 1) ČISTÁ BÍLÁ — maximální klid, text vynikne ---------- */
html.poz-1{background:#fff}
html.poz-1 body::before{background:#fff}
html.poz-1 body::after{display:none}
html.poz-1 canvas.scene{display:none}
html.poz-1 .tint{background:#f7f9fb}
html.poz-1 .ph{background:#fbfcfd}
html.poz-1 .hero{background:#fff}

/* ---------- 2) STUDENÉ SKLO — dnešní, jen zklidněné ---------- */
html.poz-2{background:#eef4fa}
html.poz-2 body::before{background:
  radial-gradient(900px 560px at 8% -6%, rgba(127,189,227,.22), transparent 62%),
  radial-gradient(820px 520px at 96% 2%, rgba(61,141,191,.13), transparent 64%),
  linear-gradient(180deg,#fdfeff 0%,#f4f9fd 55%,#eef5fb 100%)}
html.poz-2 body::after{display:none}
html.poz-2 canvas.scene{display:block;opacity:.22}
html.poz-2 .tint{background:rgba(246,250,253,.86)}
html.poz-2 .hero{background:transparent}

/* ---------- 3) TEPLÁ BÍLÁ — papírový, řemeslný dojem ---------- */
html.poz-3{background:#faf8f5}
html.poz-3 body::before{background:
  radial-gradient(900px 600px at 15% -8%, rgba(214,196,168,.20), transparent 62%),
  linear-gradient(180deg,#fdfbf8 0%,#f8f5f0 100%)}
html.poz-3 body::after{display:block;opacity:.5;
  background-image:radial-gradient(rgba(150,130,100,.16) .6px,transparent .6px);
  background-size:4px 4px;-webkit-mask-image:none;mask-image:none}
html.poz-3 canvas.scene{display:none}
html.poz-3 .tint{background:#f5f1ea}
html.poz-3 .ph{background:#fbf9f5}
html.poz-3 .hero{background:transparent}
html.poz-3 .svc,html.poz-3 .card,html.poz-3 .card-b,
html.poz-3 .tbl-wrap,html.poz-3 .pdf{background:#fffdfa;border-color:#e8e0d4}

/* ---------- 4) TMAVÁ — prémiový, futuristický dojem ---------- */
html.poz-4{background:#0b1220}
html.poz-4 body{color:#dbe6f2}
html.poz-4 body::before{background:
  radial-gradient(900px 620px at 12% -10%, rgba(61,141,191,.28), transparent 60%),
  radial-gradient(820px 560px at 92% 6%, rgba(24,74,124,.34), transparent 62%),
  linear-gradient(180deg,#0d1626 0%,#0a111d 60%,#080e18 100%)}
html.poz-4 body::after{display:block;opacity:.3;
  background-image:linear-gradient(rgba(127,189,227,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,189,227,.10) 1px,transparent 1px);
  background-size:72px 72px}
html.poz-4 canvas.scene{display:block;opacity:.3}
html.poz-4 .hdr{background:rgba(11,18,32,.88);border-bottom-color:#1d2a3e}
html.poz-4 .logo-txt b,html.poz-4 h1,html.poz-4 h2,html.poz-4 h3,
html.poz-4 .hero-text h1{color:#eef5fc}
html.poz-4 .logo-txt small,html.poz-4 .kicker,html.poz-4 .crumb{color:#8fa8c2}
html.poz-4 .nav > a,html.poz-4 .has-sub > a{color:#cfdcea}
html.poz-4 .hero-text > p,html.poz-4 p,html.poz-4 li,html.poz-4 td{color:#c3d2e3}
html.poz-4 .tint{background:rgba(16,25,42,.72);border-color:#1b273a}
html.poz-4 .ph{background:rgba(14,22,38,.7);border-bottom-color:#1b273a}
html.poz-4 .svc,html.poz-4 .card,html.poz-4 .card-b,html.poz-4 .ct-card,
html.poz-4 .tbl-wrap,html.poz-4 .pdf,html.poz-4 .step,html.poz-4 form{
  background:rgba(20,31,50,.82);border-color:#22314a;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35)}
html.poz-4 thead th{background:#16233a;color:#bcd2e8;border-bottom-color:#22314a}
html.poz-4 tbody td{border-bottom-color:#1c2a41}
html.poz-4 tbody tr:hover td{background:rgba(61,141,191,.10)}
html.poz-4 .burger{background:#16233a;border-color:#27374f}
html.poz-4 .burger span,html.poz-4 .burger span::before,
html.poz-4 .burger span::after{background:#dbe6f2}
html.poz-4 .hdr-in .nav.open{background:#0d1626}
html.poz-4 .mbar{background:rgba(11,18,32,.94);border-top-color:#1d2a3e}
html.poz-4 .gal figure,html.poz-4 .mosaic figure{background:#16233a}
html.poz-4 .btn-o{color:#9fd0f0;border-color:#2b4a6b}

/* ---------- 5) SVĚTELNÝ ZÁVOJ — sklo bez střepů ---------- */
html.poz-5{background:#fff}
html.poz-5 body::before{background:
  radial-gradient(680px 680px at 78% -12%, rgba(61,141,191,.20), transparent 60%),
  radial-gradient(560px 560px at 6% 18%, rgba(127,189,227,.18), transparent 62%),
  radial-gradient(760px 520px at 50% 112%, rgba(96,170,214,.14), transparent 60%),
  #ffffff}
html.poz-5 body::after{display:none}
html.poz-5 canvas.scene{display:none}
html.poz-5 .tint{background:rgba(247,251,254,.9)}
html.poz-5 .ph{background:rgba(250,252,254,.8)}
html.poz-5 .hero{background:transparent}

/* Hero má fotku skleněné budovy s !important — varianty ji musí přebít stejně. */
html.poz-1 .hero{background:#fff !important}
html.poz-2 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(250,253,255,.72) 45%,rgba(246,251,254,.92) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
html.poz-3 .hero{background:
  linear-gradient(180deg,#fdfbf8 0%,#faf7f2 100%) !important}
html.poz-4 .hero{background:
  radial-gradient(760px 460px at 20% 12%, rgba(61,141,191,.22), transparent 62%),
  linear-gradient(180deg,rgba(11,18,32,.92) 0%,rgba(10,17,29,.95) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
html.poz-5 .hero{background:
  radial-gradient(620px 520px at 82% -6%, rgba(61,141,191,.16), transparent 62%),
  radial-gradient(520px 480px at 4% 24%, rgba(127,189,227,.14), transparent 64%),
  #ffffff !important}

/* tmavá: text v hero musí zůstat čitelný i přes fotku */
html.poz-4 .hero-text h1,html.poz-4 .hero-h1{color:#f2f8ff !important}
html.poz-4 .hero-h1 span{color:#6cc4ff !important}
html.poz-4 .hero-label,html.poz-4 .hero-text > p:nth-of-type(1){color:#7cc3f0 !important}
html.poz-4 .pill{color:#dce9f7 !important}
html.poz-4 .hero-text > p:nth-of-type(2){color:#dbe7f5 !important}
html.poz-4 .hero-text > p:nth-of-type(3){color:#b8c9de !important}
html.poz-4 .svc span:not(.svc-ico),html.poz-4 .card-b h3{color:#e8f1fa !important}
html.poz-4 .price{color:#7cc3f0}
html.poz-4 .ft{background:#070d16}

/* ---------- 6) EDITORIAL — bílá, černý text, tenké linky, žádné přechody ---------- */
html.poz-6{background:#fff}
html.poz-6 body::before{background:#fff}
html.poz-6 body::after{display:none}
html.poz-6 canvas.scene{display:none}
html.poz-6 .hero{background:#fff !important}
html.poz-6 .tint{background:#fff;border-top:1px solid #111;border-bottom:1px solid #111}
html.poz-6 .ph{background:#fff;border-bottom:1px solid #111}
html.poz-6 .hdr{background:#fff;border-bottom:1px solid #111;backdrop-filter:none}
html.poz-6 h1,html.poz-6 h2,html.poz-6 h3,html.poz-6 .hero-h1{color:#0b0b0c !important}
html.poz-6 .hero-h1 span{color:#0b0b0c !important}
html.poz-6 .hero-label,html.poz-6 .hero-text > p:nth-of-type(1){color:#0b0b0c !important}
html.poz-6 .kicker{color:#0b0b0c}
html.poz-6 .rule{background:#0b0b0c;height:2px}
html.poz-6 .hero-text > p{color:#26282c !important}
html.poz-6 .svc,html.poz-6 .card,html.poz-6 .card-b,html.poz-6 .ct-card,
html.poz-6 .tbl-wrap,html.poz-6 .pdf,html.poz-6 .step{
  background:#fff;border:1px solid #0b0b0c;border-radius:0;box-shadow:none}
html.poz-6 .gal figure,html.poz-6 .mosaic figure,html.poz-6 .stack figure{border-radius:0}
html.poz-6 .btn{border-radius:0}
html.poz-6 .btn-p{background:#0b0b0c;border-color:#0b0b0c}
html.poz-6 .btn-o{border-color:#0b0b0c;color:#0b0b0c}
html.poz-6 .svc-ico{background:#0b0b0c !important;box-shadow:none !important;border-radius:0}
html.poz-6 thead th{background:#f2f2f3;color:#0b0b0c}

/* ---------- 7) ANTRACIT + JANTAR — tmavá s teplým akcentem ---------- */
html.poz-7{background:#16161a}
html.poz-7 body{color:#e6e2da}
html.poz-7 body::before{background:
  radial-gradient(880px 600px at 14% -8%, rgba(214,158,74,.16), transparent 60%),
  linear-gradient(180deg,#1a1a1f 0%,#141418 60%,#101014 100%)}
html.poz-7 body::after{display:none}
html.poz-7 canvas.scene{display:none}
html.poz-7 .hero{background:
  linear-gradient(180deg,rgba(22,22,26,.90) 0%,rgba(18,18,22,.95) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
html.poz-7 .hdr{background:rgba(22,22,26,.92);border-bottom-color:#2b2b31}
html.poz-7 h1,html.poz-7 h2,html.poz-7 h3,html.poz-7 .hero-h1{color:#f4efe6 !important}
html.poz-7 .hero-h1 span{color:#e0a95a !important}
html.poz-7 .hero-label,html.poz-7 .hero-text > p:nth-of-type(1),
html.poz-7 .kicker{color:#e0a95a !important}
html.poz-7 .hero-text > p:nth-of-type(2){color:#ddd6ca !important}
html.poz-7 .hero-text > p:nth-of-type(3){color:#b3aa9c !important}
html.poz-7 .pill{color:#ddd6ca !important}
html.poz-7 p,html.poz-7 li,html.poz-7 td{color:#c9c1b4}
html.poz-7 .nav > a,html.poz-7 .has-sub > a{color:#ddd6ca}
html.poz-7 .logo-txt b{color:#f4efe6}
html.poz-7 .logo-txt small{color:#a09789}
html.poz-7 .tint{background:rgba(26,26,31,.8);border-color:#2b2b31}
html.poz-7 .ph{background:rgba(22,22,26,.8);border-bottom-color:#2b2b31}
html.poz-7 .svc,html.poz-7 .card,html.poz-7 .card-b,html.poz-7 .ct-card,
html.poz-7 .tbl-wrap,html.poz-7 .pdf,html.poz-7 .step,html.poz-7 form{
  background:rgba(30,30,36,.86);border-color:#33333b;box-shadow:none}
html.poz-7 .svc span:not(.svc-ico),html.poz-7 .card-b h3{color:#f0ebe2 !important}
html.poz-7 .svc-ico{background:linear-gradient(135deg,#e0a95a,#a9762d) !important;
  box-shadow:none !important}
html.poz-7 .btn-p{background:#e0a95a;border-color:#e0a95a;color:#1a1a1f}
html.poz-7 .btn-o{border-color:#5a5347;color:#e0a95a}
html.poz-7 .price{color:#e0a95a}
html.poz-7 thead th{background:#22222a;color:#d8cfbf;border-bottom-color:#33333b}
html.poz-7 tbody td{border-bottom-color:#2a2a32}
html.poz-7 .burger{background:#22222a;border-color:#3a3a44}
html.poz-7 .burger span,html.poz-7 .burger span::before,
html.poz-7 .burger span::after{background:#e6e2da}
html.poz-7 .hdr-in .nav.open{background:#16161a}
html.poz-7 .mbar{background:rgba(22,22,26,.95);border-top-color:#2b2b31}
html.poz-7 .gal figure,html.poz-7 .mosaic figure{background:#22222a}
html.poz-7 .ft{background:#0e0e11}

/* tlačítka mají jinde přechod přes background-image — varianty ho musí vypnout */
html.poz-7 .btn-p{background-image:none !important;background-color:#e0a95a !important;
  color:#1a1a1f !important;box-shadow:none !important}
html.poz-7 .btn-o{background-image:none !important;background-color:transparent !important}
html.poz-6 .btn-p{background-image:none !important;background-color:#0b0b0c !important;
  box-shadow:none !important}
html.poz-6 .btn-o{background-image:none !important;background-color:transparent !important}
html.poz-6 .svc-ico{background-image:none !important;background-color:#0b0b0c !important}
html.poz-6 .btn-p{color:#fff !important}
html.poz-6 .btn-p svg,html.poz-7 .btn-p svg{color:currentColor}
html.poz-7 .btn-o{color:#e0a95a !important;border-color:#5a5347 !important}
html.poz-6 .btn-o{color:#0b0b0c !important;border-color:#0b0b0c !important}

/* ============================================================
   VARIANTY 8–13
   8–10 = obměny tří, které se Ondrovi líbí (teď / studené sklo / teplá bílá)
   11–13 = úplně jiná skleněná pozadí
   ============================================================ */

/* ---------- 8) TEĎ, ale zklidněné — méně střepů, jemnější mřížka ---------- */
html.poz-8{background:#eef4fa}
html.poz-8 body::before{background:
  radial-gradient(1000px 640px at 8% -10%, rgba(127,189,227,.26), transparent 62%),
  radial-gradient(880px 560px at 96% 4%, rgba(61,141,191,.15), transparent 64%),
  linear-gradient(178deg,#fdfeff 0%,#f5fafd 45%,#edf4fa 100%)}
html.poz-8 body::after{display:block;opacity:.3;
  background-image:
    linear-gradient(rgba(61,141,191,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,141,191,.07) 1px,transparent 1px);
  background-size:96px 96px}
html.poz-8 canvas.scene{display:block;opacity:.3}
html.poz-8 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(250,253,255,.62) 45%,rgba(246,251,254,.9) 100%),
  url('../img/brand/hero-glass.webp') center/cover no-repeat !important}

/* ---------- 9) STUDENÉ SKLO bez fotky — čistý přechod a měkké světlo ---------- */
html.poz-9{background:#f0f6fb}
html.poz-9 body::before{background:
  radial-gradient(760px 620px at 84% -8%, rgba(96,170,214,.24), transparent 60%),
  radial-gradient(620px 560px at 4% 22%, rgba(150,205,236,.22), transparent 62%),
  linear-gradient(180deg,#fbfdff 0%,#f2f8fc 60%,#eaf3fa 100%)}
html.poz-9 body::after{display:none}
html.poz-9 canvas.scene{display:block;opacity:.2}
html.poz-9 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.55),rgba(244,250,254,.82)) !important}
html.poz-9 .tint{background:rgba(246,251,254,.88)}

/* ---------- 10) TEPLÁ BÍLÁ s měkkým světlem — bez zrna, se závanem ---------- */
html.poz-10{background:#faf7f3}
html.poz-10 body::before{background:
  radial-gradient(820px 600px at 78% -8%, rgba(226,201,160,.26), transparent 60%),
  radial-gradient(640px 520px at 6% 26%, rgba(214,222,214,.20), transparent 62%),
  linear-gradient(180deg,#fefcf9 0%,#faf7f2 58%,#f6f2ec 100%)}
html.poz-10 body::after{display:none}
html.poz-10 canvas.scene{display:none}
html.poz-10 .hero{background:
  linear-gradient(180deg,rgba(255,253,250,.86),rgba(250,246,240,.94)) !important}
html.poz-10 .tint{background:#f6f2ea}
html.poz-10 .ph{background:#fbf8f4}
html.poz-10 .svc,html.poz-10 .card,html.poz-10 .card-b,
html.poz-10 .tbl-wrap,html.poz-10 .pdf{background:#fffdfa;border-color:#e9e2d7}

/* ---------- 11) SKLENĚNÉ TABULE — vrstvené šikmé desky skla ---------- */
html.poz-11{background:#eef5fb}
html.poz-11 body::before{background:
  linear-gradient(180deg,#fbfdff 0%,#f1f7fc 55%,#e9f2fa 100%)}
html.poz-11 body::after{display:block;opacity:1;
  -webkit-mask-image:none;mask-image:none;
  background:
    linear-gradient(112deg,transparent 18%,rgba(255,255,255,.66) 18.4%,rgba(198,228,247,.34) 30%,transparent 30.4%),
    linear-gradient(112deg,transparent 44%,rgba(255,255,255,.55) 44.4%,rgba(171,213,240,.26) 58%,transparent 58.4%),
    linear-gradient(112deg,transparent 70%,rgba(255,255,255,.6) 70.4%,rgba(210,234,249,.28) 84%,transparent 84.4%),
    linear-gradient(68deg,transparent 60%,rgba(255,255,255,.4) 60.3%,rgba(226,241,251,.2) 72%,transparent 72.3%)}
html.poz-11 canvas.scene{display:none}
html.poz-11 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.5),rgba(246,251,254,.78)) !important}
html.poz-11 .tint{background:rgba(247,251,254,.86)}

/* ---------- 12) LOM SVĚTLA — barevné rozptyly jako světlo přes sklo ---------- */
html.poz-12{background:#fff}
html.poz-12 body::before{background:
  radial-gradient(620px 460px at 16% 6%, rgba(112,196,255,.22), transparent 62%),
  radial-gradient(520px 420px at 82% 16%, rgba(176,158,255,.17), transparent 62%),
  radial-gradient(560px 440px at 64% 86%, rgba(126,232,214,.16), transparent 62%),
  radial-gradient(460px 380px at 10% 78%, rgba(255,214,150,.13), transparent 62%),
  #ffffff}
html.poz-12 body::after{display:none}
html.poz-12 canvas.scene{display:none}
html.poz-12 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.76)) !important}
html.poz-12 .tint{background:rgba(252,253,255,.84)}

/* ---------- 13) HLOUBKA — 3D scéna výrazně, ale měkce ---------- */
html.poz-13{background:#e8f1f9}
html.poz-13 body::before{background:
  radial-gradient(1100px 700px at 50% -14%, rgba(255,255,255,.9), transparent 58%),
  linear-gradient(180deg,#f4fafe 0%,#e9f2fa 60%,#dfecf7 100%)}
html.poz-13 body::after{display:block;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 100% 72% at 50% 26%,#000 0%,transparent 84%);
  mask-image:radial-gradient(ellipse 100% 72% at 50% 26%,#000 0%,transparent 84%);
  background-image:
    repeating-linear-gradient(104deg,rgba(61,141,191,.07) 0 1px,transparent 1px 110px),
    repeating-linear-gradient(76deg,rgba(61,141,191,.05) 0 1px,transparent 1px 140px);
  background-size:auto}
html.poz-13 canvas.scene{display:block;opacity:.85;mix-blend-mode:multiply}
html.poz-13 .hero{background:
  linear-gradient(180deg,rgba(255,255,255,.34),rgba(245,251,254,.62)) !important}
html.poz-13 .tint{background:rgba(247,251,254,.7)}
html.poz-13 .ph{background:rgba(244,250,254,.6)}


/* ============================================================
   NASAZENÝ VZHLED = VARIANTA 8 („Teď, ale zklidněné")
   POUZE NA MOBILU (do 720 px). Ondra chce na počítači
   nechat původní vzhled, na telefonu tuhle zklidněnou osmičku.
   Bloky html.poz-1 … poz-13 výše zůstávají, mají vyšší
   specificitu, takže náhled v _mobil.html / _pozadi.html
   je pořád možné přepínat.
   ============================================================ */
@media(max-width:720px){
  html{background:#eef4fa}
  html body::before{background:
    radial-gradient(1000px 640px at 8% -10%, rgba(127,189,227,.26), transparent 62%),
    radial-gradient(880px 560px at 96% 4%, rgba(61,141,191,.15), transparent 64%),
    linear-gradient(178deg,#fdfeff 0%,#f5fafd 45%,#edf4fa 100%)}
  html body::after{display:block;opacity:.3;
    background-image:
      linear-gradient(rgba(61,141,191,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(61,141,191,.07) 1px,transparent 1px);
    background-size:96px 96px}
  html canvas.scene{display:block;opacity:.3}
  html .hero{background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(250,253,255,.62) 45%,rgba(246,251,254,.9) 100%),
    url('../img/brand/hero-glass.webp') center/cover no-repeat !important}
}


/* ============================================================
   POČÍTAČ = NĚCO MEZI (v96)
   Ondra: „nemůžeš udělat něco mezi mobilní a počítačovou verzí?"
   Původní počítačový vzhled byl moc rozzářený, osmička zase
   moc utlumená. Tohle je půlka cesty — plus přenesené doladění
   z mobilu: klidnější věta v bublině a serifové písmo v hero.
   Platí od 721 px výš, mobil (blok níž/výš pro ≤720) se nemění.
   ============================================================ */
@media(min-width:721px){

  /* ---------- pozadí: půl cesty mezi původním a osmičkou ---------- */
  html{background:#f4f9fd}
  html body::before{background:
    radial-gradient(1000px 640px at 8% -10%, rgba(127,189,227,.17), transparent 62%),
    radial-gradient(880px 560px at 96% 4%, rgba(61,141,191,.10), transparent 64%),
    linear-gradient(178deg,#fdfeff 0%,#f7fbfd 46%,#f1f7fc 100%)}
  /* mřížka se vrací, ale sotva znatelně (mobil má .3 / 96 px, dřív byla vypnutá) */
  html body::after{display:block;opacity:.2;
    background-image:
      linear-gradient(rgba(61,141,191,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(61,141,191,.07) 1px,transparent 1px);
    background-size:110px 110px}
  /* 3D scéna: dřív naplno, na mobilu .3 → tady mezi */
  html canvas.scene{display:block;opacity:.62}

  /* hero: jedna jemná záře místo dvou, o kousek hustší bílý závoj */
  html .hero{background:
    radial-gradient(760px 440px at 24% 18%, rgba(0,150,255,.07), transparent 66%),
    linear-gradient(180deg,rgba(255,255,255,.68) 0%,rgba(250,253,255,.57) 44%,rgba(247,251,254,.88) 100%),
    url('../img/brand/hero-glass.webp') center/cover no-repeat !important}

  /* ---------- věta „Potřebujete něco ze skla?" — klidnější ---------- */
  /* byla to svítící bublina s dvojitým stínem a pulzující tečkou */
  .hero .pill{
    background:rgba(255,255,255,.60);
    border:1px solid rgba(188,214,235,.7);
    box-shadow:none;
    color:#16233a;font-weight:600;font-size:13.8px;letter-spacing:.004em;
    padding:9px 18px 9px 14px;margin-bottom:22px}
  .hero .pill .pill-dot{width:7px;height:7px;animation:none;
    background:var(--blue);
    box-shadow:0 0 0 3px rgba(61,141,191,.14)}

  /* ---------- písmo v hero jako na mobilu: serif a tmavší ---------- */
  .hero-text > p:nth-of-type(2),
  .hero-text > p:nth-of-type(3){
    font-family:'Lora',Georgia,'Times New Roman',serif;letter-spacing:.002em}
  .hero-text > p:nth-of-type(2){font-size:1.12rem;line-height:1.78;font-weight:500;
    color:#16233a}
  .hero-text > p:nth-of-type(3){font-size:1.05rem;line-height:1.8;font-weight:400;
    color:#2b3a52}

  /* jmenovka o chlup sytější, ať nezapadá do fotky */
  .hero-text > p.hero-label{font-size:12px;font-weight:800;letter-spacing:.19em}
}


/* ============================================================
   VLNY A VÝRAZNĚJŠÍ VĚTA V HERO (v97)
   Ondra: menu se má rozbalovat „po pořadě, jako vlna", sekce se
   mají při rolování načítat postupně a věta „Potřebujete něco
   ze skla?" splývala s odstavcem pod ní.
   ============================================================ */

/* ---------- 1) vlna v mobilním menu ---------- */
/* Řádky (hlavní odkazy, podpoložky i tlačítka na konci) naskakují po sobě.
   Zpoždění nastavuje main.js do --vd, třídu .vlna přidá až o dva snímky
   později, aby se přechod opravdu spustil.
   ⚠️ Schválně PŘECHOD, ne @keyframes — animace se ve skrytém dokumentu
   nespustí a položky by zůstaly natrvalo neviditelné. */
@media(max-width:1200px){
  /* ⚠️ výchozí stav BEZ přechodu — jinak řádek nejdřív viditelně zmizí
     (1 → 0) a teprve pak se vrací, což prolikne při každém otevření */
  .hdr-in .nav.open .vlna-p{
    opacity:0;transform:translateY(14px);transition:none}
  .hdr-in .nav.open.vlna .vlna-p{
    opacity:1;transform:none;
    transition:opacity .34s cubic-bezier(.2,.7,.3,1),
               transform .34s cubic-bezier(.2,.7,.3,1);
    transition-delay:var(--vd,0ms)}
  /* starý společný posun celého bloku by vlnu přebil (animace vítězí nad přechodem) */
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub{animation:none !important}
}

/* ---------- 2) výraznější vlna sekcí při rolování (mobil) ---------- */
@media(max-width:720px){
  /* i tady kratší — 0,62 s působilo jako pomalé načítání fotek */
  .rv{transform:translateY(16px);
    transition-duration:.34s,.34s}
}

/* ---------- 3) věta „Potřebujete něco ze skla?" ---------- */
/* Měla stejnou barvu i velikost jako odstavec pod sebou, takže splývala.
   Teď je to plochý světle modrý blok — bez stínu a bez záře, aby to zase
   nevypadalo jako ta zamítnutá svítící bublina. */
@media(max-width:720px){
  .hero .pill{
    display:block;
    background:rgba(61,141,191,.11);
    border:0;border-radius:11px;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:11px 14px;margin:0 0 22px;max-width:31ch;
    color:#0b3a63;font-weight:700;font-size:14px;line-height:1.5;
    letter-spacing:.004em;text-wrap:balance}
}


/* ============================================================
   JINÉ PÍSMO, VĚTA BEZ RÁMEČKU (v98) — jen mobil
   Ondra zamítl modrý blok kolem věty („takhle to rozhodně být
   nemůže") i Loru v odstavcích („strašně moc basic").
   Blok tedy mizí úplně a písmo je vyměněné za Fraunces.
   Počítačová verze zůstává, tu chce doladit až potom.
   ============================================================ */
@media(max-width:720px){
  /* Věta „Potřebujete něco ze skla?" — žádná výplň, žádný rámeček,
     žádná linka. Odliší ji barva a to, že je bezpatková proti
     patkovému odstavci pod ní. */
  .hero .pill{
    display:block;background:none;border:0;border-radius:0;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0;margin:0 0 20px;max-width:32ch;
    font-family:var(--ff);font-weight:600;font-size:14px;line-height:1.5;
    letter-spacing:.005em;color:#0a4b86;text-wrap:balance}

  /* Odstavce v hero: Fraunces — měkké patky a vlastní charakter,
     ne univerzální knižní serif. */
  .hero-text > p:nth-of-type(2),
  .hero-text > p:nth-of-type(3){
    font-family:'Fraunces','Lora',Georgia,serif;
    font-optical-sizing:auto;letter-spacing:.001em}
  .hero-text > p:nth-of-type(2){
    font-size:1.04rem;line-height:1.72;font-weight:500;color:#16233a}
  .hero-text > p:nth-of-type(3){
    font-size:.99rem;line-height:1.74;font-weight:400;color:#2b3a52}
}


/* ============================================================
   POČÍTAČOVÉ HERO PODLE ONDROVA ZADÁNÍ (v99)
   Bublina zrušena úplně — její text je teď první, polotučná věta
   prvního odstavce (<strong class="vyzva"> přímo v HTML).
   Pryč i dekorace: svislá modrá čárka u odstavců a pomlčka před
   jmenovkou. Text v hero běží na DM Sans.
   Mobil se nemění — tam věta zůstává na vlastním řádku.
   ============================================================ */

/* mobil: věta si drží dosavadní podobu (vlastní řádek, modrá, bezpatková) */
@media(max-width:720px){
  .hero-text .vyzva{
    display:block;margin:0 0 18px;
    font-family:var(--ff);font-weight:600;font-size:14px;line-height:1.5;
    letter-spacing:.005em;color:#0a4b86}
}

@media(min-width:721px){
  /* 1) výzva jako zvýrazněný začátek odstavce */
  .hero-text .vyzva{font-weight:600;color:#12263f}

  /* 2) úklid dekorací — svislá čárka u odstavců i u jmenovky a pomlčka
     před ní. Odstavec tím sedne přesně na levou hranu nadpisu. */
  .hero-text > p{padding-left:0;border-left:0}
  .hero-label::before,.hero-text > p.hero-label::before{display:none}

  /* 3) text v hero na DM Sans (byla Lora) */
  .hero-text > p:nth-of-type(2),
  .hero-text > p:nth-of-type(3){
    font-family:'DM Sans',var(--ff),system-ui,sans-serif;letter-spacing:0}
  .hero-text > p:nth-of-type(2){
    font-size:1.08rem;line-height:1.72;font-weight:400;color:#1c2a3d}
  .hero-text > p:nth-of-type(3){
    font-size:1.01rem;line-height:1.74;font-weight:400;color:#38495f}
}


/* ============================================================
   VÝZVA V HERO — VLASTNÍ VÝRAZNÝ PRVEK (v100)
   Ondra zamítl i vsazení do odstavce („strašně to zapadá do toho
   textu"). Vrací se pod nadpis na vlastní řádek a musí být vidět
   — na počítači i na mobilu stejně.
   Řešení bez rámečku a bez podkladu (ty zamítl třikrát):
   otázka je samostatný modrý mezinadpis, výzva k akci pod ní.
   ============================================================ */
/* ⚠️ Nadpis má margin-bottom:0 (ř. ~1269), takže bez horního odsazení
   se výzva nalepí přímo pod „a výroba na míru" a vypadá jako třetí
   řádek nadpisu. Odstup shora je tu proto povinný. */
.hero-text .vyzva{
  display:block;font-family:var(--ff);
  margin:32px 0 26px;max-width:34ch;
  font-size:1rem;font-weight:400;color:inherit;letter-spacing:normal;
  line-height:1.4;text-wrap:balance}

/* otázka = malý mezinadpis, tmavší modrá než akcent v nadpisu */
.hero-text .vyzva b{
  display:block;
  font-size:1.22rem;line-height:1.28;font-weight:800;letter-spacing:-.012em;
  color:#0a4b86;margin:0 0 5px}

/* výzva k akci pod ní — tmavá, polotučná, menší */
.hero-text .vyzva span{
  display:block;
  font-size:1.02rem;line-height:1.45;font-weight:600;
  letter-spacing:.002em;color:#1c2a3d}

@media(max-width:720px){
  /* v mobilním pořadí patří hned pod jmenovku, před první odstavec */
  .hero-text .vyzva{order:3;margin:6px 0 22px;max-width:30ch}
  .hero-text .vyzva b{font-size:1.12rem}
  .hero-text .vyzva span{font-size:.97rem}
}


/* ============================================================
   HLAVIČKA NA VELKÝCH DISPLEJÍCH (v104)
   `.hdr-in` je zastropovaná na 1280 px (drží zarovnání s obsahem
   pod sebou). Řádek logo + menu + telefon + tlačítko se do ní
   ale nevešel a `.hdr-right` vyčnívalo ~31 px vpravo, takže
   tlačítko nesedělo na hraně obsahu. Stahujeme proto rovnoměrně
   mezery, odsazení položek a ikonu telefonu.
   ============================================================ */
@media(min-width:1201px){
  .hdr-in{gap:18px}
  .hdr-in .nav > a,.hdr-in .has-sub > a{
    padding-left:8px;padding-right:8px;letter-spacing:.03em}
  .hdr-in .nav > a::after,.hdr-in .has-sub > a::after{left:8px;right:8px}
  .hdr-right{gap:14px}
  .hdr-tel-ico{width:34px;height:34px}
}


/* ============================================================
   ŽÁDNÉ AUTOMATICKÉ ZTMAVENÍ PROHLÍŽEČEM (v105)
   Chrome na Androidu (a Samsung Internet) mají „Auto Dark Theme",
   který weby bez deklarace barevného schématu sám invertuje.
   Web pak vypadal černě a hlavně se TMAVÁ PATIČKA převrátila na
   světlou — její světlý text zůstal světlý a kontakty zmizely.
   `only light` je oficiální způsob, jak z toho web vyřadit.
   ============================================================ */
:root{color-scheme:only light}


/* ============================================================
   MOBIL v10 (v106) — tři věci podle Ondry:
   1) „ať to je víc ze vzdálenosti, ať vidím i ty obrázky"
      → hero se zmenší, koláž fotek vyjede na první obrazovku
   2) „tu lištu nahoře ať je kratší do výšky"
      → nižší hlavička
   3) „lišta chybí nahoře v rozcestníku a nevidím tlačítka,
      musím k nim nejdřív sjet"
      → menu začíná POD hlavičkou (logo zůstává vidět)
        a spodní lišta s tlačítky je přišpendlená dole nad menu
   ============================================================ */
:root{--hdr-mob:70px;--mbar-mob:69px}

@media(max-width:1200px){
  /* --- 2) nižší hlavička --- */
  .hdr-in{min-height:var(--hdr-mob);padding:9px 0;gap:10px}
  .hdr-in .hdr-logo img{height:34px}
  .logo-mark{width:34px;height:34px}
  .logo-txt b{font-size:16.5px}
  .logo-txt small{font-size:9.5px;margin-bottom:3px}
  .burger{width:42px;height:42px}

  /* --- 3) menu pod hlavičkou, tlačítka pořád vidět --- */
  /* .hdr má backdrop-filter, takže je vztažným rámcem pro position:fixed
     uvnitř — `top:100%` proto znamená „těsně pod hlavičkou". */
  .hdr-in .nav.open{
    top:100%;bottom:auto;
    height:calc(100dvh - var(--hdr-mob));
    padding:12px 20px calc(var(--mbar-mob) + 14px);
    border-top:1px solid var(--line);
    /* Starý posun celého bloku (@keyframes menu-dolu) tu už nemá co dělat —
       vlnu dělají jednotlivé řádky. Navíc má fill-mode backwards, takže
       v nevykresleném dokumentu zůstane viset na translateY(-10px)
       a menu se o 10 px nasune na hlavičku. */
    animation:none !important}
  /* lišta s tlačítky musí být NAD menu, jinak ji menu překryje */
  .mbar{z-index:260}
  /* menu je teď nižší → položky o kousek těsněji, ať se seznam vejde */
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub > a{
    padding:8px 0;font-size:14.5px}
  .hdr-in .nav.open .sub{padding:0 0 4px 12px}
  .hdr-in .nav.open .sub a{padding:5px 0;font-size:12.8px}
}

/* --- 1) hero „ze vzdálenosti": vše o kousek menší, ať jsou vidět fotky --- */
@media(max-width:720px){
  .hero{padding-top:12px}
  .hero-text h1.hero-h1,.hero-text h1,.hero-h1{
    font-size:1.82rem;line-height:1.16;margin:0 0 11px}
  .hero-text > p.hero-label{font-size:11px;letter-spacing:.18em;margin:0 0 7px}
  .hero-text .vyzva{margin:2px 0 15px}
  .hero-text .vyzva b{font-size:1.04rem;line-height:1.26;margin:0 0 3px}
  .hero-text .vyzva span{font-size:.93rem;line-height:1.4}
  .hero-text > p:nth-of-type(2){font-size:.96rem;line-height:1.6;margin:0 0 14px}
  .hero-text > p:nth-of-type(3){font-size:.93rem;line-height:1.62}
  .stack{margin-top:0;margin-bottom:20px}
}


/* ============================================================
   MENU JEŠTĚ TĚSNĚJI (v108)
   Ondra: „ať je to víc vzdálené" — na jeho telefonu ukrajují
   lišty prohlížeče tolik místa, že na menu zbývá ~570 px místo
   844 a Kontakt se pod ně nevešel. Seznam proto stahujeme tak,
   aby se vešel i do téhle výšky.
   ============================================================ */
@media(max-width:1200px){
  .hdr-in .nav.open{padding:6px 20px calc(var(--mbar-mob) + 2px)}

  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub > a{
    padding:5px 0;font-size:13.5px;line-height:1.3;letter-spacing:.01em}
  .hdr-in .nav.open .sub{padding:0 0 1px 10px}
  .hdr-in .nav.open .sub a{padding:2px 0;font-size:12.2px;line-height:1.25}
  .hdr-in .nav.open > a:last-child{margin-bottom:0}
}


/* ============================================================
   SPODNÍ LIŠTA MENŠÍ (v108) — Ondra: „ty tlačítka Zavolat
   a Napište nám ať jsou menší, teď je to hrozně veliký"
   Lišta 69 → 54 px. Tím se navíc uvolní místo pro rozcestník,
   protože jeho spodní odsazení se od výšky lišty odvíjí.
   ============================================================ */
:root{--mbar-mob:54px}
@media(max-width:1200px){
  .mbar{padding:7px 12px calc(7px + env(safe-area-inset-bottom));gap:8px}
  .mbar .btn{padding:10px 12px;font-size:12px;letter-spacing:.06em;border-radius:12px}
  .mbar .btn svg{width:14px;height:14px}
}


/* ============================================================
   ROZCESTNÍK — POHODLNĚJŠÍ NA KLIKÁNÍ (v111)
   Ondra: „na ty tlačítka pod Bytovým designem se blbě kliká,
   jak je to malé, a ať Kontakt končí až dole."
   Dvě věci: řádky o kus vyšší + zbylé místo se rozdělí mezi
   skupiny, takže seznam sedí až ke spodní liště.
   ============================================================ */
@media(max-width:1200px){
  /* vyšší řádky = větší plocha na prst */
  .hdr-in .nav.open > a,.hdr-in .nav.open .has-sub > a{
    padding:6px 0;font-size:13.8px}
  .hdr-in .nav.open .sub a{padding:4px 0;font-size:12.6px;line-height:1.3}
  /* místo se bere z obalů skupin, ne z řádků — ty mají zůstat vysoké */
  .hdr-in .nav.open .sub{padding:0 0 0 10px}
  /* spodní odsazení musí být o pár px větší než lišta, jinak poslední
     položka končí přesně pod jejím okrajem a je zpola skrytá */
  .hdr-in .nav.open{padding:4px 20px calc(var(--mbar-mob) + 6px)}

  /* Zbylé místo se rozpustí do mezer mezi skupinami — seznam tím
     dosáhne až ke spodní liště a mezi odkazy je víc vzduchu.
     ⚠️ `space-between` je pro tohle bezpečné: když se obsah nevejde,
     chová se jako flex-start. (`center` by ho vystrčil nad okraj
     mimo dosah rolování — ta past už tu jednou byla.) */
  .hdr-in .nav.open{justify-content:space-between}
}


/* ============================================================
   TLAČÍTKO „ZAVOLEJTE NÁM" S ČÍSLEM V HERO (v114)
   Ondra: „nad to Napište nám dej ještě tlačítko zavolejte nám
   a číslo". Dává smysl — na mobilu nebylo číslo nikde vidět
   (v hlavičce je jen na počítači) a u řemesla lidi radši volají.
   Volání je teď hlavní akce (plné tlačítko), Napište nám
   a Galerie jsou obrysové.
   ============================================================ */
.btn-tel{gap:12px}
.btn-tel-txt{display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.12;text-align:left}
.btn-tel-txt small{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;opacity:.85;margin-bottom:2px}
.btn-tel-txt b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.btn-tel svg{flex:none}

@media(max-width:720px){
  /* na mobilu přes celou šířku a na výšku pod sebou */
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px}
  .hero-btns .btn{width:100%}
  .btn-tel{justify-content:center;padding-top:11px;padding-bottom:11px}
  .btn-tel-txt b{font-size:17.5px}
}


/* ============================================================
   SPODNÍ LIŠTA — VOLÁNÍ JE HLAVNÍ AKCE (v115)
   Ondra se ptal, jestli bych ty dvě tlačítka nechal takhle.
   Nenechal: „Napište nám" bylo plné (tedy hlavní), zatímco
   v hero je hlavní akcí volání. Prohozeno, ať to drží jednu
   linku. Plus ikonky — na malé liště se pozná na první pohled,
   co která dělá.
   ============================================================ */
.mbar .btn{gap:7px}
.mbar .btn svg{flex:none;opacity:.95}


/* ============================================================
   POČÍTAČOVÁ VERZE VE STEJNÉM DUCHU (v116)
   Ondra: „udělej to takhle i na počítačové verzi."
   1) V hlavičce bylo „Napište nám" plné (tedy hlavní akce),
      zatímco všude jinde je hlavní volání. Teď je obrysové
      a s ikonou obálky — telefon vedle něj zůstává hlavní.
   2) V hero se „Galerie realizací" zalamovala sama na druhý
      řádek a působilo to nedopatřením. Teď je zlom záměrný:
      nahoře volání, pod ním obě vedlejší akce vedle sebe.
   ============================================================ */
.hdr-right .btn-sm{gap:7px}
.hdr-right .btn-sm svg{flex:none}

/* zalomení řádku v mřížce tlačítek — jen na počítači,
   na mobilu jsou tlačítka stejně pod sebou */
.hero-btns .zlom{flex:0 0 100%;height:0;margin:0;padding:0}
@media(max-width:720px){.hero-btns .zlom{display:none}}


/* ============================================================
   HLAVIČKA — VÍC VZDUCHU, ALE ZAROVNÁNÍ ZŮSTÁVÁ (v120)
   Ondra se všiml, že logo v hlavičce nesedí na levou hranu
   nadpisu „Prémiové sklenářské práce" — na 1920 px to bylo
   o 70 px vedle. Má pravdu, že to vadí: levá hrana je to první,
   čeho si oko všimne.
   Rozšíření hlavičky (v117) proto ruším. Vzduch se místo toho
   bere z rezervy, která v řádku zbývala: menu mělo přiděleno
   o ~50 px víc, než potřebovalo.
   ⚠️ `.hdr-in` musí zůstat na 1280 px jako obsah pod ní.
   ============================================================ */
@media(min-width:1360px){
  .hdr-in{gap:16px}
  .hdr-in .nav > a,.hdr-in .has-sub > a{
    padding-left:11px;padding-right:11px;letter-spacing:.05em}
  .hdr-in .nav > a::after,.hdr-in .has-sub > a::after{left:11px;right:11px}
  .hdr-right{gap:15px}
  /* telefon: ikona dál od textu, popisek nad číslem dostane vzduch */
  .hdr-tel{gap:13px}
  .hdr-tel-txt{gap:1px}
  .hdr-tel-txt small{letter-spacing:.19em}
}


/* ============================================================
   KARTY SLUŽEB — ODDÁLIT (v122)
   Ondra: „nejsou ty kouty moc velký? Nešlo by to víc z dálky?"
   Má pravdu a čísla to potvrzují: velká karta „Skleněné obklady
   do kuchyně" měla **1160 px**, tedy víc, než je vysoká obrazovka
   — jednu jedinou službu nešlo vidět celou naráz. Celá sekce
   měřila 1594 px.
   Zmenšujeme fotky i vnitřek karet. Návštěvník tím uvidí celou
   nabídku na jeden pohled, což působí bohatěji a důvěryhodněji
   než jedna obří fotka.
   Mobil se nemění — tam je mřížka jednosloupcová a fotky drží
   svůj poměr záměrně.
   ============================================================ */
@media(min-width:721px){
  .bento{gap:18px}
  .bento .card-img{aspect-ratio:2/1}
  .duo{gap:22px}
  .duo .card-img{aspect-ratio:21/9}

  /* vnitřek karty: míň vycpávky, sevřenější text */
  .card-b{padding:20px 24px 22px}
  .card-b h3{font-size:1.18rem}
  .card-b p{font-size:14px;line-height:1.58;margin-top:7px}

  /* velká karta už nemusí křičet */
  .bento > :nth-child(1) .card-img{min-height:0}
  .bento > :nth-child(1) .card-b h3{font-size:1.4rem}
  .bento > :nth-child(1) .card-b p{font-size:15px}
}


/* ============================================================
   NEPŘESNOSTI V OBRÁZCÍCH (v124)
   Všechny fotky v `.split-media` měly natvrdo poměr 4:3, ať byl
   zdroj jakýkoli. Měřením vyšlo najevo, co to dělá:
     kuchyne-024   1,78:1  → ořez po stranách
     sprchy-036    0,56:1  → z fotky NA VÝŠKU se dělala krajina,
     ostatni-022   0,56:1     vidět byl jen prostředek
     akvarium-1/2  2,27:1  → ze široké panoramy zbyl výřez
     okno-rez      1,60:1, jen 420 px → ořez + zvětšení 1,45×
     kovani-detail 2,16:1, jen 630 px → ořez + zvětšení 1,3×
   Fotky teď dostávají poměr, který jim sedí, a malé technické
   nákresy se nezvětšují ani neořezávají.
   ============================================================ */
@media(min-width:721px){
  /* širokoúhlé fotky: mírnější ořez než 4:3 */
  .split-media img{aspect-ratio:16/10}

  /* Fotky na výšku potřebují vyšší rámeček, jinak z nich zbyde pruh.
     ⚠️ Poměr 3/4 byl ale přestřelený — blok vyrostl na 811 px.
     Čtverec ukáže z portrétu dost a nerozbije to stránku. */
  .split-media img[src*="sprchy-036"],
  .split-media img[src*="ostatni-022"]{aspect-ratio:1/1}
}

/* Technické nákresy: zobrazit nejvýš ve vlastním rozlišení, celé,
   na bílém. Platí i na mobilu — zvětšovat je nemá smysl nikde. */
.split-media:has(img[src*="okno-rez"]),
.split-media:has(img[src*="kovani-detail"]){
  background:#fff;display:grid;place-items:center;padding:18px}
.split-media:has(img[src*="okno-rez"])::before,
.split-media:has(img[src*="kovani-detail"])::before{display:none}
.split-media img[src*="okno-rez"],
.split-media img[src*="kovani-detail"]{
  aspect-ratio:auto;height:auto;object-fit:contain;display:block}
.split-media img[src*="okno-rez"]{width:auto;max-width:min(100%,420px)}
.split-media img[src*="kovani-detail"]{width:auto;max-width:min(100%,630px)}

/* Týž nákres na úvodní stránce v kartě „Zateplování oken":
   v poměru 21:10 se ořezával a zvětšoval. Teď se vejde celý. */
.card-img:has(img[src*="okno-rez"]){background:#fff}
/* `contain` obrázek pořád zvětšuje, aby vyplnil rámeček. `scale-down`
   ho nikdy nezvětší nad jeho vlastní rozlišení — přesně o to tu jde. */
.card-img:has(img[src*="okno-rez"]) img{object-fit:scale-down;padding:14px}

/* Nákresy a schémata ze starého webu jsou malé (174–469 px). Místo
   výčtu jednotlivých souborů je necháme vykreslit ve vlastní velikosti
   a jen je zastropujeme šířkou rámečku — žádný z nich se tak nezvětší. */
figure img[src*="img/info/"]{
  width:auto;height:auto;max-width:100%;margin-inline:auto;display:block}

/* Kde je vedle fotky jen jeden krátký odstavec (úvod akvárií), působil
   blok poloprázdně: 380 px fotky proti 85 px textu. Fotka se zkrátí
   a odstavec dostane rozumnou šířku, ať to není osamocená řádka. */
@media(min-width:721px){
  .split:has(.prose > p:only-child) .split-media img{aspect-ratio:2/1}
  .split:has(.prose > p:only-child) .prose p{max-width:48ch}
}


/* ---------------------------------------------------------------
   22. 9. 2026 — fotopás: řádek mřížky nebyl svázaný s výškou pásu,
   takže se obrázky roztáhly na svou vlastní výšku (u fotek na výšku
   až 628 px) a `overflow:hidden` z nich ukázalo jen horní ořez —
   stropy, kabely, horní hrany skříněk. Teď je řádek pevný a
   `object-fit:cover` ořezává od středu.
   --------------------------------------------------------------- */
.band{grid-template-rows:100%}
@media(max-width:1050px){ .band{grid-template-rows:none} }

/* Karta „Skleněné dveře, stěny a zábradlí" ukazuje obojí naráz —
   vlevo prosklená stěna s dveřmi, vpravo skleněné zábradlí. */
.card-img.duo-foto{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.card-img.duo-foto img{width:100%;height:100%;object-fit:cover}


/* ---------------------------------------------------------------
   22. 9. 2026 — ROZBALOVACÍ NABÍDKA V HLAVIČCE (počítač, od 1201 px)

   1. kolo: panel měl pozadí .92 → .78 + backdrop-filter, spodní
      položky se nedaly přečíst. Udělal jsem ho plně krycí bílý.
   2. kolo: Ondrovi se to sklo líbilo, plná bílá je „basic". Takže
      sklo zpátky — ale s vysokým a hlavně ROVNOMĚRNÝM krytím
      (.985 → .94 místo .92 → .78), takže se to pořád čte.
      Dojem skla nedělá průhlednost, ale rozostření pozadí,
      nasycení barev a světlá hrana.
   3. Rozbalení bylo moc rychlé — zpomaleno a prodlevy prodlouženy.

   Bublina je pseudo-prvek ::before, aby šla animovat zvlášť od
   položek. Horních 10 px .sub je průhledný můstek pro myš, aby se
   nabídka nezavřela při přejezdu z názvu dolů.
   --------------------------------------------------------------- */
@media(min-width:1201px){
  .sub{
    top:100%;left:0;min-width:292px;
    padding:20px 12px 12px;
    background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;border-radius:0;box-shadow:none;
    transform:none;
    opacity:0;visibility:hidden;
    transition:opacity .26s ease,visibility .26s;
  }

  .sub::before{
    content:'';position:absolute;inset:10px 0 0;
    background:linear-gradient(158deg,
      rgba(255,255,255,.985) 0%,
      rgba(247,251,255,.965) 55%,
      rgba(238,246,253,.94) 100%);
    backdrop-filter:blur(26px) saturate(1.7);
    -webkit-backdrop-filter:blur(26px) saturate(1.7);
    border:1px solid rgba(255,255,255,.92);
    border-radius:18px;
    box-shadow:
      0 28px 64px rgba(12,45,80,.22),
      0 6px 18px rgba(12,45,80,.10),
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(12,63,110,.07);
    transform-origin:34px 0;
    transform:translateY(-14px) scale(.93);
    opacity:0;
    transition:
      transform .52s cubic-bezier(.16,.9,.24,1),
      opacity .34s ease;
  }
  /* jemný skleněný lesk přes horní okraj bubliny */
  .sub::after{
    content:'';position:absolute;left:1px;right:1px;top:11px;height:42%;
    border-radius:17px 17px 40% 40%;
    background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
    opacity:0;pointer-events:none;
    transition:opacity .5s ease .1s;
  }
  .has-sub:hover .sub{opacity:1;visibility:visible}
  .has-sub:hover .sub::before{transform:none;opacity:1}
  .has-sub:hover .sub::after{opacity:1}

  .sub a{
    position:relative;z-index:1;
    padding:12px 16px;border-radius:11px;
    font-size:14.5px;font-weight:600;color:var(--ink);
    opacity:0;transform:translateY(-12px);
    transition:opacity .2s ease,transform .2s ease;   /* zavírání: bez prodlev, vše naráz */
  }
  .has-sub:hover .sub a{
    opacity:1;transform:none;
    transition:opacity .42s ease,transform .5s cubic-bezier(.16,.9,.24,1);
  }
  .has-sub:hover .sub a:nth-child(1){transition-delay:.10s}
  .has-sub:hover .sub a:nth-child(2){transition-delay:.17s}
  .has-sub:hover .sub a:nth-child(3){transition-delay:.24s}
  .has-sub:hover .sub a:nth-child(4){transition-delay:.31s}
  .has-sub:hover .sub a:nth-child(5){transition-delay:.38s}

  .sub a:hover{background:rgba(10,75,134,.09);color:var(--blue-dk)}
}


/* ---------------------------------------------------------------
   22. 9. 2026 — HERO: hlavní akce přes celou šířku (jen od 721 px)
   Změřeno: tlačítko s telefonem bylo 240 px, ale řádek pod ním
   467 px — blok se dole „rozšiřoval" a vypadalo to jako schod.
   Teď je telefon 470 px, takže obě řady končí na stejné hraně.
   Pod ním je řádek s údaji o firmě. „Galerie realizací" zůstává
   normální tlačítko s rámečkem — zkoušel jsem z ní udělat textový
   odkaz a nebylo poznat, že se na ni dá kliknout.
   Na mobilu se nic nemění, tam jsou tři tlačítka pod sebou.
   --------------------------------------------------------------- */
@media(min-width:721px){
  .hero-text .hero-btns{max-width:470px;align-items:center}
  .hero-text .hero-btns .btn-tel{flex:1 1 100%;justify-content:center}
  .hero-text .hero-duvera{
    flex:0 0 100%;margin:-4px 0 2px;
    font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--ink-2);opacity:.88;line-height:1.5}
  .hero-text .hero-duvera i{font-style:normal;color:var(--blue);opacity:.7;margin:0 3px}
}
@media(max-width:720px){
  .hero-text .hero-duvera{
    margin:2px 0 4px;text-align:center;
    font-size:12px;font-weight:600;letter-spacing:.01em;
    color:var(--ink-2);opacity:.85;line-height:1.45}
  .hero-text .hero-duvera i{font-style:normal;color:var(--blue);opacity:.7;margin:0 3px}
}


/* =================================================================
   HLAVNÍ SEKCE — nasazena varianta 10-24 (23. 9. 2026)
   Vybral ji Ondra ze 98 návrhů: na střed, Playfair nadpis,
   rukopisem jen otázka, pozadí prosklená hala.
   Vlastní jmenný prostor `.hn-*`, aby se to nepotkalo se starými
   pravidly pro `.hero`. Pozadí je uvnitř sekce (position:absolute),
   NE fixed přes celé okno — jinak by prosvítalo i pod ostatní sekce.
   ================================================================= */
.hero-nova{position:relative;overflow:hidden;background:#fff;
  padding:26px 0 30px;min-height:calc(100vh - 92px);
  display:flex;flex-direction:column;justify-content:center;text-align:center}
.hero-nova .hn-poz{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-nova .hn-poz i{position:absolute;inset:0;display:block}
.hero-nova .hn-poz i:nth-child(1){
  background:url('../img/brand/sklo-hala.webp') center/cover no-repeat;opacity:.9}
.hero-nova .hn-poz i:nth-child(2){
  background:radial-gradient(980px 600px at 50% 44%,rgba(255,255,255,.92) 28%,
    rgba(255,255,255,.62) 62%,rgba(255,255,255,.22) 90%)}
.hero-nova .hn-in,.hero-nova .hn-pas{position:relative;z-index:1}
.hero-nova .hn-in{max-width:880px;margin:0 auto;padding:0 24px}

.hn-label{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#2E7DB9;margin:0 0 10px}
.hn-rukou{font-family:'Caveat',cursive;font-size:clamp(1.9rem,3.1vw,2.8rem);line-height:1.03;
  color:#0a4b86;margin:0 0 10px}
.hn-h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.015em;
  color:#12232f;margin:0 0 14px}
.hn-h1 span{font-style:italic;color:#2E7DB9}
.hn-vyzva{font-size:1.02rem;font-weight:600;color:#1c2a3d;margin:0 0 16px}
.hn-perex{font-size:16px;line-height:1.66;color:#33505f;max-width:56ch;margin:0 auto 18px}
.hn-duvera{font-size:12px;font-weight:600;color:#33505f;opacity:.9;margin:10px 0 0}
.hn-duvera i{font-style:normal;color:#3d8dbf;margin:0 5px}

.hn-akce{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
/* Barvy tlačítek = stejná sytá modrá jako .btn-p / .btn-o po celém webu.
   Původně tu byla stará tlumená modrá #3d8dbf → vypadalo to vybledle. */
.hn-tel{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--grad-soft);color:#fff;border-radius:12px;
  padding:15px 30px;text-decoration:none;box-shadow:0 8px 22px rgba(0,198,255,.42);transition:.25s}
.hn-tel:hover{transform:translateY(-2px);
  background:linear-gradient(135deg,#2FB8FF 0%,#0C63C4 100%);
  box-shadow:0 10px 25px rgba(0,114,255,.4),0 18px 44px rgba(0,120,230,.28)}
.hn-tel span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.14}
.hn-tel small{font-size:9px;letter-spacing:.17em;text-transform:uppercase;opacity:.86}
.hn-tel b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.hn-tel svg{flex:none}
.hn-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:12px;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  border:2px solid transparent;color:#0B57AA;text-decoration:none;
  box-shadow:0 8px 22px rgba(10,37,64,.12);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:.25s}
.hn-btn:hover{background:linear-gradient(#f4f8ff,#f4f8ff) padding-box,var(--grad) border-box;
  color:#0072FF;transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,198,255,.45)}

.hn-pas{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px);
  margin:26px auto 0;max-width:1300px;padding:0 clamp(22px,3.4vw,50px)}
.hn-pas > img{width:100%;height:clamp(165px,27vh,350px);object-fit:cover;display:block;
  border-radius:16px;box-shadow:0 12px 28px rgba(12,45,80,.14)}
/* dlaždice 2 je panorama — ze středu by zbyla jen stěna, posun doleva
   nechá v záběru schody i kotvení skla */
.hn-pas > img:nth-child(2){object-position:35% center}

@media(max-width:900px){
  .hero-nova{min-height:0;padding:22px 0 26px}
  .hn-akce{flex-direction:column;align-items:stretch}
  .hn-akce .hn-tel,.hn-akce .hn-btn{width:100%;justify-content:center}
  .hero-nova .hn-poz i:nth-child(2){
    background:radial-gradient(700px 500px at 50% 40%,rgba(255,255,255,.95) 26%,
      rgba(255,255,255,.75) 60%,rgba(255,255,255,.45) 90%)}
}


/* =================================================================
   SPODEK WEBU — ze tmavě modré do světla (23. 9. 2026)
   Kontaktní sekce byla celá tmavě modrá a patička hned pod ní taky,
   takže spodek stránky byl jedna velká modrá plocha. Sekce je teď
   světlá s bílými kartami, patička zůstává tmavá, ale v břidlicovém
   tónu — dělá stránce podlahu, místo aby na ni navazovala další modrá.
   ================================================================= */

/* ---------- kontaktní sekce ---------- */
.dark-sec{background:linear-gradient(168deg,#F8FBFF 0%,#E9F2FB 46%,#F5FAFE 100%)}
.dark-sec::before{background:
  radial-gradient(780px 440px at 10% -5%,rgba(31,169,255,.13),transparent 70%),
  radial-gradient(700px 480px at 94% 105%,rgba(14,94,168,.10),transparent 72%)}
.dark-sec h2{color:var(--ink)}

.dark-sec .ct-card,.dark-sec form{
  background:linear-gradient(158deg,#ffffff,#fbfdff);
  border:1px solid #DCE8F4;
  box-shadow:0 18px 44px rgba(12,45,80,.09)}
.dark-sec .ct-card:hover,.dark-sec form:hover{
  border-color:#C4DAEE;box-shadow:0 24px 58px rgba(12,45,80,.14)}

.dark-sec .ct-row{border-bottom-color:#E7EFF7}
.dark-sec .ct-row svg{stroke:var(--blue)}
.dark-sec .ct-row small{color:var(--muted)}
.dark-sec .ct-row b{color:var(--ink)}
.dark-sec .ct-row a{color:var(--ink)}
.dark-sec .ct-row a:hover{color:var(--blue)}

.dark-sec .fld label{color:var(--ink-2)}
.dark-sec .fld input,.dark-sec .fld textarea{
  background:#F7FBFE;border:1px solid #D9E6F3;color:var(--ink)}
.dark-sec .fld input::placeholder,.dark-sec .fld textarea::placeholder{color:#9FB3C4}
.dark-sec .fld input:focus,.dark-sec .fld textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,94,168,.13)}
.dark-sec .map{border-color:#D9E6F3;box-shadow:0 18px 44px rgba(12,45,80,.10)}
.dark-sec .f-ok{background:#EAF7EE;border-color:#BCE2C9;color:#1B6B3A}

/* ---------- patička ---------- */
footer{background:linear-gradient(180deg,#132433 0%,#0B1622 100%)}
footer::before{background:linear-gradient(90deg,transparent,rgba(31,169,255,.85),transparent)}
.ft-lead{color:#9FB6C6}
.ft-ico{background:linear-gradient(150deg,rgba(31,169,255,.20),rgba(11,87,170,.14));
  border:1px solid rgba(120,190,240,.26)}
.ft-ico svg{color:#7FC9F5}
.ft-item small{color:#7C93A4}
.ft-item b,.ft-item a{color:#DCE8F1}
.ft-item a:hover{color:#7FC9F5}
.ft-nav a{color:#9FB6C6}
.ft-nav a:hover{color:#7FC9F5}
.ft-b{border-top-color:rgba(255,255,255,.10)}

/* ---------- tlačítko filtru v galerii ---------- */
/* solidní tmavá modrá působila smutně — stejný sytý přechod jako tlačítka jinde */
.filters button.on{background:var(--grad-soft);border-color:transparent;color:#fff;
  box-shadow:0 8px 22px rgba(0,198,255,.40)}
.filters button.on:hover{background:linear-gradient(135deg,#2FB8FF 0%,#0C63C4 100%);
  border-color:transparent;color:#fff}


/* =================================================================
   KONTAKTNÍ SEKCE DVOUBAREVNĚ (23. 9. 2026)
   Jednolitá plocha nefunguje ani v tmavé, ani ve světlé. Levý panel
   s údaji tmavý, formulář bílý — kontrast dělá tu práci, ne barva.
   ================================================================= */
.dark-sec{background:linear-gradient(168deg,#EDF4FC 0%,#DBE9F7 52%,#E9F2FC 100%)}
.dark-sec::before{background:
  radial-gradient(820px 460px at 8% -8%,rgba(31,169,255,.16),transparent 70%),
  radial-gradient(720px 500px at 96% 108%,rgba(14,94,168,.13),transparent 72%)}

/* levý panel — tmavý, aby bílý formulář vedle něj vystoupil */
.dark-sec .ct-card{
  background:linear-gradient(155deg,#124675 0%,#0B2545 100%);
  border:1px solid rgba(120,190,240,.20);
  box-shadow:0 22px 52px rgba(11,37,69,.30)}
.dark-sec .ct-card:hover{
  border-color:rgba(120,190,240,.34);box-shadow:0 26px 62px rgba(11,37,69,.36)}
.dark-sec .ct-row{border-bottom-color:rgba(255,255,255,.13)}
.dark-sec .ct-row svg{stroke:#7FC9F5}
.dark-sec .ct-row small{color:rgba(176,206,226,.78)}
.dark-sec .ct-row b,.dark-sec .ct-row a{color:#EAF4FB}
.dark-sec .ct-row a:hover{color:#7FC9F5}

/* formulář — bílý s barevným proužkem nahoře */
.dark-sec form{position:relative;overflow:hidden;
  background:#fff;border:1px solid #D4E3F2;
  box-shadow:0 22px 56px rgba(12,45,80,.14)}
.dark-sec form::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad)}
.dark-sec form:hover{border-color:#BFD8EE;box-shadow:0 28px 68px rgba(12,45,80,.18)}
.dark-sec .fld input,.dark-sec .fld textarea{
  background:#F3F8FD;border:1px solid #D3E3F2}
.dark-sec .fld input:focus,.dark-sec .fld textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,94,168,.13)}
.dark-sec .map{border:1px solid #CFE0F0;box-shadow:0 20px 48px rgba(12,45,80,.13)}

@media(max-width:820px){
  /* na mobilu jsou karty pod sebou — ať tmavý panel nezabírá celou obrazovku */
  .dark-sec .ct-card{padding:26px}
}

/* patička ve stejné modré jako levý panel v kontaktech */
footer{background:linear-gradient(180deg,#124675 0%,#0B2545 100%)}

/* =================================================================
   PÁS FOTEK NA MOBILU (23. 9. 2026)
   Ve dvou sloupcích zůstávala pátá fotka na řádku sama. Místo mřížky
   vodorovný posuvný proužek — všech pět se vejde, nic neosiří a ořez
   dlaždice je stejný jako na počítači. Druhá fotka zpola vykukuje,
   takže je vidět, že se dá posouvat.
   ================================================================= */
@media(max-width:700px){
  .hn-pas{display:flex;gap:12px;max-width:none;margin:22px 0 0;
    padding:4px 22px 10px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hn-pas::-webkit-scrollbar{display:none}
  .hn-pas img{flex:0 0 62%;height:clamp(178px,47vw,232px);scroll-snap-align:center}
}


/* rok založení patří k číslu „25+ let praxe", ne do hlavní sekce */
.rev-tradice{text-align:center;max-width:52ch;margin:-4px auto 32px;
  font-size:15px;line-height:1.7;color:var(--ink-2)}
@media(max-width:700px){.rev-tradice{font-size:14.5px;margin-bottom:26px;padding:0 6px}}


/* =================================================================
   ŘÁDEK S PRAXÍ A ZAMĚŘENÍM (23. 9. 2026)
   Zkoušela se bublina s rámečkem — Ondra: „je vidět, že to je umělá
   inteligence". Zakulacený rámeček pod tlačítky má dnes každá druhá
   vygenerovaná stránka. Řešení je typografické: verzálky s rozpalem,
   mezi položkami tenká svislá linka místo tečky a bílá záře pod
   písmem, aby text držel nad fotkou v pozadí bez jakéhokoli rámečku.
   ================================================================= */
.hero-nova .hn-duvera{
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.2vw,30px);
  margin:24px auto 0;padding:0;background:none;border:0;box-shadow:none;
  /* Lora, ne Playfair: Playfair je displejové písmo s vlasovými tahy, které
     se při téhle velikosti ztratily — hlavně u číslic („25+" nešlo přečíst).
     Lora je patkové písmo dělané na drobný text, takže zůstane čitelná. */
  font-family:'Lora',Georgia,serif;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#1B3D5C;opacity:1;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.9)}
.hero-nova .hn-duvera i{
  display:inline-block;width:1px;height:12px;margin:0;font-size:0;
  background:rgba(14,94,168,.45);text-shadow:none}
@media(max-width:700px){
  /* vedle sebe se to lámalo uprostřed slov → pod sebe a ze svislé linky vodorovná */
  .hero-nova .hn-duvera{flex-direction:column;gap:7px;
    font-size:11.5px;letter-spacing:.12em;margin-top:20px}
  .hero-nova .hn-duvera i{width:28px;height:1px}
}

/* =================================================================
   MOBILNÍ HLAVNÍ SEKCE — SBALIT (23. 9. 2026)
   Ondra: „přijde mi to moc přiblížený" + „lidi doleva nepojedou".
   Hero měřil 938 px v okně 844 px, takže se ani nevešel na obrazovku,
   a pás fotek se posouval do strany, což většina lidí nikdy neudělá.
   Text i tlačítka jsou proto sbalené a fotky jsou dvě a dvě pod sebou.
   ================================================================= */
@media(max-width:700px){
  .hero-nova{padding:10px 0 10px}
  .hero-nova .hn-in{padding:0 20px}
  .hn-label{font-size:10px;letter-spacing:.2em;margin-bottom:5px}
  .hn-rukou{font-size:clamp(1.4rem,6.1vw,1.7rem);margin-bottom:5px}
  .hn-h1{font-size:clamp(1.62rem,7.4vw,2.05rem);line-height:1.07;margin-bottom:8px}
  .hn-vyzva{font-size:14px;margin-bottom:9px}
  .hn-perex{font-size:13.5px;line-height:1.56;margin-bottom:11px}

  /* tři tlačítka pod sebou zabírala 183 px — volání zůstává přes celou
     šířku, zbylá dvě jdou vedle sebe */
  .hero-nova .hn-akce{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .hero-nova .hn-akce .hn-tel{grid-column:1/-1;width:auto;padding:12px 18px}
  .hero-nova .hn-akce .hn-btn{width:auto;padding:11px 8px;font-size:10.5px;
    letter-spacing:.04em;justify-content:center;text-align:center}
  .hero-nova .hn-duvera{margin-top:9px;gap:4px}

  /* dvě fotky, přes celou šířku ta s křeslem, dvě fotky — nic se neposouvá
     do strany a nic nezůstane na řádku samo. Prostřední je panoramatická,
     takže jí široký pruh sedne a nemusí se ořezávat. */
  .hero-nova .hn-pas{display:grid;grid-template-columns:repeat(2,1fr);
    gap:8px;overflow:visible;margin:10px 0 0;padding:0 20px;max-width:none}
  /* dlaždice musí mít tvar blízký fotkám, jinak z nich `cover` ukrojí
     většinu výšky — při 164×66 px mizelo 57 % každé fotky */
  .hero-nova .hn-pas > img{flex:none;width:100%;height:clamp(112px,32vw,142px);
    border-radius:12px}
  /* výška pruhu s křeslem odpovídá poměru výřezu (2,07), takže se
     nic neořezává ani po stranách */
  .hero-nova .hn-pas picture{grid-column:1/-1;height:clamp(140px,41vw,178px);
    border-radius:12px}
}

/* =================================================================
   KŘESLO NA MOBILU (24. 9. 2026)
   Široká fotka interiéru je v úzkém pruhu k ničemu — je z ní vidět
   jen podlaha a strop. Na mobilu se proto načítá `b4-kreslo.webp`,
   což je výřez z té samé fotky kolem křesla i se sklem a stromy za
   ním. Proto je ta dlaždice <picture> a ne obyčejný <img>.
   ================================================================= */
.hn-pas picture{display:block;width:100%;height:clamp(165px,27vh,350px);
  border-radius:16px;overflow:hidden;box-shadow:0 12px 28px rgba(12,45,80,.14)}
.hn-pas picture > img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:0;box-shadow:none}

/* =================================================================
   CELÝ WEB NA MOBILU — ZHUSTIT (24. 9. 2026)
   Ondra: „oddálil jsi jenom hlavní sekci, šel by oddálit celý web?"
   Zbytek stránek byl proti hlavní sekci naředěný — 15 položek nabídky
   pod sebou po 66 px, obrázky karet 200 px, mezi sekcemi 38 px nahoře
   i dole. Tady se to všechno stáhne, aby se na obrazovku vešlo víc.
   Písmo zůstává čitelné, zmenšují se hlavně mezery a výšky.
   ================================================================= */
@media(max-width:700px){
  .wrap{width:min(100% - 34px,var(--maxw))}
  section{padding:30px 0}
  .sh{margin-bottom:20px}
  .sh h2{font-size:clamp(1.34rem,6vw,1.62rem);line-height:1.18}
  .sh p{margin-top:10px;font-size:14.5px}
  .sh .rule{margin-top:12px}
  .kicker{font-size:10px;letter-spacing:.18em}
  .sh[data-n]::before{top:-24px}

  /* položky nabídky — 15 řádků po 66 px byla polovina té sekce */
  .svc{padding:9px 30px 9px 11px;gap:11px}
  .svc-ico{width:32px;height:32px;border-radius:9px}
  .svc-ico svg{width:17px;height:17px}
  .svc b,.svc span:not(.svc-ico){font-size:14.5px;line-height:1.35}

  /* obrázky karet — `min-height` a `aspect-ratio` z dřívějších pravidel
     přebíjely samotnou výšku, proto se ruší spolu s ní */
  .card-img{height:152px;min-height:0;aspect-ratio:auto}
  .bento > :nth-child(1) .card-img{height:176px;min-height:0;aspect-ratio:auto}
  .duo .card-img,.card-img.duo-foto{height:152px;aspect-ratio:auto}
  .split-media img{max-height:230px}

  /* tmavá výzva nad patičkou */
  .cta{padding:32px 22px;border-radius:18px}
  .cta h2{font-size:1.22rem;line-height:1.3}

  /* hodnocení zákazníků — osm karet po 130 px dělalo 1148 px */
  /* odsazení drží `.rev-list .rev-card`, samotné `.rev-card` ho nepřebije */
  .rev-list .rev-card{padding:15px 16px;gap:5px}
  .rev-card > .gmark{top:12px;right:12px;width:17px;height:17px}
  .rev-list{gap:10px}
  .rev-num{font-size:2.15rem}
  .rev-stat{gap:2px}
  .rev-top{margin-bottom:6px}
  .rev-tradice{font-size:14px;margin-bottom:18px}

  /* mřížky karet a nabídky */
  .bento,.svc-grid,.duo{gap:10px}
  .card-img{height:138px}
  .bento > :nth-child(1) .card-img{height:162px}

  /* patička */
  footer{padding:36px 0 22px}
  /* čtyři údaje pod sebou dělaly z patičky 1119 px — dva sloupce */
  .ft-info{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .ft-item b,.ft-item a{font-size:13.5px;overflow-wrap:anywhere}
  .ft-item small{font-size:9.5px;letter-spacing:.12em}
  .ft-ico{width:38px;height:38px;border-radius:11px;margin-bottom:5px}
  .ft-lead{font-size:14px;margin-top:14px}
  .ft-nav{margin-top:28px}
  .ft-b{margin-top:26px;padding-top:18px}
}

/* =================================================================
   KONTAKTNÍ FORMULÁŘ — SKUTEČNÉ ODESLÁNÍ (24. 9. 2026)
   K potvrzení přibyla chybová hláška: když odeslání selže, formulář
   to přizná a nabídne telefon, místo aby tvrdil „odesláno".
   `.past` je schované pole na roboty — člověk ho nevidí ani do něj
   netrefí tabulátorem, vyplní ho jen automat a zpráva se zahodí.
   ================================================================= */
.f-err{display:none;padding:16px;border-radius:10px;margin-bottom:18px;
  background:#FDECEA;border:1px solid #F0B3AA;color:#8A2418;font-size:14.5px;line-height:1.6}
.f-err.show{display:block}
.f-err a{color:#8A2418;font-weight:700;text-decoration:underline}
.dark-sec .f-err{background:#FDECEA;border-color:#F0B3AA;color:#8A2418}
.past{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
#poptavka button[type="submit"]:disabled{opacity:.6;cursor:progress}

/* pás fotek v hlavní sekci — širší dlaždice (24. 9. 2026)
   1300 px nechávalo na širokém monitoru po stranách zbytečně místa.
   S šířkou roste i výška, aby z fotek nebyly úzké proužky. */
@media(min-width:1101px){
  .hero-nova .hn-pas{max-width:min(1680px,94vw)}
}
/* Vyšší dlaždice jen tam, kde je na ně místo. Na notebooku 1366×768 už
   tak spodní řada přetékala pod okraj a vyšší pás by to jen zhoršil. */
@media(min-width:1101px) and (min-height:900px){
  .hero-nova .hn-pas > img,.hero-nova .hn-pas picture{height:clamp(185px,29vh,370px)}
}

/* filtry galerie na mobilu — mřížka místo zalamování (24. 9. 2026)
   Pět pilulek různé šířky se centrovaně zalomilo na 2 + 1 + 2 a působilo
   rozházeně. V mřížce mají stejnou šířku i výšku, „Vše“ sedí přes oba
   sloupce jako přepínač nad kategoriemi. */
@media(max-width:720px){
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:26px}
  .filters button{width:100%;min-height:46px;padding:12px 10px;font-size:12.5px;
    letter-spacing:.01em;display:flex;align-items:center;justify-content:center;text-align:center}
  .filters button:first-child{grid-column:1/-1}
}