/* Homepage "Jeden liaty betón": tmavý začiatok, línia liatia, posuvník konzistencie, hladenie, vytvrdnutá svetlá časť. */

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;min-height:min(78vh,760px)}
.copy{position:relative;z-index:2;padding-block:56px}
.hero h1{margin-bottom:28px}
.hero h1 .sub{display:block;margin-top:.35em;color:var(--dry);font-weight:500;font-stretch:100%;font-size:.5em;line-height:1.05;letter-spacing:0}
.hero .lead{margin-bottom:36px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.call{margin-top:18px;font-size:15px;color:var(--dry)}
.call a{color:var(--cement);text-decoration:none;border-bottom:1px solid var(--joint)}
.call a:hover{border-color:var(--cement)}
/* hero cez celú šírku: video pokrýva celú plochu (home.js ho zmenší/zväčší tak, aby prúd bol na ~70 % šírky, rozliatie ostalo v zábere
   a pravý okraj videa bol za okrajom okna), text vľavo na tmavom prechode. Žiadne mix-blend: Windows ho pri hardvérovom
   dekódovaní videa ignoruje a bol vidieť tmavší obdĺžnik. */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--wet) 0,var(--wet) var(--g0,30%),rgba(17,18,20,.6) calc((var(--g0,30%) + var(--g1,60%)) / 2),rgba(17,18,20,0) var(--g1,60%))}
.visual{position:absolute;inset:0}
.visual .poster,.visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* horný okraj videa preč: hardvérový dekodér vo Windows kreslí na hornom okraji zelený pruh (overené u klienta 8. 11.); home.js dá video 8 px nad hero */
  clip-path:inset(8px 0 0 0);pointer-events:none}
.visual video{opacity:0;transition:opacity .8s var(--ease)}
.visual video.on{opacity:1}
.visual .poster{transition:opacity .8s var(--ease)}
.visual.playing .poster{opacity:0}
@media (min-width:761px){
  /* spodok videa sa zleje s pásom faktov */
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(17,18,20,0),var(--wet))}
}
.vid-toggle{position:absolute;right:calc(var(--gutter) + 4px);bottom:20px;z-index:3;min-height:36px;padding:6px 12px;border:1px solid var(--joint);border-radius:2px;background:rgba(17,18,20,.7);color:var(--dry);font:500 13px var(--f-body);cursor:pointer}
.vid-toggle:hover{color:var(--cement);border-color:var(--dry)}

/* fakty: štyri polia oddelené škárou */
.facts{border-block:1px solid var(--joint)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts li{display:flex;flex-direction:column;gap:4px;padding:22px 24px 22px 0}
.facts li+li{padding-left:24px;border-left:1px solid var(--joint)}
.facts b{font:750 22px/1.1 var(--f-display);font-stretch:112%}
.facts span{font-size:14.5px;color:var(--dry)}

/* prúd pokračuje ako línia a rozdelí sa do troch debnení */
.pour{padding-bottom:112px}
.stream{display:block;position:absolute;left:var(--gutter);top:0;width:calc(100% - 2 * var(--gutter));height:0;overflow:visible;pointer-events:none}
.pour .wrap{position:relative;padding-top:88px}
.stream path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.pour-head{display:grid;gap:16px;max-width:min(560px,46%);margin:0 0 84px}
.pour-head p{color:var(--dry);max-width:34em}
.slabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.slab{display:flex;flex-direction:column;gap:14px;padding:30px 26px 26px;background:var(--panel);border:1px solid var(--joint);border-top:2px solid var(--green);border-radius:0;min-width:0}
.slab p{color:#c4c3bf;font-size:16px}
.slab .link{margin-top:auto;align-self:flex-start}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.tags li{font-size:13px;color:var(--dry);border:1px solid var(--joint);padding:3px 8px;border-radius:2px}

/* konzistencia: doska na skúšku rozliatím */
.flow{padding-block:0 120px}
.flow .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:'head board' 'ctrl board';gap:0 64px;align-items:center}
.flow-head{grid-area:head;align-self:end}
.flow-ctrl{grid-area:ctrl;align-self:start}
.board{grid-area:board}
.flow-head p{color:var(--dry);margin-top:18px;max-width:34em}
.flow-label{display:block;margin-top:36px;font-weight:600;font-size:15px}
.flow-range{width:100%;margin:14px 0 6px;accent-color:var(--green);height:32px;cursor:pointer}
.flow-ends{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dry)}
.flow-out{display:flex;align-items:baseline;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--joint)}
.flow-out b{font-size:30px;font-weight:500;color:var(--green)}
.flow-out span{font-size:18px}
.flow-note{margin-top:14px;font-size:13.5px;color:var(--dry)}
.board{margin:0;max-width:520px;justify-self:end;width:100%}
.board svg{width:100%;height:auto;overflow:visible}
.plate{fill:var(--panel);stroke:var(--joint);stroke-width:2}
.ring{fill:none;stroke:var(--joint);stroke-width:2;stroke-dasharray:6 8}
.spread{fill:#8f9398;fill-opacity:.5;stroke:var(--cement);stroke-width:2;transition:r .7s var(--ease)}
.cone{fill:none;stroke:var(--green);stroke-width:3}
.scale{stroke:var(--dry);stroke-width:2;vector-effect:non-scaling-stroke;transform-origin:450px 830px;transition:transform .7s var(--ease)}
.scale-t{fill:var(--dry);font:500 44px var(--f-mono)}

/* hladenie: pás s fotkou sa odkryje ťahom zľava doprava */
.trowel{height:clamp(200px,28vw,380px);overflow:hidden;background:var(--cured)}
.trowel img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  -webkit-mask-image:linear-gradient(to right,#000 calc(var(--smooth,1) * 125% - 25%),transparent calc(var(--smooth,1) * 125%));
  mask-image:linear-gradient(to right,#000 calc(var(--smooth,1) * 125% - 25%),transparent calc(var(--smooth,1) * 125%))}

/* vytvrdnutá časť */
.cured{background:var(--cured);color:var(--ink)}
.lab{padding-block:104px 96px}
.lab .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start}
.lab-img{margin:0}
.lab-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.lab-img figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.lab-copy .lead{margin-top:18px}
.services{list-style:none;margin:32px 0 36px;padding:0;border-top:1px solid var(--cured-joint)}
.services li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--cured-joint)}
.services b{font-weight:600}
.services span{color:var(--ink-2)}

.cats{padding-block:24px 120px}
.cats-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:end;margin-bottom:40px}
.cats-head p{color:var(--ink-2);max-width:36em}
.cats-head .link{color:var(--ink)}
/* produkty: štyri karty s obrázkom, celá karta je odkaz */
.cat-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cat-cards a{display:grid;grid-template-rows:auto 1fr auto;height:100%;background:var(--cured-2);text-decoration:none;color:var(--ink);border-top:3px solid var(--green)}
.cat-cards figure{margin:0;overflow:hidden;aspect-ratio:16/8}
.cat-cards figure img{width:100%;height:100%;object-fit:cover}
.cat-body{padding:22px 24px 8px}
.cat-body h3{font-size:clamp(22px,2.2vw,30px)}
.cat-body p{margin-top:8px;color:var(--ink-2);font-size:15.5px}
.cat-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 20px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.cat-foot .arr{color:var(--ink)}

/* riešenia: veľký zoznam, na počítači pri prechode myšou obrázok pri kurzore */
.solve{padding-block:0 120px;position:relative}
.solve-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.solve-list a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--cured-joint);text-decoration:none;color:var(--ink)}
.solve-t{font:800 clamp(22px,2.6vw,36px)/1.08 var(--f-display);font-stretch:112%;letter-spacing:-.01em}
.solve-p{color:var(--ink-2);font-size:16px;max-width:34em}
.solve-preview{position:fixed;left:0;top:0;z-index:5;width:320px;aspect-ratio:16/10;pointer-events:none;overflow:hidden;opacity:0;
  transform:translate(var(--x,0),var(--y,0)) scale(.9);transition:opacity .25s ease,transform .5s var(--ease-out)}
.solve-preview img{width:100%;height:100%;object-fit:cover}
.solve-preview.on{opacity:1;transform:translate(var(--x,0),var(--y,0)) scale(1)}

/* záver: kontakt na technológa, tmavý pás pred pätou */
.people{padding-block:120px;background:var(--wet);color:var(--cement)}
.people .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:end}
.people-head .lead{margin:20px 0 32px}
.people-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.person{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:2px solid var(--green)}
.person p{color:var(--dry);margin-bottom:10px}
.person .big{width:fit-content;font-size:18px;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}

@media (max-width:980px){
  .facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(3){padding-left:0;border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--joint)}
  .flow .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'board' 'ctrl'}
  .board{justify-self:center;max-width:340px;margin-top:32px}
  .lab .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .people .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .solve-list a{grid-template-columns:minmax(0,1fr) auto}
  .solve-p{grid-column:1;grid-row:2;font-size:15px}
  .solve-list .arr{grid-column:2;grid-row:1}
}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .visual{position:relative;top:0;aspect-ratio:1280/704;width:100%;height:auto}
  .visual .poster{clip-path:none} /* na mobile sa video nesťahuje, obrázok orezávať netreba */
  .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,18,20,0) 70%,var(--wet) 100%)}
  .hero::before{display:none}
  .flow-label{margin-top:28px}
  .copy{padding-block:8px 40px}
  .hero h1{font-size:clamp(40px,12vw,58px)}
  .ctas .btn{flex:1 1 100%}
  .facts ul{grid-template-columns:minmax(0,1fr)}
  .facts li,.facts li+li{padding:16px 0;border-left:0}
  .facts li+li{border-top:1px solid var(--joint)}
  .stream{display:none} /* na mobile sú debnenia pod sebou, rozvetvenie by nikam neviedlo */
  .pour-head{margin:0 0 36px;max-width:none}
  .pour .wrap{padding-top:56px}
  .pour{padding-bottom:80px}
  .pour-head,.cats-head{grid-template-columns:minmax(0,1fr)}
  .slabs{grid-template-columns:minmax(0,1fr)}
  .flow{padding-bottom:88px}
  .services li{grid-template-columns:minmax(0,1fr);gap:2px}
  .cat-cards{grid-template-columns:minmax(0,1fr)}
  .people{padding-block:80px}
  .people-list{grid-template-columns:minmax(0,1fr)}
  .lab{padding-block:72px}
}

/* debnenia: kým k nim línia nedotečie, sú stlmené; potom sa postupne naplnia (len s JS a bez reduced motion) */
.pour.anim .slab{opacity:.32;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),translate .35s var(--ease-out),border-color .35s ease}
.pour.anim .slab.on{opacity:1;transform:none} /* karta sa ukáže, keď k nej dotečie línia */