/* Landing, scény 2 až 6: Práca (3D galéria), Čo dostanete + merania, Otázky + podmienky + Spýtajte sa, Blog, Záver. Telefón prvý. */
.scene{position:relative;display:flex;flex-direction:column;padding:56px var(--gut) 0}
.scene>*{min-width:0}
.more{margin-top:22px}
.more .btn{min-width:200px}
.sc-work .more{margin-top:14px}
.scene h2{letter-spacing:-.045em}

/* 2. práca */
.sc-work{padding-top:52px}
.statement{font-size:clamp(28px,7.6vw,76px);letter-spacing:-.04em;line-height:1.06;margin-bottom:20px}
.sc-work .eyebrow{margin-bottom:10px}

/* 3. čo dostanete + merania */
.sc-wins{padding-top:56px}
.wins-h{font-size:clamp(34px,9.6vw,92px);letter-spacing:-.045em;line-height:1}
.wins-head .lead{margin-top:14px;font-size:var(--fs-md);max-width:34ch}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.tile{position:relative;display:grid;grid-template-rows:64px auto 1fr;gap:6px;height:100%;padding:12px 12px 14px;border-radius:var(--r-2);background:var(--card);box-shadow:inset 0 0 0 2px var(--surface-3);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2),box-shadow var(--dur-2)}
.tile:active{background:var(--surface-2)}
.tile-vis{position:relative;display:block;overflow:hidden;border-radius:var(--r-1);background:#0d0d0d;box-shadow:inset 0 0 0 2px var(--surface-2)}
.tile-t{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.tile-s{color:var(--mute);font-size:var(--fs-sm);line-height:1.3}
.art-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;margin-top:10px;min-height:64px;padding:12px 4px 12px 2px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.art-link .ico{grid-column:2;grid-row:1/span 2;width:26px;height:26px;transition:transform var(--dur-2) var(--ease)}
.art-link-k{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.art-link-t{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.meas-home{margin-top:26px}
.meas-h{font-size:clamp(28px,7.6vw,52px);letter-spacing:-.04em;line-height:1.05}
.meas-h{margin-bottom:14px}

/* živé ilustrácie dlaždíc: základ je konečný stav, pohyb len pod .js (spúšťa sa pri vstupe do výrezu, znova pri hoveri a fokuse) */
.tv-l{position:absolute;display:block;height:5px;border-radius:3px;background:#444}
.tile-seo .tv-u{left:12px;top:10px;width:34%;height:4px;background:#5d5d5d}
.tile-seo .tv-t{left:12px;top:22px;width:72%;height:7px;background:var(--fg)}
.tile-seo .tv-d{left:12px;top:38px;width:82%;height:4px}
.tile-seo .tv-d2{top:48px;width:56%}
.tv-mag{position:absolute;left:62%;top:14px;width:16px;height:16px;border:2px solid var(--fg);border-radius:50%;background:rgba(245,245,245,.1);opacity:0}
.tile-geo .tv-a1{left:12px;top:12px;width:78%;background:var(--fg);height:5px}
.tile-geo .tv-a2{left:12px;top:24px;width:66%;background:var(--field)}
.tile-geo .tv-a3{left:12px;top:36px;width:42%;background:var(--field)}
.tv-cite{position:absolute;left:calc(12px + 42% + 8px);top:29px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:var(--fs-xs);font-weight:600;line-height:1}
.tv-src{position:absolute;left:12px;bottom:8px;display:flex;align-items:center;gap:6px}
.tv-src i{display:block;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fg)}
.tv-src .tv-l{position:static;width:46px;height:4px}
.tile-bots .tv-code{position:absolute;left:10px;top:8px;display:grid;gap:3px;font-size:var(--fs-xs);line-height:1.2;color:var(--fg);white-space:nowrap}
.tile-bots .tv-code span{display:block;clip-path:inset(0 0 0 0)}
.tile-bots .tv-code span:nth-child(n+2){color:var(--text-2)}
.tv-bot{position:absolute;right:8px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--fg);transform:translateY(34px)}
.tile-speed .tile-vis{display:flex;align-items:center;justify-content:center;gap:16px}
.tv-ring{display:block;transform:rotate(-90deg);overflow:visible}
.tv-ring circle{fill:none;stroke-width:4}
.tv-ring-b{stroke:var(--surface-3)}
.tv-ring-f{stroke:var(--fg);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:5}
.tv-ph{position:relative;display:block;width:24px;height:46px;border-radius:var(--r-1);box-shadow:inset 0 0 0 2px #6a6a6a;overflow:hidden}
.tv-ph i{position:absolute;left:4px;right:4px;bottom:5px;height:5px;border-radius:3px;background:var(--fg);transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .js:not(:where(.is-paused)) .tile.play .tv-u{animation:tv-grow .45s var(--ease) .05s both}
  .js:not(:where(.is-paused)) .tile.play .tv-t{animation:tv-grow .7s var(--ease) .3s both}
  .js:not(:where(.is-paused)) .tile.play .tv-d{animation:tv-grow .6s var(--ease) .75s both}
  .js:not(:where(.is-paused)) .tile.play .tv-d2{animation-delay:.9s}
  .js:not(:where(.is-paused)) .tile.play .tv-mag{animation:tv-scan 1.5s var(--ease-io) .3s both}
  .js:not(:where(.is-paused)) .tile.play .tv-a1{animation:tv-grow .6s var(--ease) .1s both}
  .js:not(:where(.is-paused)) .tile.play .tv-a2{animation:tv-grow .6s var(--ease) .35s both}
  .js:not(:where(.is-paused)) .tile.play .tv-a3{animation:tv-grow .5s var(--ease) .6s both}
  .js:not(:where(.is-paused)) .tile.play .tv-cite{animation:tv-pop .5s var(--ease) 1.05s both}
  .js:not(:where(.is-paused)) .tile.play .tv-src{animation:tv-fade .5s ease 1.35s both}
  .js:not(:where(.is-paused)) .tile.play .tv-code span{animation:tv-type .8s steps(14,end) both}
  .js:not(:where(.is-paused)) .tile.play .tv-code span:nth-child(1){animation-delay:.1s}
  .js:not(:where(.is-paused)) .tile.play .tv-code span:nth-child(2){animation-delay:.7s;animation-duration:.4s}
  .js:not(:where(.is-paused)) .tile.play .tv-code span:nth-child(3){animation-delay:1.15s;animation-duration:.9s}
  .js:not(:where(.is-paused)) .tile.play .tv-bot{animation:tv-walk 1.9s var(--ease-io) .1s both}
  .js:not(:where(.is-paused)) .tile.play .tv-ring-f{animation:tv-ring 1.3s var(--ease-io) .1s both}
  .js:not(:where(.is-paused)) .tile.play .tv-ph i{animation:tv-grow 1.3s var(--ease-io) .1s both}
}
@keyframes tv-grow{from{transform:scaleX(0);transform-origin:0 50%}}
@keyframes tv-scan{0%{opacity:0;transform:translateX(-40px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(28px)}}
@keyframes tv-pop{from{opacity:0;transform:scale(.2)}60%{transform:scale(1.2)}}
@keyframes tv-fade{from{opacity:0}}
@keyframes tv-type{from{clip-path:inset(0 100% 0 0)}}
@keyframes tv-walk{0%{transform:translateY(0)}35%{transform:translateY(0)}60%{transform:translateY(12px)}100%{transform:translateY(34px)}}
@keyframes tv-ring{from{stroke-dashoffset:100}}

/* 4. otázky + podmienky + spýtajte sa: css/otazky.css */

/* 5. blog */
.sc-blog{padding-top:56px}
.blog-h{font-size:clamp(46px,13.4vw,140px);letter-spacing:-.05em;line-height:.95}
.sc-blog .chips-fx{margin-top:20px}
.sc-blog .bl{margin-top:14px}
.bl-home .bl-t{font-size:clamp(24px,6.3vw,52px)}
.sc-blog .more{margin-top:18px}

/* 6. záver + päta */
.sc-close{padding-top:56px}
.sc-close h2{font-size:clamp(44px,12.4vw,120px);letter-spacing:-.05em;line-height:.96}
.big-acts{display:grid;gap:10px;margin-top:26px;max-width:560px}
.big-a{display:flex;align-items:center;gap:16px;min-height:60px;padding:0 24px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px var(--field);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--dur-1),background-color var(--dur-1)}
.big-a .ico{width:26px;height:26px;flex:none}
.big-a:active{background:var(--surface-2)}
.foot-c{padding:34px 0 calc(var(--bar-h) + var(--safe) + 22px)}
.fc{display:grid;gap:6px}
.fc-price{color:var(--fg);font-size:var(--fs-sm);line-height:1.4}
.fc-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.fc-pages a,.fc-row a{display:flex;align-items:center;min-height:44px;font-size:var(--fs-sm);text-decoration:none;overflow-wrap:anywhere}
.fc-co{color:var(--mute);font-size:var(--fs-xs);line-height:1.5}
.fc-row{display:flex;flex-wrap:wrap;gap:0 18px}
.fc-small a{color:var(--mute);font-size:var(--fs-sm);min-width:44px}
.fc-copy{color:var(--mute);font-size:var(--fs-xs)}

@media (min-width:700px){
  .scene{padding-top:96px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .tile{grid-template-rows:96px auto 1fr;padding:16px 16px 20px}
  .fc-pages{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:900px){
  .scene{padding:130px var(--gut) 0;max-width:1360px;margin-inline:auto;width:100%}
  .sc-work{padding:140px 0 0;max-width:none}
  .sc-work .sc-head{max-width:1360px;margin-inline:auto;width:100%;padding-inline:var(--gut)}
  .sc-work .gx-bleed{margin-inline:0}
  .rm .sc-work .gx-row{padding-inline:max(var(--gut),calc((100vw - 1360px) / 2 + var(--gut)))}
  .statement{font-size:clamp(40px,4.4vw,64px);max-width:24ch}
  .sc-wins{padding-top:150px}
  .wins-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:0 56px}
  .wins-head .eyebrow{grid-column:1/-1}
  .wins-head .lead{margin:0;font-size:var(--fs-lg)}
  .tiles{margin-top:44px}
  .art-link{grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;margin-top:22px;min-height:72px}
  .art-link .ico{grid-column:3;grid-row:1}
  .art-link-t{font-size:26px}
  .meas-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:72px;align-items:start;margin-top:110px}
  .meas-home>.eyebrow,.meas-home>.meas-h,.meas-home>.meas-sub{grid-column:1}
  .meas-home>.sp{grid-column:2;grid-row:1/span 4}
  .meas-home>.more{grid-column:1;align-self:end}
  .sc-blog{padding-top:150px}
  .sc-blog .bl{margin-top:22px}
  .sc-blog .more{margin-top:34px}
  .sc-close{padding-top:150px}
  .big-acts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:44px}
  .big-a{min-height:72px;padding:0 20px;font-size:var(--fs-lg)}
  .big-main{grid-column:1/-1;justify-self:start;min-width:320px;min-height:72px;margin-bottom:6px;font-size:var(--fs-lg)}
  .foot-c{padding:96px 0 48px}
  .fc{grid-template-columns:1fr 1fr;column-gap:56px;max-width:1360px;margin-inline:auto}
  .fc-pages{grid-column:1/-1}
}
@media (hover:hover) and (pointer:fine){
  .big-a:hover{box-shadow:inset 0 0 0 2px var(--fg)}
  .tile:hover{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--outline)}
  .art-link:hover .ico{transform:translateX(6px)}
  .art-link:hover .art-link-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
}

/* telefón (do 640 px): vzdušnejšie scény. Medzi scénami 80 px, vnútri 24 až 32 px, najviac tri konkurenčné prvky na obrazovku. Len rozostupy a jemnejšie rámy, nič sa neskrýva. */
@media (max-width:640px){
  .sc-work,.sc-wins,.sc-qa,.sc-blog,.sc-close{padding-top:80px}
  .scene .eyebrow{margin-bottom:16px}
  .statement{margin-bottom:32px}
  .gx-card{gap:18px}
  .sc-work .more{margin-top:24px}

  .wins-head .lead{margin-top:20px}
  .tiles{gap:16px;margin-top:32px}
  .tile{grid-template-rows:72px auto 1fr;gap:10px;padding:14px 14px 18px;border-radius:var(--r-2);box-shadow:none}
  .tile-vis{box-shadow:none}
  .tile-s{line-height:1.35}
  .art-link{margin-top:32px}
  .meas-home{margin-top:64px}
  .meas-h{margin-bottom:24px}
  .meas-home .sp{gap:16px}
  .meas-home .sp-list{gap:6px}
  .meas-home .sp-row{padding:12px 0}
  .meas-home .sp-bars{gap:8px}
  .meas-home .sp-track{height:14px}
  .meas-home .more{margin-top:16px}

  .sc-blog .chips-fx{margin-top:24px}
  .sc-blog .bl{margin-top:20px}
  .bl-home .bl-a{padding:20px 0 18px}
  .sc-blog .more{margin-top:28px}

  .sc-close .big-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-5)}
  .sc-close .btn.big-main{flex:1 1 100%;min-height:68px;gap:12px;margin-bottom:var(--sp-2);font-size:var(--fs-lg)}
  .sc-close .big-a{min-height:48px;padding:0;border-radius:0;box-shadow:none;font-size:var(--fs-md);font-weight:500;letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--outline)}
  .sc-close .big-a .ico{display:none}
  .sc-close .big-a:active{background:transparent}
  .sc-work .more .btn,.sc-blog .more .btn{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--field)}
  .foot-c{padding-top:var(--sp-6)}
  .fc{gap:var(--sp-3)}
  .fc-pages{display:none}
}

.sc-close .big-a{min-width:44px}