/* iting.sk v2 — technický web strojárskej firmy.
   Grafit + biela, červená (#c1272d, štvorček z loga) len ako akcent. Systémové písma, žiadne externé zdroje.
   Pohyb: len transform/opacity (výnimka: dokresľovanie čiar stroke-dashoffset); všetko vypnuté pri
   prefers-reduced-motion. Bez JS je obsah celý viditeľný (skryté stavy platia len pod html.js). */
:root {
  --g9: #0f1113;
  --g8: #16191d;
  --g7: #1c2024;
  --g6: #252a2f;
  --na-tme: #e9edf1;
  --na-tme-2: #9ea8b2;
  --ciara-tma: rgba(255, 255, 255, .13);
  --papier: #f2f3f4;
  --biela: #ffffff;
  --ink: #16181b;
  --ink-2: #3b4148;
  --tlm: #5a616a;
  --ciara: #dcdfe3;
  --cervena: #c1272d;
  --cervena-tm: #a41f25;
  --cervena-svetla: #ff7b7f;
  --modrotlac: #a9bccf;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sirka: 1240px;
  --okraj: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--g8); scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--cervena); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .92em; }
.nz { white-space: nowrap; }

.obal { max-width: calc(var(--sirka) + 2 * var(--okraj)); margin: 0 auto; padding-left: var(--okraj); padding-right: var(--okraj); }

.skok { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--cervena); color: #fff; padding: 10px 16px; font-weight: 600; }
.skok:focus { top: 12px; }

/* ---------- lišta */
.lista {
  position: sticky; top: 0; z-index: 30;
  background: rgba(22, 25, 29, .94);
  border-bottom: 1px solid var(--ciara-tma);
  color: var(--na-tme);
  padding-top: env(safe-area-inset-top);
}
.lista-in { max-width: calc(var(--sirka) + 2 * var(--okraj)); margin: 0 auto; padding: 0 var(--okraj); height: 64px; display: flex; align-items: center; gap: 32px; }
.znacka { display: inline-flex; flex: none; }
.logo { height: 30px; width: auto; }
.logo .t { fill: #fff; }
.logo .r { fill: var(--cervena); }
.menu { display: flex; gap: 28px; margin-left: auto; font: 500 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.menu a { color: var(--na-tme-2); padding: 8px 0; position: relative; transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cervena); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.menu a:hover { color: #fff; }
.menu a:hover::after { transform: scaleX(1); }
.jazyky { display: flex; gap: 2px; font: 600 12px/1 var(--mono); letter-spacing: .06em; }
.menu + .jazyky { margin-left: 8px; }
.lista-in > .jazyky:nth-child(2) { margin-left: auto; }
.jazyky a { padding: 8px 8px; color: var(--na-tme-2); border: 1px solid transparent; }
.jazyky a:hover { color: #fff; }
.jazyky a[aria-current] { color: #fff; border-color: var(--ciara-tma); box-shadow: inset 0 -2px 0 var(--cervena); }

/* ---------- tmavé sekcie a modrotlačová mriežka */
.tma { background: var(--g8); color: var(--na-tme); }
.mriezka, .uvod {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

.kb { display: inline-block; width: 9px; height: 9px; background: var(--cervena); flex: none; }
.stitok, .kicker { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--na-tme-2); }
.svetla .kicker { color: var(--tlm); }
.kc { color: var(--cervena); }
.tma .kc { color: var(--cervena-svetla); }

/* ---------- tlačidlá */
.tl { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; font: 600 15px/1.2 var(--sans); border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s; }
.tl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.tl-cerv { background: var(--cervena); color: #fff; }
.tl-cerv:hover { background: var(--cervena-tm); }
.tl-cerv:hover svg { transform: translateX(3px); }
.tl-tma { border-color: rgba(255,255,255,.3); color: #fff; }
.tl-tma:hover { border-color: #fff; }
.tl-obrys { border-color: #c4c9cf; color: var(--ink); background: var(--biela); }
.tl-obrys:hover { border-color: var(--ink); }
.tlacidla { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- úvod */
.uvod { position: relative; overflow: hidden; }
.uvod::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 72% 42%, rgba(169,188,207,.09), transparent 70%); pointer-events: none; }
.uvod-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 72px); min-height: min(860px, calc(100vh - 64px - 54px)); }
.uvod h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.0; letter-spacing: -.028em; font-weight: 760; margin: 22px 0 24px; color: #fff; text-wrap: balance; }
.uvod-p { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; color: #c3cbd3; max-width: 34em; margin-bottom: 32px; }
.schopnosti { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ciara-tma); }
.schopnosti li { font: 500 12.5px/1.3 var(--mono); letter-spacing: .05em; color: var(--na-tme-2); padding: 14px 16px 0 0; margin-right: 16px; display: flex; align-items: center; gap: 9px; }
.schopnosti li::before { content: ""; width: 5px; height: 5px; background: var(--cervena); }

/* výkres (statické SVG + 3D plátno) */
.vykres { position: relative; }
.v-ramik { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 20px auto auto; border: 1px solid rgba(255,255,255,.18); background: rgba(15,17,19,.35); }
.v-ramik::before, .v-ramik::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--cervena); }
.v-ramik::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.v-ramik::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.v-zony { display: flex; font: 500 10px/1 var(--mono); color: rgba(255,255,255,.38); }
.v-zony span { flex: 1; display: flex; align-items: center; justify-content: center; }
.v-zony-h { grid-column: 2; grid-row: 1; border-bottom: 1px solid var(--ciara-tma); }
.v-zony-h span + span { border-left: 1px solid var(--ciara-tma); }
.v-zony-v { grid-column: 1; grid-row: 2; flex-direction: column; border-right: 1px solid var(--ciara-tma); }
.v-zony-v span + span { border-top: 1px solid var(--ciara-tma); }
.v-plocha { grid-column: 2; grid-row: 2; position: relative; aspect-ratio: 130 / 110; }
.v-titulok { grid-column: 1 / 3; grid-row: 3; display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-top: 1px solid rgba(255,255,255,.18); }
.v-titulok div { padding: 9px 12px 10px; min-width: 0; }
.v-titulok div + div { border-left: 1px solid var(--ciara-tma); }
.v-titulok span { display: block; font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 4px; }
.v-titulok b { display: block; font: 600 12.5px/1.25 var(--mono); color: var(--na-tme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-hud { position: absolute; left: 12px; top: 10px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.45); pointer-events: none; }
.v-hud span { color: var(--cervena-svetla); display: inline-block; min-width: 4.2ch; }

.vykres-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s; }
.vykres-svg .v-obrys { stroke: #e6ebf0; stroke-width: .3; }
.vykres-svg .v-osi { stroke: var(--cervena-svetla); stroke-width: .17; stroke-dasharray: 6 1.4 .7 1.4; opacity: .75; }
.vykres-svg .v-roztec { stroke: var(--cervena-svetla); stroke-width: .15; stroke-dasharray: 6 1.4 .7 1.4; opacity: .55; }
.vykres-svg .v-koty { stroke: var(--modrotlac); stroke-width: .17; }
.vykres-svg .v-sipky { fill: var(--modrotlac); stroke: none; }
.vykres-svg text { fill: #d6dee6; stroke: none; font: 600 3.4px var(--mono); text-anchor: middle; letter-spacing: .02em; }

.v-3d { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.v-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.vykres.ziva .v-3d { opacity: 1; }
.vykres.ziva .vykres-svg { opacity: 0; }
.v-popisy { position: absolute; inset: 0; pointer-events: none; }
.v-popisy span { position: absolute; left: 0; top: 0; font: 600 12px/1 var(--mono); color: #dbe3ea; background: rgba(22,25,29,.82); padding: 3px 5px; border: 1px solid rgba(169,188,207,.35); white-space: nowrap; will-change: transform; }

/* dokresľovanie výkresu (len s JS a bez obmedzenia pohybu) */
@media (prefers-reduced-motion: no-preference) {
  .js .vykres-svg .k { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .vykres-svg .v-osi, .js .vykres-svg .v-roztec, .js .vykres-svg .v-sipky, .js .vykres-svg text { opacity: 0; }
  .js .vykres.kresli .vykres-svg .k { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.65, .05, .25, 1) calc(var(--i) * 55ms); }
  .js .vykres.kresli .vykres-svg .v-osi { opacity: .75; transition: opacity .8s .1s; }
  .js .vykres.kresli .vykres-svg .v-roztec { opacity: .55; transition: opacity .8s .6s; }
  .js .vykres.kresli .vykres-svg .v-sipky, .js .vykres.kresli .vykres-svg text { opacity: 1; transition: opacity .6s 1.3s; }
}

/* ---------- dopravník (oddeľovač): náklad, nosný pás, poháňacie valce, spätná vetva */
.dopravnik { position: relative; height: 64px; border-top: 1px solid var(--ciara-tma); background: var(--g9); overflow: hidden; }
.d-naklad, .d-pas { position: absolute; left: 0; right: 0; overflow: hidden; }
.d-naklad { top: 4px; height: 22px; }
.d-pas { height: 5px; border-top: 1px solid rgba(255,255,255,.34); border-bottom: 1px solid rgba(255,255,255,.34); }
.d-pas-h { top: 26px; }
.d-pas-d { top: 55px; opacity: .6; }
.d-tok { position: absolute; top: 0; bottom: 0; left: -280px; right: 0; }
.d-naklad .d-tok {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='22'%3E%3Cg fill='none' stroke='%23e6ebf0' stroke-opacity='.55' stroke-width='1'%3E%3Crect x='40.5' y='4.5' width='46' height='17'/%3E%3Cpath d='M40.5 9.5h46M63.5 4.5v17'/%3E%3Crect x='176.5' y='8.5' width='26' height='13'/%3E%3C/g%3E%3Crect x='198' y='9' width='4' height='4' fill='%23c1272d'/%3E%3C/svg%3E") 0 0 / 280px 22px repeat-x;
}
.d-pas .d-tok { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 10px, transparent 10px 20px); }
/* valce: priemer 22 px, rozstup 44 px, horná dotyčnica = spodok nosného pásu */
.d-valce { position: absolute; left: 0; right: 0; top: 32px; height: 22px; display: flex; gap: 22px; padding-left: 11px; }
.d-valce i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
  background:
    radial-gradient(circle, var(--cervena) 0 2px, transparent 2.5px),
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) center / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.4)) center / 100% 1px no-repeat,
    var(--g8); }
@media (prefers-reduced-motion: no-preference) {
  .d-naklad .d-tok, .d-pas-h .d-tok { animation: pas 7s linear infinite; }
  .d-pas-d .d-tok { animation: pas 7s linear infinite reverse; }   /* spätná vetva ide opačne */
  .d-valce i { animation: valec 1.728s linear infinite; }          /* 2π·11 px / 40 px/s */
  .dopravnik.stoj .d-tok, .dopravnik.stoj .d-valce i, .skryta .dopravnik .d-tok, .skryta .dopravnik .d-valce i { animation-play-state: paused; }
}
@media (max-width: 600px) { .d-valce i:nth-child(n+11) { display: none; } } /* na mobile len viditeľné valce */
@keyframes pas { from { transform: translateX(0); } to { transform: translateX(280px); } }
@keyframes valec { to { transform: rotate(360deg); } }

/* ---------- sekcie */
.sekcia { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.svetla { background: var(--papier); color: var(--ink); }
.sekcia h2 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.08; letter-spacing: -.022em; font-weight: 740; margin: 16px 0 0; text-wrap: balance; }
.hlava { margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.dva { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.text { margin-top: 28px; max-width: 40em; }
.text p { color: var(--ink-2); }
.text p + p { margin-top: 1em; }
.text strong { color: var(--ink); }
.mini { margin: 40px 0 14px; font: 600 12.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tlm); }
.odvetvia { display: flex; flex-wrap: wrap; gap: 8px; }
.odvetvia li { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 11px; background: var(--biela); border: 1px solid var(--ciara); font-size: 15px; font-weight: 550; }
.odvetvia span { font: 600 11px/1 var(--mono); color: var(--cervena); }

/* fakty s počítadlami */
.fakty { display: grid; grid-template-columns: 1fr 1fr; background: var(--biela); border: 1px solid var(--ciara); position: relative; }
.fakty::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 3px; background: var(--cervena); }
.fakt { padding: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--ciara); }
.fakt:nth-child(-n+2) { border-top: 0; }
.fakt:nth-child(even) { border-left: 1px solid var(--ciara); }
.fakt-c { font: 600 clamp(46px, 5vw, 68px)/1 var(--mono); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fakt-l { margin-top: 14px; font-weight: 650; font-size: 16px; line-height: 1.3; }
.fakt-p { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--tlm); }

/* služby */
.sluzby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sluzba { position: relative; padding: 30px 28px 32px; border: 1px solid var(--ciara-tma); background: rgba(255,255,255,.025); transition: border-color .3s, background-color .3s; }
.sluzba::before, .sluzba::after { content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid rgba(255,255,255,.55); }
.sluzba::before { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.sluzba::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.sluzba:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.sluzba-hlava { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.sluzba-c { font: 600 13px/1 var(--mono); color: var(--na-tme-2); letter-spacing: .08em; }
.ikona { width: 84px; height: 84px; fill: none; stroke: #e6ebf0; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ikona .t { stroke: var(--modrotlac); stroke-width: 1; }
.ikona .c { stroke: var(--cervena-svetla); }
.sluzba h3 { font-size: 21px; line-height: 1.25; font-weight: 680; letter-spacing: -.01em; color: #fff; }
.sluzba p { margin-top: 12px; color: #c9d1d8; font-size: 16px; }
.sluzba h4 { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ciara-tma); display: flex; align-items: center; gap: 10px; font: 600 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--na-tme); }
.sluzba h4::before { content: ""; width: 6px; height: 6px; background: var(--cervena); flex: none; }
.sluzba p.tlm { color: var(--na-tme-2); font-size: 15px; }

/* ozubené kolesá na rozhraní sekcií */
.kolesa { position: absolute; right: max(120px, 9vw); bottom: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.kolo { position: absolute; max-width: none; fill: none; stroke: #8b96a1; stroke-opacity: .55; stroke-width: .32; }
.kolo .os { stroke: var(--cervena); stroke-opacity: .7; stroke-dasharray: 5 1.2 .6 1.2; stroke-width: .22; }
@media (prefers-reduced-motion: no-preference) {
  .kolo-a { animation: valec 64s linear infinite; }
  .kolo-b { animation: valec-spat calc(64s * var(--pomer)) linear infinite; }
  .kolesa.stoj .kolo { animation-play-state: paused; }
}
@keyframes valec-spat { to { transform: rotate(-360deg); } }

/* postup = technologická linka */
.linka { position: relative; }
.linka-draha { position: absolute; left: 17px; width: 75%; top: 16px; height: 2px; background: var(--ciara); }
.linka-draha::before { content: ""; position: absolute; inset: -5px 0 auto; height: 12px; background: repeating-linear-gradient(90deg, rgba(22,24,27,.16) 0 1px, transparent 1px 12px); }
.linka-napln { position: absolute; inset: 0; background: var(--cervena); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.obrobok { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform: translateX(calc(var(--p, 1) * 100%)); }
.obrobok::before { content: ""; position: absolute; left: -9px; top: -9px; width: 16px; height: 16px; background: var(--cervena); box-shadow: 0 0 0 4px rgba(193,39,45,.18); }
.fazy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.faza { padding-right: clamp(16px, 2.6vw, 40px); }
.faza-bod { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b9bfc6; background: var(--papier); font: 600 12px/1 var(--mono); color: var(--tlm); transition: background-color .35s, border-color .35s, color .35s; }
.faza.on .faza-bod { background: var(--ink); border-color: var(--ink); color: #fff; }
.faza h3 { margin-top: 28px; font-size: 20px; line-height: 1.25; font-weight: 680; letter-spacing: -.01em; }
.faza-s { margin-top: 10px; font-weight: 550; color: var(--ink); font-size: 16px; }
.faza-d { margin-top: 10px; color: var(--tlm); font-size: 15px; line-height: 1.6; }
.js .faza { transition: opacity .4s; }
.js .linka.bezi .faza:not(.on) { opacity: .45; }

/* klienti — pás log: bez JS zalomená mriežka; s JS vodorovný scroll (prst, myš, šípky) + jemný auto-posun */
.klienti { background: var(--g9); padding-bottom: clamp(56px, 6vw, 88px); }
.klienti-hlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.klienti .hlava { margin-bottom: 0; }
.pas-sipky { display: flex; gap: 8px; flex: none; }
.pas-sipky[hidden] { display: none; }
.pas-sipka { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--na-tme); border: 1px solid var(--ciara-tma); cursor: pointer; transition: border-color .2s, color .2s; }
.pas-sipka:hover { border-color: #fff; color: #fff; }
.pas-sipka svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pas { position: relative; border-top: 1px solid var(--ciara-tma); border-bottom: 1px solid var(--ciara-tma); }
.pas:focus-visible { outline-offset: -2px; }
.pas-rad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(40px, 5vw, 80px); padding: 0 clamp(24px, 2.5vw, 40px); }
.pas-rad li { height: 112px; display: flex; align-items: center; }
.pas-kopia { display: none; }
.pas svg { fill: rgba(233,237,241,.62); transition: fill .3s, transform .3s; }
.pas li:hover svg { fill: #fff; transform: translateY(-2px); }
.js .pas { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.js .pas::-webkit-scrollbar { display: none; }
.js .pas.tahanie { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.js .pas-tok { display: flex; width: max-content; }
.js .pas-rad { flex-wrap: nowrap; gap: clamp(48px, 5vw, 80px); }
.js .pas-kopia { display: flex; }

/* tím */
.tim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.osoba { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; padding: 32px; background: var(--biela); border: 1px solid var(--ciara); position: relative; }
.osoba::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 3px; background: var(--cervena); }
.osoba-foto { width: 120px; height: 120px; }
.portret { display: block; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #e9ecef;
  border: 1px solid var(--ciara); box-shadow: 0 6px 18px rgba(22, 24, 27, .12); }
.portret img { width: 100%; height: 100%; object-fit: cover; }
.portret-mono { background: var(--g8); border-color: var(--g8); display: grid; place-items: center; }
.monogram { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-tah { stroke: #fff; stroke-width: 3.2; }
.m-ciara { stroke: var(--cervena); stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .js .m-tah, .js .m-ciara { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .osoba.vis .m-tah { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.45, .05, .35, 1) .3s; }
  .js .osoba.vis .m-ciara { stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease-out 2.3s; }
}
.osoba h3 { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.funkcia { margin-top: 6px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tlm); }
.kontakty { margin: 18px 0 20px; display: grid; gap: 6px; }
.kontakty li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.kontakty svg { width: 17px; height: 17px; fill: none; stroke: var(--cervena); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kontakty a:hover { color: var(--cervena); }
.osoba-akcie { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-qr[hidden] { display: none; }
.tl-qr { cursor: pointer; padding: 0 16px; }
/* dialóg s QR kódom vizitky */
.qr-dialog { border: 0; padding: 32px 28px 26px; width: min(340px, calc(100vw - 32px)); background: var(--biela); color: var(--ink); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.qr-dialog::backdrop { background: rgba(15, 17, 19, .74); }
.qr-dialog img { width: 240px; height: 240px; margin: 18px auto 14px; image-rendering: pixelated; }
.qr-meno { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.qr-text { font-size: 14.5px; color: var(--tlm); }
.qr-zavriet { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 18px; color: var(--tlm); cursor: pointer; }
.qr-zavriet:hover { color: var(--ink); }
.qr-dialog { position: fixed; }

/* kontakt */
.kontakt .velky { margin-top: 18px; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.15; font-weight: 680; letter-spacing: -.015em; }
.kontakt .velky + .velky { margin-top: 6px; }
.kontakt .velky a { background: linear-gradient(var(--cervena), var(--cervena)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.kontakt .velky a:hover { background-size: 100% 2px; }
.kontakt .tlacidla { margin-top: 36px; }
.rohova { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.2); background: rgba(15,17,19,.4); position: relative; }
.rohova::before { content: ""; position: absolute; right: -1px; top: -1px; width: 28px; height: 3px; background: var(--cervena); }
.rohova div { padding: 16px 18px 17px; border-bottom: 1px solid var(--ciara-tma); min-width: 0; }
.rohova div:not(.r2):nth-of-type(odd) { border-right: 1px solid var(--ciara-tma); }
.rohova .r2 { grid-column: 1 / 3; }
.rohova div:last-child { border-bottom: 0; }
.rohova dt { font: 600 10.5px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--na-tme-2); margin-bottom: 6px; }
.rohova dd { font-size: 15.5px; line-height: 1.5; color: var(--na-tme); overflow-wrap: anywhere; }
.rohova dd a { border-bottom: 1px solid rgba(255,255,255,.25); }
.rohova dd a:hover { border-color: var(--cervena-svetla); }

/* pätička */
.pata { background: var(--g9); color: var(--na-tme-2); font-size: 13.5px; line-height: 1.6; border-top: 1px solid var(--ciara-tma); }
.pata-in { padding-top: 40px; padding-bottom: max(40px, env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.pata .logo { height: 26px; }
.pata-odkazy { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pata a:hover { color: #fff; }
.autor a { color: var(--na-tme); letter-spacing: .06em; font-weight: 600; }

/* malý úvod (GDPR, 404) a právny text */
.uvod-maly { padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 72px); }
.uvod-maly h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.025em; font-weight: 750; margin: 18px 0 16px; color: #fff; }
.uvod-maly .uvod-p { margin-bottom: 0; }
.chyba .tlacidla { margin-top: 32px; }
.pravne { max-width: 860px; display: grid; gap: 40px; }
.pravne h2 { font-size: 22px; letter-spacing: -.01em; margin: 0; }
.pravne .text { margin-top: 12px; }
.pravne ul { list-style: none; margin: 10px 0; display: grid; gap: 4px; }
.pravne li { padding-left: 18px; position: relative; color: var(--ink-2); }
.pravne li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--cervena); }
.pravne a:not(.tl) { color: var(--cervena); }
.zavazne { padding: 14px 18px; background: var(--biela); border-left: 3px solid var(--cervena); color: var(--ink-2); font-size: 15.5px; }
.mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.mapa h2 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 12px; }
.mapa h2 a:hover, .mapa li a:hover { color: var(--cervena); }
.mapa .mini { margin: 22px 0 10px; }
.mapa ul { display: grid; gap: 8px; }
.mapa li { padding-left: 18px; position: relative; }
.mapa li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--cervena); }
.mapa li a { border-bottom: 1px solid var(--ciara); }

/* odkrývanie pri scrollovaní */
@media (prefers-reduced-motion: no-preference) {
  .js .odhal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  .js .odhal.vis { opacity: 1; transform: none; }
  .js .ikona path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .sluzba.vis .ikona path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, .05, .25, 1) calc(var(--d, 0s) + .25s); }
}

/* ---------- tablet */
@media (max-width: 1080px) {
  .menu { gap: 18px; }
  .sluzby { grid-template-columns: 1fr; }
  .sluzba { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; }
  .sluzba > * { grid-column: 2; }
  .sluzba-hlava { grid-column: 1; grid-row: 1 / 6; flex-direction: column; gap: 14px; margin: 0; }
  .tim { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .menu { display: none; }
  .lista-in > .jazyky { margin-left: auto; }
  .uvod-in { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .dva { grid-template-columns: 1fr; }
  .fazy { grid-template-columns: 1fr; gap: 36px; }
  .faza { padding: 0 0 0 58px; position: relative; }
  .faza-bod { position: absolute; left: 0; top: 0; }
  .faza h3 { margin-top: 4px; }
  .linka-draha { left: 16px; top: 17px; bottom: 0; width: 2px; height: auto; }
  .linka-draha::before { inset: 0 auto 0 -5px; width: 12px; height: auto; background: repeating-linear-gradient(0deg, rgba(22,24,27,.16) 0 1px, transparent 1px 12px); }
  .linka-napln { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .obrobok { width: 0; height: 100%; transform: translateY(calc(var(--p, 1) * 100%)); }
  .obrobok::before { left: -7px; top: -9px; }
}

/* ---------- mobil */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .lista-in { height: 58px; gap: 16px; }
  .logo { height: 26px; }
  .jazyky a { padding: 8px 7px; }
  .uvod-in { padding-top: 40px; gap: 32px; }
  .uvod h1 { font-size: clamp(36px, 10.4vw, 46px); margin: 18px 0 18px; }
  .uvod-p { margin-bottom: 26px; }
  .tlacidla .tl { flex: 1 1 auto; justify-content: center; }
  .schopnosti { margin-top: 28px; }
  .schopnosti li { padding-top: 12px; margin-right: 12px; font-size: 12px; }
  .v-ramik { grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: 16px auto auto; }
  .v-zony { font-size: 9px; }
  .v-titulok { grid-template-columns: 1.4fr 1fr; }
  .v-titulok div:nth-child(3) { display: none; }
  .v-titulok b { white-space: normal; font-size: 11.5px; }
  .vykres-svg .v-obrys { stroke-width: .42; }
  .vykres-svg .v-osi, .vykres-svg .v-roztec, .vykres-svg .v-koty { stroke-width: .26; }
  .vykres-svg text { font-size: 5px; }
  .v-popisy span { font-size: 10.5px; padding: 2px 4px; }
  .v-hud { font-size: 10px; left: 8px; top: 8px; }
  .fakty { grid-template-columns: 1fr 1fr; }
  .fakt { padding: 18px 16px; }
  .fakt-c { font-size: 44px; }
  .fakt-l { font-size: 15px; }
  .sluzba { display: block; padding: 24px 20px 26px; }
  .sluzba-hlava { flex-direction: row; margin-bottom: 18px; }
  .ikona { width: 60px; height: 60px; }
  .kolesa { transform: scale(.62); right: 76px; }
  .pas-rad li { height: 92px; }
  .osoba { grid-template-columns: 1fr; padding: 26px 22px 28px; gap: 20px; justify-items: start; }
  .rohova { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr; gap: 32px; }
  .klienti-hlava { margin-bottom: 28px; }
  .rohova div:not(.r2):nth-of-type(odd) { border-right: 0; }
  .rohova .r2 { grid-column: auto; }
  .kontakt .velky { font-size: clamp(24px, 7.4vw, 32px); }
}