/* SIGNATURE STUDIO — sdílené styly (základ, lišta a homepage, pohyb). Jeden soubor = jeden blokující požadavek. */
/* ===== base ===== */
/* ============================================================
   SIGNATURE STUDIO — základ (tokeny, fonty, loader, tlačítka)
   Tokeny, fonty a loader převzaté z produkce (deploy-2026-10-08b).
   Žádné knihovny, žádné externí požadavky.
   ============================================================ */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/inter-italic-var.woff2') format('woff2'); }

:root {
  --ink: #1A1A1A;
  --ink-2: #2A2A2A;
  --paper: #F5F5F5;
  --white: #FFFFFF;
  --red: #E03030;
  --red-dark: #B82424;            /* jen pro text na světlém pozadí (kontrast) */
  --muted: #5C5C5C;               /* 6,4:1 na #F5F5F5 */
  --muted-dark: rgba(240,240,240,.68);
  --line: rgba(26,26,26,.12);
  --line-dark: rgba(240,240,240,.14);

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10000; background: var(--white); color: var(--ink); padding: .75rem 1rem; border-radius: 6px; font-weight: 600; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Tlačítka (bez verzálek a šipek ze systémového fontu) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.4rem; border-radius: 4px;
  font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: #c92828; }
.btn--ghost-dark { color: #F0F0F0; border-color: rgba(240,240,240,.28); }
.btn--ghost-dark:hover { border-color: rgba(240,240,240,.7); }
.btn--ghost { color: var(--ink); border-color: rgba(26,26,26,.25); }
.btn--ghost:hover { border-color: var(--ink); }
.link-arrow { font-family: var(--display); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .45em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translate(-1px, 1px); }

/* ---------- Loader 0 → 100 % (schválený, převzatý 1:1 z hero.css) ---------- */
.page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: flex; align-items: center; justify-content: center;
  animation: page-loader-fade .6s cubic-bezier(.65,0,.35,1) 1.4s forwards, page-loader-release 0s linear 1.4s forwards, page-loader-hide 0s linear 2s forwards; }
.page-loader__count { display: flex; font-family: var(--display); font-size: clamp(3rem, 10vw, 7rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--red); animation: page-loader-center 1.4s step-end forwards; }
.page-loader__digit { display: block; width: .58em; height: 1em; overflow: hidden; }
.page-loader__strip { display: block; text-align: center; font-variant-numeric: proportional-nums; will-change: transform; }
.page-loader__strip::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0"; display: block; white-space: pre; }
.page-loader__digit--h { width: .412em; animation: page-loader-show 1.4s step-end forwards; }
.page-loader__digit--h .page-loader__strip::before { content: "1"; }
.page-loader__digit--t { animation: page-loader-show .14s step-end forwards; }
.page-loader__digit--t .page-loader__strip { animation: page-loader-roll 1.4s steps(10, end) forwards; }
.page-loader__digit--o .page-loader__strip { animation: page-loader-roll .14s steps(10, end) 10 forwards; }
.page-loader__pct::before { content: "%"; }
@keyframes page-loader-roll { from { transform: translateY(0); } to { transform: translateY(-10em); } }
@keyframes page-loader-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-loader-center { 0% { transform: translateX(-.496em); } 10% { transform: translateX(-.206em); } 100% { transform: translateX(0); } }
@keyframes page-loader-fade { to { opacity: 0; } }
@keyframes page-loader-release { to { pointer-events: none; } }
@keyframes page-loader-hide { to { visibility: hidden; } }
.loader-seen .page-loader { display: none; }

/* Vstup hero nadpisu (jako produkce): po řádcích, ≤ 0,55 s, po loaderu */
/* Maska (clip-path) přesahuje řádek o --hm nahoře i dole, takže se při malém line-height
   neořežou háčky (Š) ani dotahy (y, p); rozměry ani řádkování se nemění. Výchozí poloha
   animace je o 2 × --hm níž, aby slovo na začátku zůstalo celé pod rozšířenou maskou. */
.hero-line { --hm: .25em; display: block; clip-path: inset(calc(var(--hm) * -1) 0); }
.hero-word { display: inline-block; animation: hero-word-in .45s var(--ease) both; }
.hero-line:nth-child(2) .hero-word { animation-delay: .05s; }
.hero-line:nth-child(3) .hero-word { animation-delay: .1s; }
html:not(.loader-seen) .hero-word { animation-delay: 1.4s; }
html:not(.loader-seen) .hero-line:nth-child(2) .hero-word { animation-delay: 1.45s; }
html:not(.loader-seen) .hero-line:nth-child(3) .hero-word { animation-delay: 1.5s; }
@keyframes hero-word-in { from { transform: translateY(calc(110% + var(--hm) * 2)); } }

.fade-in { animation: fade-in .45s var(--ease) both; }
html:not(.loader-seen) .fade-in { animation-delay: 1.5s; }
@keyframes fade-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== site ===== */
/* ============================================================
   SIGNATURE STUDIO — lišta, homepage, patička
   Editorial typografie, asymetrická 12sloupcová mřížka, práce
   v reálném měřítku. Interakce: přepínač Počítač/Mobil u RESACS,
   náhled skutečné práce v rejstříku služeb. Nic dalšího.
   ============================================================ */

.red { color: var(--red); }
.kicker { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .75rem; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
section { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Lišta ---------- */
.bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--pad); background: var(--ink); color: #F0F0F0; border-bottom: 1px solid var(--line-dark); }
.bar__name { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.bar__name span { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.bar__name small { font-size: .75rem; color: var(--muted-dark); }
.bar__nav { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem); }
.bar__nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; padding: .5rem 0; border-bottom: 1px solid transparent; }
@media (hover: hover) { .bar__nav a:hover { border-bottom-color: currentColor; } }
.bar__nav .bar__cta { color: var(--white); background: var(--red); padding: .55rem 1rem; border-radius: 4px; border: 0; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #F0F0F0; min-height: calc(100svh - 64px); display: flex; align-items: flex-end; padding-top: clamp(3rem, 7vh, 5rem); padding-bottom: 1.5rem; }
.hero__grid { width: 100%; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(2rem, 5vw, 3.5rem); }
.hero__title { grid-column: 1 / span 11; font-size: clamp(3rem, 9.4vw, 136px); line-height: .98; letter-spacing: -0.045em; }
.hero__side { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.btn--quiet { color: rgba(240,240,240,.88); border-color: rgba(240,240,240,.22); background: transparent; }
.btn--quiet:hover { border-color: rgba(240,240,240,.6); color: #fff; }
.hero__side p { font-size: clamp(1rem, 1.3vw, 1.1875rem); color: rgba(240,240,240,.86); max-width: 26rem; }
.hero__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); font-size: .875rem; color: var(--muted-dark); }

/* ---------- Příběh RESACS ---------- */
.story { background: var(--paper); padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.story > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.story__title { font-size: clamp(4rem, 15vw, 232px); line-height: .85; letter-spacing: -0.055em; }
.story__title--sm { font-size: clamp(3rem, 8vw, 120px); line-height: .9; }
.story__sub { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; margin-top: 1rem; max-width: 32rem; }
.story__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.story__stage { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2.5rem; align-items: start; }
.viewer { grid-column: 1 / span 8; }
.viewer__tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 1rem; background: var(--white); }
.viewer__tabs button { font: 600 .875rem/1 var(--display); border: 0; background: transparent; color: var(--muted); padding: .65rem 1.1rem; border-radius: 999px; cursor: pointer; min-height: 40px; }
.viewer__tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.viewer__panel img { border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); border: 1px solid var(--line); }
.viewer__panel--mob { display: flex; gap: clamp(1rem, 3vw, 2.5rem); justify-content: center; background: var(--ink); border-radius: 6px; padding: clamp(1.5rem, 4vw, 3rem); }
.viewer__panel--mob[hidden] { display: none; }
.viewer__panel--mob img { width: min(42%, 260px); border-radius: 18px; border: 0; box-shadow: none; }
.js .viewer__panel { animation: panel-in .35s var(--ease); }
@keyframes panel-in { from { opacity: 0; } }

.pull { margin-top: clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.pull p { grid-column: 3 / span 9; font-family: var(--display); font-weight: 500; font-size: clamp(1.625rem, 3.6vw, 3.25rem); line-height: 1.15; letter-spacing: -0.03em; text-indent: -.45em; }
.pull footer { grid-column: 3 / span 9; margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Jeden typografický moment ---------- */
.moment { background: var(--ink); color: #F0F0F0; padding-top: clamp(5rem, 12vw, 10rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.moment > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.moment__text { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 9vw, 132px); line-height: .92; letter-spacing: -0.05em; }
.moment__text span { color: var(--red); display: inline-block; padding-left: clamp(0rem, 8vw, 8rem); }
.moment__note { margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 26rem; margin-left: auto; margin-right: 0; color: rgba(240,240,240,.78); }
@media (min-width: 1441px) { .moment__note { margin-right: calc((100% - var(--max)) / 2); } }

/* ---------- Rejstřík služeb ---------- */
.index { background: var(--white); padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.index > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.index__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; margin-bottom: 2.5rem; }
.index__head h2 { font-size: clamp(2.25rem, 5vw, 4rem); }
.index__head p { color: var(--muted); }
.index__body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.index__list { grid-column: 1 / span 8; border-top: 1px solid var(--ink); }
.row { border-bottom: 1px solid var(--line); }
.row a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .25rem 1.5rem; align-items: baseline; padding: 1.4rem 0; text-decoration: none; transition: padding .3s var(--ease), color .3s var(--ease); }
.row__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
.row__desc { color: var(--muted); font-size: .9375rem; }
.row__price { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.row a:hover, .row a:focus-visible, .row.is-active a { padding-left: .75rem; }
.row a:hover .row__name, .row.is-active .row__name { color: var(--red-dark); }

/* ---------- Volná tvorba ---------- */
.free { background: var(--paper); padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.free > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.free__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.75rem; }
.free__head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.free__head p { color: var(--muted); max-width: 30rem; }
.free__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
.free img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; width: 100%; }
.free figcaption { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }

/* ---------- Kontakt ---------- */
.contact { background: var(--ink); color: #F0F0F0; padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.contact > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.contact__title { font-size: clamp(2.5rem, 6.5vw, 96px); line-height: 1; max-width: 14ch; margin-bottom: 2.5rem; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; }
.contact__grid > p { grid-column: 1 / span 5; color: rgba(240,240,240,.82); font-size: 1.125rem; }
.contact__actions { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.contact__link { font-family: var(--display); font-weight: 600; font-size: 1.125rem; text-underline-offset: 4px; }

.foot { background: var(--ink); color: var(--muted-dark); border-top: 1px solid var(--line-dark); padding: 1.75rem var(--pad) 5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.foot nav { display: flex; gap: 1.25rem; }
.foot a { color: #F0F0F0; }

/* ============================================================
   V2 — nové a upravené komponenty
   ============================================================ */

/* RESACS: max. tři fakta (žádné interpretované „rozhodnutí“) */
.facts { grid-column: 10 / span 3; display: grid; gap: 1.5rem; padding-top: 3.6rem; }
.facts dt { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.facts dd { font-size: 1rem; line-height: 1.5; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.facts .facts__link { border: 0; padding: 0; }

/* Jazykové verze jako součást projektu (ne statistika studia) */
.langs { margin-top: clamp(3rem, 6vw, 5rem); }
.langs figcaption { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }
.langs__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1.2vw, 1rem); }
.langs__row img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--line); }
.langs__row span { display: block; font-size: .8125rem; color: var(--muted); margin-top: .5rem; line-height: 1.35; }
.langs__row b { display: block; font-family: var(--display); color: var(--ink); font-weight: 600; }
.missing--slim { margin-top: 2rem; flex-direction: row; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .8rem 1rem; }

.mik { background: #F7EEEB; padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.mik__inner { max-width: var(--max); margin: 0 auto; }


.mik__links { display: flex; gap: 1.5rem; align-items: center; }
.mik__links a:not(.link-arrow) { color: #5C4A3A; }

/* Služby: rejstřík — služba × orientační cena, náhled vedle textu (nepřekrývá ho) */
.row__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.row__price small { font: 500 .75rem/1.2 var(--body); color: var(--muted); margin-bottom: .2rem; }
.row__thumb { display: none; }
.row__thumb figcaption { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }
.index__preview { grid-column: 9 / span 4; position: sticky; top: 90px; }
.index__preview img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 6px; border: 1px solid var(--line); }
.index__preview .missing { aspect-ratio: 4 / 3; }
.index__preview figcaption { font-size: .8125rem; color: var(--muted); margin-top: .6rem; }
.index__foot { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
.index__foot p { color: var(--muted); max-width: 40rem; }
.index__foot b { color: var(--ink); font-family: var(--display); }
.index__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__side { grid-column: 1 / span 9; }
  .viewer, .facts { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(3, 1fr); padding-top: 0; gap: 1rem 1.5rem; }
  .facts .facts__more { grid-column: 1 / -1; }
  .pull p, .pull footer { grid-column: 1 / -1; }
  .index__list { grid-column: 1 / -1; }
  .index__preview { display: none; }
  .row__thumb { display: block; margin: 0 0 1.4rem; }
  .row__thumb img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: top left; border-radius: 4px; border: 1px solid var(--line); }
  .row__thumb--missing .missing { min-height: 90px; }
  .contact__grid > p, .contact__actions { grid-column: 1 / -1; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .bar { padding: .7rem 1rem; }
  .bar__name small { display: none; }
  .bar__nav { gap: .9rem; }
  .bar__nav li:nth-child(3) { display: none; }
  .bar__nav a { font-size: .875rem; }
  .bar__nav .bar__cta { padding: .5rem .75rem; }
  .hero { min-height: 0; padding-top: 4rem; padding-bottom: 1.5rem; }
  .hero__side { grid-column: 1 / -1; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .btn--quiet { min-height: 44px; }
  .facts { grid-template-columns: 1fr; }
  .langs__row { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
  .row a { grid-template-columns: 1fr auto; }
  .row__desc { grid-column: 1 / -1; grid-row: 2; }
  .free__grid { grid-template-columns: 1fr; }
  .moment__text span { padding-left: 0; }
  .index__actions, .index__actions .btn { width: 100%; }
}

/* Bez JS: náhledy rovnou v řádcích, prázdný panel schovat */
html:not(.js) .index__preview { display: none; }
html:not(.js) .index__list { grid-column: 1 / -1; }
html:not(.js) .row__thumb { display: block; margin: 0 0 1.4rem; max-width: 520px; }
html:not(.js) .row__thumb img { aspect-ratio: 16 / 7; object-fit: cover; object-position: top left; border-radius: 4px; border: 1px solid var(--line); }

/* V2 doladění: hlavní sdělení RESACS na 2–3 řádky, kompaktnější mobil */
.story__sub { max-width: 46rem; }
@media (max-width: 640px) {
  .story__sub { font-size: 1.125rem; }
  .free__grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .free img { aspect-ratio: 4 / 3; }
}

/* Tablet: hero bez prázdného prostoru nad nadpisem */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero { min-height: 0; padding-top: 7rem; padding-bottom: 1.5rem; }
}


/* ============================================================
   FINAL — hybrid B V2 + obchodní prvky současného webu
   ============================================================ */

/* Hero: diskrétní cena v meta řádku (menší váha než CTA) */
.hero__meta { align-items: baseline; }
.hero__price { color: #F0F0F0; text-decoration: underline; text-decoration-color: rgba(240,240,240,.35); text-underline-offset: 4px; }
.hero__price:hover { text-decoration-color: currentColor; }
.hero__place { margin-left: auto; }

/* Míkovice: text + identita vlevo, jeden velký čitelný záběr webu vpravo */
.mik { padding-top: clamp(4.5rem, 9vw, 7rem); padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.mik__inner { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2.5rem; align-items: center; }
.mik__text { grid-column: 1 / span 5; }
.mik__text h2 { font-size: clamp(2.5rem, 5.5vw, 80px); line-height: .95; letter-spacing: -0.045em; color: #4A3A2E; margin-bottom: 1rem; }
.mik__sub { color: #5C4A3A; font-size: clamp(1rem, 1.3vw, 1.125rem); margin-bottom: 1.75rem; max-width: 30rem; }
.mik__id { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; background: var(--white); border-radius: 8px; width: fit-content; margin-bottom: 1.5rem; }
.mik__id img { width: 132px; }
.mik__dots { display: flex; gap: .4rem; }
.mik__dots li { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(90,60,50,.15); }
.mik__work { color: #5C4A3A; font-size: .9375rem; margin-bottom: 1rem; }
.mik__work b { color: #3D2F25; }
.mik__links { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.mik__links a:not(.link-arrow) { color: #5C4A3A; font-size: .9375rem; }
.mik__visual { grid-column: 6 / span 7; position: relative; padding-bottom: 6%; }
.mik__desk { width: 92%; margin-left: 8%; border-radius: 8px; box-shadow: 0 30px 70px -30px rgba(74,58,46,.45); }
.mik__phone { position: absolute; left: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-radius: 16px; border: 5px solid #4A3A2E; box-shadow: 0 20px 40px -15px rgba(60,20,30,.4); }

/* Jistota pro klienta: jeden kompaktní blok */
.assure { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1.5rem; }
.assure__title { grid-column: 1 / span 3; font-size: 1.5rem; letter-spacing: -0.02em; }
.assure__grid { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.assure__grid dt { font-family: var(--display); font-weight: 600; margin-bottom: .3rem; }
.assure__grid dd { color: var(--muted); font-size: .9375rem; }
.assure__actions { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

/* Koncepty: kompaktní pruh */
.free { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.free__head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.free__grid { grid-template-columns: repeat(4, 1fr); }
.free img { aspect-ratio: 4 / 3; }

/* Závěr: osobní, dvě cesty, jiná kompozice než hero */
.close { background: var(--ink); color: #F0F0F0; padding-top: clamp(4.5rem, 9vw, 7rem); padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.close__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; align-items: end; }
.close__person { grid-column: 1 / span 4; }
.close__person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 8px; filter: grayscale(.15); }
.close__main { grid-column: 6 / span 7; }
.close__title { font-size: clamp(2.25rem, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; margin-bottom: 1.25rem; }
.close__lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: rgba(240,240,240,.84); max-width: 34rem; margin-bottom: 2rem; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.path { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.5rem; border-radius: 8px; border: 1px solid var(--line-dark); text-decoration: none; min-height: 132px; }
.path--primary { background: var(--red); border-color: var(--red); justify-content: space-between; transition: background .25s var(--ease); }
.path--primary:hover { background: #c92828; }
.path__title { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }
.path--primary .path__title::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translate(-2px, 2px); }
.path__desc { font-size: .9375rem; color: #FFFFFF; }
.path__link { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: #F0F0F0; text-underline-offset: 4px; padding: .3rem 0; }
.close__note { margin-top: 1.25rem; }

@media (max-width: 1023px) {
  .mik__text, .mik__visual { grid-column: 1 / -1; }
  .assure__title, .assure__grid, .assure__actions { grid-column: 1 / -1; }
  .close__person { grid-column: 1 / span 4; }
  .close__main { grid-column: 5 / span 8; }
  .paths { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .free__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hero__meta { flex-direction: column; gap: .35rem; }
  .hero__place { margin-left: 0; }
  .mik__phone { width: 30%; border-width: 4px; }
  .assure__grid { grid-template-columns: 1fr; }
  .free__grid { grid-template-columns: 1fr 1fr; }
  .close__inner { align-items: start; }
  .close__person { grid-column: 1 / span 4; }
  .close__main { grid-column: 1 / -1; }
  .close__person img { aspect-ratio: 1; border-radius: 50%; max-width: 120px; }
}

/* Koncepty: nadpis vlevo, dvě ukázky vpravo v jednom řádku */
@media (min-width: 900px) {
  .free { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
  .free > * { max-width: none; margin: 0; }
  .free { padding-left: max(var(--pad), calc((100% - var(--max)) / 2)); padding-right: max(var(--pad), calc((100% - var(--max)) / 2)); }
  .free__head { grid-column: 1 / span 4; flex-direction: column; }
  .free__grid { grid-column: 6 / span 7; grid-template-columns: 1fr 1fr; }
}

/* Míkovice na mobilu: jeden čitelný výřez místo dvou drobných screenshotů */
@media (max-width: 640px) {
  .mik__visual { padding-bottom: 0; }
  .mik__desk { display: none; }
  .mik__phone { position: static; display: block; width: 72%; margin: 0 auto; aspect-ratio: 9 / 15; border-width: 5px; border-radius: 22px; }
}

/* Dotykové plochy ≥ 44 px */
.bar__name { min-height: 44px; justify-content: center; }
.hero__price { display: inline-block; padding: .7rem 0; }
.foot nav a { display: inline-block; padding: .75rem 0; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.bar__nav .bar__cta { min-height: 44px; }


/* ============================================================
   INTEGRACE — jednotná lišta s mobilním menu, patička
   ============================================================ */
.bar__menu { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-dark); border-radius: 4px; background: transparent; color: #F0F0F0; font: 600 .875rem/1 var(--display); cursor: pointer; }
.bar__menu i { position: relative; width: 14px; height: 2px; background: currentColor; transition: background-color var(--t-micro) var(--ease); }
.bar__menu i::before, .bar__menu i::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: currentColor; transition: transform var(--t-comp) var(--ease); }
.bar__menu i::before { top: -5px; } .bar__menu i::after { top: 5px; }
.bar__menu[aria-expanded="true"] i { background: transparent; }
.bar__menu[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.bar__menu[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
.bar__drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid var(--line-dark); padding: .5rem var(--pad) 1.25rem; }
.bar__drawer[hidden] { display: none; }
.bar__drawer a { display: flex; align-items: center; min-height: 52px; font-family: var(--display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.bar__drawer a[aria-current="page"] { color: var(--red); }
.bar__drawer:not([hidden]) { animation: drawer-in var(--t-comp) var(--ease); }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } }
.bar__right { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 641px) { .bar__drawer { display: none !important; } }
@media (max-width: 640px) {
  .bar__nav li:nth-child(3) { display: list-item; }
  .js .bar__nav li:not(:last-child) { display: none; }
  .js .bar__menu { display: inline-flex; }
}
html:not(.js) .bar { flex-wrap: wrap; }
.foot nav { flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0; }
.foot nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.bar__drawer { box-shadow: 0 24px 40px -12px rgba(0,0,0,.55); }
/* Dotykové plochy ≥ 44 px (homepage) */
.viewer__tabs button { min-height: 44px; }
.facts .facts__link a, .facts__link .link-arrow { display: inline-block; padding: .7rem 0 .55rem; }
.assure__actions .link-arrow { display: inline-block; padding: .7rem 0 .55rem; }
.path__link { display: inline-block; padding: .55rem 0; }

/* ===== motion ===== */
/* ============================================================
   SIGNATURE STUDIO — MOTION SYSTEM
   Klidná kompozice, živé interakce. Bez knihoven.

   Časování
     --t-micro   200 ms  hover, focus, výběr, kurzor
     --t-comp    350 ms  přepínače, akordeony, kroky konfigurátoru
     --t-enter   650 ms  vstupy sekcí
     --t-sign    800 ms  podpisové momenty (titulky, screenshoty)
   Křivky
     --ease       výjezd (vstupy, většina pohybu)
     --ease-io    přechod mezi dvěma stavy (zavření, odjezd)
     --ease-back  pružný návrat (magnet)

   Skrytý stav platí jen s třídou .motion na <html>. Tu přidá
   inline skript v <head>, jen když uživatel nechce omezený pohyb
   a prohlížeč umí IntersectionObserver. Když se motion.js do 3 s
   nespustí, třída zmizí a obsah je vidět.
   ============================================================ */

:root {
  --t-micro: 200ms;
  --t-comp: 350ms;
  --t-enter: 650ms;
  --t-sign: 800ms;
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1. Vstupy sekcí (každý typ má jiný charakter) ---------- */

/* rise: blok textu */
.motion [data-reveal="rise"] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); transition-delay: var(--d, 0ms); }
.motion [data-reveal="rise"].is-in { opacity: 1; transform: none; }

/* mask: velký titulek vyjede zpod linky */
.motion [data-reveal="mask"] { clip-path: inset(0 0 100% 0); transform: translateY(.18em); transition: clip-path var(--t-sign) var(--ease), transform var(--t-sign) var(--ease); }
.motion [data-reveal="mask"].is-in { clip-path: inset(-10% -5% -25% -5%); transform: none; }

/* clip: screenshot nebo fotografie se odkryje zdola, obrázek se při tom usadí */
.motion [data-reveal="clip"] { clip-path: inset(100% 0 0 0 round 8px); transition: clip-path var(--t-sign) var(--ease); transition-delay: var(--d, 0ms); }
.motion [data-reveal="clip"] img { transform: scale(1.06); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.motion [data-reveal="clip"].is-in { clip-path: inset(-2% -2% -10% -2% round 8px); }
.motion [data-reveal="clip"].is-in img { transform: none; }

/* stagger: položky seznamu postupně, krok 70 ms */
.motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(16px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }

/* line: horní linka se „narýsuje“ zleva (místo border-top) */
[data-line] { position: relative; }
[data-line]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; transform-origin: left; }
.motion [data-line]::before { transform: scaleX(0); transition: transform var(--t-sign) var(--ease-io); }
.motion [data-line].is-in::before { transform: none; }

/* ---------- 2. Hero: po nadpisu se narýsuje linka meta řádku ---------- */
.hero__meta, .phead__meta { border-top: 0 !important; position: relative; }
.hero__meta::before, .phead__meta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-dark); transform-origin: left; animation: rule-draw var(--t-sign) var(--ease-io) .25s both; }
html:not(.loader-seen) .hero__meta::before { animation-delay: 1.65s; }
@keyframes rule-draw { from { transform: scaleX(0); } }

/* ---------- 3. Kurzor (jen myš, ne dotyk, ne omezený pohyb) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; opacity: 0; transition: opacity var(--t-micro) linear; }
.cursor-on .cursor { opacity: 1; }
.cursor__ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(224,48,48,.55); transition: transform var(--t-comp) var(--ease), background-color var(--t-micro) linear, border-color var(--t-micro) linear; }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; font: 600 .75rem/1 var(--display); letter-spacing: -.01em; color: var(--white); white-space: nowrap; transition: opacity var(--t-micro) linear, transform var(--t-comp) var(--ease); }
.cursor-dot { position: fixed; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); z-index: 9501; pointer-events: none; opacity: 0; }
.cursor-on .cursor-dot { opacity: 1; }
.cursor.is-link .cursor__ring { transform: scale(1.5); background: rgba(224,48,48,.08); border-color: var(--red); }
.cursor.is-label .cursor__ring { transform: scale(2.6); background: var(--ink); border-color: var(--ink); }
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor.is-text .cursor__ring { transform: scale(.4); }
.cursor.is-down .cursor__ring { transform: scale(.85); }

/* ---------- 4. Magnetická hlavní tlačítka (jen myš) ---------- */
.btn[data-magnetic], .bar__cta[data-magnetic] { transition: transform 550ms var(--ease-back), background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); will-change: transform; }
[data-magnetic].is-magnet { transition-duration: 150ms, 200ms, 200ms, 200ms; transition-timing-function: var(--ease); }
[data-magnetic] > .mag { display: inline-block; transition: transform 550ms var(--ease-back); }
[data-magnetic].is-magnet > .mag { transition: transform 150ms var(--ease); }

/* ---------- 5. Přechody stavů ---------- */

/* Přepínač Počítač/Mobil: pilulka přejede, panel se přestaví */
.viewer__tabs.has-pill { position: relative; isolation: isolate; }
.viewer__tabs.has-pill::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); background: var(--ink); border-radius: 999px; transition: transform var(--t-comp) var(--ease), width var(--t-comp) var(--ease); }
.viewer__tabs.has-pill button[aria-selected="true"] { background: transparent; transition: color var(--t-comp) var(--ease); }
.js .viewer__panel { animation: none; }
.viewer__panel.is-enter { animation: view-in var(--t-enter) var(--ease); }
.viewer__panel--mob.is-enter { animation: fade var(--t-comp) linear; }
.viewer__panel--mob.is-enter img { animation: phone-in var(--t-enter) var(--ease) both; }
.viewer__panel--mob.is-enter img:nth-child(2) { animation-delay: 90ms; }
@keyframes view-in { from { opacity: 0; transform: scale(.97); clip-path: inset(4% 4% 4% 4% round 8px); } to { clip-path: inset(-5% -5% -10% -5%); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(40px) rotate(-1.5deg); } }
@keyframes fade { from { opacity: 0; } }

/* Rejstřík služeb: nový náhled se odkryje zleva */
.index__preview > .is-enter { animation: preview-in var(--t-comp) var(--ease); }
@keyframes preview-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.row a { transition: padding var(--t-comp) var(--ease), color var(--t-micro) var(--ease); }
.row__name { transition: color var(--t-micro) var(--ease); }

/* Míkovice: barvy identity naskočí po textu */
.motion .mik__text .mik__dots li { transform: scale(0); transition: transform 450ms var(--ease-back); transition-delay: calc(350ms + var(--i, 0) * 70ms); }
.motion .mik__text.is-in .mik__dots li { transform: none; }
/* Míkovice: telefon dojede přes počítač o chvíli později */
.motion .mik__visual .mik__phone { opacity: 0; transform: translateY(48px); transition: opacity var(--t-enter) var(--ease) 250ms, transform var(--t-sign) var(--ease) 250ms; }
.motion .mik__visual.is-in .mik__phone { opacity: 1; transform: none; }

/* Statement: první řádek vyjede, červený druhý řádek dojede zprava */
.motion .moment__text[data-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path var(--t-sign) var(--ease); }
.motion .moment__text[data-reveal] span { transform: translateX(6%); opacity: 0; transition: transform 900ms var(--ease) 200ms, opacity var(--t-enter) var(--ease) 200ms; }
.motion .moment__text[data-reveal].is-in { clip-path: inset(-10% -5% -20% -5%); }
.motion .moment__text[data-reveal].is-in span { transform: none; opacity: 1; }

/* Odkazy se šipkou: šipka popojede */
.link-arrow::after { transition: transform var(--t-micro) var(--ease); }
.link-arrow:focus-visible::after { transform: rotate(45deg) translate(2px, -2px); }
@media (hover: hover) { .link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); } }
.path--primary .path__title::after { transition: transform var(--t-micro) var(--ease); }
@media (hover: hover) { .path--primary:hover .path__title::after { transform: rotate(45deg) translate(1px, -1px); } }

/* Fotografie v závěru: jemné přiblížení na hover */
.close__person { overflow: hidden; border-radius: 8px; }
.close__person img { transition: transform 900ms var(--ease), filter var(--t-enter) var(--ease); }
@media (hover: hover) { .close__person:hover img { transform: scale(1.03); filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-dot { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* Po dokončení vstupu ořez úplně zrušit (nepřiřízne stíny) */
.motion [data-reveal].is-done { clip-path: none; }

/* Míkovice: počítač se odkryje zdola (telefon viz výše) */
.motion [data-reveal="compose"] .mik__desk { clip-path: inset(100% 0 0 0 round 8px); transition: clip-path var(--t-sign) var(--ease); }
.motion [data-reveal="compose"].is-in .mik__desk { clip-path: inset(-10% -10% -25% -10%); }
.motion [data-reveal="compose"].is-done .mik__desk { clip-path: none; }
/* Jistota: místo border-top kreslená linka */
.assure[data-line] { border-top: 0; color: var(--ink); }
.assure[data-line] > * { color: var(--ink); }
.assure[data-line] dd { color: var(--muted); }

/* Výkon: kurzor ve vlastní vrstvě kompozitoru (pohyb bez překreslování stránky) */
.cursor, .cursor-dot { will-change: transform; }

/* ============================================================
   REFINEMENT 2026-10-11
   ============================================================ */
/* Podpis v liště (původní img/logo.png, bíle na tmavé liště) */
.bar__name { flex-direction: row; align-items: center; }
/* Velikost přes --sig; obrázek má kolem tahu průhledný okraj, záporné okraje ho vyrovnají,
   takže lišta je stejně vysoká (efektivní výška 0,44 × --sig ≤ 44 px). Polish 14. 10.: +33 %. */
.bar__sig { --sig: 96px; height: var(--sig); width: auto; margin: calc(var(--sig) * -.28) 0 calc(var(--sig) * -.28) calc(var(--sig) * -.22); filter: brightness(0) invert(1); opacity: .95; transition: opacity var(--t-micro) var(--ease); }
@media (hover: hover) { .bar__name:hover .bar__sig { opacity: .75; } }
@media (max-width: 640px) { .bar__sig { --sig: clamp(64px, 19vw, 78px); } }

/* Moderní telefon: tenký rámeček, Dynamic Island, bez 3D */
.device { position: relative; display: block; padding: 6px; background: #1d1d1f; border-radius: 15% / 7%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(26,26,26,.45); }
.device::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 0; width: 28%; aspect-ratio: 3.6 / 1; margin-top: 12px; transform: translateX(-50%); border-radius: 999px; background: #0b0b0c; }
.device > img { display: block; width: 100%; height: auto; border-radius: 12.8% / 5.9%; }

/* Homepage RESACS: jeden statický vizuál, čistá hierarchie faktů */
.story .viewer { margin: 0; }
.story .viewer img { border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); border: 1px solid var(--line); }
.facts { padding-top: .25rem; gap: 1.6rem; align-self: start; }
.facts dt { font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); margin-bottom: .35rem; }
.facts dd { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); padding-bottom: 0; border-bottom: 0; max-width: 22rem; }
.facts .facts__link { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
@media (max-width: 1023px) {
  .facts { padding-top: 0; gap: 1.25rem 1.5rem; }
  .facts dd { font-size: 1rem; }
}

/* Homepage Míkovice: telefon v rámečku */
.mik__phone { aspect-ratio: auto; object-fit: initial; border: 0; border-radius: 15% / 7%; width: 24%; left: 0; bottom: 0; }
@media (max-width: 1023px) { .mik__phone { width: 26%; } }
@media (max-width: 640px) { .mik__phone { position: static; width: 62%; margin: 0 auto; border-radius: 15% / 7%; } }

/* Služby: obecné schéma místo klientských screenshotů */
.index__preview img { object-position: center; background: var(--paper); }

/* ============================================================
   FINÁLNÍ REFINEMENT 11. 10. 2026
   ============================================================ */
/* Podpis: bez smršťování v liště (správný poměr stran 300 : 160) */
.bar__name { flex: none; }
.bar__sig { flex: none; max-width: none; aspect-ratio: 300 / 160; }
/* Homepage: RESACS jako ochutnávka, titulek menší než v případové studii */
.story__title--home { font-size: clamp(3.25rem, 9vw, 136px); line-height: .88; }
/* Věta „Co navrhnu…“: posun řádků při scrollu nesmí přesáhnout šířku stránky (WebKit, 1 px) */
.moment { overflow-x: clip; }

/* ============================================================
   RUČNĚ PSANÉ POZNÁMKY (11. 10. 2026)
   Caveat 500, podmnožina malých písmen s diakritikou (SIL OFL 1.1, fonts/OFL-Caveat.txt).
   Poznámky jsou doplněk: aria-hidden, neblokují klikání, obsah je i v textu stránky.
   S JS se písmo stáhne až po load (ss-site.js), do té doby poznámka drží místo a je skrytá.
   ============================================================ */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/caveat-500-cz.woff2) format('woff2');
  unicode-range: U+20-21, U+2C-2E, U+30-3B, U+3F, U+61-7A, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10D, U+10F, U+11B, U+148, U+159, U+161, U+165, U+16F, U+17E, U+2013, U+201C, U+201E, U+2026; }

.hn { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .35rem; color: #4A4A4A; pointer-events: none; white-space: nowrap; }
.hn--light { color: rgba(240,240,240,.82); }
.hn__t { display: inline-block; height: 1.3em; font-family: 'Caveat', cursive; font-weight: 500; font-size: clamp(1.375rem, 1.7vw, 1.625rem); line-height: 1.3; letter-spacing: .005em; transform: rotate(var(--hn-rot, -2.5deg)); transition: opacity .25s ease; }
.hn svg, .hn-mark svg, .hn-ring svg { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hn__arrow { flex: none; width: var(--hn-aw, 72px); height: auto; }
.hn-mark { position: relative; display: inline-block; white-space: nowrap; }
.hn-mark .hn__shape { position: absolute; left: -2%; bottom: -.32em; width: 105%; height: .45em; pointer-events: none; color: var(--red); }
.hn-ring { position: absolute; z-index: 3; pointer-events: none; color: #4A4A4A; }
.hn-ring svg { width: 100%; height: 100%; stroke-width: 2.2; }

/* odložené písmo: do načtení neviditelné, místo zůstává (pevná výška řádku) */
.js:not(.hn-font) .hn__t { font-family: cursive; opacity: 0; }
.js:not(.hn-font) [data-hn] path { opacity: 0; }
.hn-off [data-hn] { visibility: hidden; }   /* písmo se nenačetlo: poznámky raději skrýt */

/* dokreslení jednou při vstupu do viewportu (ss-site.js přidá .hn-anim jen bez reduced motion) */
.hn-anim [data-hn] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.55,.1,.3,1) .25s; }
.hn-anim [data-hn] path + path { transition-duration: .2s; transition-delay: .7s; }
.hn-anim .hn-mark[data-hn] path, .hn-anim .hn-ring[data-hn] path { transition-delay: .05s; }
.hn-anim [data-hn] .hn__t { clip-path: inset(-20% 100% -20% 0); transition: clip-path .45s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.hn-anim [data-hn].is-in path { stroke-dashoffset: 0; }
.hn-anim [data-hn].is-in .hn__t { clip-path: inset(-20% -5% -20% 0); }

/* umístění na desktopu */
@media (min-width: 1100px) {
  .hero__side, .story .viewer, .close .path, .tour__intro, .langs2__text, .bloom__plate { position: relative; }
  .hn-hero { right: calc(100% + 1.5rem); top: 3.55rem; --hn-aw: 84px; }
  .hn-hero .hn__arrow { margin-top: 1.4rem; }
  .hn-ring--resacs { left: 5%; top: 30.5%; width: 35%; height: 34%; }
  .hn-resacs { left: 39%; top: 21%; flex-direction: row-reverse; --hn-aw: 48px; --hn-rot: -4deg; }
  .hn-resacs .hn__arrow { margin-top: 2.6rem; transform: rotate(-12deg); }
  .hn-close { left: 38%; top: calc(100% + .35rem); flex-direction: row-reverse; --hn-aw: 34px; --hn-rot: -3deg; }   /* polish 14. 10.: blíž telefonu */
  .hn-close .hn__arrow { margin-top: -1.8rem; }
  .hn-tour { right: .5rem; top: calc(100% + 1.15rem); --hn-aw: 32px; transition: opacity .3s ease; }
  .hn-tour .hn__arrow { margin-top: -1.5rem; }
  .hn-langs { left: 39rem; top: -.4rem; --hn-aw: 44px; }
  .hn-langs .hn__arrow { margin-top: 2.6rem; }
  .bloom__plate { overflow: visible; }
  .hn-ring--dots { left: 50%; bottom: .55rem; width: 150px; height: 46px; transform: translateX(-50%); }
  .hn-dots { left: calc(100% + 1rem); bottom: .9rem; flex-direction: row-reverse; --hn-aw: 54px; }
  .hn-photo { left: 15rem; bottom: calc(100% + 1.25rem); --hn-aw: 92px; }
  .hn-photo .hn__arrow { margin-top: 1.6rem; }
}
@media (min-width: 1100px) { .hn-dots--m { display: none; } }
/* nápověda v prohlídce: jen dokud návštěvník mobilní verzi neviděl */
.tour[data-device="mob"] .hn-tour, .tour.hn-seen .hn-tour { opacity: 0; }

/* tablet a mobil: krátké poznámky v toku textu, bez šipek; některé vynechané */
@media (max-width: 1099px) {
  .hn { position: static; display: flex; width: max-content; max-width: 100%; margin-top: .6rem; grid-column: 1 / -1; }
  .hn .hn__arrow, .hn-ring, .hn-tour, .hn-photo { display: none; }
  .hn__t { font-size: 1.375rem; }
  .story .viewer .hn-resacs { margin-top: .75rem; }
  /* paleta: na mobilu autorská poznámka mimo bílou klientskou kartu, na růžovém podkladu */
  .bloom__plate .hn-dots { display: none; }
  .hn-dots--m { justify-self: center; margin: -.25rem auto .5rem; }
  .close .path .hn-close { margin-top: .1rem; align-self: flex-end; }   /* polish 14. 10.: vpravo pod telefonem */
}
@media (prefers-reduced-motion: reduce) {
  .hn-anim [data-hn] path, .hn-anim [data-hn] .hn__t { transition: none; stroke-dashoffset: 0; clip-path: none; }
}

/* ============================================================
   REFINEMENT 12. 10. 2026
   ============================================================ */
/* RESACS (homepage): sekční popisky v tmavším akcentu, odstavce beze změny.
   --red-dark má na #F5F5F5 kontrast 5,8:1 (sytá --red jen 4,2:1, pod AA pro malý text). */
.story .facts dt { color: var(--red-dark); font-weight: 600; }

/* Míkovice: telefon s odstupem pod screenshotem webu, ne „přilepený“ na jeho spodní hraně */
/* telefon je v toku hned pod screenshotem (position: relative), proto horní okraj na něm */
@media (min-width: 641px) { .mik__phone { margin-top: clamp(1.75rem, 3vw, 2.75rem); } }
/* na mobilu musí rámeček zůstat position: relative, jinak se Dynamic Island (::before) měří od obalu sekce */
@media (max-width: 640px) { .mik__phone { position: relative; margin-top: 1rem; } }

/* Na co se můžete spolehnout: čistší struktura, každý bod oddělený linkou, kratší řádky */
.assure__grid { row-gap: 0; }
.assure__grid > div { padding: 1.15rem 0 1.5rem; border-top: 1px solid var(--line); }
.assure__grid > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.assure__grid dt { font-size: 1.0625rem; letter-spacing: -.01em; margin-bottom: .4rem; }
.assure__grid dd { max-width: 38ch; line-height: 1.55; }
.assure__actions { margin-top: .75rem; }
@media (max-width: 1023px) {
  .assure__title { margin-bottom: .5rem; }
}
@media (max-width: 640px) {
  .assure__grid > div:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.15rem; }
}