/* ═══════════════════════════════════════════════════════════════════
   TECHTLEE - "PROVOZ"  ·  dark technical / data-forward  ·  rev. 2

   Rebuilt on measured tokens rather than taste. Every number below is
   traceable to a shipped design system or a computed style read off a
   reference site at 1440px:

     · Type ramp, tracking steps and 1.0 display leading  → Vercel Geist
     · 60/36 display-to-section ratio (1.67)              → Modal, Resend
     · 112px section rhythm, 48px header→content          → Linear, Modal
     · Hairlines at 6-12% white                           → Linear, Vercel
     · #0A0C0B ground, #F2F5F2 text (never #000 / #fff)   → halation
     · Stacked left-aligned section headers, never split  → 13/13 sites
     · Table head bright / body muted, first cell flush   → Supabase

   Rejected on purpose: gradients, glows, nested cards, terminal
   chrome, animated counters, icon grids, slate #0f172a, indigo.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground & surface ─────────────────────────────────────────────
     Off-black, not #000. Pure black maximises halation - white text
     blooms and reads a full weight heavier. A faint green cast keeps
     it out of the default "SaaS slate" register.                     */
  --bg:        #0A0C0B;
  --bg-2:      #101312;
  --bg-3:      #161A18;
  --bg-hover:  rgba(226,232,228,.035);

  /* ── hairlines ────────────────────────────────────────────────────
     Structure is drawn entirely with these. Linear's most-used border
     is 5% white; Vercel's default is 6-9%. Anything above 20% reads
     as a box rather than a rule.                                     */
  --line:      rgba(226,232,228,.07);   /* row rules, inner divisions */
  --line-2:    rgba(226,232,228,.13);   /* section & panel edges      */
  --line-3:    rgba(226,232,228,.22);   /* table head rule only       */

  /* ── text ramp ────────────────────────────────────────────────────
     Four steps. Nobody ships #fff body text on dark.                 */
  --fg:        #EEF2FB;   /* headings, cool grey        17.4:1 */
  --fg-2:      #BCC5D8;   /* body                       11.3:1 */
  --fg-3:      #8590A8;   /* lede, secondary             6.1:1 */
  --fg-4:      #717C94;   /* labels, metadata            4.6:1 */

  /* ── signal ───────────────────────────────────────────────────────
     Monochrome by default. Colour appears only where it carries
     meaning: interaction, positive variance, negative variance.      */
  --accent:    #95ADD8;   /* light blue: action, solved, links */
  --accent-dim:#3E5A8E;   /* deep blue: the far end of the gradient */
  --warn:      #A7B4CC;   /* "problem" - deep blue lifted for legible text on dark */
  --grad:      linear-gradient(90deg,#95ADD8 0%,#3E5A8E 50%,#95ADD8 100%);
  --grad-line: linear-gradient(90deg,#95ADD8,#3E5A8E);
  /* drawn lines on active elements: grey → colour → grey */
  --grad-active: linear-gradient(90deg,var(--line-2) 0%,var(--accent) 50%,var(--line-2) 100%);
  --grad-text: linear-gradient(90deg,#95ADD8,#AFC2E3);

  /* ── type: sizes ──────────────────────────────────────────────────
     Fluid 390px → 1440px. Strong contrast between levels, few steps
     in running text: body 16 / small 14 / label 13 - nothing between.
     Display 76 / section 48 / sub 24 / lede 21 / body 16.            */
  --fs-h1:    clamp(40px, 26.6px + 3.43vw, 76px);
  --fs-h2:    clamp(30px, 23.3px + 1.71vw, 48px);
  --fs-h3:    clamp(20px, 18.5px + 0.38vw, 24px);
  --fs-lede:  clamp(18px, 16.9px + 0.29vw, 21px);
  --fs-hero-lede: clamp(19px, 17.5px + 0.38vw, 23px);
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-mono:  13px;
  --fs-micro: 13px;

  /* ── type: leading ────────────────────────────────────────────────
     Geist collapses to 1.0 at 56px+. Nudged to 1.05 here because
     Czech stacks carons above the x-height and descenders below -
     ř/ě/ů on line two would otherwise touch p/ý on line one.         */
  --lh-h1: 1.05; --lh-h2: 1.14; --lh-h3: 1.2;
  --lh-lede: 1.2; --lh-body: 1.2; --lh-mono: 1.2;

  /* ── type: tracking ───────────────────────────────────────────────
     Neo-grotesques need ~2× the negative tracking of a humanist face
     at display sizes. Labels stay sentence case, untracked.    */
  --ls-h1: -0.03em; --ls-h2: -0.022em; --ls-h3: -0.012em;
  --ls-lede: -0.008em; --ls-body: 0em;
  --ls-caps: 0;   /* no capitals anywhere: labels are sentence case */

  /* ── weights ──────────────────────────────────────────────────────
     450 not 500 for display: halation already adds apparent weight.  */
  --fw-disp: 450; --fw-med: 500;

  /* ── spacing: 4px base, Geist's steps ─────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px;  --s4:16px;  --s5:20px;  --s6:24px;
  --s8:32px;  --s10:40px;  --s12:48px;  --s16:64px;  --s20:80px;  --s24:96px;  --s28:112px;

  /* ── semantic rhythm ────────────────────────────────────────────── */
  --sec-py:        clamp(56px, 35.20px + 5.33vw, 112px);
  --sec-py-tight:  clamp(40px, 27.43px + 3.22vw, 74px);
  --gap-spec:      clamp(36px, 26.10px + 2.54vw, 62px);  /* spec bar → h2   */
  --gap-content:   clamp(32px, 26.10px + 1.52vw, 48px);  /* header → content */

  /* ── layout ─────────────────────────────────────────────────────── */
  --container: 1296px;
  --inset:     clamp(20px, 1.14px + 4.83vw, 32px);
  --gutter:    clamp(14px, 8.05px + 1.52vw, 24px);
  --measure-lede: 56ch;
  --measure-body: 68ch;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT VARIANT
   Not an inversion. Three things behave differently in the other
   direction and each is handled explicitly:

   1. WEIGHT GOES UP.  Light-on-dark blooms and reads heavier, which
      is why display weight is 450 above. Dark-on-light does the
      opposite - the same 450 looks anaemic - so display goes to 500.
   2. SMOOTHING COMES OFF. -webkit-font-smoothing:antialiased is the
      correct fix for light-on-dark and the wrong one here: on light
      it thins glyphs further. Reverted to subpixel.
   3. THE SIGNAL COLOURS CHANGE HUE, NOT JUST LIGHTNESS.  Mint #95ADD8
      is 1.8:1 on white and unusable; amber #3E5A8E is 2.1:1. Both are
      replaced with darker, less saturated equivalents that hold the
      same semantic role (action / positive, deviation) at AA.

   Ground is off-white with the same faint green cast as the dark
   ground, so the two modes read as one brand. The panel inverts its
   relationship to the page - elevated means *lighter* on dark and
   *whiter* on light.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --bg:        #F8F9F8;
  --bg-2:      #FFFFFF;   /* panel: elevated = whiter than the page */
  --bg-3:      #F1F3F1;
  --bg-hover:  rgba(20,23,21,.035);

  /* hairlines need marginally more alpha than the dark set: dark-on-light
     has no bloom to help a 1px rule read.                              */
  --line:      rgba(20,23,21,.09);
  --line-2:    rgba(20,23,21,.15);
  --line-3:    rgba(20,23,21,.26);

  --fg:        #141715;   /* 17.1:1 */
  --fg-2:      #3F443F;   /*  9.4:1 */
  --fg-3:      #5A615C;   /*  6.0:1 */
  --fg-4:      #6B726C;   /*  4.7:1 */

  --accent:    #0C7A52;   /*  5.1:1 - and 5.4:1 for white on the fill */
  --accent-dim:#2E9E70;   /*  3.2:1 - non-text border, AA for UI       */
  --warn:      #9A6206;   /*  4.8:1 */

  --fw-disp: 500;         /* see (1) */
}
:root[data-theme="light"] body{
  -webkit-font-smoothing:auto;      /* see (2) */
  -moz-osx-font-smoothing:auto;
}
/* portraits were dimmed for the dark ground; on light they only desaturate */
:root[data-theme="light"] .who img{filter:saturate(.98) contrast(1.02)}
:root[data-theme="light"] .hdr{backdrop-filter:saturate(120%) blur(8px)}

*{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--fg-2);
  font-family:'Google Sans Flex','Geist',ui-sans-serif,system-ui,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  font-weight:400;font-variant-numeric:tabular-nums;
  /* the one genuine optical fix for light-on-dark: kills subpixel bloom */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga' 1,'calt' 1;
}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);
  padding:10px 14px;font-size:var(--fs-sm);text-decoration:none}
.skip:focus{top:12px}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;color:var(--fg);font-weight:var(--fw-disp);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-med)}

.wrap{max-width:calc(var(--container) + 2*var(--inset));margin:0 auto;padding:0 var(--inset)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}

/* ── monospace registers ──────────────────────────────────────────
   Mono is the metadata voice here, not the code voice: indices,
   counts, units, status, table headers. Never body copy.            */
.mono{font-family:inherit;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:inherit;font-variant-numeric:tabular-nums;
  font-size:var(--fs-micro);line-height:1.2;font-weight:400;
  letter-spacing:var(--ls-caps);color:var(--fg-4);
  font-variant-numeric:tabular-nums;margin:0;
}
.eyebrow .ix{color:var(--fg-3);margin-right:.85em}
.lede{
  font-size:var(--fs-lede);line-height:var(--lh-lede);letter-spacing:var(--ls-lede);
  color:var(--fg-3);max-width:var(--measure-lede);
}

.js [data-reveal-s]{opacity:0;transition:opacity .38s cubic-bezier(.16,1,.3,1)}
.js [data-reveal-s="in"]{opacity:1}

/* ═══════════════ HEADER ══════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-2)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  min-height:56px}
.mark{display:inline-flex;align-items:center;font-size:15.5px;font-weight:600;
  letter-spacing:-.03em;color:var(--fg);text-decoration:none}
.dot{width:6px;height:6px;background:var(--accent);display:inline-block;margin-right:9px;flex:0 0 auto}
.nav{display:flex;gap:2px}
.nav a{
  font-size:var(--fs-sm);font-weight:var(--fw-med);letter-spacing:-.005em;color:var(--fg-3);
  text-decoration:none;padding:6px 9px;transition:color .14s,background-color .14s;
}
.nav a:hover{color:var(--fg);background:var(--bg-hover)}
.hdr__r{display:flex;align-items:center;gap:var(--s4)}
#clock{color:var(--fg-4)}
.lang{display:flex;align-items:center}
.lang button{background:none;border:0;padding:5px 6px;min-height:32px;min-width:32px;cursor:pointer;color:var(--fg-4);
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps)}
.lang button[aria-pressed="true"]{color:var(--fg)}
.lang i{font-style:normal;color:var(--line-3)}
.theme{background:none;border:0;padding:5px 7px;min-height:32px;cursor:pointer;color:var(--fg-4);
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);display:inline-flex;align-items:center;gap:7px}
.theme:hover{color:var(--fg)}
.theme::before{content:'';width:7px;height:7px;flex:0 0 auto;
  border:1px solid currentColor;background:currentColor}
:root[data-theme="light"] .theme::before{background:transparent}
.theme .t-d{display:none}
:root[data-theme="light"] .theme .t-l{display:none}
:root[data-theme="light"] .theme .t-d{display:inline}
/* mobile: the nav becomes a scrollable strip rather than disappearing */
.nav--m{display:none}
@media(max-width:1120px){
  .nav{display:none}
  #clock{display:none}
  .nav--m{display:block;border-bottom:1px solid var(--line-2);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
  .nav--m::-webkit-scrollbar{display:none}
  .lang button,.theme{min-height:44px}
  .lang button{min-width:40px}
  .nav--m ul{display:flex;gap:0;margin:0;padding:0 var(--inset);list-style:none;white-space:nowrap}
  .nav--m a{display:inline-block;padding:10px 12px 11px 0;margin-right:12px;
    font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--fg-3);text-decoration:none}
}

/* ═══════════════ SECTION SCAFFOLD ════════════════════════════════
   One rule per section, and it is the section's own top edge. The
   spec bar carries information (index, name, count) rather than
   decorating - an eyebrow that only repeats the heading is noise.  */
.sec{padding-bottom:var(--sec-py)}
.sec--tight{padding-bottom:var(--sec-py-tight)}
.spec{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding:14px 0 15px;border-top:1px solid var(--line-2);
}
.shead{margin-top:var(--gap-spec);margin-bottom:var(--gap-content)}
.shead h2{max-width:19ch}
.shead .lede{margin-top:var(--s5)}


/* ═══════════════ HERO ════════════════════════════════════════════ */
.hero{position:relative;padding:clamp(52px,8vh,104px) 0 var(--sec-py)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(24px,4.4vw,72px);align-items:end}
.hero h1{margin-top:var(--s6);max-width:13ch}
.hero__lede{margin-top:var(--s6);font-size:var(--fs-hero-lede);line-height:var(--lh-lede);
  letter-spacing:var(--ls-lede);color:var(--fg-3);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s8)}
@media(max-width:1120px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__panel{margin-top:var(--s12)}
  .hero h1{max-width:16ch}
}

/* the 12-column lattice, drawn as real rules on the real grid -
   not a background gradient guessing at column positions */
.rails{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
  pointer-events:none;z-index:0}
.rails i{border-left:1px solid var(--line);margin-left:calc(var(--gutter) / -2)}
.rails i:first-child{border-left:0}
.hero__in > *:not(.rails){position:relative;z-index:1}
@media(max-width:760px){.rails{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;min-height:44px;
  font-size:var(--fs-body);font-weight:var(--fw-med);letter-spacing:-.01em;
  padding:12px 22px;border:1px solid var(--accent);color:var(--bg);
  background:var(--accent);cursor:pointer;transition:background-color .16s,color .16s,border-color .16s;
}
.btn:hover{background:transparent;color:var(--accent)}
:root[data-theme="light"] .btn{color:#fff}
:root[data-theme="light"] .btn:hover{color:var(--accent)}
:root[data-theme="light"] .btn--ghost{color:var(--fg-3)}
:root[data-theme="light"] .btn--ghost:hover{color:var(--fg)}
.btn--ghost{border-color:transparent;background:transparent;padding-left:0;padding-right:0;color:var(--fg-3)}
.btn--ghost:hover{background:none;color:var(--fg);border-color:transparent}

/* ═══════════════ LOG LIST (ten statements) ═══════════════════════ */
.log{margin:0;padding:0;list-style:none;
  font-size:var(--fs-body);line-height:var(--lh-body);
  columns:2;column-gap:clamp(24px,3.4vw,56px)}
.log li{break-inside:avoid;padding:13px 0 14px;border-bottom:1px solid var(--line);color:var(--fg-2)}
.log li::before{content:'\201E';color:var(--fg-4);margin-right:.15em}
.log li::after{content:'\201C';color:var(--fg-4);margin-left:.1em}
@media(max-width:820px){.log{columns:1}}
.claim{margin-top:var(--s10);font-size:var(--fs-h3);line-height:1.2;
  letter-spacing:-.026em;color:var(--fg);font-weight:var(--fw-disp)}

/* ═══════════════ DATA TABLES ═════════════════════════════════════
   Supabase inversion: the head is bright and the body muted, which
   reads better on dark than a filled header bar. First cell is flush
   left so the table's edge aligns to the text column above it.      */
.dt{width:100%;border-collapse:collapse;font-size:var(--fs-body);line-height:var(--lh-body)}
.dt th{
  text-align:left;font-family:inherit;font-variant-numeric:tabular-nums;font-weight:400;
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--fg-3);padding:0 var(--s5) 11px 0;border-bottom:1px solid var(--line-3);
  vertical-align:bottom;white-space:nowrap;
}
.dt td{padding:16px var(--s5) 17px 0;border-bottom:1px solid var(--line);
  color:var(--fg-3);vertical-align:top}
.dt th:last-child,.dt td:last-child{padding-right:0}
.dt .c-name{width:26%;color:var(--fg);font-weight:var(--fw-med);letter-spacing:-.012em}
.dt .c-desc{max-width:64ch}
.dt .r{text-align:right;white-space:nowrap;font-family:inherit;font-variant-numeric:tabular-nums;
  font-size:var(--fs-mono);color:var(--fg-4);width:12%}
.dt a{color:var(--accent);text-decoration:none}
.dt a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
  .dt,.dt tbody,.dt tr,.dt td{display:block;width:auto}
  .dt thead{display:none}
  .dt tr{border-bottom:1px solid var(--line-2);padding:18px 0}
  .dt td{border:0;padding:0 0 6px}
  .dt .c-name,.dt .c-desc,.dt .r{width:auto}
  .dt .r{text-align:left;padding-top:4px}
}

/* ═══════════════ 4-UP ════════════════════════════════════════════ */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.four > div{padding:var(--s6) var(--s6) var(--s8);border-left:1px solid var(--line)}
.four > div:first-child{padding-left:0;border-left:0}
.four > div:last-child{padding-right:0}
.four h3{margin-top:0}
.four p{margin-top:var(--s3);color:var(--fg-3);font-size:var(--fs-body);line-height:var(--lh-body)}
@media(max-width:1000px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .four > div{border-bottom:1px solid var(--line)}
  .four > div:nth-child(2n+1){padding-left:0;border-left:0}
  .four > div:nth-child(2n){padding-right:0}
  .four > div:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
  .four{grid-template-columns:1fr}
  .four > div{border-left:0;padding:var(--s5) 0 var(--s6);border-bottom:1px solid var(--line)}
  .four > div:last-child{border-bottom:0}
}

/* ═══════════════ CLIENTS ═════════════════════════════════════════ */
.cl{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);margin:0;padding:0;list-style:none}
.cl li{font-size:var(--fs-body);
  color:var(--fg-2);padding:13px clamp(14px,1.7vw,24px) 14px clamp(14px,1.7vw,24px);
  border-left:1px solid var(--line)}
.cl li:first-child{padding-left:0;border-left:0}

/* ═══════════════ PEOPLE ══════════════════════════════════════════ */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.who article{padding:var(--s6) var(--s6) var(--s8);border-left:1px solid var(--line)}
.who article:first-child{padding-left:0;border-left:0}
.who article:last-child{padding-right:0}
.who img{width:112px;height:112px;object-fit:cover;margin-bottom:var(--s5);
  border:1px solid var(--line-2);
  /* Colour, not greyscale. Knocked back on the dark ground because the white
     shirts and pale office walls otherwise out-glare the headings, which are
     #F2F5F2 - a photo highlight at pure white would sit above the top of the
     page's own tonal range and pull focus away from the type. */
  filter:saturate(.9) brightness(.95) contrast(1.04)}
.who p.role{margin-top:5px}
.who p.bio{margin-top:var(--s3);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-3);max-width:54ch}
.cv{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:0 8px;max-width:54ch}
.cv span{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);
  color:var(--fg-4)}
.cv span:not(:last-child)::after{content:' /';color:var(--line-3)}
@media(max-width:860px){
  .who{grid-template-columns:1fr}
  .who article{border-left:0;padding:var(--s6) 0;border-bottom:1px solid var(--line)}
  .who article:last-child{border-bottom:0}
}

/* ═══════════════ PROCESS RAIL ════════════════════════════════════ */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.rail > div{padding:var(--s6) var(--s6) var(--s8);border-left:1px solid var(--line);position:relative}
.rail > div:first-child{padding-left:0;border-left:0}
.rail > div:last-child{padding-right:0}
.rail > div::before{content:'';position:absolute;top:-1px;left:0;width:22px;height:1px;background:var(--fg-3)}
.rail > div:not(:first-child)::before{left:-1px}
.rail h3{margin-top:var(--s3)}
.rail p{margin-top:var(--s3);color:var(--fg-3);font-size:var(--fs-body);line-height:var(--lh-body)}
@media(max-width:1000px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail > div{border-bottom:1px solid var(--line)}
  .rail > div:nth-child(2n+1){padding-left:0;border-left:0}
  .rail > div:nth-child(2n){padding-right:0}
  .rail > div:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){.rail{grid-template-columns:1fr}.rail > div{border-left:0;padding:var(--s6) 0}}

/* ═══════════════ QUOTE ═══════════════════════════════════════════ */
.q{margin:0}
.q blockquote{margin:0;font-size:clamp(21px,2.15vw,31px);line-height:1.2;
  letter-spacing:-.026em;color:var(--fg);font-weight:var(--fw-disp)}
.q figcaption{margin-top:var(--s6)}

/* ═══════════════ CONTACT ═════════════════════════════════════════ */
.form{display:grid;border:1px solid var(--line-2)}
.field{border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);align-items:center}
.field label{padding:0 var(--s4);color:var(--fg-4)}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;
  padding:15px var(--s4);font-family:inherit;font-variant-numeric:tabular-nums;
  font-size:var(--fs-mono);color:var(--fg);
}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4)}
.field input:focus,.field textarea:focus{outline:0;background:var(--bg-2)}
.field:has(textarea){align-items:start}
.field:has(textarea) label{padding-top:15px}
.form__f{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:12px var(--s4);flex-wrap:wrap}
.send{
  background:var(--accent);color:var(--bg);border:1px solid var(--accent);border-radius:0;min-height:44px;
  cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-mono);
  letter-spacing:var(--ls-caps);padding:11px 20px;font-weight:400;
  transition:background-color .16s,color .16s,border-color .16s;
}
.send:hover{background:transparent;color:var(--accent)}
.send:disabled{opacity:.6;cursor:progress}
:root[data-theme="light"] .send{color:#fff}
:root[data-theme="light"] .send:hover{color:var(--accent)}
.field .hint{grid-column:2;padding:0 var(--s4) 12px;font-size:var(--fs-sm);color:var(--warn);display:none}
.field.bad .hint{display:block}
.field.bad input{box-shadow:inset 2px 0 0 var(--warn)}
.form-status{display:none;padding:13px var(--s4);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--fg)}
.form-status.ok,.form-status.err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status.ok{box-shadow:inset 2px 0 0 var(--accent)}
.form-status.err{box-shadow:inset 2px 0 0 var(--warn)}
.form-status a{color:var(--accent)}
@media(max-width:620px){.field .hint{grid-column:1}}
@media(max-width:620px){
  .field{grid-template-columns:1fr}
  .field label{padding:13px var(--s4) 0}
  .field input,.field textarea{border-left:0}
}
.dl{margin:0;display:grid;grid-template-columns:8.5rem minmax(0,1fr)}
.dl dt,.dl dd{padding:13px 0;border-bottom:1px solid var(--line);margin:0}
.dl dd{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-mono);color:var(--fg-2)}
.dl a{text-decoration:none;color:var(--accent)}
.dl a:hover{text-decoration:underline;text-underline-offset:3px}
.dl .ok{display:inline-flex;align-items:center;gap:8px}
.dl .ok::before{content:'';width:7px;height:7px;background:var(--accent);flex:0 0 auto}

/* ═══════════════ FOOTER ══════════════════════════════════════════ */
.ftr{border-top:1px solid var(--line-2);padding:var(--s5) 0 var(--s16)}
.ftr__in{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);justify-content:space-between;align-items:baseline}
.ftr a{color:var(--fg-4);text-decoration:none}
.ftr a:hover{color:var(--accent)}

/* ═══════════════ LOGO ════════════════════════════════════════════
   The header carries the T mark on its own. The square where stem
   meets crossbar is deliberate negative space - never fill it.      */
.mark{align-items:baseline;font-size:19px;font-weight:600;letter-spacing:-.035em}
.tmark{fill:currentColor;flex:0 0 auto}
.mark .tmark{width:15px;height:30px}   /* the mark alone, no wordmark */
.ftr .tmark{width:.6em;height:1.2em;margin-right:.45em;vertical-align:-.2em;display:inline-block;fill:var(--fg)}

/* ═══════════════ GLASS ═══════════════════════════════════════════
   Only on the floating layer: the header, and the hero process panel
   that sits over the moving light. Content stays opaque and legible.
   Reduce Transparency gets solid surfaces.                          */
.hdr{background:color-mix(in srgb,var(--bg) 62%,transparent);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
:root[data-theme="light"] .hdr{background:color-mix(in srgb,var(--bg) 66%,transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.glass{position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 42%,rgba(255,255,255,.035));
  border:1px solid rgba(226,232,228,.14);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03),
    0 30px 80px -40px rgba(0,0,0,.85)}
:root[data-theme="light"] .glass{
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5) 45%,rgba(255,255,255,.62));
  border-color:rgba(20,23,21,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 70px -40px rgba(20,40,30,.35)}
@media (prefers-reduced-transparency:reduce){
  .hdr,:root[data-theme="light"] .hdr{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass,:root[data-theme="light"] .glass{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ═══════════════ HERO LIGHT ══════════════════════════════════════
   Slow drifting light behind the panel - it is what the glass
   refracts. Mint = solved, amber = the problem it comes from.       */
.hero{overflow:hidden}
.glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.glow i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42}
.glow i:nth-child(1){width:520px;height:520px;right:-6%;top:-12%;
  background:radial-gradient(circle,#3E5A8E 0%,rgba(62,90,142,0) 68%);animation:drift1 22s ease-in-out infinite alternate}
.glow i:nth-child(2){width:420px;height:420px;right:24%;top:38%;opacity:.3;
  background:radial-gradient(circle,#3E5A8E 0%,rgba(62,90,142,0) 68%);animation:drift2 28s ease-in-out infinite alternate}
.glow i:nth-child(3){width:300px;height:300px;right:4%;bottom:-8%;opacity:.22;
  background:radial-gradient(circle,#95ADD8 0%,rgba(149,173,216,0) 68%);animation:drift3 19s ease-in-out infinite alternate}
:root[data-theme="light"] .glow i{opacity:.28}
:root[data-theme="light"] .glow i:nth-child(3){opacity:.16}
@keyframes drift1{to{transform:translate(-90px,70px) scale(1.12)}}
@keyframes drift2{to{transform:translate(110px,-60px) scale(.9)}}
@keyframes drift3{to{transform:translate(-70px,-90px) scale(1.18)}}
.hero > .wrap{position:relative;z-index:1}
@media(max-width:760px){.glow i:nth-child(1){right:-40%;top:30%}.glow i:nth-child(2){display:none}}

/* hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero .eyebrow,.js .hero h1,.js .hero__lede,.js .hero__cta,.js .flow > *{
  animation:rise .9s cubic-bezier(.16,1,.3,1) backwards}  /* not 'both': a lingering animation would stop the glass from blurring */
.js .hero h1{animation-delay:.08s}
.js .hero__lede{animation-delay:.18s}
.js .hero__cta{animation-delay:.28s}
/* the glass panel itself never animates: an animating ancestor stops
   backdrop-filter, and the blur would only switch on once it finished.
   Its contents rise instead. */
.js .flow > *{animation-duration:.6s;animation-delay:.05s}
.js .flow > :nth-child(2){animation-delay:.09s}
.js .flow > :nth-child(3){animation-delay:.13s}
.js .flow > :nth-child(4){animation-delay:.17s}
.btn--ghost span{display:inline-block;transition:transform .2s}
.btn--ghost:hover span{transform:translateX(4px)}

/* ═══════════════ PROCESS FLOW (hero) ═════════════════════════════
   A real process, four steps. Each manual step is struck out and
   replaced by what we build: automation, an app, AI or data.        */
.flow__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:12px 14px 12px 16px;border-bottom:1px solid var(--line)}
.flow__tabs{display:flex;gap:2px;flex-wrap:wrap}
.flow__tabs button{background:none;border:1px solid transparent;color:var(--fg-4);cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  padding:6px 9px;min-height:32px;transition:color .2s,border-color .2s,background-color .2s}
.flow__tabs button:hover{color:var(--fg)}
.flow__tabs button[aria-selected="true"]{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.04)}
:root[data-theme="light"] .flow__tabs button[aria-selected="true"]{background:rgba(255,255,255,.7)}
.flow__pause{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--line-2);color:var(--fg-3)}
.flow__pause:hover{color:var(--fg)}
.flow__pause svg{width:10px;height:10px}
.flow__title{padding:16px 16px 4px;display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.flow__title b{font-size:var(--fs-h3);font-weight:var(--fw-med);color:var(--fg);letter-spacing:-.015em}
/* four cards side by side; each loads through its own bar and flips
   from the manual step (and why it hurts) to what we build instead */
.flow__steps{list-style:none;margin:0;padding:10px 16px 18px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 16px 18px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 2%,transparent);
  transition:border-color .35s,background-color .35s}
.step.active{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.step.done{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 4%,transparent)}
.step__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.step__no{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);color:var(--fg-4);letter-spacing:var(--ls-caps)}
.step__before{position:relative;justify-self:start;align-self:flex-start;margin:0;color:var(--fg);
  font-size:var(--fs-sm);font-weight:var(--fw-med);line-height:1.2;transition:color .35s}
.step__before::after{content:'';position:absolute;left:0;top:55%;height:1.5px;width:100%;background:var(--warn);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.step.done .step__before{color:var(--fg-4)}
.step.done .step__before::after{transform:scaleX(1)}
.step__why,.step__how{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--fg-3);transition:color .35s}
.step.done .step__why{color:var(--fg-4)}
.step__lbl{display:block;margin-bottom:4px;font-family:inherit;font-variant-numeric:tabular-nums;
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);color:var(--warn)}
.step__how .step__lbl{color:var(--accent)}
.step__load{margin-top:auto;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.step__load i{position:absolute;inset:0;background:var(--warn);transform:scaleX(0);transform-origin:left}
.step.active .step__load i{transform:scaleX(1);transition:transform var(--load,1.1s) cubic-bezier(.4,0,.2,1)}
.step.done .step__load i{transform:scaleX(1);background:var(--accent)}
.step__res{display:flex;flex-direction:column;gap:12px;opacity:.18;filter:blur(2px);transform:translateY(4px);
  transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.step.done .step__res{opacity:1;filter:none;transform:none}
.step__after{margin:0;color:var(--fg);font-size:var(--fs-sm);font-weight:var(--fw-med);line-height:1.2}
.step.done .step__how{color:var(--fg-2)}
.step__tag{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  padding:4px 8px;border:1px solid rgba(62,90,142,.35);color:var(--warn);
  white-space:nowrap;transition:color .3s,border-color .3s,background-color .3s}
.step.done .step__tag{color:var(--accent);border-color:rgba(149,173,216,.4);background:rgba(149,173,216,.08)}
:root[data-theme="light"] .step.done .step__tag{border-color:rgba(12,122,82,.35);background:rgba(12,122,82,.06)}
@supports (grid-template-rows:subgrid){
  /* rows line up across cards: every bar sits at the same height */
  .flow__steps{grid-auto-rows:auto}
  .step{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:12px}
  .step__load{margin-top:0;align-self:center}
}
@media(max-width:1000px){.flow__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.flow__steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.step,.step__res,.step__before::after,.step__load i{transition:none}}
.flow__f{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:12px 16px;border-top:1px solid var(--line)}
.flow__count{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);color:var(--fg-3)}
.flow__count b{color:var(--warn);font-weight:500;display:inline-block;min-width:1ch;transition:color .3s}
.flow__count.zero b{color:var(--accent)}
.flow__bar{flex:1;max-width:160px;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.flow__bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.flow__bar i.run{animation:flowbar var(--dur,7s) linear forwards}
@keyframes flowbar{to{transform:scaleX(1)}}

/* ═══════════════ SCROLL MOTION ═══════════════════════════════════ */
.js [data-reveal-s]{transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js [data-reveal-s="in"]{transform:none}
/* lists cascade: children follow their container in 55ms steps */
.js [data-stagger] > *,.js table[data-stagger] tbody tr{opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 55ms)}
.js [data-stagger][data-reveal-s]{opacity:1;transform:none}
.js [data-stagger][data-reveal-s="in"] > *,.js table[data-stagger][data-reveal-s="in"] tbody tr{opacity:1;transform:none}
/* section rules draw in from the left */
.js .spec{border-top-color:transparent;position:relative}
.js .spec::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.js .spec.in::before{transform:scaleX(1)}
/* the approach rail fills once, phase by phase */
.rail{position:relative}
.rail::after{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 2.6s cubic-bezier(.4,0,.2,1) .35s}
.rail[data-reveal-s="in"]::after{transform:scaleX(1)}
/* "Přesně tohle řešíme." gets underlined */
.claim span{background:var(--grad-active) left bottom/0 2px no-repeat;
  padding-bottom:4px;transition:background-size 1s cubic-bezier(.65,0,.35,1) .25s}
.claim[data-reveal-s="in"] span{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){
  .glow i{animation:none}
  .js .hero .eyebrow,.js .hero h1,.js .hero__lede,.js .hero__cta,.js .flow > *,
  .js .phead .eyebrow,.js .phead h1,.js .phead .hero__lede{animation:none}
  .js [data-reveal-s],.js [data-stagger] > *,.js table[data-stagger] tbody tr{opacity:1;transform:none;transition:none}
  .js .spec::before,.rail::after{transition:none}
  .js .spec::before{transform:scaleX(1)}
  .claim span{transition:none;background-size:100% 2px}
  .step *,.step::after,.step__before::after{transition:none!important}
}

/* ═══════════════ MULTI-PAGE ══════════════════════════════════════ */
.nav a[aria-current="page"],.nav--m a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--accent)}
/* page head on subpages: the hero's little sibling */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2);
  padding:clamp(48px,7vh,96px) 0 clamp(40px,5vw,72px)}
.phead .glow i{opacity:.26}
.phead h1{margin-top:var(--s6);max-width:20ch}
.phead .hero__lede{margin-top:var(--s5)}
.js .phead .eyebrow,.js .phead h1,.js .phead .hero__lede{animation:rise .9s cubic-bezier(.16,1,.3,1) backwards}
.js .phead h1{animation-delay:.08s}
.js .phead .hero__lede{animation-delay:.18s}
.sec--page{padding-top:var(--gap-content)}
/* "read more" link at the end of each homepage section */
.more{margin-top:var(--s8)}
.more a{font-size:var(--fs-body);font-weight:var(--fw-med);letter-spacing:-.01em;
  color:var(--accent);text-decoration:none;display:inline-flex;gap:8px;align-items:center;
  min-height:32px}
.more a span{transition:transform .2s}
.more a:hover span{transform:translateX(4px)}
/* closing call to action on subpages */
.cta{border-top:1px solid var(--line-2);padding:var(--sec-py-tight) 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.cta h2{max-width:22ch}
/* project detail blocks */
.mini{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--fg-3);margin:var(--s12) 0 var(--s4)}
.four--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.note{margin-top:var(--s8);color:var(--fg-3);font-size:var(--fs-body);max-width:var(--measure-body)}
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(24px,4.4vw,72px);align-items:start}
.split .lede + .lede{margin-top:var(--s4)}
.shot{margin:0;border:1px solid var(--line-2);background:var(--bg-2)}
.shot img{width:100%;height:auto}
@media(max-width:900px){.split{grid-template-columns:1fr;row-gap:var(--s8)}}
.ftr nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}

/* ═══════════════ INTERACTION ═════════════════════════════════════
   Layered on the existing markup by assets/interact.js and
   assets/semanthics.js - no copy changes. */

/* ── services: one-line previews that open on click ─────────────── */
.dt--acc thead tr,.dt--acc tbody tr{display:grid;align-items:start;column-gap:var(--s5);
  grid-template-columns:minmax(0,26%) minmax(0,1fr) minmax(0,11%) 44px}
.dt--acc th,.dt--acc td,.dt--acc .c-name,.dt--acc .r{width:auto;border-bottom:0;padding-right:0}
.dt--acc thead tr{border-bottom:1px solid var(--line-3)}
.dt--acc tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .2s}
.dt--acc tbody tr:hover,.dt--acc tbody tr.open{background:var(--bg-hover)}
/* clipping happens at the padding edge, so the bottom spacing moves to a margin */
.dt--acc td.c-desc{padding-bottom:0;margin-bottom:17px}
.dt--acc tr:not(.open) .c-desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dt--acc tr.open .c-desc{color:var(--fg-2)}
.dt--acc td.c-tog{padding:5px 0 0;display:flex;justify-content:flex-end}
.tog{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--fg-3)}
.tog::before,.tog::after{content:'';grid-area:1/1}
.tog::before{width:26px;height:26px;border:1px solid var(--line-2);transition:border-color .2s}
.tog::after{width:10px;height:10px;transition:background-size .25s;
  background:linear-gradient(currentColor,currentColor) center/10px 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 10px no-repeat}
.dt--acc tr:hover .tog::before{border-color:var(--line-3)}
.dt--acc tr.open .tog{color:var(--accent)}
.dt--acc tr.open .tog::before{border-color:var(--accent-dim)}
.dt--acc tr.open .tog::after{background-size:10px 1px,1px 0}
.tog:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
@media(max-width:860px){
  .dt--acc tbody tr{display:block;position:relative;padding:18px 52px 18px 0}
  .dt--acc td{padding:0 0 6px}
  .dt--acc td.c-desc{margin-bottom:6px}
  .dt--acc td.c-tog{position:absolute;top:8px;right:0;padding:0}
}

/* ── pointer spotlight on hairline cells ─────────────────────────── */
.is-sp{background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%)}
@media (prefers-reduced-transparency:reduce){.is-sp{background-image:none}}

/* ── page-to-page transitions (Chrome/Edge, Safari 18.2+) ────────── */
/* Desktop only: on phones the blurred header and the menu panel were
   snapshotted mid-close and flashed as a smear at the top of the next page,
   so phones load the next page plainly. */
@media (prefers-reduced-motion:no-preference) and (min-width:1121px){
  @view-transition{navigation:auto}
}
/* The header (and the mobile nav strip) never move during a page change:
   they are their own transition layer with no animation at all. Only the
   content underneath changes, the same way on every page: the old page
   fades out, the new one rises in. Page-specific entrance animations are
   skipped when arriving this way (html.vt, set on pagereveal). */
.hdr{view-transition-name:hdr}
.nav--m{view-transition-name:navm}
::view-transition-group(hdr),::view-transition-group(navm),
::view-transition-old(hdr),::view-transition-new(hdr),
::view-transition-old(navm),::view-transition-new(navm){animation:none}
::view-transition-old(hdr),::view-transition-old(navm){display:none}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.vt .hero .eyebrow,.vt .hero h1,.vt .hero__lede,.vt .hero__cta,.vt .flow > *,
.vt .phead .eyebrow,.vt .phead h1,.vt .phead .hero__lede{animation:none}

/* ── approach rail: phases light up one by one as you scroll ─────── */
@keyframes railtick{from{width:22px;background:var(--fg-3)}to{width:100%;background:var(--accent)}}
@keyframes railh{from{color:var(--fg-3)}to{color:var(--fg)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rail:not(.rail--sync) > div{view-timeline:--cell block}
    .rail:not(.rail--sync) > div::before,.rail:not(.rail--sync) > div h3{animation-timeline:--cell;
      animation-fill-mode:both;animation-timing-function:linear;animation-duration:1ms;
      animation-range:cover calc(8% + var(--i,0) * 7%) cover calc(22% + var(--i,0) * 7%)}
    .rail:not(.rail--sync) > div::before{animation-name:railtick}
    .rail:not(.rail--sync) > div h3{animation-name:railh}
    .rail:not(.rail--sync)::after{display:none}
  }
}
/* the Semanthics rail follows the demo instead of the scroll */
.rail--sync > div::before{transition:width .5s cubic-bezier(.65,0,.35,1),background-color .4s}
.rail--sync > div.is-on::before{width:100%;background:var(--accent)}
.rail--sync > div.is-done::before{background:var(--accent)}
.rail--sync > div h3{transition:color .3s}
.rail--sync > div:not(.is-on):not(.is-done) h3{color:var(--fg-3)}

/* ── Semanthics engine demo ──────────────────────────────────────── */
.panel{border:1px solid var(--line-2);background:var(--bg-2)}
.panel__h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:8px 10px 8px 16px;border-bottom:1px solid var(--line)}
.panel__h b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);
  font-weight:500;letter-spacing:var(--ls-caps);color:var(--fg)}
.panel table{width:100%;border-collapse:collapse;
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);line-height:1.2}
.panel th{text-align:left;white-space:nowrap;font-weight:400;font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);color:var(--fg-4);
  padding:9px 16px;border-bottom:1px solid var(--line)}
.panel td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--fg-3);height:40px}
.panel tr:last-child td{border-bottom:0}
.panel .r{text-align:right;white-space:nowrap}
.panel .k{color:var(--fg-2)}
.panel .up{color:var(--accent)}
.panel .dn{color:var(--warn)}
.flag td{background:rgba(62,90,142,.07)}
:root[data-theme="light"] .flag td{background:rgba(154,98,6,.075)}
.flag .k{color:var(--fg)}
.panel__f{padding:11px 16px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip::before{content:'';width:7px;height:7px;background:var(--warn);flex:0 0 auto}

.sx{margin-top:var(--s8)}
.sx__hr{display:flex;align-items:center;gap:var(--s3)}
.sx__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr);
  border-bottom:1px solid var(--line)}
.sx__stage{padding:14px 16px 18px;opacity:.38;transition:opacity .35s}
.sx__body .sx__stage + .sx__stage{border-left:1px solid var(--line)}
.sx__stage.on{opacity:1}
.sx__lbl{margin-bottom:12px;transition:color .3s}
.sx__stage.now .sx__lbl{color:var(--accent)}
.sx__ask{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);line-height:1.2;color:var(--fg);min-height:3em}
.sx__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx__caret{display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--accent);opacity:0}
.sx.typing .sx__caret{opacity:1;animation:sxblink 1s steps(1) infinite}
@keyframes sxblink{50%{opacity:0}}
.sx__g{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px}
.sx__n{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);padding:5px 9px;
  border:1px solid var(--line-3);color:var(--fg-4);transition:color .22s,border-color .22s,background-color .22s}
.sx__n.lit{color:var(--fg);border-color:var(--accent);background:rgba(149,173,216,.08)}
:root[data-theme="light"] .sx__n.lit{background:rgba(12,122,82,.07)}
.sx__e{width:14px;height:1px;background:var(--line-3);transition:background-color .3s}
.sx__e.lit{background:var(--accent)}
.sx__sql{margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:var(--fs-micro);line-height:1.2;
  color:var(--fg-3);white-space:pre;overflow-x:auto}
.sx__ln{opacity:0;transition:opacity .22s}
.sx__ln.on{opacity:1}
.sx__res{padding:14px 0 0}
.sx__res .sx__lbl{padding:0 16px}
.sx__res tbody tr{opacity:.15;transition:opacity .26s}
.sx__res tbody tr.on{opacity:1}
.sx__foot{opacity:0;transition:opacity .4s}
.sx__foot.on{opacity:1}
@media(max-width:900px){
  .sx__body{grid-template-columns:minmax(0,1fr)}
  .sx__body .sx__stage + .sx__stage{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .panel th,.panel td{padding-left:12px;padding-right:12px}
  .panel th:nth-child(3),.panel td:nth-child(3){display:none}
  .panel table{font-size:var(--fs-micro)}
}
@media (prefers-reduced-motion:reduce){
  .sx__stage,.sx__ln,.sx__res tbody tr,.sx__foot,.sx__n,.sx__e,.rail--sync > div::before,.rail--sync > div h3,
  .dt--acc tbody tr,.tog::after{transition:none}
  .sx.typing .sx__caret{animation:none}
}

/* ── "Zní vám to povědomě?": pick the sentences with a highlighter ── */
/* the sentences are pill-shaped toggles: a "+" that turns into a check,
   amber when picked. A copy of the pill then flies into the counter. */
.log--pick{columns:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 10px}
.log--pick li{padding:0;border:0;break-inside:auto;display:contents}
.log--pick li::before,.log--pick li::after{content:none}
.log__hint{margin:0 0 var(--s5);text-align:center}
.log__b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;max-width:100%;
  min-height:44px;padding:9px 18px 9px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--fg) 3%,var(--bg));
  font-size:var(--fs-body);letter-spacing:-.01em;line-height:1.2;color:var(--fg-2);
  transition:color .25s,border-color .25s,background-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.log__b::before{content:'';flex:none;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line-2);
  background:
    linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
  color:var(--fg-3);transition:background .25s,border-color .25s,color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.log__b:hover{color:var(--fg);border-color:color-mix(in srgb,var(--warn) 55%,var(--line-2));
  background-color:color-mix(in srgb,var(--warn) 7%,transparent);transform:translateY(-2px)}
.log__b:hover::before{color:var(--warn);border-color:var(--warn);transform:rotate(90deg)}
.log__b:active{transform:translateY(0) scale(.98)}
.log__b:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.log__b[aria-pressed="true"]{color:var(--fg);border-color:var(--warn);
  background-color:color-mix(in srgb,var(--warn) 14%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 12%,transparent)}
.log__b[aria-pressed="true"]::before{border-color:var(--warn);transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,var(--grad-line)}
.log__b[aria-pressed="true"]:hover::before{transform:none}
.log__sum{display:flex;align-items:center;gap:var(--s3) var(--s5);flex-wrap:wrap;margin-top:var(--s6)}
.log__sum{transition:opacity .25s ease}
/* keep the row's space when nothing is picked, so the section never jumps */
.log__sum[hidden]{display:flex;visibility:hidden;opacity:0}
.log__n{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-mono);color:var(--warn)}
.log__clear{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--fg-3)}
.log__clear:hover{color:var(--fg)}
.log__clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.log__cta span{display:inline-block;transition:transform .2s}
.log__cta:hover span{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.log__b,.log__b::before,.log__cta span{transition:none}.log__b:hover{transform:none}}

/* ── a picked sentence flies into the counter ─────────────────────── */
.log__ghost{position:fixed;z-index:90;margin:0;pointer-events:none;
  color:var(--fg);transform-origin:center;
  transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .55s ease-in}
@keyframes bump{40%{transform:scale(1.25)}}
.log__n.bump{display:inline-block;animation:bump .35s ease}

/* ── service details (the .more-row under each service) ───────────── */
.dt .more-row td{padding:0 0 22px;border-bottom:1px solid var(--line)}
.dt tr:has(+ .more-row) td{border-bottom:0}
.more__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s5) var(--s10);padding-top:2px}
.more__grid--home{grid-template-columns:minmax(0,1fr)}
.more__grid .mini{margin:0 0 var(--s3)}
.more__grid .mini + .more__end + .mini,.more__end + .mini{margin-top:var(--s5)}
.more__list{margin:0;padding:0;list-style:none}
.more__list li{position:relative;padding-left:18px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-2)}
.more__list li + li{margin-top:8px}
.more__list li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent)}
.more__end{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg)}
.more__links{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0}
.more__links a{font-size:var(--fs-body);font-weight:var(--fw-med);letter-spacing:-.01em;
  color:var(--accent);text-decoration:none;display:inline-flex;gap:8px;align-items:center;min-height:32px}
.more__links a span{transition:transform .2s}
.more__links a:hover span{transform:translateX(4px)}
/* with JS: the detail row is part of the accordion and slides open */
.dt--acc tbody tr.more-row{display:block;border-bottom:0;cursor:auto;background:none}
.dt--acc tr.more-row td{display:grid;grid-template-rows:0fr;padding:0 56px 0 calc(26% + var(--s5));border:0;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.more__in{overflow:hidden;min-height:0}
.dt--acc .more__grid{opacity:0;transform:translateY(6px);padding-bottom:24px;
  transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.dt--acc tr.open{border-bottom-color:transparent}
.dt--acc tr.open + tr.more-row{background:var(--bg-hover);border-bottom:1px solid var(--line)}
.dt--acc tr.open + tr.more-row td{grid-template-rows:1fr}
.dt--acc tr.open + tr.more-row .more__grid{opacity:1;transform:none;transition-delay:.12s}
@media(max-width:860px){
  .dt--acc tbody tr.more-row{padding:0}
  .dt--acc tr.more-row td{padding:0}
  .more__grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Co děláme: one block per discipline, each with its own animation ── */
.discs{display:flex;flex-direction:column}
.disc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4.4vw,72px);
  align-items:center;padding:var(--s16) 0;border-top:1px solid var(--line-2)}
.disc:first-child{border-top:0;padding-top:var(--s4)}
.disc--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.disc--flip .disc__txt{order:2}
.disc h2{margin-top:var(--s3);max-width:none}
.disc .lede{margin-top:var(--s5)}
.disc__body{margin-top:var(--s4);color:var(--fg-3);max-width:var(--measure-body)}
.disc .mini{margin:var(--s8) 0 var(--s3)}
.disc__viz{margin:0}
@media(max-width:900px){
  .disc,.disc--flip{grid-template-columns:minmax(0,1fr);row-gap:var(--s8);padding:var(--s12) 0}
  .disc--flip .disc__txt{order:0}
}
@media (prefers-reduced-motion:reduce){
  .mp *,.mp *::after,.dt--acc tr.more-row td,.dt--acc .more__grid{transition:none!important;animation:none!important}
}

/* ═══════════════ /sluzby: index + one animated block per service ═══ */
.svx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);margin-bottom:var(--s8)}
.svx a{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;min-height:44px;transition:color .2s}
.svx a span{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--fg-4);transition:color .2s}
.svx a b{font-weight:var(--fw-med);font-size:var(--fs-body);color:var(--fg-2);transition:color .2s}
.svx a:hover b{color:var(--fg)}
.svx a:hover span{color:var(--accent)}
@media(max-width:900px){.svx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc .more__grid{margin-top:var(--s8)}
.svc .disc__body{margin-top:var(--s2)}
.svc > .disc__txt > .mini{margin-top:var(--s6)}

/* a block without an illustration: text only, kept to a readable width */
.disc--noviz{grid-template-columns:minmax(0,1fr)}
.disc--noviz .disc__txt{max-width:820px}

/* ═══════════════ live mini panels (services + Co děláme) ═══════════
   Same vocabulary as the hero flow: a concrete situation fills in row by
   row, problems are amber, results mint. Every animated piece carries
   data-s (its order) and --s; it plays once when the block is revealed.
   Without JS - or with reduced motion - the finished state shows. */
.mp{box-shadow:0 30px 70px -45px rgba(0,0,0,.8)}
.mp [data-s]{transition:opacity .4s ease calc(var(--s) * .28s + .2s),transform .5s cubic-bezier(.16,1,.3,1) calc(var(--s) * .28s + .2s)}
.js .disc:not([data-reveal-s="in"]) .mp [data-s]{opacity:0;transform:translateY(6px)}
.mp td.up,.mp span.up{color:var(--accent)}
.mp td.dn,.mp span.dn{color:var(--warn)}
.mp tr.hl td{background:color-mix(in srgb,var(--accent) 9%,transparent);
  transition:background-color .5s ease calc(var(--s) * .28s + .7s)}
.mp tr.hl td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.js .disc:not([data-reveal-s="in"]) .mp tr.hl td{background:transparent}
.mp__f .ok{color:var(--accent)}
.mp__body{padding:6px 16px 8px}
.mp__kv{display:flex;justify-content:space-between;gap:var(--s4);padding:11px 0;border-bottom:1px solid var(--line);
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro)}
.mp__kv:last-child{border-bottom:0}
.mp__kv .k{color:var(--fg-3)}
.mp__kv > span:last-child{color:var(--fg);text-align:right}
.mp__kv .up{color:var(--accent)}
.mp__kv .dn{color:var(--warn)}
.mp__note{padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--fg-2);
  box-shadow:inset 2px 0 0 var(--accent)}
/* stepper (delivery, software) */
.mp__st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 16px 12px;border-bottom:1px solid var(--line);
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);color:var(--fg-3)}
.mp__st .st{display:flex;flex-direction:column;gap:8px;position:relative}
.mp__st .st::before{content:'';position:absolute;top:6px;left:14px;right:-2px;height:1px;background:var(--line-2)}
.mp__st .st:last-child::before{display:none}
.mp__st i{width:13px;height:13px;border:1px solid var(--fg-4);background:var(--bg-2);position:relative;z-index:1}
.mp__st .done i{background:var(--accent);border-color:var(--accent)}
.mp__st .done{color:var(--fg-2)}
.mp__st .now i{border-color:var(--warn);box-shadow:0 0 0 4px rgba(62,90,142,.16)}
.mp__st .now{color:var(--fg)}
/* swap: "today" values get struck through, "after" values appear (procesy) */
.mp--swap td.was{position:relative;color:var(--warn)}
.mp--swap td.was::after{content:'';position:absolute;right:16px;top:50%;height:1.5px;width:3.4em;background:var(--warn);
  transform-origin:right;transition:transform .4s cubic-bezier(.65,0,.35,1) calc(var(--s,1) * .28s + .6s)}
.mp--swap tr{--s:inherit}
.mp--swap td.now{transition:opacity .4s calc(var(--s,1) * .28s + .9s)}
.js .disc:not([data-reveal-s="in"]) .mp--swap td.was::after{transform:scaleX(0)}
.js .disc:not([data-reveal-s="in"]) .mp--swap td.now{opacity:0}
/* a status that flips from problem to result (AI document) */
.sw{display:inline-grid}
.sw > *{grid-area:1/1;transition:opacity .35s ease calc(var(--s) * .28s + .9s)}
.sw .was{opacity:0;color:var(--warn)}
.sw .now{opacity:1;color:var(--accent)}
.js .disc:not([data-reveal-s="in"]) .sw .was{opacity:1}
.js .disc:not([data-reveal-s="in"]) .sw .now{opacity:0}
.js .disc:not([data-reveal-s="in"]) .mp .sw{opacity:1;transform:none}
/* values typed in by "AI" */
.mp--doc .ty{display:inline-block;max-width:26ch;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  transition:max-width .7s steps(18) calc(var(--s) * .28s + .45s)}
.mp--doc .mp__kv{--s:inherit}
.js .disc:not([data-reveal-s="in"]) .mp--doc .ty{max-width:0}
/* a winning column (systems) */
.mp--cols td.colb{transition:background-color .5s ease 2s,color .5s ease 2s}
.mp--cols td.colb{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--fg)}
.js .disc:not([data-reveal-s="in"]) .mp--cols td.colb{background:transparent;color:var(--fg-3)}
/* KPI tiles + a sparkline that draws itself (data) */
.mp__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mp__tile{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-left:1px solid var(--line)}
.mp__tile:first-child{border-left:0}
.mp__tile b{font-family:inherit;font-variant-numeric:tabular-nums;font-weight:400;font-size:19px;color:var(--fg);letter-spacing:-.02em}
.mp__tile span:last-child{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro)}
.mp__spark{display:block;width:100%;height:auto;padding:14px 16px 6px;box-sizing:border-box}
.mp__spark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.4s ease 1.3s}
.js .disc:not([data-reveal-s="in"]) .mp__spark path{stroke-dashoffset:1}
@media(max-width:600px){
  .mp__tile{padding:12px 10px}
  .mp__tile b{font-size:16px}
  .mp__st{font-size:var(--fs-micro)}
}
.mp .sw{font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:var(--ls-caps)}
.mp__kv .sw{font-size:var(--fs-micro);text-transform:none;letter-spacing:0}
.shot--panel{border:0;background:none}

/* ── hero without the panel; the process flow sits under "Deset vět" ── */
.hero__in--solo{grid-template-columns:minmax(0,1fr)}
.hero__in--solo h1{max-width:16ch}
.praxe{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s8);
  margin-top:var(--s16);padding-top:var(--s12);border-top:1px solid var(--line)}
.praxe__txt{max-width:62ch}
.praxe .flow__title,.praxe .flow__steps{padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
.praxe .mini{margin:0 0 var(--s4)}
.praxe .flow{box-shadow:0 30px 70px -45px rgba(0,0,0,.8)}

/* the light/dark switch is off for visitors (see the pre-paint script) */
.theme[hidden]{display:none}

/* ── home "Co děláme": pillars on the left, their services on the right ── */
.pil__anchor{display:block;position:relative;top:-90px}
/* layout per the design: heading top-left with the pillar list under it at
   the bottom; on the right the pillar intro, then its services in three
   open columns - small label, large grey title, body copy. */
.pil__anchor{display:block;position:relative;top:-90px}
.pil{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,3fr);column-gap:clamp(28px,4.4vw,72px);
  margin-top:var(--s10);align-items:stretch}
.pil__side{display:flex;flex-direction:column;gap:var(--s10)}
.pil__side h2{max-width:10ch;font-size:clamp(34px,3.4vw,56px);line-height:1}
@media(min-width:901px){.pil__side h2{max-width:none}}
.pil__tabs{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}
.pil__tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;padding:5px 0;
  font-size:var(--fs-body);line-height:1.2;color:var(--fg-4);transition:color .2s}
.pil__tab::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.pil__tab:hover{color:var(--fg-2)}
.pil__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pil__tab[aria-selected="true"]{color:var(--fg)}
.pil__tab[aria-selected="true"]::after{transform:scaleX(1)}
.pil__ph{margin:0 0 var(--s3);font-size:var(--fs-h3);font-weight:var(--fw-med);color:var(--fg)}
.pil--js .pil__ph{display:none}
.pil__panel + .pil__panel{margin-top:var(--s12)}
.pil--js .pil__panel + .pil__panel{margin-top:0}
.pil--js .pil__panels{display:grid;grid-template-rows:auto 1fr}
.pil--js .pil__panel > .pil__grid{align-self:end}
.pil--js .pil__panel > .pil__intro{align-self:start}
@media(min-width:901px){.pil__intro{text-align:center;justify-self:center;margin-left:auto;margin-right:auto}}
.pil--js .pil__panel{grid-column:1;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;align-content:start}
.pil--js .pil__panel:not(.is-on){visibility:hidden}
.pil--js .pil__panel:not(.is-on) *{animation:none}
.pil__intro{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg);max-width:36ch}
.pil__grid{display:grid;align-content:start;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.3vw,56px);
  row-gap:var(--s10);margin-top:var(--s10)}
.pil__svc{position:relative;min-width:0}
.pil__type{margin:0;font-size:var(--fs-body);color:var(--fg-3)}
.pil__svc h3{margin-top:var(--s2);font-size:var(--fs-h3);line-height:1.2;  letter-spacing:var(--ls-h3);font-weight:var(--fw-disp);color:var(--fg-3);min-height:2.16em}
.pil__svc h3 a{color:inherit;text-decoration:none;transition:color .2s}
.pil__svc h3 a::before{content:'';position:absolute;inset:0}      /* the whole column is the link */
.pil__svc:hover h3 a,.pil__svc h3 a:focus-visible{color:var(--fg)}
.pil__svc h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pil__d{margin:var(--s4) 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg);max-width:38ch}
.pil__svc:target h3 a{color:var(--fg)}
@supports (grid-template-rows:subgrid){
  /* label, title and copy line up across the columns */
  .pil__svc{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  .pil__svc h3{min-height:2.4em}
}
/* panel entrance: intro, then columns one after another */
.pil__panel.is-in > *,.pil__panel.is-in .pil__svc{animation:pilin .55s cubic-bezier(.16,1,.3,1) backwards}
.pil__panel.is-in .pil__svc:nth-child(1){animation-delay:.06s}
.pil__panel.is-in .pil__svc:nth-child(2){animation-delay:.12s}
.pil__panel.is-in .pil__svc:nth-child(3){animation-delay:.18s}
@keyframes pilin{from{opacity:0;transform:translateY(12px)}}
@media(max-width:1100px){.pil__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .pil{grid-template-columns:minmax(0,1fr);row-gap:var(--s8)}
  .pil__side{gap:var(--s6)}
  .pil__side h2{max-width:none}
  .pil__tabs{flex-direction:row;flex-wrap:wrap;gap:4px 20px}
}
@media(max-width:600px){.pil__grid{grid-template-columns:minmax(0,1fr)}.pil__svc h3{min-height:0}}
@media (prefers-reduced-motion:reduce){
  .pil__tab,.pil__tab::after,.pil__svc h3 a{transition:none}
  .pil__panel.is-in > *,.pil__panel.is-in .pil__svc{animation:none}
}
.pil__more{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);grid-column:1 / -1;margin-top:clamp(56px,6vw,96px)}
/* the two links line up with the two columns above */
.pil__more{display:grid;grid-template-columns:subgrid;column-gap:inherit}
.pil__more > a{justify-self:start}

/* ── "Kde s námi mají zkušenosti": one-line heading, names in a moving strip ── */
#zkusenosti .shead h2,main:has(> #zkusenosti) .phead h1{max-width:none}
.mq{overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cl--mq{flex-wrap:nowrap;width:max-content;border:0;animation:mq var(--mq-dur,60s) linear infinite}
.cl--mq li{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);color:var(--fg);white-space:nowrap;
  padding:22px clamp(24px,3vw,44px)}
.cl--mq li:first-child{padding-left:clamp(24px,3vw,44px);border-left:1px solid var(--line)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── "Deset vět" centred: heading, lede, pills, claim and the action row ── */
#povedome{padding-top:clamp(48px,7vw,120px)}
#povedome .shead{text-align:center}
#povedome .shead h2,#povedome .shead .lede{margin-left:auto;margin-right:auto}
#povedome .shead h2{max-width:none}
#povedome .shead .lede{margin-top:var(--s3)}
#povedome .claim{text-align:center}
#povedome .log__sum{justify-content:center}

/* ── "Kde s námi mají zkušenosti" centred (home section) ── */
#zkusenosti .shead{text-align:center}
#zkusenosti .shead h2,#zkusenosti .shead .lede{margin-left:auto;margin-right:auto}
#zkusenosti .shead .lede{margin-top:var(--s3)}
#zkusenosti .more{text-align:center}

/* ══ ACCENT: blue gradient (#95ADD8 → #3E5A8E) ═════════════════════
   Fills, rules and bars carry the gradient; buttons slide it on hover,
   text links turn into gradient text on hover.                        */
.btn:not(.btn--ghost),.send{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;
  background:#3E5A8E;border-color:transparent;color:#fff;
  transition:box-shadow .3s,transform .2s}
/* hover: a light spot that follows the cursor (position set by interact.js) */
.btn:not(.btn--ghost)::before,.send::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(160px circle at var(--bx,50%) var(--by,50%),rgba(182,198,226,.75),rgba(149,173,216,.25) 45%,transparent 75%);
  opacity:0;transition:opacity .25s}
.btn:not(.btn--ghost):hover::before,.send:hover::before{opacity:1}
.btn:not(.btn--ghost):hover,.send:hover{background:#3E5A8E;color:#fff;
  box-shadow:0 12px 32px -12px rgba(62,90,142,.8);transform:translateY(-1px)}
.btn:not(.btn--ghost):active,.send:active{transform:none}
.more a:hover,.more__links a:hover,.dt a:hover,.ftr a:hover,.dl a:hover,.form-status a:hover,
.btn--ghost:hover,.pil__svc:hover h3 a{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nav: links run the full header height; the active one is marked on the
   header's own bottom border, not under the word */
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.hdr__in > *{align-self:center}
.hdr__in > .mark{justify-self:start}
.hdr__in > .nav{align-self:stretch;justify-self:center}
.hdr__in > .hdr__r{justify-self:end}
@media(max-width:1120px){.hdr__in{grid-template-columns:auto 1fr}.hdr__in > .hdr__r{grid-column:2}}
.nav a{position:relative;display:flex;align-items:center;padding:0 10px}
.nav a:hover{background:none}
.nav a[aria-current="page"]{box-shadow:none;background:none}
.nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-active)}
/* every link has the line ready; hover draws it out from the middle */
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-active);
  transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.3,0,.2,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:22px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(149,173,216,.55),rgba(149,173,216,.12) 55%,transparent 75%);
  filter:blur(6px);opacity:0;transform:scaleX(.4);transform-origin:center bottom;
  transition:opacity .22s ease,transform .22s cubic-bezier(.3,0,.2,1)}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1;transform:none}
.nav a[aria-current="page"]::before{opacity:.75;transform:none}
/* the line draws itself out from the middle when a page opens */
.nav a[aria-current="page"]::after{transform-origin:center;animation:navdraw .32s cubic-bezier(.3,0,.2,1) .08s backwards}
@keyframes navdraw{from{transform:scaleX(0);opacity:.4}}
@media (prefers-reduced-motion:reduce){.nav a[aria-current="page"]::after{animation:none}.nav a::after,.nav a::before{transition:none}}
.pil__tab::after,.flow__bar i,.rail::after,.step__load i,.step.done .step__load i{background:var(--grad-active)}
.rail--sync > div.is-on::before,.rail--sync > div.is-done::before{background:var(--grad-active)}
.dot,.dl .ok::before{background:var(--grad-line)}
.log__b[aria-pressed="true"]{border-color:#7F98C6}
.step.active{border-color:color-mix(in srgb,#3E5A8E 70%,var(--line))}
::selection{background:#3E5A8E;color:#fff}
@media (prefers-reduced-motion:reduce){.btn:not(.btn--ghost),.send{transition:none}.btn:not(.btn--ghost):hover,.send:hover{transform:none}}
/* ══ END ACCENT ═════════════════════════════════════════════════════ */

/* ── page background (everything but the hero / page header): a dot grid
   that lights up in light blue around the cursor ───────────────────── */
body::before,body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:radial-gradient(circle,rgba(188,197,216,.14) .9px,transparent 1.4px) 10px 10px/20px 20px}
/* the glow under the cursor: its own layer so it can fade with the dots */
html::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(340px circle at var(--hx,-999px) var(--hy,-999px),rgba(62,90,142,.07),transparent 70%);
  opacity:0;transition:opacity .9s ease}
html.is-lit::before{opacity:1;transition-duration:.35s}
body::after{
  background:radial-gradient(circle,rgba(149,173,216,.55) 1.1px,transparent 1.6px) 10px 10px/20px 20px;
  -webkit-mask-image:radial-gradient(180px circle at var(--hx,-999px) var(--hy,-999px),#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
          mask-image:radial-gradient(180px circle at var(--hx,-999px) var(--hy,-999px),#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
  opacity:0;transition:opacity .9s ease}
html.is-lit body::after{opacity:1;transition-duration:.35s}
/* the hero and the subpage headers stay plain; their bottom edge fades
   into the dots instead of cutting off */
.hero{background:var(--bg)}
/* subpage headers: no hero glow, no own ground - the dot grid runs through */
.phead{background:none}
.phead .glow{display:none}
@media (prefers-reduced-motion:reduce){body::after,html::before{display:none}}

/* ══ GLASS ACCENTS ═══════════════════════════════════════════════════
   Buttons and active/selected modules: frosted glass tinted with the
   blue gradient, a gradient hairline edge, and a stronger tint + glow
   on hover. The dot grid behind shows through, blurred.               */
:root{
  --glass-tint:   linear-gradient(135deg,rgba(149,173,216,.20),rgba(62,90,142,.30));
  --glass-tint-h: linear-gradient(135deg,rgba(149,173,216,.32),rgba(62,90,142,.46));
  --glass-edge:   linear-gradient(135deg,rgba(182,198,226,.75),rgba(62,90,142,.55) 60%,rgba(149,173,216,.45));
  --glass-blur:   blur(14px) saturate(150%);
}
.log__b[aria-pressed="true"],
.flow__tabs button[aria-selected="true"],
.step.done .step__tag{
  background:var(--glass-tint) padding-box,var(--glass-edge) border-box;
  border:1px solid transparent;color:var(--fg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px -14px rgba(62,90,142,.7)}
.log__b[aria-pressed="true"]:hover,
.flow__tabs button[aria-selected="true"]:hover{
  background:var(--glass-tint-h) padding-box,var(--glass-edge) border-box;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 3px rgba(149,173,216,.12),0 14px 36px -12px rgba(62,90,142,.85)}
.step.done{background:linear-gradient(135deg,rgba(149,173,216,.07),rgba(62,90,142,.10));
  border-color:rgba(149,173,216,.32)}
.step.done .step__tag{color:#DCE4F2}
/* idle bubbles are glass too, so the grid shows through softly */
.log__b{background:rgba(188,197,216,.035);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.log__b:hover{background-color:rgba(149,173,216,.08)}

/* "Kde s námi mají zkušenosti": the moving strip is a frosted pane over the grid */
.mq{background:rgba(188,197,216,.03);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border-color:rgba(188,197,216,.12)}

@media (prefers-reduced-transparency:reduce){
  .log__b[aria-pressed="true"],.flow__tabs button[aria-selected="true"],.step.done .step__tag{
    background:#3E5A8E;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
  .log__b,.mq{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}
}
/* ══ END GLASS ACCENTS ═══════════════════════════════════════════════ */

/* ── hero image: the glowing T mark on the right; it fades out to the
   left (under the text) and to the bottom (into the dot grid) ────────── */
.hero .glow,.hero .rails{display:none}
.hero::before,.hero__pulse{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  /* the mark (at 59-92% of the image width) is placed ~180px right of the
     page centre, so it sits beside the text at any width; the image scales
     with the viewport up to 1700px */
  --hs:min(1700px,98vw);
  background:url(/assets/img/hero-t2.jpg?v=2) no-repeat;background-size:var(--hs) auto;
  background-position:calc(50vw + 180px - var(--hs) * .59) 42%;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% + 90px),#000 calc(50% + 210px),#000 calc(50% + 200px + var(--hs) * .34),transparent calc(50% + 180px + var(--hs) * .41)),linear-gradient(to bottom,#000 62%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent calc(50% + 90px),#000 calc(50% + 210px),#000 calc(50% + 200px + var(--hs) * .34),transparent calc(50% + 180px + var(--hs) * .41)),linear-gradient(to bottom,#000 62%,transparent);
          mask-composite:intersect}
@media(max-width:900px){.hero::before,.hero__pulse{opacity:.4;background-position:right -40vw center;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}}

/* ══ BLUE CONTROLS + ROUNDED CORNERS ══════════════════════════════════
   Every button-like control uses the same solid blue as the main
   buttons (selected statements, scenario tabs, pause, solved tags).
   Boxes get rounded corners; controls and tags are pills.            */
:root{--blue:#3E5A8E;--blue-h:#4C6BA1;--r:14px;--r-sm:10px}
.log__b[aria-pressed="true"],
.flow__tabs button[aria-selected="true"],
.flow__pause,
.step.done .step__tag{
  background:var(--blue);border-color:var(--blue);color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 22px -14px rgba(62,90,142,.9)}
.log__b[aria-pressed="true"]:hover,
.flow__tabs button[aria-selected="true"]:hover,
.flow__pause:hover{
  background:var(--blue-h);border-color:var(--blue-h);color:#fff;
  box-shadow:0 0 0 3px rgba(149,173,216,.14),0 12px 28px -12px rgba(62,90,142,.9)}
/* the tick on a selected statement: white on a lighter disc */
.log__b[aria-pressed="true"]::before{border-color:rgba(255,255,255,.55);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,rgba(255,255,255,.18)}

.panel,.flow,.form,.shot,.mq,.glass{border-radius:var(--r);overflow:hidden}
.step{border-radius:var(--r-sm)}
.who img{border-radius:var(--r)}
.flow__tabs button,.flow__pause,.step__tag,.sx__n,.chip{border-radius:999px}
.tog::before,.mp__st i{border-radius:50%}
/* ══ END BLUE + ROUNDED ═══════════════════════════════════════════════ */

/* ── logo: the "techtle" wordmark; on hover it fills with the accent gradient ── */
.mark{position:relative;align-items:center}
.mark .logo{display:block;height:16px;width:auto}
.mark::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--grad-line);opacity:0;transition:opacity .35s ease;
  -webkit-mask:url(/assets/img/techtlee-logo.svg?v=2) left center/contain no-repeat;
          mask:url(/assets/img/techtlee-logo.svg?v=2) left center/contain no-repeat}
.mark:hover::after,.mark:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){.mark::after{transition:none}}

/* ══ BUTTON STYLE: blue glass tile ═══════════════════════════════════
   Deep blue body that darkens toward the centre, a lit inner rim
   (brightest at the top-left edge) and a soft blue halo. On hover the
   rim and halo light up; the cursor spot keeps following the mouse.  */
:root{
  --tile-bg: radial-gradient(ellipse 85% 130% at 50% 55%,
               color-mix(in srgb,#3E5A8E 28%,#060A14) 0%,
               color-mix(in srgb,#3E5A8E 62%,#060A14) 62%,
               #3E5A8E 100%);
  --tile-rim: inset 0 0 0 1px rgba(149,173,216,.55),
              inset 1px 1px 0 rgba(218,226,240,.55),
              inset 0 0 14px rgba(149,173,216,.35);
  --tile-rim-h: inset 0 0 0 1px rgba(170,188,220,.9),
                inset 1px 1px 0 rgba(236,240,248,.85),
                inset 0 0 22px rgba(149,173,216,.65);
}
.btn:not(.btn--ghost),.send,
.log__b[aria-pressed="true"],
.flow__tabs button[aria-selected="true"],
.flow__pause,
.step.done .step__tag{
  background:var(--tile-bg);border-color:transparent;color:#fff;
  box-shadow:var(--tile-rim),0 10px 28px -14px rgba(62,90,142,.95)}
.btn:not(.btn--ghost),.send{border-radius:12px}
.btn:not(.btn--ghost):hover,.send:hover,
.log__b[aria-pressed="true"]:hover,
.flow__tabs button[aria-selected="true"]:hover,
.flow__pause:hover{
  background:var(--tile-bg);border-color:transparent;color:#fff;
  box-shadow:var(--tile-rim-h),0 0 30px -6px rgba(149,173,216,.6),0 14px 34px -12px rgba(62,90,142,1)}
.btn:not(.btn--ghost)::before,.send::before{
  background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(149,173,216,.45),rgba(62,90,142,.18) 50%,transparent 75%)}
.btn:not(.btn--ghost),.send,.log__b,.flow__tabs button,.flow__pause{transition:box-shadow .3s ease,transform .2s,color .2s}
/* small tags: a lighter rim and halo so the effect reads at 24px */
.step.done .step__tag{box-shadow:inset 0 0 0 1px rgba(149,173,216,.6),inset 1px 1px 0 rgba(218,226,240,.5),
  inset 0 0 8px rgba(149,173,216,.35),0 4px 14px -8px rgba(62,90,142,.9)}
/* ══ END BUTTON STYLE ════════════════════════════════════════════════ */

/* ── "Jméno, tvář, reference": card carousel ─────────────────────────
   Cards run off the right edge of the page (the next one peeks in);
   arrows and a progress line sit underneath.                         */
.ppl{margin-top:var(--s12)}
.ppl__track{display:flex;column-gap:clamp(28px,3.4vw,52px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;margin-right:calc(50% - 50vw);padding-right:var(--inset)}
.ppl__track::-webkit-scrollbar{display:none}
.ppl__track:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.ppl__card{flex:0 0 min(600px,84vw);display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  column-gap:clamp(20px,2.4vw,36px);scroll-snap-align:start}
.ppl__ph{width:100%;height:auto;aspect-ratio:255/304;object-fit:cover;object-position:50% 0;border-radius:var(--r);
  filter:saturate(.95) contrast(1.03)}
.ppl__txt{display:flex;flex-direction:column;min-width:0;padding-top:4px}
.ppl__role{margin:0;font-size:var(--fs-sm);color:var(--fg-3)}
.ppl__name{margin:var(--s1) 0 0;font-size:clamp(26px,.8vw + 18px,32px);line-height:1.08;letter-spacing:var(--ls-h2);
  font-weight:var(--fw-disp);color:var(--fg)}
.ppl__bio{margin:var(--s5) 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--fg-2);max-width:42ch}
.ppl__cv{margin:auto 0 0;padding-top:var(--s5);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--fg);max-width:42ch}
.ppl__cv span + span::before{content:' / '}
.ppl__nav{display:flex;align-items:center;gap:8px;margin-top:var(--s10)}
.ppl__btn{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;background:rgba(188,197,216,.14);color:var(--fg);transition:background-color .2s,opacity .2s,box-shadow .3s}
.ppl__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ppl__btn:hover:not(:disabled){background:var(--tile-bg);box-shadow:var(--tile-rim-h),0 0 24px -6px rgba(149,173,216,.6)}
.ppl__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ppl__btn:disabled{opacity:.35;cursor:default}
.ppl__bar{flex:1;height:2px;margin-left:clamp(16px,2vw,28px);background:var(--line-2);position:relative;overflow:hidden}
.ppl__bar i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(149,173,216,.35),var(--accent));
  transform:scaleX(.5);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media(max-width:700px){
  .ppl__card{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  .ppl__ph{max-width:190px}
}
@media (prefers-reduced-motion:reduce){.ppl__track{scroll-behavior:auto}.ppl__bar i{transition:none}}

/* ── "Jdeme po konečném výsledku": the whole block sits on a frosted pane
   so the copy reads cleanly over the dot grid ── */
.pil{padding:clamp(24px,2.6vw,40px) clamp(28px,3.6vw,56px);border-radius:var(--r);min-height:clamp(420px,40vw,600px);grid-template-rows:auto 1fr auto;
  background:linear-gradient(160deg,rgba(188,197,216,.06),rgba(188,197,216,.02) 45%,rgba(188,197,216,.04));
  border:1px solid rgba(188,197,216,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px -45px rgba(0,0,0,.8)}
@media (prefers-reduced-transparency:reduce){.pil{background:var(--bg-2);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ── pillars: the pillar intro sits on the same bottom line as the
   "Jdeme po konečném výsledku." heading. The side column dissolves into
   the pane's grid so heading + intros share row 1, tabs + services row 2. */
@media(min-width:901px){
  .pil{row-gap:clamp(40px,5vw,72px)}
  .pil__side{display:contents}
  .pil__side > h2{grid-column:1;grid-row:1;align-self:end}
  .pil__tabs{grid-column:1;grid-row:2;align-self:end;margin-top:0}
  .pil__panels{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid}
  .pil--js .pil__panels{grid-template-rows:subgrid}
  .pil__more{grid-row:3;margin-top:clamp(16px,2vw,32px)}
}

/* ── hero overlay: the page grid and its cursor light continue over the
   hero and its image. ::after = resting dots (fixed to the viewport, so
   they line up with the page grid); .glow = lit dots + glow at the cursor */
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(188,197,216,.14) .9px,transparent 1.4px) 10px 10px/20px 20px fixed;
}
.hero .glow{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;filter:none;opacity:0;
  background:
    radial-gradient(circle,rgba(149,173,216,.6) 1.1px,transparent 1.6px) 10px 10px/20px 20px fixed,
    radial-gradient(340px circle at var(--lx,-999px) var(--ly,-999px),rgba(62,90,142,.16),transparent 70%);
  -webkit-mask-image:radial-gradient(240px circle at var(--lx,-999px) var(--ly,-999px),#000 0%,rgba(0,0,0,.4) 50%,transparent 100%);
          mask-image:radial-gradient(240px circle at var(--lx,-999px) var(--ly,-999px),#000 0%,rgba(0,0,0,.4) 50%,transparent 100%);
  transition:opacity .9s ease}
.hero .glow i{display:none}
html.is-lit .hero .glow{opacity:1;transition-duration:.35s}
@media (prefers-reduced-motion:reduce){.hero .glow{display:none}}

/* ── hero image breathes: a slightly brighter copy fades in and out over
   the base image. The rhythm is uneven on purpose so it feels alive. ── */
.hero__pulse{background-image:url(/assets/img/hero-t3.jpg?v=2);opacity:0;
  /* the brighter layer is masked by a soft ellipse around the mark (not by the
     straight fades of the base image), so the glow breathes evenly on every
     side with no edge */
  -webkit-mask-image:radial-gradient(ellipse calc(var(--hs) * .34) 52% at calc(50% + 180px + var(--hs) * .165) 46%,#000 0%,rgba(0,0,0,.75) 40%,transparent 100%);
          mask-image:radial-gradient(ellipse calc(var(--hs) * .34) 52% at calc(50% + 180px + var(--hs) * .165) 46%,#000 0%,rgba(0,0,0,.75) 40%,transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add;
  animation:heropulse 7.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes heropulse{
  0%{opacity:0}
  38%{opacity:1}
  52%{opacity:.82}
  64%{opacity:1}
  100%{opacity:0}}
@media(max-width:900px){.hero__pulse{animation-name:heropulse-m}}
@keyframes heropulse-m{0%,100%{opacity:0}45%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.hero__pulse{animation:none;opacity:0}}

/* ── pillars, v3: the pillar switch is a mini navbar across the top of the
   pane; the two links stack in the left column where the switch was. ── */
@media(min-width:901px){
  .pil{grid-template-rows:auto auto 1fr;row-gap:0}
  .pil__panels .pil__grid{margin-top:clamp(48px,5vw,80px)}
  .pil__intro{padding-top:var(--s6)}
  /* the switch sits in the right column at the heading's top line; the
     intro under it ends on the heading's bottom line */
  .pil__tabs{grid-column:2;grid-row:1;align-self:start;flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:0 clamp(20px,2.4vw,36px);border-bottom:1px solid var(--line-2);margin:0}
  .pil__side > h2{grid-row:1 / span 2;align-self:start}
  .pil__panels{grid-row:2 / span 2}
  .pil__more{grid-column:1;grid-row:3;align-self:end;margin-top:0;
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
}
.pil__tab{padding:12px 0 13px}
.pil__tab::after{bottom:-1px;height:2px;background:var(--grad-active);transform:scaleX(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.3,0,.2,1)}
.pil__tab:hover::after,.pil__tab:focus-visible::after,.pil__tab[aria-selected="true"]::after{transform:scaleX(1)}

/* ══ GLASS PANES: projects, contact form, quote ═══════════════════════ */
.pane,.form{border-radius:var(--r);border:1px solid rgba(188,197,216,.12);
  background:linear-gradient(160deg,rgba(188,197,216,.06),rgba(188,197,216,.02) 45%,rgba(188,197,216,.04));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px -45px rgba(0,0,0,.8)}
.pane--table{padding:clamp(8px,1.4vw,20px) clamp(20px,2.6vw,40px) clamp(14px,1.8vw,24px)}
.pane--table .dt tbody tr:last-child td{border-bottom:0}
.form{overflow:hidden}
.form .field{border-bottom-color:rgba(188,197,216,.1)}
@media (prefers-reduced-transparency:reduce){.pane,.form{background:var(--bg-2);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ══ HOW WE WORK: a timeline that draws itself, glass cards per phase ═══ */
.shead--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4.4vw,72px);align-items:end}
.shead--split .lede{margin-top:0;max-width:46ch;justify-self:end}
@media(max-width:900px){.shead--split{grid-template-columns:minmax(0,1fr)}.shead--split .lede{margin-top:var(--s5);justify-self:start}}
.flowx{list-style:none;margin:var(--s12) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
/* the track and the line that draws across it */
.flowx::before,.flowx::after{content:'';position:absolute;left:8px;right:8px;top:7px;height:1px}
.flowx::before{background:var(--line-2)}
.flowx::after{height:2px;top:6px;background:var(--grad-active);transform:scaleX(0);transform-origin:left;
  transition:transform 1.8s cubic-bezier(.45,0,.2,1) .2s}
.flowx[data-reveal-s="in"]::after{transform:scaleX(1)}
.flowx__step{position:relative;min-width:0;display:flex;flex-direction:column}
.flowx__node{position:relative;z-index:1;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-3);
  transition:background-color .4s,border-color .4s,box-shadow .4s;transition-delay:calc(.25s + var(--i) * .45s)}
.flowx[data-reveal-s="in"] .flowx__node{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 5px rgba(149,173,216,.14),0 0 18px rgba(149,173,216,.45)}
.flowx__card{flex:1;margin-top:var(--s6);padding:clamp(20px,2vw,28px);border-radius:var(--r);
  display:flex;flex-direction:column;gap:var(--s3);
  border:1px solid rgba(188,197,216,.12);
  background:linear-gradient(160deg,rgba(188,197,216,.06),rgba(188,197,216,.02) 45%,rgba(188,197,216,.04));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  opacity:.35;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;
  transition-delay:calc(.35s + var(--i) * .45s),calc(.35s + var(--i) * .45s),0s,0s}
.flowx[data-reveal-s="in"] .flowx__card{opacity:1;transform:none}
.flowx__card:hover{border-color:rgba(149,173,216,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 3px rgba(149,173,216,.08),0 20px 40px -24px rgba(62,90,142,.7)}
.flowx__n{margin:0;font-size:clamp(34px,2.4vw + 6px,44px);line-height:1;font-weight:var(--fw-disp);
  letter-spacing:var(--ls-h2);color:var(--accent)}
.flowx__card h3{margin-top:var(--s2);font-size:var(--fs-h3)}
.flowx__d{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--fg-3)}
.flowx__out{margin:auto 0 0;padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--fg)}
.flowx__card .flowx__d + .flowx__out{margin-top:auto}
.flowx__lbl{font-size:var(--fs-micro);color:var(--fg-4)}
@media(max-width:1000px){.flowx{grid-template-columns:repeat(2,minmax(0,1fr))}.flowx::before,.flowx::after{display:none}
  .flowx__node{display:none}.flowx__card{margin-top:0}}
@media(max-width:600px){.flowx{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.flowx::after,.flowx__node,.flowx__card{transition:none}
  .flowx::after{transform:scaleX(1)}.flowx__card{opacity:1;transform:none}}

/* quote: one glass card, big quotation mark, author with photo */
.qx{position:relative;margin:clamp(56px,7vw,110px) 0 0;padding:clamp(32px,4.4vw,64px) clamp(28px,5vw,80px);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2.4vw,36px);row-gap:var(--s8);overflow:hidden}
.qx::before{content:'';position:absolute;inset:auto -10% -60% 40%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,90,142,.28),transparent)}
.qx__mark{grid-row:1 / span 2;font-size:clamp(96px,8vw,150px);line-height:.8;font-weight:var(--fw-disp);
  color:var(--accent);opacity:.9;margin-top:-.08em}
.qx blockquote{margin:0;max-width:30ch;font-size:clamp(26px,1.6vw + 14px,40px);line-height:1.18;
  letter-spacing:var(--ls-h2);font-weight:var(--fw-disp);color:var(--fg);text-wrap:balance}
.qx figcaption{display:flex;align-items:center;gap:var(--s4)}
.qx figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 15%;
  border:1px solid rgba(188,197,216,.2)}
.qx figcaption > span{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--fg-3)}
.qx figcaption b{font-weight:var(--fw-med);color:var(--fg);font-size:var(--fs-body)}
@media(max-width:600px){.qx{grid-template-columns:minmax(0,1fr)}.qx__mark{grid-row:auto;font-size:80px}}

/* ── service cards in the pillars read as clickable: an arrow button in the
   corner, and on hover the card lifts onto a lit glass tile ── */
.pil__svc{padding:18px 18px 20px;margin:-18px -18px -20px;border-radius:var(--r);border:1px solid transparent;
  transition:background-color .25s,border-color .25s,box-shadow .3s,transform .25s cubic-bezier(.2,.8,.2,1)}
.pil__svc .pil__type{padding-right:44px}
.pil__svc h3 a::after{content:'';position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-3);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCC5D8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:background-color .25s,border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pil__svc:hover{background:rgba(188,197,216,.05);border-color:rgba(149,173,216,.28);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -24px rgba(62,90,142,.8)}
.pil__svc:hover h3 a::after,.pil__svc h3 a:focus-visible::after{
  background-color:#3E5A8E;border-color:rgba(170,188,220,.7);transform:translate(2px,-2px);
  box-shadow:inset 1px 1px 0 rgba(218,226,240,.5),0 0 18px -4px rgba(149,173,216,.6)}
.pil__svc:active{transform:none}
@media(max-width:900px){.pil__svc{margin:0;padding:16px;border-color:rgba(188,197,216,.1);background:rgba(188,197,216,.03)}}
@media (prefers-reduced-motion:reduce){.pil__svc,.pil__svc h3 a::after{transition:none}.pil__svc:hover{transform:none}}

/* ── pillars, v4: heading + the active pillar's intro on the left; the
   switch on the right with the services right under it ── */
.pil__lead{display:none}
@media(min-width:901px){
  .pil{grid-template-columns:minmax(0,1.15fr) minmax(0,3fr) !important}
  .pil__head{grid-column:1;grid-row:1 / span 2;align-self:start;display:flex;flex-direction:column;gap:var(--s6)}
  .pil__head h2{margin:0 !important;font-size:clamp(40px,3.9vw,62px) !important;line-height:1.02}
  .pil__lead{display:block;margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--fg-2);max-width:34ch}
  .pil__lead.is-in{animation:pilin .45s cubic-bezier(.16,1,.3,1) backwards}
  .pil__panel > .pil__intro{display:none}
  .pil--js .pil__panel > .pil__grid{align-self:start}
  .pil__panels .pil__grid{margin-top:var(--s8) !important}
  .pil__tabs{justify-content:flex-start !important}
}
@media (prefers-reduced-motion:reduce){.pil__lead.is-in{animation:none}}

.pil.is-measuring,.pil.is-measuring *{animation:none !important;transition:none !important;transform:none !important}
/* ── pillars, v5: every service card has the same fixed head (label + a
   two-line title) and the same height in every pillar, so descriptions
   always start on one line; the pillar intro on the left starts on that
   same line (offset set by interact.js) ── */
@media(min-width:901px){
  .pil__svc{display:flex !important;flex-direction:column;min-height:var(--svc-h,0px)}
  .pil__svc .pil__type{flex:none;height:1.4em;line-height:1.4em;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  /* title row = the tallest title in any pillar (2 or 3 lines, measured) */
  .pil__svc h3{flex:none;height:var(--svc-t,auto);min-height:0 !important;margin-top:var(--s2);line-height:1.2}
  .pil__svc .pil__d{margin-top:var(--s4)}
  .pil__head{gap:0}
  .pil__lead{margin-top:var(--lead-y,24px) !important}
}

/* ── "Nejdřív problém, pak nástroje" centred: heading + lede stacked,
   phase cards centred inside, quote and link centred ── */
#pristup .shead--split{display:block;text-align:center}
#pristup .shead--split h2{max-width:none;margin:0 auto}
#pristup .shead--split .lede{margin:var(--s3) auto 0;max-width:52ch}
#pristup .flowx__card{text-align:center;align-items:center}
#pristup .flowx__out{align-self:stretch;align-items:center}
#pristup .flowx__node{align-self:center}
#pristup .flowx::before,#pristup .flowx::after{left:12.5%;right:12.5%}
#pristup .qx{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:var(--s5)}
#pristup .qx__mark{grid-row:auto;font-size:clamp(110px,8vw,150px);line-height:1;height:.42em;margin:0 0 var(--s3)}
#pristup .qx blockquote{max-width:28ch}
#pristup .more{text-align:center}
@media(max-width:1000px){#pristup .flowx::before,#pristup .flowx::after{left:8px;right:8px}}

/* ── contact form: taller, roomier fields; the message box has no native
   resize grip and a slim scrollbar that looks the same in every browser ── */
.form .field input,.form .field textarea{padding:20px var(--s5);font-size:var(--fs-body)}
.form .field label{padding:0 var(--s5)}
.form .field:has(textarea) label{padding-top:21px}
.form .field textarea{resize:none;min-height:clamp(200px,22vh,260px);line-height:var(--lh-body);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(188,197,216,.28) transparent}
.form .field textarea::-webkit-scrollbar{width:10px}
.form .field textarea::-webkit-scrollbar-track{background:transparent}
.form .field textarea::-webkit-scrollbar-thumb{background:rgba(188,197,216,.25);border-radius:10px;
  border:3px solid transparent;background-clip:padding-box}
.form .field textarea::-webkit-scrollbar-thumb:hover{background-color:rgba(188,197,216,.45)}
.form .field textarea::-webkit-scrollbar-corner,.form .field textarea::-webkit-resizer{background:transparent}
.form .form__f{padding:16px var(--s5)}

/* desktop: the form runs down to the end of the contact details beside it;
   the message box takes up the extra height */
@media(min-width:901px){
  .grid:has(.contact-form){align-items:stretch}
  .grid > div:has(> .contact-form){display:flex;flex-direction:column}
  .contact-form{flex:1;display:flex;flex-direction:column}
  .contact-form .field:has(textarea){flex:1;grid-template-rows:minmax(0,1fr)}
  .contact-form .field textarea{height:100%;min-height:120px}
}

/* ── people, v2: expanding cards. Closed cards show only the face, name and
   role; the open one widens and reveals the bio beside the photo. ── */
.ppl--js .ppl__track{display:flex;justify-content:center;gap:clamp(12px,1.4vw,20px);overflow:visible;margin-right:0;padding-right:0;scroll-snap-type:none}
.ppl--js .ppl__card{flex:0 0 190px;display:flex;gap:0;min-width:0;scroll-snap-align:none;grid-template-columns:none;
  transition:flex-basis .55s cubic-bezier(.65,0,.35,1),gap .55s cubic-bezier(.65,0,.35,1)}
.ppl--js .ppl__card.is-on{flex:0 0 auto;gap:clamp(24px,2.6vw,40px)}
.ppl__pick{all:unset;box-sizing:border-box;flex:0 0 190px;display:flex;flex-direction:column;gap:var(--s4);cursor:pointer;border-radius:var(--r)}
.ppl__pick:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ppl__pick .ppl__ph{width:190px;transition:filter .35s,opacity .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}

.ppl__pick:hover .ppl__ph{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(149,173,216,.3),0 14px 34px -18px rgba(62,90,142,.8)}
.ppl--js .ppl__card.is-on .ppl__ph{box-shadow:0 0 0 1px rgba(149,173,216,.45),0 18px 44px -20px rgba(62,90,142,.9)}
.ppl__id{display:flex;flex-direction:column;gap:2px}
.ppl__id .ppl__role{font-size:var(--fs-sm);color:var(--fg-4);margin:0}
.ppl__id .ppl__name{font-size:var(--fs-body);font-weight:var(--fw-med);color:var(--fg-3);transition:color .25s}
.ppl--js .ppl__card.is-on .ppl__id .ppl__name,.ppl__pick:hover .ppl__name{color:var(--fg)}
.ppl--js .ppl__txt{flex:1 1 0;min-width:0;overflow:hidden;opacity:0;transform:translateX(-12px);max-width:0;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),max-width .55s cubic-bezier(.65,0,.35,1)}
.ppl--js .ppl__card.is-on .ppl__txt{opacity:1;transform:none;max-width:440px;flex:0 0 440px;transition-delay:.18s,.18s,0s}
.ppl__h{margin:0 0 var(--s4);font-size:clamp(28px,1vw + 18px,36px);line-height:1.08;letter-spacing:var(--ls-h2);font-weight:var(--fw-disp);color:var(--fg);white-space:nowrap}
.ppl__txt .ppl__bio{margin:0;max-width:46ch;font-size:var(--fs-body);color:var(--fg-2)}
.ppl__txt .ppl__cv{margin:0;padding-top:var(--s5);max-width:46ch;font-size:var(--fs-sm)}
/* the open card names the person in its heading; under the photo only the role */
@media(min-width:901px){.ppl--js .ppl__card.is-on .ppl__id .ppl__name{visibility:hidden}}
.ppl--js .ppl__nav{margin-top:var(--s6)}
/* a closed card's bio is squeezed to zero width - it must not keep its (very tall) height */
@media(min-width:901px){.ppl--js .ppl__card{align-items:flex-start}.ppl--js .ppl__card:not(.is-on) .ppl__txt{max-height:0}}
.ppl__count{font-size:var(--fs-micro);color:var(--fg-4);font-variant-numeric:tabular-nums;min-width:3.5em;text-align:right}
@media(max-width:900px){
  .ppl--js .ppl__track{flex-direction:column}
  .ppl--js .ppl__card,.ppl--js .ppl__card.is-on{flex:none;flex-direction:column;gap:var(--s5)}
  .ppl__pick{flex:none;flex-direction:row;align-items:center}
  .ppl__pick .ppl__ph{width:72px}
  .ppl--js .ppl__txt{max-width:none;max-height:0;transform:none;transition:opacity .3s,max-height .45s ease}
  .ppl--js .ppl__card.is-on .ppl__txt{max-width:none;max-height:900px}
  .ppl__h{display:none}
}
@media (prefers-reduced-motion:reduce){.ppl--js .ppl__card,.ppl--js .ppl__txt,.ppl__pick .ppl__ph{transition:none}}

/* ══ TEST 2026-10-28: no section rules, no "01 Název" rows ══════════
   Revert = delete this whole block.                                   */
.spec{display:none}
.spec + .shead,.spec + .pil__anchor + .pil,.spec + .split{margin-top:0}
.phead{border-bottom:0}
.phead .eyebrow:has(> .ix){display:none}
.phead h1{margin-top:0}
.cta{border-top:0}
.disc{border-top:0}
.praxe{border-top:0;padding-top:0}
/* more air between blocks now that no rule separates them */
:root{--sec-py:clamp(96px, 60.3px + 9.14vw, 192px);--sec-py-tight:clamp(96px, 60.3px + 9.14vw, 192px)}
.disc{padding:clamp(64px,7vw,120px) 0}
.disc:first-child{padding-top:var(--s4)}
.praxe{margin-top:clamp(80px,8vw,136px)}
/* ══ END TEST ═══════════════════════════════════════════════════════ */

/* ══ MOBILE ═══════════════════════════════════════════════════════════
   Everything below sits inside max-width queries, so desktop (≥1121px)
   renders exactly as before.                                          */
.menu-btn{display:none}
@media(max-width:1120px){
  /* menu: a button in the header opens a full-width panel */
  .menu-btn{all:unset;box-sizing:border-box;display:grid;place-content:center;gap:6px;width:44px;height:44px;
    margin-right:-10px;cursor:pointer;border-radius:12px}
  .menu-btn span{display:block;width:20px;height:1.5px;background:var(--fg);border-radius:2px;
    transition:transform .25s cubic-bezier(.3,0,.2,1)}
  .menu-open .menu-btn span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-open .menu-btn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav--m{position:fixed;left:0;right:0;top:57px;z-index:79;overflow:visible;border-bottom:1px solid var(--line-2);
    -webkit-mask-image:none;mask-image:none;
    background:color-mix(in srgb,var(--bg) 90%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
  .menu-open .nav--m{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
  .nav--m ul{flex-direction:column;white-space:normal;padding:8px var(--inset) 16px}
  .nav--m li + li{border-top:1px solid var(--line)}
  .nav--m a{display:flex;align-items:center;min-height:52px;margin:0;padding:0;font-size:var(--fs-h3);
    letter-spacing:var(--ls-h3);color:var(--fg-2)}
  .nav--m a[aria-current="page"]{color:var(--fg)}
  .nav--m a[aria-current="page"]::after{content:'';width:6px;height:6px;border-radius:50%;margin-left:12px;background:var(--accent)}
}
@media(max-width:900px){
  /* two-column grids written inline (contact) stack */
  .grid > [style*="grid-column"]{grid-column:1 / -1 !important}
  #kontakt .grid{row-gap:var(--s10)}
  .grid{row-gap:var(--s8)}
  .dl{grid-template-columns:minmax(90px,auto) minmax(0,1fr)}

  /* pillar switch: one row showing the current pillar, expands to the list */
  .pil__tabs{position:relative;flex-direction:column !important;flex-wrap:nowrap !important;gap:0 !important;
    border:1px solid var(--line-2) !important;border-radius:12px;overflow:hidden;margin-bottom:var(--s6) !important;
    background:rgba(188,197,216,.03)}
  .pil__tab{display:none;padding:14px 48px 14px 16px;min-height:48px;box-sizing:border-box;width:100%;font-size:var(--fs-body)}
  .pil__tab::after{display:none}
  .pil__tab[aria-selected="true"]{display:flex;align-items:center;color:var(--fg)}
  .pil__tabs::after{content:'';position:absolute;right:18px;top:20px;width:8px;height:8px;pointer-events:none;
    border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(45deg);
    transition:transform .2s}
  .pil__tabs.is-open::after{transform:translateY(4px) rotate(-135deg)}
  .pil__tabs.is-open .pil__tab{display:flex;align-items:center}
  .pil__tabs.is-open .pil__tab + .pil__tab{border-top:1px solid var(--line)}
  .pil__tabs.is-open .pil__tab[aria-selected="true"]{background:rgba(149,173,216,.08)}
  .pil{padding:var(--s6) var(--s5)}
  .pil__more{margin-top:var(--s8)}
  .pil__intro{padding-top:0}
  .pil__panels .pil__grid{margin-top:var(--s8)}

  /* hero: the mark sits faintly behind the copy, top right */
  .hero::before,.hero__pulse{--hs:130vw;opacity:.2;background-size:130vw auto;background-position:-6vw 30px;
    -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 85%);mask-image:linear-gradient(to bottom,#000 50%,transparent 85%)}
  .hero__pulse{animation-name:heropulse-m}
}
@media(max-width:700px){.four,.four.four--3{grid-template-columns:minmax(0,1fr) !important}}
@media(max-width:600px){
  .sx__sql{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* statements: full-width rows instead of a ragged centred cloud */
  .log__b{width:100%}
  .shead--split .lede,.ppl__bio,.ppl__cv{max-width:none}
}
@media(max-width:1120px) and (prefers-reduced-motion:reduce){.nav--m,.menu-btn span{transition:none}}

/* ══ MOBILE: "Deset vět" folds into a dropdown (≤600px only) ══════════ */
.log__fold{display:none}
@media(max-width:600px){
  /* room inside the clipping box so a selected chip's ring and glow are not cut */
  .log--pick{position:relative;max-height:206px;overflow:hidden;padding:10px 6px;margin:-10px -6px 0;
    transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
  .log--pick::after{content:'';position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
    background:linear-gradient(transparent,var(--bg));transition:opacity .25s}
  .log--pick.is-open{max-height:1400px}
  .log--pick.is-open::after{opacity:0}
  .log__fold{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;min-height:48px;margin-top:var(--s3);border-radius:999px;cursor:pointer;
    border:1px solid var(--line-2);background:rgba(188,197,216,.04);color:var(--fg-2);font-size:var(--fs-sm)}
  .log__fold::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .25s}
  .log__fold[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .log__fold:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.log--pick,.log__fold::after{transition:none}}
}

/* ══ MOBILE: process demo shows one card at a time (≤600px only) ═══════ */
.flow__dots{display:none}
@media(max-width:600px){
  .flow .flow__steps{display:grid !important;grid-template-columns:minmax(0,1fr) !important}
  /* one stacked cell; cards lay out on their own (no shared subgrid rows here) */
  .flow .flow__steps > .step{grid-area:1 / 1 !important;display:flex !important;flex-direction:column;grid-template-rows:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .flow .flow__steps > .step:not(.is-shown){opacity:0;visibility:hidden;transform:translateX(16px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  .flow__dots{display:flex;justify-content:center;gap:2px;padding:0 16px 8px}
  .flow__dots button{all:unset;box-sizing:border-box;width:44px;height:28px;display:grid;place-items:center;cursor:pointer}
  .flow__dots button::before{content:'';width:8px;height:8px;border-radius:999px;background:var(--line-3);
    transition:width .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
  .flow__dots button[aria-current]::before{width:22px;background:var(--accent)}
  .flow__dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
  @media (prefers-reduced-motion:reduce){.flow .flow__steps > .step,.flow__dots button::before{transition:none}}
}

/* ══ MOBILE: pillar services as compact link rows (≤600px only) ════════ */
@media(max-width:600px){
  .pil__panels .pil__grid{row-gap:8px !important;margin-top:var(--s5) !important}
  /* select → intro: one small step instead of margin + row gap */
  .pil{row-gap:var(--s4) !important}
  .pil__tabs{margin-bottom:0 !important}
  .pil__svc{display:flex !important;align-items:center;min-height:56px;padding:12px 56px 12px 16px !important;
    border-radius:12px}
  .pil__svc .pil__type,.pil__svc .pil__d{display:none !important}
  .pil__svc h3{margin:0 !important;height:auto !important;min-height:0 !important;font-size:var(--fs-body);
    line-height:1.3;color:var(--fg)}
  .pil__svc h3 a::after{top:50% !important;right:12px !important;transform:translateY(-50%) !important;width:30px;height:30px}
  .pil__svc:hover h3 a::after,.pil__svc h3 a:focus-visible::after{transform:translateY(-50%) !important}
}

/* ══ MOBILE: people - an open bio is only as tall as its text (≤900px) ══
   On desktop the open bio has a 440px flex-basis for its width; in the
   stacked mobile column that basis turned into 440px of height.        */
@media(max-width:900px){
  .ppl--js .ppl__card .ppl__txt,.ppl--js .ppl__card.is-on .ppl__txt{flex:none !important}
  .ppl--js .ppl__card:not(.is-on){gap:0 !important}
  .ppl--js .ppl__card.is-on{padding-bottom:var(--s5)}
}

/* ══ MOBILE: phases as a vertical timeline (≤600px only) ══════════════ */
@media(max-width:600px){
  #pristup .flowx{display:block !important;position:relative;padding:0 0 0 30px;margin:var(--s8) 0 0 !important;overflow:visible}
  #pristup .flowx::before,#pristup .flowx::after{display:block !important;content:'';position:absolute;
    left:7px !important;right:auto !important;top:10px !important;bottom:24px;width:1px;height:auto !important}
  #pristup .flowx::before{background:var(--line-2)}
  #pristup .flowx::after{width:2px;left:6.5px !important;
    background:linear-gradient(180deg,var(--line-2) 0%,var(--accent) 50%,var(--line-2) 100%);
    transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.45,0,.2,1) .2s}
  #pristup .flowx[data-reveal-s="in"]::after{transform:scaleY(1)}
  #pristup .flowx__step{display:block;position:relative}
  #pristup .flowx__node{display:block !important;position:absolute;left:-30px;top:5px;margin:0}
  #pristup .flowx__card{display:grid !important;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:0 !important;align-items:baseline;
    position:relative;margin:0 !important;padding:0 0 var(--s6) !important;text-align:left !important;
    border:0 !important;background:none !important;box-shadow:none !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:1 !important;transform:none !important}
  #pristup .flowx__card:hover{box-shadow:none}
  #pristup .flowx__n{grid-column:1;font-size:var(--fs-sm);color:var(--accent);letter-spacing:0}
  #pristup .flowx__card h3{grid-column:2;margin:0;font-size:var(--fs-h3)}
  #pristup .flowx__d{grid-column:2 / -1;margin:var(--s2) 0 0}
  #pristup .flowx__out{display:none !important}
  @media (prefers-reduced-motion:reduce){#pristup .flowx::after{transform:scaleY(1);transition:none}}
}

/* ══ MOBILE: "Na čem pracujeme" as compact rows - name + status (≤600px) ══ */
@media(max-width:600px){
  #projekty .pane--table{padding:4px 16px}
  #projekty .dt tbody tr{display:flex !important;align-items:center;justify-content:space-between;gap:var(--s4);
    min-height:56px;padding:12px 0}
  #projekty .dt tbody tr:last-child{border-bottom:0}
  #projekty .dt td{padding:0 !important}
  #projekty .dt .c-desc{display:none !important}
  #projekty .dt .c-name{font-size:var(--fs-body)}
  #projekty .dt .r{flex:none;padding:0 !important;text-align:right;white-space:nowrap}
}

/* ══ MOBILE: contact form fields - label on top, input right under it (≤620px) ══ */
@media(max-width:620px){
  .form .field label,.form .field:has(textarea) label{padding:14px var(--s5) 0}
  .form .field input,.form .field textarea{padding:6px var(--s5) 14px}
  .form .field textarea{min-height:160px}
}

/* ══ MOBILE: hero call to action sits lower, flush left (≤600px) ══ */
@media(max-width:600px){
  .hero__cta{margin-top:var(--s12);flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero__cta .btn--ghost{padding-left:0}
}

/* ══ /sluzby: services index as a side menu that stays in view; the
   service on screen is marked with a lit line. Phones: a sticky
   one-row picker that opens the full list. ══ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.svc{scroll-margin-top:90px}
.svx a{text-decoration:none}
@media(min-width:1001px){
  .svlayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);column-gap:clamp(32px,4vw,64px);align-items:start}
  .svlayout > .svx{grid-column:2;grid-row:1}
  .svlayout > .discs,.svlayout > .pilxs{grid-column:1;grid-row:1}
  .svx{position:sticky;top:96px;display:flex !important;flex-direction:column;gap:2px;margin:var(--s4) 0 0;border:0 !important}
  .svx a{position:relative;display:block !important;padding:10px 0 10px 16px !important;border:0 !important}
  .svx a::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line-2);
    transition:background-color .25s,box-shadow .25s}
  .svx a span{display:none !important}
  .svx a b{display:block;font-weight:var(--fw-med);font-size:var(--fs-sm);line-height:1.3;color:var(--fg-3);transition:color .2s}
  .svx a:hover b{color:var(--fg)}
  .svx a.is-on b{color:var(--fg)}
  .svx a.is-on::before{background:var(--accent);box-shadow:0 0 12px rgba(149,173,216,.6)}
  .svx a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  .svlayout .disc.svc{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .svlayout .disc.svc:first-child{padding-top:var(--s4)}
}
@media(max-width:1000px){
  .svx{position:sticky;top:57px;z-index:20;display:flex !important;flex-direction:column;margin:0 0 var(--s6);
    border:1px solid var(--line-2) !important;border-radius:12px;overflow:hidden;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .svx a{display:none !important;padding:13px 48px 13px 16px !important;border:0 !important}
  .svx a span{display:none !important}
  .svx a b{font-weight:var(--fw-med);font-size:var(--fs-body);color:var(--fg)}
  .svx a.is-on,.svx:not(:has(.is-on)) .svx__grp:first-child a:nth-child(2){display:block !important}
  .svx::after{content:'';position:absolute;right:18px;top:19px;width:8px;height:8px;pointer-events:none;
    border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(45deg);transition:transform .2s}
  .svx.is-open::after{transform:translateY(4px) rotate(-135deg)}
  .svx.is-open a{display:block !important}
  .svx.is-open a + a{border-top:1px solid var(--line) !important}
  .svx.is-open a.is-on{background:rgba(149,173,216,.08)}
}

/* ══ SERVICES = pillars + services (/sluzby) ═════════════════════════
   Each pillar is a chapter: a glass intro card, then its services. The
   side menu groups the services under their pillar.                    */
.pilx__jump{margin-top:var(--s6);gap:4px 24px}
.pilx{scroll-margin-top:90px}
.pilx + .pilx{margin-top:clamp(72px,9vw,140px)}
.pilx__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);column-gap:clamp(24px,3.4vw,56px);
  padding:clamp(24px,3vw,44px)}
.pilx__n{margin:0 0 var(--s3);font-size:var(--fs-sm);color:var(--accent);font-variant-numeric:tabular-nums}
.pilx__title h2{margin:0;font-size:clamp(32px,2.2vw + 14px,48px);line-height:1.05;letter-spacing:var(--ls-h2)}
.pilx__txt .lede{margin:0;max-width:52ch;color:var(--fg)}
.pilx__txt .disc__body{margin-top:var(--s4);color:var(--fg-3);max-width:62ch}
.pilx__txt .mini{margin:var(--s6) 0 var(--s3)}
.pilx__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s6)}
.pilx__list li + li{margin-top:0 !important}
.pilx .discs{margin-top:var(--s4)}
.pilx .disc.svc h2{font-size:clamp(26px,1.2vw + 16px,34px)}
.pilx .disc.svc:first-child{padding-top:clamp(48px,5vw,80px) !important}
@media(max-width:900px){
  .pilx__head{grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
  .pilx__list{grid-template-columns:minmax(0,1fr)}
}
/* side menu: pillar heading, its services under it */
.svx__grp{display:flex;flex-direction:column}
.svx__p{display:block}
@media(min-width:1001px){
  .svx{gap:var(--s4) !important}
  .svx__grp{gap:2px}
  .svx a.svx__p{padding:0 0 4px !important;min-height:0 !important;line-height:1.3}
  .svx a.svx__p::before{display:none}
  .svx a.svx__p span{display:block !important;font-size:var(--fs-micro) !important;color:var(--fg-4) !important;
    letter-spacing:0;transition:color .2s}
  .svx__grp.is-in a.svx__p span,.svx a.svx__p:hover span{color:var(--accent) !important}
}
@media(max-width:1000px){
  .svx__grp{display:contents}
  .svx a.svx__p{display:none !important}
  .svx.is-open a.svx__p{display:block !important;padding:12px 16px 4px !important;pointer-events:none}
  .svx.is-open a.svx__p span{display:block !important;font-size:var(--fs-micro);color:var(--fg-4)}
  .svx.is-open .svx__grp:first-child a.svx__p{border-top:0 !important}
  .svx.is-open a.svx__p + a{border-top:0 !important}
}

/* ── /sluzby pillar intro v2: no card, no number; a small animated mark
   under each pillar heading (drawn in once it is on screen) ── */
.pilx__head{padding:0 0 var(--s4);border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.pilx__title{display:flex;flex-direction:column;gap:var(--s6)}
.pxa{display:block;width:min(100%,240px);height:auto;overflow:visible}
.pxa path,.pxa line{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* AI: a small network, signal travelling through it */
.pxa--ai .pxa__edges path{stroke:var(--line-3);stroke-width:1.2;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease .1s}
.pxa--ai .pxa__nodes circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pxa--ai .pxa__nodes circle:nth-child(2),.pxa--ai .pxa__nodes circle:nth-child(3),.pxa--ai .pxa__nodes circle:nth-child(4){transition-delay:.35s}
.pxa--ai .pxa__nodes circle:nth-child(5),.pxa--ai .pxa__nodes circle:nth-child(6){transition-delay:.7s}
.pxa--ai .pxa__nodes circle:nth-child(7){transition-delay:1s;fill:var(--accent)}
.pxa__pulse{fill:#fff;filter:drop-shadow(0 0 6px var(--accent));opacity:0;transition:opacity .4s 1.4s}
/* Data: bars grow, a trend line draws over them */
.pxa__axis{stroke:var(--line-3);stroke-width:1}
.pxa--data .pxa__bars rect{fill:rgba(149,173,216,.22);stroke:rgba(149,173,216,.55);stroke-width:1;rx:3;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pxa--data .pxa__bars rect:nth-child(2){transition-delay:.1s}.pxa--data .pxa__bars rect:nth-child(3){transition-delay:.2s}
.pxa--data .pxa__bars rect:nth-child(4){transition-delay:.3s}.pxa--data .pxa__bars rect:nth-child(5){transition-delay:.4s}
.pxa__trend{stroke:var(--accent);stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.2s ease .7s}
/* Leadership: three options, one is chosen */
.pxa__opt{stroke:var(--line-3);stroke-width:1.2;stroke-dasharray:4 5}
.pxa__pick{stroke:var(--accent);stroke-width:2;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1.1s ease .5s}
.pxa__dot{fill:var(--accent)}
.pxa__end{fill:var(--bg);stroke:var(--line-3);stroke-width:1.2}
.pxa__win{fill:var(--bg);stroke:var(--accent);stroke-width:1.6;transition:fill .4s 1.5s}
/* Software: blocks stack into a structure */
.pxa--soft .pxa__blocks rect{fill:rgba(149,173,216,.12);stroke:rgba(149,173,216,.6);stroke-width:1.2;opacity:0;transform:translateY(-14px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pxa--soft .pxa__blocks rect:nth-child(2){transition-delay:.15s}.pxa--soft .pxa__blocks rect:nth-child(3){transition-delay:.3s}
.pxa--soft .pxa__blocks rect:nth-child(4){transition-delay:.5s}.pxa--soft .pxa__blocks rect:nth-child(5){transition-delay:.65s}
.pxa--soft .pxa__blocks rect:nth-child(6){transition-delay:.85s;fill:rgba(149,173,216,.35);stroke:var(--accent)}
/* played when the intro comes into view (motion.js sets data-reveal-s="in") */
.pilx__head[data-reveal-s="in"] .pxa--ai .pxa__edges path,
.pilx__head[data-reveal-s="in"] .pxa__trend,
.pilx__head[data-reveal-s="in"] .pxa__pick{stroke-dashoffset:0}
.pilx__head[data-reveal-s="in"] .pxa--ai .pxa__nodes circle{opacity:1;transform:none}
.pilx__head[data-reveal-s="in"] .pxa__pulse{opacity:1}
.pilx__head[data-reveal-s="in"] .pxa--data .pxa__bars rect{transform:none}
.pilx__head[data-reveal-s="in"] .pxa__win{fill:var(--accent)}
.pilx__head[data-reveal-s="in"] .pxa--soft .pxa__blocks rect{opacity:1;transform:none}
.js .pilx__head[data-reveal-s]{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){
  .pxa *{transition:none !important;stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important}
  .pxa__pulse{display:none}
}
@media(max-width:900px){.pilx__title{flex-direction:row;align-items:center;justify-content:space-between}.pxa{width:150px}}

/* pillar jump links under the page title: plain words split by thin
   rules; hover draws the accent line under the word (like the main nav) */
.pilx__jump{gap:0 !important;flex-wrap:wrap}
.pilx__jump a{position:relative;padding:6px 18px;color:var(--fg-2) !important;font-weight:var(--fw-med)}
.pilx__jump a:first-child{padding-left:0}
.pilx__jump a + a{border-left:1px solid var(--line-2)}
.pilx__jump a::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:1.5px;background:var(--grad-active);
  transform:scaleX(0);transition:transform .22s cubic-bezier(.3,0,.2,1)}
.pilx__jump a:first-child::after{left:0}
.pilx__jump a:hover{color:var(--fg) !important;background:none !important;-webkit-background-clip:border-box;background-clip:border-box}
.pilx__jump a:hover::after{transform:scaleX(1)}

/* ══ nav: "Projekty" opens a small glass menu of projects (hover / focus) ══ */
.nav__dd{position:relative;display:flex;align-items:stretch}
.nav__menu{position:absolute;left:50%;top:100%;z-index:90;min-width:200px;padding:6px;margin-top:6px;
  display:flex;flex-direction:column;gap:2px;border-radius:14px;border:1px solid var(--line-2);
  /* opaque: a nested backdrop-filter inside the blurred header does not
     composite reliably over the hero */
  background:var(--bg-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -20px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.nav__menu::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}   /* hover bridge */
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .18s ease,transform .18s ease}
.nav__menu a{display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px !important;
  border-radius:10px;color:var(--fg-2);text-decoration:none;white-space:nowrap}
.nav__menu a::after{display:none !important}
.nav__menu a b{font-weight:var(--fw-med);font-size:var(--fs-sm);color:var(--fg)}
.nav__menu a span{font-size:var(--fs-micro);color:var(--fg-4)}
.nav__menu a:hover,.nav__menu a:focus-visible{background:rgba(149,173,216,.08)}
.nav__menu a:hover b{color:#fff}
.nav__menu .nav__all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;flex-direction:row;
  gap:6px;font-size:var(--fs-sm);color:var(--accent)}
/* mobile menu: projects listed under "Projekty", indented */
.nav--m__sub a{padding-left:18px !important;font-size:var(--fs-body) !important;color:var(--fg-3) !important;min-height:40px !important}
.nav--m li.nav--m__sub{border-top:0 !important}
@media (prefers-reduced-motion:reduce){.nav__menu{transition:none}}

/* ══ APPOLINO: animated data flow (/projekty) ═════════════════════════
   One stage with a fixed aspect; an SVG (viewBox 1000×380) draws the
   links, the HTML chips sit on the same coordinates in %.            */
.apf__head{text-align:center}
.apf__head h2,.apf__head .lede{margin-left:auto;margin-right:auto}
.apf__head .lede{margin-top:var(--s3)}
.apf__soon{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--s4);padding:5px 12px;border-radius:999px;
  border:1px solid var(--line-2);font-size:var(--fs-micro);color:var(--fg-2)}
.apf__soon i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:apfblink 1.8s ease-in-out infinite}
@keyframes apfblink{50%{opacity:.35}}
.apf{position:relative;aspect-ratio:1000/380;margin-top:var(--s10);overflow:hidden}
.apf__lines{position:absolute;inset:0;width:100%;height:100%}
.apf__paths path{fill:none;stroke:var(--line-3);stroke-width:1.4;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.2s ease}
.apf__paths path[id^="apf-o"]{transition-delay:.9s}
.apf__dots circle{fill:#fff;filter:drop-shadow(0 0 5px var(--accent));opacity:0;transition:opacity .4s 1.8s}
.apf__chip{position:absolute;transform:translateY(-50%);top:calc(var(--y) / 380 * 100%);display:flex;align-items:center;
  height:clamp(34px,4vw,46px);padding:0 clamp(12px,1.4vw,18px);border-radius:12px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--fg);font-size:clamp(12px,1.1vw,15px);white-space:nowrap;
  opacity:0;translate:-10px 0;transition:opacity .4s ease,translate .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .12s)}
.apf__src{left:3%;width:20.2%}
.apf__more{color:var(--fg-4);border-style:dashed;background:none}
.apf__out{left:76.8%;width:20.2%;translate:10px 0;transition-delay:calc(1.6s + var(--i) * .2s)}
.apf__ready{border-color:rgba(149,173,216,.6);box-shadow:0 0 0 3px rgba(149,173,216,.08)}
.apf__ready::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;box-shadow:0 0 8px var(--accent)}
.apf__core{position:absolute;left:38.6%;width:22.8%;top:calc(95 / 380 * 100%);height:calc(150 / 380 * 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.6vw,8px);border-radius:14px;
  background:var(--tile-bg);box-shadow:var(--tile-rim),0 18px 44px -18px rgba(62,90,142,.9);color:#fff;
  opacity:0;scale:.92;transition:opacity .5s ease .7s,scale .6s cubic-bezier(.2,.8,.2,1) .7s}
.apf__core b{font-weight:var(--fw-disp);font-size:clamp(18px,2vw,28px);letter-spacing:var(--ls-h3)}
.apf__mark{width:clamp(20px,2.2vw,30px);height:auto;fill:none;stroke:#DCE4F2;stroke-width:1.5;stroke-linejoin:round}
.apf__tags{display:flex;gap:6px}
.apf__tags em{font-style:normal;font-size:clamp(10px,.9vw,12px);padding:2px 8px;border-radius:999px;border:1px solid rgba(220,228,242,.35);color:#DCE4F2}
.apf__meta{position:absolute;left:38.6%;width:22.8%;top:calc(270 / 380 * 100%);height:calc(64 / 380 * 100%);
  display:grid;grid-template-columns:auto 1fr;grid-auto-rows:1fr;column-gap:10px;row-gap:4px;align-items:center;padding:8px 12px;
  border-radius:10px;border:1px dashed var(--line-3);opacity:0;transition:opacity .4s 1.2s}
.apf__meta span{grid-row:1 / span 4;font-size:clamp(10px,.9vw,12px);color:var(--fg-3)}
.apf__meta i{display:block;height:3px;border-radius:3px;background:rgba(149,173,216,.45);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.apf__meta i:nth-of-type(1){width:90%;transition-delay:1.4s}.apf__meta i:nth-of-type(2){width:60%;transition-delay:1.6s}
.apf__meta i:nth-of-type(3){width:75%;transition-delay:1.8s}.apf__meta i:nth-of-type(4){width:45%;transition-delay:2s}
/* played once in view */
.apf[data-reveal-s="in"] .apf__paths path{stroke-dashoffset:0}
.apf[data-reveal-s="in"] .apf__dots circle{opacity:1}
.apf[data-reveal-s="in"] .apf__chip{opacity:1;translate:0 0}
.apf[data-reveal-s="in"] .apf__more{opacity:.8}
.apf[data-reveal-s="in"] .apf__core{opacity:1;scale:1}
.apf[data-reveal-s="in"] .apf__meta{opacity:1}
.apf[data-reveal-s="in"] .apf__meta i{transform:none}
.js .apf[data-reveal-s]{transform:none !important;opacity:1 !important}
.apf__facts{margin-top:var(--s10)}
@media (prefers-reduced-motion:reduce){
  .apf *{transition:none !important;animation:none !important}
  .apf .apf__paths path{stroke-dashoffset:0}.apf .apf__chip,.apf .apf__core,.apf .apf__meta{opacity:1;translate:0 0;scale:1}
  .apf .apf__meta i{transform:none}.apf__dots{display:none}
}
/* phones: sources → Appolino → outputs, stacked */
@media(max-width:800px){
  .apf{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px 16px;overflow:visible}
  .apf__lines{display:none}
  .apf__chip,.apf__core,.apf__meta{position:relative;left:auto;top:auto;width:auto;height:auto;transform:none}
  .apf__chip{height:44px;font-size:var(--fs-sm)}
  .apf__core{padding:18px;margin:14px 0 4px}
  .apf__core::before,.apf__meta + .apf__out::before{content:'';position:absolute;left:50%;top:-14px;width:1.5px;height:12px;background:var(--accent)}
  .apf__meta{grid-auto-rows:6px;margin-bottom:14px}
  .apf__meta span{grid-row:1 / span 4}
  .apf__meta + .apf__out{margin-top:0}
}

/* ══ /projekty overview: one card per project; the main two open their
   own pages, the others link out ══ */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;gap:var(--s3);min-height:220px;padding:clamp(22px,2.4vw,32px);
  border-radius:var(--r);border:1px solid rgba(188,197,216,.12);
  background:linear-gradient(160deg,rgba(188,197,216,.06),rgba(188,197,216,.02) 45%,rgba(188,197,216,.04));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pcard:hover{border-color:rgba(149,173,216,.4);transform:translateY(-2px);box-shadow:0 20px 44px -26px rgba(62,90,142,.8)}
.pcard__st{margin:0;align-self:flex-start;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);
  font-size:var(--fs-micro);color:var(--fg-3)}
.pcard__name{margin:var(--s2) 0 0;font-size:clamp(28px,1.4vw + 16px,38px);line-height:1.05;letter-spacing:var(--ls-h2);font-weight:var(--fw-disp)}
.pcard__name a{color:var(--fg);text-decoration:none}
.pcard__name a::before{content:'';position:absolute;inset:0}            /* whole card is the link */
.pcard__d{margin:0;max-width:44ch;color:var(--fg-3)}
.pcard__go{margin:auto 0 0;padding-top:var(--s4);font-weight:var(--fw-med);color:var(--accent)}
.pcard__go span{display:inline-block;transition:transform .2s}
.pcard:hover .pcard__go span{transform:translateX(4px)}
.pcard--ext:hover .pcard__go span{transform:translate(2px,-2px)}
.pcard:not(.pcard--ext){background:linear-gradient(160deg,rgba(149,173,216,.10),rgba(62,90,142,.06) 50%,rgba(188,197,216,.03))}
@media(max-width:700px){.pcards{grid-template-columns:minmax(0,1fr)}.pcard{min-height:0}}
@media (prefers-reduced-motion:reduce){.pcard,.pcard__go span{transition:none}.pcard:hover{transform:none}}
/* project pages: breadcrumb above the title */
.phead .crumb{color:var(--fg-3);text-decoration:none}
.phead .crumb:hover{color:var(--fg)}

/* /sluzby side nav, compact: five short section markers */
@media(min-width:1001px){
  .svlayout:has(.svx--mini){grid-template-columns:minmax(0,1fr) 120px}
  .svx--mini{gap:2px !important}
  .svx--mini a b{font-size:var(--fs-sm)}
}
.svx--mini .svx__grp,.svx--mini .svx__p{display:none !important}

/* /sluzby side nav v3: no column at all - a slim stack of bubbles pinned to
   the right edge of the screen. The current section is a filled pill with its
   name; the others are small dots that open into pills on hover. */
@media(min-width:1001px){
  .svlayout:has(.svx--mini){display:block}
  .svx.svx--mini{position:fixed;right:clamp(12px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:30;
    display:flex !important;flex-direction:column;align-items:flex-end;gap:8px !important;margin:0}
  .svx--mini a{position:relative;display:flex !important;flex-direction:row !important;align-items:center;justify-content:flex-end;
    height:28px !important;min-height:0 !important;padding:0 !important;border-radius:999px}
  .svx--mini a::before{display:none !important}
  .svx--mini a b{display:block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;
    padding:0;height:28px !important;font-size:var(--fs-micro) !important;line-height:28px !important;color:var(--fg-2) !important;
    transition:max-width .3s cubic-bezier(.2,.8,.2,1),opacity .2s,padding .3s}
  .svx--mini a::after{content:'';flex:none;width:10px;height:10px;margin-right:9px;border-radius:50%;
    border:1.5px solid var(--fg-4);background:var(--bg);transition:background-color .2s,border-color .2s}
  /* hover over the stack - or the page still at the top - shows every name */
  .svx--mini.is-full a{background:var(--bg-2);border:1px solid var(--line-2)}
  .svx--mini.is-full a b{max-width:140px;opacity:1;padding:0 4px 0 12px}
  .svx--mini:hover a{background:var(--bg-2);border:1px solid var(--line-2)}
  .svx--mini:hover a b{max-width:140px;opacity:1;padding:0 4px 0 12px}
  .svx--mini a:hover b{color:var(--fg) !important}
  /* current section: filled blue pill with its name */
  .svx--mini a.is-on{background:var(--tile-bg);box-shadow:var(--tile-rim),0 8px 20px -10px rgba(62,90,142,.9);border:0}
  .svx--mini a.is-on b{max-width:140px;opacity:1;padding:0 4px 0 12px;color:#fff !important}
  .svx--mini a.is-on::after{background:#fff;border-color:#fff;width:8px;height:8px;margin-right:10px}
  .svx--mini a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.svx--mini a b{transition:none}}