/* Direction 4 — built from the 21st.dev "own build" bookmark list.
   Tokens (colours, radius 6/8/10/16/28/pill, shadows, easing, durations) live in one :root block in d4/base.css. */
body{font-size:16px}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:500}
.lbl.inv{color:rgba(248,247,245,.72)}
/* section kicker: the section's nav label + a hairline to the end of the head's own box (.kick-c centred, .kick-inv on ink) */
.kick{display:flex;align-items:center;gap:18px;min-width:0}
.kick>.lbl{flex:none}
.kick::after,.kick-c::before{content:"";flex:1;min-width:24px;height:1px;background:var(--line)}
.kick-inv::after{background:rgba(248,247,245,.1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--font);text-decoration:none;border:0;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s var(--ease-out);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-s{height:40px;padding:0 16px;font-size:14px}
.btn-y{background:var(--yellow);color:var(--black)}.btn-y:hover{background:#f5cc00}
.btn-k{background:var(--ink);color:#fff}.btn-k:hover{background:#000}
.btn-l{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn-l:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.4)}
.arr{font-size:.9em}
.w100{width:100%}
h2{font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.04em}
h3{font-weight:500;letter-spacing:-.02em}
.sec{padding:var(--sec-y) 0}
/* ── nav ── */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:60;pointer-events:none}
.nav-in{position:relative;z-index:2;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 14px 0 28px;border-radius:var(--r-l) var(--r-l) 0 0;transition:background .3s,box-shadow .3s,border-radius .3s,margin .3s}
.nav.scrolled .nav-in{background:rgba(248,247,245,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px var(--line);border-radius:999px;margin:0 auto;max-width:1180px;height:56px}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:14px;color:#3d3d3a;text-decoration:none}
.nav ul a:hover{color:var(--ink)}
/* mobile menu (≤900px): button + sheet + scrim. The button stays [hidden] until d4/main.js wires it, so without JS
   there is no dead control (the footer links still reach every section). */
.nav-tog,.nav-sheet,.nav-scrim{display:none}
.nav-tog{align-items:center;gap:10px;height:44px;margin-left:8px;padding:0 16px 0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:500 14px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-1),box-shadow var(--dur-1)}
.nav-tog:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.4)}
.nav-tog-ic{position:relative;width:16px;height:10px;flex:none}
.nav-tog-ic i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform var(--dur-2) var(--ease-out),top var(--dur-2) var(--ease-out)}
.nav-tog-ic i:first-child{top:0}
.nav-tog-ic i:last-child{top:8.5px}
.nav.open .nav-tog{background:#fff;box-shadow:inset 0 0 0 1px rgba(20,20,20,.16)}
.nav.open .nav-tog-ic i:first-child{top:4.25px;transform:rotate(45deg)}
.nav.open .nav-tog-ic i:last-child{top:4.25px;transform:rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:0;pointer-events:auto;background:rgba(14,14,12,.28);opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.nav.open .nav-scrim{opacity:1;visibility:visible;transition-delay:0s}
.nav-sheet{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;
  padding:68px 18px 18px;border-radius:var(--r-l);background:var(--ground);box-shadow:0 0 0 1px var(--line),var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);transform-origin:50% 0;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
.nav.open .nav-sheet{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ns-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ns-list li{border-bottom:1px solid var(--line)}
.ns-list a{display:flex;align-items:center;gap:16px;min-height:64px;margin:0 -8px;padding:8px 14px 8px 10px;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.ns-n{flex:none;width:22px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--label)}
.ns-t{flex:1;font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-.035em}
.ns-a{flex:none;font-size:18px;line-height:1;color:var(--label);transition:transform var(--dur-1) var(--ease-out),color var(--dur-1)}
.ns-list a:hover .ns-a,.ns-list a:focus-visible .ns-a,.ns-list a:active .ns-a{color:var(--ink);transform:translateX(3px)}
.ns-list a:focus-visible{outline-offset:-2px;border-radius:var(--r-s)}
.ns-foot{display:grid;gap:10px;margin-top:22px}
.ns-tel{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:var(--r-m);background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.ns-tel-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper-2)}
.ns-tel-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ns-tel-tx{display:grid;gap:5px}
.ns-tel-tx b{font-weight:500;font-size:18px;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ns-tel:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.4)}
.ns-foot .btn{height:52px;font-size:16px}
/* open menu: the page behind is inert (main.js) and does not scroll; --sbw keeps a classic scrollbar's width */
html.nav-lock,html.nav-lock body{overflow:hidden}
html.nav-lock body{padding-right:var(--sbw,0px)}
/* ── metrics band (Rivr) ── */
.band-wrap{padding:16px 0 0}
.band{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r-l);background:var(--paper-2);padding:44px 24px}
.band div{padding:0 40px}
.band div+div{border-left:1px solid var(--line)}
.band strong{display:block;font-weight:500;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.045em;line-height:1}
.band span{display:block;margin-top:10px;font-size:15px;color:var(--muted)}
/* ── section head: kicker over the full width, h2 left, lead (+ CTA) right, bottom-aligned ── */
.head{display:grid;grid-template-columns:1fr 1fr;gap:var(--kick-gap) 48px;align-items:end;margin-bottom:var(--head-gap)}
.head>.kick{grid-column:1/-1}
.head p{color:var(--muted);max-width:52ch;margin-bottom:20px;font-size:17px}
.head>div>p:last-child{margin-bottom:0}
/* ── comparison head (section body: d4/srovnani.css): centred, the kicker spans the content width ── */
.cmp-head{text-align:center}
.cmp-head .kick{margin-bottom:var(--kick-gap)}
.cmp-head h2,.cmp-head p{max-width:720px;margin-left:auto;margin-right:auto}
.cmp-head p{color:var(--muted);margin-top:16px;font-size:17px}
/* ── contact ── */
.big-h{font-size:clamp(44px,5.4vw,80px)}
/* ── footer ── */
footer{padding:72px 0 32px}
footer .wrap{display:grid;grid-template-columns:4fr repeat(4,2fr);gap:32px}
.f-brand p{margin-top:12px;color:var(--muted);font-size:14px}
footer ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--muted);font-size:14px}
footer a:hover{color:var(--ink)}
.f-bot{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:32px;color:var(--label);font-size:13px}
/* ── thumb bar (≤600px): tel + "Chci stavět" fixed under the thumb, shown and hidden by d4/main.js. It stays [hidden]
   until main.js wires it, so without JS there is no bar. ── */
.tb{display:none}
/* ── responsive ── */
@media (max-width:900px){
  .nav{top:8px;left:8px;right:8px}
  .nav-in>nav{display:none}
  .nav-in{padding:0 6px 0 18px;height:56px}
  .nav-cta{margin-left:auto}
  .nav-tog:not([hidden]),.nav-scrim,.nav-sheet{display:flex}
  .nav-sheet{flex-direction:column}
  .nav-cta{transition:opacity var(--dur-1),visibility 0s linear var(--dur-1)}
  .nav.open .nav-cta{opacity:0;visibility:hidden}
  .nav.open .nav-in{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.open .ns-list li,.nav.open .ns-foot{animation:ns-in var(--dur-3) var(--ease-out) both}
  .nav.open .ns-list li:nth-child(2){animation-delay:30ms}
  .nav.open .ns-list li:nth-child(3){animation-delay:60ms}
  .nav.open .ns-list li:nth-child(4){animation-delay:90ms}
  .nav.open .ns-foot{animation-delay:120ms}
  .band{grid-template-columns:1fr 1fr;padding:8px 0}
  .band div{padding:22px 20px}
  .band div+div{border-left:0}
  .band div:nth-child(even){border-left:1px solid var(--line)}
  .band div:nth-child(n+3){border-top:1px solid var(--line)}
  .head{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  .f-soc{grid-column:auto}
  .f-brand{grid-column:1/-1}
}
@media (max-width:600px){
  .nav-sheet{border-radius:22px}
  .tb:not([hidden]){position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:59;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
    background:rgba(248,247,245,.86);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
    box-shadow:0 0 0 1px var(--line),0 14px 32px -18px rgba(0,0,0,.28);
    opacity:0;visibility:hidden;transform:translateY(calc(100% + 16px));
    transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-3)}
  .tb.tb-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .tb-tel{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--dur-1)}
  .tb-tel:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.4)}
  .tb-tel:active{transform:scale(.96)}
  .tb-tel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tb .btn{flex:1;min-width:0;height:48px;font-size:15.5px}
}
/* one yellow and one "Chci stavět" per screen: once main.js has wired the thumb bar (.tb-js) it takes over from the nav
   CTA and the Produkt head CTA. While it is up, focus and scrollIntoView keep clear of it. Short screens (a zoomed-in
   desktop, a small phone on its side) keep the nav CTA and get no bar; main.js uses the same query. */
@media (max-width:600px) and (min-height:400px){
  .tb-js .nav-cta,.tb-js #produkt .head .btn-s{display:none}
  .tb-js footer{padding-bottom:128px}
  html:has(#tb.tb-on){scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* narrow phones: the menu button keeps its 44px circle, the word goes to screen readers only */
@media (max-width:374px){
  .nav-tog{width:44px;padding:0;justify-content:center}
  .nav-tog-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@keyframes ns-in{from{opacity:0;transform:translateY(-6px)}}
/* touch: 44px targets (WCAG 2.5.5) for the small buttons, the logo and the footer rows; desktop look unchanged */
@media (pointer:coarse){
  .btn-s{height:44px}
  .logo{min-height:44px;margin:-10px 0}
  footer ul{gap:0;margin-top:4px}
  footer ul a{display:block;width:fit-content;padding:11px 0}
  .f-bot a{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0}
}
/* Windows high contrast / forced colours: backgrounds and inset shadows vanish, so give buttons a real border */
@media (forced-colors:active){
  .btn,.nav-tog,.ns-tel,.tb-tel{border:1px solid}
  .nav-sheet,.tb{border:1px solid}
  .nav-tog-ic i{background:CanvasText}
  .kick::after,.kick-c::before{background:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .nav-sheet,.nav-scrim,.nav-cta,.nav-tog-ic i,.ns-a{transition:none}
  .nav.open .ns-list li,.nav.open .ns-foot{animation:none}
  .nav-sheet{transform:none}
  /* thumb bar: fades, no slide */
  .tb:not([hidden]){transform:none;transition:opacity var(--dur-2) linear,visibility 0s linear var(--dur-2)}
  .tb.tb-on{transition-delay:0s}
}

/* Patička: odkazy na sítě (1. 11. 2026) */
.f-soc ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.f-soc a{display:inline-block}
.f-soc svg{display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.f-soc a:hover svg{opacity:.75}

/* keep a hyphenated word on one line (Produkt 04 "follow-up") (1. 11. 2026) */
.nw{white-space:nowrap}

/* ── footer, layout of the new copy (1. 11. 2026) ── */
/* 901–1100: no column wraps ("Ochrana osobních / údajů", "…pro / podnikatele."); ≥1200 unchanged, every 4fr/2fr
   track is still wider than its content */
@media (min-width:901px){footer .wrap{grid-template-columns:minmax(max-content,4fr) repeat(4,minmax(max-content,2fr))}}
@media (max-width:400px){footer .wrap{column-gap:24px}}
/* "Sledujte nás" on touch: the column drops the desktop gap/margin so its rows match the other columns */
@media (pointer:coarse){
  .f-soc ul{gap:0;margin-top:4px}
  .f-soc a{display:block;width:fit-content}
}