/* =====================================================================
   tehnik.cz — homepage
   Technický blueprint × editorial magazín. Jen pro index.html;
   podstránky (ods, fly, rumpold) běží dál na style.css.
   Jedna akcentní barva = signál (CTA, status, datový bod). Nic víc.
   ===================================================================== */

:root {
  --paper: #F2F0EA;
  --paper-2: #E7E4DB;
  --ink: #101010;
  --ink-2: #1A1A18;
  --muted: #66655E;
  --muted-inv: #9C9A91;
  --line: rgba(16, 16, 16, .16);
  --line-inv: rgba(242, 240, 234, .16);
  --accent: #FF5A2A;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-display: clamp(4.5rem, 9vw, 10rem);
  --fs-h1: clamp(3.8rem, 7vw, 7.5rem);
  --fs-h2: clamp(2.5rem, 5vw, 5.4rem);
  --fs-body-lg: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-label: .72rem;

  --page-x: clamp(20px, 4vw, 72px);
  --max: 1700px;
  --edge: max(var(--page-x), calc((100% - var(--max)) / 2));

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: clamp(3rem, 5vw, 6rem);
  --space-xl: clamp(6rem, 12vw, 14rem);

  --radius-sm: 2px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --head-h: 64px;
}

/* ---------- základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; line-height: 1.5; }
.wrap { width: min(100% - 2 * var(--page-x), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { left: 8px; }

.dot { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none; }
.live .dot, .state--live .dot, .hero-log .dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* štítek sekce: [01] SLUŽBY + pravítko */
.kicker { display: flex; align-items: center; gap: .9em; color: var(--ink); margin-bottom: var(--space-md); }
.kicker span { background: var(--ink); color: var(--paper); padding: .2em .55em; letter-spacing: .08em; }
.kicker::after {
  content: ""; flex: 1; height: 7px; max-width: 360px; opacity: .55;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat,
              linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
}

/* zvýraznění = akcent jako fix, ne jako barva písma */
.acc { background: var(--accent); color: var(--ink); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.acc-u { background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% .12em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* řádkový reveal velké typografie — přesah kvůli háčkům nad verzálkami */
.ln { display: block; overflow: hidden; padding-top: .26em; margin-top: -.26em; }
.ln > span { display: inline-block; }

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font); font-weight: 800; font-size: 1rem; font-stretch: 92%;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  padding: 1.05rem 1.45rem; border-radius: var(--radius-sm);
  transition: background .2s, color .2s, transform .2s var(--ease-out);
}
.btn span { transition: transform .25s var(--ease-out); }
.btn:hover span { transform: translateX(4px); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--ink); color: var(--accent); }
.btn-line { padding-inline: 0; border-radius: 0; box-shadow: inset 0 -2px 0 currentColor; }
.btn-line:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- pozadí: jemná mřížka jen na vybraných sekcích ---------- */
.grid-lines { background: linear-gradient(to right, rgba(16,16,16,.05) 1px, transparent 1px) 0 0 / 80px 100% var(--paper); }
.blueprint {
  background:
    linear-gradient(to right, rgba(16,16,16,.07) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(to bottom, rgba(16,16,16,.07) 1px, transparent 1px) 0 0 / 200px 200px,
    linear-gradient(to right, rgba(16,16,16,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(16,16,16,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--paper);
}

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv .ln > span, .js .rv.ln > span { transform: translateY(105%); transition: transform 1s var(--ease-out); }
.js .rv.in .ln > span { transform: none; }
.js .rv .ln:nth-child(2) > span { transition-delay: .08s; }
.js .rv .ln:nth-child(3) > span { transition-delay: .16s; }
.js .rv .ln:nth-child(4) > span { transition-delay: .24s; }
.js .case-claim.rv, .js .manifest-h.rv { transform: none; }

/* =====================================================================
   HLAVIČKA
   ===================================================================== */
.head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--page-x);
  transition: background .25s, box-shadow .25s;
}
.head.is-stuck { background: rgba(242, 240, 234, .94); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none; font-stretch: 95%; }
.brand b { color: var(--accent); }
.menu { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); margin-left: auto; }
.menu a { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; position: relative; padding-block: 6px; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right .25s var(--ease-out); }
.menu a:hover::after { right: 0; }
.head-cta {
  font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent); color: var(--ink); text-decoration: none; padding: .7rem 1rem; white-space: nowrap;
  transition: background .2s, color .2s;
}
.head-cta:hover { background: var(--ink); color: var(--accent); }
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform .25s var(--ease-out), top .25s; }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span { background: var(--paper); }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; grid-template-rows: auto 1fr auto auto auto; align-items: end;
  padding: calc(var(--head-h) + 18px) var(--page-x) 22px;
}
.hero::before { /* technická síť jen za portrétem */
  content: ""; position: absolute; inset: 0 0 0 52%;
  background:
    linear-gradient(to right, rgba(16,16,16,.07) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(16,16,16,.07) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
          mask-image: linear-gradient(to right, transparent, #000 30%);
  pointer-events: none;
}
.hero-meta {
  position: relative; z-index: 3; align-self: start;
  display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--ink);
}
.hero-meta > span:first-child { color: var(--ink); }
.hero-log { display: inline-flex; align-items: center; gap: .6em; margin-left: auto; color: var(--ink); }
.hero-log b { font-weight: 500; min-width: 25ch; }
.hero-log b.flip { animation: flip .35s var(--ease-out); }
.hero-log em { border: 1px solid currentColor; padding: 0 .4em; font-size: .6rem; opacity: .7; }
@keyframes flip { from { opacity: 0; transform: translateY(6px); } }

.hero-portrait {
  position: absolute; z-index: 1; right: clamp(-40px, -2vw, 0px); bottom: 0;
  height: min(88svh, 1000px); aspect-ratio: 663 / 1004; max-width: 46vw;
}
.hero-portrait { pointer-events: none; }
.hp-frame { position: absolute; inset: 0; }
.hp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.hp-base { filter: grayscale(1) contrast(1.06) brightness(1.02); animation: hpBase 7s steps(1) infinite; }

/* --- SKEN: pás, který jede přes postavu a ukazuje ji jako signál --- */
.hp-scan {
  clip-path: inset(0 0 100% 0);
  animation: hpScan 5s cubic-bezier(.5, 0, .5, 1) infinite;
}
.hp-beam {
  position: absolute; left: -8%; right: -8%; height: 2px; top: 0; background: var(--accent);
  box-shadow: 0 -30px 40px -10px rgba(255, 90, 42, .28);
  opacity: 0; animation: hpBeam 5s cubic-bezier(.5, 0, .5, 1) infinite;
}
.hp-beam::after { /* odečet pozice na lince */
  content: "SCAN ▸"; position: absolute; right: 0; top: -18px;
  font: 500 .58rem/1 var(--mono); letter-spacing: .14em; color: var(--accent);
}
@keyframes hpScan {
  0%   { clip-path: inset(-16% 0 100% 0); }
  62%  { clip-path: inset(100% 0 -16% 0); }
  100% { clip-path: inset(100% 0 -16% 0); }
}
@keyframes hpBeam {
  0%   { top: 0; opacity: 0; }
  4%   { opacity: 1; }
  58%  { opacity: 1; }
  62%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

/* --- RASTER jen přes postavu (maska = alfa kanál fotky) --- */
.hp-raster {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(16,16,16,.16) 0 1px, transparent 1px 4px);
  -webkit-mask: url(podklady/jt-cutout.webp) bottom / contain no-repeat;
          mask: url(podklady/jt-cutout.webp) bottom / contain no-repeat;
  mix-blend-mode: multiply; opacity: .55;
}

/* --- GLITCH: každých 7 s se portrét rozsekne a na okamžik zmizí --- */
.hp-g1, .hp-g2 { opacity: 0; }
.hp-g1 { clip-path: inset(18% 0 64% 0); animation: hpG1 7s steps(1) infinite; }
.hp-g2 { filter: grayscale(1) invert(1) contrast(1.4); mix-blend-mode: multiply; clip-path: inset(52% 0 33% 0); animation: hpG2 7s steps(1) infinite; }
@keyframes hpBase {
  0%, 86% { opacity: 1; transform: none; }
  87% { opacity: 1; transform: translateX(-7px); }
  88% { opacity: .15; transform: translateX(5px); }
  89% { opacity: 0; }
  91% { opacity: 1; transform: translateX(-2px); }
  92%, 100% { opacity: 1; transform: none; }
}
@keyframes hpG1 {
  0%, 86% { opacity: 0; transform: none; }
  87% { opacity: 1; transform: translateX(16px); clip-path: inset(18% 0 64% 0); }
  88% { opacity: 1; transform: translateX(-22px); clip-path: inset(30% 0 55% 0); }
  89% { opacity: 1; transform: translateX(9px); clip-path: inset(8% 0 80% 0); }
  91%, 100% { opacity: 0; }
}
@keyframes hpG2 {
  0%, 87% { opacity: 0; transform: none; }
  88% { opacity: .9; transform: translateX(-14px); clip-path: inset(52% 0 33% 0); }
  89% { opacity: .9; transform: translateX(20px); clip-path: inset(66% 0 20% 0); }
  90% { opacity: .9; transform: translateX(-6px); clip-path: inset(40% 0 48% 0); }
  91%, 100% { opacity: 0; }
}

/* --- ODEČET, ČÁROVÝ A QR KÓD --- */
.hp-read { position: absolute; top: 35%; left: 30%; background: var(--ink); color: var(--accent); padding: 4px 8px; font-size: .62rem; white-space: nowrap; }
.hp-read b { font-weight: 500; }
.hp-read::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6em; background: var(--accent); animation: pulse .7s steps(1) infinite; }
.hp-bar { position: absolute; top: 6%; left: 80%; height: 30%; width: 30px; display: flex; flex-direction: column; align-items: center; }
.hp-bar img { width: 100%; height: 100%; object-fit: fill; position: static; }
.hp-bar i { font-style: normal; font-size: .5rem; writing-mode: vertical-rl; margin-top: 6px; color: var(--ink); letter-spacing: .2em; }
.hp-qr { position: absolute; top: 25%; right: 100%; margin-right: -8%; pointer-events: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-decoration: none; }
.hp-qr img { width: clamp(64px, 5.6vw, 92px); height: auto; background: var(--paper); padding: 5px; outline: 1px solid var(--ink); image-rendering: pixelated; }
.hp-qr span { font-size: .56rem; color: var(--ink); }
.hp-qr:hover img { outline-color: var(--accent); outline-width: 2px; }
.hp-qr::after { /* rohy kolem QR = zaměřovač */
  content: ""; position: absolute; right: -8px; top: -8px; width: calc(100% + 16px); height: calc(clamp(64px, 5.6vw, 92px) + 26px);
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 10px 1px, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 10px 1px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 10px 1px, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 10px 1px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 10px;
  background-repeat: no-repeat; pointer-events: none;
}
.cross { animation: crossLock 7s steps(1) infinite; }
@keyframes crossLock { 0%, 86% { opacity: 1; } 87% { opacity: 0; } 88% { opacity: 1; } 89% { opacity: 0; } 92%, 100% { opacity: 1; } }
.hero.is-paused .hero-portrait *, .hero.is-paused .hero-portrait *::before, .hero.is-paused .hero-portrait *::after { animation-play-state: paused; }
.anno { position: absolute; display: flex; flex-direction: column; gap: 2px; color: var(--ink); white-space: nowrap; }
.anno span { color: var(--muted); font-size: .6rem; }
.anno::before { content: ""; position: absolute; background: var(--ink); }
.anno-a { top: 13%; right: 100%; margin-right: -6%; padding-right: 58px; text-align: right; }
.anno-a::before { right: 0; top: .9em; width: 50px; height: 1px; }
.anno-b, .anno-c { right: 100%; margin-right: -14%; padding-right: 58px; text-align: right; }
.anno-b { top: 47%; }
.anno-c { top: 66%; margin-right: -20%; }
.anno-b::before, .anno-c::before { right: 0; top: .9em; width: 50px; height: 1px; }
.cross { /* rámeček měření kolem obličeje */
  position: absolute; top: 3%; left: 30%; width: 40%; height: 31%;
  --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat;
}

.hero-title {
  position: relative; z-index: 2; grid-row: 3;
  font-size: clamp(4.2rem, min(11vw, 16.5svh), 12rem); line-height: .93; letter-spacing: -.045em;
  font-weight: 800; font-stretch: 88%; text-transform: uppercase;
  margin: .34em 0 clamp(18px, 3vh, 36px) -.04em;
}
.hero-title b { color: var(--accent); }
.hero-title .ln > span { animation: rise 1s var(--ease-out) both; }
.hero-title .ln:nth-child(2) > span { animation-delay: .07s; }
.hero-title .ln:nth-child(3) > span { animation-delay: .14s; }
.hero-title .ln:nth-child(4) > span { animation-delay: .21s; }
@keyframes rise { from { transform: translateY(105%); } }

.hero-foot { position: relative; z-index: 3; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; align-items: end; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.hero-free { flex-basis: 100%; color: var(--muted); display: flex; align-items: center; gap: .6em; }
.hero-free::before { content: ""; width: 7px; height: 7px; background: var(--accent); }

.pipe { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink); color: var(--paper); }
.pipe li { padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line-inv); }
.pipe li:first-child { border-left: 0; }
.pipe b { font-weight: 500; color: var(--accent); }
.pipe span { color: var(--muted-inv); text-transform: none; letter-spacing: .02em; font-size: .74rem; }
.pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-inv); }
.pipe-dot { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--accent); animation: travel 6s linear infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 7px); } }

.hero-trust { position: relative; z-index: 3; grid-row: 5; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.hero-trust span { color: var(--muted); }
.hero-trust a { text-decoration: none; }
.hero-trust a:hover { color: var(--accent); }

/* =====================================================================
   MANIFEST — „Neprodávám software“
   ===================================================================== */
.manifest { background: var(--ink); color: var(--paper); padding-block: var(--space-xl) var(--space-lg); }
.manifest .kicker { color: var(--paper); }
.manifest .kicker span { background: var(--paper); color: var(--ink); }
.manifest-h {
  font-size: clamp(3.4rem, 10.5vw, 13rem); line-height: .93; letter-spacing: -.05em;
  font-weight: 800; font-stretch: 85%; text-transform: uppercase; margin-left: -.04em;
}
.manifest-h .ln-acc { color: var(--accent); }
.manifest-h .ln:nth-child(3) { margin-left: .9em; }
.manifest-h .ln:nth-child(4) { margin-left: .9em; }

.log { margin-top: var(--space-lg); }
.log-head, .log-row { display: grid; grid-template-columns: 90px minmax(0, 1.25fr) 64px minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.log-head { color: var(--muted-inv); padding-bottom: 10px; }
.log-row { padding-block: clamp(1.2rem, 2.4vw, 2rem); border-top: 1px solid var(--line-inv); text-decoration: none; transition: background .25s; }
.log-row:last-child { border-bottom: 1px solid var(--line-inv); }
.log-no { color: var(--muted-inv); }
.log-q { font-size: clamp(1.2rem, 2vw, 1.9rem); line-height: 1.2; color: var(--muted-inv); letter-spacing: -.01em; }
.log-arrow { font-size: clamp(1.4rem, 2.2vw, 2.2rem); color: var(--accent); transition: transform .3s var(--ease-out); }
.log-a { font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.log-row:hover .log-arrow { transform: translateX(10px); }
.log-row:hover .log-q { color: var(--paper); }

/* =====================================================================
   HLAVIČKY SEKCÍ
   ===================================================================== */
section { position: relative; }
.sec-head { margin-bottom: var(--space-lg); }
.sec-h { font-size: var(--fs-h2); line-height: .95; letter-spacing: -.04em; font-weight: 800; font-stretch: 92%; max-width: 16ch; }
.sec-h em { color: var(--muted); }
.sec-lead { font-size: var(--fs-body-lg); line-height: 1.45; max-width: 44ch; color: var(--ink-2); }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: end; }
.sec-head--split .kicker { grid-column: 1 / -1; }

/* =====================================================================
   SLUŽBY
   ===================================================================== */
.services { padding-block: var(--space-xl) var(--space-lg); }
.svc {
  display: grid; grid-template-columns: clamp(70px, 9vw, 150px) minmax(0, 1fr) minmax(220px, 26%);
  gap: 1rem 2.5rem; align-items: end;
  padding-block: clamp(32px, 5vw, 72px); border-top: 1px solid var(--ink); position: relative;
}
.svc::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--accent); transition: width .5s var(--ease-out); }
.svc:hover::before { width: 100%; }
.svc-no { align-self: start; font-family: var(--font); font-size: clamp(2.6rem, 5vw, 5.4rem); font-weight: 300; letter-spacing: -.04em; line-height: .8; }
.svc-title { font-size: clamp(2.3rem, 5vw, 6rem); line-height: .95; letter-spacing: -.05em; font-weight: 800; font-stretch: 86%; text-transform: uppercase; }
.svc-desc { margin-top: 1.4rem; max-width: 56ch; color: var(--ink-2); }
.svc-side { display: flex; flex-direction: column; gap: 1rem; padding-bottom: .3rem; }
.svc-tags { color: var(--muted); border-left: 2px solid var(--accent); padding-left: .8rem; }
.svc-link { text-decoration: none; font-weight: 500; }
.svc-link:hover { color: var(--accent); }
.svc-foot { border-top: 1px solid var(--ink); padding-top: 1rem; color: var(--muted); }
.svc-foot a { color: var(--ink); }

/* =====================================================================
   DATOVÝ TOK
   ===================================================================== */
.flow { padding-block: var(--space-xl); border-block: 1px solid var(--ink); }
.flow-map { display: grid; grid-template-columns: minmax(0, 1fr) clamp(40px, 6vw, 110px) minmax(0, 1fr) clamp(40px, 6vw, 110px) minmax(0, 1fr); align-items: stretch; }
.flow-col { background: var(--paper); border: 1px solid var(--ink); padding: 0 0 8px; }
.flow-label { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 2px solid var(--ink); }
.flow-label b { font-weight: 500; font-size: .9rem; letter-spacing: .16em; }
.flow-label span { color: var(--muted); }
.flow-nodes li { padding: 12px 18px; border-bottom: 1px dashed var(--line); display: flex; align-items: center; gap: .8em; font-size: .8rem; }
.flow-nodes li:last-child { border-bottom: 0; }
.flow-nodes li::before { content: ""; width: 10px; height: 1px; background: currentColor; }
.flow-col--core { background: var(--ink); color: var(--paper); }
.flow-col--core .flow-label { border-color: var(--accent); }
.flow-col--core .flow-label span { color: var(--muted-inv); }
.flow-col--core .flow-nodes li { border-color: var(--line-inv); }
.flow-col--core .flow-nodes li::before { background: var(--accent); width: 7px; height: 7px; }
.flow-wire { position: relative; }
.flow-wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.flow-wire::after { content: ""; position: absolute; right: -1px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.flow-wire i { position: absolute; top: calc(50% - 4px); left: 0; width: 8px; height: 8px; background: var(--accent); animation: dataMove 2.6s linear infinite; }
.flow-wire + .flow-col + .flow-wire i { animation-delay: 1.3s; }
@keyframes dataMove { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.flow-foot { margin-top: var(--space-md); color: var(--muted); max-width: 90ch; text-transform: none; letter-spacing: .02em; font-size: .8rem; }

/* =====================================================================
   REFERENCE — case studies jako editorial příběhy
   ===================================================================== */
.refs { padding-top: var(--space-xl); }
.case { padding-block: var(--space-lg) var(--space-xl); border-top: 1px solid var(--ink); }
.case-index { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .25em; font-size: clamp(3rem, 8.5vw, 9.5rem); line-height: .9; letter-spacing: -.05em; font-weight: 300; font-stretch: 80%; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.4rem, 3vw, 3rem); }
.case-no { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.case-slash { color: var(--accent); font-weight: 300; }
.case-client { font-weight: 300; }
.pilot { align-self: center; margin-left: .8rem; font-size: .72rem; letter-spacing: .14em; color: var(--ink); padding: .45em .8em; border: 1px solid var(--ink); font-weight: 500;
  background: repeating-linear-gradient(-45deg, rgba(16,16,16,.12) 0 4px, transparent 4px 9px); }

.case-claim { font-size: clamp(3rem, 7.6vw, 9rem); line-height: .93; letter-spacing: -.05em; font-weight: 800; font-stretch: 84%; text-transform: uppercase; margin-left: -.04em; }
.case-claim--m { font-size: clamp(2.6rem, 6vw, 7rem); }

.case-lead { font-size: var(--fs-body-lg); line-height: 1.45; max-width: 52ch; }
.case-lead a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.case-note { margin-top: 1.2rem; max-width: 56ch; color: var(--ink-2); padding-left: 1rem; border-left: 2px solid var(--accent); }
.case-quote { border-top: 2px solid var(--ink); padding-top: 1rem; }
.case-quote p { font-size: clamp(1.35rem, 2.2vw, 2.1rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 600; max-width: 34ch; }
.case-quote cite { display: block; margin-top: .9rem; font-style: normal; color: var(--muted); }
.case-link { display: inline-flex; gap: .6em; margin-top: var(--space-md); font-weight: 800; font-stretch: 92%; text-transform: uppercase; text-decoration: none; font-size: clamp(1rem, 1.3vw, 1.2rem); box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 2px; }
.case-link span { transition: transform .25s var(--ease-out); }
.case-link:hover span { transform: translateX(6px); }

figure figcaption.mono { color: var(--muted); margin-top: .7rem; text-transform: none; letter-spacing: .03em; }
figcaption.mono > span { color: var(--ink); text-transform: uppercase; letter-spacing: .12em; margin-right: .7em; }

/* spec = technická metadata */
.spec { display: grid; align-content: start; }
.spec div { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 1rem; padding: 10px 0; border-top: 1px solid var(--line); }
.spec div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); }
.spec dd { color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: .8rem; }
.spec dd.live { display: flex; align-items: center; gap: .6em; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.spec dd.pilot-dd { text-transform: uppercase; letter-spacing: .12em; }
.spec--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 2rem; margin-top: var(--space-lg); }
.spec--wide div:last-child { border-bottom: 0; }

.outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: var(--space-md); }
.outcomes li { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.outcomes b { font-size: clamp(1.3rem, 1.9vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; font-stretch: 88%; }
.outcomes span { color: var(--muted); font-size: .95rem; }
.outcomes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-lg); }

/* --- 01 RUMPOLD: text přes obraz, fotka přes půl obrazovky, screenshot přes druhou --- */
.case-rumpold .case-claim { position: relative; z-index: 3; margin-bottom: -.5em; }
.case-stage { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-bottom: clamp(40px, 8vw, 140px); }
.case-photo { grid-column: 1 / 2; position: relative; overflow: hidden; }
.case-photo img { width: 100%; height: clamp(380px, 52vw, 820px); object-fit: cover; object-position: 60% 50%; filter: saturate(.8) contrast(1.05); transform: scale(1.04); transition: transform 2.4s var(--ease-out); }
.case-stage.is-in .case-photo img, .case-stage:not(.is-armed) .case-photo img { transform: none; }
.case-photo figcaption { position: absolute; left: var(--page-x); bottom: 16px; margin: 0; background: var(--paper); padding: 6px 10px; }
.case-screen { position: absolute; right: var(--page-x); bottom: 0; width: min(58%, 1000px); z-index: 2; }
.case-screen img { border: 1px solid var(--ink); background: #fff; }
.case-screen figcaption { text-align: right; }
.case-stage.is-armed .case-screen { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease-out) .2s; }
.case-stage.is-armed.is-in .case-screen { clip-path: inset(0 0 0 0); }
.case-body { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: 2rem clamp(2rem, 6vw, 8rem); margin-top: var(--space-lg); }
.case-text { display: flex; flex-direction: column; gap: var(--space-md); }
.case-text .case-link { align-self: flex-start; margin-top: 0; }
.case-text .outcomes { margin-top: 0; }

/* --- 02 POLICIE ČR: jiná kompozice — mřížka, černý řetěz kontroly --- */
.case-policie { background: var(--paper-2); }
.policie-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  grid-template-areas: "claim claim ." "photo chain chain" "text text spec";
  gap: 0 0;
}
.policie-grid .case-claim { grid-area: claim; position: relative; z-index: 2; margin-bottom: -.42em; }
.policie-photo { grid-area: photo; }
.policie-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.8) contrast(1.05); }
.chain { grid-area: chain; background: var(--ink); color: var(--paper); padding: clamp(20px, 3vw, 44px); align-self: stretch; display: flex; flex-direction: column; margin-bottom: 2.4rem; }
.chain-head { display: flex; justify-content: space-between; color: var(--accent); padding-bottom: 14px; border-bottom: 1px solid var(--line-inv); }
.chain-head span:last-child { color: var(--muted-inv); }
.chain ol { counter-reset: none; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.chain li { display: grid; grid-template-columns: 3.2em 1fr; padding: 11px 0; border-bottom: 1px solid var(--line-inv); font-size: clamp(.78rem, 1vw, .92rem); letter-spacing: .06em; position: relative; }
.chain li span { color: var(--muted-inv); }
.chain li:last-child { border-bottom: 0; }
.chain-note { color: var(--muted-inv); text-transform: none; letter-spacing: .03em; padding-top: 12px; border-top: 1px solid var(--line-inv); }
.policie-text { grid-area: text; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg) clamp(1rem, 5vw, 6rem) 0 0; }
.policie-grid .spec { grid-area: spec; padding-top: var(--space-lg); }

/* --- 03 VIALIT: screenshot vyjíždí za pravý okraj --- */
.vialit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.wrap-l { padding-left: var(--edge); }
.vialit-text { display: flex; flex-direction: column; gap: 1.6rem; }
.vialit-text .case-claim { margin-bottom: .6rem; }
.vialit-shot { margin-top: clamp(0px, 4vw, 80px); }
.vialit-shot img { width: 100%; height: auto; border: 1px solid var(--ink); border-right: 0; background: #fff; }
.vialit-shot--2 { width: 58%; margin: -6% 0 0 auto; position: relative; }
.vialit-shot--2 img { aspect-ratio: 1430 / 754; object-fit: cover; object-position: 100% 0; }

/* VIALIT jako celek: systémová mapa + dvě vrstvy */
.vialit-lead { margin-top: var(--space-md); max-width: 62ch; }
.sysmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: var(--space-lg) 0; border: 1px solid var(--ink); position: relative; }
.sysmap li { padding: 16px 16px 14px; border-left: 1px solid var(--ink); display: flex; flex-direction: column; gap: 4px; position: relative; }
.sysmap li:first-child { border-left: 0; }
.sysmap li + li::before { content: "→"; position: absolute; left: -.6em; top: 14px; background: var(--paper); color: var(--accent); font-size: .9rem; line-height: 1; padding: 2px 0; }
.sysmap b { font-weight: 500; font-size: .74rem; }
.sysmap span { color: var(--muted); text-transform: none; letter-spacing: .02em; font-size: .72rem; }
.sysmap li.is-out { background: var(--ink); color: var(--paper); }
.sysmap li.is-out b { color: var(--accent); }
.sysmap li.is-out span { color: var(--muted-inv); }
.layer-tag { display: flex; align-items: center; gap: .8em; margin-bottom: 1rem; }
.layer-tag span { width: 1.9em; height: 1.9em; display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 500; }
.layer-h { font-size: clamp(1.9rem, 3.4vw, 3.6rem); line-height: .98; letter-spacing: -.04em; font-weight: 800; font-stretch: 86%; text-transform: uppercase; margin-bottom: .4rem; }
.dash { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; margin-top: var(--space-xl); }
.dash-text { order: 2; padding-left: 0; padding-right: var(--edge); display: flex; flex-direction: column; gap: 1.4rem; }
.dash-shot { order: 1; }
.dash-shot img { width: 100%; border: 1px solid var(--ink); border-left: 0; }
.dash-shot figcaption { padding-left: var(--page-x); }
.vialit-shot figcaption { padding-right: var(--page-x); }

/* --- další realizace: index --- */
.index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: var(--space-lg); border-top: 1px solid var(--ink); margin-bottom: 1.2rem; }
.index-h { font-size: var(--fs-h2); line-height: .95; letter-spacing: -.04em; font-weight: 800; font-stretch: 88%; text-transform: uppercase; }
.index-head p { color: var(--muted); }
.ref-index { border-bottom: 1px solid var(--ink); }
.ref-row {
  position: relative; display: grid;
  grid-template-columns: 4ch minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.6fr) 18ch;
  gap: 1.5rem; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none;
  transition: padding .3s var(--ease-out), background .3s;
}
.rr-no { color: var(--muted); }
.rr-name { font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 800; font-stretch: 86%; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; transition: transform .3s var(--ease-out); }
.rr-kind { color: var(--ink); }
.rr-desc { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.rr-tag { text-align: right; color: var(--ink); }
.rr-prev { position: absolute; z-index: 5; right: 20ch; top: 50%; width: clamp(240px, 22vw, 380px); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--ink); pointer-events: none; opacity: 0; transform: translate(0, -45%) scale(.96); transition: opacity .25s, transform .35s var(--ease-out); }
@media (hover: hover) {
  .ref-row:hover { background: var(--ink); color: var(--paper); padding-inline: 16px; }
  .ref-row:hover .rr-no, .ref-row:hover .rr-desc { color: var(--muted-inv); }
  .ref-row:hover .rr-tag, .ref-row:hover .rr-kind { color: var(--accent); }
  .ref-row:hover .rr-prev { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@media (hover: none) { .rr-prev { display: none; } }
.index-foot { margin-top: 1rem; color: var(--muted); text-transform: none; letter-spacing: .03em; }

/* =====================================================================
   TĚHNÍK LAB — dílna, ne reference
   ===================================================================== */
.lab { background: var(--ink); color: var(--paper); padding-block: var(--space-xl); margin-top: var(--space-xl); overflow: clip; }
.lab .kicker { color: var(--paper); }
.lab .kicker span { background: var(--accent); color: var(--ink); }
.lab-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: var(--space-xl); }
.lab-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.lab-h { font-size: clamp(4.4rem, 15vw, 17rem); line-height: .9; letter-spacing: -.06em; font-weight: 900; font-stretch: 78%; text-transform: uppercase; margin-left: -.05em; }
.caret { color: var(--accent); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lab-lead { font-size: var(--fs-body-lg); line-height: 1.45; color: var(--muted-inv); max-width: 40ch; }

.lab-item { position: relative; }
.lab-meta { display: flex; align-items: center; gap: 1.2rem; color: var(--muted-inv); margin-bottom: 1rem; }
.lab-no { color: var(--paper); }
.state { display: inline-flex; align-items: center; gap: .5em; padding: .3em .6em; font-weight: 500; }
.state--live { background: var(--accent); color: var(--ink); }
.state--live .dot { background: var(--ink); }
.state--beta { border: 1px solid var(--paper); color: var(--paper); }
.lab-name { font-size: clamp(2.4rem, 4.4vw, 4.6rem); line-height: .9; letter-spacing: -.05em; font-weight: 800; font-stretch: 84%; text-transform: uppercase; }
.lab-desc { margin-top: 1rem; color: var(--muted-inv); max-width: 46ch; }
.lab-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.2rem; }
.lab-links a { text-decoration: none; color: var(--paper); }
.lab-links a:hover { color: var(--accent); }
.lab-shot { border: 1px solid var(--line-inv); background: #000; overflow: hidden; }
.lab-shot img { width: 100%; aspect-ratio: 1600 / 760; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
.lab-item:hover .lab-shot img { transform: scale(1.025); }

.lab-item--hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(2rem, 5vw, 6rem); margin-bottom: var(--space-xl); }
.lab-item--hero > :not(.lab-shot) { grid-column: 1; }
.lab-item--hero .lab-name { font-size: clamp(5rem, 13vw, 14rem); line-height: .78; color: var(--paper); }
.lab-item--hero .lab-shot { grid-column: 2; grid-row: 1 / span 4; margin-right: calc(-1 * var(--edge)); border-right: 0; align-self: center; }
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.lab-grid .lab-shot { margin-bottom: 1.4rem; }
.lab-sub { margin: clamp(4rem, 9vw, 9rem) 0 clamp(1.6rem, 3vw, 2.6rem); }
.lab-grid .lab-item:nth-child(2) { margin-top: clamp(0px, 9vw, 180px); }
.lab-grid .lab-item:nth-child(3) { margin-top: clamp(0px, 4.5vw, 90px); }

/* =====================================================================
   RECENZE
   ===================================================================== */
.voices { padding-block: var(--space-xl) var(--space-lg); }
.voice { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(2rem, 6vw, 8rem); padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--ink); }
.voice blockquote { grid-column: 2; grid-row: 1; font-size: clamp(1.3rem, 2.2vw, 2.1rem); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; }
.voice figcaption { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .3rem; color: var(--muted); text-transform: none; letter-spacing: .03em; }
.voice figcaption b { color: var(--ink); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
mark { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% .14em no-repeat; color: inherit; font-weight: 700; padding-bottom: .04em; }

/* =====================================================================
   JAK ZAČÍT
   ===================================================================== */
.process { padding-block: var(--space-lg) var(--space-xl); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin-bottom: var(--space-lg); counter-reset: none; }
.step { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.2rem; position: relative;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) top / 100% 8px no-repeat,
              linear-gradient(var(--ink), var(--ink)) top / 100% 2px no-repeat; }
.step::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--accent); }
.step-no { font-size: clamp(4rem, 8vw, 8.5rem); font-weight: 300; line-height: .85; letter-spacing: -.06em; font-stretch: 80%; margin-top: .6rem; }
.step-t { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; font-stretch: 90%; text-transform: uppercase; }
.step-d { color: var(--ink-2); max-width: 38ch; }
/* Dvě cesty spolupráce (A pevná cena / B týdenní sprint) */
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 6rem); }
.steps--2 .step-d { max-width: 52ch; }
.path-price { font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.02em; }
.path-price b { color: var(--accent); font-weight: 800; }
.path-flow { list-style: none; margin: .6rem 0 0; padding: 0; border-top: 1px solid var(--line); font-size: .82rem; }
.path-flow li { display: grid; grid-template-columns: 9.5em 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.path-flow b { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }

/* =====================================================================
   CENÍK — velké horizontální řádky
   ===================================================================== */
.pricing { padding-block: var(--space-xl); border-top: 1px solid var(--ink); }
.tiers { border-bottom: 1px solid var(--ink); }
.tier { display: grid; grid-template-columns: clamp(50px, 8vw, 130px) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; padding-block: clamp(26px, 3.6vw, 52px); border-top: 1px solid var(--ink); }
.tier-no { align-self: start; padding-top: .6rem; color: var(--muted); }
.tier-name { font-size: clamp(1.9rem, 4vw, 4.4rem); line-height: .92; letter-spacing: -.045em; font-weight: 800; font-stretch: 86%; text-transform: uppercase; }
.tier-name i { font-style: normal; color: var(--muted); font-weight: 300; }
.tier-desc { margin-top: .9rem; max-width: 60ch; color: var(--ink-2); }
.tier-list { margin-top: .8rem; color: var(--muted); text-transform: none; letter-spacing: .02em; max-width: 90ch; }
.tier-price { font-size: clamp(2rem, 4.6vw, 5rem); line-height: .9; font-weight: 300; letter-spacing: -.05em; font-stretch: 85%; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.tier-price em { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; vertical-align: top; color: var(--muted); margin-right: .3em; }
.tier-price span { font-size: .4em; letter-spacing: 0; font-weight: 500; }
.tier-vat { margin-top: .8rem; color: var(--muted); }

.industrial { margin-top: var(--space-lg); background: var(--ink); color: var(--paper); padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); position: relative; }
.industrial::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.industrial .kicker { grid-column: 1 / -1; color: var(--paper); margin-bottom: 0; }
.industrial .kicker span { background: var(--accent); color: var(--ink); }
.industrial-h { font-size: clamp(2rem, 4vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; font-stretch: 88%; text-transform: uppercase; }
.industrial-h em { color: var(--accent); }
.industrial-body { display: flex; flex-direction: column; gap: 1rem; color: var(--muted-inv); align-items: flex-start; }
.industrial-body strong { color: var(--paper); }
.industrial-body .btn { margin-top: .6rem; }
.industrial-body .btn-accent:hover { background: var(--paper); color: var(--ink); }

.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: var(--space-lg); }
.terms div { border-top: 1px solid var(--ink); padding-top: .9rem; }
.terms dt { margin-bottom: .6rem; }
.terms dd { color: var(--ink-2); font-size: .95rem; }

/* =====================================================================
   O MNĚ — portrét jako grafický prvek, hlava mimo rám
   ===================================================================== */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 8rem); padding-block: 0 var(--space-xl); padding-right: var(--edge); align-items: end; border-top: 1px solid var(--ink); }
.about-photo { position: relative; height: clamp(520px, 72vw, 900px); overflow: hidden; background: var(--paper-2);
  background-image: linear-gradient(to right, rgba(16,16,16,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(16,16,16,.06) 1px, transparent 1px);
  background-size: 48px 48px; }
.about-photo img { position: absolute; left: 50%; top: -9%; height: 118%; width: auto; max-width: none; transform: translateX(-50%); filter: grayscale(1) contrast(1.08); }
.about-photo figcaption { position: absolute; left: var(--page-x); bottom: 20px; margin: 0; color: var(--ink); background: var(--paper); padding: 8px 12px; line-height: 1.8; }
.about-photo figcaption span { color: var(--muted); margin-right: 1em; }
.about-body { padding-top: var(--space-xl); }
.about-h { font-size: var(--fs-h1); line-height: .95; letter-spacing: -.05em; font-weight: 800; font-stretch: 86%; text-transform: uppercase; margin-bottom: var(--space-md); }
.about-h em { color: var(--muted); }
.about-text { display: grid; gap: 1rem; font-size: var(--fs-body-lg); line-height: 1.45; max-width: 52ch; }
.facts { margin-top: var(--space-lg); }
.facts div { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 1rem; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { text-transform: none; letter-spacing: .02em; font-size: .82rem; }

/* =====================================================================
   AKTIVITY
   ===================================================================== */
.life { padding-block: var(--space-lg) var(--space-xl); }
.life-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.life-stage { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.life-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.life-stage img.on { opacity: 1; }
.life-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.life-photo figcaption > span:first-child { color: var(--ink); }
.life-dots { display: flex; gap: 6px; margin: 0; }
.life-dots button { width: 18px; height: 18px; position: relative; }
.life-dots button::before { content: ""; position: absolute; inset: 7px 3px; background: var(--line); }
.life-dots button.on::before { background: var(--accent); }
.life-list { border-bottom: 1px solid var(--ink); }
.act { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; text-align: left; padding: 16px 0 16px 0; border-top: 1px solid var(--line); text-decoration: none; transition: padding .3s var(--ease-out); position: relative; }
.act b { font-size: clamp(1.2rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-stretch: 90%; text-transform: uppercase; }
.act span { grid-column: 1; font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .03em; }
.act::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 0; background: var(--accent); transition: width .3s var(--ease-out); }
.act:hover, .act.is-on { padding-left: 22px; }
.act:hover::before, .act.is-on::before { width: 6px; }

/* =====================================================================
   KONTAKT
   ===================================================================== */
.contact { background: var(--ink); color: var(--paper); padding-block: var(--space-xl); }
.contact .kicker { color: var(--paper); }
.contact .kicker span { background: var(--accent); color: var(--ink); }
.contact-h { font-size: clamp(3.8rem, 12vw, 14rem); line-height: .93; letter-spacing: -.055em; font-weight: 900; font-stretch: 80%; text-transform: uppercase; margin-left: -.05em; margin-bottom: var(--space-lg); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 8rem); align-items: start; }
.prompt { display: flex; align-items: center; gap: 1rem; font-size: clamp(.9rem, 1.4vw, 1.2rem); color: var(--muted-inv); padding: 18px 0; border-top: 1px solid var(--line-inv); border-bottom: 1px solid var(--line-inv); width: 100%; text-align: left; transition: color .2s; }
.prompt:hover { color: var(--paper); }
.prompt-caret { width: .7em; height: 1.2em; background: var(--accent); animation: blink 1.05s steps(1) infinite; }
.contact-form { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.contact-form[hidden] { display: none; }
.contact-form label { color: var(--muted-inv); }
.contact-form textarea { width: 100%; background: transparent; color: var(--paper); border: 1px solid var(--line-inv); border-left: 3px solid var(--accent); padding: 16px; font: 1.05rem/1.5 var(--font); resize: vertical; min-height: 150px; border-radius: 0; }
.contact-form textarea::placeholder { color: var(--muted-inv); }
.contact-form textarea:focus { outline: none; border-color: var(--paper); border-left-color: var(--accent); }
.contact-form .btn-accent:hover { background: var(--paper); color: var(--ink); }
.contact-data div { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 1rem; padding: 14px 0; border-top: 1px solid var(--line-inv); }
.contact-data div:last-child { border-bottom: 1px solid var(--line-inv); }
.contact-data dt { color: var(--muted-inv); }
.contact-data dd { font-size: .9rem; text-transform: none; letter-spacing: .02em; }
.contact-data dd a { text-decoration: none; font-size: clamp(1rem, 1.6vw, 1.4rem); font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
.contact-data dd a:hover { color: var(--accent); }
.contact-data dd.acc { justify-self: start; text-transform: uppercase; letter-spacing: .12em; padding: .2em .5em; font-weight: 500; }

/* =====================================================================
   PATIČKA
   ===================================================================== */
.foot { background: #0A0A09; color: var(--muted-inv); padding-block: var(--space-lg) 24px; border-top: 1px solid var(--line-inv); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-grid > * { display: flex; flex-direction: column; gap: .55rem; }
.foot a { text-decoration: none; color: var(--paper); }
.foot a:hover { color: var(--accent); }
.foot .brand { color: var(--paper); font-family: var(--font); font-size: 1.4rem; text-transform: none; letter-spacing: -.01em; }
.foot-brand p:last-child { text-transform: none; letter-spacing: .03em; }
.foot-cta { color: var(--accent) !important; }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-lg); padding-top: 16px; border-top: 1px solid var(--line-inv); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .log-head, .log-row { grid-template-columns: 70px minmax(0, 1fr) 44px minmax(0, 1fr); gap: 1rem; }
  .ref-row { grid-template-columns: 4ch minmax(0, 1fr) minmax(0, 1.4fr) 14ch; }
  .rr-kind { display: none; }
  .rr-prev { right: 16ch; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --head-h: 58px; }
  .menu {
    position: fixed; inset: 0; z-index: -1; background: var(--ink); color: var(--paper);
    flex-direction: column; justify-content: center; gap: 0; padding: 80px var(--page-x) 40px;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .menu a { font-family: var(--font); font-size: clamp(2.6rem, 11vw, 4.6rem); font-weight: 800; font-stretch: 84%; letter-spacing: -.04em; line-height: 1.05; padding-block: .3rem; border-bottom: 1px solid var(--line-inv); }
  .menu-open .menu { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .menu-open .brand { color: var(--paper); position: relative; z-index: 1; }
  .head-cta { margin-left: auto; font-size: .68rem; padding: .6rem .7rem; }
  .burger { display: block; margin-right: -10px; }

  .hero { grid-template-rows: auto minmax(34svh, 1fr) auto auto auto; }
  .hero::before { inset: 0 0 30% 30%; }
  .hero-portrait { height: 66svh; max-width: 62vw; right: -4vw; bottom: auto; top: calc(var(--head-h) + 96px); }
  .anno-a { display: none; }
  .hp-qr { right: auto; left: -34%; top: 30%; margin: 0; align-items: flex-start; }
  .hp-qr::after { right: auto; left: -8px; }
  .anno-b, .anno-c { left: auto; right: 64%; padding-left: 0; padding-right: 36px; text-align: right; }
  .anno-b::before, .anno-c::before { left: auto; right: 0; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-log b { min-width: 0; }

  .sec-head--split, .lab-head, .industrial, .contact-grid { grid-template-columns: 1fr; }
  .sec-lead { margin-top: 1.4rem; }
  .svc { grid-template-columns: clamp(56px, 12vw, 90px) minmax(0, 1fr); }
  .svc-side { grid-column: 2; }

  .flow-map { grid-template-columns: 1fr; }
  .flow-wire { height: 56px; }
  .flow-wire::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow-wire::after { right: auto; left: calc(50% - 5px); top: auto; bottom: -1px; border: 5px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0; }
  .flow-wire i { left: calc(50% - 4px); top: 0; animation-name: dataMoveY; }
  @keyframes dataMoveY { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

  .case-stage { grid-template-columns: 1fr; padding-bottom: 0; }
  .case-photo img { height: clamp(300px, 70vw, 560px); }
  .case-screen { position: relative; right: auto; width: auto; margin: -18vw var(--page-x) 0 calc(var(--page-x) + 10vw); }
  .case-body { grid-template-columns: 1fr; }
  .policie-grid { grid-template-columns: 1fr; grid-template-areas: "claim" "photo" "chain" "text" "spec"; }
  .chain { margin-bottom: 0; }
  .policie-text { padding-right: 0; }
  .outcomes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vialit-grid { grid-template-columns: 1fr; }
  .vialit-text { padding-right: var(--page-x); }
  .vialit-shot { margin: 0 0 0 calc(var(--page-x) + 8vw); }
  .sysmap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sysmap li:nth-child(4) { border-left: 0; }
  .sysmap li:nth-child(n+4) { border-top: 1px solid var(--ink); }
  .sysmap li:nth-child(4)::before { display: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-text { order: 1; padding: 0 var(--page-x); }
  .dash-shot { order: 2; margin-right: calc(var(--page-x) + 8vw); }

  .lab-item--hero { grid-template-columns: 1fr; grid-template-rows: none; }
  .lab-item--hero .lab-shot { grid-column: 1; grid-row: auto; margin: 2rem calc(-1 * var(--page-x)) 0 0; }
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .lab-grid .lab-item:nth-child(2) { margin-top: 12vw; }
  .lab-grid .lab-item:nth-child(3) { margin-top: 0; }

  .voice { grid-template-columns: 1fr; }
  .voice blockquote, .voice figcaption { grid-column: 1; grid-row: auto; }
  .steps { grid-template-columns: 1fr; gap: 2.4rem; }
  .path-flow li { grid-template-columns: 1fr; gap: .2rem; }
  .tier { grid-template-columns: 1fr auto; }
  .tier-no { grid-column: 1 / -1; padding: 0; }
  .tier-main { grid-column: 1 / -1; }
  .tier-price { grid-column: 1 / -1; text-align: left; }
  .about { grid-template-columns: 1fr; padding-right: 0; }
  .about-photo { height: clamp(420px, 100vw, 640px); margin-right: 18vw; }
  .about-body { padding: var(--space-lg) var(--page-x) 0; }
  .life-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hide-s { display: none; }
  .hero { padding-bottom: 18px; }
  .hero-meta { gap: .3rem 1.2rem; }
  .hero-log { margin-left: 0; flex-basis: 100%; }
  .hero-portrait { height: 56svh; max-width: 78vw; right: -14vw; top: calc(var(--head-h) + 92px); }
  .anno-b, .anno-c { display: none; }
  .hp-qr, .hp-read { display: none; }
  .hp-bar { left: 84%; width: 20px; }
  .hero-title { font-size: clamp(4rem, 19vw, 7rem); font-stretch: 72%; letter-spacing: -.035em; }
  .hero-actions .btn-accent { flex: 1; justify-content: center; }
  .pipe { grid-template-columns: 1fr; }
  .pipe li { flex-direction: row; justify-content: space-between; gap: 1rem; padding: 10px 14px; border-left: 0; border-top: 1px solid var(--line-inv); }
  .pipe li:first-child { border-top: 0; }
  .pipe span { text-align: right; }
  .hero-trust { gap: .2rem 1rem; }

  .manifest-h { font-stretch: 72%; font-size: clamp(3.2rem, 16.5vw, 6rem); }
  .manifest-h .ln:nth-child(3), .manifest-h .ln:nth-child(4) { margin-left: 0; }
  .log-head { display: none; }
  .log-row { grid-template-columns: 1fr; gap: .5rem; }
  .log-arrow { display: none; }
  .log-a::before { content: "→ "; color: var(--accent); }

  .svc { grid-template-columns: 1fr; gap: .8rem; }
  .svc-side { grid-column: 1; }
  .svc-title { font-stretch: 76%; font-size: clamp(2.3rem, 11vw, 3.4rem); }

  .case-index { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .case-claim { font-size: clamp(2.6rem, 13.5vw, 4.4rem); font-stretch: 72%; }
  .case-screen { margin: -14vw var(--page-x) 0 calc(var(--page-x) + 4vw); }
  .outcomes, .outcomes--4 { grid-template-columns: 1fr; }
  .pilot { margin: .6rem 0 0; }
  .spec div, .facts div, .contact-data div { grid-template-columns: 13ch minmax(0, 1fr); gap: .6rem; }
  .vialit-shot { margin-left: var(--page-x); }
  .vialit-shot--2 { width: 86%; }
  .sysmap { grid-template-columns: 1fr 1fr; }
  .sysmap li:nth-child(n) { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
  .sysmap li:nth-child(odd) { border-left: 0; }
  .sysmap li:nth-child(-n+2) { border-top: 0; }
  .sysmap li::before { display: none; }
  .dash-shot { margin-right: var(--page-x); }

  .index-head { flex-direction: column; }
  .index-head p { display: none; }
  .ref-row { grid-template-columns: 3ch minmax(0, 1fr); gap: .3rem 1rem; }
  .rr-desc, .rr-tag { grid-column: 2; text-align: left; }
  .rr-desc { font-size: .88rem; }

  .lab-grid { grid-template-columns: 1fr; }
  .lab-grid .lab-item:nth-child(n) { margin-top: 0; }
  .lab-grid .lab-item:nth-child(2) { margin-left: 10vw; }
  .lab-h { font-size: clamp(4.4rem, 26vw, 8rem); }
  .lab-item--hero .lab-name { font-size: clamp(5rem, 30vw, 8rem); }

  .terms { grid-template-columns: 1fr; }
  .tier-name { font-stretch: 78%; }
  .about-h { font-size: clamp(2.6rem, 13vw, 4rem); font-stretch: 76%; }
  .contact-h { font-size: clamp(3.4rem, 17vw, 6rem); font-stretch: 72%; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1800px) {
  body { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .pipe-dot, .flow-wire i { display: none; }
  .hp-scan, .hp-g1, .hp-g2, .hp-beam { display: none; }
}

@media print {
  .head, .hero-portrait, .pipe, .lab-shot, .rr-prev { display: none !important; }
  .manifest, .lab, .contact, .foot { background: #fff !important; color: #000 !important; }
}

/* backdrop-filter by z hlavičky udělal containing block pro fixní menu */
.menu-open .head { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; box-shadow: none; }

/* =====================================================================
   TRANSFORMACE — Excel → systém (sticky scéna, fáze s0–s3 z home.js)
   Barvy Excelu (zelená lišta, žluté/červené výplně) jsou obsah ukázky,
   ne UI akcent — ve fázi „po" zmizí a zbude papír, inkoust, oranžová.
   ===================================================================== */
.xform { position: relative; border-top: 1px solid var(--ink); }

.xf-sticky { position: relative; display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 28px); padding: calc(var(--head-h) + 14px) 0 clamp(16px, 3vh, 32px); }
.js .xf-sticky { height: 100svh; min-height: 620px; overflow: hidden; }
.xf-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.xf-top .kicker { margin: 0; }
.xf-steps { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); }
.xf-steps li { padding: 7px 12px; border-left: 1px solid var(--ink); color: var(--muted); transition: background .3s, color .3s; }
.xf-steps li:first-child { border-left: 0; }
.xf-steps li.on { color: var(--ink); }
.xf-steps li.now { background: var(--ink); color: var(--accent); }

.xf-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 5rem); padding-left: var(--edge); }
.xf-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.xf-count { display: flex; flex-direction: column; gap: .3rem; }
.xf-count span { color: var(--muted); }
.xf-count b { font-size: clamp(4rem, 10vw, 11rem); font-weight: 300; line-height: .85; letter-spacing: -.06em; font-stretch: 80%; font-variant-numeric: tabular-nums; align-self: flex-start; transition: background .3s; }
.xform.s3 .xf-count b { background: var(--accent); padding: 0 .06em; font-weight: 800; }
.xf-caps { position: relative; min-height: 9.5em; }
.xf-cap { position: absolute; inset: 0 0 auto; font-size: var(--fs-body-lg); line-height: 1.4; max-width: 34ch; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s var(--ease-out); }
.xf-cap b { font-weight: 800; text-transform: uppercase; font-stretch: 88%; letter-spacing: -.01em; }
.xf-cap i { font-family: var(--mono); font-style: normal; font-size: .85em; }
.xf-cap.on { opacity: 1; transform: none; }

/* obrazovka */
.xf-screen { min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ink); border-right: 0; font-family: Calibri, Carlito, Arial, sans-serif; color: #222; overflow: hidden; transition: background .6s; }
.xf-chrome { flex: none; height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #1E6F42; color: #fff; font-size: 13px; transition: background .6s; position: relative; }
.xf-dots { display: flex; gap: 6px; }
.xf-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); }
.xf-name { transition: opacity .4s; white-space: nowrap; }
.xf-name--app { position: absolute; left: 76px; opacity: 0; font-family: var(--font); font-weight: 700; letter-spacing: .01em; }
.xf-name--app em { font-style: normal; color: var(--ink); background: var(--accent); padding: 1px 6px; margin-left: 8px; font-size: .62rem; }
.xf-formula { flex: none; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #d4d4d4; font-size: 11px; color: #333; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; transition: height .5s, opacity .4s; }
.xf-formula b { font-style: italic; color: #777; }
.xf-tabs { flex: none; height: 30px; display: flex; border-top: 1px solid #c8c8c8; background: #f3f3f3; font-size: 11px; text-transform: none; letter-spacing: 0; overflow: hidden; transition: height .5s; }
.xf-tabs span { padding: 7px 14px; border-right: 1px solid #d4d4d4; color: #555; white-space: nowrap; }
.xf-tabs span.on { background: #fff; color: #1E6F42; font-weight: 700; box-shadow: inset 0 -2px 0 #1E6F42; }

.xf-work { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); transition: grid-template-columns 1s var(--ease-out); }
.xf-grid { min-width: 0; overflow: hidden; font-size: 12.5px; --cols: 34px .95fr .95fr 1.35fr .9fr .8fr .75fr .8fr 1.25fr; }
.xf-row { display: grid; grid-template-columns: var(--cols); transition: grid-template-columns .9s var(--ease-out), max-height .6s, opacity .4s, background .4s; max-height: 40px; }
.xf-row > span { position: relative; padding: 5px 7px; border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; white-space: nowrap; overflow: hidden; min-width: 0; transition: background .4s, color .4s, box-shadow .3s; }
.xf-row > span:first-child { background: #f0f0f0; color: #666; text-align: center; font-size: 11px; }
.xf-letters > span { background: #f0f0f0; color: #666; text-align: center; font-size: 11px; padding: 3px 0; }
.xf-hdr > span { font-weight: 700; background: #DDEBF7; }
.xf-row > span.num { text-align: right; }
.xf-row > span .c { display: none; }
.f-y { background: #FFFF00; } .f-r { background: #FFB3B3; } .f-g { background: #C6EFCE; } .f-o { background: #F8CBAD; }
.xf-row > span.err { color: #C00000; }

/* s1: import — scan a chyby označené */
.xf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 -40px 40px -20px rgba(255,90,42,.18); opacity: 0; pointer-events: none; }
.xform.s1 .xf-scan { opacity: 1; animation: xfScan 1.8s linear infinite; }
@keyframes xfScan { from { top: 0; } to { top: 100%; } }
.xform.s1 .xf-row > span.err { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255,90,42,.14); color: var(--ink); }
.xform.s1 .xf-row.dup { background: rgba(255,90,42,.1); }
.xform.s1 .xf-row.dup > span:not(:first-child) { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* s2+: kontrola → databáze */
.xform.s2 .xf-screen, .xform.s3 .xf-screen { background: var(--paper); }
.xform.s2 .xf-chrome, .xform.s3 .xf-chrome { background: var(--ink); }
.xform.s2 .xf-name--xls, .xform.s3 .xf-name--xls { opacity: 0; }
.xform.s2 .xf-name--app, .xform.s3 .xf-name--app { opacity: 1; }
.xform.s2 .xf-formula, .xform.s3 .xf-formula, .xform.s2 .xf-tabs, .xform.s3 .xf-tabs { height: 0; border: 0; opacity: 0; }
.xform.s2 .xf-grid, .xform.s3 .xf-grid { font-family: var(--mono); font-size: 11.5px; --cols: 0px 1fr .95fr 1.3fr .8fr 0px 0px .9fr 0px; }
.xform.s2 .xf-letters, .xform.s3 .xf-letters, .xform.s2 .xf-row.dup, .xform.s3 .xf-row.dup { max-height: 0; opacity: 0; }
.xform.s2 .xf-row > span, .xform.s3 .xf-row > span { background: transparent !important; border-right-color: transparent; border-bottom-color: var(--line); color: var(--ink); padding-block: 7px; }
.xform.s2 .xf-row > span:first-child, .xform.s3 .xf-row > span:first-child { padding-inline: 0; }
.xform.s2 .xf-hdr > span, .xform.s3 .xf-hdr > span { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--muted); font-weight: 500; border-bottom-color: var(--ink); }
.xform.s2 .xf-row > span .r, .xform.s3 .xf-row > span .r { display: none; }
.xform.s2 .xf-row > span .c, .xform.s3 .xf-row > span .c { display: inline; }
.xform.s2 .xf-row > span.err .c::after, .xform.s3 .xf-row > span.err .c::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.xform.s2 .xf-row.flag > span:nth-child(2), .xform.s3 .xf-row.flag > span:nth-child(2) { box-shadow: inset 3px 0 0 var(--accent); }

/* s3: report */
.xform.s3 .xf-work { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.xf-dash { min-width: 0; overflow: hidden; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; gap: 14px; padding: 0; opacity: 0; transition: opacity .6s .2s, padding .6s; }
.xform.s3 .xf-dash { opacity: 1; padding: clamp(14px, 2vw, 26px); }
.xf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-inv); }
.xf-kpis p { background: var(--ink); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.xf-kpis span { color: var(--muted-inv); font-size: .6rem; }
.xf-kpis b { font-family: var(--font); font-size: clamp(1.3rem, 2.2vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; font-stretch: 86%; }
.xf-kpis .is-warn b { color: var(--accent); }
.xf-bars { flex: 1; min-height: 60px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line-inv); }
.xf-bars i { flex: 1; height: calc(var(--h) * 100%); background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease-out); }
.xf-bars i:nth-child(3) { background: var(--accent); }
.xform.s3 .xf-bars i { transform: scaleY(1); }
.xform.s3 .xf-bars i:nth-child(2) { transition-delay: .05s; } .xform.s3 .xf-bars i:nth-child(3) { transition-delay: .1s; }
.xform.s3 .xf-bars i:nth-child(4) { transition-delay: .15s; } .xform.s3 .xf-bars i:nth-child(5) { transition-delay: .2s; }
.xform.s3 .xf-bars i:nth-child(6) { transition-delay: .25s; } .xform.s3 .xf-bars i:nth-child(7) { transition-delay: .3s; }
.xform.s3 .xf-bars i:nth-child(8) { transition-delay: .35s; }
.xf-bars-cap { color: var(--muted-inv); font-size: .6rem; }

@media (max-width: 960px) {
  .xf-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding-left: var(--page-x); }
  .xf-copy { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-right: var(--page-x); }
  .xf-count b { font-size: clamp(3rem, 15vw, 6rem); }
  .xf-caps { flex: 1; min-height: 7.2em; }
  .xf-cap { font-size: .92rem; max-width: none; }
  .xf-steps li { padding: 5px 8px; font-size: .6rem; }
  .xf-grid { font-size: 11px; --cols: 26px .9fr .95fr 0px .8fr .75fr 0px .75fr 1fr; }
  .xform.s2 .xf-grid, .xform.s3 .xf-grid { font-size: 10px; --cols: 0px .9fr .95fr 0px .9fr 0px 0px .8fr 0px; }
  .xform.s3 .xf-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 640px) {
  .xf-copy { flex-direction: column; align-items: flex-start; }
  .xf-caps { width: 100%; min-height: 6.4em; }
  .xf-top .kicker::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .xform { height: auto; }
  .js .xf-sticky { position: relative; height: auto; min-height: 100svh; }
  .xf-caps { min-height: 0; display: grid; gap: .8rem; }
  .xf-cap { position: static; opacity: 1; transform: none; }
}

/* =====================================================================
   SLUŽBY jako tři pásy přes celý viewport
   ===================================================================== */
.services { padding-bottom: 0; }
.services .sec-head { margin-bottom: var(--space-md); }
.svc { position: relative; overflow: hidden; padding: 0; border-top: 1px solid var(--ink); min-height: clamp(460px, 78svh, 820px); display: flex; align-items: flex-end; }
.svc::before { display: none; }
.svc--ink { background: var(--ink); color: var(--paper); }
.svc--grey { background: var(--paper-2); }
.svc-big { position: absolute; right: -3vw; top: 50%; transform: translateY(-52%); font-size: clamp(16rem, 44vw, 46rem); line-height: .8; font-weight: 900; font-stretch: 75%; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none; user-select: none; }
.svc--ink .svc-big { -webkit-text-stroke-color: rgba(242,240,234,.18); }
.svc-inner { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 120px); display: flex; flex-direction: column; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.svc-inner .svc-no { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; color: var(--muted); line-height: 1.5; }
.svc--ink .svc-no { color: var(--muted-inv); }
.svc-inner .svc-title { font-size: clamp(3rem, 9vw, 11rem); line-height: .98; letter-spacing: -.055em; font-stretch: 78%; font-weight: 900; }
.svc--ink .svc-title { color: var(--paper); }
.svc-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 6vw, 8rem); align-items: end; }
.svc-row .svc-desc { margin: 0; font-size: var(--fs-body-lg); line-height: 1.45; max-width: 52ch; }
.svc--ink .svc-desc, .svc--ink .svc-tags { color: var(--muted-inv); }
.svc--ink .svc-link { color: var(--paper); }
@media (max-width: 960px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-inner .svc-title { font-size: clamp(2.6rem, 12vw, 5rem); font-stretch: 74%; }
  .svc { min-height: 0; }
}

/* =====================================================================
   MANIFEST přes celou obrazovku
   ===================================================================== */
.manifest-h { font-size: clamp(3.4rem, 13.4vw, 17rem); line-height: .9; min-height: calc(100svh - 2 * var(--space-lg)); display: flex; flex-direction: column; justify-content: center; }
.manifest .kicker { margin-bottom: var(--space-lg); }
@media (max-width: 640px) { .manifest-h { font-size: clamp(3rem, 17vw, 6rem); min-height: 0; } }
.svc-row .svc-side { grid-column: auto; padding-bottom: 0; }

/* srolované sloupce: bez paddingu a rámečku, jinak z nich zbývají proužky */
.xform.s2 .xf-row > span:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(9)),
.xform.s3 .xf-row > span:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(9)) { padding-inline: 0; border-right: 0; color: transparent; box-shadow: none; }
@media (max-width: 960px) {
  .xf-row > span:is(:nth-child(4), :nth-child(7)) { padding-inline: 0; border-right: 0; color: transparent; box-shadow: none; }
}

/* =====================================================================
   ROADMAPA — orientace v celé stránce (pod hlavičkou, objeví se za hero)
   ===================================================================== */
:root { --rm-h: 30px; }
html { scroll-padding-top: calc(var(--head-h) + var(--rm-h) + 12px); }
.roadmap { position: fixed; left: 0; right: 0; top: var(--head-h); z-index: 49; background: rgba(242, 240, 234, .96); box-shadow: 0 1px 0 var(--ink); transform: translateY(-110%); opacity: 0; transition: transform .35s var(--ease-out), opacity .25s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.roadmap.is-on { transform: none; opacity: 1; }
.menu-open .roadmap { opacity: 0; pointer-events: none; }
.rm-cells { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); padding-inline: var(--page-x); }
.rm-cells li { border-left: 1px solid var(--line); }
.rm-cells li:last-child { border-right: 1px solid var(--line); }
.rm-cells a { position: relative; display: flex; align-items: center; gap: .5em; height: var(--rm-h); padding: 0 8px; text-decoration: none; color: var(--muted); font-size: .6rem; letter-spacing: .1em; white-space: nowrap; overflow: hidden; transition: color .2s; }
.rm-cells a b { font-weight: 500; }
.rm-cells a span { overflow: hidden; text-overflow: ellipsis; }
.rm-cells a i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.rm-cells a:hover { color: var(--ink); }
.rm-cells li.done a { color: var(--ink); }
.rm-cells li.now a { background: var(--ink); color: var(--paper); }
.rm-cells li.now a b { color: var(--accent); }
.rm-cells li.now a i { background: var(--accent); }
.rm-now { display: none; }
@media (max-width: 1180px) {
  .rm-cells { display: flex; }
  .rm-cells li { flex: 1 1 0; min-width: 0; transition: flex-grow .35s var(--ease-out); }
  .rm-cells li.now { flex-grow: 4; }
  .rm-cells a { justify-content: center; padding: 0 4px; }
  .rm-cells a span { display: none; }
  .rm-cells li.now a span { display: inline; }
}
@media (max-width: 640px) {
  :root { --rm-h: 22px; }
  .rm-cells { padding-inline: 0; }
  .rm-cells li.now { flex-grow: 1; }
  .rm-cells li.now a span { display: none; }
  .rm-cells a { height: 8px; font-size: 0; }
  .rm-cells a b { display: none; }
  .rm-now { display: flex; align-items: center; gap: .7em; padding: 5px var(--page-x); font-size: .62rem; border-top: 1px solid var(--line); }
  .rm-now b { font-weight: 500; background: var(--ink); color: var(--accent); padding: 1px 5px; }
  .rm-now em { margin-left: auto; font-style: normal; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { .roadmap { transition: none; } }

/* ZD Dřísy — ilustrační fotky z oboru */
.field-photo { position: relative; margin: var(--space-lg) 0 0; overflow: hidden; }
.field-photo img { width: 100%; height: clamp(300px, 46vw, 680px); object-fit: cover; object-position: 50% 45%; filter: saturate(.85) contrast(1.05); }
.field-photo figcaption { position: absolute; left: var(--page-x); bottom: 16px; margin: 0; background: var(--paper); padding: 6px 10px; }
.field-inset { margin-bottom: 1rem; }
.field-inset img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ink); filter: saturate(.85) contrast(1.05); }

/* konec ukázky: jasný signál, že se jede dál */
.xf-next { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); opacity: 0; transition: opacity .4s, transform .4s var(--ease-out); background: var(--ink); color: var(--accent); padding: 6px 12px; pointer-events: none; }
.xform.s3 .xf-next { opacity: 1; transform: translate(-50%, 0); }
@keyframes xfNudge { 50% { transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .xf-next { display: none; } }
.korba-photo img { height: clamp(320px, 50vw, 760px); object-position: 40% 50%; filter: none; }
.korba-photo { margin-bottom: var(--space-lg); }

.xf-steps li { cursor: pointer; }
.xf-steps li:hover { color: var(--ink); }
.xf-steps li:focus-visible { outline-offset: -3px; }
.js .xf-sticky { padding-top: calc(var(--head-h) + var(--rm-h) + 18px); }
@media (max-width: 640px) { .xf-next { display: none; } }

/* =====================================================================
   DALŠÍ ČÁST PŘÍBĚHU — plovoucí šipka k další sekci
   ===================================================================== */
.rm-next {
  position: fixed; right: var(--page-x); bottom: 22px; z-index: 48;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 10px 12px 10px 16px; background: var(--ink); color: var(--paper); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(242,240,234,.14);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .35s var(--ease-out), background .2s;
}
.rm-next.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rm-next-k { grid-column: 1; font-size: .58rem; color: var(--muted-inv); }
.rm-next-l { grid-column: 1; display: flex; align-items: baseline; gap: .5em; font-weight: 800; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.01em; font-size: 1rem; }
.rm-next-l b { color: var(--accent); font-weight: 500; font-size: .7rem; }
.rm-next-arrow { grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-style: normal; font-size: 1.3rem; font-weight: 800; animation: nextNudge 1.6s ease-in-out infinite; }
@keyframes nextNudge { 50% { transform: translateY(4px); } }
.rm-next:hover { background: #000; }
.rm-next:hover .rm-next-arrow { animation-duration: .8s; }
@media (max-width: 640px) {
  .rm-next { left: 12px; right: 12px; bottom: 12px; grid-template-columns: 1fr auto; padding: 8px 8px 8px 14px; }
  .rm-next-arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .rm-next-arrow { animation: none; } .rm-next { transition: none; } }
@media print { .rm-next, .roadmap { display: none !important; } }

/* =====================================================================
   DATOVÝ VESMÍR — syrová data → chaos → engine → systém → výsledek
   Jeden průběžný prostor s hero: stejný papír, žádný rámeček sekce.
   ===================================================================== */
.hero-foot { grid-template-columns: 1fr; }
.uni { position: relative; overflow: clip; padding-top: clamp(40px, 6vw, 90px); }
.uni::before { /* jemná technická síť pokračuje z hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(16,16,16,.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(16,16,16,.045) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
}
.uni-head { position: relative; z-index: 2; }
.uni-head .kicker { margin-bottom: 1.2rem; }
.uni-h { font-size: clamp(3rem, 8.4vw, 10rem); line-height: .93; letter-spacing: -.055em; font-weight: 900; font-stretch: 78%; text-transform: uppercase; margin-left: -.04em; }
.uni-h .ln:nth-child(2) { margin-left: clamp(0px, 14vw, 260px); }

.uni-stage { position: relative; height: clamp(560px, 50vw, 820px); margin-top: clamp(-40px, -3vw, 0px); }
.uni-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.uni-wires path { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .28; }
.uni-wires path.is-out { opacity: .5; }
.uni-wires circle { fill: var(--accent); }

.uni-axis { position: absolute; left: 0; right: 0; bottom: 18px; display: grid; grid-template-columns: 1.1fr .9fr 1.1fr .9fr 1fr; padding-inline: var(--page-x); border-top: 1px solid var(--ink); z-index: 1;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 16px) top / 100% 6px no-repeat; }
.uni-axis li { padding-top: 12px; color: var(--muted); font-size: .64rem; }
.uni-axis li.is-core { color: var(--ink); }
.uni-axis li.is-core::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: .6em; }

.u-obj { position: absolute; z-index: 2; margin: 0; }
.u-file { display: flex; align-items: center; gap: .6em; font-size: .66rem; color: var(--ink); text-transform: none; letter-spacing: .02em; }

/* vstupy: chaos — mírně natočené, nestejně velké */
.u-in { background: #fff; border: 1px solid var(--ink); color: #222; }
.u-xlsx { left: -3vw; top: 4%; width: 31vw; max-width: 560px; transform: rotate(-1.6deg); padding: 12px 14px 14px; }
.u-ico-x { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #1E6F42; color: #fff; font-style: normal; font-weight: 700; font-size: .6rem; }
.u-sheet { margin: 10px 0 12px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #d4d4d4; border-left: 1px solid #d4d4d4; font: 12px/1 Calibri, Carlito, Arial, sans-serif; }
.u-sheet span { height: 26px; padding: 7px 6px; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; white-space: nowrap; overflow: hidden; color: #C00000; }
.u-sheet span:nth-child(odd) { color: #333; }
.u-sheet .y { background: #FFFF00; } .u-sheet .r { background: #FFB3B3; }
.u-meta { display: flex; gap: clamp(14px, 2vw, 30px); }
.u-meta div { display: flex; flex-direction: column-reverse; }
.u-meta dd { font-family: var(--font); font-size: clamp(1.6rem, 2.8vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-stretch: 86%; color: var(--ink); }
.u-meta dt { font-size: .58rem; color: var(--muted); }
.u-log { left: 7vw; top: 57%; width: 20vw; max-width: 340px; background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 10px 12px; transform: rotate(1.2deg); }
.u-log .u-file { color: var(--muted-inv); }
.u-log pre { margin: 8px 0 0; font-size: .6rem; line-height: 1.7; text-transform: none; letter-spacing: .02em; white-space: pre; overflow: hidden; color: var(--paper); }
.u-csv { left: 25vw; top: 40%; width: 13vw; min-width: 170px; padding: 8px 10px; transform: rotate(-3deg); }
.u-csv-row { margin-top: 6px; font-size: .56rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
.u-stamp { left: 22vw; top: 76%; transform: rotate(-4deg); border: 2px solid var(--accent); color: var(--accent); padding: 6px 10px; font-size: .7rem; font-weight: 500; background: var(--paper); }
.u-stamp b { font-size: 1.05rem; }

/* engine: průmyslový modul, ne karta */
.u-engine { left: 40vw; top: 8%; width: 24vw; min-width: 300px; height: 70%; background: var(--ink); color: var(--paper); padding: clamp(14px, 1.6vw, 24px); display: flex; flex-direction: column; gap: .8rem; overflow: hidden; z-index: 3;
  box-shadow: 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--ink); }
.ue-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted-inv); font-size: .6rem; padding-bottom: 10px; border-bottom: 1px solid var(--line-inv); }
.ue-leds { display: flex; gap: 5px; }
.ue-leds i { width: 7px; height: 7px; background: #3a3a36; }
.ue-leds i:first-child { background: var(--accent); }
.ue-name { font-size: clamp(2.6rem, 4.6vw, 5.2rem); line-height: .86; font-weight: 900; font-stretch: 76%; letter-spacing: -.05em; text-transform: uppercase; margin-top: auto; }
.ue-steps { color: var(--accent); font-size: .66rem; }
.ue-vents { height: 38px; background: repeating-linear-gradient(90deg, #2a2a27 0 3px, transparent 3px 9px); opacity: .9; }
.ue-foot { display: flex; justify-content: space-between; color: var(--muted-inv); font-size: .56rem; }
.ue-pulse { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 24px 4px rgba(255,90,42,.25); opacity: 0; }

/* výstupy: čisto, klid, velká čísla */
.u-out { opacity: .25; transform: translateY(10px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.uni.is-live .u-out { opacity: 1; transform: none; }
.uni.is-live .u-report { transition-delay: .5s; } .uni.is-live .u-zero { transition-delay: 1s; }
.uni.is-live .u-hours { transition-delay: 1.5s; } .uni.is-live .u-ok { transition-delay: 2s; }
.u-dash { left: 71vw; top: 2%; width: 34vw; max-width: 620px; border: 1px solid var(--ink); border-right: 0; background: var(--paper); padding: 14px 16px; }
.u-dash p { display: flex; align-items: center; gap: .6em; font-size: .64rem; }
.u-dash svg { display: block; width: 100%; height: clamp(60px, 7vw, 110px); margin: 10px 0; }
.u-dash polyline { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.u-dash-row { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 8px; font-size: .6rem; color: var(--muted); }
.u-dash-row b { font-family: var(--font); font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.u-report { left: 70vw; top: 47%; display: flex; flex-direction: column; gap: 2px; font-size: .62rem; color: var(--muted); }
.u-report b { font-family: var(--font); font-size: clamp(1.6rem, 2.4vw, 2.6rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.u-report span { font-size: .56rem; }
.u-zero { left: 81vw; top: 38%; display: flex; flex-direction: column; }
.u-zero b { font-size: clamp(5rem, 11vw, 13rem); line-height: .8; font-weight: 900; font-stretch: 74%; letter-spacing: -.07em; }
.u-zero span, .u-hours span { font-size: .64rem; color: var(--muted); }
.u-hours { left: 70vw; top: 66%; display: flex; align-items: baseline; gap: .6em; }
.u-hours b { font-size: clamp(2.2rem, 4.4vw, 5rem); font-weight: 900; font-stretch: 78%; letter-spacing: -.05em; background: var(--accent); padding: 0 .1em; line-height: 1; }
.u-ok { left: 90vw; top: 72%; display: flex; align-items: center; gap: .6em; font-size: .66rem; }
.u-ok .dot { background: #1f9d55; }

/* animace: pomalé a tiché */
.uni.is-live .ue-pulse { animation: uePulse 6s var(--ease-out) infinite 1s; }
@keyframes uePulse { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 34% { left: 100%; opacity: .9; } 38%, 100% { left: 100%; opacity: 0; } }
.uni.is-live .ue-leds i:nth-child(2) { animation: ueLed 6s steps(1) infinite 1.4s; }
.uni.is-live .ue-leds i:nth-child(3) { animation: ueLed 6s steps(1) infinite 1.8s; }
@keyframes ueLed { 0%, 30% { background: var(--accent); } 31%, 100% { background: #3a3a36; } }

/* tablet: méně prostoru → objekty se stáhnou, přesahy zůstanou */
@media (max-width: 1180px) {
  .u-xlsx { width: 36vw; } .u-log { width: 24vw; left: 4vw; } .u-csv { left: 26vw; top: 44%; }
  .u-engine { left: 38vw; width: 28vw; }
  .u-dash { left: 70vw; width: 34vw; } .u-zero { left: 80vw; } .u-ok { left: 86vw; }
}

/* mobil: svislý datový tok, pořád nepravidelný */
@media (max-width: 860px) {
  .uni-stage { height: auto; margin-top: 2rem; padding: 0 var(--page-x) 90px; display: flex; flex-direction: column; gap: 22px; }
  .uni-stage::before { content: ""; position: absolute; left: calc(var(--page-x) + 10px); top: 0; bottom: 60px; width: 1px; background: var(--ink); opacity: .3; }
  .uni-stage::after { content: ""; position: absolute; left: calc(var(--page-x) + 7px); top: 0; width: 7px; height: 7px; background: var(--accent); animation: uniDrop 7s linear infinite; }
  @keyframes uniDrop { from { top: 0; } to { top: calc(100% - 70px); } }
  .uni-wires { display: none; }
  .u-obj { position: relative; left: auto !important; top: auto !important; }
  .u-xlsx { width: auto; max-width: none; margin-left: -12px; margin-right: 18%; }
  .u-log { width: auto; max-width: none; margin-left: 30%; margin-right: -6px; }
  .u-csv { width: 56%; margin-left: 8%; }
  .u-stamp { align-self: flex-end; margin-right: 6%; }
  .u-engine { width: auto; min-width: 0; height: 300px; margin: 16px -8px 16px 18px; }
  .u-dash { width: auto; max-width: none; margin-left: 22%; margin-right: calc(-1 * var(--page-x)); }
  .u-report { margin-left: 4%; }
  .u-zero { align-self: flex-end; margin-top: -40px; }
  .u-hours { margin-left: 10%; }
  .u-ok { align-self: flex-end; }
  .uni-axis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .u-out { opacity: 1; transform: none; transition: none; }
  .ue-pulse, .uni-stage::after { display: none; }
}
/* ladění kompozice: obsah přetékajících objektů zůstane čitelný */
.u-xlsx { padding-left: calc(3vw + 14px); }
.u-dash { top: 7%; padding-right: calc(4vw + 16px); }
.uni-stage { margin-top: 0; }
.u-engine { top: 12%; height: 60%; }
@media (max-width: 860px) {
  .u-xlsx { padding-left: 14px; }
  .u-dash { padding-right: calc(var(--page-x) + 16px); }
  .u-engine { height: 300px; }
}
.u-dash-row b { text-transform: none; }

/* =====================================================================
   HERO + ŽIVÝ EXCEL jako jeden canvas (bez předělu, bez nadpisu)
   ===================================================================== */
.xform--canvas { border-top: 0; }
.xform--canvas::before { /* síť z hero pokračuje dolů */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(16,16,16,.05) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(16,16,16,.05) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.js .xform--canvas .xf-sticky { height: min(90svh, 880px); min-height: 600px; padding-top: 18px; }
.xform--canvas .xf-top { justify-content: flex-end; }
.xf-sim { color: var(--muted); margin-right: auto; }
.xform--canvas .xf-steps li:not(:first-child) { color: var(--muted); }
.xform--canvas .xf-steps li.on { color: var(--ink); }
.xform--canvas .xf-steps li.now { color: var(--accent); }
.xform--canvas .xf-steps li:first-child { font-family: var(--mono); text-transform: none; letter-spacing: .02em; }
.xform--canvas .xf-body { grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr); padding-left: 0; padding-right: var(--edge); }
.xform--canvas .xf-screen { order: 1; border-left: 0; border-right: 1px solid var(--ink); }
.xform--canvas .xf-copy { order: 2; }
.xform--canvas .xf-grid { font-size: 13.5px; }
.xform--canvas .xf-count b { font-size: clamp(4rem, 9vw, 10rem); }
@media (max-width: 960px) {
  .xform--canvas .xf-body { grid-template-columns: 1fr; padding-right: 0; }
  .xform--canvas .xf-screen { order: 2; }
  .xform--canvas .xf-copy { order: 1; padding-left: var(--page-x); }
  .xform--canvas .xf-grid { font-size: 11px; }
  .xf-sim { display: none; }
}

/* Datový tok = datový vesmír dole */
.uni-lead { margin-top: 1.4rem; max-width: 52ch; font-size: var(--fs-body-lg); line-height: 1.45; }
.uni { border-top: 1px solid var(--ink); }
.xform--canvas .xf-next { display: none; }

/* Datový tok — hierarchie: artefakty mluví, engine dominuje, vpravo brutální čisto */
.uni-stage { height: clamp(600px, 52vw, 860px); }
.u-human { left: 21vw; top: -1%; z-index: 4; width: clamp(180px, 15vw, 260px); padding: 16px 16px 20px; background: #FFE66B; color: #1a1a1a; transform: rotate(4deg);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.15; font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.u-human::before { content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(230,226,214,.85); }
.u-human span { display: block; font-size: .56rem; color: #6d6420; margin-bottom: 4px; font-weight: 500; }
.u-engine { left: 38vw; top: 4%; width: 30vw; min-width: 320px; height: 82%; padding: clamp(18px, 2vw, 32px); }
.ue-name { font-size: clamp(3.4rem, 6.6vw, 8rem); }
.ue-steps { font-size: .74rem; }
.ue-vents { height: 52px; }
.u-now { left: 74vw; top: 3%; display: flex; flex-direction: column; font-size: clamp(2.6rem, 5vw, 5.6rem); font-weight: 900; font-stretch: 78%; letter-spacing: -.05em; line-height: .95; text-transform: uppercase; }
.u-now span { font-size: .64rem; color: var(--muted); letter-spacing: .12em; font-weight: 500; margin-bottom: 6px; }
.u-zero { left: 74vw; top: 30%; }
.u-hours { left: 74vw; top: 66%; }
.u-ok { left: 74vw; top: 86%; }
.uni.is-live .u-now { transition-delay: 0s; } .uni.is-live .u-zero { transition-delay: .6s; }
.uni.is-live .u-hours { transition-delay: 1.2s; } .uni.is-live .u-ok { transition-delay: 1.8s; }
@media (max-width: 1180px) { .u-engine { left: 36vw; width: 32vw; } .u-human { left: 24vw; } .u-now, .u-zero, .u-hours, .u-ok { left: 72vw; } }
@media (max-width: 860px) {
  .u-human { align-self: flex-end; margin: -40px 6% 0 0; width: 62%; }
  .u-engine { height: 340px; }
  .u-now { margin-left: 18%; font-size: clamp(2.4rem, 12vw, 3.6rem); }
}
.u-human { top: 4%; }
@media (max-width: 860px) { .uni-stage { height: auto; } .u-human { top: auto; } }
@media (max-width: 860px) { .u-human { margin-top: -14px; } }

/* =====================================================================
   TYPOGRAFICKÁ HIERARCHIE — billboard má jen hero
   HERO!!! → demonstrace → argument → služby → důkaz
   ===================================================================== */
/* argument (~60 % hero) */
.manifest { padding-block: var(--space-xl); }
.manifest-h { font-size: clamp(2.6rem, 6.4vw, 7.2rem); line-height: .95; min-height: 0; display: block; }
.manifest-h .ln:nth-child(3), .manifest-h .ln:nth-child(4) { margin-left: .9em; }
.manifest .kicker { margin-bottom: var(--space-md); }
/* běžné sekční titulky */
.uni-h { font-size: clamp(2.4rem, 4.6vw, 5rem); line-height: .95; font-stretch: 84%; font-weight: 800; }
/* důkaz: titulky casů o stupeň níž */
.case-claim { font-size: clamp(2.4rem, 5.4vw, 6.2rem); }
.case-claim--m { font-size: clamp(2.2rem, 4.6vw, 5.2rem); }
.lab-h { font-size: clamp(3.6rem, 11vw, 12rem); }

/* SLUŽBY: problém velkým, služba menším, důkaz */
.svc { min-height: 0; }
.svc-inner { padding-block: clamp(44px, 6vw, 96px); gap: clamp(1rem, 2vw, 1.8rem); }
.svc-q { font-size: clamp(2rem, 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; font-stretch: 90%; max-width: 22ch; }
.svc--ink .svc-q { color: var(--paper); }
.svc-name { display: flex; align-items: baseline; gap: .5em; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 800; font-stretch: 90%; text-transform: uppercase; letter-spacing: -.01em; }
.svc-name i { font-style: normal; color: var(--accent); }
.svc-answer { margin-top: .4rem; font-size: var(--fs-body-lg); font-weight: 700; }
.svc--ink .svc-answer { color: var(--paper); }
.svc-main2 .svc-desc { margin-top: .8rem; }
.svc-big { font-size: clamp(12rem, 32vw, 34rem); }
.svc-link { font-weight: 500; }
@media (max-width: 960px) { .svc-q { font-size: clamp(1.7rem, 7vw, 2.6rem); } .manifest-h .ln:nth-child(3), .manifest-h .ln:nth-child(4) { margin-left: 0; } }

/* DATOVÝ TOK — engine jako pohled dovnitř: běžící výpis zpracování */
.ue-name { font-size: clamp(1.8rem, 2.8vw, 3.2rem); margin-top: 0; }
.ue-log { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.ue-log li { display: grid; grid-template-columns: 7ch 8ch minmax(0, 1fr); gap: .8em; padding: 9px 0; border-bottom: 1px solid var(--line-inv); font-size: .62rem; text-transform: none; letter-spacing: .02em; opacity: .15; transition: opacity .5s; }
.ue-log time { color: var(--muted-inv); }
.ue-log b { color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.ue-log span { color: var(--paper); }
.ue-log .warn { color: #ffb199; }
.ue-log em { font-style: normal; background: var(--accent); color: var(--ink); padding: 0 .3em; }
.uni.is-live .ue-log li { opacity: 1; }
.uni.is-live .ue-log li:nth-child(2) { transition-delay: .5s; } .uni.is-live .ue-log li:nth-child(3) { transition-delay: 1s; }
.uni.is-live .ue-log li:nth-child(4) { transition-delay: 1.5s; } .uni.is-live .ue-log li:nth-child(5) { transition-delay: 2s; }
.uni.is-live .ue-log li:nth-child(6) { transition-delay: 2.5s; }
@media (max-width: 860px) { .u-engine { height: auto; } .ue-log li { grid-template-columns: 7ch minmax(0, 1fr); } .ue-log time { display: none; } .ue-log li { grid-template-columns: 8ch minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ue-log li { opacity: 1; } }
.ue-log li { grid-template-columns: 9.5ch 9.5ch minmax(0, 1fr); }
.ue-name { word-spacing: .18em; }
@media (max-width: 860px) { .ue-log li { grid-template-columns: 9.5ch minmax(0, 1fr); } }
.manifest-h { font-size: clamp(2.4rem, 5.8vw, 6.5rem); }

/* Datový tok — víc vzduchu mezi chaosem, enginem a výsledkem */
@media (min-width: 861px) {
  .uni-stage { height: clamp(700px, 60vw, 980px); margin-top: var(--space-md); }
  .u-xlsx { top: 2%; width: 28vw; }
  .u-human { left: 19vw; top: 0; }
  .u-csv { left: 21vw; top: 44%; }
  .u-log { left: 4vw; top: 62%; }
  .u-stamp { left: 18vw; top: 88%; }
  .u-engine { left: 39vw; width: 26vw; top: 8%; height: 80%; }
  .u-now { left: 77vw; top: 4%; }
  .u-zero { left: 77vw; top: 32%; }
  .u-hours { left: 77vw; top: 64%; }
  .u-ok { left: 77vw; top: 88%; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .u-xlsx { width: 32vw; } .u-engine { left: 38vw; width: 30vw; }
  .u-now, .u-zero, .u-hours, .u-ok { left: 74vw; }
}

/* AUTO-POSUN — odpočet na šipce a vypínač */
.rm-next { overflow: hidden; }
.rm-next-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.rm-next.is-counting .rm-next-bar { animation: autoBar 2s linear forwards; }
@keyframes autoBar { to { transform: scaleX(1); } }
.rm-next.is-counting .rm-next-k::after { content: " · pokračuji…"; color: var(--accent); }
.auto-toggle { position: fixed; right: var(--page-x); bottom: 92px; z-index: 48; padding: 5px 9px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); font-size: .58rem; opacity: 0; pointer-events: none; transition: opacity .3s; }
.roadmap.is-on ~ .auto-toggle { opacity: 1; pointer-events: auto; }
.auto-toggle b { color: var(--ink); font-weight: 500; }
.auto-off .auto-toggle b { color: var(--muted); }
.auto-toggle:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) { .auto-toggle { right: 12px; bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .auto-toggle { display: none; } }

/* =====================================================================
   AUTOPILOT — kybernetický odpočet před auto-posunem
   ===================================================================== */
.autopilot { position: fixed; left: 50%; bottom: 26px; z-index: 60; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); pointer-events: none; }
.autopilot[hidden] { display: none; }
.ap-frame { position: relative; background: rgba(12, 12, 11, .94); color: var(--paper); padding: 14px 18px 12px; overflow: hidden;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: apIn .35s var(--ease-out);
  --c: var(--accent);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat; }
.ap-frame::after { /* řádkový raster */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
@keyframes apIn { from { opacity: 0; transform: translateY(12px); } }
.ap-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .6rem; color: var(--muted-inv); padding-bottom: 8px; border-bottom: 1px solid var(--line-inv); }
.ap-top span:first-child { display: flex; align-items: center; gap: .6em; color: var(--accent); font-weight: 500; letter-spacing: .2em; }
.ap-led { width: 7px; height: 7px; background: var(--accent); animation: pulse .6s steps(1) infinite; }
.ap-core { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 0 8px; }
.ap-count { display: flex; align-items: flex-start; gap: 4px; line-height: .8; }
.ap-count span { font-size: .7rem; color: var(--muted-inv); margin-top: 6px; }
.ap-count b { font-family: var(--mono); font-weight: 500; font-size: clamp(3.6rem, 9vw, 5.4rem); color: var(--accent); letter-spacing: -.04em;
  text-shadow: 2px 0 0 rgba(255,90,42,.35), -2px 0 0 rgba(242,240,234,.18); animation: apTick 1s steps(1) infinite; }
@keyframes apTick { 0% { opacity: 1; } 8% { opacity: .35; transform: translateX(2px); } 12% { opacity: 1; transform: none; } }
.ap-info p { font-size: .58rem; color: var(--muted-inv); }
.ap-target { font-family: var(--font); font-size: clamp(1.1rem, 2vw, 1.5rem) !important; font-weight: 800; font-stretch: 86%; text-transform: uppercase; color: var(--paper) !important; letter-spacing: -.01em; margin: 2px 0 6px; }
.ap-sess { display: none; }
.ap-sess b { color: var(--accent); font-weight: 500; }
.ap-bar { height: 3px; background: rgba(242,240,234,.1); position: relative; }
.ap-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.autopilot.is-count .ap-bar i { animation: apBar 3s linear forwards; }
@keyframes apBar { to { transform: scaleX(1); } }
.ap-hint { margin-top: 8px; font-size: .56rem; color: var(--muted-inv); text-align: center; }
/* relace běží (už posunul): kompaktní lišta se stavem a návratem */
.autopilot.is-session:not(.is-count) .ap-count, .autopilot.is-session:not(.is-count) .ap-bar { display: none; }
.autopilot.is-session .ap-sess { display: block; }
.autopilot.is-session:not(.is-count) .ap-core { grid-template-columns: 1fr; padding: 6px 0 2px; }
.autopilot.is-session:not(.is-count) .ap-info > p:first-child, .autopilot.is-session:not(.is-count) .ap-target { display: none; }
.autopilot.is-session:not(.is-count) .ap-top span:last-child::before { content: "// běží · "; }
.autopilot.is-session:not(.is-count) .ap-top span:last-child { font-size: 0; }
.autopilot.is-session:not(.is-count) .ap-top span:last-child::before { font-size: .6rem; }
@media (max-width: 640px) { .autopilot { bottom: 84px; } }

/* AUTOPILOT — web před odpočtem krátce „probliká" (2 nízkokontrastní záblesky, bezpečné) */
body::after { content: ""; position: fixed; inset: 0; z-index: 59; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, transparent 0, rgba(255,90,42,.5) 50%, transparent 100%) 0 -20vh / 100% 18vh no-repeat,
    repeating-linear-gradient(to bottom, rgba(16,16,16,.16) 0 1px, transparent 1px 3px),
    rgba(255,90,42,.05); }
body.ap-flicker::after { animation: apFlick 1.4s linear forwards; }
@keyframes apFlick {
  0% { opacity: 0; background-position: 0 -20vh, 0 0, 0 0; }
  12% { opacity: .9; } 18% { opacity: .15; }
  40% { opacity: .75; } 46% { opacity: .1; }
  70% { opacity: .6; }
  100% { opacity: .35; background-position: 0 110vh, 0 0, 0 0; }
}
body.ap-flicker .head, body.ap-flicker .roadmap { animation: apShift 1.4s steps(1) forwards; }
@keyframes apShift { 12% { transform: translateX(3px); } 16% { transform: none; } 40% { transform: translateX(-2px); } 44% { transform: none; } }
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
/* autopilot = web volá o pozornost */
.autopilot { pointer-events: none; }
.ap-cta { pointer-events: auto; }
.ap-call { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; font-stretch: 86%; letter-spacing: -.02em; text-transform: uppercase; margin-top: 10px; line-height: 1.05; }
.ap-top-r { animation: pulse 1.2s steps(1) infinite; }
.ap-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 8px; font-size: .56rem; color: var(--muted-inv); }
.ap-cta { color: var(--ink); background: var(--accent); padding: 6px 10px; text-decoration: none; font-weight: 500; white-space: nowrap; }
.ap-cta:hover { background: var(--paper); }
.autopilot.is-session:not(.is-count) .ap-call { display: none; }
.autopilot.is-session:not(.is-count) .ap-top span:last-child::before { content: "// běžím sám · "; }
@media (max-width: 640px) { .ap-foot { flex-direction: column; align-items: stretch; text-align: center; } .ap-cta { text-align: center; } .ap-call { font-size: 1.15rem; } }

/* KURZOR — zaměřovač (jen myš; dotyk a textová pole beze změny) */
@media (pointer: fine) {
  html, body { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><g fill="none" stroke-linecap="square"><path d="M13 2v7M13 17v7M2 13h7M17 13h7" stroke="%23F2F0EA" stroke-width="4"/><path d="M13 2v7M13 17v7M2 13h7M17 13h7" stroke="%23101010" stroke-width="1.6"/></g><rect x="11" y="11" width="4" height="4" fill="%23FF5A2A" stroke="%23F2F0EA" stroke-width="1"/></svg>') 13 13, crosshair; }
  a, button, [role="button"], .act, label, summary, .rm-cells a, .xf-steps li { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" stroke-linecap="square"><path d="M3 10V3h7M22 3h7v7M29 22v7h-7M10 29H3v-7" stroke="%23F2F0EA" stroke-width="4.5"/><path d="M3 10V3h7M22 3h7v7M29 22v7h-7M10 29H3v-7" stroke="%23FF5A2A" stroke-width="2.2"/></g><rect x="13.5" y="13.5" width="5" height="5" fill="%23101010" stroke="%23F2F0EA" stroke-width="1"/></svg>') 16 16, pointer; }
  input, textarea, select, [contenteditable] { cursor: text; }
}
@media (max-width: 640px) { .autopilot { bottom: 112px; } }

/* STŘELNICE — portrét jako terč (arkádově, bez krve) */
.hero-portrait .hp-frame { pointer-events: auto; }
@media (pointer: fine) { .hero-portrait .hp-frame { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="13" fill="none" stroke="%23F2F0EA" stroke-width="4"/><circle cx="20" cy="20" r="13" fill="none" stroke="%23FF5A2A" stroke-width="2"/><path d="M20 2v10M20 28v10M2 20h10M28 20h10" stroke="%23F2F0EA" stroke-width="4"/><path d="M20 2v10M20 28v10M2 20h10M28 20h10" stroke="%23FF5A2A" stroke-width="2"/><circle cx="20" cy="20" r="2" fill="%23FF5A2A"/></svg>') 20 20, crosshair; } }
.hp-hits { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.hp-hit { position: absolute; width: 0; height: 0; }
.hp-hit i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 2px solid var(--accent); border-radius: 50%; animation: hitRing .6s var(--ease-out) forwards; }
.hp-hit i::before, .hp-hit i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 3px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); }
.hp-hit i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hp-hit b { position: absolute; left: 20px; top: -34px; white-space: nowrap; background: var(--ink); color: var(--accent); padding: 3px 7px; font-size: .62rem; font-weight: 500; animation: hitTag 1.4s steps(1) forwards; }
@keyframes hitRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes hitTag { 0%, 70% { opacity: 1; } 80% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 0; } }
.hero-portrait.is-hit .hp-base { animation: hitShake .45s steps(1); }
.hero-portrait.is-hit .hp-g1, .hero-portrait.is-hit .hp-g2 { animation: hitSlice .45s steps(1); }
@keyframes hitShake { 0% { transform: translate(6px, -2px); opacity: .5; } 25% { transform: translate(-8px, 2px); opacity: 1; } 50% { transform: translate(4px, 0); } 75% { transform: none; opacity: .7; } 100% { transform: none; opacity: 1; } }
@keyframes hitSlice { 0% { opacity: 1; transform: translateX(18px); clip-path: inset(20% 0 60% 0); } 30% { opacity: 1; transform: translateX(-24px); clip-path: inset(55% 0 30% 0); } 60% { opacity: 1; transform: translateX(10px); clip-path: inset(35% 0 50% 0); } 100% { opacity: 0; } }
.hero-portrait.is-down .hp-frame { animation: downOut 1s steps(6) forwards; }
@keyframes downOut { 0% { opacity: 1; } 20% { opacity: .2; } 30% { opacity: .8; filter: none; } 60% { opacity: .15; } 100% { opacity: .06; filter: grayscale(1) contrast(3); } }
.hp-down { position: absolute; left: 18%; top: 30%; z-index: 6; background: var(--ink); color: var(--paper); padding: 16px 18px; pointer-events: auto; animation: apIn .35s var(--ease-out); max-width: 280px; }
.hp-down[hidden] { display: none; }
.hp-down p.mono { color: var(--accent); font-size: .6rem; }
.hp-down-h { font-size: 1.5rem; font-weight: 800; font-stretch: 86%; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; margin: 6px 0 10px; }
.hp-down a { display: inline-block; background: var(--accent); color: var(--ink); text-decoration: none; font-weight: 700; padding: 8px 12px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .hero-portrait.is-hit .hp-base, .hero-portrait.is-hit .hp-g1, .hero-portrait.is-hit .hp-g2 { animation: none; } }

/* STŘELNICE — titulek nechytá kliky, nad portrétem sniperský zaměřovač; vypínač zvuku */
.hero-title { pointer-events: none; }
@media (pointer: fine) { .hero-portrait .hp-frame { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none"><circle cx="24" cy="24" r="19" stroke="%23F2F0EA" stroke-width="4"/><circle cx="24" cy="24" r="19" stroke="%23101010" stroke-width="1.6"/><path d="M24 1v17M24 30v17M1 24h17M30 24h17" stroke="%23F2F0EA" stroke-width="3.6"/><path d="M24 1v17M24 30v17M1 24h17M30 24h17" stroke="%23101010" stroke-width="1.4"/><path d="M24 8v3M24 37v3M8 24h3M37 24h3M24 13v2M24 33v2M13 24h2M33 24h2" stroke="%23FF5A2A" stroke-width="1.6"/></g><circle cx="24" cy="24" r="1.8" fill="%23FF5A2A"/></svg>') 24 24, crosshair; } }
.sound-toggle { position: fixed; right: var(--page-x); bottom: 120px; z-index: 48; padding: 5px 9px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); font-size: .58rem; opacity: 0; pointer-events: none; transition: opacity .3s; }
.roadmap.is-on ~ .sound-toggle { opacity: 1; pointer-events: auto; }
.sound-toggle b { color: var(--ink); font-weight: 500; }
.sound-toggle[aria-pressed="false"] b { color: var(--muted); }
.sound-toggle:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) { .sound-toggle { right: auto; left: 12px; bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .sound-toggle { display: none; } }

/* flíček po zásahu (paintball, ne krev) — zmizí po restartu portrétu */
.hp-splat { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path fill="%23FF5A2A" d="M31 8c3 6 1 11 6 12s9-6 12-2-4 8-2 11 10 2 9 7-9 2-11 5 3 10-2 11-6-7-10-6-5 9-10 7 1-9-2-12-11 1-11-4 8-5 8-9-8-6-5-10 8 1 11-2-3-10 1-11 3 5 6 3z"/><circle cx="53" cy="12" r="2.6" fill="%23FF5A2A"/><circle cx="8" cy="46" r="2" fill="%23FF5A2A"/><circle cx="50" cy="52" r="1.6" fill="%23FF5A2A"/><circle cx="29" cy="30" r="5" fill="%23101010" opacity=".55"/></svg>') center / contain no-repeat;
  transform: rotate(var(--r)) scale(var(--s)); mix-blend-mode: multiply; opacity: .92; animation: splatIn .18s var(--ease-out); }
@keyframes splatIn { from { transform: rotate(var(--r)) scale(.2); } }

/* =====================================================================
   HERNÍ VRSTVA (game.js) — zapne se až po „Ano“ na otázku po prvním výstřelu
   ===================================================================== */
/* otázka */
.g-ask { position: absolute; left: 8%; top: 22%; z-index: 8; width: min(360px, 88vw); background: rgba(12,12,11,.96); color: var(--paper); padding: 16px 18px 18px; pointer-events: auto; animation: apIn .35s var(--ease-out);
  --c: var(--accent);
  background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; }
.g-ask-top { display: flex; justify-content: space-between; font-size: .58rem; color: var(--muted-inv); padding-bottom: 8px; border-bottom: 1px solid var(--line-inv); }
.g-ask-top span:first-child { display: flex; align-items: center; gap: .6em; color: var(--accent); }
.g-ask-h { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; font-stretch: 80%; letter-spacing: -.04em; text-transform: uppercase; line-height: .95; margin: 12px 0 8px; }
.g-ask-sub { font-size: .92rem; color: var(--muted-inv); line-height: 1.4; }
.g-ask-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.g-yes { background: var(--accent); color: var(--ink); font-weight: 800; text-transform: uppercase; padding: 11px 16px; font-stretch: 90%; }
.g-yes:hover { background: var(--paper); }
.g-no { color: var(--muted-inv); padding: 11px 6px; font-size: .64rem; }
.g-no:hover { color: var(--paper); }
@media (max-width: 960px) { .g-ask { left: -40vw; top: 18%; } }
@media (max-width: 640px) { .g-ask { position: fixed; left: 12px; right: 12px; top: auto; bottom: 90px; width: auto; } }

/* HUD */
.g-hud { position: fixed; right: var(--page-x); top: calc(var(--head-h) + 8px); z-index: 49; display: flex; gap: 0; background: var(--ink); color: var(--paper); font-size: .62rem; transition: top .3s var(--ease-out); }
.g-hud[hidden] { display: none; }
.g-hud.is-on { top: calc(var(--head-h) + var(--rm-h) + 8px); }
.g-hud > span { padding: 7px 10px; border-left: 1px solid var(--line-inv); }
.g-hud > span:first-child { border-left: 0; }
.g-hud b { color: var(--accent); font-weight: 500; }
.g-hud.bump { animation: hudBump .4s var(--ease-out); }
@keyframes hudBump { 30% { transform: scale(1.08); } }
.rm-cells li.g-got a b::after { content: "✓"; margin-left: 3px; color: var(--accent); }
@media (max-width: 640px) { .g-hud { right: 12px; font-size: .56rem; } .g-hud > span { padding: 5px 7px; } }

/* oznámení a létající body */
.g-toasts { position: fixed; right: var(--page-x); top: calc(var(--head-h) + var(--rm-h) + 52px); z-index: 61; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.g-toast { background: rgba(12,12,11,.96); color: var(--paper); padding: 10px 14px; max-width: 320px; border-left: 4px solid var(--accent); animation: apIn .3s var(--ease-out); transition: opacity .4s, transform .4s; }
.g-toast.out { opacity: 0; transform: translateX(20px); }
.g-toast p { font-size: .56rem; color: var(--accent); }
.g-toast b { display: block; font-weight: 800; text-transform: uppercase; font-stretch: 88%; letter-spacing: -.01em; margin-top: 2px; }
.g-toast span { display: block; font-size: .82rem; color: var(--muted-inv); margin-top: 3px; line-height: 1.35; }
.g-toast.is-big b { font-size: 1.15rem; }
.g-float { position: fixed; z-index: 62; pointer-events: none; color: var(--accent); background: var(--ink); padding: 2px 6px; font-size: .62rem; font-weight: 500; transform: translate(-50%, -100%); animation: xpFloat 1.2s var(--ease-out) forwards; }
@keyframes xpFloat { to { transform: translate(-50%, -260%); opacity: 0; } }

/* moucha = bug (jen ve hře) */
.g-fly { display: none; position: absolute; z-index: 7; width: 34px; height: 34px; padding: 0; pointer-events: auto; }
.g-on .g-fly { display: block; }
.g-fly svg { width: 100%; height: 100%; fill: var(--ink); }
.g-fly .g-wing { fill: rgba(170,190,200,.55); transform-origin: 20px 13px; animation: wing .06s linear infinite alternate; }
.g-fly .g-eye { fill: var(--accent); }
@keyframes wing { to { transform: scaleY(.4); } }
.g-fly.is-dead { animation: flyDie .5s forwards; pointer-events: none; }
@keyframes flyDie { to { transform: translate(-50%, 40px) rotate(180deg) scale(.4); opacity: 0; } }

/* herní tlačítka v sekcích (styl společný) */
.g-hint, .g-excel { font-size: .62rem; color: var(--muted); }
.g-excel { color: var(--ink); background: var(--paper-2); padding: 6px 8px; }
.g-excel b { color: var(--accent); }
.xf-row > span.err { cursor: inherit; }
.g-on .xf-row > span.err:not(.g-fixed) { outline: 1px dashed rgba(255,90,42,.5); outline-offset: -3px; }
.xf-row > span.g-fixed { text-decoration: line-through; text-decoration-color: var(--accent); background: #E8F5E9 !important; }
.g-hint { display: none; }
.g-on .g-hint { display: block; }
.g-hold, .g-know, .g-run, .g-evidence, .g-luck { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5em; padding: 9px 14px; font-size: .66rem; font-weight: 500; border: 1px solid currentColor; }
.g-hold { margin-top: var(--space-md); color: var(--accent); }
.g-hold i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.g-hold.is-holding i { transition: transform 1.2s linear; transform: scaleX(1); }
.g-hold.is-done { background: var(--accent); color: var(--ink); }
.manifest-h.g-struck .ln:nth-child(3) > span, .manifest-h.g-struck .ln:nth-child(4) > span { text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: var(--paper); }
.g-know { align-self: flex-start; }
.g-know.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.g-run { position: absolute; right: clamp(14px, 1.6vw, 24px); top: clamp(44px, 4vw, 60px); color: var(--accent); background: transparent; }
.g-run:hover { background: var(--accent); color: var(--ink); }
.uni.g-boost .uni-wires circle { r: 5; }
.uni.g-boost .u-engine { box-shadow: 0 0 0 2px var(--accent), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--ink); }
.g-evidence { align-self: center; margin-left: .8rem; font-size: .66rem !important; letter-spacing: .12em; color: var(--ink); font-family: var(--mono); }
.g-evidence.is-on { background: var(--ink); color: var(--accent); }
.g-luck { grid-column: 1 / -1; justify-self: start; color: var(--accent); }
.g-luck:hover { background: var(--accent); color: var(--ink); }
.lab-item.g-spin { outline: 2px solid rgba(255,90,42,.5); outline-offset: 10px; }
.lab-item.g-picked { outline: 3px solid var(--accent); outline-offset: 12px; }
.g-witness { position: relative; }
.g-on .g-witness:not(.is-verified)::after { content: "◎ klikněte: ověřit svědka"; position: absolute; right: 0; top: 18px; font: 500 .56rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-witness.is-verified::after { content: "◉ ověřeno"; position: absolute; right: 0; top: 18px; font: 500 .56rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.g-on .step.g-check { cursor: inherit; }
.step.is-checked .step-no { color: var(--accent); }
.step.is-checked .step-t::before { content: "✓ "; color: var(--accent); }
.g-on .tier.g-tier:hover { background: rgba(255,90,42,.05); }
.tier.is-picked { box-shadow: inset 6px 0 0 var(--accent); background: rgba(255,90,42,.07); }
.tier.is-picked .tier-price { color: var(--accent); }
.g-evidence, .g-know, .g-run, .g-luck, .g-hold { display: none; }
.g-on .g-evidence, .g-on .g-know, .g-on .g-run, .g-on .g-luck, .g-on .g-hold { display: inline-flex; }

/* konec mise */
.g-mission { display: none; margin-bottom: var(--space-lg); border: 1px solid var(--line-inv); border-left: 4px solid var(--accent); padding: 18px 20px; max-width: 760px; }
.g-on .g-mission { display: block; }
.g-m-top { display: flex; justify-content: space-between; gap: 1rem; color: var(--accent); font-size: .6rem; }
.g-m-h { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 800; font-stretch: 86%; text-transform: uppercase; letter-spacing: -.02em; margin: 10px 0 6px; line-height: 1; }
.g-m-sub { color: var(--muted-inv); }
.g-m-btn { margin-top: 14px; background: var(--accent); color: var(--ink); padding: 11px 16px; font-weight: 500; }
.g-m-btn:hover { background: var(--paper); }

/* kvíz */
.g-quiz { position: fixed; left: var(--page-x); bottom: 26px; z-index: 61; width: min(380px, calc(100% - 24px)); background: rgba(12,12,11,.96); color: var(--paper); padding: 14px 16px 16px; border-top: 3px solid var(--accent); animation: apIn .35s var(--ease-out); transition: opacity .3s; }
.g-quiz.out { opacity: 0; }
.g-q-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-size: .58rem; }
.g-q-x { color: var(--muted-inv); font-size: 1.2rem; line-height: 1; padding: 0 4px; }
.g-q-h { font-size: 1.1rem; font-weight: 700; line-height: 1.25; margin: 8px 0 12px; }
.g-q-opts { display: grid; gap: 6px; }
.g-q-opts button { text-align: left; padding: 9px 12px; border: 1px solid var(--line-inv); color: var(--paper); font-size: .68rem; letter-spacing: .06em; }
.g-q-opts button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.g-q-opts .is-right { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.g-q-opts .is-wrong { background: #7a1f10; border-color: #7a1f10; }
@media (max-width: 640px) { .g-quiz { left: 12px; bottom: 84px; } }
.g-run { position: static; align-self: flex-start; margin-top: 4px; }
@media (min-width: 641px) { .g-quiz { bottom: 26px; left: auto; right: calc(var(--page-x) + 220px); } }
@media (max-width: 640px) { .g-ask { z-index: 70; } }

/* výzva k mouše */
.g-dare { display: none; position: absolute; left: 30%; top: -2%; z-index: 7; background: var(--accent); color: var(--ink); padding: 6px 10px; font-size: .62rem; font-weight: 500; pointer-events: none; animation: dareNudge 1.8s ease-in-out infinite; }
.g-on .g-dare { display: block; }
.g-dare b { font-weight: 700; margin-right: .5em; }
.g-dare span { background: var(--ink); color: var(--accent); padding: 1px 5px; margin-left: .4em; }
.g-dare.is-near { animation-duration: .5s; }
.g-dare.is-done { background: var(--ink); color: var(--accent); animation: none; }
@keyframes dareNudge { 50% { transform: translateY(-4px); } }
.g-fly { width: 40px; height: 40px; }
@media (max-width: 640px) { .g-dare { left: 10%; top: 2%; } }
.g-dare { left: 16%; top: 38%; } @media (max-width: 640px) { .g-dare { left: 10%; top: 44%; } }

/* ===== motýl místo mouchy, větší body, start hry ===== */
.g-fly { width: 52px; height: 44px; }
.g-fly svg { fill: none; }
.g-fly .g-wl, .g-fly .g-wr { fill: var(--accent); stroke: var(--ink); stroke-width: 1.2; transform-box: fill-box; animation: flap .32s ease-in-out infinite alternate; }
.g-fly .g-wl { transform-origin: right center; } .g-fly .g-wr { transform-origin: left center; }
@keyframes flap { to { transform: scaleX(.25); } }
.g-fly .g-body { fill: var(--ink); } .g-fly .g-ant { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.g-fly.is-dead { animation: bflyAway 1.2s var(--ease-out) forwards; }
@keyframes bflyAway { 40% { transform: translate(-50%, -40px) rotate(-20deg); } to { transform: translate(40vw, -60vh) rotate(30deg) scale(.5); opacity: 0; } }
.g-scold { position: fixed; z-index: 72; transform: translate(-50%, -120%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 10px 14px; box-shadow: 6px 6px 0 var(--accent); pointer-events: none; animation: scoldIn .35s cubic-bezier(.34,1.56,.64,1); text-align: center; }
.g-scold b { display: block; font-size: 1.5rem; font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; }
.g-scold span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
@keyframes scoldIn { from { transform: translate(-50%, -80%) scale(.6) rotate(-6deg); opacity: 0; } }
/* HUD větší a viditelný */
.g-hud { font-size: .78rem; box-shadow: 6px 6px 0 var(--accent); }
.g-hud > span { padding: 10px 14px; }
.g-hud .g-xp b { font-size: 1.35rem; font-family: var(--font); font-weight: 900; letter-spacing: -.02em; }
.g-hud.bump { animation: hudBump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes hudBump { 30% { transform: scale(1.18); } }
.g-hud.is-intro { animation: hudIntro .8s ease-in-out 3; }
@keyframes hudIntro { 50% { box-shadow: 0 0 0 8px rgba(255,90,42,.45), 6px 6px 0 var(--accent); transform: scale(1.1); } }
.g-float { font-size: 1.1rem; padding: 4px 10px; font-family: var(--font); font-weight: 900; }
@media (max-width: 640px) { .g-hud { font-size: .64rem; } .g-hud > span { padding: 7px 9px; } .g-hud .g-xp b { font-size: 1.05rem; } }
/* start hry */
.g-splash { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(12,12,11,.9); color: var(--paper); animation: apIn .3s var(--ease-out); cursor: pointer; transition: opacity .4s; }
.g-splash.out { opacity: 0; }
.g-sp-in { padding: 24px; max-width: 640px; }
.g-sp-in > p.mono { color: var(--accent); font-size: .72rem; }
.g-sp-h { font-size: clamp(4rem, 13vw, 10rem); line-height: .88; font-weight: 900; font-stretch: 76%; letter-spacing: -.05em; text-transform: uppercase; margin: 10px 0 22px; animation: spPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes spPop { from { transform: scale(.6); opacity: 0; } }
.g-sp-in ul { display: grid; gap: 8px; font-size: .8rem; }
.g-sp-in li b { display: inline-block; min-width: 4.5ch; color: var(--accent); font-size: 1.1rem; }
.g-sp-go { margin-top: 20px; color: var(--muted-inv); font-size: .7rem; }
.g-fly .g-wl, .g-fly .g-wr { animation-duration: var(--flap, .32s); }

/* SNIPER — zaměřovač s laserem nad portrétem */
.hero-portrait .hp-frame.sn-hide, .hero-portrait .hp-frame.sn-hide * , .sn-hide ~ .g-fly { cursor: none !important; }
.hero-portrait:has(.sn-hide) .g-fly { cursor: none; }
.sniper { position: fixed; inset: 0; z-index: 75; pointer-events: none; opacity: 0; transition: opacity .15s; }
.sniper.is-on { opacity: 1; }
.sn-laser { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#sn-beam { stroke: rgba(255, 40, 20, .28); stroke-width: 7; stroke-linecap: round; filter: blur(3px); }
#sn-core { stroke: #ff2a14; stroke-width: 1.4; }
.sn-scope { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sn-scope svg { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; overflow: visible; }
.sn-r1 { fill: rgba(16,16,16,.06); stroke: var(--ink); stroke-width: 1.6; }
.sn-r2 { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 5; animation: snSpin 6s linear infinite; transform-origin: 60px 60px; }
@keyframes snSpin { to { transform: rotate(360deg); } }
.sn-x { stroke: var(--ink); stroke-width: 1.4; }
.sn-tick { stroke: var(--accent); stroke-width: 1.8; }
.sn-dot { fill: #ff2a14; filter: drop-shadow(0 0 4px #ff2a14); }
.sn-read { position: absolute; left: 44px; top: 44px; white-space: nowrap; font-size: .56rem; background: var(--ink); color: var(--accent); padding: 2px 6px; }
.sn-lock { position: absolute; left: 44px; top: -58px; font-size: .56rem; background: #ff2a14; color: #fff; padding: 2px 6px; opacity: 0; }
.sn-scope.is-lock .sn-r1, .sn-scope.is-lock .sn-x { stroke: #ff2a14; }
.sn-scope.is-lock .sn-lock { opacity: 1; animation: pulse .4s steps(1) infinite; }
.sn-scope.is-lock svg { transform: scale(.82); transition: transform .15s; }
.sn-scope.is-fire svg { animation: snKick .22s ease-out; }
@keyframes snKick { 30% { transform: translate(6px, -10px) scale(1.12); } }
.g-no { border: 1px solid var(--line-inv); padding: 11px 16px; font-weight: 800; text-transform: uppercase; font-stretch: 90%; font-size: .95rem; color: var(--muted-inv); }
.g-no:hover { border-color: var(--paper); color: var(--paper); }

/* závěrečný kvíz */
.g-quiz--final { left: 50% !important; right: auto !important; top: 50%; bottom: auto !important; transform: translate(-50%, -50%); width: min(520px, calc(100% - 24px)); padding: 20px 22px 22px; box-shadow: 10px 10px 0 var(--accent); }
.g-quiz--final .g-q-h { font-size: 1.35rem; }
.g-q-prog { height: 3px; background: var(--line-inv); margin-top: 10px; }
.g-q-prog i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.g-q-score { font-size: 4rem !important; font-weight: 900; font-stretch: 78%; color: var(--accent); margin: 6px 0 4px !important; }
.g-q-sub { color: var(--muted-inv); }
.g-m-quiz { display: block; margin-top: 14px; border: 1px solid var(--accent); color: var(--accent); padding: 11px 16px; font-weight: 500; }
.g-m-quiz:hover { background: var(--accent); color: var(--ink); }
.g-m-qdone { margin-top: 12px; color: var(--accent); font-size: .66rem; }
body .g-quiz--final { opacity: 1; animation: fqIn .35s var(--ease-out); z-index: 85; }
body .g-quiz--final.out { opacity: 0; }
@keyframes fqIn { from { opacity: 0; transform: translate(-50%, -44%); } }
.g-quiz--final { background: #0c0c0b; }

/* =====================================================================
   HERNÍ VRSTVA — zdrženlivý jazyk (feedback 26. 9.: žádné bubliny,
   poskakování, pulzování, výkřiky ani emoji; výstupy jako systém)
   ===================================================================== */
.g-fly { display: block; }
.g-fly .g-wl, .g-fly .g-wr { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.g-fly .g-wl path:first-child, .g-fly .g-wr path:first-child { fill: var(--accent); }
.g-fly.is-dead { animation: bflyOut .6s ease-out forwards; }
@keyframes bflyOut { to { opacity: 0; transform: translate(-50%, -80%); } }
.g-dare { display: block; animation: none !important; background: none; color: var(--ink); padding: 0; font-size: .6rem; border-bottom: 1px solid var(--ink); }
.g-dare:empty { display: none; }
.g-log { position: fixed; z-index: 72; margin: 0; transform: translate(14px, -130%); background: var(--ink); color: var(--paper); padding: 4px 8px; font-size: .62rem; pointer-events: none; white-space: nowrap; animation: logFade 1.8s ease-out forwards; }
@keyframes logFade { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.g-scold, .g-splash { display: none !important; }
.g-hud { box-shadow: none; }
.g-hud.bump, .g-hud.is-intro { animation: none; }
.g-hud .g-xp b { font-family: var(--mono); font-weight: 500; font-size: .9rem; letter-spacing: .04em; }
.g-float { font-family: var(--mono); font-weight: 500; font-size: .66rem; padding: 2px 6px; animation: xpRise 1.1s ease-out forwards; }
@keyframes xpRise { from { opacity: 0; transform: translate(-50%, -80%); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -180%); } }
.g-toast { animation: logFade2 .3s ease-out; border-left-width: 2px; }
@keyframes logFade2 { from { opacity: 0; } }
.g-toast b { text-transform: none; font-stretch: 100%; font-weight: 700; letter-spacing: 0; }
.g-toast.is-big b { font-size: 1rem; }
.g-ask { animation: logFade2 .3s ease-out; background-image: none; border: 1px solid var(--line-inv); border-top: 2px solid var(--accent); }
.g-ask-h { text-transform: none; font-weight: 800; font-stretch: 90%; letter-spacing: -.03em; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.g-yes, .g-no { text-transform: none; }
.sn-scope.is-lock .sn-lock { animation: none; }
.sn-r2 { animation: none; }
.hp-splat { background: none; width: 0; height: 0; margin: 0; mix-blend-mode: normal; animation: none; transform: none; }
.hp-splat::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--paper); }
.hp-splat::after { content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink); }
.hp-hit i { animation-duration: .4s; }
.g-quiz--final { box-shadow: none; border: 1px solid var(--line-inv); border-top: 2px solid var(--accent); }
.g-q-score { font-family: var(--mono); font-weight: 500 !important; font-size: 2.4rem !important; }
.g-know.is-on, .g-evidence.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lab-item.g-spin { outline-width: 1px; }
.hp-down { animation: logFade2 .3s ease-out; }
.hp-down-h { text-transform: none; }

/* KLID dokud návštěvník nevyprovokuje akci: portrét stojí, sken/glitch běží jen při najetí nebo ve hře */
.hero-portrait .hp-base, .hero-portrait .hp-scan, .hero-portrait .hp-g1, .hero-portrait .hp-g2, .hero-portrait .hp-beam, .hero-portrait .cross, .hero-log .dot { animation-play-state: paused; }
.hero-portrait:hover .hp-base, .hero-portrait:hover .hp-scan, .hero-portrait:hover .hp-g1, .hero-portrait:hover .hp-g2, .hero-portrait:hover .hp-beam, .hero-portrait:hover .cross,
.g-on .hero-portrait .hp-base, .g-on .hero-portrait .hp-scan, .g-on .hero-portrait .hp-g1, .g-on .hero-portrait .hp-g2, .g-on .hero-portrait .hp-beam, .g-on .hero-portrait .cross, .g-on .hero-log .dot { animation-play-state: running; }
.hero-portrait .hp-read::before { animation: none; }

/* motýl až po 2. výstřelu */
.g-fly { display: none; }
.g-bfly-on .g-fly { display: block; animation: bflyIn 1.2s ease-out; }
@keyframes bflyIn { from { opacity: 0; } }
.g-bfly-on .g-fly.is-dead { animation: bflyOut .6s ease-out forwards; }

/* hezčí motýl: barvy jsou přímo v SVG, CSS jen mává */
.g-fly { width: 56px; height: 46px; }
.g-fly .g-wl, .g-fly .g-wr { fill: unset; stroke: unset; }
.g-fly .g-wl path:first-child, .g-fly .g-wr path:first-child { fill: #FF5A2A; }
.g-fly .g-wl { transform-origin: 32px 24px; transform-box: view-box; }
.g-fly .g-wr { transform-origin: 32px 24px; transform-box: view-box; }
@keyframes flap { to { transform: scaleX(.35); } }

/* laser z okraje pryč — laser jen jako červený bod v zaměřovači */
.sn-laser { display: none; }
.sn-dot { r: 3; }
.sn-scope::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(255,42,20,.55), rgba(255,42,20,0) 70%); }
/* mávání: křídla se skládají k tělu */
@keyframes flap { 0% { transform: scaleX(1); } 100% { transform: scaleX(.14) scaleY(.96); } }
.g-fly .g-wl, .g-fly .g-wr { animation: flap var(--flap, .2s) ease-in-out infinite alternate; }

/* ===== kolo „3 motýli“ + výsledky ===== */
.g-fly--round { display: block !important; animation: bflyIn .8s ease-out; }
.g-fly--intro.is-away { display: none !important; }
.g-res { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(12,12,11,.55); padding: 16px; animation: logFade2 .3s ease-out; }
.g-res-in { width: min(760px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: #0c0c0b; color: var(--paper); border: 1px solid var(--line-inv); border-top: 2px solid var(--accent); padding: clamp(18px, 3vw, 30px); }
.g-res-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-size: .6rem; }
.g-res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 14px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-inv); }
.g-res-q { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.g-res-v { margin-top: 6px; color: var(--muted-inv); }
.g-res-score { font-size: 1rem; color: var(--muted-inv); white-space: nowrap; }
.g-res-score b { font-size: clamp(2.8rem, 6vw, 4rem); color: var(--accent); font-weight: 500; letter-spacing: -.04em; }
.g-res-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-inv); margin-bottom: 18px; }
.g-res-kpi div { background: #0c0c0b; padding: 10px 12px 12px 0; }
.g-res-kpi dt { font-size: .56rem; color: var(--muted-inv); }
.g-res-kpi dd { font-size: 1.05rem; color: var(--paper); margin-top: 4px; text-transform: none; letter-spacing: .02em; }
.g-res-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: end; }
.g-res-tab { width: 100%; border-collapse: collapse; font-size: .62rem; text-transform: none; letter-spacing: .02em; }
.g-res-tab th { text-align: left; color: var(--muted-inv); font-weight: 500; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-inv); text-transform: uppercase; letter-spacing: .1em; font-size: .54rem; }
.g-res-tab td { padding: 7px 8px 7px 0; border-bottom: 1px solid rgba(242,240,234,.08); }
.g-res-chart { width: 100%; height: auto; }
.g-res-chart rect { fill: var(--accent); }
.g-res-chart text { fill: var(--muted-inv); font: 500 7px var(--mono); text-anchor: middle; }
.g-res-best { margin-top: 14px; color: var(--accent); font-size: .62rem; }
.g-res-note { margin-top: 8px; color: var(--muted-inv); font-size: .9rem; max-width: 60ch; }
.g-res-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 640px) {
  .g-res-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-res-body { grid-template-columns: 1fr; }
  .g-res-tab th:nth-child(6), .g-res-tab td:nth-child(6) { display: none; }
}

/* souhrn, žebříček */
.g-res-sum { margin: 2px 0 6px; font-size: 1.02rem; }
.g-res-sum span { color: var(--accent); }
.g-board { margin-top: 16px; border-top: 1px solid var(--line-inv); padding-top: 12px; }
.g-board:empty { display: none; }
.gb-h { font-size: .58rem; color: var(--muted-inv); margin-bottom: 6px; }
.g-board ol { font-size: .72rem; text-transform: none; letter-spacing: .02em; }
.g-board li { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) 6ch 7ch; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(242,240,234,.08); }
.gb-no { color: var(--accent); } .gb-sc { color: var(--paper); } .gb-t { color: var(--muted-inv); text-align: right; }
.gb-form { margin-top: 12px; display: grid; gap: 6px; }
.gb-form label { font-size: .6rem; color: var(--accent); }
.gb-form div { display: flex; gap: 8px; }
.gb-form input { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--line-inv); border-left: 2px solid var(--accent); color: var(--paper); padding: 9px 10px; font: 1rem var(--font); border-radius: 0; }
.gb-form input:focus { outline: none; border-color: var(--paper); border-left-color: var(--accent); }
.gb-form button { background: var(--accent); color: var(--ink); padding: 0 14px; font-weight: 500; }
.g-pub { position: absolute; left: -2%; bottom: 7%; z-index: 4; pointer-events: none; color: var(--ink); font-size: .56rem; line-height: 1.7; background: rgba(242,240,234,.86); padding: 6px 8px; border-left: 2px solid var(--accent); }
.g-pub p { color: var(--muted); }
.g-pub b { font-weight: 500; text-transform: none; letter-spacing: .02em; }
@media (max-width: 960px) { .g-pub { display: none; } }
.g-ask-tak { font-family: var(--mono); font-size: .8rem; color: var(--muted-inv); margin-top: 12px; text-transform: uppercase; letter-spacing: .14em; }
.g-ask-tak + .g-ask-h { margin-top: 4px; }

.g-res-cta { margin-top: 12px; font-size: .9rem; color: var(--muted-inv); }
.g-res-cta a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.g-res-v { font-size: 1.05rem; color: var(--paper); max-width: 44ch; }

/* datový report kola */
.g-res-body { grid-template-columns: 1fr; }
.g-res-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 16px; }
.g-res-charts figure { border-top: 1px solid var(--line-inv); padding-top: 8px; }
.g-res-charts figcaption { font-size: .54rem; color: var(--muted-inv); margin-bottom: 6px; }
.g-res-map { width: 100%; height: auto; background: repeating-linear-gradient(to right, rgba(242,240,234,.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(to bottom, rgba(242,240,234,.05) 0 1px, transparent 1px 24px); }
.t-path line { stroke: var(--paper); stroke-width: 1.2; stroke-linecap: round; }
.t-hit circle { fill: var(--accent); stroke: #0c0c0b; stroke-width: 1.5; }
.t-hit text { fill: var(--accent); font: 500 8px var(--mono); text-anchor: middle; }
.t-miss { stroke: #ffb199; stroke-width: 1.4; fill: none; }
.g-res-leg { display: flex; gap: 14px; font-size: .54rem; color: var(--muted-inv); margin-top: 4px; }
.lg-h::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 5px; }
.lg-m::before { content: "×"; color: #ffb199; margin-right: 5px; }
.g-res-empty { color: var(--muted-inv); font-size: .6rem; padding: 30px 0; }
@media (max-width: 640px) { .g-res-charts { grid-template-columns: 1fr; } }

.g-res-sum { margin: -6px 0 16px; }
.g-res-pitch { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-inv); font-size: 1.05rem; max-width: 56ch; }
.g-res-btns { align-items: center; }
.g-report { text-decoration: none; display: inline-flex; align-items: center; }
.g-link { color: var(--muted-inv); font-size: .62rem; padding: 8px 4px; }
.g-link:hover { color: var(--paper); }

/* Zaměřovač dýchá — pomalý pulz (výslovné přání uživatele, výjimka z klidného stylu) */
.sniper.is-on .sn-r1 { transform-origin: 60px 60px; transform-box: view-box; animation: snBreath 1.6s ease-in-out infinite; }
.sniper.is-on .sn-dot { transform-origin: 60px 60px; transform-box: view-box; animation: snDot 1.6s ease-in-out infinite; }
@keyframes snBreath { 0%, 100% { transform: scale(1); stroke-opacity: 1; } 50% { transform: scale(1.07); stroke-opacity: .55; } }
@keyframes snDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.sn-scope.is-lock .sn-r1 { animation-duration: .7s; }
@media (prefers-reduced-motion: reduce) { .sniper.is-on .sn-r1, .sniper.is-on .sn-dot { animation: none; } }

/* =====================================================================
   DASHBOARD KOLA
   ===================================================================== */
.hero-portrait .hp-frame { z-index: 1; }
.hero-portrait .anno, .hero-portrait .cross, .hero-portrait .hp-read, .hero-portrait .hp-bar, .hero-portrait .hp-qr { z-index: 2; }
.g-fly.is-emerging { z-index: 0 !important; pointer-events: none; }
.g-fly--round { z-index: 7; }
.g-res-in.gd { width: min(1180px, 100%); padding: 0; }
.gd-bar { display: flex; align-items: center; gap: 1.2rem; padding: 12px 18px; border-bottom: 1px solid var(--line-inv); font-size: .6rem; color: var(--muted-inv); }
.gd-bar span:first-child { display: flex; align-items: center; gap: .6em; color: var(--paper); }
.gd-bar span:first-child .dot { background: #1f9d55; }
.gd-bar .g-q-x { margin-left: auto; }
.gd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--line-inv); }
.gd-tile { background: #0c0c0b; padding: 16px 18px; min-width: 0; }
.gd-tl { font-size: .56rem; color: var(--muted-inv); margin-bottom: 10px; }
.gd-score { grid-column: span 4; display: flex; flex-direction: column; }
.gd-kpis { grid-column: span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-inv); padding: 0; }
.gd-map { grid-column: span 7; }
.gd-times { grid-column: span 5; }
.gd-table { grid-column: span 7; }
.gd-board { grid-column: span 5; }
.gd-gauge { width: 100%; max-width: 260px; height: auto; margin: 0 auto 4px; display: block; }
.gd-track { fill: none; stroke: rgba(242,240,234,.12); stroke-width: 10; }
.gd-val { fill: none; stroke: var(--accent); stroke-width: 10; }
.gd-ticks line { stroke: rgba(242,240,234,.35); stroke-width: 1; }
.gd-gv { fill: var(--paper); font: 800 30px var(--font); text-anchor: middle; letter-spacing: -.04em; }
.gd-gl { fill: var(--muted-inv); font: 500 7px var(--mono); text-anchor: middle; letter-spacing: .1em; }
.gd-verdict { font-size: 1.02rem; color: var(--paper); line-height: 1.35; margin-top: 6px; }
.gd-sum { margin: 10px 0 0 !important; font-size: .9rem; color: var(--muted-inv); }
.gd-best { margin-top: auto; padding-top: 12px; font-size: .56rem; color: var(--accent); }
.gd-k { background: #0c0c0b; padding: 16px 18px; }
.gd-kl { font-size: .56rem; color: var(--muted-inv); }
.gd-kv { margin: 6px 0 10px; }
.gd-kv b { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gd-kv span { font-size: .66rem; color: var(--muted-inv); }
.gd-kb { position: relative; height: 4px; background: rgba(242,240,234,.1); }
.gd-kb i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.gd-kb em { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--paper); display: none; }
.gd-kb em[style] { display: block; }
.gd-kh { font-size: .54rem; color: var(--muted-inv); margin-top: 6px; text-transform: none; letter-spacing: .03em; }
.gd-avg { stroke: var(--paper); stroke-width: .8; stroke-dasharray: 3 3; }
.gd-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--line-inv); }
.gd-foot .g-res-pitch { margin: 0; padding: 0; border: 0; font-size: .95rem; }
.gd-foot .g-res-btns { margin: 0; }
.gd .g-board { margin: 0; border: 0; padding: 0; }
@media (max-width: 900px) {
  .gd-score, .gd-kpis, .gd-map, .gd-times, .gd-table, .gd-board { grid-column: 1 / -1; }
  .gd-foot { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .gd-kpis { grid-template-columns: 1fr 1fr; } .gd-k { padding: 12px; } .gd-bar span:nth-child(2) { display: none; } }
body:not(.g-on) .g-pub, body:not(.g-on) .g-hud { display: none !important; }

.gd-quiz { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line-inv); background: #121210; }
.gd-quiz p { font-size: .95rem; color: var(--muted-inv); }
.gd-quiz b { color: var(--paper); }
.gd-quiz-btns { display: flex; gap: 10px; align-items: center; }

/* minuta na nastudování */
.g-study { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto 3px; align-items: center; gap: 8px 16px; background: #0c0c0b; color: var(--paper); padding: 10px 14px 0; font-size: .62rem; border-top: 2px solid var(--accent); }
.g-study > span { color: var(--muted-inv); }
.g-study b { font-size: 1.05rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.g-study button { background: var(--accent); color: var(--ink); padding: 6px 10px; font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.g-study i { grid-column: 1 / -1; height: 3px; margin: 0 -14px; background: rgba(242,240,234,.12); position: relative; }
.g-study em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 1s linear; }

.g-board li.is-me { background: rgba(255,90,42,.12); }
.g-board li.is-me .gb-name { color: var(--accent); }
.g-board li.gb-gap { display: block; color: var(--muted-inv); padding: 2px 0; border: 0; }
.gd-board .g-board ol { max-height: 300px; overflow: auto; }
.g-study { grid-template-columns: auto auto auto; }
.g-study > span { grid-row: 1; grid-column: 1; } .g-study b { grid-row: 1; grid-column: 2; } .g-study button { grid-row: 1; grid-column: 3; margin-bottom: 8px; }
.g-study i { grid-row: 2; }
#hero > .g-fly--intro { position: absolute; z-index: 6; }
.gd-foot { border-top: 0; border-bottom: 1px solid var(--line-inv); background: #121210; }

/* zjednodušený dashboard: CTA · skóre + 3 ukazatele · mapa + žebříček */
.gd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-map { grid-column: span 7; }
.gd-board { grid-column: span 5; }
.gd-foot .g-res-pitch b { color: var(--accent); font-weight: 700; }
.g-res-map { max-height: 260px; }
@media (max-width: 520px) { .gd-kpis { grid-template-columns: 1fr; } }
/* celé bez rolování: kompaktní výšky */
.g-res { padding: 10px; }
.g-res-in.gd { max-height: calc(100svh - 20px); display: flex; flex-direction: column; overflow: hidden; }
.gd-grid { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.gd-bar { padding: 9px 16px; }
.gd-foot { padding: 12px 16px; }
.gd-tile { padding: 12px 16px; }
.gd-gauge { max-width: 190px; }
.gd-verdict { font-size: .95rem; }
.gd-sum { font-size: .82rem; margin-top: 6px !important; }
.gd-k { padding: 12px 16px; }
.gd-kv { margin: 4px 0 8px; }
.gd-kv b { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.gd-map, .gd-board { display: flex; flex-direction: column; min-height: 0; }
.g-res-map { flex: 1; min-height: 0; max-height: none; height: 100%; }
.gd-board .g-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gd-board .g-board ol { flex: 1; min-height: 0; max-height: none; overflow: auto; }
.g-board li { padding: 4px 0; }
.gb-form { margin-top: 8px; }
.gd-quiz { padding: 10px 16px; }
@media (max-width: 900px) { .g-res-in.gd { overflow: auto; display: block; } }

/* dashboard: interaktivní podrobnosti + oprava šedé plochy pod ukazateli */
.gd-kpis { grid-template-rows: 1fr; }
.gd-k { height: 100%; }
.gd-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--paper); color: var(--ink); padding: 6px 9px; font-size: .62rem; text-transform: none; letter-spacing: .02em; max-width: 280px; border-left: 2px solid var(--accent); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.gd-tip[hidden] { display: none; }
[data-tip] { cursor: help; }
.gd .t-hit, .gd [data-tip] g { cursor: help; }
.t-hitzone { fill: transparent; stroke: none; }
.t-hit:hover circle:not(.t-hitzone) { r: 7; }
.gd-k:hover, .g-board li[data-tip]:hover { background: #171714; }
.gd-score [data-tip]:hover .gd-val { stroke-width: 12; }

.gd-kpis { padding: 0 !important; }
.gd-again { font-size: clamp(1.1rem, 1.6vw, 1.4rem); padding: 14px 26px; letter-spacing: .02em; text-transform: uppercase; font-weight: 900; font-stretch: 86%; }
.gd-foot .g-report { text-decoration: none; display: inline-flex; align-items: center; }
.gd-type { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; font-weight: 900; font-stretch: 80%; letter-spacing: -.03em; text-transform: uppercase; color: var(--accent); margin: -2px 0 6px; }
.gd-gauge { max-width: 170px; }

.gd-char { font-size: .88rem; color: var(--paper); line-height: 1.35; margin: 0 0 8px; }
.gd-char span { display: block; font-size: .52rem; color: var(--muted-inv); margin-bottom: 2px; }

.gd-sci { margin: -2px 0 8px; font-size: .78rem; }
.gd-sci summary { cursor: pointer; font-size: .56rem; color: var(--accent); list-style: none; }
.gd-sci summary::-webkit-details-marker { display: none; }
.gd-sci summary::after { content: " ↓"; }
.gd-sci[open] summary::after { content: " ↑"; }
.gd-sci-note { color: var(--muted-inv); margin: 6px 0 4px; }
.gd-sci ul { display: grid; gap: 5px; max-height: 150px; overflow: auto; padding-right: 4px; }
.gd-sci li { color: var(--muted-inv); line-height: 1.35; }
.gd-sci a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.gd-sci i { color: var(--muted-inv); }

/* rychlá psychoanalýza */
.gd-psy { margin: 2px 0 8px; border-top: 1px solid var(--line-inv); padding-top: 8px; }
.gd-psy-h { font-size: .52rem; color: var(--accent); margin-bottom: 4px; }
.gd-psy dl { display: grid; gap: 3px; }
.gd-psy dl div { display: grid; grid-template-columns: 9.5ch minmax(0, 1fr); gap: 8px; align-items: baseline; }
.gd-psy dt { font-size: .5rem; color: var(--muted-inv); }
.gd-psy dd { font-size: .8rem; color: var(--paper); line-height: 1.3; }
.gd-psy dd b { color: var(--accent); }
.gd-sci-btn { margin-top: 6px; font-size: .52rem; color: var(--muted-inv); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.gd-sci-btn:hover { color: var(--paper); }
.g-res-in.gd { position: relative; }
.gd-sci-pop { position: absolute; left: 16px; top: 120px; z-index: 5; width: min(520px, calc(100% - 32px)); background: #151513; border: 1px solid var(--line-inv); border-top: 2px solid var(--accent); padding: 14px 16px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.gd-sci-pop[hidden] { display: none; }
.gd-sci-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-size: .56rem; }
.gd-sci-pop ul { display: grid; gap: 8px; margin-top: 6px; font-size: .82rem; }
.gd-sci-pop li { color: var(--muted-inv); line-height: 1.4; }
.gd-sci-pop a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.gd-sci-pop .gd-sci-note { color: var(--muted-inv); font-size: .82rem; margin-top: 8px; }
.gd-gauge { max-width: 140px; }
.gd-type { font-size: clamp(1.3rem, 2.1vw, 2rem); }
.gd-verdict { font-size: .85rem; }
.gd-sum { font-size: .76rem; }
.gd-score { overflow: auto; }

.gd-ins { margin-top: 6px; font-size: .56rem; color: var(--muted-inv); text-transform: none; letter-spacing: .03em; }
.gd-ins b { color: var(--accent); font-weight: 500; }
.gd-ins.is-sent { color: #ffb199; }
.gd-ins-ok { display: block; margin-top: 3px; color: var(--muted-inv); }

/* dashboard: MAPA KOLA = dominanta uprostřed přes celou výšku, ostatní kolem jako doplněk */
@media (min-width: 901px) {
  .gd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "s s s m m m m m m k k k" "s s s m m m m m m b b b"; }
  .gd-grid > .gd-score { grid-area: s; }
  .gd-grid > .gd-kpis { grid-area: k; grid-template-columns: 1fr; grid-template-rows: none; }
  .gd-grid > .gd-map { grid-area: m; }
  .gd-grid > .gd-board { grid-area: b; }
  .gd-k { padding: 8px 14px 10px; }
  .gd-kv { margin: 0 0 5px; }
  .gd-kv b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
  .gd-kh { margin-top: 4px; }
  .gd-board .g-board li { grid-template-columns: 2.4ch minmax(0, 1fr) 5ch; }
  .gd-board .g-board li .gb-t { display: none; }
  .gd-board .gb-form div { flex-direction: column; }
  .gd-board .gb-form button { padding: 8px; }
}
/* mapa výraznější */
.gd-map { padding: 14px 16px; }
.gd-map .gd-tl { font-size: .62rem; color: var(--paper); }
.g-res-map { background: repeating-linear-gradient(to right, rgba(242,240,234,.045) 0 1px, transparent 1px 32px), repeating-linear-gradient(to bottom, rgba(242,240,234,.045) 0 1px, transparent 1px 32px); }
.t-path line { stroke-width: 2.2; }
.t-hit circle:not(.t-hitzone) { stroke-width: 2.5; }
.t-hit text { font-size: 13px; font-weight: 700; }
.t-miss { stroke-width: 2.4; }
.t-start { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 3 3; }
.t-start-l { fill: var(--muted-inv); font: 500 10px var(--mono); }

/* zóny zásahu v mapě: komora = plná, křídlo = obrys */
.t-hit.is-wing circle:not(.t-hitzone) { fill: #0c0c0b; stroke: var(--accent); stroke-width: 3; }
.t-hit.is-core circle:not(.t-hitzone) { fill: var(--accent); stroke: var(--paper); stroke-width: 2.5; }
.t-zone { fill: var(--muted-inv); font: 500 10px var(--mono); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.t-hit.is-core .t-zone { fill: var(--accent); }
.lg-w::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--accent); margin-right: 5px; vertical-align: -1px; }
.t-hit .t-zone { font: 500 9px var(--mono); letter-spacing: .1em; }

/* terč: komora zelená, těsně žlutá, křídlo červená (barvy tu kódují data, ne dekoraci) */
.t-hit.is-core circle:not(.t-hitzone) { fill: #2fb36b; stroke: var(--paper); stroke-width: 2.5; }
.t-hit.is-near circle:not(.t-hitzone) { fill: #f2c230; stroke: var(--paper); stroke-width: 2.5; }
.t-hit.is-wing circle:not(.t-hitzone) { fill: #e5402a; stroke: var(--paper); stroke-width: 2.5; }
.t-hit.is-core text { fill: #2fb36b; } .t-hit.is-near text { fill: #f2c230; } .t-hit.is-wing text { fill: #e5402a; }
.lg-c::before, .lg-n::before, .lg-w::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; border: 0; vertical-align: 0; }
.lg-c::before { background: #2fb36b; } .lg-n::before { background: #f2c230; } .lg-w::before { background: #e5402a; }
.t-hit .t-hitzone { fill: transparent; stroke: none; }
.t-hit.is-core .t-zone { fill: #2fb36b; } .t-hit.is-near .t-zone { fill: #f2c230; } .t-hit.is-wing .t-zone { fill: #e5402a; }

/* výkřik při zásahu */
.g-shout { position: fixed; z-index: 78; margin: 0; pointer-events: none; transform: translate(-50%, -150%); font: 900 clamp(1.8rem, 3vw, 2.8rem)/1 var(--font); font-stretch: 78%; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: 1.5px #0c0c0b; paint-order: stroke fill; animation: shoutFade 1.1s ease-out forwards; }
.g-shout--core { color: #2fb36b; } .g-shout--near { color: #f2c230; } .g-shout--wing { color: #e5402a; }
@keyframes shoutFade { 0% { opacity: 0; transform: translate(-50%, -120%) scale(.9); } 12% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%); } }
/* zaměřovač se rozsvítí podle toho, kam míří */
.sn-scope[data-aim="core"] .sn-r1, .sn-scope[data-aim="core"] .sn-x { stroke: #2fb36b; }
.sn-scope[data-aim="core"] .sn-r1 { fill: rgba(47,179,107,.18); stroke-width: 2.5; }
.sn-scope[data-aim="core"] svg { filter: drop-shadow(0 0 6px rgba(47,179,107,.8)); }
.sn-scope[data-aim="near"] .sn-r1, .sn-scope[data-aim="near"] .sn-x { stroke: #f2c230; }
.sn-scope[data-aim="near"] .sn-r1 { fill: rgba(242,194,48,.14); }
.sn-scope[data-aim="wing"] .sn-r1, .sn-scope[data-aim="wing"] .sn-x { stroke: #e5402a; }
.sn-aiming .g-fly { cursor: none; }
@media (prefers-reduced-motion: reduce) { .g-shout { animation: none; opacity: 1; } }

/* dashboard na telefonu: vše pod sebou, kompaktní horní lišta */
@media (max-width: 900px) {
  .gd-grid { display: flex; flex-direction: column; gap: 1px; }
  .gd-grid > .gd-score, .gd-grid > .gd-kpis, .gd-grid > .gd-map, .gd-grid > .gd-board { grid-area: auto; width: 100%; }
  .gd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-k { padding: 10px 12px; } .gd-kv b { font-size: 1.5rem; } .gd-kh { display: none; }
  .gd-foot { padding: 12px 14px; gap: 10px; }
  .gd-foot .g-res-pitch { display: none; }
  .gd-foot .g-res-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .gd-again { width: 100%; justify-content: center; }
  .g-res-map { height: auto; max-height: 360px; }
}

/* mobil: oznámení přes celou šířku, nic nesmí vylézt mimo obraz */
@media (max-width: 640px) {
  .g-toasts { left: 12px; right: 12px; align-items: stretch; top: calc(var(--head-h) + 70px); }
  .g-toast { max-width: none; }
  .g-hud { left: 12px; right: 12px; justify-content: space-between; }
  .g-log { max-width: calc(100vw - 24px); white-space: normal; transform: translate(-50%, -130%); left: 50% !important; }
  .g-shout { font-size: 1.6rem; }
  .g-ask { left: 12px !important; right: 12px; width: auto; max-width: none; }
  .autopilot, .g-study, .g-quiz { max-width: calc(100vw - 24px); }
}

/* Vypínač zvuku ve hře — přestěhovaný do HUD vpravo nahoře (game.js, startGame) */
.g-hud .sound-toggle { position: static; opacity: 1; pointer-events: auto; padding: 10px 14px; background: transparent; color: var(--paper); border: 0; border-left: 1px solid var(--line-inv); font: inherit; letter-spacing: inherit; cursor: pointer; }
.g-hud .sound-toggle b { color: var(--accent); }
.g-hud .sound-toggle[aria-pressed="false"] { background: var(--accent); color: var(--ink); }
.g-hud .sound-toggle[aria-pressed="false"] b { color: var(--ink); }
.g-hud .sound-toggle:hover { background: var(--paper); color: var(--ink); }
.g-hud .sound-toggle:hover b { color: var(--ink); }
.g-hud .sound-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .g-hud .sound-toggle { padding: 7px 9px; } }