/* Jak na brand — vizuální varianta 2 „Rak“
   Předloha: Figma JNB - PP (5jC95jsFoWBY9GoMuNwXwr), rám 117:219.
   Desktop odpovídá návrhu 1:1 při šířce 1440 px; --u je „figma pixel“,
   pod 1440 px se celé rozložení poměrně zmenšuje, pod 1024 px se skládá pod sebe. */

:root {
  --kobalt: #2e3fc4;
  --cervena: #e23b2e;
  --papir: #f3eee3;
  --ruzova: #f2e2d8;
  --hlubina: #161b4b;

  --u: calc(min(100vw, 1440px) / 1440);
  --gutter: calc(96 * var(--u));
  --wrap: min(calc(1248 * var(--u)), 100% - 2 * var(--gutter));
  /* vzdálenost od kraje sekce k obsahu — pro prvky na spad */
  --edge: calc((100% - var(--wrap)) / 2);

  --text: max(15px, calc(17 * var(--u)));
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--text);
  line-height: 1.5;
  color: var(--kobalt);
  background: var(--papir) url("img/papir.webp") repeat;
  background-size: 1440px 900px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, figure, blockquote { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cervena); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px; background: var(--kobalt); color: var(--papir);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13px;
}
.skip:focus { top: 16px; }

.page { overflow-x: clip; }

.wrap { width: var(--wrap); margin-inline: auto; position: relative; }

/* ---------- typografie ---------- */

.kicker {
  font-weight: 800;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: calc(21.6 * var(--u));
}

.h-lg,
.h-xl,
.hero-title,
.proc-title,
.vyzva-title,
.zaver-title {
  font-weight: 900;
  font-stretch: 125%;
  line-height: .92;
  text-transform: uppercase;
  color: var(--cervena);
}
.h-lg { font-size: calc(88 * var(--u)); }
.h-xl { display: block; font-size: calc(96 * var(--u)); }

.num {
  font-weight: 900;
  font-stretch: 125%;
  line-height: .92;
  color: var(--cervena);
}

/* ručně kreslená elipsa kolem slova */
.ring { position: relative; display: inline-block; white-space: nowrap; }
.ring svg {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--rw); height: var(--rh);
  transform: translate(-50%, -50%) translate(var(--rx, 0), var(--ry, 0)) rotate(var(--rr, 4deg));
  overflow: visible;
  pointer-events: none;
  color: var(--kobalt);
}
.ring-hero      { --rw: 5.875em; --rh: 1.64em;  --rx: -.03em; --ry: .29em; --rr: 4deg; }
.ring-pristup   { --rw: 7.27em;  --rh: 1.375em; --rx: -.02em; --ry: .27em; --rr: 4deg; }
.ring-sluzby    { --rw: 6.31em;  --rh: 1.35em;  --rx: -.02em; --ry: 0em;   --rr: 3deg; }
.ring-vyzva     { --rw: 7.3em;   --rh: 2em;     --rx: 0em;    --ry: .3em;  --rr: 4deg; }
.ring-reference { --rw: 6.18em;  --rh: 1.375em; --rx: -.02em; --ry: .24em; --rr: 4deg; }
.ring-zaver     { --rw: 8.81em;  --rh: 1.49em;  --rx: -.02em; --ry: .24em; --rr: 3deg; }
.ring-s-title   { --rw: 6.28em;  --rh: 1.23em;  --rx: 0em;    --ry: 0em;   --rr: 3deg; }
.ring-s-cta     { --rw: 8.09em;  --rh: 1.41em;  --rx: -.36em; --ry: 0em;   --rr: 3deg; }
.ring-vyzva svg,
.ring-zaver svg,
.ring-s-cta svg { color: var(--cervena); }

/* ---------- tlačítka ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  border: calc(4 * var(--u)) solid transparent;
  border-radius: 3px;
  padding: calc(17 * var(--u)) calc(28 * var(--u)) calc(15 * var(--u));
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(14px, calc(17 * var(--u)));
  line-height: calc(18 * var(--u));
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--papir);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-red { background: var(--cervena); border-color: var(--cervena); }
.btn-blue { background: var(--kobalt); border-color: var(--kobalt); }
.btn:hover { background: transparent; }
.btn-red:hover { color: var(--cervena); }
.btn-blue:hover { color: var(--kobalt); }

.btn-line {
  display: inline-flex;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: calc(11 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
  font-weight: 800;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.link-red {
  font-weight: 800;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cervena);
}
.link-red:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ================= 01 · HERO ================= */

.hero { position: relative; min-height: calc(900 * var(--u)); }

.hdr {
  position: absolute;
  top: calc(50 * var(--u));
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  margin-left: calc(2 * var(--u));
}
.logo-name {
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(18px, calc(24 * var(--u)));
  line-height: 1;
  letter-spacing: .02em;
}
.logo-role {
  font-weight: 700;
  font-size: max(9px, calc(11 * var(--u)));
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: calc(34 * var(--u));
  margin-top: calc(10 * var(--u));
  font-weight: 800;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.nav a:hover::after { transform: scaleX(1); }
.nav-cta { color: var(--cervena); }

.menu-toggle { display: none; }
.mobile-nav { display: none; }

.hdr-rule {
  position: absolute;
  top: calc(150 * var(--u));
  left: 0;
  width: calc(var(--edge) + 643 * var(--u));
  height: calc(4 * var(--u));
  background: var(--cervena);
}
.hdr-dots {
  position: absolute;
  top: calc(149 * var(--u));
  left: calc(var(--edge) + 1076 * var(--u));
  width: calc(146 * var(--u));
  height: calc(6 * var(--u));
}

.hero-body { padding-top: calc(282 * var(--u)); }
.hero-body > :not(.hero-art) { position: relative; z-index: 2; margin-left: calc(2 * var(--u)); }

.hero-kicker {
  font-weight: 800;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.1;
  text-transform: uppercase;
  margin-left: calc(4 * var(--u)) !important;
}

.hero-title {
  font-size: calc(64 * var(--u));
  margin-top: calc(58.2 * var(--u));
}

.hero-sub {
  margin-top: calc(56 * var(--u));
  min-height: 1.1em;
  font-weight: 800;
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.caret {
  display: inline-block;
  width: .5em; height: .95em;
  margin-left: .12em;
  vertical-align: -.1em;
  background: var(--cervena);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { display: none; } }

.hero-lead {
  margin-top: calc(30 * var(--u));
  max-width: calc(470 * var(--u));
  font-weight: 500;
  font-size: var(--text);
  line-height: 1.5;
}

.hero-art { position: absolute; inset: 0 auto auto 0; width: 100%; }
.hero-petra {
  position: absolute;
  left: calc(457 * var(--u));
  top: calc(44 * var(--u));
  width: calc(740 * var(--u));
  height: calc(896 * var(--u));
  overflow: hidden;
}
.hero-petra img { width: 100%; height: calc(918 * var(--u)); max-width: none; object-fit: cover; }
.hero-krab {
  position: absolute;
  left: calc(657 * var(--u));
  top: calc(330 * var(--u));
  width: calc(826 * var(--u));
  height: calc(981 * var(--u));
  max-width: none;
  transform: rotate(42.72deg);
  mix-blend-mode: multiply;
}

/* ================= 02 · KLIENTI ================= */

.band {
  position: relative;
  z-index: 3;
  padding: calc(40 * var(--u)) 0;
}
.band::before {
  content: "";
  position: absolute;
  inset: calc(40 * var(--u)) 0;
  background: var(--kobalt);
}
.band-logos { height: calc(120 * var(--u));
  display: flex;
  align-items: center;
}

/* ---- marquee s logy ---- */
.marquee {
  --marquee-gap: calc(96 * var(--u));
  --marquee-time: 44s;
  --marquee-fade: var(--papir);
  --marquee-fade-w: calc(90 * var(--u));
  position: relative;
  display: flex;
  overflow: hidden;
}
/* okraje do ztracena */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: var(--marquee-fade-w);
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--marquee-fade), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--marquee-fade), transparent); }
.marquee-track {
  display: flex;
  flex: none;
  gap: var(--marquee-gap);
  align-items: center;
  padding-right: var(--marquee-gap);
  animation: marquee var(--marquee-time) linear infinite;
}
.marquee-more .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.marquee img { flex: none; width: auto; }

.marquee-band {
  position: relative;
  z-index: 1;
  height: calc(120 * var(--u));
  align-items: center;
  --marquee-fade: var(--kobalt);
}
.marquee-band img:nth-child(1) { height: calc(19 * var(--u)); }
.marquee-band img:nth-child(2) { height: calc(16 * var(--u)); }
.marquee-band img:nth-child(3) { height: calc(40 * var(--u)); }
.marquee-band img:nth-child(4) { height: calc(22 * var(--u)); }
.marquee-band img:nth-child(5) { height: calc(29 * var(--u)); }
.marquee-band img:nth-child(6) { height: calc(17 * var(--u)); }
.marquee-band img:nth-child(7) { height: calc(32 * var(--u)); }
.marquee-band img:nth-child(8) { height: calc(22 * var(--u)); }

/* ================= 03 · PŘÍSTUP ================= */

.pristup {
  position: relative;
  z-index: 2;
  padding: calc(110 * var(--u)) 0 calc(32 * var(--u));
}
.h-sub {
  display: block;
  margin-top: calc(33 * var(--u));
  font-weight: 800;
  font-stretch: 100%;
  font-size: calc(26 * var(--u));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--kobalt);
}

.pristup-grid {
  display: grid;
  grid-template-columns: calc(620 * var(--u)) calc(470 * var(--u));
  column-gap: calc(114 * var(--u));
  margin-top: calc(112.2 * var(--u));
}

.pristup-claim {
  max-width: calc(600 * var(--u));
  font-weight: 800;
  font-size: calc(34 * var(--u));
  line-height: 1.15;
  color: var(--cervena);
}
.pristup-intro {
  margin-top: calc(17.8 * var(--u));
  max-width: calc(560 * var(--u));
  font-size: max(16px, calc(20 * var(--u)));
  line-height: 1.5;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(2, calc(290 * var(--u)));
  column-gap: calc(40 * var(--u));
  margin-top: calc(24 * var(--u));
}
.benefits li {
  display: grid;
  grid-template-columns: calc(72 * var(--u)) 1fr;
  grid-template-rows: auto 1fr;
  align-content: start;
  min-height: calc(150 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--kobalt);
}
.benefits .num { grid-row: 1 / 3; font-size: calc(34 * var(--u)); }
.b-title {
  margin-top: calc(6 * var(--u));
  white-space: nowrap;
  font-weight: 800;
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.b-text {
  margin-top: calc(7.3 * var(--u));
  max-width: calc(210 * var(--u));
  font-size: max(14px, calc(16 * var(--u)));
  line-height: 1.5;
}

.pristup-right { padding-top: calc(150 * var(--u)); }
.pristup-lead { font-size: max(16px, calc(21 * var(--u))); line-height: 1.5; }
.pristup-right .btn { margin-top: calc(35.5 * var(--u)); }

.counters {
  display: grid;
  grid-template-columns: calc(230 * var(--u)) auto;
  margin-top: calc(27 * var(--u));
}
.counter { display: flex; flex-direction: column; }
.count {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(150 * var(--u));
  line-height: .92;
  color: var(--cervena);
  font-variant-numeric: tabular-nums;
}
.count-label {
  margin: calc(4 * var(--u)) 0 0 calc(4 * var(--u));
  font-weight: 800;
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ================= 04 · SLUŽBY ================= */

.sluzby {
  position: relative;
  z-index: 2;
  padding: calc(110 * var(--u)) 0 calc(124 * var(--u));
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(108.1 * var(--u));
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(520 * var(--u));
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));
  overflow: hidden;
  transition: transform .3s ease;
}
.tile:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .tile, .tile:hover { transition: none; transform: none; } }

.tile-num { font-weight: 900; font-stretch: 125%; font-size: calc(64 * var(--u)); line-height: .92; }
.tile-title {
  margin-top: calc(21.1 * var(--u));
  max-width: calc(460 * var(--u));
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(34 * var(--u));
  line-height: .92;
  text-transform: uppercase;
}
.tile-title a::after { content: ""; position: absolute; inset: 0; }
.tile-text {
  margin-top: calc(20 * var(--u));
  max-width: calc(280 * var(--u));
  font-size: var(--text);
  line-height: 1.5;
}

.tile-foot {
  margin-top: auto;
  position: relative;
  padding-top: calc(24 * var(--u));
}
.tile-foot::before {
  content: "";
  display: block;
  width: calc(240 * var(--u));
  height: calc(2 * var(--u));
  background: currentColor;
}
.tile-time {
  display: block;
  margin-top: calc(16 * var(--u));
  font-weight: 800;
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tile { cursor: pointer; }
.tile {
  background: var(--tile-bg);
  color: var(--tile-fg);
  transition: background-color .35s ease, color .35s ease, transform .3s ease;
}
.tile-num, .tile-time { color: var(--tile-acc); transition: color .35s ease; }
.tile .btn-line { color: var(--tile-btn); border-color: var(--tile-fg); transition: color .35s, border-color .35s, background-color .35s; }
.tile .btn-line:hover { background: var(--tile-fg); color: var(--tile-bg); }

/* modrá dlaždice → po najetí razítková červená */
.tile-blue { --tile-bg: var(--kobalt); --tile-fg: var(--papir); --tile-acc: var(--ruzova); --tile-btn: var(--ruzova); }
.tile-blue:hover, .tile-blue:focus-within { --tile-bg: var(--cervena); --tile-acc: var(--papir); --tile-btn: var(--papir); }

/* růžová dlaždice → po najetí taky razítková červená */
.tile-pink { --tile-bg: var(--ruzova); --tile-fg: var(--kobalt); --tile-acc: var(--cervena); --tile-btn: var(--kobalt); }
.tile-pink:hover, .tile-pink:focus-within { --tile-bg: var(--cervena); --tile-fg: var(--papir); --tile-acc: var(--ruzova); --tile-btn: var(--papir); }

/* ================= 05 · VÝZVA ================= */

.vyzva {
  position: relative;
  background: var(--ruzova);
  padding: calc(120 * var(--u)) 0 calc(128 * var(--u));
}
.vyzva .wrap > :not(.vyzva-perla) { position: relative; z-index: 1; }
.vyzva-perla {
  position: absolute;
  left: calc(791 * var(--u));
  top: calc(-112 * var(--u));
  width: calc(717 * var(--u));
  height: calc(545 * var(--u));
  max-width: none;
  transform: rotate(172.82deg) scaleY(-1);
  mix-blend-mode: multiply;
}
.vyzva-title { font-size: calc(94 * var(--u)); color: var(--kobalt); }
.vyzva-sub {
  margin-top: calc(29.5 * var(--u));
  max-width: calc(900 * var(--u));
  font-weight: 800;
  font-size: calc(40 * var(--u));
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vyzva .btn { margin-top: calc(50 * var(--u)); }

/* ================= 06 · REFERENCE ================= */

.reference { position: relative; z-index: 2; padding: calc(110 * var(--u)) 0 calc(64 * var(--u)); }

.refs-wrap { position: relative; margin-top: calc(88.1 * var(--u)); }
.refs {
  display: flex;
  gap: calc(24 * var(--u));
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.refs::-webkit-scrollbar { display: none; }
.refs > .ref {
  flex: 0 0 calc((100% - 24 * var(--u)) / 2);
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) { .refs { scroll-behavior: auto; } }

/* šipky */
.refs-nav {
  display: flex;
  gap: calc(12 * var(--u));
  margin-top: calc(24 * var(--u));
}
.refs-btn {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  display: grid;
  place-items: center;
  border: calc(2 * var(--u)) solid var(--kobalt);
  border-radius: 3px;
  font-size: max(18px, calc(24 * var(--u)));
  line-height: 1;
  color: var(--kobalt);
  background: transparent;
  transition: background-color .2s, color .2s, opacity .2s;
}
.refs-btn:hover { background: var(--kobalt); color: var(--papir); }
.refs-btn[disabled] { opacity: .3; pointer-events: none; }
.ref {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  min-height: calc(322 * var(--u));
  padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(34 * var(--u)) calc(40 * var(--u));
  background: var(--papir);
}
/* podbarvení na střídačku jako ve variantě Muzeum */
.ref:nth-child(4n+1),
.ref:nth-child(4n+4) { background: var(--ruzova); }
.ref:nth-child(-n+2) { min-height: calc(342 * var(--u)); }

.ref-head { display: flex; align-items: center; }
.ref-head img { height: calc(26 * var(--u)); width: auto; }
.ref:nth-child(4) .ref-head img { height: calc(36 * var(--u)); }
.ref-wordmark {
  font-weight: 800;
  font-size: max(16px, calc(22 * var(--u)));
  line-height: 1.2;
  letter-spacing: .01em;
}

.ref-quote {
  flex: 1;
  font-weight: 600;
  font-size: max(16px, calc(23 * var(--u)));
  line-height: 1.3;
}
.ref-more {
  margin-top: .8em;
  font-weight: 400;
  font-size: var(--text);
  line-height: 1.55;
}

.ref-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-top: calc(28 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--kobalt);
}
.ref-author { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ref-author strong {
  font-weight: 800;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ref-author span { font-size: max(12px, calc(14 * var(--u))); line-height: 1.2; }
.ref-toggle {
  flex: none;
  font-weight: 800;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cervena);
}
.ref-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }

.kicker-logos { margin-top: calc(70 * var(--u)); margin-bottom: 0; }
.marquee-more {
  --marquee-gap: calc(120 * var(--u));
  --marquee-fade: var(--papir);
  --marquee-time: 52s;
  height: calc(52 * var(--u));
  align-items: center;
  margin-top: calc(35.6 * var(--u));
}
.marquee-more img:nth-child(1) { height: calc(24 * var(--u)); }
.marquee-more img:nth-child(2) { height: calc(20 * var(--u)); }
.marquee-more img:nth-child(3) { height: calc(52 * var(--u)); }
.marquee-more img:nth-child(4) { height: calc(28 * var(--u)); }
.marquee-more img:nth-child(5) { height: calc(22 * var(--u)); }
.marquee-more img:nth-child(6) { height: calc(42 * var(--u)); }
.marquee-more img:nth-child(7) { height: calc(28 * var(--u)); }

/* ================= 07 · PROČ JÁ ================= */

.proc {
  position: relative;
  min-height: calc(1240 * var(--u));
  padding: calc(110 * var(--u)) 0 calc(80 * var(--u));
}
.proc-art { position: absolute; inset: 0; pointer-events: none; }
.proc-krab {
  position: absolute;
  left: calc(var(--edge) - 185 * var(--u));
  top: calc(529 * var(--u));
  width: calc(620 * var(--u));
  height: calc(620 * var(--u));
  max-width: none;
  transform: rotate(-18deg);
  mix-blend-mode: multiply;
}
.proc-bar {
  position: absolute;
  left: 0;
  top: calc(1020 * var(--u));
  width: calc(var(--edge) + 604 * var(--u));
  height: calc(60 * var(--u));
  background: var(--cervena);
  mix-blend-mode: multiply;
}

.proc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr calc(620 * var(--u));
  column-gap: calc(8 * var(--u));
  align-items: start;
}
.proc-title { font-size: calc(55 * var(--u)); }

.reasons li {
  display: flex;
  gap: calc(26 * var(--u));
  padding: calc(26 * var(--u)) 0;
  border-top: calc(2 * var(--u)) solid var(--kobalt);
}
.reasons li:first-child { border-top: 0; }
.reasons .num { flex: none; font-size: calc(44 * var(--u)); min-width: 1.05em; }
.reasons li > div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.reasons h3 {
  font-weight: 800;
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.reasons p { font-size: var(--text); line-height: 1.5; }

/* ================= 08 · ZÁVĚR ================= */

.zaver {
  position: relative;
  padding: calc(110 * var(--u)) 0 calc(80 * var(--u));
}
.zaver .wrap > :not(.zaver-klepeto) { position: relative; z-index: 1; }
.zaver-klepeto {
  position: absolute;
  left: calc(898.6 * var(--u));
  top: calc(107.5 * var(--u));
  width: calc(520 * var(--u));
  height: calc(697 * var(--u));
  max-width: none;
  transform: rotate(14deg);
  mix-blend-mode: multiply;
}
.zaver-title { font-size: calc(63 * var(--u)); }
.z-red { display: block; }
.z-blue {
  display: block;
  margin-top: calc(30.1 * var(--u));
  font-size: calc(81 / 63 * 1em);
  color: var(--kobalt);
}
.zaver-text {
  margin-top: calc(60.5 * var(--u));
  max-width: calc(520 * var(--u));
  font-size: max(16px, calc(21 * var(--u)));
  line-height: 1.5;
}
.zaver .btn { margin-top: calc(37 * var(--u)); }
.zaver-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(14 * var(--u));
  margin-top: calc(211 * var(--u));
  font-weight: 800;
  font-size: max(13px, calc(17 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.zaver-contact a:hover { color: var(--cervena); }

/* ================= 09 · PATIČKA ================= */

.foot {
  position: relative;
  z-index: 3;
  background: var(--kobalt);
  color: var(--papir);
  padding: calc(80 * var(--u)) 0 calc(61 * var(--u));
}
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.foot-brand { display: flex; flex-direction: column; gap: calc(11.5 * var(--u)); }
.foot-name {
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(28px, calc(44 * var(--u)));
  line-height: .92;
  text-transform: uppercase;
}
.foot-role,
.foot-nav {
  font-weight: 800;
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: calc(40 * var(--u)); margin-top: calc(10 * var(--u)); }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: calc(80.75 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: calc(2 * var(--u)) solid rgba(243, 238, 227, .5);
  font-size: max(12px, calc(14 * var(--u)));
}
.foot-mail { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.foot-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================= MODAL ================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 27, 75, .82);
}
.modal-box { position: relative; max-width: min(900px, 100%); }
.modal-box img { max-height: 86vh; width: auto; border: 6px solid var(--papir); }
.modal-close {
  position: absolute; top: -18px; right: -18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cervena);
  color: var(--papir);
  font-size: 26px; line-height: 1;
}

/* ================= TABLET + MOBIL ================= */

@media (max-width: 1023px) {
  :root {
    --u: 1px;
    --gutter: clamp(20px, 5vw, 40px);
    --wrap: calc(100% - 2 * var(--gutter));
    --text: 16px;
  }

  /* hlavička */
  .hdr { top: 22px; align-items: center; }
  .logo { align-items: flex-start; margin-left: 0; }
  .nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-right: -10px;
    position: relative;
    z-index: 60;
  }
  .menu-bars { display: grid; gap: 7px; width: 28px; }
  .menu-bars span { height: 3px; background: var(--cervena); transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] .menu-bars span:first-child { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bars span:last-child { transform: translateY(-5px) rotate(-45deg); }

  /* otevřené menu svítí, zbytek stránky je ztlumený */
  .mobile-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 110px var(--gutter) 30px;
    background: var(--papir);
    border-bottom: 4px solid var(--cervena);
    /* na nízkých displejích se menu nevejde → posouvá se samo v sobě */
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-weight: 900;
    font-stretch: 125%;
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
  }
  /* ztmavení zbytku stránky — pod panelem menu (z-index 50), nad obsahem */
  body.menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(22, 27, 75, .72);
  }
  .mobile-nav .btn { align-self: flex-start; margin-top: 16px; font-size: 15px; line-height: 18px; }
  /* na úzkých displejích se delší názvy lámou → menší písmo a větší mezera mezi položkami */
  @media (max-width: 640px) {
    .mobile-nav { gap: 14px; padding-top: 104px; font-size: 24px; }
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .sub-hdr,
  body.menu-open .hero { position: relative; z-index: 55; }
  body.menu-open .hero-body,
  body.menu-open .hero-art { opacity: .25; transition: opacity .25s; }
  /* při otevřeném menu jsou vidět jen odkazy a křížek */
  body.menu-open .hdr { z-index: 60; pointer-events: none; }
  body.menu-open .menu-toggle { pointer-events: auto; }
  body.menu-open .logo { opacity: 0; pointer-events: none; }
  body.menu-open .hdr-rule,
  body.menu-open .hdr-dots { opacity: 0; }

  .hdr-rule { top: 88px; height: 3px; width: calc(100% - var(--gutter) - 92px); }
  .hdr-dots { top: 86.5px; left: auto; right: var(--gutter); width: 76px; height: 6px; object-fit: cover; object-position: left; }

  /* hero */
  .hero { min-height: 0; }
  .hero-body { padding-top: 140px; }
  .hero-body > :not(.hero-art) { margin-left: 0; }
  .hero-kicker { margin-left: 0 !important; font-size: 13px; }
  .hero-title { margin-top: 28px; font-size: clamp(34px, 8.8vw, 64px); }
  .hero-sub { margin-top: clamp(30px, 7vw, 58px); font-size: 15px; min-height: 2.2em; }
  .hero-lead { margin-top: 18px; max-width: 520px; }

  .hero-art {
    position: relative;
    inset: auto;
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    height: min(100vw, 720px);
    margin-top: 24px;
  }
  .hero-petra {
    left: auto; right: 0; top: auto; bottom: 0;
    width: auto; height: 100%;
  }
  .hero-petra img { width: auto; height: 100%; max-width: none; aspect-ratio: 740 / 918; }
  .hero-krab {
    left: 30%; top: 40%;
    width: auto; height: 82%;
    aspect-ratio: 826 / 981;
  }

  /* klienti */
  .band { padding: 0; }
  .band::before { inset: 0; }
  .marquee { --marquee-gap: 48px; --marquee-time: 26s; --marquee-fade-w: 60px; }
  .marquee-band { height: 92px; }
  .marquee-band img { transform: scale(.85); }

  /* přístup */
  .pristup { padding: 72px 0 40px; }
  .kicker { margin-bottom: 14px; }
  .h-xl { font-size: clamp(32px, 8.8vw, 88px); }
  .h-sub { margin-top: 18px; font-size: clamp(18px, 4.4vw, 26px); }
  .pristup-grid { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .btn { max-width: 100%; padding: 16px 22px 14px; font-size: 15px; line-height: 18px; }
  .pristup-claim { font-size: clamp(24px, 6vw, 34px); }
  .pristup-intro { font-size: 17px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .benefits li { grid-template-columns: 1fr; min-height: 0; padding: 14px 0 28px; }
  .benefits .num { grid-row: auto; font-size: 30px; }
  .b-title { margin-top: 12px; white-space: normal; }
  .b-text { max-width: none; }
  .pristup-right { padding-top: 36px; }
  .pristup-lead { font-size: 18px; }
  .pristup-right .btn { margin-top: 24px; }
  .counters { grid-template-columns: auto auto; justify-content: start; column-gap: 32px; margin-top: 36px; }
  .count { font-size: clamp(72px, 19vw, 150px); }
  .count-label { max-width: 7em; }

  /* služby */
  .sluzby { padding: 72px 0 80px; }
  .h-lg { font-size: clamp(34px, 9.4vw, 88px); }
  .tiles { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
  .tile { min-height: 0; padding: 28px 24px 30px; }
  .tile-num { font-size: 52px; }
  .tile-title { margin-top: 16px; font-size: clamp(26px, 6.4vw, 34px); }
  .tile-text { max-width: 420px; margin-top: 14px; }
  .tile-foot { margin-top: 36px; padding-top: 0; }
  .tile-foot::before { width: auto; }
  .tile-time { margin-top: 12px; }
  .tile:hover { transform: none; }

  /* výzva */
  .vyzva { padding: 72px 0 0; overflow: clip; }
  .vyzva .wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .vyzva-perla { order: 10; }
  .vyzva-title { font-size: clamp(40px, 10.6vw, 94px); }
  .vyzva-sub { margin-top: 20px; font-size: clamp(22px, 5.4vw, 40px); }
  .vyzva .btn { margin-top: 32px; }
  .vyzva-perla {
    position: relative;
    left: auto; top: auto;
    width: min(88%, 560px); height: auto;
    aspect-ratio: 717 / 545;
    margin: 28px -10% -9% auto;
  }

  /* reference */
  .reference { padding: 80px 0 56px; }
  .refs-wrap { margin-top: 44px; }
  .refs { gap: 16px; }
  .refs > .ref { flex: 0 0 100%; }
  .refs-nav { margin-top: 20px; }
  .refs-btn { width: 48px; height: 48px; font-size: 20px; }
  .ref, .ref:nth-child(-n+2) { min-height: 0; padding: 24px; }
  .ref-head img { height: 24px; }
  .ref:nth-child(4) .ref-head img { height: 32px; }
  .ref-quote { font-size: 18px; }
  .ref-foot { flex-wrap: wrap; }
  .kicker-logos { margin-top: 72px; }
  .marquee-more { --marquee-gap: 56px; --marquee-time: 30s; height: 56px; margin-top: 28px; }
  .marquee-more img { transform: scale(.8); }

  /* proč já */
  .proc { min-height: 0; padding: 72px 0 0; display: flex; flex-direction: column; }
  .proc-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .proc-title { font-size: clamp(38px, 9vw, 55px); }
  .reasons .num { font-size: 36px; }
  .proc-art { position: relative; order: 2; height: min(88vw, 520px); margin-top: 24px; }
  .proc-krab { left: -14%; top: 0; width: min(80vw, 470px); height: auto; aspect-ratio: 1; }
  .proc-bar { top: auto; bottom: 14%; width: 76%; height: 44px; }

  /* závěr */
  .zaver { padding: 72px 0 0; overflow: clip; }
  .zaver-title { font-size: clamp(29px, 7.4vw, 63px); }
  .z-blue { margin-top: 18px; }
  .zaver-text { margin-top: 32px; font-size: 18px; }
  .zaver .btn { margin-top: 26px; }
  .zaver-contact { margin-top: 48px; gap: 4px 12px; }
  .zaver-klepeto {
    position: relative;
    left: auto; top: auto;
    width: min(58%, 380px); height: auto;
    aspect-ratio: 520 / 697;
    margin: 24px -4% -12% auto;
  }
  .zaver .wrap { display: flex; flex-direction: column; }
  .zaver-klepeto { order: 10; }

  /* patička */
  .foot { padding: 56px 0 40px; }
  .foot-top { flex-direction: column; gap: 28px; }
  .foot-nav { gap: 14px 28px; margin-top: 0; }
  .foot-bottom { flex-direction: column; margin-top: 36px; padding-top: 22px; }
}

@media (max-width: 560px) {
  .count { font-size: clamp(56px, 17vw, 96px); }
  .count-label { max-width: none; }
  .benefits { grid-template-columns: 1fr; }
}

/* =========================================================
   PODSTRÁNKY SLUŽEB (Figma 70:2 a sourozenci)
   ========================================================= */

.sub-hdr { position: relative; height: calc(180 * var(--u)); }
.sub-hdr .hdr { top: calc(50 * var(--u)); }
/* na podstránkách není v úvodu fotka, linka jde přes celou šířku jako v návrhu */
.sub-hdr .hdr-rule { width: calc(var(--edge) + 1058 * var(--u)); }

.s-hero {
  position: relative;
  min-height: calc(700 * var(--u));
  padding-top: calc(60 * var(--u));
  overflow: hidden;
}
.s-hero .wrap > * { position: relative; z-index: 1; }
.s-title {
  margin-top: calc(21.6 * var(--u));
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(124 * var(--u));
  line-height: .92;
  text-transform: uppercase;
  color: var(--cervena);
}
.s-lead {
  margin-top: calc(79.8 * var(--u));
  max-width: calc(520 * var(--u));
  font-size: max(16px, calc(22 * var(--u)));
  line-height: 1.5;
}
.s-hero-krab {
  position: absolute;
  left: calc(var(--edge) + 591.25 * var(--u));
  top: calc(122.9 * var(--u));
  width: calc(1054.5 * var(--u));
  height: calc(1052.2 * var(--u));
  max-width: none;
  transform: rotate(27.5deg);
  mix-blend-mode: multiply;
  z-index: 0;
}
.s-hero-pruh {
  position: absolute;
  left: calc(var(--edge) + 742 * var(--u));
  top: calc(589 * var(--u));
  width: calc(995 * var(--u));
  height: calc(60 * var(--u));
  background: var(--cervena);
  mix-blend-mode: multiply;
  z-index: 0;
}

.s-params {
  position: relative;
  z-index: 2;
  background: var(--kobalt);
  color: var(--papir);
  min-height: calc(264 * var(--u));
  padding: calc(56 * var(--u)) 0;
}
.s-params .wrap {
  display: grid;
  grid-template-columns: repeat(4, calc(282 * var(--u)));
  column-gap: calc(36 * var(--u));
}
.s-param-label {
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.s-param-value {
  margin-top: calc(19.1 * var(--u));
  font-weight: 600;
  font-size: max(15px, calc(19 * var(--u)));
  line-height: 1.5;
}

.s-about {
  position: relative;
  z-index: 2;
  min-height: calc(702 * var(--u));
  padding-top: calc(150 * var(--u));
}
.s-about .wrap {
  display: grid;
  grid-template-columns: calc(664 * var(--u)) calc(584 * var(--u));
}
.s-h2 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(96 * var(--u));
  line-height: .92;
  text-transform: uppercase;
  color: var(--cervena);
}
.s-claim {
  margin-top: calc(43.7 * var(--u));
  max-width: calc(540 * var(--u));
  font-weight: 800;
  font-size: calc(34 * var(--u));
  line-height: 1.15;
  color: var(--cervena);
}
.s-about-text p { font-size: max(16px, calc(20 * var(--u))); line-height: 1.5; }
.s-about-text p + p { margin-top: calc(26 * var(--u)); }

.s-parts {
  position: relative;
  z-index: 2;
  min-height: calc(1014 * var(--u));
  padding: calc(60 * var(--u)) 0 calc(120 * var(--u));
}
.s-parts .s-h2 { margin-top: calc(21.6 * var(--u)); }
.parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(69.4 * var(--u));
}
.part {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  min-height: calc(250 * var(--u));
  padding: calc(30 * var(--u));
  border: calc(2 * var(--u)) solid var(--kobalt);
  background:
    linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
    url("img/papir.webp") 0 0 / calc(80 * var(--u)) auto repeat;
}
.parts-grid .part:nth-child(-n+3) { min-height: calc(274 * var(--u)); }
.part-num { font-weight: 900; font-stretch: 125%; font-size: calc(56 * var(--u)); line-height: .92; color: var(--cervena); }
.part h3 {
  font-weight: 800;
  font-size: max(16px, calc(21 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.part p { font-size: var(--text); line-height: 1.5; }

.s-cta {
  position: relative;
  z-index: 0;
  min-height: calc(560 * var(--u));
  padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
  background: var(--ruzova);
}
.s-cta-title {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(78 * var(--u));
  line-height: .92;
  text-transform: uppercase;
  color: var(--kobalt);
}
.s-cta .btn { margin-top: calc(56.7 * var(--u)); }

/* ilustrace přes dvě sekce (korál na Strategii) */
.s-overlay {
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.s-overlay img { position: absolute; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
/* červený korál jen na mobilu (na desktopu je korál modrý) */
.s-overlay-koral .koral-cerveny { display: none; }
.s-overlay-koral { bottom: 0; height: calc(1720 * var(--u)); }
.s-overlay-koral img {
  left: calc(var(--edge) + 1008 * var(--u));
  top: calc(860 * var(--u));
  width: calc(601 * var(--u));
  height: calc(1109 * var(--u));
}
.s-cta .wrap { position: relative; z-index: 2; }

.s-more {
  position: relative;
  z-index: 2;
  min-height: calc(590 * var(--u));
  padding: calc(90 * var(--u)) 0 calc(130 * var(--u));
}
.s-more .kicker { margin-bottom: calc(21.6 * var(--u)); }
.s-more-list { border-top: calc(2 * var(--u)) solid var(--kobalt); }
.s-more-list a {
  display: grid;
  grid-template-columns: calc(164 * var(--u)) 1fr auto;
  align-items: center;
  min-height: calc(110 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid var(--kobalt);
}
.s-more-num { font-weight: 900; font-stretch: 125%; font-size: calc(44 * var(--u)); line-height: .92; color: var(--cervena); }
.s-more-name {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(40 * var(--u));
  line-height: .92;
  text-transform: uppercase;
}
.s-more-arrow {
  font-weight: 700;
  font-size: calc(34 * var(--u));
  line-height: 1;
  color: var(--cervena);
  transition: transform .25s;
}
.s-more-list a:hover .s-more-arrow { transform: translateX(8px); }
.s-more-list a:hover .s-more-name { color: var(--cervena); }

@media (max-width: 1023px) {
  .sub-hdr { height: 96px; }
  .sub-hdr .hdr { top: 22px; }

  .s-hero { min-height: 0; padding-top: 30px; padding-bottom: 0; display: flex; flex-direction: column; overflow: clip; }
  .s-hero > .wrap { order: 1; }
  .s-title { margin-top: 12px; font-size: clamp(36px, 10vw, 124px); }
  .s-lead { margin-top: 26px; max-width: none; font-size: 17px; }
  .s-hero-krab {
    position: relative;
    order: 2;
    left: auto; right: auto; top: auto; bottom: auto;
    width: min(126%, 620px); height: auto;
    aspect-ratio: 1;
    margin: 20px -16% -4% auto;
    transform: rotate(16deg);
  }
  .s-hero-pruh { left: 0; top: auto; bottom: 16%; width: 66%; height: 30px; }

  .s-params { min-height: 0; padding: 36px 0; }
  .s-params .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .s-param-value { margin-top: 10px; font-size: 16px; }

  .s-about { min-height: 0; padding-top: 64px; }
  .s-about .wrap { grid-template-columns: 1fr; row-gap: 28px; }
  .s-h2 { font-size: clamp(34px, 8.6vw, 96px); }
  .s-claim { margin-top: 20px; max-width: none; font-size: clamp(24px, 6vw, 34px); }
  .s-about-text p { font-size: 17px; }

  .s-parts { min-height: 0; padding: 64px 0 72px; }
  .parts-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .part, .parts-grid .part:nth-child(-n+3) { min-height: 0; padding: 24px; }
  .part-num { font-size: 44px; }

  .s-cta { min-height: 0; padding: 64px 0 72px; background-size: 700px auto; }
  .s-cta-title { font-size: clamp(34px, 8.6vw, 78px); }
  .s-cta .btn { margin-top: 32px; }

  .s-overlay { display: none; }

  .s-more { min-height: 0; padding: 64px 0 72px; }
  .s-more-list a { grid-template-columns: 70px 1fr auto; min-height: 0; padding: 18px 0; gap: 0 12px; }
  .s-more-num { font-size: 30px; }
  .s-more-name { font-size: clamp(20px, 5vw, 40px); }
  .s-more-arrow { font-size: 24px; }
}

/* ---- varianty podstránek: ilustrace v úvodu ---- */

.s-hero-right .wrap { display: flex; flex-direction: column; align-items: flex-start; }
.s-hero-right .s-lead { align-self: flex-end; width: calc(434 * var(--u)); margin-top: calc(127 * var(--u)); }

/* Identita — krab volně přes hlavičku i úvod */
.p-identita .s-hero-krab {
  left: calc(var(--edge) + 868.25 * var(--u));
  top: calc(7.3 * var(--u));
  width: calc(787.5 * var(--u));
  height: calc(768.4 * var(--u));
  transform: rotate(-121.02deg);
  z-index: 3;
}
.p-identita .s-hero { overflow: visible; }
.p-identita .s-hero-pruh { left: calc(var(--edge) + 807 * var(--u)); top: calc(587 * var(--u)); width: calc(1091 * var(--u)); }

/* Kreativní platforma — krab ve výřezu, který končí nad modrým pásem */
.p-kreativni .s-hero { overflow: visible; }
.p-kreativni .s-hero-clip {
  position: absolute;
  left: 0; right: 0;
  top: calc(-180 * var(--u));
  height: calc(944 * var(--u));
  overflow: hidden;
  pointer-events: none;
}
.p-kreativni .s-hero-krab {
  left: calc(var(--edge) + 795.5 * var(--u));
  top: calc(342.5 * var(--u));
  width: calc(788 * var(--u));
  height: calc(768 * var(--u));
  transform: rotate(-58deg);
}
.p-kreativni .s-hero-pruh { left: calc(var(--edge) + 697 * var(--u)); top: calc(645 * var(--u)); width: calc(1091 * var(--u)); }

/* Konzultace — krab i pruh vlevo, text vpravo */
.p-konzultace .s-hero-krab {
  left: calc(var(--edge) - 200 * var(--u));
  top: calc(268 * var(--u));
  width: calc(788 * var(--u));
  height: calc(768 * var(--u));
  transform: rotate(18.69deg);
}
.p-konzultace .s-hero-pruh { left: calc(var(--edge) - 680 * var(--u)); top: calc(592 * var(--u)); width: calc(1091 * var(--u)); }

/* ---- O co jde: poznámka pod textem (Identita) ---- */
.s-note {
  margin-top: calc(32 * var(--u));
  padding-top: calc(20 * var(--u));
  /* podle schváleného desktopu: červená, ne kobaltová */
  border-top: calc(2 * var(--u)) solid var(--cervena);
  color: var(--cervena);
  font-weight: 800;
  font-size: max(16px, calc(21 * var(--u)));
  line-height: 1.3;
}

/* ---- Co je součástí: dvě velké karty (Identita) ---- */
.parts-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(69.4 * var(--u));
}
.part-big {
  padding: calc(40 * var(--u));
  border: calc(2 * var(--u)) solid var(--kobalt);
  background: rgba(255, 255, 255, .35);
}
.part-big .part-num { font-size: calc(56 * var(--u)); }
.part-big h3 {
  margin-top: calc(14 * var(--u));
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(48 * var(--u));
  line-height: .92;
  text-transform: uppercase;
}
.part-tag {
  margin-top: calc(14 * var(--u));
  font-weight: 800;
  font-size: max(14px, calc(18 * var(--u)));
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cervena);
}
.part-list { margin-top: calc(38 * var(--u)); }
.part-list li {
  display: flex;
  gap: calc(18 * var(--u));
  align-items: baseline;
  padding: calc(14 * var(--u)) 0;
  border-top: calc(1 * var(--u)) solid var(--kobalt);
}
.part-list li span:first-child {
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(13px, calc(15 * var(--u)));
  color: var(--cervena);
}
.part-list li span + span { font-weight: 600; font-size: max(16px, calc(20 * var(--u))); }

/* ---- Co je součástí: tři bílé karty (Kreativní platforma) ---- */
.parts-white .part {
  min-height: calc(300 * var(--u));
  padding: calc(34 * var(--u));
}
.parts-white .part-num { font-size: calc(64 * var(--u)); }
.parts-white .part h3 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(30 * var(--u));
  line-height: .92;
  letter-spacing: 0;
}
.parts-white .part p { font-size: max(15px, calc(18 * var(--u))); }

/* ---- Varianty spolupráce (Konzultace) ---- */
.variants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--u));
  margin-top: calc(69.4 * var(--u));
}
.variant {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  min-height: calc(291 * var(--u));
  padding: calc(38 * var(--u));
  border: calc(2 * var(--u)) solid var(--kobalt);
  background: rgba(255, 255, 255, .35);
}
.variant .part-num { font-size: calc(64 * var(--u)); }
.variant h3 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(34 * var(--u));
  line-height: .92;
  text-transform: uppercase;
}
.variant p { font-size: max(15px, calc(19 * var(--u))); line-height: 1.5; }

/* ---- ilustrace ve výzvě ---- */
.s-cta-art {
  position: absolute;
  max-width: none;
  mix-blend-mode: multiply;
  z-index: 1;
}
.p-kreativni .s-cta-art {
  left: calc(var(--edge) + 891 * var(--u));
  top: calc(18 * var(--u));
  width: calc(553 * var(--u));
  height: calc(688 * var(--u));
}
.p-konzultace .s-overlay-hrebenatka { bottom: 0; height: calc(884 * var(--u)); overflow: visible; }
.p-konzultace .s-overlay-hrebenatka img {
  left: calc(var(--edge) + 910.5 * var(--u));
  top: calc(354 * var(--u));
  width: calc(644 * var(--u));
  height: calc(608 * var(--u));
  transform: rotate(50.18deg);
}

/* elipsy podstránek */
.ring-i-title { --rw: 6.81em; --rh: 1.23em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-i-cta   { --rw: 13em;  --rh: 1.45em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-k-title { --rw: 8.88em; --rh: 1.22em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-k-cta   { --rw: 6.7em;  --rh: 1.7em;  --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-m-title { --rw: 9.03em; --rh: 1.29em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-m-cta   { --rw: 6.89em; --rh: 1.35em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-k-title2 { --rw: 7.12em; --rh: 1.87em; --rx: 0em; --ry: 0em; --rr: 3deg; }
.ring-i-cta svg,
.ring-k-cta svg,
.ring-m-cta svg { color: var(--cervena); }

@media (max-width: 1023px) {
  .s-hero-right .wrap { display: block; }
  .s-hero-right .s-lead { width: auto; margin-top: 26px; }
  .p-identita .s-hero-krab,
  .p-kreativni .s-hero-krab,
  .p-konzultace .s-hero-krab {
    left: auto; right: auto; top: auto; bottom: auto;
    width: min(126%, 620px); height: auto;
    transform: rotate(16deg);
  }
  .p-kreativni .s-hero-clip { position: static; height: auto; overflow: visible; display: contents; }
  .p-identita .s-hero-pruh,
  .p-kreativni .s-hero-pruh,
  .p-konzultace .s-hero-pruh { left: 0; top: auto; bottom: 16%; width: 66%; }

  .parts-two, .variants { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .part-big, .variant { padding: 24px; min-height: 0; }
  .part-big h3 { font-size: clamp(30px, 8vw, 48px); }
  .part-list { margin-top: 24px; }
  .variant h3 { font-size: clamp(24px, 6.4vw, 34px); }
  .parts-white .part { min-height: 0; padding: 24px; }
  .parts-white .part h3 { font-size: clamp(24px, 6vw, 30px); }
  .s-note { font-size: 17px; }
  .s-cta-art { display: none; }
  .p-konzultace .s-overlay-hrebenatka { display: none; }
}

/* ---- rozměrové varianty podstránek ---- */
.s-about--tight { min-height: calc(520 * var(--u)); padding-top: calc(110 * var(--u)); }
.s-about--tight .s-about-text { padding-top: calc(8 * var(--u)); }





.p-identita .s-cta-title { font-size: calc(71 * var(--u)); }
.p-identita .s-cta .btn { margin-top: calc(55 * var(--u)); }
.p-identita .s-cta { padding-bottom: calc(141 * var(--u)); }

.p-kreativni .s-hero { min-height: calc(764 * var(--u)); }
.p-kreativni .s-cta-title { font-size: calc(75 * var(--u)); }
.p-kreativni .s-cta .btn { margin-top: calc(56 * var(--u)); }

.p-konzultace .s-title { font-size: calc(104 * var(--u)); }
.p-konzultace .s-cta-title { font-size: calc(88 * var(--u)); }
.p-konzultace .s-cta { min-height: calc(577 * var(--u)); padding-bottom: calc(120 * var(--u)); }
.p-konzultace .s-cta .btn { margin-top: calc(99 * var(--u)); }

.p-identita .s-parts,
.p-kreativni .s-parts,
.p-konzultace .s-parts { min-height: 0; }

@media (max-width: 1023px) {
  .s-about--tight { min-height: 0; padding-top: 64px; }
  .s-about--tight .s-about-text { padding-top: 0; }
  .p-identita .s-cta, .p-konzultace .s-cta { min-height: 0; padding-bottom: 72px; }
  .p-identita .s-cta-title { font-size: clamp(28px, 7.4vw, 71px); }
  .p-kreativni .s-cta-title { font-size: clamp(32px, 8.2vw, 75px); }
  .p-konzultace .s-cta-title { font-size: clamp(34px, 8.6vw, 88px); }
  .p-konzultace .s-title { font-size: clamp(34px, 9vw, 104px); }
  .p-identita .s-cta .btn, .p-kreativni .s-cta .btn, .p-konzultace .s-cta .btn { margin-top: 32px; }
  .s-cta { overflow: clip; }
}

/* =========================================================
   PODSTRÁNKA KONTAKT (Figma 81:114)
   ========================================================= */

.k-main { position: relative; min-height: calc(900 * var(--u)); padding-top: calc(70 * var(--u)); overflow: hidden; }
.k-main .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: calc(664 * var(--u)) calc(544 * var(--u)); column-gap: calc(40 * var(--u)); }

/* růžový papír pod formulářem — na spad k pravému okraji */
.k-panel {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--edge) + 664 * var(--u));
  right: 0;
  background: var(--ruzova);
  z-index: 1;
}
.k-krab {
  position: absolute;
  left: calc(var(--edge) - 145 * var(--u));
  top: calc(610 * var(--u));
  width: calc(639 * var(--u));
  height: calc(639 * var(--u));
  max-width: none;
  transform: rotate(-10deg);
  mix-blend-mode: multiply;
  z-index: 1;
}

.k-title {
  margin-top: calc(21.6 * var(--u));
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(67 * var(--u));
  line-height: .92;
  text-transform: uppercase;
  color: var(--cervena);
}
.k-lead {
  margin-top: calc(70 * var(--u));
  max-width: calc(540 * var(--u));
  font-size: max(16px, calc(22 * var(--u)));
  line-height: 1.5;
}
.k-details { margin-top: calc(50 * var(--u)); max-width: calc(560 * var(--u)); }
.k-details > div {
  padding: calc(20 * var(--u)) 0 calc(24 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--kobalt);
}
.k-details > div:last-child { border-bottom: calc(2 * var(--u)) solid var(--kobalt); }
.k-label {
  font-weight: 900;
  font-stretch: 125%;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cervena);
}
.k-value {
  display: inline-block;
  margin-top: calc(12 * var(--u));
  font-weight: 800;
  font-size: max(20px, calc(28 * var(--u)));
  line-height: 1.1;
}
a.k-value:hover { color: var(--cervena); }

/* formulář */
.k-form { padding-top: calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.k-field { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.k-field label {
  font-weight: 800;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.k-field input,
.k-field textarea {
  width: 100%;
  padding: calc(19 * var(--u)) calc(20 * var(--u));
  font: inherit;
  font-size: max(15px, calc(17 * var(--u)));
  color: var(--kobalt);
  background: var(--papir);
  border: calc(2 * var(--u)) solid var(--kobalt);
  border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.k-field input { height: calc(64 * var(--u)); }
.k-field textarea { height: calc(200 * var(--u)); resize: vertical; line-height: 1.5; }
.k-field input::placeholder,
.k-field textarea::placeholder { color: rgba(46, 63, 196, .45); }
.k-field input:focus,
.k-field textarea:focus { outline: none; border-color: var(--cervena); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(226, 59, 46, .25); }
.k-form .btn { align-self: flex-start; margin-top: calc(14 * var(--u)); }

/* stavy z belion-maileru v našem stylu */
.bm-field-error { border-color: var(--cervena) !important; }
.bm-error {
  display: block;
  margin-top: calc(6 * var(--u));
  font-weight: 800;
  font-size: max(12px, calc(13 * var(--u)));
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cervena);
}
.bm-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bm-spin .7s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }
.bm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 27, 75, .82);
}
.bm-modal-box {
  max-width: 460px;
  padding: 40px;
  text-align: center;
  background: var(--papir);
  border: 4px solid var(--kobalt);
}
.bm-modal--error .bm-modal-box { border-color: var(--cervena); }
.bm-modal-icon { width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; background: var(--kobalt); }
.bm-modal-icon--error { background: var(--cervena); }
.bm-modal-msg {
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--kobalt);
}
.bm-modal-close {
  display: inline-flex;
  margin-top: 26px;
  padding: 15px 26px 13px;
  border: 4px solid var(--kobalt);
  border-radius: 3px;
  background: var(--kobalt);
  color: var(--papir);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bm-modal-close:hover { background: transparent; color: var(--kobalt); }
.bm-modal--out { opacity: 0; transition: opacity .2s; }

@media (max-width: 1023px) {
  .k-main { min-height: 0; padding-top: 34px; padding-bottom: 140px; }
  .k-main .wrap { grid-template-columns: 1fr; row-gap: 32px; }
  .k-panel { display: none; }
  .k-title { font-size: clamp(34px, 8.6vw, 67px); }
  .k-lead { margin-top: 28px; max-width: none; font-size: 17px; }
  .k-details { margin-top: 32px; max-width: none; }
  .k-value { font-size: 22px; }
  .k-form {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding: 30px var(--gutter) 40px;
    background: var(--ruzova);
    gap: 20px;
  }
  .k-field input { height: 56px; }
  .k-field textarea { height: 170px; }
  .k-krab { left: -22%; top: auto; bottom: 0; width: min(70vw, 360px); height: auto; aspect-ratio: 1; }
}

/* =========================================================
   MOBIL ≤ 640 px — podle finálního rámu „Homepage · 390“ ve Figmě
   ========================================================= */
@media (max-width: 640px) {
  :root { --gutter: 24px; --text: 16px; }

  /* ── 01 · Hero ── */
  .hero { position: relative; min-height: 900px; overflow: visible; }
  .hdr { top: 50px; }
  .hdr-rule { top: 150px; width: 211px; height: 4px; }
  .hdr-dots { display: none; }

  .hero-body { padding-top: 217px; }
  .hero-kicker { font-size: 16px; line-height: 1.12; }
  .hero-title { margin-top: 62px; font-size: 40px; max-width: 165px; }
  .hero-sub { margin-top: 54px; max-width: 182px; font-size: 15px; min-height: 2.2em; }
  .hero-lead { margin-top: 46px; width: 197px; max-width: 197px; font-size: 17px; }

  .hero-art { position: absolute; inset: 0; width: 100%; height: auto; margin: 0; }
  .hero-petra {
    left: 138px; right: auto; top: 0; bottom: auto;
    width: 574px; height: 949px;
    overflow: hidden;
  }
  .hero-petra img {
    position: absolute;
    left: 84px; top: 86px;
    width: 434px; height: 896px;
    max-width: none; aspect-ratio: auto;
  }
  .hero-krab {
    left: 126px; top: 652px;
    width: 457px; height: 590px;
    aspect-ratio: auto;
    transform: rotate(-39.1deg);
  }
  .ring-hero { --rw: 4.83em; --rh: 1.13em; --rx: -.1em; --ry: .12em; --rr: 4deg; }

  /* ── 02 · Klienti: marquee i na mobilu, na krajích do ztracena ── */
  .marquee { --marquee-gap: 40px; --marquee-time: 22s; --marquee-fade-w: 56px; }
  .marquee-band { height: 120px; padding: 0; }
  .marquee-band img { transform: scale(.82); }

  /* ── 03 · Přístup ── */
  .pristup { padding: 110px 0 80px; }
  .kicker { font-size: 16px; margin-bottom: 22px; }
  .h-xl { font-size: 36px; }
  .h-sub { margin-top: 24px; font-size: 21px; }
  .pristup-grid { margin-top: 40px; row-gap: 0; }
  .pristup-claim { font-size: 19px; }
  .pristup-intro { margin-top: 22px; font-size: 16px; }
  .benefits { margin-top: 44px; grid-template-columns: 1fr; }
  .benefits li {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    padding: 16px 0 28px;
    border-top: 2px solid var(--kobalt);
  }
  .benefits .num { grid-row: 1 / 3; font-size: 19px; }
  .b-title { margin-top: 0; font-size: 18px; }
  .b-text { margin-top: 8px; font-size: 16px; }
  .pristup-right { padding-top: 44px; display: flex; flex-direction: column; }
  /* 55/45 drží rozvržení z návrhu na 390 px a nepřeteče ani na 320 px */
  .counters { order: 1; margin-top: 0; grid-template-columns: minmax(0, 55%) minmax(0, 45%); column-gap: 0; }
  .count { font-size: min(57px, 15vw); }
  .count-label { margin-top: 8px; font-size: 15px; max-width: none; }
  .pristup-lead { order: 2; margin-top: 48px; font-size: 17px; }
  .pristup-right .btn { order: 3; margin-top: 24px; justify-content: center; width: 100%; }

  /* ── 04 · Služby ── */
  .sluzby { padding: 110px 0 60px; }
  .h-lg { font-size: 33px; }
  /* stejná výška všech dlaždic → devidery na jedné lince i ve sloupci */
  .tiles { margin-top: 60px; gap: 16px; grid-auto-rows: 1fr; }
  .tile { padding: 24px; }
  .tile-num { font-size: 44px; }
  .tile-title { margin-top: 12px; font-size: 26px; }
  .tile-text { margin-top: 12px; max-width: none; font-size: 16px; }
  .tile-foot { margin-top: auto; padding-top: 30px; }
  .tile-time { margin-top: 16px; font-size: 15px; }

  /* ── 05 · Výzva ── */
  .vyzva { position: relative; min-height: 463px; padding: 77px 0 77px; overflow: clip; }
  .vyzva .wrap { display: block; }
  .vyzva-title { font-size: 36px; }
  .vyzva-sub { margin-top: 47px; font-size: 22px; }
  .vyzva .btn { margin-top: 66px; }
  .vyzva-perla {
    display: block;
    position: absolute;
    left: 205px; top: -66px;
    width: 300px; height: 228px;
    margin: 0;
    aspect-ratio: auto;
    transform: rotate(172.8deg) scaleY(-1);
  }

  /* ── 06 · Reference ── */
  .reference { padding: 110px 0 60px; }
  .refs-wrap { margin-top: 46px; }
  .refs { gap: 16px; }
  .ref, .ref:nth-child(-n+2) { padding: 24px; gap: 14px; }
  .ref-quote { font-size: 18px; line-height: 1.35; }
  .ref-foot { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 18px; }
  .kicker-logos { margin-top: 86px; }
  .marquee-more { --marquee-gap: 44px; height: 46px; margin-top: 30px; }

  /* ── 07 · Proč já ── */
  .proc { position: relative; display: block; min-height: 1508px; padding: 110px 0 0; }
  .proc-title { font-size: 30px; }
  .proc-grid { row-gap: 40px; }
  .reasons li { padding: 20px 0; gap: 16px; }
  .reasons .num { font-size: 32px; min-width: 60px; }
  .reasons h3 { font-size: 18px; }
  .reasons p { font-size: 16px; }
  .proc-art { position: absolute; inset: 0; order: 0; height: auto; margin: 0; }
  .proc-krab {
    left: -85px; top: 1196px;
    width: 351px; height: 351px;
    aspect-ratio: auto;
    transform: rotate(117.6deg);
  }
  .proc-bar { left: 0; top: 1431px; bottom: auto; width: 300px; height: 30px; }

  /* ── 08 · Závěr ── */
  .zaver { position: relative; min-height: 734px; padding: 96px 0 0; }
  .zaver .wrap { display: block; }
  .zaver-title { font-size: 24px; }
  .z-blue { margin-top: 18px; font-size: 31px; }
  .zaver-text { margin-top: 28px; font-size: 17px; }
  .zaver .btn { margin-top: 170px; }
  .zaver-contact { display: none; }
  .zaver-klepeto {
    position: absolute;
    left: 171px; top: 261px;
    width: 322px; height: 485px;
    margin: 0;
    aspect-ratio: auto;
    transform: rotate(14deg);
  }

  /* ── 09 · Patička ── */
  .foot { padding: 56px 0 44px; }
  .foot-name { font-size: 24px; }
  .foot-role { font-size: 15px; }
  .foot-nav { gap: 12px 22px; margin-top: 26px; }
  .foot-bottom { margin-top: 28px; padding-top: 22px; gap: 12px; }

  /* ── Podstránky: hlavička podle návrhu 390 (vzdušnější) ── */
  .sub-hdr { height: 152px; }
  .sub-hdr .hdr { top: 43px; }
  .sub-hdr .hdr-rule { top: 148px; width: 211px; height: 4px; }

  /* ── Kontakt: krab podle rámu „Kontakt · 390“ ── */
  .k-krab {
    /* obrys 457×453 při natočení 41,8° → 344×300, střed 364,5/1169,5 */
    left: 192.5px; top: 1019.5px; right: auto; bottom: auto;
    width: 344px; height: 300px;
    aspect-ratio: auto;
    transform: rotate(-41.8deg);
    /* nad růžový papír formuláře, jinak by ho panel schoval */
    z-index: 3;
  }

  /* ── Podstránky: ilustrace v růžové výzvě ── */
  .s-overlay { display: block; inset: 0 0 auto 0; height: 100%; overflow: hidden; }
  .s-overlay-koral .koral-modry { display: none; }
  .s-overlay-koral .koral-cerveny { display: block; left: 232px; top: -40px; width: 216px; height: 399px; }
  .p-konzultace .s-overlay-hrebenatka { display: block; overflow: hidden; }
  .p-konzultace .s-overlay-hrebenatka img {
    /* obrys 260×260 při natočení 50° → hrana 260 / (cos50 + sin50) */
    left: 242.7px; top: 92.7px;
    width: 184.5px; height: 184.5px;
    transform: rotate(50deg);
  }
}

/* =========================================================
   MIKROANIMACE PŘI SCROLLU
   Týká se jen textů, karet a tlačítek. Ilustrace (krab, klepeto,
   perlorodka, řasy) se nikdy neanimují ani neposouvají.
   ========================================================= */
[data-reveal="move"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="move"].is-in { opacity: 1; transform: none; }

/* červená linka v hlavičce se natáhne */
.hdr-rule[data-reveal="move"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.hdr-rule[data-reveal="move"].is-in { transform: scaleX(1); }

/* ruční elipsa se dokreslí */
.ring svg {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4, .1, .3, 1) .15s;
}
.ring.is-in svg { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal="move"],
  [data-reveal="move"].is-in,
  .hdr-rule[data-reveal="move"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ring svg { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* =========================================================
   TABLET 641–1023 px — podle rámu „Homepage · 768“ ve Figmě
   ========================================================= */
@media (min-width: 641px) and (max-width: 1023px) {
  :root { --gutter: 40px; --text: 16px; }

  /* ── 01 · Hero ── */
  .hero { position: relative; min-height: 866px; overflow: visible; }
  .hdr { top: 50px; }
  .hdr-rule { top: 150px; width: 407px; height: 4px; }
  .hdr-dots { display: none; }

  .hero-body { padding-top: 231px; }
  .hero-kicker { font-size: 14px; line-height: 1.12; }
  .hero-title { margin-top: 62px; font-size: 64px; max-width: 300px; }
  .hero-sub { margin-top: 56px; max-width: 380px; font-size: 18px; }
  .hero-lead { margin-top: 30px; width: 313px; max-width: 313px; font-size: 17px; }
  .ring-hero { --rw: 5.6em; --rh: 1.45em; --rx: -.1em; --ry: .2em; --rr: 4deg; }

  .hero-art { position: absolute; inset: 0; width: 100%; height: auto; margin: 0; }
  .hero-petra {
    left: 219px; right: auto; top: 109px; bottom: auto;
    /* nad ~890 px by se fotka useknula hranou rámu, tak ji necháme doběhnout k okraji */
    width: max(590px, calc(100vw - 259px)); height: 846px;
    overflow: hidden;
  }
  .hero-petra img { position: absolute; left: 15px; top: -52px; width: 756px; height: 1006px; max-width: none; aspect-ratio: auto; object-fit: fill; }
  .hero-krab {
    left: 368px; top: 548px;
    width: 551px; height: 654px;
    aspect-ratio: auto;
    transform: rotate(-34.8deg);
  }

  /* ── 02 · Klienti ── */
  .band { padding: 40px 0; }
  .band::before { inset: 40px 0; }
  .marquee-band { height: 120px; }
  .marquee-band img { transform: none; }

  /* ── 03 · Přístup ── */
  .pristup { padding: 110px 0 90px; }
  .kicker { font-size: 14px; margin-bottom: 24px; }
  .h-xl { font-size: 53px; }
  .h-sub { margin-top: 28px; font-size: 21px; }
  .pristup-grid { grid-template-columns: minmax(0, 1fr); margin-top: 50px; row-gap: 0; }
  .pristup-claim { max-width: none; font-size: 22px; }
  .pristup-intro { margin-top: 22px; max-width: none; font-size: 16px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 22px; }
  .benefits li { grid-template-columns: 60px 1fr; min-height: 150px; padding: 16px 0 24px; border-top: 2px solid var(--kobalt); }
  .benefits .num { grid-row: 1 / 3; font-size: 22px; }
  .b-title { margin-top: 0; font-size: 16px; white-space: normal; }
  .b-text { margin-top: 10px; max-width: none; font-size: 14px; }
  .pristup-right { padding-top: 50px; display: flex; flex-direction: column; }
  .pristup-lead { order: 1; font-size: 17px; }
  .pristup-right .btn { order: 2; margin-top: 26px; align-self: flex-start; }
  .counters { order: 3; grid-template-columns: 220px auto; margin-top: 46px; }
  .count { font-size: 83px; }
  .count-label { margin-top: 8px; font-size: 16px; max-width: none; }

  /* ── 04 · Služby ── */
  .sluzby { padding: 110px 0 90px; }
  .h-lg { font-size: 48px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; margin-top: 86px; }
  .tile { min-height: 0; padding: 28px; }
  .tile-num { font-size: 52px; }
  .tile-title { margin-top: 14px; max-width: none; font-size: clamp(22px, 3.6vw, 28px); }
  .tile-text { margin-top: 14px; max-width: none; font-size: 16px; }
  .tile-foot { margin-top: auto; padding-top: 34px; }
  .tile-foot::before { width: 100%; }
  .tile-time { margin-top: 16px; font-size: 15px; }

  /* ── 05 · Výzva ── */
  .vyzva { position: relative; min-height: 560px; padding: 120px 0 128px; overflow: clip; }
  .vyzva .wrap { display: block; }
  .vyzva-title { font-size: 52px; }
  .vyzva-sub { margin-top: 68px; max-width: 496px; font-size: 26px; }
  .vyzva .btn { margin-top: 56px; }
  .vyzva-perla {
    display: block;
    position: absolute;
    left: 332px; top: -40px;
    width: 560px; height: 427px;
    margin: 0;
    aspect-ratio: auto;
    transform: rotate(172.8deg) scaleY(-1);
  }

  /* ── 06 · Reference ── */
  .reference { padding: 110px 0 40px; }
  .refs-wrap { margin-top: 86px; }
  .refs { gap: 24px; }
  .refs > .ref, .refs > .ref:nth-child(-n+2) { flex: 0 0 calc((100% - 24px) / 2); min-height: 430px; padding: 28px; gap: 16px; }
  .ref-quote { font-size: 19px; line-height: 1.4; }
  .ref-foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 18px; }
  .refs-nav { margin-top: 26px; gap: 12px; }
  .refs-btn { width: 54px; height: 54px; font-size: 22px; }
  .kicker-logos { margin-top: 72px; }
  .marquee-more { --marquee-gap: 44px; --marquee-time: 34s; height: 52px; margin-top: 28px; }

  /* ── 07 · Proč já ── */
  .proc { position: relative; display: block; min-height: 1360px; padding: 90px 0 0; }
  .proc-title { font-size: 36px; }
  .proc-grid { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  .reasons li { padding: 26px 0; gap: 26px; }
  .reasons .num { font-size: 44px; min-width: 68px; }
  .reasons h3 { font-size: 20px; }
  .reasons p { font-size: 17px; }
  .proc-art { position: absolute; inset: 0; height: auto; margin: 0; }
  .proc-krab {
    left: -61px; top: 1018px;
    width: 455px; height: 455px;
    aspect-ratio: auto;
    transform: rotate(114.3deg);
  }
  .proc-bar { left: 0; top: 1300px; bottom: auto; width: 430px; height: 35px; }

  /* ── 08 · Závěr ── */
  .zaver { position: relative; min-height: 715px; padding: 110px 0 0; }
  .zaver .wrap { display: block; }
  .zaver-title { font-size: 35px; }
  .z-blue { margin-top: 40px; font-size: 45px; }
  .zaver-text { margin-top: 92px; max-width: 300px; font-size: 17px; }
  .zaver .btn { margin-top: 59px; }
  .zaver-contact { margin-top: 60px; font-size: 15px; }
  .zaver-klepeto {
    position: absolute;
    left: 388px; top: 134px;
    width: 444px; height: 595px;
    margin: 0;
    aspect-ratio: auto;
    transform: rotate(14deg);
  }

  /* ── 09 · Patička ── */
  .foot { padding: 80px 0 60px; }
  .foot-top { flex-direction: row; align-items: flex-start; }
  .foot-name { font-size: 44px; }
  .foot-role { font-size: 14px; }
  .foot-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 16px 36px; margin-top: 10px; }
  .foot-nav a { white-space: nowrap; }
  .foot-bottom { flex-direction: row; margin-top: 72px; padding-top: 30px; }
}

/* =========================================================
   TABLET 641–1023 px — podstránky podle rámů „· 768“ ve Figmě
   ========================================================= */
@media (min-width: 641px) and (max-width: 1023px) {
  /* ── Hlavička ── */
  .sub-hdr .hdr { top: 48px; }
  .sub-hdr .hdr-rule { top: 146px; left: -5px; width: 510px; }

  /* ── 01 · Úvod ── */
  .s-hero { padding-top: 98px; min-height: 923px; }
  .p-kreativni .s-hero { min-height: 994px; }
  .p-konzultace .s-hero { min-height: 909px; }
  .s-title { margin-top: 31.9px; }
  .s-lead { margin-top: 54px; width: 408px; max-width: 408px; }
  .s-hero-krab {
    /* obrys 1007×1015 při natočení 37,3° → 700×742, střed 625,5/696,5 */
    position: absolute;
    order: 0;
    left: 275.5px; top: 325.5px; right: auto; bottom: auto;
    width: 700px; height: 742px;
    margin: 0;
    transform: rotate(-37.3deg);
  }
  .s-hero-pruh,
  .p-identita .s-hero-pruh,
  .p-kreativni .s-hero-pruh,
  .p-konzultace .s-hero-pruh { left: 161px; top: 735px; bottom: auto; width: 665px; height: 30px; }

  /* stejné usazení kraba i na stránkách s vlastním pravidlem */
  .p-identita .s-hero-krab,
  .p-kreativni .s-hero-krab,
  .p-konzultace .s-hero-krab {
    position: absolute;
    left: 275.5px; top: 325.5px; right: auto; bottom: auto;
    width: 700px; height: 742px;
    margin: 0;
    transform: rotate(-37.3deg);
  }
  .s-hero-right .s-lead { align-self: flex-start; width: 408px; margin-top: 54px; }

  /* ── Kontakt ── */
  .k-main { padding-top: 98px; }
  /* krab patří nad růžový papír formuláře, jinak ho panel schová */
  .k-krab { z-index: 3; }
  .k-title { margin-top: 31.9px; }
  .k-krab {
    /* obrys 508×508 při natočení 48,9° → hrana 360, střed 638/1177 */
    left: 458px; top: 997px;
    width: 360px; height: 360px;
    transform: rotate(-48.9deg);
  }
}