/* Techtlee - /sluzby
   Four chapters, one per pillar. The page zig-zags block by block: a
   chapter's intro on one side with its animation on the other, then each
   service with its text and example panel swapping sides again. Prefix si-. */

.si{--si-ease:cubic-bezier(.2,.8,.2,1);--si-cols:minmax(0,7fr) minmax(0,5fr);--si-flip:minmax(0,5fr) minmax(0,7fr);--si-gap:clamp(32px,4.5vw,72px)}

/* filter */
.si-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.si-f button{display:inline-flex;align-items:baseline;gap:6px;font:inherit;font-size:var(--fs-sm);color:var(--fg-3);
  background:none;border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;cursor:pointer;
  transition:color .25s,border-color .25s,background-color .25s}
.si-f button:hover{color:var(--fg);border-color:var(--line-3)}
.si-f button[aria-pressed="true"]{color:var(--fg);border-color:var(--accent);background:rgba(149,173,216,.1)}
.si-f sup{font-size:11px;top:0;color:var(--fg-4);font-variant-numeric:tabular-nums}
.si-f button[aria-pressed="true"] sup{color:var(--accent)}

/* chapters */
.si-g{padding:clamp(56px,7vw,104px) 0 0}
.si-g + .si-g{margin-top:clamp(56px,7vw,104px);border-top:1px solid var(--line-2)}
.si-g:first-child,.si-g.first{padding-top:0;margin-top:0;border-top:0}
.si-g[hidden]{display:none}
.si-g.si-in{animation:si-in .45s var(--si-ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes si-in{from{opacity:0;transform:translateY(10px)}}

/* every block is two columns; .si-flip swaps them */
.si-head,.si-row{display:grid;grid-template-columns:var(--si-cols);column-gap:var(--si-gap);align-items:start}
.si-flip{grid-template-columns:var(--si-flip)}

/* chapter head: all the words on one side, only the animation on the other */
.si-head{padding-bottom:clamp(40px,5vw,72px);align-items:center}
.si-head__t{grid-column:1;grid-row:1}
.si-head__art{grid-column:2;grid-row:1}
.si-flip .si-head__t{grid-column:2}
.si-flip .si-head__art{grid-column:1}
.si-gn{margin:0;font-size:var(--fs-h2);line-height:1.05;letter-spacing:var(--ls-h2,-.02em);font-weight:var(--fw-disp);color:var(--fg)}
.si-gl{margin:var(--s4) 0 0;max-width:52ch;font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2)}
.si-head__t > .disc__body{margin:var(--s6) 0 0;max-width:62ch}
.si-head__more{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s3) var(--s8);margin-top:var(--s8)}
.si-head__more .mini{margin:0}
.si-head__more .pilx__list{display:block}
.si-head__more .pilx__list li{margin:0}
.si-head__more .pilx__list li + li{margin-top:8px !important}
/* "in practice" on the left, "related" beside it */
.si-head__more > :nth-child(1){grid-column:1;grid-row:1}
.si-head__more > :nth-child(2){grid-column:1;grid-row:2}
.si-head__more > :nth-child(3){grid-column:2;grid-row:1}
.si-head__more > :nth-child(4){grid-column:2;grid-row:2;flex-direction:column;align-items:flex-start;align-self:start}

/* services: text one side, example panel the other */
.si-rows{list-style:none;margin:0;padding:0}
.si-row{padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--line-2)}
.si-h,.si-x__in{grid-column:1}
.si-viz{grid-column:2;grid-row:1 / span 2;margin:0;position:sticky;top:110px}
.si-flip .si-h,.si-flip .si-x__in{grid-column:2}
.si-flip .si-viz{grid-column:1}
.si-t{display:flex;flex-direction:column;min-width:0}
.si-name{font-size:clamp(24px,1.1vw + 15px,34px);line-height:1.1;letter-spacing:-.02em;font-weight:var(--fw-disp);color:var(--fg)}
.si-d{margin-top:var(--s4);font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2);max-width:56ch}
.si-x__in{padding-top:var(--s8)}
.si-x__in > .mini{margin:0 0 var(--s3)}
.si-x__in .disc__body{margin:0 0 var(--s8);max-width:60ch}
.js .si-viz:not([data-reveal-s="in"]) .mp [data-s]{opacity:0;transform:translateY(6px)}

/* ═════════ chapter animations ═════════
   Drawn in the site's own line language; they start the first time the
   chapter is on screen (.seen) and then keep breathing slowly. */
.si-art{display:block;width:100%;max-width:540px;height:auto;margin-left:auto;overflow:visible}
.si-flip .si-art{margin-left:0;margin-right:auto}
.si-art *{animation-play-state:paused}
.si-g.seen .si-art *{animation-play-state:running}
.si-g:not(.seen) .sa-dots{opacity:0}
.si-art .sa-edges path{fill:none;stroke:var(--line-3);stroke-width:1.3}
.si-art .sa-edges--dash path{stroke-dasharray:4 6}
.sa-dots circle{fill:#fff;filter:drop-shadow(0 0 5px rgba(149,173,216,.95))}
.sa-disc{fill:rgba(149,173,216,.14);stroke:var(--accent);stroke-width:1.5}
.sa-pulse{fill:none;stroke:var(--accent);stroke-width:1.2;transform-box:fill-box;transform-origin:center;
  animation:sa-pulse 2.8s ease-out infinite}
.sa-pulse--2{animation-delay:1.4s}
@keyframes sa-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}

/* AI: documents in, agent at work, answers out */
.sa-doc rect{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.2}
.sa-doc path{stroke:var(--fg-4);stroke-width:2;stroke-linecap:round}
.sa-doc{animation:sa-doc 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * .6s)}
@keyframes sa-doc{0%,100%{opacity:.55}40%{opacity:1}}
.sa-ring{fill:none;stroke:rgba(149,173,216,.5);stroke-width:1.2;stroke-dasharray:3 7;transform-box:fill-box;transform-origin:center;
  animation:sa-spin 14s linear infinite}
@keyframes sa-spin{to{transform:rotate(360deg)}}
.sa-spark{fill:var(--fg);transform-box:fill-box;transform-origin:center;animation:sa-spark 2.8s ease-in-out infinite}
@keyframes sa-spark{0%,100%{transform:scale(.85) rotate(0)}50%{transform:scale(1.08) rotate(45deg)}}
.sa-out rect{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.2}
.sa-out path{fill:none;stroke:var(--fg-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sa-out{animation:sa-out 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * .6s + 1.4s)}
@keyframes sa-out{0%,100%{opacity:.5}50%{opacity:1}}
.sa-out--c rect{stroke:var(--accent);fill:rgba(149,173,216,.12)}
.sa-out--c path:first-of-type{stroke:var(--accent)}

/* Data: sources into the warehouse, a chart builds from it */
.sa-cyl path,.sa-cyl ellipse{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.2}
.sa-cyl .sa-cyl__m{fill:none}
.sa-cyl--big path,.sa-cyl--big ellipse{stroke:var(--accent);fill:rgba(149,173,216,.1)}
.sa-cyl--big .sa-cyl__m{fill:none}
.sa-cyl--big ellipse{animation:sa-glow 2.2s ease-in-out infinite}
@keyframes sa-glow{50%{fill:rgba(149,173,216,.32)}}
.sa-frame{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.2}
.sa-axis{stroke:var(--line-3);stroke-width:1}
.sa-bar{fill:rgba(149,173,216,.22);stroke:rgba(149,173,216,.6);stroke-width:1;transform-box:fill-box;transform-origin:bottom;
  animation:sa-bar 6s var(--si-ease) infinite;animation-delay:calc(var(--d) * .12s)}
@keyframes sa-bar{0%{transform:scaleY(.08)}30%,80%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
.sa-trend{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;
  animation:sa-draw 6s ease infinite}
@keyframes sa-draw{0%,18%{stroke-dashoffset:160}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:160}}
.sa-tip{fill:#fff;filter:drop-shadow(0 0 6px var(--accent));opacity:0;animation:sa-tip 6s ease infinite}
@keyframes sa-tip{0%,42%{opacity:0}48%,80%{opacity:1}90%,100%{opacity:0}}

/* Leadership: the tree tries A, then B, and settles on C */
.sa-try path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sa-try--a{animation:sa-try-a 9s ease-in-out infinite}
.sa-try--b{animation:sa-try-b 9s ease-in-out infinite}
.sa-try--c{animation:sa-try-c 9s ease-in-out infinite}
@keyframes sa-try-a{0%{stroke-dashoffset:1;opacity:1}12%{stroke-dashoffset:0;opacity:1}24%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sa-try-b{0%,24%{stroke-dashoffset:1;opacity:1}36%{stroke-dashoffset:0;opacity:1}48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sa-try-c{0%,48%{stroke-dashoffset:1;opacity:1}62%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sa-start path{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sa-opt circle{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.3}
.sa-opt text{fill:var(--fg-3);font-size:12px;font-weight:600;text-anchor:middle;font-family:inherit}
.sa-m{fill:var(--line-3)}
.sa-opt--a circle{animation:sa-opt-a 9s ease infinite}
.sa-opt--b circle{animation:sa-opt-b 9s ease infinite}
.sa-opt--c circle{animation:sa-opt-c 9s ease infinite}
.sa-opt--c text{animation:sa-opt-ct 9s ease infinite}
.sa-opt--c .sa-m{animation:sa-opt-cm 9s ease infinite}
@keyframes sa-opt-a{10%,22%{stroke:var(--fg-3)}}
@keyframes sa-opt-b{34%,46%{stroke:var(--fg-3)}}
@keyframes sa-opt-c{0%,58%{fill:var(--bg-2);stroke:var(--line-3)}64%,92%{fill:var(--accent);stroke:var(--accent)}100%{fill:var(--bg-2);stroke:var(--line-3)}}
@keyframes sa-opt-ct{0%,58%{fill:var(--fg-3)}64%,92%{fill:var(--bg)}100%{fill:var(--fg-3)}}
@keyframes sa-opt-cm{0%,58%{fill:var(--line-3)}64%,92%{fill:var(--accent)}100%{fill:var(--line-3)}}

/* Software: code is typed, the app assembles from it */
.sa-br{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sa-ln{fill:var(--fg-4);transform-box:fill-box;transform-origin:left;animation:sa-type 8s ease infinite;animation-delay:calc(var(--d) * .35s)}
@keyframes sa-type{0%{transform:scaleX(0)}12%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.sa-win > circle{fill:var(--line-3)}
.sa-bar-top{stroke:var(--line-3);stroke-width:1}
.sa-pc{fill:rgba(149,173,216,.1);stroke:rgba(149,173,216,.45);stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:sa-pc 8s var(--si-ease) infinite;animation-delay:calc(var(--d) * .22s + .8s)}
.sa-pc--hl{fill:rgba(149,173,216,.28);stroke:var(--accent)}
.sa-pc--line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes sa-pc{0%{opacity:0;transform:translateY(-14px) scale(.96)}10%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(6px)}}

@media(max-width:900px){
  .si-head,.si-row,.si-flip{grid-template-columns:1fr}
  .si-head__t,.si-head__art,.si-flip .si-head__t,.si-flip .si-head__art,
  .si-h,.si-x__in,.si-flip .si-h,.si-flip .si-x__in{grid-column:1;grid-row:auto}
  .si-head__art{margin-top:var(--s8)}
  .si-art,.si-flip .si-art{margin:0 auto;max-width:420px}
  .si-viz,.si-flip .si-viz{grid-column:1;grid-row:auto;position:static;margin-top:var(--s8)}
}
@media(max-width:600px){
  .si-head__more{grid-template-columns:1fr}
  .si-head__more > :nth-child(n){grid-column:1;grid-row:auto}
  .si-head__more > :nth-child(3){margin-top:var(--s5)}
  .si-x__in .more__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .si-g.si-in{animation:none}
  .si-art *{animation:none !important}
  .sa-dots{display:none}
  .sa-trend{stroke-dashoffset:0}.sa-tip{opacity:1}
  .sa-pc{opacity:1}
  .sa-try--c{stroke-dashoffset:0}
  .sa-opt--c circle{fill:var(--accent);stroke:var(--accent)}.sa-opt--c text{fill:var(--bg)}
}