/* Promo 3D – designový systém. Koncept: web jako jejich barový plakát – skutečné předměty s popiskami na barvách loga. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/shantell-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/shantell-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

:root {
  /* barvy z loga Promo 3D (logo_big.gif) + švestková z rámu starého webu */
  --fialova: #7031a0;
  --fialova-2: #5e2589;
  --svestka: #3a0b44;
  --serik: #fbf1fe;
  --serik-2: #f1defa;
  --oranz: #f4930e;
  --limetka: #b4ec09; /* původní svítivá: akcent na fialové (klientka 1. 11.) */
  --limetka-plocha: #e2e868; /* tlumená zelenkavá (Pantone 379/386 C) jen pro velké plochy */
  --nebe: #68d2df; /* Pantone 3105 C – tlumenější podle klientky 1. 11. */
  --seda: #c0c0c0;
  --bila: #ffffff;
  --text: var(--svestka);
  --muted: #6b4a73;

  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ruka: "Shantell Sans", "Bradley Hand", "Comic Sans MS", cursive;

  --display: clamp(2.9rem, 1.2rem + 6.6vw, 7.6rem);
  --h2: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem);
  --h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  --text-0: clamp(1.05rem, 1rem + 0.2vw, 1.1875rem);
  --text-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --drobne: 0.875rem;

  --m-1: 0.5rem; --m-2: 1rem; --m-3: 1.5rem; --m-4: 2rem; --m-5: 3rem; --m-6: 4rem; --m-7: 6rem; --m-8: 8rem;
  --sekce: clamp(4.5rem, 3rem + 6vw, 9rem);
  --okraj: clamp(1.1rem, 4vw, 3.5rem);
  --sirka: 84rem;
  --r: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

body { background: var(--serik); color: var(--text); font-family: var(--font); font-size: var(--text-0); line-height: 1.55;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font); font-weight: 760; letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
a { color: inherit; }
::selection { background: var(--limetka); color: var(--svestka); }
:focus-visible { outline: 3px solid var(--oranz); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m-2); top: -4rem; background: var(--bila); padding: var(--m-1) var(--m-2); z-index: 100; }
.skip:focus { top: var(--m-2); }
.wrap { width: min(100% - 2 * var(--okraj), var(--sirka)); margin-inline: auto; }
.ruka { font-family: var(--ruka); font-weight: 500; letter-spacing: 0; }

/* tlačítka: hranaté s tvrdým stínem jako výsek z plakátu */
.tlacitko { display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .7em 1.35em; font-weight: 700;
  font-size: var(--text-0); text-decoration: none; border-radius: 10px; border: 2px solid var(--svestka);
  background: var(--limetka); color: var(--svestka); box-shadow: 4px 4px 0 var(--svestka);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s; }
.tlacitko:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--svestka); }
.tlacitko:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--svestka); }
.tlacitko--svetle { background: var(--bila); }
.tlacitko--oranz { background: var(--oranz); }
.odkaz { display: inline-block; padding-block: .6rem; font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s; }
.odkaz:hover { text-decoration-color: currentColor; }

/* hlavička */
.hlavicka { position: relative; z-index: 20; display: flex; align-items: center; gap: var(--m-4); padding: 14px var(--okraj);
  color: var(--svestka); }
.logo { display: block; flex: none; padding: 10px 14px; margin-left: -14px; border-radius: 12px; background: var(--serik); transition: translate .2s var(--ease), box-shadow .2s; }
.logo:hover { translate: 0 -2px; box-shadow: 4px 4px 0 var(--svestka); }
.hlavicka-tel-ikona { display: none; }
.logo img { height: 40px; width: auto; }
.menu { display: flex; gap: clamp(.5rem, 2vw, 2rem); margin-inline: auto; }
.menu a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; font-size: 1.0625rem; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .25s var(--ease); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"]::after { height: 3px; background: var(--oranz); }
.menu-tel { display: none !important; }
.hlavicka-tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.hlavicka-tel:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.burger { display: none; }
.hlavicka--na-fialove { color: var(--bila); }

@media (max-width: 960px) {
  .hlavicka { justify-content: space-between; }
  .hlavicka-tel { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; background: var(--limetka); color: var(--svestka); }
  .hlavicka-tel-ikona { display: block; width: 22px; height: 22px; fill: currentColor; }
  .hlavicka-tel-cislo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logo img { height: 32px; }
  .burger { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 10px; background: transparent; }
  .burger-car, .burger-car::before, .burger-car::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .burger-car { position: relative; }
  .burger-car::before, .burger-car::after { content: ""; position: absolute; left: 0; }
  .burger-car::before { top: -6px; } .burger-car::after { top: 6px; }
  .burger[aria-expanded="true"] .burger-car { background: transparent; }
  .burger[aria-expanded="true"] .burger-car::before { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger-car::after { transform: translateY(-6px) rotate(-45deg); }
  .menu { position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; gap: 0; padding: 96px var(--okraj) var(--m-5);
    background: var(--fialova); color: var(--bila); transform: translateY(-105%); transition: transform .35s var(--ease); z-index: -1;
    box-shadow: 0 20px 40px rgb(58 11 68 / .25); visibility: hidden; }
  .menu.otevreno { transform: none; visibility: visible; }
  .menu a { font-size: 1.75rem; font-weight: 700; min-height: 56px; border-bottom: 1px solid rgb(255 255 255 / .18); }
  .menu .menu-tel { display: inline-flex !important; color: var(--limetka); border: 0; }
  .hlavicka:has(.menu.otevreno) .burger { color: var(--bila); position: relative; z-index: 2; }
}

/* patička */
.paticka { background: var(--svestka); color: var(--serik); padding: var(--m-7) var(--okraj) var(--m-4); }
.paticka-in { max-width: var(--sirka); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: var(--m-5); align-items: start; }
.paticka-veta img { width: 190px; height: auto; background: var(--serik); padding: 10px 14px; border-radius: 12px; margin-bottom: var(--m-3); }
.paticka-veta p { max-width: 34ch; font-size: var(--text-1); line-height: 1.35; }
.paticka-kontakt p { margin-bottom: var(--m-3); line-height: 1.7; }
.paticka-kontakt a { font-weight: 700; font-size: var(--text-1); text-decoration: none; }
.paticka-kontakt a:hover, .paticka-nav a:hover { text-decoration: underline; text-underline-offset: .25em; }
.paticka-nav { display: grid; gap: 2px; }
.paticka-nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.paticka-pravni { max-width: var(--sirka); margin: var(--m-6) auto 0; padding-top: var(--m-3); border-top: 1px solid rgb(251 241 254 / .2);
  font-size: var(--drobne); color: rgb(251 241 254 / .7); }
@media (max-width: 760px) { .paticka-in { grid-template-columns: 1fr; gap: var(--m-4); } }

/* formulář */
.formular { display: grid; gap: var(--m-2); }
.formular label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.formular input, .formular textarea, .formular select { width: 100%; min-height: 52px; padding: .75em .9em; border: 2px solid var(--svestka);
  border-radius: 10px; background: var(--bila); color: var(--svestka); transition: box-shadow .18s; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--fialova); }
.formular input:user-invalid, .formular textarea:user-invalid { border-color: #c2261b; }
.formular .past { position: absolute; left: -9999px; }
.formular button[type="submit"] { justify-self: start; }
.formular-stav { font-size: var(--drobne); min-height: 1.5em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js .popiska path, html.js .rozbor path, html.js .plakat-rozbor path { stroke-dashoffset: 0 !important; }
  html.js .popiska circle, html.js .popiska span, html.js .rozbor circle, html.js .rozbor li, html.js .plakat-rozbor circle, html.js .plakat-rozbor li { opacity: 1 !important; translate: 0 0 !important; }
}

/* ---------- předmět s popiskou (řeč jejich plakátů) ---------- */
.vec { margin: 0; position: relative; }
.vec-obr img { width: 100%; rotate: var(--r, 0deg); filter: drop-shadow(0 22px 26px rgb(35 4 52 / .32));
  transition: transform .5s var(--ease); }
.vec:hover .vec-obr img { transform: scale(1.04) rotate(-2deg); }
.popiska { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 2px; width: max-content;
  font-family: var(--ruka); font-weight: 500; font-size: clamp(1rem, .8rem + .5vw, 1.4rem); line-height: 1.18; color: var(--limetka);
  pointer-events: none; }
.popiska svg { flex: none; width: 92px; height: 46px; overflow: visible; }
.popiska path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.popiska circle { fill: currentColor; }
.popiska span { max-width: var(--pmax, 12rem); }
.popiska--vpravo { left: calc(100% - var(--prekryv, 22px)); top: var(--py, 4%); }
.popiska--vlevo { right: calc(100% - var(--prekryv, 22px)); top: var(--py, 4%); flex-direction: row-reverse; text-align: right; }
.popiska--dole, .popiska--nahore { left: var(--px, 30%); flex-direction: column; }
.popiska--dole { top: calc(100% - var(--prekryv, 14px)); }
.popiska--nahore { bottom: calc(100% - var(--prekryv, 14px)); flex-direction: column-reverse; }
.popiska--dole svg, .popiska--nahore svg { width: 34px; height: 52px; margin-left: -4px; }
html.js .popiska path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) var(--d, 0s); }
html.js .popiska circle { opacity: 0; transition: opacity .2s var(--d, 0s); }
html.js .popiska span { opacity: 0; translate: 0 8px; transition: opacity .6s var(--ease), translate .6s var(--ease); transition-delay: calc(var(--d, 0s) + .45s); }
html.js .videt .popiska path { stroke-dashoffset: 0; }
html.js .videt .popiska circle, html.js .videt .popiska span { opacity: 1; translate: 0 0; }

/* ---------- úvod: hero A – plakát s popiskami ---------- */
.na-fialove .hlavicka { background: var(--fialova); color: var(--bila); }
.hero-a { position: relative; isolation: isolate; background: var(--fialova); color: var(--bila); overflow: hidden;
  min-height: max(660px, calc(100svh - 76px)); padding: 0 var(--okraj) var(--m-4); display: flex; flex-direction: column; }
.hero-a h1 { position: relative; z-index: 2; text-align: center; font-weight: 800; font-size: clamp(2.6rem, .8rem + 7.2vw, 8.6rem);
  line-height: .92; letter-spacing: -0.042em; padding-top: clamp(1rem, 3vh, 2.5rem); }
.hero-a h1 .radek { display: block; }
.hero-a .scena { position: absolute; inset: 0; z-index: 1; }
.hero-a .scena .vec { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
/* medvěd stojí vždy nad textem v patě (ten je ukotvený dole), ať se nepřekrývají na žádné výšce okna */
.hero-a { --nad-patou: calc(var(--m-4) + 4 * 1.35 * var(--text-1) + 2.2rem); }
.hero-a .scena .vec--od-spodu { top: auto; bottom: var(--b); }
@media (min-width: 761px) and (max-width: 1100px) { .hero-a .scena .vec--zabky { display: none; } }
.hero-a-pata { position: relative; z-index: 3; margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m-4); }
.hero-a-pata p { max-width: 44ch; font-size: var(--text-1); line-height: 1.35; color: var(--serik); }
.hero-a-pata .hero-tlacitka { display: flex; align-items: center; gap: var(--m-4); }
.hero-a-pata .odkaz { color: var(--bila); }
@media (max-width: 760px) {
  .hero-a { min-height: 0; padding-bottom: var(--m-5); }
  .hero-a .scena { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-3); margin: var(--m-4) 0 var(--m-5); }
  .hero-a .scena .vec, .hero-a .scena .vec--od-spodu { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .hero-a .scena .vec--jen-pc { display: none; }
  .hero-a .popiska { position: static; flex-direction: column; margin-top: -6px; width: auto; max-width: none; font-size: 1rem; }
  .hero-a .popiska svg { width: 120px; height: 52px; margin-left: -8px; }
  .hero-a .popiska--vlevo { text-align: left; }
  .hero-a .popiska--vpravo path, .hero-a .popiska--vlevo path { d: path("M16 3 C 2 22, 34 30, 14 57"); }
  .hero-a .popiska--vpravo circle, .hero-a .popiska--vlevo circle { cx: 16; cy: 3; }
  .hero-a-pata { flex-direction: column; align-items: flex-start; gap: var(--m-3); }
  .hero-a-pata .hero-tlacitka { flex-wrap: wrap; gap: var(--m-3); }
}

/* ---------- společné pro sekce ---------- */
.nadtitulek { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); color: var(--fialova); margin-bottom: var(--m-2); }
.na-tmave .nadtitulek, .plakaty .nadtitulek { color: var(--limetka); }
.formular button[type="submit"] { display: inline-flex; align-items: center; min-height: 52px; padding: .7em 1.35em; font-weight: 700;
  border-radius: 10px; border: 2px solid var(--svestka); background: var(--limetka); color: var(--svestka); box-shadow: 4px 4px 0 var(--svestka);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.formular button[type="submit"]:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--svestka); }
.formular button[type="submit"]:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--svestka); }

/* ---------- úvod: rozbor jednoho předmětu ---------- */
.predmet { padding-block: var(--sekce); overflow: hidden; }
.predmet-in { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nad ." "h text" "h odkaz" "obr obr"; grid-template-rows: auto auto 1fr auto; column-gap: var(--m-5); }
.predmet .nadtitulek { grid-area: nad; }
.predmet h2 { grid-area: h; font-size: clamp(2.6rem, 1.2rem + 5vw, 6.2rem); line-height: .94; color: var(--fialova); }
.rozbor { grid-area: obr; position: relative; width: min(100%, 31.5rem); justify-self: center; margin: var(--m-5) 0 0; }
.rozbor > img, .rozbor > picture img { width: 100%; filter: drop-shadow(0 30px 34px rgb(58 11 68 / .25)); rotate: -4deg; }
.rozbor-plocha { position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; pointer-events: none; }
.rozbor-plocha svg { width: 100%; height: 100%; overflow: visible; }
.rozbor-plocha path { fill: none; stroke: var(--fialova); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rozbor-plocha circle { fill: var(--oranz); stroke: var(--svestka); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rozbor-popisky { position: absolute; inset: 0 -50%; margin: 0; padding: 0; pointer-events: none; }
.rozbor-popisky li { position: absolute; top: var(--top); right: calc(78.6%); width: 13.5rem; translate: 0 -50%; text-align: right;
  font-size: clamp(1.05rem, .85rem + .5vw, 1.45rem); line-height: 1.2; color: var(--svestka); font-weight: 500; }
.rozbor-popisky li.vpravo { right: auto; left: 78.6%; text-align: left; }
html.js .rozbor-plocha path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
html.js .rozbor-plocha path:nth-of-type(2) { transition-delay: .25s; } html.js .rozbor-plocha path:nth-of-type(3) { transition-delay: .5s; }
html.js .rozbor-plocha path:nth-of-type(4) { transition-delay: .75s; }
html.js .rozbor-plocha circle { opacity: 0; transition: opacity .3s; }
html.js .rozbor-popisky li { opacity: 0; transition: opacity .6s var(--ease) .6s; }
html.js .rozbor-popisky li:nth-child(2) { transition-delay: .85s; } html.js .rozbor-popisky li:nth-child(3) { transition-delay: 1.1s; }
html.js .rozbor-popisky li:nth-child(4) { transition-delay: 1.35s; }
html.js .rozbor.videt path { stroke-dashoffset: 0; }
html.js .rozbor.videt circle, html.js .rozbor.videt li { opacity: 1; }
.predmet-text { grid-area: text; align-self: end; max-width: 40ch; font-size: var(--text-1); line-height: 1.4; }
.predmet-odkaz { grid-area: odkaz; justify-self: start; align-self: start; margin-top: var(--m-3); color: var(--fialova); }
@media (max-width: 860px) {
  .predmet-in { grid-template-columns: 1fr; grid-template-areas: "nad" "h" "obr" "text" "odkaz"; row-gap: var(--m-3); }
  .rozbor { margin: var(--m-3) 0; width: 100%; }
  .rozbor-plocha { display: none; }
  .rozbor-popisky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-2) var(--m-3); margin-top: calc(var(--m-6) + 2rem); counter-reset: p; }
  .rozbor > img { rotate: 0deg; }
  .rozbor-popisky li, .rozbor-popisky li.vpravo { position: static; width: auto; translate: none; text-align: left; font-size: 1.05rem;
    padding-left: 1.1rem; border-left: 3px solid var(--oranz); }
  html.js .rozbor-popisky li { opacity: 1; }
}

/* ---------- úvod: nabídka jako řádky, barva okvětí loga se při najetí rozlije přes řádek ---------- */
.nabidka { padding-bottom: var(--m-7); }
.nabidka h2 { color: var(--fialova); margin-bottom: var(--m-5); max-width: 15ch; }
.kat-radky { border-top: 2px solid var(--svestka); }
.kat-radek { --barva: var(--nebe); border-bottom: 2px solid var(--svestka); }
.kat-radek--plast { --barva: var(--limetka); } .kat-radek--textil { --barva: var(--oranz); } .kat-radek--privesky { --barva: var(--serik-2); }
.kat-radek a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) clamp(8rem, 15vw, 13rem);
  grid-template-areas: "h p obr"; align-items: center; gap: var(--m-4); padding: clamp(1rem, 1.8vw, 1.6rem) var(--m-3); margin-inline: calc(-1 * var(--m-3));
  text-decoration: none; color: var(--svestka); }
.kat-radek a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--barva); clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease); }
.kat-radek a:hover::before, .kat-radek a:focus-visible::before { clip-path: inset(0); }
.kat-radek h3 { grid-area: h; font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: .9; }
.kat-radek p { grid-area: p; max-width: 36ch; font-size: var(--text-0); line-height: 1.45; }
.kat-radek-obr { grid-area: obr; position: relative; display: grid; place-items: center; height: clamp(5.5rem, 3rem + 5vw, 8rem); }
.kat-radek--privesky .kat-radek-obr img { height: 84%; }
.kat-radek--plast .kat-radek-obr img { height: auto; max-width: min(100%, 9.5rem); }
.kat-radek-obr::before { content: ""; position: absolute; height: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--barva);
  border: 2px solid var(--svestka); transition: scale .5s var(--ease); }
.kat-radek--privesky .kat-radek-obr::before { background: var(--fialova); }
.kat-radek-obr img { position: relative; height: 86%; width: auto; max-width: 84%; object-fit: contain; rotate: -7deg;
  filter: drop-shadow(0 14px 16px rgb(58 11 68 / .3)); transition: transform .5s var(--ease); }
.kat-radek a:hover .kat-radek-obr img { transform: scale(1.12) rotate(9deg); }
.kat-radek a:hover .kat-radek-obr::before { scale: 0; }
@media (max-width: 760px) {
  .kat-radek a { grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: "h obr" "p obr"; gap: var(--m-2) var(--m-3); padding: var(--m-4) var(--okraj); margin-inline: calc(-1 * var(--okraj)); }
  .kat-radek-obr { height: 6rem; }
}

/* ---------- úvod: plakáty barových akcí ---------- */
.plakaty { background: var(--svestka); color: var(--serik); padding-block: var(--m-7); overflow: hidden; }
.plakaty-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: var(--m-6); align-items: center; }
.plakaty h2 { color: var(--bila); margin-bottom: var(--m-4); }
.plakaty-text > p:not(.nadtitulek) { max-width: 40ch; font-size: var(--text-1); line-height: 1.45; margin-bottom: var(--m-3); color: rgb(251 241 254 / .88); }
.plakaty .tlacitko { margin-top: var(--m-2); }
.plakaty-stena { position: relative; aspect-ratio: 1 / .92; }
.tiskovina { position: absolute; margin: 0; padding: 10px; background: var(--bila); box-shadow: 0 30px 50px rgb(0 0 0 / .45); transition: transform .5s var(--ease); }
.tiskovina img { width: 100%; }
.tiskovina--zadni { width: 54%; left: 0; top: 6%; rotate: -7deg; }
.tiskovina--predni { width: 60%; right: 0; top: 0; rotate: 4deg; }
.tiskovina:hover { transform: translateY(-8px) rotate(-1deg); z-index: 2; }
@media (max-width: 860px) {
  .plakaty-in { grid-template-columns: 1fr; }
  .plakaty-stena { aspect-ratio: 1 / .86; margin-top: var(--m-3); }
}

/* ---------- úvod: postup jako jedna věta s předměty v řádku ---------- */
.postup { padding-block: var(--m-7); }
.veta-rada { position: relative; display: flex; align-items: flex-end; justify-content: space-between; max-width: 60rem; margin: var(--m-5) 0 var(--m-4); }
.veta-rada::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 3.2rem; border-top: 3px dashed rgb(112 49 160 / .35); }
.veta-rada li { position: relative; padding-inline: .75rem; background: var(--serik); }
.veta-rada li { display: grid; justify-items: center; gap: .35rem; }
.veta-rada img { height: clamp(4rem, 2rem + 6vw, 9rem); width: auto; rotate: var(--r, -6deg); filter: drop-shadow(0 10px 12px rgb(58 11 68 / .28)); }
.veta-rada li:nth-child(2) img { height: clamp(3.4rem, 1.6rem + 5vw, 7.5rem); }
.veta-rada li:nth-child(1) img { height: clamp(3.6rem, 1.8rem + 5vw, 8rem); }
.veta-rada span { position: relative; padding-bottom: 1.6rem; font-size: clamp(1.05rem, .9rem + .5vw, 1.5rem); color: var(--fialova); }
.veta-rada span::after { content: ""; position: absolute; left: 50%; bottom: .1rem; width: 2px; height: 1.1rem; background: currentColor; }
.veta-rada span::before { content: ""; position: absolute; left: calc(50% - 5px); bottom: 0; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 1px 0; }
.veta { max-width: 30ch; font-size: clamp(2.1rem, 1rem + 3.6vw, 4.8rem); font-weight: 760; line-height: 1.08; letter-spacing: -0.035em; color: var(--svestka); text-wrap: pretty; }
@media (max-width: 520px) { .veta-rada li { padding-inline: .25rem; } .veta-rada img, .veta-rada li:nth-child(1) img { height: 3.6rem; } .veta-rada li:nth-child(2) img { height: 2.9rem; } .veta-rada::before { bottom: 2.9rem; } }
.postup .odkaz { margin-top: var(--m-4); color: var(--fialova); font-size: var(--text-1); }

/* ---------- úvod: pro koho ---------- */
.klienti { background: var(--serik-2); padding-block: var(--m-7); }
.klienti-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--m-5); align-items: start; }
.klienti h2 { color: var(--fialova); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.jmena { display: flex; flex-wrap: wrap; gap: .1em .5em; margin: 0; padding: 0; list-style: none; font-size: clamp(1.7rem, 1rem + 2.2vw, 3rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--svestka); }
.jmena li { display: inline-flex; align-items: center; gap: .5em; }
.jmena li:not(:last-child)::after { content: ""; width: .42em; height: .42em; flex: none; background: var(--oranz);
  border-radius: 60% 0 60% 0; rotate: 45deg; }
.jmena li:nth-child(4n+2)::after { background: var(--limetka); } .jmena li:nth-child(4n+3)::after { background: var(--nebe); }
.jmena li:nth-child(4n)::after { background: var(--fialova); }
@media (max-width: 860px) { .klienti-in { grid-template-columns: 1fr; } }

/* ---------- výzva na konci stránky (barva a předmět podle stránky) ---------- */
.vyzva { --pozadi: var(--oranz); background: var(--pozadi); color: var(--svestka); padding-block: var(--sekce); overflow: hidden; }
.vyzva--nebe { --pozadi: var(--nebe); } .vyzva--limetka { --pozadi: var(--limetka-plocha); }
.vyzva-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--m-6); align-items: end; }
.vyzva h2 { font-size: clamp(2.6rem, 1.2rem + 5vw, 6.2rem); line-height: .93; letter-spacing: -0.04em; max-width: 13ch; }
.vyzva-hlavni p { max-width: 40ch; margin-top: var(--m-4); font-size: var(--text-1); line-height: 1.4; }
.vyzva .tlacitko { margin-top: var(--m-4); background: var(--bila); }
.vyzva-bok { display: grid; gap: var(--m-4); }
.vyzva-vec { width: min(58%, 14rem); justify-self: end; margin-right: 6%; }
.vyzva .popiska { color: var(--svestka); }
.vyzva-kontakt { display: grid; gap: .2rem; justify-items: start; padding-top: var(--m-3); border-top: 2px solid var(--svestka); }
.vyzva-tel { display: inline-block; padding-block: .3rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 760; letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: tabular-nums; }
.vyzva-mail { display: inline-block; padding-block: .5rem; font-size: var(--text-1); font-weight: 650; }
.vyzva-tel:hover, .vyzva-mail:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }
@media (max-width: 860px) {
  .vyzva-in { grid-template-columns: 1fr; gap: var(--m-5); }
  .vyzva-vec { width: 46%; margin-right: 4%; }
  .vyzva .popiska svg { width: 58px; }
  .vyzva .popiska span { max-width: 8rem; }
}

/* ---------- podstránky: společný úvod na fialové ---------- */
.podhero { background: var(--fialova); color: var(--bila); padding: clamp(2rem, 6vh, 4.5rem) 0 var(--m-6); overflow: hidden; }
.podhero h1 { font-size: clamp(2.5rem, 1rem + 5.6vw, 6.6rem); font-weight: 800; line-height: .94; letter-spacing: -0.04em; max-width: 14ch; }
.podhero-pod { display: block; margin-top: .35em; font-family: var(--ruka); font-weight: 500; font-size: .36em; letter-spacing: 0; line-height: 1.2; color: var(--limetka); }
.podhero-text { max-width: 44ch; margin-top: var(--m-4); font-size: var(--text-1); line-height: 1.4; color: var(--serik); }

/* předměty: řada všech předmětů v jednom měřítku */
.rada { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m-2);
  width: calc(100% - 2 * var(--okraj)); max-width: 110rem; margin: var(--m-7) auto 0; }
.podhero .rada { margin: var(--m-6) auto 0; }
.rada li { flex: var(--f, 1) 1 0; min-width: 0; }
.rada li:nth-child(1) { --f: 1.35; } .rada li:nth-child(2) { --f: 1.25; } .rada li:nth-child(3) { --f: 1; }
.rada li:nth-child(4) { --f: 1.2; } .rada li:nth-child(5) { --f: 1.15; } .rada li:nth-child(6) { --f: .85; }
.rada li:nth-child(6) img { max-width: 10rem; }
.rada li:nth-child(5) img { max-width: 6.5rem; }
.rada a { display: grid; justify-items: center; gap: var(--m-2); text-decoration: none; color: var(--limetka); }
.rada img { width: 100%; filter: drop-shadow(0 18px 20px rgb(35 4 52 / .35)); transition: transform .4s var(--ease); }
.rada li:nth-child(odd) img { rotate: -5deg; } .rada li:nth-child(even) img { rotate: 6deg; }
.rada a:hover img { transform: translateY(-10px) scale(1.04); }
.rada span { font-size: clamp(1.1rem, .9rem + .5vw, 1.5rem); border-bottom: 2px solid transparent; transition: border-color .2s; }
.rada a:hover span { border-color: currentColor; }
@media (max-width: 760px) {
  .rada { flex-wrap: wrap; justify-content: center; gap: var(--m-4) var(--m-3); }
  .rada li { flex: 0 0 calc(50% - var(--m-3)); }
  .rada li:nth-child(6) { flex-basis: 30%; }
}

/* předměty: kategorie jako barevné archy s popiskami */
.kat { padding-block: var(--sekce); overflow: hidden; scroll-margin-top: 0; }
.kat--plys { background: var(--nebe); }
.kat--plast { background: var(--limetka-plocha); }
.kat--textil { background: var(--oranz); }
.kat--privesky { background: var(--serik-2); }
.kat-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--m-6); align-items: center; }
.kat-in--obracene .kat-text { order: 2; }
.kat-cislo { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); margin-bottom: var(--m-2); }
.kat h2 { font-size: clamp(3rem, 1.2rem + 6vw, 7.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: .9; margin-bottom: var(--m-4); }
.kat-text > p:not(.kat-cislo) { max-width: 42ch; font-size: var(--text-1); line-height: 1.42; }
.kat h3 { margin-top: var(--m-5); margin-bottom: var(--m-2); font-size: var(--text-0); font-weight: 700; letter-spacing: 0; }
.kat-seznam { border-top: 2px solid var(--svestka); max-width: 34rem; }
.kat-seznam li { display: flex; justify-content: space-between; gap: var(--m-3); padding: .7rem 0; border-bottom: 1px solid rgb(58 11 68 / .3); }
.kat-seznam b { flex: none; font-weight: 700; text-align: right; }
.kat-scena { position: relative; aspect-ratio: 1 / .9; }
.kat-scena .vec { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.kat-scena .vec--usb { width: min(var(--w), 10rem); }
.kat .popiska { color: var(--svestka); font-size: clamp(1.05rem, .85rem + .5vw, 1.45rem); }
@media (max-width: 860px) {
  .kat-in { grid-template-columns: 1fr; gap: var(--m-5); }
  .kat-in--obracene .kat-text { order: 0; }
  .kat-scena { aspect-ratio: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: var(--m-4) var(--m-3); }
  .kat-scena .vec { position: relative; left: auto; top: auto; width: min(var(--w) * 1.4, 88%); }
  .kat .popiska { position: static; flex-direction: column; width: auto; margin-top: -4px; font-size: 1rem; text-align: left; }
  .kat .popiska svg { width: 120px; height: 52px; margin-left: -8px; }
  .kat .popiska--vpravo path, .kat .popiska--vlevo path, .kat .popiska--nahore path { d: path("M16 3 C 2 22, 34 30, 14 57"); }
  .kat .popiska--vpravo circle, .kat .popiska--vlevo circle, .kat .popiska--nahore circle { cx: 16; cy: 3; }
  .kat .popiska--nahore { flex-direction: column; }
}

/* plyš: velká ruční poznámka a medvědi v přirozené velikosti fotek */
.kat-scena--plys { aspect-ratio: 1 / .9; }
.plys-pribeh { position: absolute; left: 0; top: 2%; width: 64%; font-size: clamp(1.7rem, 1rem + 1.9vw, 3rem); line-height: 1.05; color: var(--svestka); rotate: -3deg; }
.plys-pribeh span { display: block; margin-bottom: .3em; font-size: .5em; line-height: 1.2; color: var(--svestka); }
.plys-sipka { position: absolute; left: 16%; top: 33%; width: 20%; overflow: visible; }
.plys-sipka path { fill: none; stroke: var(--svestka); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plys-kus { position: absolute; }
.plys-kus img { width: 100%; filter: drop-shadow(0 22px 24px rgb(35 4 52 / .3)); transition: rotate .5s var(--ease); }
.plys-kus--velky { left: 26%; top: 44%; width: min(60%, 20rem); }
.plys-kus--velky img { rotate: -4deg; }
.plys-kus--maly { right: -2%; bottom: 0; width: min(34%, 14rem); }
.plys-kus--maly img { rotate: 10deg; }
.plys-kus:hover img { rotate: 0deg; }
.kat-scena--plys .vec--obal { right: 0; top: 6%; width: min(28%, 13rem); }
@media (max-width: 860px) {
  .kat-scena--plys { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-3); align-items: end; }
  .plys-pribeh { position: static; grid-column: 1 / -1; width: auto; font-size: 1.8rem; rotate: -2deg; }
  .plys-sipka { display: none; }
  .plys-kus { position: relative; }
  .plys-kus--velky { grid-column: 1 / -1; justify-self: center; width: min(80%, 19rem); left: auto; top: auto; }
  .plys-kus--maly { right: auto; bottom: auto; width: 100%; }
  .kat-scena--plys .vec--obal { width: 100%; }
}

/* textil: věci visí na prádelní šňůře přes celou šířku */
.textil-hlava { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m-6); align-items: end; }
.textil-hlava h2 { margin-bottom: 0; }
.textil-hlava > p { max-width: 42ch; font-size: var(--text-1); line-height: 1.42; }
.snura { --lano: clamp(4rem, 8vw, 7.5rem); position: relative; height: clamp(22rem, 28vw, 27rem); margin-top: var(--m-5); }
.snura-lano { position: absolute; left: 0; top: 0; width: 100%; height: var(--lano); overflow: visible; }
.snura-lano path { fill: none; stroke: var(--svestka); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.snura-kus { position: absolute; left: var(--x); top: calc(var(--y) * var(--lano)); translate: -50% 0; display: grid; justify-items: center;
  transform-origin: 50% 0; animation: houpe 5s ease-in-out infinite; }
.snura-kus:nth-child(2) { animation-delay: -1.6s; } .snura-kus:nth-child(3) { animation-delay: -3.1s; }
@keyframes houpe { 50% { rotate: 1.6deg; } }
.kolicek { position: relative; z-index: 2; width: 14px; height: 38px; margin-top: -14px; border-radius: 3px; background: var(--serik); border: 2px solid var(--svestka); }
.kolicek::after { content: ""; position: absolute; left: 50%; top: 15px; width: 6px; height: 6px; translate: -50% 0; border-radius: 50%; background: var(--svestka); }
.snura-kus img { margin-top: -10px; filter: drop-shadow(0 18px 20px rgb(58 11 68 / .3)); }
.snura-kus--cepice img { width: clamp(9rem, 16vw, 15rem); rotate: 180deg; }
.snura-kus--zabky img { width: clamp(11rem, 22vw, 20rem); rotate: -4deg; }
.snura-popis { max-width: 14ch; margin-top: var(--m-2); text-align: center; font-size: clamp(1.05rem, .85rem + .5vw, 1.45rem); line-height: 1.15; }
.stitek { display: grid; gap: .3rem; width: 12rem; margin-top: -6px; padding: 1.2rem 1rem 1rem; background: var(--serik); border: 2px solid var(--svestka); border-radius: 6px;
  box-shadow: 5px 5px 0 var(--svestka); text-decoration: none; rotate: 4deg; transition: rotate .3s var(--ease); }
.stitek b { font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.02em; }
.stitek span { font-size: 1rem; line-height: 1.2; color: var(--fialova); text-decoration: underline; text-underline-offset: .2em; }
.stitek:hover { rotate: 0deg; }
@media (max-width: 760px) {
  .textil-hlava { grid-template-columns: 1fr; gap: var(--m-3); }
  .snura { --lano: 3.5rem; height: auto; padding-top: 3rem; display: block; }
  .snura-veci { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-4) var(--m-2); align-items: start; }
  .snura-kus { position: relative; left: auto; top: auto; translate: none; }
  .snura-kus--cepice img { width: 30vw; } .snura-kus--zabky img { width: 40vw; }
  .snura-kus--stitek { grid-column: 1 / -1; }
  .snura-kus--stitek .kolicek { display: none; }
}

/* přívěsky: nadpis uprostřed, srdíčko visí na háčku, medvídek leží vedle */
.privesky-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: var(--m-5); align-items: start; }
.privesky-text { text-align: center; display: grid; justify-items: center; }
.privesky-text > p:not(.kat-cislo) { max-width: 40ch; font-size: var(--text-1); line-height: 1.42; margin-bottom: var(--m-5); }
.privesky-text .kat-seznam { width: 100%; text-align: left; }
.privesky-bok { position: relative; }
.privesky-bok--l { display: grid; justify-items: center; margin-top: calc(-1 * var(--sekce)); }
.hacek { width: 2px; height: calc(var(--sekce) + 2rem); background: var(--svestka); }
.privesky-bok--l .vec { width: 58%; margin-top: -1.2rem; transform-origin: 50% 0; animation: houpe 4s ease-in-out infinite; }
.privesky-bok--p { align-self: end; }
.privesky-bok--p .vec { width: 100%; }
@media (max-width: 860px) {
  .privesky-in { grid-template-columns: 1fr 1fr; gap: var(--m-4) var(--m-3); }
  .privesky-text { grid-column: 1 / -1; order: -1; }
  .privesky-bok--l { margin-top: 0; }
  .hacek { height: 3rem; }
  .privesky-bok--l .vec { width: 66%; }
}

/* předměty: na míru – prázdné místo s popiskou čeká na předmět klienta */
.na-miru { padding-block: var(--sekce); background: var(--fialova); color: var(--bila); overflow: hidden; }
.na-miru-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--m-6); align-items: center; }
.na-miru h2 { font-size: clamp(2.8rem, 1.2rem + 5.4vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -0.045em; margin-bottom: var(--m-4); }
.na-miru p { max-width: 40ch; font-size: var(--text-1); line-height: 1.42; color: var(--serik); margin-bottom: var(--m-4); }
.misto { position: relative; margin: 0; aspect-ratio: 1 / .82; }
.misto svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.misto figcaption { z-index: 2; }
.misto-obrys { fill: rgb(255 255 255 / .06); stroke: var(--limetka); stroke-width: 3; stroke-dasharray: 14 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.misto-cara { fill: none; stroke: var(--limetka); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vejir li { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); transition: translate .5s var(--ease); }
.misto:hover .vejir li { translate: 0 -6px; }
.vejir img { width: 100%; filter: drop-shadow(0 16px 18px rgb(35 4 52 / .4)); }
.misto figcaption { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 11ch; text-align: center; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); line-height: 1.1; color: var(--limetka); }
@media (max-width: 860px) { .na-miru-in { grid-template-columns: 1fr; gap: var(--m-5); } .misto { width: 88%; max-width: 26rem; margin-inline: auto; } }

/* ---------- jak to probíhá ---------- */
.podhero--postup { padding-bottom: var(--m-5); }
.postup-hlava { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--m-4) var(--m-6); align-items: end; }
.postup-hlava h1 { max-width: 13ch; }
.postup-hlava .podhero-text { margin-top: 0; }

/* úvod postupu: smyčka Praha ⇄ Čína, na ní čtyři zastávky se skutečnými předměty (odkazy na kroky) */
.smycka { position: relative; margin-top: var(--m-5); aspect-ratio: 1200 / 520; }
.smycka-cary { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.smycka-cary path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.smycka-tam, .smycka-hrot { stroke: var(--limetka); }
.smycka-zpet, .smycka-hrot--zpet { stroke: var(--oranz) !important; }
.smycka-tam, .smycka-zpet { stroke-dasharray: 10 9; }
.smycka-misto { position: absolute; top: 50%; translate: 0 -50%; display: grid; font-size: var(--text-0); line-height: 1.25; color: var(--serik); }
.smycka-misto b { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--bila); }
.smycka-misto--praha { left: 0; }
.smycka-misto--cina { right: 0; text-align: right; }
.smycka-popis { position: absolute; left: 50%; translate: -50% 0; font-size: clamp(1rem, .85rem + .45vw, 1.4rem); white-space: nowrap; }
.smycka-popis--tam { left: 44%; top: 3%; rotate: -3deg; color: var(--limetka); }
.smycka-popis--zpet { bottom: -1%; color: var(--oranz); }
.smycka-zastavky { position: absolute; inset: 0; }
.zastavka { position: absolute; width: var(--w); left: var(--x); top: var(--y); }
.zastavka a { display: grid; justify-items: center; gap: .3rem; color: var(--bila); text-decoration: none; }
.zastavka img { width: 100%; rotate: var(--r); filter: drop-shadow(0 18px 20px rgb(24 2 34 / .45)); transition: rotate .4s var(--ease), translate .4s var(--ease); }
.zastavka a:hover img { rotate: 0deg; translate: 0 -8px; }
.zastavka span { font-size: clamp(1.1rem, .95rem + .5vw, 1.5rem); white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color .2s; }
.zastavka a:hover span { border-color: var(--limetka); }
.zastavka i { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .2em; border-radius: 50%; background: var(--limetka);
  color: var(--svestka); font-style: normal; font-family: var(--font); font-weight: 800; font-size: .8em; }
.zastavka--napad { --x: 21%; --y: 9%; --w: 12%; --r: -10deg; }
.zastavka--vzorek { --x: 60%; --y: 4%; --w: 13%; --r: 8deg; }
.zastavka--vyroba { --x: 60%; --y: 50%; --w: 15%; --r: -5deg; }
.zastavka--dodani { --x: 27%; --y: 50%; --w: 14%; --r: 9deg; }
@media (max-width: 860px) {
  .postup-hlava { grid-template-columns: 1fr; }
  .smycka { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-2); margin-top: var(--m-4); }
  .smycka-cary, .smycka-popis { display: none; }
  .smycka-misto { position: static; translate: none; }
  .smycka-misto--praha { grid-row: 1; grid-column: 1; } .smycka-misto--cina { grid-row: 1; grid-column: 2; }
  .smycka-zastavky { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-4) var(--m-3); margin-top: var(--m-2); }
  .zastavka { position: static; width: auto; }
  .zastavka img { width: min(100%, 9.5rem); }
  /* na mobilu dva sloupce podle místa: Praha (nápad, dodání), Čína (vzorek, výroba) */
  .zastavka--napad { grid-area: 1 / 1; } .zastavka--dodani { grid-area: 2 / 1; }
  .zastavka--vzorek { grid-area: 1 / 2; } .zastavka--vyroba { grid-area: 2 / 2; }
  .smycka-zastavky { background: linear-gradient(rgb(251 241 254 / .35), rgb(251 241 254 / .35)) 50% 0 / 2px 100% no-repeat; }
}

.kroky { background: var(--serik); }
.krok { position: relative; padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.krok h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .18em .25em; }
.krok-cislo { align-self: flex-start; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin-right: .25em; border: 2px solid currentColor;
  border-radius: 50%; font-size: clamp(1.1rem, .9rem + .6vw, 1.6rem); font-weight: 600; color: var(--fialova); }
.krok-slovo { font-size: clamp(3.6rem, 1.4rem + 8vw, 9.5rem); font-weight: 800; line-height: .9; letter-spacing: -0.05em; color: var(--svestka); }
.krok-dodatek { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--fialova); }
.krok-text p, .krok-vzorek-text, .krok-dodani-hlava p { max-width: 40ch; margin-top: var(--m-3); font-size: var(--text-1); line-height: 1.42; }

/* 1 nápad: čepice přetéká přes levý okraj, text vpravo */
.krok--napad { overflow: hidden; min-height: clamp(26rem, 20rem + 16vw, 38rem); display: grid; align-items: center; }
.krok-napad-cepice { position: absolute; left: -7rem; top: 50%; translate: 0 -50%; width: min(52vw, 34rem); rotate: 14deg; }
.krok-napad-cepice img { filter: drop-shadow(0 30px 34px rgb(58 11 68 / .3)); }
.krok-napad-in { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; }
.krok-napad-in .krok-text { grid-column: 2; }
.krok-text .krok-napad-pozn { display: flex; align-items: flex-start; gap: .6rem; max-width: 26ch; margin-top: var(--m-4); rotate: -2deg; font-size: clamp(1.05rem, .85rem + .5vw, 1.45rem); line-height: 1.18; color: var(--fialova); }
.krok-napad-pozn svg { flex: none; width: 4.2rem; height: 2rem; overflow: visible; }
.krok-napad-pozn path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* 2 vzorek: myš uprostřed, kolem ruční poznámky */
.krok--vzorek { background: var(--serik-2); }
.krok-vzorek-in { display: grid; justify-items: center; text-align: center; }
.krok-vzorek-in h2 { justify-content: center; }
.vzorek-stul { position: relative; width: 100%; max-width: 68rem; aspect-ratio: 1000 / 560; margin: var(--m-4) 0 0; }
.vzorek-mys { position: absolute; left: 50%; top: 50%; width: min(36%, 30rem); translate: -50% -50%; }
.vzorek-mys img { rotate: -8deg; filter: drop-shadow(0 30px 34px rgb(58 11 68 / .3)); }
.vzorek-cary { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vzorek-cary path { fill: none; stroke: var(--svestka); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vzorek-poznamky { position: absolute; inset: 0; z-index: 2; }
.vzorek-pozn { position: absolute; max-width: 14ch; font-size: clamp(1.05rem, .85rem + .55vw, 1.5rem); line-height: 1.18; color: var(--svestka); }
.vzorek-pozn--1 { left: 2%; top: 10%; text-align: right; rotate: -3deg; }
.vzorek-pozn--2 { right: 2%; top: 8%; text-align: left; rotate: 3deg; }
.vzorek-pozn--3 { left: 2%; top: 68%; text-align: right; rotate: 2deg; }
.vzorek-pozn--4 { right: 2%; top: 70%; text-align: left; rotate: -2deg; color: var(--fialova); }
.krok-vzorek-text { margin-inline: auto; }

/* 3 výroba: švestková, medvěd vlevo, text vpravo */
.krok--vyroba { background: var(--svestka); color: var(--serik); }
.krok--vyroba .krok-slovo { color: var(--bila); }
.krok--vyroba .krok-dodatek, .krok--vyroba .krok-cislo { color: var(--limetka); }
.krok-vyroba-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--m-6); align-items: center; }
.krok-vyroba-obr { position: relative; justify-self: center; width: min(100%, 19rem); }
.krok-vyroba-obr img { rotate: -6deg; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45)); }
.krok-vyroba-pozn { margin-top: var(--m-2); text-align: center; rotate: -2deg; font-size: clamp(1.05rem, .85rem + .5vw, 1.4rem); color: var(--limetka); }

/* 4 dodání: nadpis a text v řádku, pod nimi hromada předmětů přes celou šířku */
.krok-dodani-hlava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--m-3) var(--m-6); }
.krok-dodani-hlava p { margin-top: 0; max-width: 30ch; }
.hromada { position: relative; aspect-ratio: 1200 / 400; margin-top: var(--m-5); }
.hromada-kus { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); }
.hromada-kus img { filter: drop-shadow(0 16px 18px rgb(58 11 68 / .22)); transition: translate .4s var(--ease); }
.hromada-kus:hover img { translate: 0 -8px; }
@media (max-width: 860px) {
  .krok--napad { min-height: 0; display: block; padding-top: 0; }
  .krok-napad-cepice { position: relative; left: -12%; top: auto; translate: none; width: 72%; rotate: 8deg; margin: -1rem 0 var(--m-3); }
  .krok-napad-in { grid-template-columns: 1fr; }
  .krok-napad-in .krok-text { grid-column: 1; }
  .krok-napad-pozn svg { rotate: 60deg; }
  .vzorek-stul { aspect-ratio: auto; display: grid; gap: var(--m-2); }
  .vzorek-mys { position: relative; left: auto; top: auto; translate: none; width: min(80%, 22rem); margin: 0 auto var(--m-2); }
  .vzorek-cary { display: none; }
  .vzorek-poznamky { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-3) var(--m-2); }
  .vzorek-pozn { position: static; max-width: none; text-align: left !important; font-size: 1.05rem; }
  .krok-vyroba-in { grid-template-columns: 1fr; gap: var(--m-4); }
  .krok-vyroba-obr { width: min(76%, 18rem); order: 2; }
  .hromada { aspect-ratio: 1 / .8; }
  .hromada-kus { width: calc(var(--w) * 1.6); left: calc(var(--x) * .8); top: var(--y); }
}

.primo { background: var(--limetka-plocha); padding-block: var(--sekce); }
.primo-in { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--m-6); align-items: start; }
.primo h2 { font-size: min(clamp(3rem, 1.2rem + 6.4vw, 8rem), 7.9cqi); font-weight: 800; line-height: .88; letter-spacing: -0.05em; color: var(--svestka); }
.primo-nad { display: block; margin-bottom: var(--m-2); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); letter-spacing: 0; line-height: 1.2; }
.primo-seznam { margin: 0; border-top: 2px solid var(--svestka); }
.primo-seznam div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--m-3); padding: 1.05rem 0; border-bottom: 1px solid rgb(58 11 68 / .3); }
.primo-seznam dt { font-weight: 800; font-size: var(--text-1); letter-spacing: -0.02em; line-height: 1.2; }
.primo-seznam dd { margin: 0; font-size: var(--text-0); line-height: 1.4; }
/* řetěz: vy – Promo 3D – (přeškrtnutý zprostředkovatel) – výrobce */
.retez { margin: calc(var(--m-6) + 1.5rem) 0 0; }
.retez-cast { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.retez-uzel { position: relative; display: grid; place-items: center; min-height: 3.6rem; padding: .5rem 1.1rem; border: 2px solid var(--svestka); border-radius: 12px;
  background: var(--serik); font-weight: 800; font-size: var(--text-1); letter-spacing: -0.02em; box-shadow: 4px 4px 0 var(--svestka); }
.retez-uzel + .retez-uzel { margin-left: 3rem; }
.retez-uzel + .retez-uzel::before { content: ""; position: absolute; right: calc(100% + 2px); top: 50%; width: calc(3rem - 4px); border-top: 3px solid var(--svestka); }
.retez-uzel--my img { width: 7.5rem; height: auto; }
.retez-pryc { position: absolute; right: calc(100% - .2rem); bottom: calc(100% + 1rem); padding: .2rem .6rem; border: 2px dashed var(--fialova-2); border-radius: 10px;
  font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: 0; white-space: nowrap; color: var(--fialova-2); rotate: -7deg; }
.retez-pryc s { text-decoration-thickness: 2px; }
.retez figcaption { margin-top: var(--m-2); font-size: clamp(1.05rem, .9rem + .4vw, 1.35rem); color: var(--fialova-2); }
@media (max-width: 860px) { .primo-in { grid-template-columns: 1fr; } .primo h2 { font-size: min(clamp(3rem, 1.2rem + 6.4vw, 8rem), 16.5cqi); } .primo-seznam div { grid-template-columns: 1fr; gap: .25rem; } .retez { margin-top: var(--m-5); } }
@media (max-width: 520px) {
  .retez-cast { flex-direction: column; align-items: flex-start; }
  .retez-uzel + .retez-uzel { margin-left: 0; margin-top: 2.6rem; }
  .retez-uzel + .retez-uzel::before { right: auto; left: 1.4rem; top: auto; bottom: calc(100% + 2px); width: 0; height: calc(2.6rem - 4px); border-top: 0; border-left: 3px solid var(--svestka); }
  .retez-pryc { right: auto; left: 2.6rem; bottom: calc(100% + .45rem); }
}

/* ---------- ukázky ---------- */
.podhero--ukazky { padding-bottom: var(--sekce); }
.podhero--ukazky .wrap { display: grid; justify-items: center; text-align: center; }
.podhero--ukazky h1 { max-width: 16ch; }
.podhero--ukazky .podhero-text { margin-inline: auto; }
.plakat-rozbor { position: relative; width: min(100%, 64rem); aspect-ratio: 1600 / 1000; margin: var(--m-6) 0 0; }
.plakat-rozbor-obr { position: absolute; left: 27.875%; width: 44.25%; height: 100%; }
.plakat-rozbor-obr img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 34px 60px rgb(24 2 34 / .5); }
.plakat-rozbor-cary { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plakat-rozbor-cary path { fill: none; stroke: var(--limetka); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plakat-rozbor-cary circle { fill: var(--limetka); stroke: var(--svestka); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plakat-rozbor figcaption { position: absolute; inset: 0; pointer-events: none; }
.plakat-rozbor-popisky li { position: absolute; top: var(--y); right: 75.2%; width: 24%; translate: 0 -50%; text-align: right;
  font-weight: 500; font-size: clamp(1.05rem, .7rem + .9vw, 1.6rem); line-height: 1.15; color: var(--limetka); }
.plakat-rozbor-popisky li.vpravo { right: auto; left: 75.2%; text-align: left; }
.plakat-rozbor-akce { position: absolute; left: 50%; bottom: -2.6rem; translate: -50% 0; width: max-content; font-size: var(--drobne); color: var(--serik-2); }
html.js .plakat-rozbor-cary path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) .3s; }
html.js .plakat-rozbor-cary path:nth-of-type(2) { transition-delay: .55s; } html.js .plakat-rozbor-cary path:nth-of-type(3) { transition-delay: .8s; }
html.js .plakat-rozbor-cary path:nth-of-type(4) { transition-delay: 1.05s; }
html.js .plakat-rozbor-cary circle, html.js .plakat-rozbor-popisky li { opacity: 0; transition: opacity .5s var(--ease) 1s; }
html.js .plakat-rozbor.videt path { stroke-dashoffset: 0; }
html.js .plakat-rozbor.videt circle, html.js .plakat-rozbor.videt li { opacity: 1; }
@media (max-width: 760px) {
  .plakat-rozbor { aspect-ratio: auto; height: auto; margin-top: var(--m-5); }
  .plakat-rozbor-obr { position: static; width: 82%; height: auto; margin-inline: auto; }
  .plakat-rozbor-obr img { height: auto; }
  .plakat-rozbor-cary { display: none; }
  .plakat-rozbor figcaption { position: static; }
  .plakat-rozbor-popisky { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-2) var(--m-3); padding-top: var(--m-5); text-align: left; }
  .plakat-rozbor-popisky li, .plakat-rozbor-popisky li.vpravo { position: static; width: auto; translate: none; text-align: left; font-size: 1.1rem;
    padding-left: 1.1rem; background: radial-gradient(circle at .3rem .62em, var(--limetka) .28rem, transparent .3rem); }
  html.js .plakat-rozbor-popisky li { opacity: 1; }
  .plakat-rozbor-akce { position: static; translate: none; width: auto; margin-top: var(--m-3); text-align: left; }
}

.akce { padding-block: var(--sekce); overflow: hidden; color: var(--svestka); }
.akce--ber { background: var(--oranz); }
.akce--push { background: var(--nebe); scroll-margin-top: 0; }
.akce-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.akce-in--obracene { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.akce-plakaty { position: relative; margin: 0; }
.akce-plakat { padding: 10px; background: var(--bila); box-shadow: 0 30px 50px rgb(58 11 68 / .35); transition: rotate .5s var(--ease), translate .5s var(--ease); }
.akce-plakat img { width: 100%; }
.akce--ber .akce-plakat--1 { width: 78%; rotate: -4deg; }
.akce--ber .akce-plakaty:hover .akce-plakat--1 { rotate: -1.5deg; }
.akce-obal { position: absolute; right: -6%; bottom: 2%; width: 36%; z-index: 2; }
.akce-plakaty--dva { min-height: 0; padding-bottom: 14%; }
.akce--push .akce-plakat--1 { width: 64%; rotate: -5deg; }
.akce--push .akce-plakat--2 { position: absolute; right: 0; bottom: 0; width: 50%; rotate: 6deg; }
.akce--push .akce-plakaty:hover .akce-plakat--2 { rotate: 2deg; translate: 0 -8px; }
.akce-znacka { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); color: var(--svestka); margin-bottom: var(--m-2); }
.akce h2 { font-size: clamp(2.4rem, 1.2rem + 4vw, 5.4rem); font-weight: 800; line-height: .95; letter-spacing: -0.045em; text-wrap: balance; }
.akce--push h2 { max-width: 12ch; }
.akce-o { max-width: 40ch; margin-top: var(--m-4); font-size: var(--text-1); line-height: 1.42; }
.akce h3 { font-size: var(--h3); letter-spacing: -0.02em; margin-bottom: var(--m-2); }
.akce-sady { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-4); margin-top: var(--m-5); }
.akce-sady .zetony { margin-top: 0; }
.zetony { margin-top: var(--m-4); counter-reset: z; display: grid; gap: .55rem; }
.zetony li { counter-increment: z; display: flex; align-items: center; gap: .8rem; font-size: var(--text-1); font-weight: 600; line-height: 1.25; }
.zetony li::before { content: counter(z); flex: none; display: grid; place-items: center; width: 2.1rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--svestka); background: var(--limetka); box-shadow: 0 0 0 4px var(--limetka) inset, 0 0 0 5px var(--svestka) inset, 2px 2px 0 var(--svestka);
  font-family: var(--ruka); font-size: .95rem; font-weight: 600; }
.akce--ber .zetony li::before { background: var(--serik); box-shadow: 0 0 0 4px var(--serik) inset, 0 0 0 5px var(--svestka) inset, 2px 2px 0 var(--svestka); }
.akce .popiska { color: var(--svestka); }
@media (max-width: 860px) {
  .akce-in, .akce-in--obracene { grid-template-columns: 1fr; gap: var(--m-6); }
  .akce-in--obracene .akce-plakaty { order: 2; }
  .akce-plakaty { width: min(100%, 30rem); margin-inline: auto; }
  .akce-obal { width: 34%; right: 0; }
  .akce-obal .popiska { display: none; }
}
@media (max-width: 520px) { .akce-sady { grid-template-columns: 1fr; } }

.police-sekce { background: var(--serik); padding-block: var(--sekce); }
.police-sekce h2 { font-size: var(--h2); color: var(--fialova); margin-bottom: var(--m-6); }
.police { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--m-7) clamp(2.5rem, 5vw, 5rem); }
.polic { grid-column: span 2; }
.polic:nth-child(1), .polic:nth-child(2) { grid-column: span 3; }
.police-dal { max-width: 52ch; margin-top: var(--m-7); font-size: clamp(1.25rem, 1rem + .7vw, 1.75rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--svestka); }
.akce--push .akce-plakat--1 { position: relative; }
.nalepka { position: absolute; left: 31%; top: 64%; display: grid; place-items: center; width: 31%; aspect-ratio: 1; padding: .4rem; border-radius: 50%;
  background: var(--limetka); color: var(--svestka); box-shadow: 0 6px 0 var(--svestka); text-align: center; font-size: clamp(.8rem, .55rem + .5vw, 1.1rem); line-height: 1.1; rotate: -12deg; }
.polic-veci { display: flex; align-items: flex-end; justify-content: space-around; gap: var(--m-3); height: clamp(9rem, 6rem + 9vw, 15rem);
  padding-inline: var(--m-2); border-bottom: 14px solid var(--svestka); box-shadow: 0 14px 0 -4px rgb(58 11 68 / .18); }
.polic-veci span { height: calc(var(--v) * 100%); display: flex; align-items: flex-end; }
.polic-veci img { height: 100%; width: auto; max-width: none; margin-bottom: -3px; filter: drop-shadow(0 10px 8px rgb(35 4 52 / .25)); transition: translate .4s var(--ease), rotate .4s var(--ease); }
.polic:hover .polic-veci img { translate: 0 -8px; rotate: -3deg; }
.polic h3 { margin-top: var(--m-4); font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--svestka); }
.polic p { margin-top: .5rem; font-family: var(--ruka); font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); color: var(--fialova); }
@media (max-width: 760px) {
  .police { grid-template-columns: minmax(0, 1fr); gap: var(--m-6); }
  .polic, .polic:nth-child(1), .polic:nth-child(2) { grid-column: auto; }
  .nalepka { left: 27%; top: 62%; width: 40%; padding: .25rem; font-size: .72rem; line-height: 1.05; box-shadow: 0 4px 0 var(--svestka); }
  .polic-veci { height: 7.5rem; gap: var(--m-1); padding-inline: 0; }
  .polic-veci span { min-width: 0; }
  .polic-veci img { max-width: 100%; object-fit: contain; object-position: bottom; }
}
.klienti-pod { margin-top: var(--m-3); max-width: 26ch; font-size: var(--text-0); color: var(--muted); }

/* ---------- kontakt ---------- */
.kontakt { background: var(--fialova); color: var(--bila); padding: clamp(2rem, 6vh, 4.5rem) 0 var(--sekce); overflow: hidden; }
.kontakt-hlava { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--m-4) var(--m-6); align-items: end; }
.kontakt-hlava { container-type: inline-size; }
.kontakt h1 { font-size: min(clamp(2.6rem, 1rem + 5.4vw, 6.4rem), 5.4cqi); font-weight: 800; line-height: .92; letter-spacing: -0.045em; max-width: 100%; }
.kontakt-uvod { max-width: 40ch; font-size: var(--text-1); line-height: 1.42; color: var(--serik); }
.kontakt-radek { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 1.6em; margin-top: var(--m-5); font-size: var(--text-1); }
.kontakt-radek .ruka { color: var(--limetka); font-size: clamp(1.1rem, .95rem + .5vw, 1.45rem); }
.kontakt-radek a { color: var(--bila); font-weight: 650; text-underline-offset: .25em; }
.kontakt-radek a:hover { color: var(--limetka); }
.kontakt-radek .kontakt-tel { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; font-variant-numeric: tabular-nums; }

/* poptávkový lístek: okénka jako na plakátech barových akcí, pod perforací údaje */
.listek { position: relative; margin-top: var(--m-6); background: var(--serik); color: var(--svestka); border-radius: 22px;
  padding: clamp(1.4rem, 3vw, 2.75rem); box-shadow: 12px 12px 0 var(--svestka); gap: 0; }
.listek-krok { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .5rem; border-radius: 50%;
  background: var(--svestka); color: var(--limetka); font-size: 1rem; font-weight: 800; vertical-align: .15em; }
.okenka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--m-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.okenka legend { float: left; grid-column: 1 / -1; width: 100%; margin-bottom: var(--m-3); padding: 0; font-size: var(--h3); font-weight: 750; letter-spacing: -0.02em; }
.okenka-rada { margin-left: .6rem; font-size: clamp(1rem, .9rem + .3vw, 1.25rem); font-weight: 500; color: var(--fialova); letter-spacing: 0; }
.formular .okenko { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: var(--m-1); padding: var(--m-2) var(--m-2) var(--m-3);
  border: 2px dashed rgb(58 11 68 / .45); border-radius: 14px; background: var(--bila); cursor: pointer; text-align: center;
  transition: background .2s, border-color .2s, box-shadow .2s, translate .2s var(--ease); }
.okenko input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0 !important; margin: 0; opacity: 0; cursor: pointer; }
.okenko-obr { display: block; height: clamp(6rem, 4rem + 6vw, 11rem); pointer-events: none; }
.okenko-obr img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgb(35 4 52 / .25));
  rotate: var(--r, -6deg); transition: rotate .35s var(--ease), scale .35s var(--ease); }
.okenko--plast { --r: 7deg; } .okenko--textil { --r: -9deg; } .okenko--privesek { --r: 5deg; }
.okenko--privesek .okenko-obr img { height: 94%; }
.okenko-obr svg { display: block; width: 72%; height: 100%; margin-inline: auto; overflow: visible; }
.okenko-obr path { fill: none; stroke: var(--fialova); stroke-width: 3; stroke-dasharray: 9 8; stroke-linecap: round; }
.okenko-obr text { fill: var(--fialova); font-family: var(--ruka); font-size: 54px; font-weight: 600; }
.okenko-text { display: grid; align-content: start; gap: .1rem; pointer-events: none; }
.okenko-text b { font-size: clamp(1rem, .9rem + .35vw, 1.25rem); font-weight: 750; line-height: 1.15; }
.okenko-text .ruka { font-size: .95rem; color: var(--muted); }
.okenko:hover { translate: 0 -3px; border-color: var(--svestka); }
.okenko:hover .okenko-obr img { rotate: 0deg; scale: 1.05; }
.okenko:has(input:checked) { border-style: solid; border-color: var(--svestka); background: var(--limetka); box-shadow: 5px 5px 0 var(--svestka); translate: 0 -3px; }
.okenko:has(input:checked) .okenko-obr img { rotate: 0deg; scale: 1.06; }
.okenko:has(input:checked) .okenko-text .ruka { color: var(--svestka); }
.okenko:has(input:focus-visible) { outline: 3px solid var(--fialova); outline-offset: 3px; }
.listek-perforace { position: relative; height: 2px; margin: var(--m-5) calc(-1 * clamp(1.4rem, 3vw, 2.75rem));
  background: repeating-linear-gradient(90deg, rgb(58 11 68 / .5) 0 10px, transparent 10px 18px); }
.listek-perforace::before, .listek-perforace::after { content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; background: var(--fialova); }
.listek-perforace::before { left: -15px; } .listek-perforace::after { right: -15px; }
.listek-udaje { display: grid; gap: var(--m-3); }
.listek-nadpis { font-size: var(--h3); font-weight: 750; letter-spacing: -0.02em; }
.listek-pole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); grid-template-rows: auto auto; gap: var(--m-2) var(--m-3); }
.listek-zprava { grid-column: 3; grid-row: 1 / 3; }
.listek-zprava textarea { height: 100%; min-height: 8rem; resize: vertical; }
.listek-odeslat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-2) var(--m-4); }
.listek-pozn { max-width: 34ch; font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); line-height: 1.25; color: var(--fialova); }
@media (max-width: 1080px) {
  .listek-pole { grid-template-columns: 1fr 1fr; }
  .listek-zprava { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 860px) {
  .kontakt-hlava { grid-template-columns: 1fr; }
  .kontakt h1 { font-size: min(clamp(2.6rem, 1rem + 5.4vw, 6.4rem), 11.5cqi); }
  .okenka { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .okenko { grid-column: span 2; }
  .okenko--privesek { grid-column: 2 / span 2; }
  .okenko--nevim { grid-column: 4 / span 2; }
  .okenko-obr { height: 5.5rem; }
  .okenka-rada { display: block; margin: .2rem 0 0; }
  .formular .okenko { padding: .6rem .4rem .8rem; }
  .okenko-text b { font-size: .95rem; }
  .okenko-text .ruka { font-size: .82rem; }
  .listek { box-shadow: 7px 7px 0 var(--svestka); }
  .kontakt-radek { gap: .4em 1.2em; }
  .kontakt-radek .ruka { flex-basis: 100%; }
}
@media (max-width: 520px) { .listek-pole { grid-template-columns: 1fr; } }

.adresy { background: var(--limetka-plocha); color: var(--svestka); padding-block: var(--sekce); }
.adresy-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-5); }
.adresa { padding-top: var(--m-3); border-top: 3px solid var(--svestka); display: grid; align-content: start; gap: .3rem; }
.adresa-stitek { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); color: var(--fialova); margin-bottom: .3rem; }
.adresa-ulice { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.adresa-mesto { font-size: var(--text-1); margin-bottom: var(--m-2); }
.adresa .odkaz { justify-self: start; color: var(--svestka); }
.adresa--firma p:not(.adresa-stitek) { font-size: var(--text-1); line-height: 1.45; }
.adresa-od { margin-top: var(--m-2); color: var(--fialova-2); }
.adresy-in--jedna { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 860px) { .adresy-in { grid-template-columns: 1fr; gap: var(--m-4); } }

/* výzva na Ukázkách: plakát s okénky k odtržení */
.tahak { position: relative; margin: 0; padding: var(--m-3); background: var(--serik); border-radius: 14px; box-shadow: 10px 10px 0 var(--svestka); rotate: 1.5deg; }
.tahak-hlava { font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-align: center; color: var(--fialova); text-transform: none; }
.tahak-okenka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--m-3); border-top: 2px dashed rgb(58 11 68 / .5); border-left: 2px dashed rgb(58 11 68 / .5); }
.tahak-okenka li { display: grid; place-items: center; aspect-ratio: 1; padding: .55rem; border-right: 2px dashed rgb(58 11 68 / .5); border-bottom: 2px dashed rgb(58 11 68 / .5); }
.tahak-okenka img { max-height: 100%; width: auto; object-fit: contain; rotate: -6deg; filter: drop-shadow(0 6px 8px rgb(35 4 52 / .25)); }
.tahak-okenka li:nth-child(even) img { rotate: 7deg; }
.tahak-okenka li:nth-child(2) img, .tahak-okenka li:nth-child(4) img { max-height: 86%; }
.tahak-vase { background: var(--limetka-plocha); }
.tahak-vase a { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; text-decoration: none; font-size: clamp(.85rem, .75rem + .3vw, 1.05rem); line-height: 1.15; color: var(--svestka); }
.tahak-vase a:hover span { text-decoration: underline; }
.tahak figcaption { margin-top: var(--m-2); font-size: .95rem; text-align: center; color: var(--muted); }
.vyzva--okenka .vyzva-bok { gap: var(--m-5); }
.vyzva--okenka .vyzva-in { align-items: center; }

/* výzva na Jak to probíhá: poslední zastávka trasy */
.vyzva--trasa .vyzva-in { grid-template-columns: minmax(0, 1fr); gap: var(--m-5); }
.vyzva--trasa h2 { max-width: 16ch; }
.cil { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.3fr); align-items: end; gap: var(--m-2); }
.cil::before { content: ""; position: absolute; left: 1.2rem; right: 18%; bottom: 1.2rem; height: 0; border-top: 3px dashed var(--svestka); }
.cil li { position: relative; display: grid; justify-items: start; gap: var(--m-1); font-weight: 750; font-size: var(--text-1); }
.cil-bod { order: -1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--svestka); color: var(--nebe); font-size: 1rem; font-weight: 800; }
.cil li:not(.cil-konec) { grid-template-rows: auto auto; }
.cil li:not(.cil-konec) .cil-bod { order: 2; }
.cil-konec { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "obr pozn" "obr tl"; align-items: end; column-gap: var(--m-3) !important; padding: var(--m-3); background: var(--serik); border-radius: 18px; box-shadow: 8px 8px 0 var(--svestka); }
.cil-krabice { grid-area: obr; width: clamp(6rem, 3rem + 6vw, 10rem); }
.cil-krabice img { rotate: -8deg; filter: drop-shadow(0 12px 14px rgb(35 4 52 / .3)); }
.cil-pozn { grid-area: pozn; font-weight: 500; font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); line-height: 1.2; color: var(--fialova); }
.cil-konec .tlacitko { grid-area: tl; margin-top: var(--m-2) !important; justify-self: start; white-space: nowrap; }
.cil-kontakt { margin-top: var(--m-3); font-size: var(--text-1); font-weight: 650; }
.cil-kontakt a { font-weight: 760; }
@media (max-width: 860px) {
  .cil { grid-template-columns: 1fr; gap: var(--m-3); padding-left: .2rem; }
  .cil::before { left: calc(1.2rem + .2rem - 1.5px); right: auto; top: 1rem; bottom: 6rem; height: auto; border-top: 0; border-left: 3px dashed var(--svestka); }
  .cil li:not(.cil-konec) { grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; column-gap: var(--m-3); }
  .cil li:not(.cil-konec) .cil-bod { order: -1; }
  .cil-konec { margin-top: var(--m-2); }
}
@media (max-width: 420px) { .cil-konec { grid-template-columns: 1fr; grid-template-areas: "obr" "pozn" "tl"; } }

/* 31. 10.: Ukázky – jen věta o dalších klientech (police zrušené) */
.police-sekce--kratka { padding-block: var(--m-7); }
.police-sekce--kratka .nadtitulek { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); color: var(--fialova); margin: 0 0 var(--m-2); letter-spacing: 0; }
.police-sekce--kratka .police-dal { margin-top: 0; max-width: 60ch; }
.akce--ber .akce-plakat--1 { width: 84%; }

/* 31. 10.: připomínky Promo 3D – Dermacol */
.predmet-hlaska { grid-area: odkaz; justify-self: start; align-self: start; max-width: 30ch; margin: var(--m-3) 0 0; rotate: -2deg; font-size: clamp(1.15rem, .95rem + .6vw, 1.6rem); line-height: 1.2; color: var(--fialova); }
.veta-rada .veta-logo img { height: auto; width: clamp(5.5rem, 3rem + 8vw, 12rem); filter: none; }
.veta-rada .veta-foto img, .veta-rada li.veta-foto:nth-child(n) img { height: clamp(4rem, 2rem + 6vw, 9rem); width: auto; aspect-ratio: 1; object-fit: cover; border: .3rem solid var(--bila); border-radius: .4rem; }
@media (max-width: 520px) { .veta-rada .veta-logo img { width: 4.6rem; } .veta-rada .veta-foto img { height: 3.6rem; border-width: .18rem; } }
.zastavka--foto img { aspect-ratio: 4 / 3; object-fit: cover; border: .35rem solid var(--bila); border-radius: .4rem; }
.zastavka--napad { --w: 10%; } .zastavka--vzorek { --w: 10%; }
.zastavka--vyroba { --w: 17%; } .zastavka--dodani { --x: 25%; --w: 16%; }
.krok-napad-taska { width: min(40vw, 25rem); left: 2rem; rotate: -8deg; }
.krok-napad-taska img { filter: drop-shadow(0 30px 34px rgb(58 11 68 / .3)); }
.vzorek-mys { width: min(26%, 20rem); }
.vzorek-mys img { rotate: 6deg; }
.krok-vyroba-obr { width: min(100%, 30rem); }
.krok-vyroba-foto { margin: 0; rotate: -3deg; }
.krok-vyroba-foto img { rotate: 0deg; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: .45rem solid var(--bila); border-radius: .4rem; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45)); }
.krok-vyroba-foto figcaption { margin-top: var(--m-2); font-size: clamp(1rem, .85rem + .4vw, 1.3rem); color: var(--bila); rotate: 2deg; }
.krok-vyroba-obr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--m-3); }
.krok-vyroba-foto { grid-column: 1 / -1; }
.krok-vyroba-foto figcaption { text-align: left; max-width: 52%; }
.krok-vyroba-kus { grid-column: 2; grid-row: 2; margin-top: -12%; margin-right: -14%; }
.krok-vyroba-kus img { rotate: 7deg; }
.krok-vyroba-obr > .krok-vyroba-pozn { grid-column: 1; grid-row: 2; align-self: center; margin: var(--m-4) 0 0; text-align: right; }
.retez-pryc { right: calc(100% + 1.5rem); bottom: calc(100% + 1.1rem); translate: 50% 0; }
.hromada { aspect-ratio: 1200 / 470; }
@media (max-width: 860px) {
  .krok-napad-taska { position: relative; left: 8%; width: 58%; margin: 0 0 var(--m-3); }
  .vzorek-mys { width: min(56%, 16rem); }
  .krok-vyroba-obr { width: min(86%, 26rem); }
  .krok-vyroba-kus { margin-right: -4%; }
  .hromada { aspect-ratio: 1 / .95; }
}

/* 1. 11.: připomínky Promo 3D – finále */
.zastavka--dodani { --x: 29%; --y: 44%; --w: 8%; --r: 6deg; }
.krok-vyroba-foto figcaption { max-width: none; }
.hromada { aspect-ratio: 1200 / 390; }
.hromada-kus img { filter: drop-shadow(0 14px 16px rgb(58 11 68 / .2)); }
@media (max-width: 860px) {
  .zastavka--dodani img { width: auto; height: 10.5rem; }
  /* mobil: zátiší ve dvou sloupcích, předměty stojí na společné lince */
  .hromada { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--m-4) var(--m-3); }
  .hromada-kus { position: static; width: auto; }
  .hromada-kus--barcelo img, .hromada-kus--metal img { width: 82%; margin-inline: auto; }
}

/* 1. 11. (2): připomínky Promo 3D – poslední drobnosti */
/* smyčka: vzorek o 15 % větší (PC), na mobilu nápad o 13 % menší, ať tašky odpovídají */
.zastavka--vzorek { --w: 11.5%; }
.zastavka--napad { --w: 8.8%; }
@media (max-width: 860px) {
  .zastavka--napad img { width: min(76%, 7.4rem); }
  .zastavka--vzorek img { width: min(100%, 10.9rem); }
}
/* vzorek do ruky o 20 % větší */
.vzorek-mys { width: min(31.2%, 24rem); }
@media (max-width: 860px) { .vzorek-mys { width: min(67%, 19.2rem); } }
/* zátiší Dodání: skutečné proporce – metalická taška největší, pak Niche, Barceló, Indulona, Men Agent, Astrid; vše stojí na lince */
.hromada { aspect-ratio: 1200 / 410; }
.hromada-kus { top: auto; bottom: var(--b); }
@media (max-width: 860px) {
  .hromada { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: end; justify-items: center; gap: var(--m-4) var(--m-3); }
  .hromada-kus { position: static; width: var(--mw); order: var(--o); rotate: 0deg; }
  .hromada-kus--barcelo img, .hromada-kus--metal img { width: 100%; margin-inline: 0; }
}