/* ==========================================================================
   VZHLED WEBU
   Texty se tady NEUPRAVUJÍ — ty jsou všechny v souboru content.js.
   ========================================================================== */

:root {
  --cerna: #000000;
  --bila:  #ffffff;

  /* Hlavní akcent — červená. */
  --cervena: #E10600;
  --cervena-tmava: #B00500;

  /* Sekundární detail — modrá. Používá se jen na hover odkazů v patičce. */
  --modra: #2547FF;

  --wrap: 1180px;
  --pad-x: clamp(24px, 6vw, 80px);

  /* --- Barvy podle pozadí sekce -----------------------------------------
     Sekce se na webu střídají černá / bílá. Aby se nemusela každá barva
     psát dvakrát, mají sekce tyhle čtyři proměnné a všechno uvnitř je
     používá. Bílá sekce (.section--light) je jen přepíše.
       --fg    hlavní text a nadpisy
       --soft  delší odstavce (o něco tlumenější)
       --muted popisky, poznámky, čísla kroků
       --line  linky a rámečky
     --------------------------------------------------------------------- */
  --bg: var(--cerna);
  --fg: var(--bila);
  --soft: #D4D4D4;
  --muted: #8A8A8A;
  --line: #262626;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Tlačítka v heru sjíždějí na sekce plynule, ne skokem. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cerna);
  color: var(--bila);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Pozor: overflow-x: hidden tady NESMÍ být — udělal by z body scrollovací
     kontejner a rozbil kotvy z hero tlačítek. clip jen ořízne přetečení. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Kvůli české diakritice (háčky, čárky) nesmí být řádkování moc těsné. */
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* --- Opakující se prvky ------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cervena);
  margin-bottom: clamp(28px, 6vw, 48px);
}

.h2 {
  font-size: clamp(38px, 9vw, 76px);
  max-width: 16ch;
  color: var(--fg);
}

.lede {
  font-size: clamp(18px, 4.4vw, 22px);
  line-height: 1.45;
  color: var(--soft);
  /* Míra je širší kvůli sekcím s delším textem o víc odstavcích.
     Krátkým úvodům to nevadí, ty se stejně zalomí dřív. */
  max-width: 46ch;
  margin-top: clamp(24px, 5vw, 32px);
}

/* Prázdný řádek v content.js = nový odstavec. */
.lede > p + p { margin-top: 1.1em; }

/* Text zapsaný v content.js jako **tučně**. Zvýrazněné je i barvou —
   na šedém odstavci by samotná tloušťka nebyla dost vidět. */
.lede strong {
  font-weight: 700;
  color: var(--fg);
}

.section__note {
  margin-top: clamp(40px, 8vw, 56px);
  font-size: 14px;
  color: var(--muted);
}

/* Červené tlačítko — vede na Calendly. Vypadá stejně na černé i bílé. */
.btn {
  display: inline-block;
  background: var(--cervena);
  color: var(--bila);
  text-decoration: none;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 18px);
  letter-spacing: -0.01em;
  padding: 22px 40px;
  border: 0;
  transition: background 140ms linear, transform 140ms ease;
}
.btn:hover  { background: var(--cervena-tmava); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.btn__note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 18px;
  max-width: 40ch;
}

/* Dvě cesty v heru — rovnocenná tlačítka vedle sebe.
   Bílá schválně: červenou si šetříme na Calendly, tohle je jen rozcestí. */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 640px;
}

.path {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--bila);
  color: var(--cerna);
  text-decoration: none;
  padding: 20px 18px 18px;
  transition: background 140ms linear, color 140ms linear, transform 140ms ease;
}
.path:hover  { background: var(--cervena); color: var(--bila); }
.path:active { transform: translateY(1px); }
.path:focus-visible { outline: 2px solid var(--bila); outline-offset: 3px; }

/* Malá šipka vpravo dole — vyjede zpod okraje při najetí myší. */
.path__sipka {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.path:hover .path__sipka,
.path:focus-visible .path__sipka { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .path__sipka { transition: none; }
}

.path__main {
  display: block;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4.2vw, 20px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.path__sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: #6B6B6B;
  line-height: 1.3;
}
.path:hover .path__sub { color: rgba(255, 255, 255, 0.85); }

/* --- 1. HERO ------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(80px, 14vh, 140px);
  padding-bottom: clamp(56px, 10vh, 96px);
  position: relative;
}

.hero__inner { width: 100%; max-width: var(--wrap); position: relative; z-index: 1; }
.hero__rule { z-index: 1; }

/* --- Fotka na pozadí úvodní obrazovky -----------------------------------
   Zapíná se přes hero.pozadiFotka v content.js (app.js přidá třídu
   .hero--pozadi a nastaví proměnnou --hero-foto s cestou k fotce).
   Bez fotky se celý blok .hero__media z HTML odstraní → čistě černé hero.

   Tři vrstvy (odspodu nahoru):
     .hero__media-blur   rozmazaná zvětšená kopie fotky — vyplní celou plochu
     .hero__media-photo  ostrá postava (na počítači vpravo, na mobilu celá)
     .hero__media-scrim  ztmavení pod textem (na počítači zleva, na mobilu shora) */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--cerna); /* podklad, než se fotka načte */
}

.hero__media-blur,
.hero__media-photo,
.hero__media-scrim {
  position: absolute;
  inset: 0;
}

/* Rozmazaná výplň celé plochy. Přesah a zvětšení schová okraje rozmazání. */
.hero__media-blur {
  inset: -8%;
  background: var(--hero-foto) center / cover no-repeat;
  filter: blur(42px) brightness(0.58) saturate(0.9);
  transform: scale(1.2);
}

/* --- MOBIL (výchozí): fotka přes celou plochu, ztmavená, text přes ni. --- */
.hero__media-photo {
  background: var(--hero-foto) center 18% / cover no-repeat;
}
.hero--pozadi .hero__media-blur { display: none; } /* na mobilu ji fotka celá překryje */

.hero__media-scrim {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0.80) 100%
  );
}

/* --- POČÍTAČ: postava vpravo, rozmazané pozadí vlevo, ztmavení pod textem.
   Práh je až 1000 px — na užších laptopech/tabletech by na text vedle
   postavy nezbylo místo, tam se použije celoplošná (mobilní) varianta. */
@media (min-width: 1000px) {
  .hero--pozadi .hero__media-blur { display: block; }

  .hero--pozadi .hero__media-photo {
    left: auto;
    right: -3%;
    width: 60%;
    background-position: right 50%;
    /* Obličej o něco světlejší (přechod vlevo tím není dotčený). */
    filter: brightness(1.12);
    /* Levý okraj ostré fotky měkce přechází do rozmazaného pozadí. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  }

  .hero--pozadi .hero__media-scrim {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.90) 38%,
      rgba(0, 0, 0, 0.60) 54%,
      rgba(0, 0, 0, 0.22) 66%,
      rgba(0, 0, 0, 0) 78%
    );
  }

  /* Text drží v levé části, ať nezasahuje do postavy vpravo. */
  .hero--pozadi .hero__inner > * { max-width: min(50vw, 600px); }
}

/* Mezera za ř ve dvojici „ři" — jinak háček naráží do tečky nad i.
   Hodnota je rozdíl proti okolnímu letter-spacing (to je záporné). */
.hero__name .kern-ri { letter-spacing: -0.005em; }

.hero__name {
  font-size: clamp(52px, 14vw, 140px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  white-space: pre-line; /* zlom řádku podle content.js */
}

.hero__claim {
  font-size: clamp(19px, 4.8vw, 26px);
  line-height: 1.4;
  color: var(--soft);
  /* Míra je široká schválně: obě věty claimu mají skoro stejnou délku
     a na počítači mají stát pod sebou jako dvojverší, ne se lámat. */
  max-width: 54ch;
  margin-top: clamp(28px, 6vw, 44px);
  font-style: italic;
  letter-spacing: -0.01em;
  /* Zalomení řádku napsané v content.js se respektuje. */
  white-space: pre-line;
  /* Na úzkém displeji zabrání osamocenému slovu na posledním řádku. */
  text-wrap: pretty;
}

.hero__cta { margin-top: clamp(44px, 9vw, 64px); }

.hero__rule {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

/* --- Sekce a střídání černá / bílá --------------------------------------- */

.section {
  background: var(--bg);
  color: var(--fg);
  padding-top: clamp(96px, 18vw, 200px);
  padding-bottom: clamp(96px, 18vw, 200px);
  /* Po kliknutí na kotvu se sekce zarovná k hornímu okraji s malou
     rezervou — kdyby někdy přibyla lepící navigace, nepřekryje ji. */
  scroll-margin-top: 24px;
}

/* Bílá sekce — přepíše barvy, o zbytek se postarají proměnné. */
.section--light {
  --bg: var(--bila);
  --fg: var(--cerna);
  --soft: #3A3A3A;
  --muted: #6B6B6B;
  --line: #E2E2E2;
}

/* Sekce „Na čem stojím" a pás společností jsou obě bílé a sousedí spolu.
   Bez linky by splynuly v jeden blok — tahle je odděluje. */
.section--light + .section--light { border-top: 1px solid var(--line); }

/* --- Sekce „Na čem stojím" ---------------------------------------------- */

.onas__nadpis { max-width: 20ch; }

.onas__foto { margin-top: clamp(28px, 5vw, 40px); }
.onas__foto img {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.03);
  transition: filter 400ms ease;
}
.onas__foto img:hover { filter: grayscale(0%) contrast(1); }

/* Podpis / regulatorní pečeť pod textem — menší, oddělená linkou. */
.onas__podpis {
  margin-top: clamp(28px, 5vw, 36px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

@media (min-width: 900px) {
  /* Dvousloupcové jen když fotka opravdu existuje (jinak text přes celou šířku). */
  .onas--sfotkou .onas {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "stitek foto"
      "nadpis foto"
      "text   foto";
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  .onas--sfotkou .onas > .eyebrow      { grid-area: stitek; }
  .onas--sfotkou .onas > .onas__nadpis { grid-area: nadpis; }
  .onas--sfotkou .onas > .onas__foto   { grid-area: foto; margin-top: 0; }
  .onas--sfotkou .onas > .onas__text   { grid-area: text; }
  .onas--sfotkou .onas__foto img       { max-width: 100%; }
}

/* Mezi dvěma černými sekcemi (a mezi poslední sekcí a patičkou)
   je potřeba linka, jinak by splynuly. Mezi černou a bílou ne. */
.section + .section:not(.section--light) { border-top: 1px solid var(--line); }

/* --- CTA na konci sekcí Optimalizace / Od nuly --------------------------- */

.section__cta { margin-top: clamp(40px, 8vw, 56px); }

/* --- Případy z praxe ----------------------------------------------------- */

/* Druhý případ v sekci — odsazený, ať je jasné, že jde o samostatný příběh. */
.case + .case { margin-top: clamp(64px, 12vw, 110px); }

.case__who {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.case__summary {
  font-size: clamp(26px, 6.4vw, 42px);
  letter-spacing: -0.04em;
  max-width: 20ch;
  margin-top: clamp(28px, 5vw, 40px);
  color: var(--fg);
}

.case__grid {
  margin-top: clamp(36px, 7vw, 56px);
  display: grid;
  gap: clamp(28px, 6vw, 40px);
}

.case__label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.case__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft);
  max-width: 40ch;
}

@media (min-width: 800px) {
  .case__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* --- Proces -------------------------------------------------------------- */

.steps {
  margin-top: clamp(56px, 11vw, 96px);
  border-top: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(28px, 6vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}

.step__num {
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cervena);
}

.step__title {
  font-size: clamp(24px, 6vw, 34px);
  letter-spacing: -0.035em;
  color: var(--fg);
}

.step__text {
  color: var(--muted);
  max-width: 46ch;
  font-size: 16px;
}

@media (min-width: 800px) {
  .step {
    grid-template-columns: 90px 1fr 1fr;
    gap: 0 40px;
    align-items: start;
  }
  .step__num { padding-top: 10px; }
  .step__text { padding-top: 6px; }
}

.scope { margin-top: clamp(64px, 12vw, 110px); }

.scope__title {
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.scope__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.scope__list li {
  border: 1px solid var(--line);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* --- Filtr (na webu nejdřív NE, pak ANO) --------------------------------- */

.filter {
  margin-top: clamp(56px, 11vw, 96px);
  display: grid;
  gap: clamp(48px, 9vw, 0px);
}

@media (min-width: 800px) {
  .filter { grid-template-columns: 1fr 1fr; gap: 0; }
  /* NE je vlevo, ANO vpravo — dělicí linka patří mezi ně. */
  .filter__col--no  { padding-right: 56px; }
  .filter__col--yes { padding-left: 56px; border-left: 1px solid var(--line); }
}

.filter__head {
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: -0.04em;
  padding-bottom: 20px;
  border-bottom: 2px solid currentColor;
  margin-bottom: 28px;
}
.filter__list li {
  font-size: clamp(16px, 4.2vw, 18px);
  line-height: 1.4;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  max-width: 34ch;
}

/* Celý sloupec NE je červený, celý sloupec ANO bílý.
   Podtržení nadpisu jede podle currentColor, takže se obarví samo. */
.filter__col--no  .filter__head,
.filter__col--no  .filter__list li { color: var(--cervena); }

.filter__col--yes .filter__head,
.filter__col--yes .filter__list li { color: var(--fg); }

/* --- Pás společností ----------------------------------------------------- */

.section--marquee {
  /* Pás jde přes celou šířku, proto sekce nemá boční odsazení
     — to si drží jen štítek nad ním ve vlastním .wrap. */
  padding-bottom: clamp(72px, 13vw, 140px);
}

.marquee {
  overflow: hidden;
  /* Okraje pásu se vytrácejí do pozadí, ať text nekončí useknutý. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  /* Loga a názvy se srovnají na společnou osu, i když se v pásu míchají. */
  align-items: center;
  width: max-content;
  /* Dobu běhu dopočítá app.js podle délky pásu, ať je rychlost
     stejná při šesti i třiceti společnostech. */
  animation: pas 40s linear infinite;
}
/* Spustí se, až app.js pás poskládá — jinak by cukl. */
.marquee:not(.is-ready) .marquee__track { animation: none; }

/* Interakce: najetím myší se pás zastaví, ať se dá název přečíst. */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Logo v pásu. Výška je pevná, šířka se dopočítá — loga tak drží
   jednu optickou linku, i když má každé jiný poměr stran. */
.marquee__logo {
  display: block;
  height: clamp(28px, 5vw, 44px);
  width: auto;
  object-fit: contain;
}

.marquee__item {
  flex: none;
  padding: 0 clamp(20px, 4vw, 44px);
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 4.6vw, 34px);
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--fg);
}

@keyframes pas {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Závěrečné CTA ------------------------------------------------------- */

.h1-close {
  font-size: clamp(42px, 11vw, 96px);
  max-width: 14ch;
  color: var(--fg);
}

.section--close .btn { margin-top: clamp(40px, 8vw, 56px); }

/* --- Patička ------------------------------------------------------------- */

.footer {
  background: var(--cerna);
  color: var(--bila);
  border-top: 1px solid #262626;
  padding-top: clamp(48px, 9vw, 64px);
  padding-bottom: clamp(48px, 9vw, 64px);
}

.footer__ig {
  display: inline-block;
  color: var(--bila);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #262626;
  padding-bottom: 3px;
  transition: color 140ms linear, border-color 140ms linear;
}
.footer__ig:hover { color: var(--modra); border-color: var(--modra); }

.footer__legal {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.7;
  color: #5A5A5A;
  max-width: 60ch;
}

.footer__copy {
  margin-top: 24px;
  font-size: 12px;
  color: #5A5A5A;
}

/* --- Nájezd sekcí při scrollu -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* Pás se zastaví — pohyb může vadit citlivým uživatelům. */
  .marquee__track { animation: none !important; }
}

/* --- Cookie lišta -------------------------------------------------------- */

.footer__cookies {
  display: inline-block;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: #5A5A5A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__cookies:hover { color: var(--modra); }

.cc {
  position: fixed;
  left: clamp(16px, 4vw, 28px);
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 200;
  background: var(--cerna);
  border: 1px solid #2A2A2A;
  /* Startuje skrytá pod okrajem a najede nahoru. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.cc.je-videt { opacity: 1; transform: none; pointer-events: auto; }

.cc__vnitrek {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 24px) clamp(18px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc__text {
  font-size: 14px;
  line-height: 1.5;
  color: #D4D4D4;
  max-width: 70ch;
}
.cc__odkaz {
  color: var(--bila);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc__odkaz:hover { color: var(--modra); }

.cc__akce {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cc__btn {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms linear, color 140ms linear, border-color 140ms linear;
}
.cc__btn--ano {
  background: var(--cervena);
  color: var(--bila);
}
.cc__btn--ano:hover { background: var(--cervena-tmava); }
.cc__btn--ne {
  background: transparent;
  color: var(--bila);
  border-color: #3A3A3A;
}
.cc__btn--ne:hover { border-color: var(--bila); }
.cc__btn:focus-visible { outline: 2px solid var(--bila); outline-offset: 3px; }

/* Na širším displeji text a tlačítka vedle sebe. */
@media (min-width: 720px) {
  .cc__vnitrek {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
}

/* --- Děkovací stránka (/dekujeme) --------------------------------------- */

.dekuji {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(80px, 14vh, 140px);
  padding-bottom: clamp(56px, 10vh, 96px);
}

.dekuji__inner { width: 100%; max-width: var(--wrap); }

.dekuji__nadpis {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.0;
  font-size: clamp(44px, 11vw, 96px);
  max-width: 14ch;
  color: var(--fg);
}

.dekuji__text {
  font-size: clamp(18px, 4.4vw, 22px);
  line-height: 1.45;
  color: var(--soft);
  max-width: 40ch;
  margin-top: clamp(24px, 5vw, 32px);
}

.dekuji .btn { margin-top: clamp(36px, 7vw, 48px); }