/* ==========================================================================
   SECTIONS — styly po sekcích, v pořadí shora dolů podle návrhu.

   Layout je tokový (flex/grid), ne absolutní. Sekce si výšku určují podle
   obsahu, takže nic nepřetéká ven ze sekce, i když se text zalomí jinak než
   v návrhu (typicky při fallback fontu nebo v jiném jazyce). Rozměry z Figmy
   se pořád píšou jako calc(<číslo z návrhu> * var(--s)), ale slouží jako
   výchozí hodnoty, které se na užším okně přizpůsobí.

   Breakpointy (na konci souboru, za sekcemi 7 a 8, v pořadí v jakém jsou psané):
     nad 1280 px       desktop, proporčně podle návrhu (--s)
     do  1100 px       užší desktop / tablet na šířku — mřížky se zužují
     do   900 px       hero i karty pod sebe, typografie řízená svh
     640–900 px        tablet na výšku — sloupec 660 px místo mobilních 520
     do   560 px       mobil — plné šířky, menší rozestupy
     pointer: coarse   dotykové cíle 44 px (nezávisle na šířce okna)
     landscape ≤560 v  telefon na šířku — vlastní kompaktní řádkový hero

   Pravidlo, které drží celý landing na jedné obrazovce: svislé míry hero se
   počítají z svh, ne z vw. Šířka okna říká, jak velký může být text; výška
   okna říká, kolik ho tam vejde. Grafika orka je jediný prvek, který ustupuje.
   ========================================================================== */


/* ==========================================================================
   0. HEADER — v návrhu absolutně překrývá hero (Y 51)
   ========================================================================== */

.site-header {
  position: absolute;
  top: calc(51 * var(--s));
  right: 0;
  left: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--s));
}

.site-header__logo img {
  width: calc(153 * var(--s));
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(55 * var(--s));
  font-family: var(--font-ui);
  font-size: calc(var(--fs-cta) * var(--s));
  color: var(--color-yellow);
}

/* Hover stav není v návrhu — decentní vlastní varianta. */
.site-nav a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   1. HERO — landing přes celé okno

   Hero musí vždy vyplnit šířku i výšku okna, takže rozměry z návrhu slouží jen
   jako výchozí velikosti prvků. Krémová sekce pod ním do hero vystupuje
   o --hero-overlap, proto je hero o tolik vyšší než 100svh — tmavá plocha pak
   sedí přesně na jednu obrazovku.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  width: 100%;
  min-height: calc(100vh + var(--hero-overlap));   /* fallback bez svh */
  min-height: calc(100svh + var(--hero-overlap));
  padding-top: calc(140 * var(--s-hero));          /* prostor pod hlavičkou */
  padding-bottom: calc(var(--hero-overlap) + 56 * var(--s-hero));
  background-color: var(--color-ink);
}

/* flex: none — jinak by flex-grow přebil šířku z .container a rozházel
   boční okraje; na svislé ose se stage roztáhne sama (align-items: stretch). */
.hero__stage {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(48 * var(--s-hero));
}

.hero__main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--s-hero));
  min-height: 0;
}

.hero__copy {
  flex: 0 1 auto;
  max-width: calc(600 * var(--s-hero));
}

.hero__eyebrow {
  margin-bottom: calc(9 * var(--s-hero));
  font-size: calc(var(--fs-eyebrow) * var(--s-hero));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-white);
  text-transform: capitalize;
}

.hero__title {
  font-size: calc(var(--fs-h1) * var(--s-hero));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--color-yellow);
}

.hero__subtitle {
  margin-top: calc(32 * var(--s-hero));
  max-width: calc(486 * var(--s-hero));
  font-size: calc(var(--fs-body) * var(--s-hero));
  line-height: var(--lh-body);
  color: var(--color-hero-subtitle);
  text-wrap: pretty;
}

/* Grafika drží poměr stran z návrhu a shora je omezená výškou okna. */
.hero__visual {
  position: relative;
  flex: 0 1 auto;
  height: min(calc(552 * var(--s-hero)), 56vh);
  aspect-ratio: 537 / 552;
}

.hero__art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Šipky mají pozice i velikosti v procentech grafiky (přepočteno ze souřadnic
   v návrhu), takže s ní drží vzájemnou polohu při jakémkoli zvětšení. */
.hero__chevron {
  position: absolute;
}

.hero__chevron--left {
  top: 18.5%;
  left: -6.3%;
  width: 29.5%;
  height: 40.4%;
}

/* V návrhu otočená o 180°. */
.hero__chevron--right {
  top: 26.8%;
  left: 70.8%;
  width: 38%;
  height: 52%;
  transform: rotate(180deg);
}

/* --- Pruh partnerů + CTA ---
   Loga měla v návrhu nepravidelné absolutní pozice; tady jsou v jednom flexu,
   takže se pruh umí zúžit i zalomit, aniž by se loga překryla. */
.hero__footer {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(48 * var(--s-hero));
}

/* Pruh má dvě části: žlutý štítek přes celou levou stranu (align-items:
   stretch, takže sahá od horní k dolní hraně) a vedle něj mřížku log. Svislý
   padding je proto nula — kdyby tam byl, štítek by se od hran odlepil a byla
   by z něj plovoucí bublina. Odsazení shora a zdola si řeší mřížka sama.
   Platí to ve všech rozlišeních, mění se jen počet sloupců mřížky. */
.hero__partners {
  display: flex;
  flex: 0 1 calc(856 * var(--s-hero));
  align-items: stretch;
  gap: calc(24 * var(--s-hero));
  height: calc(70 * var(--s-hero));
  padding: 0 calc(42 * var(--s-hero)) 0 0;
  background-color: var(--color-partners-bar);
  border-radius: calc(var(--radius-pill) * var(--s));
  box-shadow: var(--shadow-partners);
}

.hero__partners-tab {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--s-hero));
  background-color: var(--color-yellow);
  border-radius: calc(var(--radius-pill) * var(--s));
  font-size: calc(var(--fs-cta) * var(--s-hero));
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

/* Sloupce v poměrech šířek log z návrhu (173 : 134 : 137 : 135) — při zúžení
   se tak všechna zmenšují stejným dílem a jejich vzájemné velikosti sedí. */
.hero__partners-logos {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: 173fr 134fr 137fr 135fr;
  align-items: stretch;
  justify-items: stretch;
  gap: calc(16 * var(--s-hero));
}

/* Odkaz na web partnera vyplní celou buňku mřížky a obrázek v něm vycentruje.
   Klikací plocha je tím pádem vždycky celá buňka — sousední odkazy na sebe
   navazují a nikde se nepřekrývají. (Dřív měl odkaz velikost loga a plochu si
   zvětšoval překryvem přes ::after; v mřížce 2×2 ale byla rozteč řádků jen
   30 px, takže 44px překryvy zasahovaly jeden do druhého a spodních pět pixelů
   loga Bohemia Interactive otevíralo BRUTE.)

   Rozměry loga nesou proměnné --logo-w a --logo-r, takže breakpointy přenastavují
   jedinou hodnotu a nemusí sahat na strukturu. */
.hero__partner-logo {
  --logo-w: 100px;
  --logo-r: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}

.hero__partner-logo > img,
.hero__partner-logo__crop {
  width: 100%;
  max-width: var(--logo-w);
  height: auto;
  aspect-ratio: var(--logo-r);
  object-fit: contain;
}

/* Loga jsou v návrhu ztlumená; po najetí se rozsvítí na plnou sytost, aby
   bylo poznat, že jsou klikací. Hover stav v návrhu není. */
.hero__partner-logo:hover,
.hero__partner-logo:focus-visible {
  opacity: 1;
}

/* Šířku dává buňka mřížky, strop je rozměr z návrhu. Výšku dopočítá
   aspect-ratio, takže se logo při zúžení zmenší, ale nezdeformuje. */
.hero__partner-logo--1 { --logo-w: calc(173 * var(--s-hero)); --logo-r: 173 / 37; }
.hero__partner-logo--2 { --logo-w: calc(134 * var(--s-hero)); --logo-r: 134 / 28; }
.hero__partner-logo--3 { --logo-w: calc(137 * var(--s-hero)); --logo-r: 137 / 29; }
.hero__partner-logo--4 { --logo-w: calc(135 * var(--s-hero)); --logo-r: 135 / 28; }

/* Ořez sedí na vnitřním obalu, ne na odkazu — odkaz je klikací buňka a
   overflow: hidden by z ní ukrojil. */
.hero__partner-logo__crop {
  position: relative;
  overflow: hidden;
}

.hero__partner-logo--4 img {
  position: absolute;
  top: 25%;
  left: 3.33%;
  width: 93.33%;
  height: 50%;
}

.hero__cta {
  flex: none;
  width: calc(247 * var(--s-hero));
  height: calc(72 * var(--s-hero));
  font-size: calc(var(--fs-cta) * var(--s-hero));
  font-weight: var(--fw-bold);
}


/* ==========================================================================
   2. „Chceš začít kariéru…“
   Krémová plocha vystupuje do tmavého hero a má zaoblený pravý horní roh
   (levý padá v návrhu mimo plátno).
   ========================================================================== */

.intro {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--hero-overlap));
  background-color: var(--color-cream);
  border-radius: 0 calc(var(--radius-section-top) * var(--s)) 0 0;
}

.intro__stage {
  padding-block: calc(70 * var(--s)) calc(132 * var(--s));
}

.intro__title,
.plan__title,
.signup__title,
.testimonials__title,
.faq__title {
  font-size: calc(var(--fs-h2) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  text-wrap: balance;
}

.intro__title {
  color: var(--color-heading);
}

.intro__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(19 * var(--s));
  align-items: stretch;
  margin-top: calc(120 * var(--s));
}

/* --- Karty ---
   Obsah je vycentrovaný flexem, ne absolutními odstupy z návrhu — text tak
   sedí uprostřed dlaždice i když se zalomí na jiný počet řádků. */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--s));
  min-height: calc(350 * var(--s));
  padding: calc(36 * var(--s)) calc(34 * var(--s));
  border-radius: calc(var(--radius-card) * var(--s));
  text-align: center;
}

.card--video {
  background-color: var(--color-yellow);
}

/* Prostřední karta je v návrhu posunutá výš. */
.card--white {
  margin-top: calc(-40 * var(--s));
  background-color: var(--color-white);
}

.card--plum {
  background-color: var(--color-card-plum);
}

.card__title {
  font-size: calc(var(--fs-card-title-lg) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.card--video .card__title,
.card--white .card__title {
  color: var(--color-heading);
}

.card--plum .card__title {
  color: var(--color-white);
}

.card__body {
  max-width: calc(300 * var(--s));
  font-size: calc(var(--fs-body) * var(--s));
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.card--white .card__body {
  color: var(--color-black);
}

.card--plum .card__body {
  color: var(--color-white);
}

.card__cta {
  width: calc(89 * var(--s));
  height: calc(38 * var(--s));
  font-size: calc(var(--fs-cta-sm) * var(--s));
}

/* --- Video --- */
.video {
  position: relative;
  width: 100%;
  max-width: calc(300 * var(--s));
  aspect-ratio: 300 / 169;
  overflow: hidden;
  background-color: var(--color-video-placeholder);
  border-radius: calc(var(--radius-pill) * var(--s));
}

.video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay s ikonou přehrání z návrhu; JS ho po spuštění skryje.
   Je jen poloprůhledný, aby pod ním byl vidět náhled prvního snímku. */
.video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--color-video-scrim);
  transition: background-color var(--transition-fast);
}

/* Pravidlo výš nastavuje display:flex, které by přebilo UA styl atributu
   hidden — bez tohoto řádku overlay nikdy nezmizí a video jen hraje pod ním. */
.video__overlay[hidden] {
  display: none;
}

.video__overlay:hover {
  background-color: transparent;
}

.video__overlay img {
  width: calc(57 * var(--s));
  height: calc(57 * var(--s));
  transition: transform var(--transition-fast);
}

.video__overlay:hover img {
  transform: scale(1.08);
}

/* --- Vlastní ovládání videa ---
   Lišta je vidět, když je o ni zájem: při hoveru, při fokusu uvnitř, nebo když
   video stojí — což platí i před prvním spuštěním, takže je fullscreen po ruce
   rovnou. Na celé obrazovce ji nahradí nativní controls, aby nesvítilo obojí. */
.video__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: calc(10 * var(--s));
  background-image: linear-gradient(to top, rgba(20, 22, 25, 0.72), transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Drží fullscreen u pravého okraje i ve chvíli, kdy play/pause není v toku. */
.video__btn--fullscreen {
  margin-left: auto;
}

/* Před prvním spuštěním nese roli play velké tlačítko v overlayi — malé by
   vedle něj bylo jen zdvojené. Fullscreen dává smysl hned. */
.video:not(.is-started) .video__btn--toggle {
  display: none;
}

.video:hover .video__controls,
.video:focus-within .video__controls,
.video.is-paused .video__controls {
  opacity: 1;
}

.video.is-fullscreen .video__controls,
.video.is-fullscreen .video__overlay {
  display: none;
}

.video__btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  padding: 0;
  background-color: rgba(20, 22, 25, 0.55);
  border-radius: 50%;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.video__btn:hover {
  background-color: rgba(20, 22, 25, 0.85);
  transform: scale(1.08);
}

.video__icon {
  width: calc(18 * var(--s));
  height: calc(18 * var(--s));
}

/* Ikony se přepínají atributem hidden — bez tohoto řádku by je přebil
   display:block z resetu v base.css a svítily by obě naráz. */
.video__icon[hidden] {
  display: none;
}

/* Na celé obrazovce kontejner vyplní celý viewport: pryč s poměrem stran
   z karty i se zaoblením, a contain místo cover, ať se video neořízne. */
.video.is-fullscreen {
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background-color: var(--color-black);
  border-radius: 0;
}

.video.is-fullscreen .video__player {
  object-fit: contain;
}

/* Na dotykových zařízeních hover nikdy nenastane — lišta by šla vyvolat jen
   pauzou, takže tam zůstává vidět natrvalo. */
@media (hover: none) {
  .video__controls {
    opacity: 1;
  }
}


/* ==========================================================================
   3. „Tvůj plán hry“
   ========================================================================== */

.plan {
  position: relative;
  background-color: var(--color-cream);
}

.plan__stage {
  padding-block: calc(60 * var(--s)) calc(99 * var(--s));
}

.plan__title {
  color: var(--color-heading);
}

/* Obal drží šipky mezi dlaždicemi — jsou pozicované vůči mřížce, ne vůči sekci. */
.plan__grid {
  --plan-gap: calc(18 * var(--s));
  position: relative;
  margin-top: calc(84 * var(--s));
}

.plan__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--plan-gap);
  align-items: stretch;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--s));
  min-height: calc(255 * var(--s));
  padding: calc(36 * var(--s)) calc(30 * var(--s));
  background-color: var(--color-white);
  border-radius: calc(var(--radius-card) * var(--s));
  text-align: center;
}

/* Prostřední krok je v návrhu o kus výš. */
.step:nth-child(2) {
  margin-top: calc(-24 * var(--s));
}

.step__number {
  font-family: var(--font-ui);
  font-size: calc(var(--fs-step-number) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}

.step__title {
  font-size: calc(var(--fs-card-title-sm) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-black);
  text-wrap: balance;
}

.step__body {
  max-width: calc(300 * var(--s));
  font-size: calc(var(--fs-body) * var(--s));
  line-height: var(--lh-body);
  color: var(--color-black);
  text-wrap: pretty;
}

.step__cta {
  width: calc(89 * var(--s));
  height: calc(38 * var(--s));
  margin-top: calc(6 * var(--s));
  font-size: calc(var(--fs-cta-sm) * var(--s));
}

/* Šipky sedí ve středu mezer mřížky: střed první mezery je v 1/3 šířky
   zmenšené o šestinu mezery, druhé symetricky. */
.plan__arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.plan__arrow--1 {
  left: calc(33.333% - var(--plan-gap) / 6);
  width: calc(44 * var(--s));
  height: calc(62 * var(--s));
}

.plan__arrow--2 {
  left: calc(66.667% + var(--plan-gap) / 6);
  width: calc(49 * var(--s));
  height: calc(69 * var(--s));
}


/* ==========================================================================
   4. FORMULÁŘ „Join the quest“ — validace a odeslání řeší initForm v main.js
   ========================================================================== */

.signup {
  position: relative;
  background-color: var(--color-ink);
}

.signup__stage {
  padding-block: calc(84 * var(--s)) calc(96 * var(--s));
}

.signup__title {
  color: var(--color-cream);
}

/* Výška a velikost písma pole žijí v proměnných, protože je na dvou místech
   přepisují breakpointy (56 px pod 900 px, 62 px na dotyku) a motivační dopis
   z nich dopočítává svůj padding — bez toho by mu na mobilu ujelo účaří
   proti sousedním <input>. */
.signup__form {
  --field-h: calc(var(--field-height) * var(--s));
  --field-fs: calc(var(--fs-body) * var(--s));

  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--s));
  margin-top: calc(74 * var(--s));
}

/* Poměry sloupců odpovídají šířkám polí z návrhu. */
.field-row--names {
  display: grid;
  grid-template-columns: 515fr 379fr 379fr;
  gap: calc(var(--gap-field) * var(--s));
}

.field-row--contact {
  display: grid;
  grid-template-columns: 604fr 628fr;
  gap: calc(36 * var(--s));
}

.field {
  position: relative;
  min-width: 0;
  margin: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: var(--field-h);
  padding-inline: calc(16 * var(--s));
  border: 0;
  border-radius: calc(var(--radius-field) * var(--s));
  background-color: var(--color-white);
  font-family: var(--font-form);
  font-size: var(--field-fs);
  letter-spacing: var(--ls-form);
  color: var(--color-placeholder);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

/* Focus stav není v návrhu — decentní vlastní varianta. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* --- Motivační dopis ----------------------------------------------------
   Ve sbaleném stavu musí být k nerozeznání od ostatních polí: stejná výška,
   a text na stejném účaří. <input> centruje obsah svisle sám, <textarea> ne,
   proto se padding dopočítává z výšky pole a výšky řádku.

   Rozbaluje se až po kliknutí (initAutoGrow v main.js) — pole zabírá ve
   formuláři tři řádky, kdyby bylo velké pořád, odsunulo by „Odeslat“
   na mobilu mimo obrazovku.
   ---------------------------------------------------------------------- */
.field textarea {
  display: block;
  padding-block: calc((var(--field-h) - var(--field-fs) * 1.4) / 2);
  line-height: 1.4;
  transition: height var(--transition-fast);
}

/* Nativní resize se vypíná až po nasazení JS. Bez JS zůstane pole
   jednořádkové, ale ručně roztažitelné — stejná úvaha jako u custom selectu.
   max-height je strop, do kterého JS dopisuje inline height; nad ním se místo
   dalšího růstu zapne scrollbar (data-scrolling). */
.field--letter[data-enhanced] textarea {
  resize: none;
  overflow-y: hidden;
  max-height: calc(var(--letter-max-height) * var(--s));
}

.field--letter[data-enhanced] textarea[data-scrolling] {
  overflow-y: auto;
}

/* Rozbalený stav. JS dopisuje inline height podle obsahu, min-height nad ním
   drží spodní mez — prázdné rozkliknuté pole tak nezůstane vysoké jeden řádek. */
.field--letter[data-open] textarea {
  min-height: calc(var(--letter-open-height) * var(--s));
}

.field--full {
  width: 100%;
}

.field--select select {
  appearance: none;
}

/* Nativní šipka se kreslí jen dokud JS nenasadí vlastní listbox. */
.field--select:not([data-enhanced])::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(40 * var(--s));
  width: calc(7 * var(--s));
  height: calc(9 * var(--s));
  background: url("../assets/icon-chevron-select.svg") no-repeat center / contain;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

/* Po nasazení vlastního UI zůstává nativní select v DOM kvůli hodnotě
   formuláře, ale nezobrazuje se. */
.field--select[data-enhanced] select {
  display: none;
}

/* --- Vlastní dropdown (staví JS z nativního <select>) ---
   Vizuálně navazuje na ostatní pole formuláře: stejná výška, radius, font
   i barva placeholderu; rozbalený panel používá žlutou brandovou barvu jako
   zvýraznění aktivní položky. */
.select {
  position: relative;
}

.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--s));
  width: 100%;
  height: var(--field-h);
  padding: 0 calc(24 * var(--s)) 0 calc(16 * var(--s));
  border-radius: calc(var(--radius-field) * var(--s));
  background-color: var(--color-white);
  font-family: var(--font-form);
  font-size: var(--field-fs);
  letter-spacing: var(--ls-form);
  color: var(--color-placeholder);
  text-align: left;
}

/* Po výběru je hodnota tmavší než placeholder. */
.select__button[data-filled] {
  color: var(--color-heading);
}

.select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stejná ikona jako u FAQ: zavřeno = dolů, otevřeno = nahoru. */
.select__chevron {
  flex: none;
  width: calc(7 * var(--s));
  height: calc(9 * var(--s));
  background: url("../assets/icon-chevron-select.svg") no-repeat center / contain;
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.select[data-open] .select__chevron {
  transform: rotate(270deg);
}

.select__list {
  position: absolute;
  top: calc(100% + 8 * var(--s));
  right: 0;
  left: 0;
  z-index: 20;
  max-height: calc(var(--dropdown-max-height) * var(--s));
  overflow-y: auto;
  padding: calc(8 * var(--s));
  background-color: var(--color-white);
  border-radius: calc(var(--radius-field) * var(--s));
  box-shadow: var(--shadow-dropdown);
}

.select__list[hidden] {
  display: none;
}

.select__option {
  padding: calc(14 * var(--s)) calc(16 * var(--s));
  border-radius: calc(var(--radius-option) * var(--s));
  font-family: var(--font-form);
  font-size: calc(var(--fs-body) * var(--s));
  letter-spacing: var(--ls-form);
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Jedno zvýraznění pro myš i klávesnici — data-active nastavuje JS. */
.select__option:hover,
.select__option[data-active] {
  background-color: var(--color-yellow);
  color: var(--color-navy);
}

.select__option[aria-selected="true"] {
  font-weight: var(--fw-bold);
}

/* --- Kalendář u data narození (staví JS, viz initDatepicker) ---
   Stejný jazyk jako vlastní dropdown: bílý panel se stínem, radius polí,
   Amalia a žlutá jako zvýraznění. Vybraný den je žlutá dlaždice s tmavě
   modrým číslem — stejně jako aktivní položka dropdownu a CTA tlačítka.

   Rozměry jsou v px, ne přes --s: panel se kreslí přes obsah, takže nemusí
   dýchat s layoutem, a na mobilu by se z --s scvrkl pod velikost prstu. */
.field--date[data-enhanced] input {
  padding-right: calc(16 * var(--s) + 44px);
}

.datepicker__toggle {
  position: absolute;
  top: 0;
  right: calc(8 * var(--s));
  display: grid;
  place-items: center;
  width: 44px;
  height: var(--field-h);
  color: var(--color-placeholder);
  transition: color var(--transition-fast);
}

.datepicker__toggle:hover,
.field--date[data-open] .datepicker__toggle {
  color: var(--color-navy);
}

.datepicker__toggle:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: -4px;
  border-radius: calc(var(--radius-option) * var(--s));
}

.datepicker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 328px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background-color: var(--color-white);
  border-radius: calc(var(--radius-field) * 1px);
  box-shadow: var(--shadow-dropdown);
  font-family: var(--font-form);
  letter-spacing: var(--ls-form);
  color: var(--color-heading);
}

.datepicker[hidden] {
  display: none;
}

/* Žlutý proužek nahoře — drobný „herní HUD“ akcent, který panel váže
   k brandu i bez dalších barev. */
.datepicker::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background-color: var(--color-yellow);
}

.datepicker__head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.datepicker__title {
  justify-self: center;
  padding: 8px 12px;
  border-radius: calc(var(--radius-option) * 1px);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  transition: background-color var(--transition-fast);
}

/* Nadpis je zároveň tlačítko do výběru roku — šipka to napovídá. */
.datepicker__title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 8px;
  margin-left: 8px;
  vertical-align: 1px;
  background: url("../assets/icon-chevron-select.svg") no-repeat center / contain;
  transform: rotate(90deg);
}

.datepicker[data-view="years"] .datepicker__title::after {
  transform: rotate(270deg);
}

.datepicker__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: calc(var(--radius-option) * 1px);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.datepicker__arrow::before {
  content: "";
  width: 8px;
  height: 11px;
  background: url("../assets/icon-chevron-select.svg") no-repeat center / contain;
}

.datepicker__arrow--prev::before {
  transform: rotate(180deg);
}

.datepicker__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Roky jsou jeden posuvný seznam — listovat šipkami tam není kam. */
.datepicker[data-view="years"] .datepicker__arrow {
  visibility: hidden;
}

.datepicker__title:hover,
.datepicker__arrow:not(:disabled):hover {
  background-color: var(--color-cream);
}

.datepicker__grid--days {
  display: grid;
  gap: 2px;
}

.datepicker__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.datepicker__weekday {
  padding-block: 6px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-placeholder);
}

.datepicker__cell {
  display: grid;
}

.datepicker__day,
.datepicker__pick {
  border-radius: calc(var(--radius-option) * 1px);
  font-size: 15px;
  color: var(--color-heading);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.datepicker__day {
  aspect-ratio: 1;
  min-height: 36px;
}

/* Dnešek jen tenkým žlutým rámečkem — u data narození to není cíl, jen
   orientační bod. */
.datepicker__day[data-today] {
  box-shadow: inset 0 0 0 2px var(--color-yellow);
}

.datepicker__day:not(:disabled):hover,
.datepicker__pick:not(:disabled):hover {
  background-color: var(--color-cream);
}

.datepicker__day[aria-pressed="true"],
.datepicker__pick[aria-pressed="true"],
.datepicker__day[aria-pressed="true"]:hover,
.datepicker__pick[aria-pressed="true"]:hover {
  background-color: var(--color-yellow);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

.datepicker__day:disabled,
.datepicker__pick:disabled {
  color: var(--color-placeholder);
  opacity: 0.35;
  cursor: default;
}

.datepicker__day:focus-visible,
.datepicker__pick:focus-visible,
.datepicker__title:focus-visible,
.datepicker__arrow:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
}

.datepicker__grid--months,
.datepicker__grid--years {
  display: grid;
  gap: 6px;
}

.datepicker__grid--months {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.datepicker__grid--months .datepicker__pick {
  height: 52px;
}

.datepicker__grid--years {
  position: relative;   /* offsetTop tlačítek se počítá vůči seznamu */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 256px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.datepicker__grid--years .datepicker__pick {
  height: 44px;
}

/* Na úzkém okně je pole přes celou šířku — panel se k němu přimkne celý,
   jinak by vlevo zbyl nesouměrný proužek. */
@media (max-width: 560px) {
  .datepicker {
    left: 0;
    width: auto;
    max-width: none;
  }
}

/* --- Souhlasy --- */
.consents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: calc(24 * var(--s)) calc(36 * var(--s));
  align-items: start;
  margin-top: calc(28 * var(--s));
}



.consent input[type="checkbox"] {
  flex: none;
  display: grid;
  place-content: center;
  width: calc(30 * var(--s));
  height: calc(30 * var(--s));
  margin: calc(2 * var(--s)) 0 0;
  appearance: none;
  background-color: var(--color-white);
  border-radius: calc(var(--radius-checkbox) * var(--s));
  cursor: pointer;
}

/* Zaškrtnuto = menší žlutý čtvereček uprostřed bílého pole.

   Ikona z návrhu (assets/icon-checkbox-check.svg) kreslila tmavou fajfku
   tahem 1,5 px. Na 30 px v návrhu to sedělo, ale reálně je pole 26 px, takže
   z fajfky zbyla vlasová linka a na první pohled nešlo poznat, jestli je
   zaškrtnuto. Žlutá je navíc brandový akcent aktivních stavů. */
.consent input[type="checkbox"]::before {
  content: "";
  width: calc(var(--checkbox-mark) * var(--s));
  height: calc(var(--checkbox-mark) * var(--s));
  border-radius: calc(var(--radius-checkbox-mark) * var(--s));
  background-color: var(--color-yellow);
  transform: scale(0);
  transition: transform var(--transition-fast);
}

.consent input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.consent label {
  font-size: calc(var(--fs-consent) * var(--s));
  line-height: var(--lh-body);
  color: var(--color-cream);
  text-wrap: pretty;
  cursor: pointer;
}

/* Odkaz na zásady ochrany osobních údajů uvnitř labelu. Podtržení je tu jediné
   rozlišení — barvu si nemůže vzít, souhlas i odkaz jsou krémové na tmavém. */
.consent label a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

.consent label a:hover {
  color: var(--color-yellow);
}

/* --- Chybové stavy -------------------------------------------------------
   Kreslí je validace v main.js po kliknutí na „Odeslat“, ne prohlížeč —
   formulář má novalidate, aby se nativní bubliny nepletly do designu.

   Červený obrys sám o sobě nestačí: barva nesmí být jediný nositel informace
   (WCAG 1.4.1), proto pod polem naskočí i krátká hláška. --color-error má
   kontrast nad 3:1 proti bílému poli i proti tmavému pozadí sekce, takže je
   obrys vidět na obojím.
   ---------------------------------------------------------------------- */
.field[data-invalid] input,
.field[data-invalid] textarea,
.field[data-invalid] select,
.field[data-invalid] .select__button {
  outline: 2px solid var(--color-error);
  outline-offset: 0;
}

.consent[data-invalid] input[type="checkbox"] {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.field-error {
  display: block;
  margin-top: calc(8 * var(--s));
  font-size: calc(var(--fs-error) * var(--s));
  line-height: 1.4;
  color: var(--color-error-text);
  text-wrap: pretty;
}

/* U souhlasu je hláška uvnitř mřížky vedle checkboxu, ne pod ním — jinak by
   se zalomila pod čtvereček a rozhodila řádek. */
.consent .field-error {
  grid-column: 2;
  margin-top: calc(6 * var(--s));
}

/* --- Stav odeslání -------------------------------------------------------
   form-status je chyba, která nepatří k žádnému poli (výpadek sítě, selhaný
   mail na serveru). signup__done nahradí celý formulář po úspěchu.
   Oba mají display, takže [hidden] je potřeba přebít výslovně — stejně jako
   u samotného formuláře, který je flex. */

.signup__form[hidden],
.form-status[hidden],
.signup__done[hidden] {
  display: none;
}

.form-status {
  margin: 0;
  font-size: calc(var(--fs-error) * var(--s));
  line-height: 1.4;
  color: var(--color-error-text);
  text-align: right;
  text-wrap: pretty;
}

.signup__done {
  margin-top: calc(74 * var(--s));
  padding: calc(40 * var(--s)) calc(48 * var(--s));
  border: 1px solid var(--color-yellow);
  border-radius: calc(var(--radius-submit-frame) * var(--s));
  background-color: var(--color-submit-frame);
  outline: none;
}

.signup__done-title {
  margin: 0;
  font-size: calc(var(--fs-card-title-lg) * var(--s));
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-yellow);
}

.signup__done-text {
  margin: calc(12 * var(--s)) 0 0;
  font-size: calc(var(--fs-body) * var(--s));
  line-height: 1.4;
  color: var(--color-cream);
  text-wrap: pretty;
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 calc(var(--gap-field) * var(--s));
  align-items: start;
  margin: 0;
}

.submit-frame {
  display: flex;
  align-self: center;
  align-items: center;
  width: calc(175 * var(--s));
  height: calc(64 * var(--s));
  padding: calc(10 * var(--s)) calc(12 * var(--s));
  background-color: var(--color-submit-frame);
  border: 1px solid var(--color-yellow);
  border-radius: calc(var(--radius-submit-frame) * var(--s));
}

.submit-frame__btn {
  width: 100%;
  height: 100%;
  font-size: calc(var(--fs-cta-sm) * var(--s));
}


/* ==========================================================================
   5. „Budeš jedním z nás?“ — carousel
   ========================================================================== */

.testimonials {
  position: relative;
  background-color: var(--color-cream);
}

.testimonials__stage {
  padding-block: calc(74 * var(--s)) calc(100 * var(--s));
}

.testimonials__title {
  font-size: calc(var(--fs-h2-carousel) * var(--s));
  color: var(--color-ink);
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(60 * var(--s));
  margin-top: calc(80 * var(--s));
}

/* touch-action: pan-y — svislý scroll stránky prstem po fotce zůstává, ale
   vodorovné gesto si nechá prohlížeč přebrat carousel (viz initCarousel). */
.carousel__viewport {
  position: relative;
  width: min(calc(528 * var(--s)), 100%);
  aspect-ratio: 528 / 361;
  touch-action: pan-y;
}

.testimonial {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-testimonial) * var(--s));
}

.testimonial[hidden] {
  display: none;
}

/* Výřez každé fotky přesně podle návrhu. Procenta platí díky pevnému
   aspect-ratio viewportu i na mobilu. */
.testimonial__img {
  position: absolute;
  max-width: none;
}

/* Jana — uzel 647:20 */
.testimonial__img--jana {
  top: -0.07%;
  left: -22.71%;
  width: 145.29%;
  height: 119.53%;
}

/* Petr — uzel 647:26 */
.testimonial__img--petr {
  top: -12.58%;
  left: -64.51%;
  width: 208.04%;
  height: 171.16%;
}

.testimonial::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

.testimonial__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--s));
  padding: calc(40 * var(--s));
  text-align: center;
}

.testimonial__name {
  font-size: calc(var(--fs-step-number) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-white);
  text-transform: capitalize;
}

.testimonial__quote {
  max-width: calc(360 * var(--s));
  font-size: calc(var(--fs-body) * var(--s));
  line-height: var(--lh-body);
  color: var(--color-white);
  text-wrap: pretty;
}

/* Delší citát má v návrhu širší textové pole (388 místo 346). */
.testimonial__quote--wide {
  max-width: calc(400 * var(--s));
}

.carousel__nav {
  flex: none;
  width: calc(105 * var(--s));
  height: calc(147 * var(--s));
  padding: 0;
  transition: opacity var(--transition-fast);
}

.carousel__nav img {
  width: 100%;
  height: 100%;
}

/* Zdrojová ikona míří doprava — levá šipka je v návrhu otočená o 180°. */
.carousel__nav--prev img {
  transform: rotate(180deg);
}

/* Hover stav není v návrhu — decentní vlastní varianta. */
.carousel__nav:hover {
  opacity: 0.75;
}

/* --- Indikátor pozice --- */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--s));
  margin-top: calc(28 * var(--s));
}

.carousel__dot {
  width: calc(10 * var(--s));
  height: calc(10 * var(--s));
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-ink);
  opacity: 0.25;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.carousel__dot[aria-current="true"] {
  opacity: 1;
  transform: scale(1.3);
}

.carousel__dot:hover {
  opacity: 0.6;
}


/* ==========================================================================
   6. FAQ — accordion
   ========================================================================== */

.faq {
  position: relative;
  background-color: var(--color-ink);
}

.faq__stage {
  padding-block: calc(67 * var(--s)) calc(96 * var(--s));
}

.faq__title {
  color: var(--color-white);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(20.5 * var(--s));
  width: min(calc(var(--container-width-faq) * var(--s)), 100%);
  margin: calc(70 * var(--s)) auto 0;
}

.faq__item {
  background-color: var(--color-faq-item);
  border: 1px solid var(--color-faq-border);
  border-radius: calc(var(--radius-field) * var(--s));
  transition: border-color var(--transition-fast);
}

/* Hover stav není v návrhu — decentní vlastní varianta. */
.faq__item:hover {
  border-color: var(--color-yellow);
}

.faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--s));
  width: 100%;
  min-height: calc(71 * var(--s));
  padding: calc(14 * var(--s)) calc(24 * var(--s));
  font-family: var(--font-display);
  font-size: calc(var(--fs-faq) * var(--s));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-white);
  text-align: left;
}

/* Zdrojová ikona míří doprava; zavřeno = dolů, otevřeno = nahoru. */
.faq__chevron {
  flex: none;
  width: calc(13 * var(--s));
  height: calc(18 * var(--s));
  transform: rotate(90deg);
  transition: transform var(--transition-accordion);
}

.faq__trigger[aria-expanded="true"] .faq__chevron {
  transform: rotate(270deg);
}

.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-accordion);
}

.faq__panel[hidden] {
  display: none;
}

.faq__panel p {
  padding: calc(4 * var(--s)) calc(24 * var(--s)) calc(24 * var(--s));
  font-size: calc(var(--fs-body) * var(--s));
  line-height: 1.5;
  color: var(--color-cream);
}


/* ==========================================================================
   7. PATIČKA — v návrhu není, stavěná podle rb.nextgenlab.cz

   FAQ nad ní má stejné pozadí (--color-ink), takže patičku od stránky
   neodděluje barva, ale vlasová linka. Bez ní by obojí splynulo v jednu
   tmavou plochu a stránka by nikde vizuálně nekončila.
   ========================================================================== */

.site-footer {
  background-color: var(--color-ink);
  border-top: 1px solid var(--color-hairline);
}

/* Dva sloupce (značka vlevo, copyright vpravo) a přes celou šířku pod nimi
   identifikace provozovatele, oddělená druhou vlasovou linkou. */
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(32 * var(--s)) calc(40 * var(--s));
  padding-block: calc(48 * var(--s)) calc(40 * var(--s));
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--s));
}

.site-footer__logo {
  width: calc(153 * var(--s));
  height: auto;
}

/* Dva odkazy pod logem. Sloupec, ne řádek — na mobilu by se vedle sebe
   nevešly a zalomily by se do nečitelné kaše. */
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
}

.site-footer__link {
  font-size: calc(var(--fs-footer) * var(--s));
  color: var(--color-footer-muted);
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-yellow);
  text-decoration: underline;
}

.site-footer__copy {
  justify-self: end;
  font-size: calc(var(--fs-footer) * var(--s));
  color: var(--color-footer-muted);
}

.site-footer__operator {
  grid-column: 1 / -1;
  padding-top: calc(24 * var(--s));
  border-top: 1px solid var(--color-hairline);
  font-size: calc(var(--fs-legal) * var(--s));
  line-height: 1.6;
  color: var(--color-footer-muted);
  text-wrap: pretty;
}


/* ==========================================================================
   8. INFORMACE O COOKIES

   Není to consent lišta: stránka žádné cookies nenastavuje, takže není o čem
   rozhodovat a není co blokovat. Proto žádný overlay a position: fixed bez
   zásahu do layoutu — lišta jen sedí nad obsahem a dá se odklepnout.
   ========================================================================== */

/* Lišta sedí u levého okraje, ne uprostřed. Hero zabírá celou obrazovku, takže
   cokoli fixního dole něco překryje — a jediné, co překrýt nesmí, je „Game on“
   v pravé části pruhu. Vlevo stíní nanejvýš štítek Partneři. */
.cookie-note {
  position: fixed;
  z-index: 50;
  bottom: calc(20px + var(--safe-bottom));
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: calc(24 * var(--s));
  width: min(calc(var(--cookie-max-width) * var(--s)), 100% - 2 * var(--gutter));
  padding: calc(18 * var(--s)) calc(24 * var(--s));
  background-color: var(--color-faq-item);
  border: 1px solid var(--color-faq-border);
  border-radius: calc(var(--radius-field) * var(--s));
  box-shadow: var(--shadow-cookie);
}

.cookie-note__body {
  min-width: 0;
}

.cookie-note[hidden] {
  display: none;
}

.cookie-note__title {
  font-size: calc(var(--fs-cookie-title) * var(--s));
  font-weight: var(--fw-bold);
  color: var(--color-cream);
}

.cookie-note__text {
  margin-top: calc(8 * var(--s));
  font-size: calc(var(--fs-legal) * var(--s));
  line-height: 1.6;
  color: var(--color-footer-muted);
  text-wrap: pretty;
}

.cookie-note__btn {
  flex: none;
  min-height: 44px;
  padding-inline: calc(28 * var(--s));
  font-size: calc(var(--fs-cta-sm) * var(--s));
}


/* ==========================================================================
   9. BREAKPOINTY

   Pod 1280 px se --s už nezmenšuje (text by se stal nečitelným), takže se
   místo zmenšování mění rozložení. Na tabletu a mobilu přebírá typografii
   clamp() v px — poměry z návrhu tam nedávají smysl (H1 98 px z návrhu by
   na mobilu přeteklo).
   ========================================================================== */

/* --- Užší desktop / tablet na šířku --- */
@media (max-width: 1100px) {
  .hero__footer {
    flex-wrap: wrap;
    gap: calc(24 * var(--s-hero));
  }

  .hero__partners {
    flex: 1 1 100%;
  }

  .hero__cta {
    width: 100%;
    max-width: calc(320 * var(--s));
  }

  .field-row--contact {
    gap: calc(var(--gap-field) * var(--s));
  }

  /* Souhlasy do dvou sloupců, tlačítko na vlastní řádek vpravo. */
  .consents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .submit-frame {
    grid-column: 2;
    justify-self: end;
  }

  .carousel {
    gap: calc(24 * var(--s));
  }

  .carousel__nav {
    width: calc(72 * var(--s));
    height: calc(101 * var(--s));
  }
}

/* --- Tablet na výšku a menší: vše pod sebe --- */
@media (max-width: 900px) {
  /* Patička a cookie lišta: pod 1280 px se --s dál nezmenšuje, ale 14 * 0,728
     je pořád jen 10 px. Drobný text proto přebírá pevné velikosti, stejně jako
     zbytek webu na tomhle breakpointu. */
  .site-footer__inner {
    gap: 24px;
    padding-block: 36px 32px;
  }

  .site-footer__brand {
    gap: 12px;
  }

  .site-footer__links {
    gap: 6px;
  }

  .site-footer__logo {
    width: 132px;
  }

  .site-footer__link,
  .site-footer__copy {
    font-size: 14px;
  }

  .site-footer__operator {
    padding-top: 20px;
    font-size: 12px;
  }

  /* Pod 900 px se text a tlačítko vedle sebe nevejdou — sloupec přes celou
     šířku okna. */
  .cookie-note {
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: auto;
    padding: 18px 20px;
    border-radius: 12px;
  }

  .cookie-note__title {
    font-size: 15px;
  }

  .cookie-note__text {
    margin-top: 6px;
    font-size: 13px;
  }

  .cookie-note__btn {
    padding-inline: 26px;
    font-size: 14px;
  }

  :root {
    /* Krémová sekce vystupuje do hero míň, ať zbyde místo na obsah. */
    --hero-overlap: 72px;
  }

  .site-header {
    top: 24px;
  }

  .site-header__logo img {
    width: clamp(112px, 24vw, 153px);
  }

  .site-nav {
    gap: clamp(14px, 4vw, 32px);
    font-size: clamp(12px, 3.2vw, 15px);
  }

  /* Hero: text nad grafikou, pruh partnerů a CTA pod sebou.

     Všechny svislé míry se tady řídí výškou okna (svh), ne šířkou. Dokud se
     počítaly z vw, byl hero na iPhonu SE vysoký 995 px do okna vysokého 667 —
     pruh partnerů i „Game on“ končily 224 px pod ohybem. */
  .hero {
    padding-top: max(clamp(64px, 11svh, 132px), calc(var(--safe-top) + 60px));
    padding-bottom: calc(var(--hero-overlap) + clamp(20px, 4svh, 48px) + var(--safe-bottom));
  }

  .hero__stage {
    gap: clamp(14px, 2.6svh, 40px);
  }

  /* justify-content: center — když po vysázení textu a grafiky zbyde místo
     (vysoký tablet), rozdělí se souměrně nahoru a dolů místo hromady vespod. */
  .hero__main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4svh, 36px);
  }

  .hero__copy {
    flex: none;
    width: 100%;
    max-width: none;
  }

  /* Grafika je jediný prvek hero, který smí ustoupit: flex: 1 1 0 jí dá právě
     to místo, co po textu, pruhu partnerů a CTA zbylo. Poměr stran drží
     aspect-ratio, takže šířka jde za výškou a obě šipky (pozicované v % vůči
     tomuhle boxu) zůstanou přilepené ke grafice v jakékoli velikosti.

     Strop je schválně max-height, ne max-width: kdyby šířku ořízlo max-width
     při výšce určené flexem, poměr stran se rozjede a ork se roztáhne. */
  .hero__visual {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-height: var(--hero-art-min-height);
    max-height: var(--hero-art-max-height);
    aspect-ratio: 537 / 552;
    margin-inline: auto;
  }

  .hero__title {
    font-size: min(clamp(30px, 9.6vw, 76px), 8.2svh);
  }

  .hero__eyebrow {
    margin-bottom: clamp(2px, 0.6svh, 8px);
    font-size: min(clamp(17px, 5vw, 34px), 4svh);
  }

  .hero__subtitle {
    max-width: none;
    margin-top: clamp(10px, 2svh, 24px);
    font-size: min(clamp(15px, 4.1vw, 18px), 2.6svh);
  }

  .hero__footer {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 1.6svh, 16px);
  }

  /* Stejná stavba jako na desktopu: štítek přes celou levou stranu, mřížka
     log vedle. Pruh se nezalamuje — o přeskládání se stará mřížka. */
  .hero__partners {
    flex: none;
    align-items: stretch;
    gap: clamp(10px, 3vw, 22px);
    height: auto;
    padding: 0 clamp(10px, 3vw, 18px) 0 0;
    border-radius: 20px;
  }

  /* Širší než na desktopu v poměru k pruhu — na mobilu je to vedle mřížky
     2×2 hlavní kotva kompozice. */
  .hero__partners-tab {
    width: clamp(92px, 27%, 170px);
    padding: 0;
    border-radius: 20px;
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .hero__partners-logos {
    padding-block: clamp(8px, 1.4svh, 14px);
    gap: clamp(6px, 1.2svh, 12px) clamp(8px, 2.4vw, 18px);
  }

  .hero__partner-logo--1 { --logo-w: 116px; }
  .hero__partner-logo--2 { --logo-w: 92px; }
  .hero__partner-logo--3 { --logo-w: 94px; }
  .hero__partner-logo--4 { --logo-w: 92px; }

  /* 46px je spodní hranice: pod ní by CTA přestalo být pohodlný dotykový cíl.
     Zbytek hero raději ustoupí (grafika), než aby se osekalo tlačítko. */
  .hero__cta {
    width: 100%;
    max-width: none;
    height: clamp(46px, 6.8svh, 56px);
    font-size: 15px;
  }

  /* Sekce: menší svislé rozestupy, obsah v jednom sloupci. */
  .intro {
    border-radius: 0 40px 0 0;
  }

  .intro__stage,
  .plan__stage,
  .signup__stage,
  .testimonials__stage,
  .faq__stage {
    padding-block: clamp(48px, 10vw, 80px);
  }

  .intro__title,
  .plan__title,
  .signup__title,
  .faq__title {
    font-size: clamp(26px, 5.6vw, 38px);
  }

  .testimonials__title {
    font-size: clamp(28px, 6.4vw, 46px);
  }

  .intro__cards,
  .plan__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-width: 520px;
    margin-inline: auto;
  }

  .intro__cards {
    margin-top: clamp(28px, 6vw, 48px);
  }

  .plan__grid {
    margin-top: clamp(28px, 6vw, 48px);
  }

  /* Odsazení prostředních dlaždic dává smysl jen ve třech sloupcích. */
  .card--white,
  .step:nth-child(2) {
    margin-top: 0;
  }

  .card,
  .step {
    min-height: 0;
    gap: 16px;
    padding: 28px 24px;
    border-radius: 24px;
  }

  .card__title {
    font-size: clamp(22px, 5.2vw, 30px);
  }

  .card__body,
  .step__body,
  .faq__panel p {
    max-width: none;
    font-size: clamp(15px, 3.6vw, 17px);
  }

  .card__cta,
  .step__cta {
    width: auto;
    height: 44px;
    padding-inline: 22px;
    font-size: 14px;
  }

  .video {
    max-width: none;
    border-radius: 16px;
  }

  .video__overlay img {
    width: 48px;
    height: 48px;
  }

  .video__controls {
    padding: 10px;
  }

  .video__btn {
    width: 44px;
    height: 44px;
  }

  .video__icon {
    width: 20px;
    height: 20px;
  }

  .step__number {
    font-size: clamp(22px, 5vw, 28px);
  }

  .step__title {
    font-size: clamp(17px, 4.2vw, 20px);
  }

  /* Ve sloupci nemají šipky mezi dlaždicemi kam ukazovat. */
  .plan__arrow {
    display: none;
  }

  /* Formulář: jeden sloupec, pole na plnou šířku. */
  .signup__form {
    gap: 14px;
    margin-top: clamp(28px, 6vw, 48px);
  }

  .field-row--names,
  .field-row--contact,
  .consents {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .signup__form {
    --field-h: 56px;
    --field-fs: 15px;
  }

  .field input,
  .field select,
  .field textarea,
  .select__button {
    padding-inline: 16px;
    border-radius: 12px;
  }

  .select__button {
    padding-right: 18px;
  }

  .select__chevron {
    width: 9px;
    height: 11px;
  }

  .select__list {
    max-height: 260px;
    padding: 8px;
    border-radius: 12px;
  }

  .select__option {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 15px;
  }

  .consents {
    margin-top: 10px;
  }

  /* Jen vodorovná mezera — svislá by odsadila chybovou hlášku od labelu. */
  .consent {
    gap: 0 12px;
  }

  .consent input[type="checkbox"] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }

  .consent input[type="checkbox"]::before {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }

  .consent label {
    font-size: 14px;
  }

  .field-error {
    margin-top: 6px;
    font-size: 13px;
  }

  .form-status {
    font-size: 13px;
    text-align: left;
  }

  .signup__done {
    margin-top: 32px;
    padding: 24px 20px;
    border-radius: 16px;
  }

  .signup__done-title {
    font-size: 26px;
  }

  .signup__done-text {
    margin-top: 8px;
    font-size: 15px;
  }

  .submit-frame {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    height: 64px;
    margin-top: 6px;
    padding: 8px;
    border-radius: 16px;
  }

  .submit-frame__btn {
    font-size: 15px;
  }

  /* Carousel: šipky zůstávají po stranách fotky i na mobilu — nikdy se
     nezalomí pod ni. Fotka je pružná položka (flex: 1 1 auto + min-width: 0),
     takže si vezme celou zbylou šířku, a šipky se plynule zmenšují podle
     okna. Poměr stran 105/147 je z návrhu, takže se nezdeformují. */
  .carousel {
    flex-wrap: nowrap;
    gap: clamp(4px, 2vw, 20px);
    width: 100%;
    margin: clamp(24px, 6vw, 40px) auto 0;
  }

  .carousel__viewport {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .carousel__nav {
    flex: none;
    width: clamp(20px, 6vw, 44px);
    height: auto;
    aspect-ratio: 105 / 147;
  }

  .testimonial {
    border-radius: 24px;
  }

  .testimonial__caption {
    gap: 10px;
    padding: 24px;
  }

  .testimonial__name {
    font-size: clamp(20px, 4.8vw, 26px);
  }

  .testimonial__quote {
    max-width: none;
    font-size: clamp(14px, 3.6vw, 16px);
  }

  .carousel__dots {
    gap: 10px;
    margin-top: 18px;
  }

  .carousel__dot {
    width: 9px;
    height: 9px;
  }

  /* FAQ */
  .faq__list {
    gap: 12px;
    width: 100%;
    margin-top: clamp(24px, 6vw, 44px);
  }

  .faq__item {
    border-radius: 12px;
  }

  .faq__trigger {
    min-height: 60px;
    padding: 14px 18px;
    font-size: clamp(16px, 4vw, 19px);
  }

  .faq__chevron {
    width: 11px;
    height: 15px;
  }

  .faq__panel p {
    padding: 0 18px 18px;
  }
}

/* --- Tablet na výšku: jeden sloupec, ale ne mobilní ---
   640–900 px je pořád jeden sloupec (stejná informační architektura jako na
   mobilu), jen se přestane tvářit jako zvětšený telefon: sloupec vyroste z 520
   na 660 px, typografie o stupeň nahoru a krátká pole formuláře jdou po dvou
   vedle sebe. Na iPadu Air (834 px) tím zmizí přes 150 px prázdna po stranách.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 900px) {
  .intro__cards,
  .plan__cards,
  .signup__form,
  .faq__list {
    max-width: var(--column-width-tablet);
    margin-inline: auto;
  }

  .carousel {
    width: min(var(--column-width-tablet), 100%);
  }

  .intro__title,
  .plan__title,
  .signup__title,
  .faq__title {
    font-size: clamp(32px, 4.6vw, 42px);
  }

  .testimonials__title {
    font-size: clamp(34px, 5.2vw, 48px);
  }

  .card__title {
    font-size: clamp(26px, 3.8vw, 34px);
  }

  .card__body,
  .step__body,
  .faq__panel p {
    font-size: clamp(16px, 2.2vw, 19px);
  }

  .step__title {
    font-size: clamp(19px, 2.6vw, 23px);
  }

  .step__number {
    font-size: clamp(26px, 3.4vw, 30px);
  }

  .faq__trigger {
    min-height: 68px;
    padding: 16px 22px;
    font-size: clamp(18px, 2.4vw, 21px);
  }

  .faq__panel p {
    padding: 0 22px 20px;
  }

  .card,
  .step {
    gap: 18px;
    padding: 34px 30px;
  }

  /* Ve větší kartě působilo 44px tlačítko jako ztracené. */
  .card__cta,
  .step__cta {
    height: 50px;
    padding-inline: 30px;
    font-size: 15px;
  }

  /* Jméno + příjmení vedle sebe, datum narození přes celou šířku pod nimi —
     na 660 px sloupci je řádek tří polí už moc nahusto. */
  .field-row--names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .field-row--names .field:last-child {
    grid-column: 1 / -1;
  }

  .field-row--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .signup__form {
    --field-h: 62px;
    --field-fs: 16px;
  }

  .consent label {
    font-size: 15px;
  }

  .testimonial__name {
    font-size: clamp(24px, 3.2vw, 28px);
  }

  .testimonial__quote {
    font-size: clamp(16px, 2.1vw, 18px);
  }
}


/* --- Mobil --- */
@media (max-width: 560px) {
  /* Patička: na mobilu nemá „copyright vpravo“ smysl — vedle sebe se
     nevejdou a zarovnání na kraje vypadá jako chyba. Jeden vycentrovaný sloupec. */
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__brand,
  .site-footer__links {
    align-items: center;
  }

  .site-footer__copy {
    justify-self: center;
  }


  .site-header__inner {
    gap: 10px;
  }

  /* Na telefonu by čtyři loga vedle sebe vyšla na ~59 px — nečitelné.
     Mřížka jde do 2×2 a pruh povyroste na dva řádky; žlutý štítek se přes ně
     protáhne, takže drží stejnou kompozici jako na desktopu. */
  /* Řádek má minimum 28 px, aby byl odkaz pohodlný cíl i když je logo vysoké
     jen 17 px. Buňky na sebe navazují, takže se nedá trefit „mezi" ně. */
  .hero__partners-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(28px, auto);
    row-gap: clamp(2px, 0.6svh, 6px);
  }

  .hero__partner-logo--1 { --logo-w: 104px; }
  .hero__partner-logo--2 { --logo-w: 84px; }
  .hero__partner-logo--3 { --logo-w: 86px; }
  .hero__partner-logo--4 { --logo-w: 84px; }

  .card,
  .step {
    padding: 24px 18px;
  }

  .testimonial__caption {
    padding: 18px;
  }
}


/* ==========================================================================
   9b. DOTYKOVÁ ZAŘÍZENÍ — velikost cíle, ne velikost obrazovky

   Rozlišení nic neříká o způsobu ovládání: notebook může mít dotykový displej
   a tablet klávesnici. Proto se tyhle úpravy pouštějí podle pointer: coarse
   (prst, stylus), ne podle breakpointu.

   Cíl je 44×44 px (WCAG 2.5.5). Kde by zvětšení rozhodilo layout, roste jen
   plocha pro dotyk — přes padding s protisměrným marginem nebo přes ::before.
   ========================================================================== */

@media (pointer: coarse) {
  /* Odkazy v navigaci měly výšku řádku textu, tedy ~18 px. Padding je vyvážený
     záporným marginem, takže hlavička vypadá pořád stejně. min-width řeší
     krátké popisky — „FAQ“ mělo 41 px. */
  .site-nav a {
    display: block;
    min-width: 44px;
    padding: 13px 8px;
    margin: -13px -8px;
    text-align: center;
  }

  /* Logo je taky odkaz (na začátek stránky) a mělo výšku obrázku, 29 px. */
  .site-header__logo {
    display: block;
    padding-block: 8px;
    margin-block: -8px;
  }

  /* Tečky carouselu zůstávají 9–10px velké, dotykový cíl kolem nich je 44px. */
  .carousel__dot {
    position: relative;
  }

  .carousel__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Šipka zůstává vizuálně malá, dotyková plocha kolem ní má 44 px. Kdyby se
     zvětšovala přes min-width, ukrojila by šířku fotce. */
  .carousel__nav {
    position: relative;
  }

  .carousel__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }


  /* Hover na dotyku nenastane — ovládání videa je vidět natrvalo (řeší už
     @media (hover: none) u .video__controls), tady jen dorovnáme tlačítka. */
  .video__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Checkbox si drží velikost z návrhu (26 px), aktivní plocha je ale celý
     label — je s ním svázaný přes for/id. Řádek měl 42 px, s paddingem má 54;
     záporný margin ho vrací do původního rytmu, takže se rozestupy nehnou. */
  .consent label {
    padding-block: 6px;
    margin-block: -6px;
  }
}


/* ==========================================================================
   10. NÍZKÉ OKNO NA ŠÍŘKU — telefon otočený do landscape

   Nejtěsnější případ celého webu: 844×390 znamená 390 px výšky na kompletní
   landing. Sloupcové rozložení z breakpointu 900 px tady nedává smysl (text
   nad grafikou nad pruhem partnerů = pět pater do 390 px), a širokou desktop
   variantu zase rozbíjí zalamování z breakpointu 1100 px.

   Řešení je vlastní kompaktní režim: zpátky na řádek (text vlevo, grafika
   vpravo), pruh partnerů a CTA vedle sebe, všechno odvozené od svh. Blok je
   schválně poslední v souboru — musí přebít oba předchozí breakpointy bez
   ohledu na to, jestli je okno široké 600 nebo 1000 px.

   Rozsah podmínky (landscape, do 700 px výšky, do 1100 px šířky) je odměřený
   podle toho, kde ostatní dvě rozložení skutečně selhávají:

     844×390   sloupcové rozložení — pět pater do 390 px
     800×600   sloupcové rozložení — na grafiku zbylo 85 px, byla neviditelná
     900×700   totéž, grafika 109 px
     1024×600  zalomený pruh partnerů z breakpointu 1100 px přetlačil CTA
               o 30 px pod ohyb

   Nad 1100 px šířky se nepouští schválně: tam drží proporční desktop varianta
   (--s-hero) i okno vysoké 600 px a vypadá líp než kompaktní režim.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1100px) {
  :root {
    /* Krémová sekce vystupuje do hero jen symbolicky — každý pixel se počítá. */
    --hero-overlap: 40px;
  }

  .site-header {
    top: max(10px, var(--safe-top));
  }

  .site-header__logo img {
    width: clamp(96px, 11vw, 130px);
  }

  .site-nav {
    gap: clamp(16px, 3vw, 40px);
    font-size: clamp(12px, 1.6vw, 15px);
  }

  .hero {
    padding-top: max(clamp(48px, 15svh, 92px), calc(var(--safe-top) + 46px));
    padding-bottom: calc(var(--hero-overlap) + clamp(10px, 3svh, 24px) + var(--safe-bottom));
  }

  .hero__stage {
    gap: clamp(8px, 3svh, 22px);
  }

  .hero__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
  }

  .hero__copy {
    flex: 1 1 auto;
    width: auto;
    max-width: 58%;
  }

  /* V řádku řídí flex šířku, ne výšku — proto tady grafika dostává výšku
     napevno a šířku si dopočítá z poměru stran. Tři stropy naráz:

       100svh - 215px  co zbyde po hlavičce, pruhu partnerů, CTA a paddingu
       58svh           aby na vysokém okně nepřerostla zbytek kompozice
       42vw            aby vedle ní zbylo místo na text

     Nejnižší z nich vyhrává, takže se hero vejde na obrazovku od 653×280
     po 1100×700, aniž by grafika kdekoli spadla pod viditelnou velikost. */
  .hero__visual {
    flex: none;
    width: auto;
    height: min(calc(100svh - 215px), 58svh, 42vw);
    max-height: none;
    aspect-ratio: 537 / 552;
    margin-inline: 0;
  }

  .hero__eyebrow {
    margin-bottom: 2px;
    font-size: min(clamp(15px, 2.2vw, 26px), 5.6svh);
  }

  .hero__title {
    font-size: min(clamp(22px, 4.2vw, 48px), 9.4svh);
  }

  .hero__subtitle {
    margin-top: clamp(6px, 1.6svh, 14px);
    max-width: 46ch;
    font-size: min(clamp(13px, 1.6vw, 16px), 3.6svh);
  }

  /* Pruh partnerů a CTA zpátky vedle sebe — dva pruhy pod sebou by v 390 px
     sebraly grafice skoro polovinu její výšky. */
  .hero__footer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(12px, 2vw, 32px);
  }

  /* Bez svislého paddingu a se stretchnutou pilulkou, aby žlutý štítek sedl
     do levého konce pruhu přesně jako v návrhu — ne jako plovoucí bublina. */
  .hero__partners {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    /* space-between zpátky: breakpoint 900 px přepíná pruh na center kvůli
       zalomení do dvou řádků, tady je ale zase jednořádkový a štítek patří
       na levý konec. */
    align-items: stretch;
    /* min-width: 0 — bez něj má flex položka automatické minimum ve výši
       svého min-content a na úzkém okně vystrčí CTA mimo obrazovku místo aby
       loga stlačila. */
    min-width: 0;
    gap: clamp(8px, 1.4vw, 20px);
    height: clamp(34px, 11svh, 54px);
    padding: 0 clamp(10px, 1.6vw, 22px) 0 0;
  }

  .hero__partners-tab {
    width: clamp(84px, 12vw, 150px);
    padding: 0;
    font-size: clamp(11px, 1.4vw, 14px);
  }

  /* Na ležícím telefonu je na výšku nouze, ale na šířku místo dost — mřížka
     proto zůstává jednořádková i pod 560 px šířky okna. */
  .hero__partners-logos {
    grid-template-columns: 173fr 134fr 137fr 135fr;
    padding-block: 0;
    gap: clamp(8px, 1.4vw, 20px);
  }

  .hero__partner-logo--1 { --logo-w: clamp(74px, 10vw, 116px); }
  .hero__partner-logo--2 { --logo-w: clamp(58px, 7.8vw, 92px); }
  .hero__partner-logo--3 { --logo-w: clamp(60px, 8vw, 94px); }
  .hero__partner-logo--4 { --logo-w: clamp(58px, 7.8vw, 92px); }

  .hero__cta {
    flex: none;
    width: clamp(120px, 17vw, 200px);
    height: clamp(40px, 10svh, 52px);
    font-size: clamp(13px, 1.5vw, 15px);
  }
}