/* =========================================================================
   Dynamická třída — společné styly stránek (mimo hlavičku)
   Hlavička má vlastní styly uvnitř web componentu (header.js).
   ========================================================================= */

:root {
  --purple:      #6253CE;
  --purple-dark: #403485;
  --lilac:       #EEEDFD;
  --lilac-2:     #F5F3FF;
  --ink:         #111111;
  --muted:       #5B5B6B;

  /* ---- typizované odstupy (jedno místo pro ladění rytmu stránky) ---- */
  --gap-title:    40px;   /* nadpis sekce → následující obsah */
  --gap-squiggle: 40px;   /* žlutá vlnka → následující obsah */
  --gap-lead:     24px;   /* nadpis → úvodní odstavec */
  --gap-block:    32px;   /* mezi bloky uvnitř sekce */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: 'Open Sans', system-ui, Arial, sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

/* ---------- Obsah stránky ---------- */
.page { max-width: 1440px; margin: 0 auto; padding: 64px 64px 96px; }

.page h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 0 0 24px; }

/* ===================== HERO / ÚVOD (Figma 86:142) =====================
   Rozměry a pozice 1:1 dle Figmy (návrhová šířka 1440 px).
   Souřadnice jsou relativní k .hero-inner (souřadný systém rámu ÚVOD).

   JEDNOTKA --u = jeden návrhový pixel.
   Od 1440 px výš je --u přesně 1px, takže všechna čísla níž jsou ta z Figmy.
   Pod 1440 px se --u zmenšuje s šířkou sekce (100cqw / 1440) a celá kompozice
   se proporčně škáluje – stejné poměry, menší plátno. Pod 900 px se layout
   přepíná na jeden sloupec (blok „MOBIL" na konci hero sekce).
   Kdo ladí pozice: měň čísla, ne jednotku. */
.hero {
  position: relative;
  background: #EEEDFD;          /* Figma 86:144 */
  container-type: inline-size;  /* kvůli cqw v --u */
  /* Ořez blobu. „clip" místo „hidden" schválně: hidden ze sekce udělá posuvnou
     plochu, a jakmile obsah hero přeteče (na užším okně přetéká), prohlížeč s ní
     při zaostření prvku odroluje — video i reveal by se posunuly mimo. Starší
     prohlížeče, které clip neznají, spadnou na řádek nad ním. */
  overflow: hidden;
  overflow: clip;
}
.hero-inner {
  --u: 1px;
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(594 * var(--u));      /* výška fialového panelu */
  margin: 0 auto;
}
@media (max-width: 1439px) {
  .hero-inner { --u: calc(100vw / 1440); }             /* záloha bez container queries */
  @supports (width: 1cqw) { .hero-inner { --u: calc(100cqw / 1440); } }
}

/* Nadpis – Figma 86:149 */
.hero-title {
  position: absolute; left: calc(59 * var(--u)); top: calc(125 * var(--u));
  width: calc(979 * var(--u)); margin: 0;
  font-weight: 800; font-size: calc(70 * var(--u)); line-height: calc(116 * var(--u));
  color: #6253CE;
}

/* Podnadpis – Figma 86:151 */
.hero-sub {
  position: absolute; left: calc(59 * var(--u)); top: calc(257 * var(--u));
  width: calc(658 * var(--u)); margin: 0;
  font-weight: 400; font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u));
  color: #717171;
}

/* Tlačítka – Figma 86:153/157 (outline) a 86:155/156 (solid).
   Obal .hero-cta sedí na pozici prvního tlačítka; mezera 32 = 376 − 59 − 285. */
.hero-cta {
  position: absolute; left: calc(59 * var(--u)); top: calc(367 * var(--u));
  display: flex; align-items: center; gap: calc(32 * var(--u));
}
.hero-btn {
  /* Výška drží kompozici hera: pod tlačítkem sedí na top: 433 fialový
     proužek, takže 64 by do něj narazilo. Figma tu má 54 (67 má až sekční
     CTA), nejblíž na mřížce je 56. Na menším plátně se tlačítko nesmí
     zmenšit pod prst, proto spodní hranice 44 px a písmo 16 px. */
  height: max(44px, calc(56 * var(--u)));
  display: inline-flex; align-items: center;
  border-radius: calc(16 * var(--u));
  font-size: max(16px, calc(24 * var(--u))); text-decoration: none;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.hero-btn--outline {
  /* Ve Figmě má text vlevo 16 a vpravo zbývají ~4 px. Aby při zmenšení
     plátna text nenarazil na pravou hranu, roste pravý odsaz lineárně
     s tím, jak --u klesá pod 1 (u 900 px ≈ 15 px). Při --u = 1 je to 4 px. */
  min-width: calc(285 * var(--u)); padding: 0 calc(4px + (1px - var(--u)) * 30) 0 calc(16 * var(--u));
  background: #ffffff; border: 0.8px solid rgba(98,83,206,0.4);
  color: #111111; font-weight: 400;
}
.hero-btn--outline:hover { background: #f5f3ff; }
.hero-btn--solid {
  /* Bez odsazení při --u = 1 (text je centrovaný v pevné šířce jako ve Figmě);
     odsaz přibývá jen při zmenšování, ať text nenarazí na okraj. */
  min-width: calc(217 * var(--u)); padding: 0 calc((1px - var(--u)) * 24); justify-content: center;
  background: #403485; color: #ffffff; font-weight: 700;
}
.hero-btn--solid:hover { background: #322a6b; }

/* Accent proužek – Figma 86:158 */
.hero-accent {
  position: absolute; left: calc(59 * var(--u)); top: calc(433 * var(--u));
  width: calc(243 * var(--u)); height: calc(5 * var(--u)); border-radius: 6px; background: #CFCBF3;
}

/* Blob – Figma "Star 2" (assets/Star 2.svg, 698×570).
   Pozice = box skupiny 105:2 (629, -124) + inset obrázku (205, 75) → 834, -49. */
/* Kontejner blobu – drží pozici i střed pro play tlačítko */
.hero-media {
  position: absolute; left: calc(834 * var(--u)); top: calc(-49 * var(--u));
  width: calc(698 * var(--u)); height: calc(570 * var(--u)); pointer-events: none;
}
.hero-blob {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}

/* Klikací plocha bubliny. pointer-events: fill drží zásah přesně ve tvaru
   cesty, takže se neklikne do rohů plátna mimo blob. */
.hero-blob-plocha { pointer-events: fill; cursor: pointer; }

/* Play tlačítko – vždy vycentrované na střed blobu.
   Nad fotkou nesmí splývat, takže bílý disk s fialovým trojúhelníkem
   (stejné ladění jako zavírací křížek). Pod 56 px nejde – je to cíl pro prst. */
.hero-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(56px, calc(76 * var(--u))); height: max(56px, calc(76 * var(--u))); border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.94); color: #6253CE;
  box-shadow: 0 6px 20px rgba(30, 25, 60, 0.28);
  cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hero-play svg { width: max(22px, calc(30 * var(--u))); height: max(22px, calc(30 * var(--u))); margin-left: calc(4 * var(--u)); display: block; }
/* hover se chytá i při najetí na fotku v bublině, ne jen na tlačítko
   (:hover se propaguje na .hero-media, i když sama pointer-events nemá) */
.hero-play:hover,
.hero-media:hover .hero-play {
  background: #6253CE; color: #ffffff; transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 10px 26px rgba(98, 83, 206, 0.42);
}
.hero-play:active { transform: translate(-50%, -50%) scale(0.98); }

/* Dekorativní kolečka u blobu – Figma 86:147 (větší) a 105:4 (menší).
   Bílý 7px obrys + fialový stín jako blob, bez výplně obrázkem.
   Obrys se škáluje s --u stejně jako bílý obrys bubliny (ten je v SVG
   jednotkách, takže se zmenšuje sám). */
.hero-ring {
  position: absolute; border-radius: 50%;
  border: calc(7 * var(--u)) solid #ffffff; box-sizing: border-box;
  background: #F9F9F9; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(98,83,206,0.3));
}
.hero-ring--lg { left: calc(774 * var(--u)); top: calc(330 * var(--u)); width: calc(92.488 * var(--u)); height: calc(92.488 * var(--u)); }
.hero-ring--sm { left: calc(701 * var(--u)); top: calc(399 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); }

/* Popisek pod bublinou – co ve videu je a jak je dlouhé.
   Vodorovně vycentrovaný na střed blobu (834 + 698/2 = 1183).
   Písmo má spodní hranici, ať zůstane čitelné i na malém plátně;
   když se pak nevejde na řádek, zalomí se pod sebe. */
.hero-video-popisek {
  /* Střed drží na středu bubliny; na užším plátně se posune doleva tak, aby
     pravý okraj popisku (šířka ≈ 390 px) zůstal 16 px od kraje sekce. */
  position: absolute; left: min(calc(1183 * var(--u)), calc(100% - 211px)); top: calc(512 * var(--u));
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); margin: 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  font-size: max(13px, calc(15 * var(--u))); line-height: max(18px, calc(20 * var(--u))); color: #717171;
  white-space: nowrap; pointer-events: none;
}
/* Mezi 900 a 1100 px už pod bublinou není místo: hero se zmenšilo, ale písmo
   popisku ne, a narazil by do číslovaných koleček karet pod sekcí. */
@media (min-width: 900px) and (max-width: 1099px) { .hero-video-popisek { display: none; } }
.hero-video-cas {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  background: #ffffff; border: 1px solid #CFCBF3;
  font-size: max(12px, calc(13 * var(--u))); font-weight: 700; line-height: 16px; color: #6253CE;
  font-variant-numeric: tabular-nums;
}

/* ===================== PLAY EFEKT (roztažení blobu) =====================
   Reveal vrstva roste z blobu přes celý fialový obdélník (řídí hero.js).
   Křížek vpravo nahoře vrátí vše zpět stejnou cestou. */
.hero-inner { z-index: 1; }

.hero-reveal {
  position: absolute; inset: 0; z-index: 2; display: none;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
/* Stín se počítá jen v klidu, ne během animace. Filtr nad plochou přes půl
   obrazovky stál dřív ~14 ms na snímek, tedy víc než všechno ostatní
   dohromady; za pohybu ho stejně nikdo nezaznamená. */
.hero.is-expanded .hero-reveal { filter: drop-shadow(0 4px 10px rgba(98, 83, 206, 0.30)); }
/* výplň #F9F9F9 + bílý 7px obrys jsou na <polygon> v HTML (řídí hero.js) */

/* ---- video v hero ----
   Polohu i rozměry počítá hero.js a zapisuje je sem jako inline styl, protože
   plocha se odvíjí od poměru stran videa a velikosti okna — v CSS by to šlo
   jen odhadem. Objeví se až po dokončení roztečení, jinak by během animace
   uprostřed organického tvaru probleskoval ostrý obdélník. */
.hero-video {
  position: absolute; z-index: 2; opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  overflow: hidden; border-radius: 4px;
}
.hero.is-expanded .hero-video { opacity: 1; pointer-events: auto; }
.hero-video video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* Pozadí musí zůstat průhledné. Plocha videa vychází z velikosti okna, takže
     její šířka bývá desetinná (942,21875 px) a prohlížeč obraz zaokrouhlí na
     celé pixely — zbylý zlomek pixelu na hraně prosvítal jako tmavá linka.
     Dřív ji schovával zoom 1.02; po zapečení ořezu do souboru vylezla. */
  background: transparent;
  /* Ořez je od 23. 9. natvrdo v souboru: master 3840×2158 se ořízl na
     3744×2106 (48 px zleva i zprava, 26 px nahoře i dole) a zmenšil na
     1920×1080. Tím zmizel černý pruh, který byl na levé hraně v záběrech
     mezi 40. a 83. vteřinou. Zoom přes CSS proto zůstává na 1 – slouží už
     jen jako rychlá pojistka, kdyby se v jiném exportu okraj objevil zas. */
  transform: scale(var(--video-orez, 1));
}

/* Křížek leží na videu, takže průhledné kolečko s 30% obrysem na něm nebylo
   vidět — na světlém záběru zmizelo úplně. Teď je to plná bílá placka se
   stínem, čitelná na jakémkoli obrazu pod ní. */
.hero-close {
  position: absolute; top: 24px; right: 32px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .94); color: #403485;
  box-shadow: 0 4px 16px rgba(30, 25, 60, .30);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .3s ease .25s, background .15s ease, color .15s ease, transform .15s ease;
}
.hero.is-playing  .hero-close { opacity: 1; }
.hero.is-expanded .hero-close { pointer-events: auto; }
.hero-close:hover { background: #6253CE; color: #ffffff; transform: scale(1.08); }
.hero-close:active { transform: scale(.96); }
.hero-close svg { width: 18px; height: 18px; display: block; }

/* mizení / návrat hero obsahu (fade + posun).
   Při zavření se texty vrací se stejným efektem obráceně (fade in + posun dolů),
   s malou prodlevou, ať to navazuje na smršťování plochy. */
.hero-title, .hero-sub, .hero-accent, .hero-btn { transition: opacity .45s ease .12s, transform .45s ease .12s, background .15s ease, color .15s ease; }
.hero-media, .hero-ring, .hero-video-popisek { transition: opacity .3s ease; }
.hero.is-playing .hero-title,
.hero.is-playing .hero-sub,
.hero.is-playing .hero-accent,
.hero.is-playing .hero-btn { opacity: 0; transform: translateY(-24px); pointer-events: none; transition-delay: 0s; }
.hero.is-playing .hero-media,
.hero.is-playing .hero-ring,
.hero.is-playing .hero-video-popisek,
.hero.is-collapsing .hero-media,
.hero.is-collapsing .hero-ring,
.hero.is-collapsing .hero-video-popisek { opacity: 0; pointer-events: none; }
/* na konci zavírání předáme blob zpět okamžitě (bez prolnutí), ať nebliká */
.hero.is-snapping .hero-media,
.hero.is-snapping .hero-ring,
.hero.is-snapping .hero-video-popisek { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-sub, .hero-accent, .hero-btn,
  .hero-media, .hero-ring, .hero-video-popisek, .hero-close { transition-duration: .01ms; }
}

/* ===================== HERO – MOBIL (pod 900 px) =====================
   Jeden sloupec: nadpis, podtitul, tlačítka, bublina, popisek. Dekorativní
   kolečka a proužek pod tlačítkem odpadají. Video se otevírá NA MÍSTĚ bubliny
   (16:9 na její šířku, počítá hero.js), takže texty nad ním zůstávají vidět
   a stránka při přehrávání neposkočí. */
@media (max-width: 899px) {
  .hero-inner {
    --u: 1px;                          /* nic se neškáluje, hodnoty níž jsou absolutní */
    width: auto; height: auto;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 36px 20px 32px;
  }
  .hero-title, .hero-sub, .hero-cta, .hero-video-popisek {
    position: static; left: auto; top: auto; transform: none; width: auto; min-width: 0;
  }
  .hero-title { order: 1; font-size: clamp(36px, 10.5vw, 52px); line-height: 1.12; }
  .hero-sub   { order: 2; margin-top: 14px; font-size: 18px; line-height: 1.5; }
  .hero-sub br { display: none; }     /* pevné zalomení z desktopu tu dělá sirotky */
  .hero-cta   { order: 3; margin-top: 26px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-btn   { height: 52px; min-width: 0; padding: 0 20px; justify-content: center; font-size: 18px; border-radius: 14px; }
  .hero-accent, .hero-ring { display: none; }
  .hero-media {
    order: 4; position: relative; left: auto; top: auto;
    margin: 34px auto 0; width: min(100%, 520px); height: auto; aspect-ratio: 698 / 570;
  }
  .hero-video-popisek {
    order: 5; margin: 14px auto 0; max-width: 100%;
    display: block; white-space: normal; font-size: 14px; line-height: 1.5;
  }
  .hero-video-cas { display: inline-block; vertical-align: middle; margin-right: 8px; }
  /* Video hraje na místě bubliny, texty kolem nemizí. */
  .hero.is-playing .hero-title, .hero.is-playing .hero-sub, .hero.is-playing .hero-btn,
  .hero.is-playing .hero-video-popisek, .hero.is-collapsing .hero-video-popisek {
    opacity: 1; transform: none; pointer-events: auto;
  }
}
@media (max-width: 359px) {
  .hero-inner { padding: 28px 16px 28px; }
  .hero-title { font-size: 34px; }
}

/* ===================== TŘI BAREVNÉ KARTY =====================
   Grid layout — výška se řídí obsahem, karty mají zarovnaný dolní okraj
   a mírně přesahují nahoru do hero. */
/* bílá plocha začíná přesně pod hero (spodní hrana prostoru pro video) */
.strips { background: #ffffff; padding: 0 24px 88px; }
.strips-inner {
  /* karty leží na bílé a horním okrajem lehce přesahují do fialové */
  max-width: 1060px; margin: -24px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  align-items: stretch;
}

.strip {
  position: relative;
  border: 1px solid #CFCBF3; border-radius: 24px;
  box-shadow: 6px 6px 14px 0 rgba(98, 83, 206, 0.10);
  padding: 32px 24px 32px;
  transform: translateY(0);
  /* dolů (odjetí myší): zrcadlový pohyb s jemným dosednutím */
  transition: transform .38s cubic-bezier(.34, 1.4, .64, 1), box-shadow .34s ease;
  will-change: transform;
}
.strip--teo { background: #CAC7F5; }
.strip--lab  { background: #E8F7F0; }
.strip--vr   { background: #FFE1D8; }

.strip-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.25; }
.strip--teo .strip-title { color: #403485; }
.strip--lab  .strip-title { color: #1E9E57; }
.strip--vr   .strip-title { color: #FE835E; }

.strip-text { margin: 0; font-size: 19px; line-height: 1.45; color: #6B6B76; }
.strip--teo .strip-text { color: #4A4470; }

/* číselné kolečko u pravého horního okraje */
.strip-num {
  position: absolute; top: -28px; right: 20px;
  width: 60px; height: 60px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 3px 10px rgba(98, 83, 206, 0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; line-height: 1;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.strip--teo .strip-num { color: #6253CE; }
.strip--lab  .strip-num { color: #1E9E57; }
.strip--vr   .strip-num { color: #FE835E; }

/* ---- Jemný pružný poskok při najetí myší; při odjetí stejný pohyb zrcadlově ---- */
.strip:hover, .strip:focus-within {
  transform: translateY(-11px);
  box-shadow: 0 16px 26px rgba(64, 52, 133, 0.16);
  z-index: 2;
  /* nahoru: lehké přepružení */
  transition: transform .32s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.strip:hover .strip-num, .strip:focus-within .strip-num {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 6px 14px rgba(98, 83, 206, 0.34);
}

/* ---- Při spuštění videa karty uhnou dolů, ať neblokují plochu videa ----
   Postupně (stagger) a s lehkým přepružením; zpět se vrátí po zavření. */
.hero.is-playing ~ .strips .strip,
.hero.is-collapsing ~ .strips .strip {      /* dokud se video smršťuje, karty drží dole */
  transform: translateY(72px);
  box-shadow: 6px 6px 14px 0 rgba(98, 83, 206, 0.10);
  pointer-events: none;
  transition: transform .52s cubic-bezier(.32, 1.18, .5, 1), box-shadow .3s ease;
}
.hero.is-playing ~ .strips .strip:nth-child(1) { transition-delay: 0s; }
.hero.is-playing ~ .strips .strip:nth-child(2) { transition-delay: .06s; }
.hero.is-playing ~ .strips .strip:nth-child(3) { transition-delay: .12s; }

/* návrat AŽ PO dojezdu videa — stejný stagger, jen v obráceném pořadí (3 → 2 → 1) */
.hero.is-returning ~ .strips .strip {
  pointer-events: none;
  transition: transform .52s cubic-bezier(.32, 1.18, .5, 1), box-shadow .3s ease;
}
.hero.is-returning ~ .strips .strip:nth-child(1) { transition-delay: .12s; }
.hero.is-returning ~ .strips .strip:nth-child(2) { transition-delay: .06s; }
.hero.is-returning ~ .strips .strip:nth-child(3) { transition-delay: 0s; }

/* ---- Responzivní: karty pod sebe ---- */
@media (max-width: 900px) {
  .strips-inner { grid-template-columns: 1fr; gap: 48px; max-width: 460px; margin-top: 0; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip, .strip-num, .strip:hover, .strip:focus-within { transition-duration: .01ms; }
  .strip:hover, .strip:focus-within { transform: translateY(-5px); }
}

/* ===================== JEDNA MÍSTNOST, TISÍC VYUŽITÍ ===================== */
.rooms { position: relative; background: #ffffff; padding: 80px 0 0; }
.rooms-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

/* eyebrow s tečkovanou linkou */
.eyebrow-line { display: flex; align-items: center; gap: 24px; margin: 0 0 48px; }
.eyebrow-line span {
  color: #6253CE; font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.eyebrow-line i { flex: 1; border-top: 2px dashed #B9B4E8; }

/* čára se dokresluje od popisku doprava (spouští reveal.js).
   Zbraňování je bez přechodu, ať čára při načtení nezmizí před očima. */
.eyebrow-line i { transform-origin: left center; }
.eyebrow-line.is-armed:not(.is-in) i { transform: scaleX(0); }
.eyebrow-line.is-in i { transition: transform .75s cubic-bezier(.22, .61, .36, 1); }

.rooms-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 465px;
  gap: 88px; align-items: start;
}

.rooms-title {
  margin: 0; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.rooms-title span { color: #6253CE; }
.rooms-squiggle { display: block; width: 240px; height: 18px; margin: 24px 0 var(--gap-squiggle) 4px; }

/* tři vlastnosti (ikona + text) */
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; max-width: 590px; }
.feat {
  display: flex; align-items: center; gap: 24px;
  background: #EEEDFD; border: 1px solid rgba(98, 83, 206, 0.4);
  border-radius: 14px; padding: 24px 24px;
}
.feat-ico {                     /* placeholder ikony */
  flex: 0 0 auto; width: 62px; height: 58px; border-radius: 8px;
  background: #ffffff; border: 1px solid rgba(98, 83, 206, 0.25);
  box-shadow: 1px 2px 11px rgba(98, 83, 206, 0.41);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.feat-txt { display: flex; flex-direction: column; font-size: 17px; color: #5B5B6B; line-height: 1.35; }
.feat-txt b { font-size: 18px; color: #111111; margin-bottom: 4px; }

/* ---------- mockup chatu ---------- */
.chat {
  border: 1px solid #E3E0F6; border-radius: 16px; overflow: hidden;
  background: #ffffff; box-shadow: 0 10px 30px rgba(98, 83, 206, 0.10);
}
.chat-bar {
  display: flex; align-items: center; gap: 8px;
  background: #F5F3FF; border-bottom: 1px solid #E9E6F9; padding: 16px 16px;
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot--r { background: #FF5F57; } .dot--y { background: #FEBC2E; } .dot--g { background: #28C840; }
.chat-name {
  margin: 0 0 0 16px; font-size: 13px; font-weight: 600;
  color: #717171; letter-spacing: .06em; text-transform: uppercase;
}

.chat-body { padding: 32px 24px; display: grid; gap: 24px; }
.msg { display: flex; align-items: flex-end; gap: 16px; }
.msg--out { justify-content: flex-end; }

/* ---- avatary v chatu ----
   Kresby jsou už ve zdroji oříznuté k okrajům plátna, takže se do kolečka
   sázejí s průhledným lemem — bez něj by kruh ukrojil uši a vlasy. Rezerva
   je asi 6 % poloměru, což stačí a přitom nechá obličej velký.

   background-size: contain, ne cover: obrázek je čtvercový jako kolečko,
   takže se vejde přesně, a kdyby někdy přišel v jiném poměru, radši
   zmenšit než uříznout. */
.avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: #DCD9EF center/contain no-repeat;
}
.msg--in  .avatar { background-image: url("assets/avatar-ucitel.png"); }
.msg--out .avatar { background-image: url("assets/avatar-zak.png"); }

.bubble { max-width: 290px; padding: 16px 16px 8px; border-radius: 15px; }
.bubble p { margin: 0; font-size: 16px; line-height: 1.4; }
.bubble .meta { display: block; margin-top: 8px; font-size: 11px; }
.msg--in .bubble {
  background: #6253CE; color: #ffffff; border-bottom-left-radius: 4px;
}
.msg--in .meta { color: rgba(255, 255, 255, 0.65); }
.msg--out .bubble {
  background: #EEEDFD; border: 1px solid #CFCBF3; color: #111111; border-bottom-right-radius: 4px;
}
.msg--out .meta { color: #717171; }

/* dvě zprávy od téhož autora za sebou (jako na Messengeru):
   avatar drží místo, ale je skrytý, ouško bubliny má až ta poslední
   a mezera mezi nimi je menší než mezi zprávami různých autorů */
.msg--stacked .avatar { visibility: hidden; }
.msg--stacked.msg--out .bubble { border-bottom-right-radius: 15px; }
.msg--stacked.msg--in  .bubble { border-bottom-left-radius: 15px; }
.msg--stacked + .msg { margin-top: -16px; }

.chat-input {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid #E0E0E8; border-radius: 15px; padding: 8px 8px 8px 16px; margin-top: 4px;
}
.chat-input span { font-size: 16px; color: #B4B4BE; }
.chat-send {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #6253CE; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.chat-send:hover { background: #5646C0; transform: scale(1.06); }
.chat-send svg { width: 18px; height: 18px; }

/* ---------- mockup chatu: animace psaní (řídí ji chat.js) ----------
   Všechny stavy visí pod .is-anim, kterou přidá skript teprve ve chvíli,
   kdy chat naskroluje do obrazu. Bez JS (i při „omezit pohyb") tedy zůstane
   chat staticky vykreslený přesně jako dosud.

   Zprávy se NIKDY neschovávají přes display:none — jen zprůhlední. Drží si
   tak své místo a sekce se během animace ani o pixel neposune. */
.chat-body { position: relative; }
.msg { position: relative; }

.chat.is-anim .msg { opacity: 0; transition: opacity .2s ease; }
.chat.is-anim .msg.is-typing,
.chat.is-anim .msg.is-done { opacity: 1; }

.chat.is-anim .bubble {
  opacity: 0;
  transform: translateY(10px) scale(.94);
  transform-origin: bottom left;
  transition: opacity .26s ease, transform .38s cubic-bezier(.34, 1.48, .64, 1);
}
/* odchozí bublina přilétá zespoda — od vstupního pole, odkud se „odeslala" */
.chat.is-anim .msg--out .bubble {
  transform: translateY(28px) scale(.9);
  transform-origin: bottom right;
}
.chat.is-anim .msg.is-done .bubble { opacity: 1; transform: none; }

/* bublinka se třemi tečkami — celý řádek (avatar + bublina) přisazený k HORNÍMU
   okraji místa, které si zpráva drží. Kdyby visel dole, zůstala by nad ním díra
   velká jako celá budoucí zpráva. Takhle vyroste bublina přesně z místa teček,
   dolů — jako na Messengeru.
   Vlastní avatar má proto, aby ten pravý nemusel skákat shora dolů; místo toho
   se obě dvojice jen prolnou. */
.typing {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; gap: 16px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px) scale(.92); transform-origin: top left;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1), visibility 0s .2s;
}
.msg.is-typing .typing {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1), visibility 0s;
}
.msg.is-typing > .avatar { visibility: hidden; }   /* zastoupí ho ten uvnitř .typing */
.typing-bubble {
  display: flex; align-items: center; gap: 4px;
  padding: 16px 16px;
  background: #6253CE;
  border-radius: 15px; border-bottom-left-radius: 4px;
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; opacity: .45; }
.msg.is-typing .typing i { animation: chat-dot 1.05s infinite ease-in-out; }
.msg.is-typing .typing i:nth-child(2) { animation-delay: .16s; }
.msg.is-typing .typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-dot {
  0%, 62%, 100% { transform: translateY(0);    opacity: .45; }
  31%           { transform: translateY(-5px); opacity: 1; }
}

/* psaní do pole „Napiš zprávu…" — text scrolluje jako ve skutečném inputu */
.chat-input span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.chat-input.is-writing span { color: #111111; }
.chat-caret {
  display: none;
  width: 1.5px; height: 17px; margin-left: 4px;
  background: #6253CE; vertical-align: -3px;
}
.chat-input.is-writing .chat-caret { display: inline-block; animation: chat-caret 1.05s steps(1) infinite; }
@keyframes chat-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* odeslání — tlačítko cukne */
.chat-send.is-sending { animation: chat-send .42s cubic-bezier(.34, 1.5, .64, 1); }
@keyframes chat-send {
  40%  { transform: scale(1.18) rotate(-10deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- vlnité pozadí + šipka dolů ---------- */
.rooms-wave { position: relative; margin-top: 96px; line-height: 0; }
.rooms-wave > svg { display: block; width: 100%; height: 190px; }
.rooms-scroll {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; text-decoration: none;
  background: #ffffff; box-shadow: 0 4px 14px rgba(98, 83, 206, 0.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s ease;
}
.rooms-scroll svg { width: 20px; height: 20px; }
.rooms-scroll:hover { transform: translateX(-50%) translateY(4px); box-shadow: 0 8px 20px rgba(98, 83, 206, 0.36); }

@media (max-width: 1080px) {
  .rooms-inner { padding: 0 24px; }
  .rooms-grid { grid-template-columns: 1fr; gap: 48px; }
  .chat { max-width: 465px; }
  .feats { max-width: none; }
}

/* ===================== MODEL VÝUKY ===================== */
.model { position: relative; background: #EEEDFD; padding: 72px 0 0; }
.model-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

.model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.model-title {
  margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.model-title span { color: #6253CE; }

/* žlutá samolepka */
.sticker {
  flex: 0 0 auto; margin: 16px 40px 0 0;
  background: #FFD93B; color: #111111;
  padding: 24px 48px; border-radius: 4px;
  transform: rotate(-7deg);
  box-shadow: 0 12px 26px rgba(64, 52, 133, 0.20);
}
.sticker b { display: block; font-size: 34px; font-weight: 800; letter-spacing: .02em; transform: rotate(-4deg); }

/* tři kroky */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  margin: 56px 0 0;
}
.step-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
}
.step-badge i {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 17px; font-weight: 700; color: #ffffff;
}
.step--teo .step-badge { background: #CFCBF3; color: #4A3FA8; }
.step--teo .step-badge i { background: #6253CE; }
.step--lab .step-badge { background: #D8F3E4; color: #17864A; }
.step--lab .step-badge i { background: #22A35C; }
.step--vr  .step-badge { background: #FFD9CB; color: #D9613C; }
.step--vr  .step-badge i { background: #FE835E; }

/* Princip ve třech krocích (Praxe ze světa) — táž trojice barev, ale vlastní
   názvy, aby class nelhala o obsahu: zkušenost → otázka → odpověď. */
.step--exp .step-badge { background: #D8F3E4; color: #17864A; }
.step--exp .step-badge i { background: #22A35C; }
.step--ask .step-badge { background: #FFD9CB; color: #D9613C; }
.step--ask .step-badge i { background: #FE835E; }
.step--ans .step-badge { background: #CFCBF3; color: #4A3FA8; }
.step--ans .step-badge i { background: #6253CE; }
/* Tady odznak nese jen číslo — název kroku je v nadpisu, tak ať pilulka
   není nakřivo od odsazení připraveného pro text vedle kolečka. */
.step-badge--num { padding: 8px; }

.step-title { margin: 24px 0 4px; font-size: 26px; font-weight: 700; color: #111111; }
.step-sub { margin: 0 0 24px; font-size: 16px; font-style: italic; font-weight: 600; }
.step--teo .step-sub { color: #6253CE; }
.step--lab .step-sub { color: #1E9E57; }
.step--vr  .step-sub { color: #FE835E; }
.step-text { margin: 0; font-size: 17px; line-height: 1.5; color: #5B5B6B; max-width: 300px; }

/* poměrový pruh
   Obal drží zaoblení a stín, vnitřek se animuje. Kdyby clip-path seděl přímo
   na .ratio, ořízl by si na konci vlastní stín — proto ta dvojice. */
.ratio-track {
  margin: 64px 0 0; border-radius: 14px; overflow: hidden;
  background: rgba(64, 52, 133, 0.07);
  box-shadow: 0 8px 20px rgba(64, 52, 133, 0.14);
}
.ratio { display: flex; }
.ratio-part {
  display: flex; align-items: center; justify-content: center;
  height: 56px; color: #ffffff; font-size: 20px; font-weight: 700;
}
.ratio--teo { flex: 40; background: #6253CE; }
.ratio--lab { flex: 35; background: #22A35C; }
.ratio--vr  { flex: 25; background: #FE835E; }

/* ---- naplnění pruhu zleva doprava (třída .wipe, spouští reveal.js) ----
   Jedna čára přejede přes všechny barvy naráz; procenta doskakují v okamžiku,
   kdy je míjí. Používá to poměrový pruh 40/35/25 i pruh praxe/teorie.

   Zbraňování je záměrně BEZ přechodu (aby text při načtení nezmizel před očima),
   přechod se zapíná až spolu s .is-in. Barvu si každá část drží svou vlastní —
   proto :not(.is-in) místo přebíjení konkrétní hodnotou. */
.wipe.is-armed { clip-path: inset(0 100% 0 0); }
.wipe.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
}
.wipe.is-armed:not(.is-in) .ratio-part,
.wipe.is-armed:not(.is-in) .split-part { color: transparent; }

.wipe.is-in .ratio-part,
.wipe.is-in .split-part { transition: color .25s ease; }
.wipe.is-in .ratio--teo,
.wipe.is-in .split--prac { transition-delay: .30s; }
.wipe.is-in .ratio--lab  { transition-delay: .50s; }
.wipe.is-in .ratio--vr   { transition-delay: .68s; }
.wipe.is-in .split--theo { transition-delay: .62s; }

/* CTA řádek */
.model-cta { display: flex; align-items: center; gap: 24px; margin: 48px 0 0; }
.dash-arrow { flex: 1; position: relative; border-top: 2px dashed #9A93D8; }
.dash-arrow::after {
  content: ""; position: absolute; right: -1px; top: -6px;
  border-left: 8px solid #9A93D8;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.btn-dark {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 64px; padding: 0 24px; border-radius: 16px;
  background: #403485; color: #ffffff; text-decoration: none;
  font-size: 18px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.btn-dark:hover { background: #322a6b; transform: translateY(-3px); }

/* bílá vlnovka na konci sekce */
.model-wave { position: relative; margin-top: 88px; line-height: 0; }
.model-wave > svg { display: block; width: 100%; height: 180px; }

@media (max-width: 1080px) {
  .model-inner { padding: 0 24px; }
  .model-head { flex-direction: column; }
  .sticker { margin: 0 0 8px; align-self: flex-end; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step-text { max-width: none; }
  .model-cta { flex-direction: column; align-items: stretch; }
  .dash-arrow { display: none; }
  .btn-dark { justify-content: center; }
}

/* ===================== ANATOMIE JEDNÉ HODINY ===================== */
.anat { position: relative; background: #ffffff; padding: 64px 0 0; overflow: hidden; }
.anat-inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 64px; }
/* blob je vystředěný na blok karet:
   karty zabírají 0–508 px (odsazení + max-width) → střed 254 px,
   svisle střed .lessons-wrap, takže se drží středu i při změně výšek karet */
.lessons-wrap { position: relative; }
.anat-blob {
  position: absolute; left: 254px; top: 50%;
  transform: translate(-50%, -50%);
  width: 516px; height: 588px; z-index: 0; pointer-events: none;   /* +20 % */
}
.lessons { position: relative; z-index: 1; }

.anat-note {
  margin: -32px 0 0; text-align: right;
  font-size: 16px; font-style: italic; color: #6B6B76;
}

.anat-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: start; margin-top: 48px;
}

/* ---- časová osa hodiny (kaskáda karet) ---- */
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; z-index: 1; }
.lesson {
  display: flex; align-items: stretch; overflow: hidden;
  background: #ffffff; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(64, 52, 133, 0.13);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.lesson:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64, 52, 133, 0.18); }
/* mírně nepravidelné odsazení, ať to nepůsobí strojeně */
.lesson:nth-child(1) { margin-left: 0;    max-width: 430px; }
.lesson:nth-child(2) { margin-left: 24px; max-width: 470px; }
.lesson:nth-child(3) { margin-left: 16px; max-width: 448px; }
.lesson:nth-child(4) { margin-left: 56px; max-width: 452px; }

.lesson-time {
  flex: 0 0 auto; width: 84px; padding: 16px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #ffffff; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.lesson-time b { font-size: 17px; letter-spacing: 0; }
.lesson--teo .lesson-time { background: #6253CE; }
.lesson--lab .lesson-time { background: #22A35C; }
.lesson--vr  .lesson-time { background: #FE835E; }
.lesson--ref .lesson-time { background: #16161D; }

/* ---- páteř časové osy (kreslí ji reveal.js podle skrolování) ----
   Karty jsou schválně rozházené, takže rovná čára vedená mezi nimi by nefungovala.
   Páteř proto stojí vlevo vedle nich a ke každé kartě vede vlastní přípojka —
   různě dlouhá právě o to, jak je karta odsazená. Souřadnice počítá skript
   z reálného rozložení, takže drží i po změně šířky okna. */
.lesson-thread {
  position: absolute; top: 0; left: -26px;
  z-index: 0; pointer-events: none; overflow: visible;
}
.lt-spine { fill: none; stroke: #C9C4E8; stroke-width: 3; stroke-linecap: round; }
.lt-stub  { stroke: #C9C4E8; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .35s ease; }
.lt-dot   {
  opacity: 0; transform: scale(.3);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.5, .64, 1);
}
.lt-stub.is-lit { opacity: 1; }
.lt-dot.is-lit  { opacity: 1; transform: scale(1); }

/* Karty se rozsvěcují, jak k nim čára doroste. Používáme vlastnost translate,
   ne transform — ten si drží efekt najetí myší a nesmíme mu ho přebít. */
.lessons.is-live .lesson {
  opacity: .38; translate: 0 10px;
  transition: opacity .45s ease, translate .45s ease,
              transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.lessons.is-live .lesson.is-lit { opacity: 1; translate: 0 0; }

.lesson-txt { padding: 16px 24px 16px; }
.lesson-txt h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #111111; }
.lesson-txt p  { margin: 0; font-size: 16px; line-height: 1.45; color: #5B5B6B; }

/* ---- pravý sloupec ---- */
.anat-title {
  margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.anat-title span { color: #6253CE; }
.anat-lead { margin: 0 0 32px; font-size: 18px; line-height: 1.6; color: #4A4A57; max-width: 520px; }

/* žlutý tip box */
.tip {
  background: #FFF8DC; border: 1px solid #F3E3A8;
  border-radius: 14px; padding: 24px 24px 24px; max-width: 520px;
}
.tip-label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 13px; font-weight: 700; color: #A98800;
  letter-spacing: .04em; text-transform: uppercase;
}
.tip h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #403485; }
.tip p  { margin: 0; font-size: 16px; line-height: 1.55; color: #6B6656; }

/* fialová vlnovka na konci sekce */
.anat-wave { position: relative; margin-top: 80px; line-height: 0; }
.anat-wave > svg { display: block; width: 100%; height: 180px; }

@media (max-width: 1080px) {
  .anat-inner { padding: 0 24px; }
  .anat-note { margin-top: 8px; text-align: left; }
  .anat-grid { grid-template-columns: 1fr; gap: 48px; }
  .anat-right { order: -1; }                       /* na mobilu nadpis nad osou */
  .lesson { margin-left: 0 !important; max-width: none !important; }
  .anat-blob { display: none; }
}

/* ===================== UKÁZKOVÉ UČEBNY ===================== */
.cls-sec { position: relative; background: #EEEDFD; padding: 64px 0 0; }
.cls-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

.cls-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.cls-h2 {
  margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.cls-h2 span { color: #6253CE; }
.cls-aside { padding-top: 16px; }
.cls-aside p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #6B6B76; }
.btn-purple {
  display: inline-flex; align-items: center; height: 64px; padding: 0 24px;
  border-radius: 16px; background: #6253CE; color: #ffffff; text-decoration: none;
  font-size: 17px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.btn-purple:hover { background: #5646C0; transform: translateY(-3px); }

/* ---- karta s záložkami ---- */
/* Odsazení karty je zároveň bílý okraj kolem okna porovnání — proto 24 px,
   ne 16: užší pruh působil jako ořez, ne jako rám. */
.cls {
  margin-top: 32px; background: #ffffff; border-radius: 18px;
  box-shadow: 0 14px 34px rgba(64, 52, 133, 0.12); padding: 24px;
}
.cls-tabs { display: flex; align-items: stretch; gap: 0; margin-bottom: 16px; }
.cls-tab {
  border: 0; background: none; cursor: pointer;
  padding: 16px 24px; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #6B6B76;
  position: relative; transition: color .15s ease, background .2s ease;
}
.cls-tab + .cls-tab::before {          /* oddělovač mezi neaktivními */
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: #D8D5EC;
}
.cls-tab:hover { color: #6253CE; }
.cls-tab.is-active { background: #6253CE; color: #ffffff; }
.cls-tab.is-active::before, .cls-tab.is-active + .cls-tab::before { content: none; }

/* všechny panely leží v jedné grid buňce → výška karty se při přepínání nemění
   (drží ji nejvyšší panel, tj. modelová třída Valhol) */
.cls-panels { display: grid; }
.cls-panel {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transition: opacity .22s ease;
}
.cls-panel.is-active { visibility: visible; opacity: 1; }

/* ---- fotka s klikacími body ---- */
.cls-photo {
  position: relative; border-radius: 12px; overflow: hidden; background: #EDEDF2;
  /* Okno nemá vlastní linku ani stín. Obojí jsme zkusili a obojí u půdorysu
     překáželo: linka soupeřila s jeho fialovými zdmi, stín ho odlepoval od
     karty, na které přitom leží. Okraj proto naznačuje bílý okraj kolem
     dokola — karta je širší než okno a její zaoblený tvar se stínem dělá
     rám za něj. */
}
/* =========================================================================
   Posuvník před / po

   KDE SE CO LADÍ  (ať se kvůli drobnosti nemusí nic hledat)

     bílý okraj kolem .... .cls       → padding         (a .cls-about → padding)
     zaoblení rohů ....... .cls-photo → border-radius
     poměr stran okna .... .ba        → aspect-ratio    (teď 1376 / 768)
     plocha vedle výkresu  .ba--vykres → background     (teď bílá)
     barva čáry .......... .ba-tahlo::before → background
     záře kolem čáry ..... .ba-tahlo::before → box-shadow
     úchyt ............... .ba-tahlo-uchyt → background, width, height
     sytost stopy ........ .ba-stopa → background (hodnoty v rgba)
     svislé vytrácení .... .ba-stopa → mask-image
     štítky Před / Po .... .ba-stitek

   Chování stopy (délka, práh, dojezd) se ladí čtyřmi konstantami na začátku
   souboru porovnani.js — jsou tam popsané jednotlivě.

   Pevný poměr stran drží .ba, ne fotka. Dodané snímky můžou mít nepatrně
   jiné rozměry a bez tohohle by karta při přepnutí záložky poskočila; navíc
   to drží procentní pozice klikacích bodů stabilní.
   ========================================================================= */
.ba {
  --x: 50%;
  position: relative; aspect-ratio: 1376 / 768; overflow: hidden;
  background: #EDEDF2; cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;        /* svislé rolování zůstává stránce */
}
.ba-vrstva { position: absolute; inset: 0; }
.ba-vrstva img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;       /* tažení vždy chytá .ba, ne obrázek */
}

/* Půdorysy jsou na výšku bližší formátu A4 než šířce posuvníku. Fotku lze
   oříznout bez ztráty smyslu, výkres ne — přišel by o zeď nebo o řadu lavic.
   Proto se vykreslí celý a po stranách zbude plocha karty.

   Ta plocha je bílá, protože bílé je i pozadí samotného výkresu (ověřeno —
   okraje souborů jsou přesně #FFFFFF). Jakýkoli jiný odstín by na hraně
   kresby udělal svislou linku a vypadalo by to, že je výkres oříznutý. */
.ba--vykres { background: #ffffff; }
.ba--vykres .ba-vrstva img { object-fit: contain; }

/* Vrstvy nesmí být průhledné: horní se sice ořezává, ale kdyby jí pod
   postranními pruhy prosvítala spodní, byly by tam vidět dva výkresy přes
   sebe. Bílá výplň každé vrstvy to drží oddělené. */
.ba--vykres .ba-vrstva { background: #ffffff; }

/* Horní vrstva se ořezává zprava. Clip-path nechává fotku v původní
   velikosti, takže se při tažení nic nepřepočítává. */
.ba-vrstva--pred { clip-path: inset(0 calc(100% - var(--x)) 0 0); }

/* ---- štítky ----
   Leží uvnitř své vrstvy, a tím se řeší, kdy mají zmizet: štítek „Před"
   se ořízne spolu s horní vrstvou, štítek „Po" pod ní zakryje. Žádné
   dopočítávání v JS.

   Žádný z-index! Obě vrstvy mají z-index auto, takže o pořadí rozhoduje
   pořadí v HTML — a vrstva „před" stojí až za vrstvou „po". Jakmile by
   štítek dostal z-index, vyskočil by nad obě vrstvy a štítek „Po" by
   zůstal svítit i ve chvíli, kdy je fotka „po" celá zakrytá. */
.ba-stitek {
  position: absolute; top: 16px; pointer-events: none;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(64, 52, 133, .72); color: #ffffff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ba-stitek--pred { left: 16px; }
.ba-stitek--po   { right: 16px; }

.ba-vrstva.je-prazdna img { display: none; }

/* Výplň patří vrstvě, popisek je jen malý štítek uprostřed své poloviny.
   Kdyby stál uprostřed celé fotky, ořízlo by ho táhlo vejpůl — každá vrstva
   vidí jen svůj díl. Proto 25 % zleva a 75 % zleva. */
.ba-vrstva--pred.je-prazdna { background: #E4E1F5; }
.ba-vrstva--po.je-prazdna   { background: #F7F6FC; }
/* ---- táhlo ----
   Žlutá je táž, kterou web podtrhává nadpisy. Na fotce se neztratí ani na
   světlém, ani na tmavém místě — proto kolem čáry tenký tmavý lem. */
.ba-tahlo {
  position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2;
  width: 48px; margin: 0; padding: 0; border: 0; background: transparent;
  transform: translateX(-50%); cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
.ba-tahlo::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: #FFD93B;
  /* Žádný obrys, jen záře v téže žluté — a ta při pohybu sílí. */
  box-shadow: 0 0 12px rgba(255, 217, 59, calc(.4 + var(--stopa-sila, 0) * .45));
}

/* ---- stopa za čárou ----
   Pruh se při tažení protahuje dozadu a vytrácí se do průhledna. Délku i sílu
   počítá porovnani.js z rychlosti pohybu; tady se mění jen transform
   a opacity, takže kreslení nezasahuje do layoutu.

   scaleX se záporným znaménkem pruh překlopí na druhou stranu čáry — stopa
   totiž zůstává vzadu, tedy proti směru tažení. */
.ba-stopa {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1;
  width: 420px; margin-left: -1px; pointer-events: none;
  transform-origin: left center;
  transform: scaleX(var(--stopa, 0));
  opacity: var(--stopa-sila, 0);
  /* Spád je nejprudší u čáry, dál se protahuje — pruh tak má zřetelné jádro
     a přitom dlouhý výběh, aby při rychlém tažení bylo vidět, kudy se jelo.
     Sytost držíme nízko: má to působit jako závan barvy, ne jako nátěr. */
  background: linear-gradient(to right,
    rgba(255, 217, 59, .52)  0%,
    rgba(255, 217, 59, .36) 12%,
    rgba(255, 217, 59, .21) 32%,
    rgba(255, 217, 59, .10) 62%,
    rgba(255, 217, 59, 0)  100%);

  /* Nahoře a dole se pruh vytrácí. Plná výška by vypadala jako obarvený sloupec;
     takhle je hmota u ruky, kde pohyb vzniká, a ke krajům se rozplyne. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 16%, #000 84%, transparent 100%);

  will-change: transform, opacity;
}

/* Úchyt drží tvar i stín po kulatých ovladačích jinde na webu, jen v barvě
   posuvníku. Šipky uvnitř zůstávají tmavě fialové — na žluté jsou čitelnější
   než bílá. */
.ba-tahlo-uchyt {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: #FFD93B;
  box-shadow: 0 4px 14px rgba(30, 25, 60, .22), 0 0 0 2px rgba(255, 255, 255, .85);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .2s ease;
}
.ba-tahlo-uchyt svg { width: 22px; height: 22px; }
.ba-tahlo:hover .ba-tahlo-uchyt { background: #FFE370; transform: scale(1.08); }
.ba.je-tazeno .ba-tahlo-uchyt { background: #FFE370; transform: scale(.96); }
.ba.je-tazeno { cursor: grabbing; }

/* Kdo má vypnuté animace, dostane posuvník bez stopy. */
@media (prefers-reduced-motion: reduce) {
  .ba-stopa { display: none; }
}

/* ---- popis učebny pod fotkou ----------------------------------------
   Nahradilo informační pruh se čtyřmi buňkami. Tlačítko na detail odešlo,
   kapacita a předměty taky, takže místo pokrývá text: vlevo název a předmět,
   vpravo popis přes celou zbylou šířku v jednom souvislém odstavci.
   Řádek má sice ke stovce znaků, ale text je dlouhý dvě až tři řádky —
   tam dlouhý řádek nevadí, oko se nemusí vracet. Rozdělení do dvou sloupců
   působilo u tří vět jako rozstříhaný odstavec. */
/* Mezera nad textem je zároveň vzduch pod oknem. Boky drží 8 px, aby text
   navazoval na hranu okna a nezdálo se, že je zasunutý dovnitř. */
.cls-about {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  align-items: start; padding: 32px 8px 8px;
}
.cls-about-name {
  margin: 0; padding-right: 32px;
  font-size: 18px; font-weight: 700; color: #111111; letter-spacing: .04em;
}
.cls-about-name span { font-weight: 600; letter-spacing: 0; color: #6253CE; }
.cls-about-name span::before { content: "·"; margin: 0 8px; color: #B9B4D8; font-weight: 400; }
/* Tři řádky si blok drží, i kdyby některý popisek zůstal kratší. Texty jsou
   psané na podobnou délku, ale zalomení se liší podle šířky okna — a bez téhle
   pojistky by karta při přepnutí záložky poskočila o řádek. */
.cls-about-text {
  margin: 0; padding-left: 32px; border-left: 1px dashed #C9C4E8;
  font-size: 16px; line-height: 1.65; color: #6B6B76;
  min-height: calc(3 * 1.65 * 16px);
}

/* bílá vlnovka na konci sekce */
.cls-wave { position: relative; margin-top: 80px; line-height: 0; }
.cls-wave > svg { display: block; width: 100%; height: 180px; }

@media (max-width: 1080px) {
  .cls-inner { padding: 0 24px; }
  .cls-about { grid-template-columns: 1fr; }
  .cls-about-name { padding-right: 0; margin-bottom: 16px; }
  .cls-about-text { padding-left: 0; border-left: 0; }
  .cls-head { grid-template-columns: 1fr; gap: 24px; }
  .btn-dark { justify-content: center; width: 100%; }
  .cls-tab { padding: 16px 16px; font-size: 13px; }
}

/* ===================== ZPŮSOB VÝUKY ===================== */
.way { position: relative; background: #ffffff; padding: 64px 0 0; }
.way-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

.way-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.way-h2 {
  margin: 0; font-size: clamp(36px, 4.8vw, 58px); line-height: 1.34;
  font-weight: 800; letter-spacing: -.01em;
}
.way-h2 em, .way-h2 span { font-style: normal; }
.way-h2 em   { color: #111111; }
.way-h2 span { color: #6253CE; }

.way-aside { padding-top: 8px; }
.way-aside p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #6B6B76; }

/* ---- poměr praxe / teorie ---- */
.split {
  background: #F5F3FF; border-radius: 18px;
  padding: 24px 32px 24px; margin: 32px 0 0;
}
.split-row { display: flex; justify-content: space-between; gap: 24px; font-size: 15px; color: #6B6B76; }
.split-row--sub { margin-top: 16px; }
.split-bar { display: flex; margin-top: 16px; border-radius: 12px; overflow: hidden; }
.split-part {
  display: flex; align-items: center; justify-content: center;
  height: 56px; font-size: 19px; font-weight: 700;
}
.split--prac { flex: 60; background: #6253CE; color: #ffffff; }
.split--theo { flex: 40; background: #CFCBF3; color: #3A3170; }

/* ---- tři statistiky ---- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
  margin: 64px 0 0;
}
.stat { position: relative; }
/* čárkované dělící čáry, stejně vysoké */
.stat + .stat::before {
  content: ""; position: absolute; left: -31px; top: 50%; transform: translateY(-50%);
  height: 168px; border-left: 1px dashed #C9C4E8;
}
.stat-num {
  display: block; font-size: clamp(46px, 5.6vw, 68px); font-weight: 800;
  line-height: 1.05; color: #6253CE; letter-spacing: -.02em; margin-bottom: 24px;
}
/* odometr u velkých čísel (staví ho reveal.js)
   Každý znak dostane vlastní sloupec. U číslic je ve sloupci celá desítka
   několikrát za sebou, přičemž PRVNÍ i POSLEDNÍ políčko je ta správná číslice —
   dokud efekt neproběhne, svítí tedy správná hodnota, a po protočení dosedne
   zpátky na ni. Nikdy se tak nikde neukáže „0 %".
   Výška políčka = řádkování .stat-num, aby se rozložení stránky nezměnilo;
   číslice ani % # min nemají poddolní tahy, takže se do ní vejdou. */
.odo { display: inline-block; vertical-align: top; height: 1.05em; overflow: hidden; }
.odo-strip { display: block; font-variant-numeric: tabular-nums; }
.odo-strip > span { display: block; height: 1.05em; line-height: 1.05em; white-space: pre; }

.stat h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #111111; }
.stat p  { margin: 0; font-size: 16px; line-height: 1.5; color: #5B5B6B; max-width: 300px; }

/* fialová vlnovka na konci sekce */
.way-wave { position: relative; margin-top: 80px; line-height: 0; }
.way-wave > svg { display: block; width: 100%; height: 180px; }

@media (max-width: 1080px) {
  .way-inner { padding: 0 24px; }
  .way-head { grid-template-columns: 1fr; gap: 24px; }
  .way-aside .btn-dark { justify-content: center; width: 100%; }
  .split { padding: 24px 24px 16px; }
  .split-row { font-size: 14px; }
  .split-row--sub span:last-child { text-align: right; }
  .stats { grid-template-columns: 1fr; gap: 40px; }
  .stat + .stat::before { content: none; }
  .stat p { max-width: none; }
  .stat-num { margin-bottom: 16px; }
}

/* ===================== O NÁS ===================== */
.about { background: #EEEDFD; padding: 64px 0 80px; }
.about-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

.about-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.about-h2 {
  margin: 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.24;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.about-h2 span { color: #6253CE; }
.about-head .btn-dark { margin-top: 48px; }

.about-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px;
  margin-top: 32px;
}
.about-cols p { margin: 0 0 24px; font-size: 16px; line-height: 1.62; color: #4A4A57; }
.about-cols p:last-child { margin-bottom: 0; }
/* Uzavírací odstavec přes celou šířku pod oběma sloupci. Dřív tu stál citát
   zakladatele; ten ve Figmě není a placeholder se do produkce nehodí, takže
   spodní hranu sekce drží text, který dřív visel ve druhém sloupci. Čárkovaná
   linka nad ním zůstala — dělí sloupce od uzávěru stejně jako dřív citát. */
.about-tail {
  margin: 48px auto 0; padding: 32px 0 0;
  border-top: 1px dashed #C9C4E8;
  font-size: 16px; line-height: 1.62; color: #4A4A57;
  max-width: 980px;
}

/* ===================== KONTAKT ===================== */
.contact { background: #ffffff; padding: 88px 0 104px; }
.contact-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: start;
}
.contact-h2 {
  margin: 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.22;
  font-weight: 800; color: #6253CE; letter-spacing: -.01em;
}

/* kontaktní údaje */
.cinfo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.cinfo li { display: flex; align-items: center; gap: 16px; font-size: 16px; color: #333340; }
.cinfo a { color: #333340; text-decoration: none; }
.cinfo a:hover { color: #6253CE; }
.cinfo-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: #ffffff; box-shadow: 0 3px 12px rgba(64, 52, 133, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.cinfo-ico svg { width: 21px; height: 21px; }

.csocial { display: flex; gap: 16px; margin-top: 32px; }
.csocial a {
  width: 38px; height: 38px; border-radius: 9px; background: #6253CE;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.csocial a:hover { background: #403485; transform: translateY(-3px); }
.csocial svg { width: 22px; height: 22px; }

/* ---- formulář ---- */
.cform {
  background: #F7F5FF; border: 1px solid #DDD8F6; border-radius: 16px;
  padding: 32px 32px 32px;
}
.cform-label {
  display: block; margin: 0 0 16px;
  font-size: 14px; font-weight: 700; color: #6253CE;
}
.cform-label--muted { color: #9A94BE; font-weight: 600; margin-top: 24px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  border: 1px solid #DDD8F6; background: #ffffff; cursor: pointer;
  padding: 8px 16px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #5B5B6B;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: #6253CE; color: #6253CE; }
.chip.is-active { background: #403485; border-color: #403485; color: #ffffff; }

.cinput, .carea {
  width: 100%; font-family: inherit; font-size: 16px; color: #333340;
  background: transparent; border: 0; outline: none;
}
.cinput {
  border-bottom: 1px solid #CFCBF3; padding: 8px 4px 8px;
  transition: border-color .15s ease;
}
.cinput:focus { border-bottom-color: #6253CE; }
.cinput::placeholder, .carea::placeholder { color: #B9B4D0; }
.carea {
  background: #ffffff; border: 1px solid #DDD8F6; border-radius: 10px;
  padding: 16px 16px; resize: vertical; min-height: 96px;
  transition: border-color .15s ease;
}
.carea:focus { border-color: #6253CE; }

.cform-send {
  width: 100%; margin-top: 24px; height: 48px; border: 0; border-radius: 8px;
  background: #403485; color: #ffffff; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s ease, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.cform-send:hover { background: #322a6b; transform: translateY(-2px); }
/* Past na roboty. Musí zůstat vyplnitelná, takže ne display:none — ta by
   ji v části prohlížečů vyřadila z odesílaných dat i pro robota. */
.cform-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- souhlas se zpracováním údajů ---- */
.cform-consent {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 24px; font-size: 13px; line-height: 1.5; color: #5B5B6B;
  cursor: pointer;
}
.cform-consent input {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0;
  accent-color: #6253CE; cursor: pointer;
}
.cform-consent a { color: #6253CE; }

/* ---- nápověda u překlepu v doméně ----
   Nic neblokuje, jen se zeptá. Návrh je tlačítko, protože se po kliknutí
   adresa opraví — není to odkaz nikam. */
.cform-tip {
  margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #8A6D00;
}
.cform-tip button {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: #6253CE; text-decoration: underline;
}
.cform-tip button:hover { color: #403485; }

/* ---- hláška po odeslání ---- */
.cform-note {
  margin: 16px 0 0; padding: 8px 16px; border-radius: 8px;
  font-size: 14px; line-height: 1.5; text-align: center;
}
.cform-note.is-ok  { background: #E7F6EE; color: #1B6B42; }
.cform-note.is-err { background: #FDECEA; color: #A32717; }

/* ---- tlačítko během odesílání ---- */
.cform-send:disabled { background: #9A94BE; cursor: progress; transform: none; }

@media (max-width: 1080px) {
  .about-inner, .contact-inner { padding: 0 24px; }
  .about-head { flex-direction: column; }
  .about-head .btn-dark { margin-top: 4px; }
  .about-cols { grid-template-columns: 1fr; gap: 24px; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .contact { padding: 64px 0 72px; }
}

/* =========================================================================
   PODSTRÁNKA O NÁS
   ========================================================================= */
.ab-inner { max-width: 1320px; margin: 0 auto; padding: 0 64px; }

/* ---- úvod ---- */
.ab-hero { background: #EEEDFD; padding: 48px 0 64px; }
.ab-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px; align-items: center;
}
.ab-h1 {
  margin: 0 0 var(--gap-title); font-size: clamp(34px, 4.6vw, 52px); line-height: 1.24;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.ab-h1 span { color: #6253CE; }
/* výjimky: pod nadpisem následuje vlnka nebo je nadpis ve dvousloupcovém gridu */
.ab-hero-grid .ab-h1,
.br-right .ab-h1,
.pw-hero .ab-h1 { margin-bottom: 0; }
.pw-world .ab-h1 { margin-bottom: var(--gap-lead); }

.ab-quote-card {
  position: relative; background: #FFF3C4; border-radius: 12px;
  padding: 24px 24px 24px 72px;
}
.ab-quote-mark {
  position: absolute; left: 22px; top: 14px;
  font-size: 56px; line-height: 1; color: #F0C93A; font-weight: 800;
}
.ab-quote-card p { margin: 0; font-size: 16px; line-height: 1.5; color: #3F3A20; }

/* ---- úvodní text + čísla ---- */
.ab-intro { background: #ffffff; padding: 40px 0 8px; }
.ab-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px;
}
.ab-cols p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #4A4A57; }
.ab-cols strong { color: #2C2C38; }

.ab-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid #E0DCF5; border-radius: 12px;
  margin-top: 40px; padding: 24px 8px;
  box-shadow: 0 6px 18px rgba(64, 52, 133, 0.07);
}
.ab-stat { position: relative; text-align: center; padding: 0 24px; }
.ab-stat + .ab-stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 62px; border-left: 1px dashed #D5D0EE;
}
.ab-stat b {
  display: block; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800;
  color: #6253CE; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 8px;
}
.ab-stat span { font-size: 15px; color: #6B6B76; }

/* ---- naše cesta (časová osa) ---- */
.ab-path { position: relative; background: #ffffff; padding: 56px 0 0; }
.ab-h2 {
  margin: 0 0 var(--gap-title); font-size: clamp(30px, 3.9vw, 44px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}

.tl { list-style: none; margin: 0; padding: 0 0 8px; position: relative; }
.tl-item { position: relative; display: block; padding: 0 0 48px 72px; }
.tl-item:last-child { padding-bottom: 8px; }
/* čárkovaná spojnice mezi body */
.tl-item::before {
  content: ""; position: absolute; left: 21px; top: 34px; bottom: -6px;
  border-left: 2px dashed #C9C4E8;
}
.tl-item:last-child::before { content: none; }

.tl-dot {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFD84D; border: 5px solid #ffffff;
  box-shadow: 0 0 0 2px #F6E9B6;
}
.tl-item--now .tl-dot { background: #4A3FB8; box-shadow: 0 0 0 2px #CFCBF3; }

.tl-body h3 {
  margin: 0 0 8px; font-size: 24px; font-weight: 800; color: #6253CE; letter-spacing: -.01em;
}
.tl-body b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 700; color: #111111; }
.tl-body p { margin: 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; max-width: 640px; }

.ab-wave { position: relative; line-height: 0; margin-top: 48px; }
.ab-wave > svg { display: block; width: 100%; height: 150px; }

/* ---- partneři ---- */
.ab-partners { background: #EEEDFD; padding: 48px 0 0; }
/* leXsolar a podobné značky se píšou s malým prvním písmenem — verzálky
   z .pcard h3 by je přepsaly, tak je tahle třída nechá být. */
.pcard .pcard-name--raw { text-transform: none; }
.ab-lead { margin: calc(var(--gap-title) * -.5) 0 var(--gap-title); font-size: 15.5px; line-height: 1.6; color: #5B5B6B; }

.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pcard {
  background: #ffffff; border: 1px solid #E4E1F4; border-radius: 12px;
  padding: 24px 24px 24px;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.pcard:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64, 52, 133, 0.14); }
.pcard-tag {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #6253CE;
  letter-spacing: .1em; text-transform: uppercase;
}
.pcard h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #111111; text-transform: uppercase; letter-spacing: .04em; }
.pcard p { margin: 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; }

/* ---- závěr ---- */
.ab-outro { background: #ffffff; padding: 24px 0 72px; }
.ab-credo {
  margin: 0 0 24px; padding-left: 24px;
  border-left: 4px solid #6253CE;
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.45;
  font-weight: 700; color: #6253CE;
}
.ab-outro-text { margin: 0; font-size: 15px; line-height: 1.62; color: #5B5B6B; max-width: 900px; }

@media (max-width: 1080px) {
  .ab-inner { padding: 0 24px; }
  .ab-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ab-cols { grid-template-columns: 1fr; gap: 24px; }
  .ab-stats { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .ab-stat + .ab-stat::before { content: none; }
  .pcards { grid-template-columns: 1fr; }
  .tl-body p { max-width: none; }
}

/* =========================================================================
   PODSTRÁNKA PRAXE ZE SVĚTA
   ========================================================================= */
.pw-hero { background: #EEEDFD; padding: 48px 0 0; }
.pw-hero .ab-h1 { margin-bottom: 8px; }

.pw-text { background: #ffffff; padding: 40px 0 0; }
.pw-text > .ab-inner > p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.65; color: #4A4A57; max-width: 1000px; }
.pw-text > .ab-inner > p:last-child { margin-bottom: 0; }
.pw-sub { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: #111111; }
/* Popisek sekce je taky <p>, takže by mu pravidlo výš vzalo odstup i velikost. */
.pw-text > .ab-inner > .eyebrow-line { margin: 40px 0 4px; max-width: none; }
.pw-text > .ab-inner > .steps { margin: 24px 0 48px; }

.pw-world { background: #EEEDFD; padding: 48px 0 72px; }
.pw-lead { margin: 0 0 var(--gap-title); font-size: 15.5px; line-height: 1.62; color: #5B5B6B; max-width: 760px; }

/* karty referencí
   Tři do řádku: po vypuštění placeholderu „naše realizace" zbyly tři a ve
   dvou sloupcích by poslední visela sama v půlce řádku. */
.rcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rcard {
  background: #ffffff; border: 1px solid #E4E1F4; border-left: 3px solid #6253CE;
  border-radius: 10px; padding: 16px 24px 24px;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.rcard:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64, 52, 133, 0.14); }
.rcard-meta { margin: 0 0 8px; font-size: 14px; color: #6253CE; }
.rcard h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #111111; }
.rcard p { margin: 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; }

@media (max-width: 1080px) {
  .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rcards { grid-template-columns: 1fr; }
}

/* =========================================================================
   PODSTRÁNKA CO SE DĚJE V HLAVĚ
   ========================================================================= */
.br-hero { background: #EEEDFD; padding: 40px 0 0; }
.br-main { background: #ffffff; padding: 24px 0 80px; overflow-x: clip; }   /* blob mozku přesahuje sloupec, ne stránku */
.br-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
}

/* ---- ilustrace mozku s popisky ---- */
/* mozek je o kousek užší než sloupec, aby se blob vešel a nelezl do textu */
.brain { position: relative; max-width: 90%; }
/* blob přesahuje mozek na všech stranách, ale zůstává ve svém sloupci */
.brain-blob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 122%; height: 112%; z-index: 0; pointer-events: none;
}
.brain-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

.bs {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -100%);
}
/* body sedí na lalocích ilustrace (mozek je z profilu, čelo vlevo) */
.bs--motor   { left: 44%; top: 30%; }   /* motorická kůra — temeno */
.bs--frontal { left: 17%; top: 49%; }   /* čelní lalok — vlevo vpředu */
.bs--visual  { left: 84%; top: 62%; }   /* zraková kůra — vzadu */
.bs--hippo   { left: 46%; top: 78%; }   /* hipokampus — středem dovnitř */

.bs-label {
  background: #ffffff; border-radius: 8px; padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(30, 25, 60, 0.20);
  display: flex; flex-direction: column; align-items: center; white-space: nowrap;
}
.bs-label b { font-size: 14px; font-weight: 700; color: #111111; }
.bs-label i { font-size: 13px; font-style: normal; color: #6B6B76; }

.bs-dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: #FE835E; border: 4px solid #FFE9A8;
  box-shadow: 0 4px 12px rgba(226, 120, 82, 0.4);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

.br-quote { margin-top: 32px; }

/* ---- pravý sloupec ---- */
.br-lead { margin: 16px 0 32px; font-size: 15.5px; line-height: 1.65; color: #4A4A57; }
.br-block { margin-bottom: 24px; }
.br-block:last-child { margin-bottom: 0; }
.br-block h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #6253CE; }
.br-block p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A4A57; }

@media (max-width: 1080px) {
  .br-grid { grid-template-columns: 1fr; gap: 48px; }
  .br-right { order: -1; }
  .bs-label { display: none; }        /* na malých displejích jen body */
  /* v jednom sloupci má mozek celou šířku; blob přesahuje jen o kousek,
     aby nevylézal za okraj displeje */
  .brain { max-width: 100%; }
  .brain-blob { width: 104%; height: 106%; }
}

/* =========================================================================
   PODSTRÁNKA PRO KOHO TO JE
   ========================================================================= */
.pk-hero { background: #EEEDFD; padding: 40px 0 0; }
.pk-h1 {
  margin: 0 0 var(--gap-lead); font-size: clamp(32px, 4.4vw, 50px); line-height: 1.2;
  font-weight: 800; color: #111111; letter-spacing: -.01em;
}
.pk-h1 span { color: #6253CE; }
.pk-hero-text { margin: 0; font-size: 15px; line-height: 1.6; color: #5B5B6B; max-width: 780px; }

/* ---- sedne nám to? ---- */
.pk-fit { background: #ffffff; padding: 40px 0 0; }
.pk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.pk-list-h { margin: 0 0 16px; font-size: 19px; font-weight: 700; color: #111111; }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pk-list li {
  position: relative; padding-left: 32px;
  font-size: 15px; line-height: 1.5; color: #5B5B6B;
}
.pk-list strong { color: #2C2C38; }
.pk-list li::before {
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #ffffff;
}
.pk-list--yes li::before { content: "✓"; background: #22A35C; }
.pk-list--no  li::before { content: "✕"; background: #E4574A; }

/* ---- klady (číslovaný seznam) ---- */
.pk-pros { background: #EEEDFD; padding: 48px 0 0; }
.pk-num { list-style: none; margin: 0; padding: 0; }
.pk-num li {
  display: flex; gap: 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px dashed #C9C4E8;
}
.pk-num li:last-child { border-bottom: 0; }
.pk-num-i {
  flex: 0 0 auto; width: 42px;
  font-size: 22px; font-weight: 800; color: #6253CE; letter-spacing: -.01em;
}
.pk-num h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #111111; }
.pk-num p  { margin: 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; max-width: 780px; }

/* ---- zápory a rizika ---- */
.pk-risks { background: #ffffff; padding: 40px 0 0; }
.pk-risk-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px; margin-bottom: 16px;
}
.pk-risk h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #111111; }
.pk-risk p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: #5B5B6B; }
.pk-risk p:last-child { margin-bottom: 0; }
.pk-risk strong { color: #6253CE; }

.pk-eyebrow-gap { margin-top: 56px !important; }

/* ---- financování ---- */
.pk-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pk-fin-card {
  background: #F5F3FF; border: 1px solid #E0DCF5; border-radius: 12px;
  padding: 24px 24px 24px;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.pk-fin-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(64, 52, 133, 0.14); }
.pk-badge {
  display: inline-block; margin-bottom: 16px;
  background: #6253CE; color: #ffffff; border-radius: 999px;
  padding: 4px 16px; font-size: 13px; font-weight: 700;
}
.pk-fin-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #111111; }
.pk-fin-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; }

/* ---- jak začít (4 kroky) ---- */
.pk-steps { background: #EEEDFD; padding: 48px 0 72px; }
.pk-way {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.pk-way b {
  display: block; margin-bottom: 16px;
  font-size: 30px; font-weight: 800; color: #6253CE; line-height: 1;
}
.pk-way h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #111111; }
.pk-way p  { margin: 0; font-size: 15px; line-height: 1.5; color: #5B5B6B; }

/* ---- FAQ ---- */
.faq { display: grid; }
.faq-item { border-bottom: 1px dashed #C9C4E8; padding: 16px 0; }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; color: #111111;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  font-size: 22px; font-weight: 700; color: #6253CE; line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #5B5B6B; max-width: 860px; }

@media (max-width: 1080px) {
  .pk-cols, .pk-risk-grid { grid-template-columns: 1fr; gap: 32px; }
  .pk-fin, .pk-way { grid-template-columns: 1fr; gap: 24px; }
  .pk-num li { flex-direction: column; gap: 8px; }
  .pk-num p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .rcard, .pk-fin-card { transition-duration: .01ms; }
}

/* Dokud visí cookie lišta, odsuneme šipku nahoru — na mobilu leží lišta
   přes celou šířku dole a jinak by se překrývaly. */
.ma-cookie-listu .to-top { bottom: 140px; }
@media (min-width: 561px) { .ma-cookie-listu .to-top { bottom: 28px; } }

/* ---------- šipka zpět na začátek (vkládá ji nav.js) ----------
   Objeví se až po odskrolování o výšku okna, aby na začátku nepřekrývala obsah. */
.to-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 900;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #403485;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(64, 52, 133, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1),
              background .15s ease, visibility 0s .25s;
}
.to-top.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1),
              background .15s ease, visibility 0s;
}
.to-top:hover  { background: #322a6b; transform: translateY(-3px); }
.to-top:active { transform: scale(.96); }
.to-top svg    { width: 22px; height: 22px; display: block; }

@media (max-width: 700px) {
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* jednoduchý placeholder box pro podstránky */
.placeholder {
  border: 2px dashed #c9c4ef; border-radius: 18px;
  padding: 40px; color: var(--muted); background: #fff;
}

/* ---------- Patička ---------- */
/* patičku má na starost footer.js (web component <site-footer>) */

@media (max-width: 980px) {
  .page { padding: 40px 24px 64px; }
}

/* ===================== MOBIL – RYTMUS SEKCÍ A VLNY (pod 900 px) =====================
   Vlny mají na desktopu pevnou výšku 180–190 px při šířce 1440, tedy asi
   13 % šířky. Protože mají preserveAspectRatio="none", na 390 px zůstaly
   stejně vysoké — z jemného zvlnění se stal kopec přes půl obrazovky a mezi
   sekcemi zůstávalo prázdno. Tady se výška váže na šířku okna, takže poměr
   sedí na desktop, a odsazení sekcí drží jeden rytmus: 56 nahoře, 40 nad
   vlnou. */
@media (max-width: 899px) {
  .rooms-wave > svg,
  .model-wave > svg,
  .anat-wave  > svg,
  .cls-wave   > svg,
  .way-wave   > svg { height: clamp(58px, 18vw, 180px); }
  .rooms-wave, .model-wave, .anat-wave, .cls-wave, .way-wave { margin-top: 40px; }
  .ab-wave > svg { height: clamp(48px, 15vw, 150px); }
  .ab-wave { margin-top: 32px; }
  /* šipka „dál" sedí uprostřed nižší vlny */
  .rooms-scroll { bottom: 12px; width: 42px; height: 42px; }

  .rooms   { padding-top: 56px; }
  .model   { padding-top: 56px; }
  .anat    { padding-top: 56px; }
  .cls-sec { padding-top: 56px; }
  .way     { padding-top: 56px; }
  .about   { padding: 56px 0 56px; }
  .contact { padding: 56px 0 64px; }
  .strips  { padding-bottom: 56px; }
  .eyebrow-line { margin-bottom: 28px; }
}

/* Uhýbání karet dolů má smysl jen na desktopu, kde se video roztéká přes celou
   sekci a karty by mu stály v cestě. Na mobilu hraje video na místě bubliny,
   takže karty nikomu nepřekážejí a jejich posun jen trhal layoutem. */
@media (max-width: 899px) {
  .hero.is-playing ~ .strips .strip,
  .hero.is-collapsing ~ .strips .strip {
    transform: none; pointer-events: auto;
  }
}

/* ===================== MOBIL – CO SE VYNECHÁVÁ (pod 900 px) =====================
   Mockup chatu a žlutá samolepka jsou ozdoba k širokému layoutu. Na výšku
   displeje jen přidávaly obrazovky navíc mezi obsahem, tak na mobilu odpadají.
   Zůstávají v HTML — display:none znamená, že se avatary v chatu ani nestáhnou. */
@media (max-width: 899px) {
  .chat, .sticker { display: none; }
}

/* ===================== MOBIL – DOTYK A ČITELNOST (pod 900 px) =====================
   Společné doladění pro dotykové displeje: klikací cíle aspoň 44 px, pole
   formuláře 16 px (menší písmo v inputu nutí iOS Safari přibližovat stránku),
   drobné štítky aspoň 12 px. Desktop se těchto pravidel nedotkne. */
@media (max-width: 899px) {
  /* kontaktní formulář */
  .cform { padding: 24px 20px; }
  .chips { gap: 10px; }
  .chip { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .cinput { min-height: 48px; padding: 12px 4px; font-size: 16px; }
  .carea { font-size: 16px; min-height: 120px; }
  .cform-send { height: 52px; font-size: 15px; }
  .cform-consent { font-size: 14px; }
  .cform-consent input { width: 20px; height: 20px; margin-top: 1px; }
  .cform-tip { font-size: 14px; }
  .cform-tip button { padding: 8px 0; }

  /* kontakty: řádek s ikonou i ikony sítí jako pohodlné cíle pro prst */
  .cinfo li { min-height: 44px; }
  .cinfo a { display: inline-flex; align-items: center; min-height: 44px; }
  .csocial a { width: 44px; height: 44px; border-radius: 11px; }

  /* chat a rozvrh hodiny: štítky nad hranicí čitelnosti */
  .bubble .meta { font-size: 12px; }
  .lesson-time { font-size: 12px; }

  /* záložky učeben: na nejužších displejích se čtyři nevejdou vedle sebe,
     tak se řádek posouvá prstem místo zalamování */
  .cls-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cls-tabs::-webkit-scrollbar { display: none; }
  .cls-tab { flex: 0 0 auto; min-height: 44px; }
}
@media (max-width: 480px) {
  /* karta učeben: užší okraje a těsnější záložky, ať se všechny čtyři
     vejdou vedle sebe i na 360 px bez posouvání */
  .cls { padding: 16px; }
  .cls-tabs { margin-bottom: 12px; }
  .cls-tab { padding: 14px 11px; font-size: 12.5px; letter-spacing: .06em; }
  .cls-about { padding: 24px 4px 4px; }
}