/* ==================================================================
   HOMEPAGE — Ordinace bez papíru
   Zatím jen top bar + hero (design/design_handoff_ordinace_web).
   Design system a starší prvky: /navrh.html
   ================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hyacinth: #47466d;
  --cendre: #3d84a7;
  --turquoise: #46cdcf;
  --mint: #abedd8;
  --navy: #001d39;
  --sky: #7bbde8;
  --beau: #bdd8e9;
  --ink: #2f2e4d;
  --muted: #6f7d90;
  --line: #e3edf0;
  /* levá/pravá hrana top baru — na ni lícuje obsah hero */
  --page-inset: max(calc((100% - 1240px) / 2), 1rem);
}

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

/* ============ TOP BAR ============ */
.nav {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 64px;
  width: min(1240px, calc(100% - 2rem));
  margin: 0.75rem auto 0;
  padding-inline: clamp(1rem, 2.5vw, 1.75rem);
  background: rgb(255 255 255 / 0.82); /* bílý ostrov dle handoffu — mint zůstává jen kruhu v hero */
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--mint); /* mintový stroke — sváže lištu s kruhem v hero */
  border-radius: 18px;
  box-shadow: 0 8px 30px -12px rgb(47 46 77 / 0.18);
  transition: transform 0.3s ease;
}

.nav.is-hidden {
  transform: translateY(calc(-100% - 1.25rem));
}

.nav__group {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.nav__group--right {
  justify-content: flex-end;
}

.nav a {
  color: #000;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 350; /* tenká Jakarta v liště, o chlup plnější než Light */
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--cendre);
}

/* „Další témata" — rozbalovací zbytek hubů (hover i focus, bez JS) */
.nav__more {
  position: relative;
}

.nav__more-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 350;
  letter-spacing: 0.01em;
  color: #000;
  transition: color 0.15s ease;
}

.nav__more:hover .nav__more-btn,
.nav__more:focus-within .nav__more-btn {
  color: var(--cendre);
}

.nav__more-btn svg {
  transition: transform 0.15s ease;
}

.nav__more:hover .nav__more-btn svg,
.nav__more:focus-within .nav__more-btn svg {
  transform: rotate(180deg);
}

.nav__panel {
  position: absolute;
  top: 100%;
  left: -1rem;
  padding: 1.4rem 0 0; /* neviditelný můstek, ať hover nespadne v mezeře */
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  transition:
    opacity 0.15s ease,
    translate 0.15s ease,
    visibility 0s 0.15s;
}

.nav__more:hover .nav__panel,
.nav__more:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity 0.15s ease,
    translate 0.15s ease;
}

/* vnitřek panelu — stejný ostrov jako lišta */
.nav__panel-box {
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--mint);
  border-radius: 14px;
  box-shadow: 0 8px 30px -12px rgb(47 46 77 / 0.18);
  padding: 0.45rem;
  display: grid;
}

.nav__panel a {
  display: block;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  border-radius: 9px;
}

.nav__panel a:hover {
  background: #f8fbfc;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

/* značka „Ordinace bez papírů" — barevné logo (A + tečka) */
.logo-mark {
  display: block;
  width: 33px;
  height: 36px;
  background: url("/assets/img/logo-ordinace.svg") no-repeat center / contain;
}

/* dvouřádkový lockup: název + dovětek zarovnané na stejnou levou hranu */
.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand b {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}

.brand small {
  font-weight: 600;
  font-size: 0.67rem;
  letter-spacing: 0.155em; /* roztažené na šířku slova Ordinace */
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--cendre);
  margin-left: 0.09em; /* optická korekce: rovné B začíná v kresbě dřív než kulaté O */
}

.pill {
  display: inline-block;
  white-space: nowrap;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--turquoise);
  color: #123d3e !important;
  font-weight: 600 !important;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.pill:hover {
  background: #38bdbf;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .nav__group--left > :nth-child(n + 3) {
    display: none;
  }
}

/* mobilní menu (hamburger) zatím není v návrhu — lišta drží logo + CTA */
@media (max-width: 640px) {
  .nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .nav__group--left {
    display: none;
  }
  .nav__group--right a:not(.pill) {
    display: none;
  }
  .pill {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* ============ HERO — přes celou obrazovku ============ */
/* lišta nad hero zabírá 12px margin + 64px výšky → hero dorovná viewport */
.hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  height: calc(100vh - 76px);
  height: calc(100svh - 76px);
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Fotka + kruh jsou jeden celek — box má přesně rozměry původní fotky
   (výška 90 % hero, max šířka 62 %). Kruh uvnitř je v % vůči tomuto
   boxu, takže s fotkou drží při každé šířce i zoomu. Chování jinak
   zůstává jako původní. */
.hero__figure {
  position: relative;
  height: 90%;
  max-width: 62%;
  margin-left: 34%;
  display: flex;
  align-items: flex-end;
}

.hero__photo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  position: relative;
  z-index: 1;
}

/* mintový kruh sedí za hlavou — rozměr i pozice v % vůči fotce */
.hero__circle {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--mint);
  z-index: 0;
}

/* fotka i kruh jsou dekorace — nesmí se dát vybrat ani přetáhnout */
.hero__circle,
.hero__photo {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.hero__copy {
  position: absolute;
  z-index: 2;
  left: var(--page-inset);
  top: 47%;
  transform: translateY(-50%);
}

.hero h1 {
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--navy);
  white-space: nowrap;
}

.hero h1 span {
  color: var(--turquoise);
}

.hero__lead {
  margin-top: 1.4rem;
  max-width: 36ch;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 380;
  letter-spacing: 0.014em;
  line-height: 1.75;
  color: #3c4a5c; /* mezi ink a muted — text ustoupí nadpisu */
}

/* ============ SEKCE MEZI HERO A VIDEEM ============ */
.band {
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.band h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
}

.hubs {
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

/* --- Co dnes řešíte? — plnobarevný pás od kraje ke kraji;
   uzavírá hero (fotka je střižená spodní hranou) --- */
.ask {
  background: var(--beau);
}

.ask .band {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.ask__list {
  list-style: none;
  margin-top: 1.25rem;
  max-width: 46rem;
}

.ask__list li {
  border-bottom: 1px solid rgb(29 61 82 / 0.18);
}

.ask__list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 0.25rem;
  text-decoration: none;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  transition: color 0.15s ease;
}

.ask__list a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--turquoise);
  -webkit-mask: url("/assets/img/icons/arrow-right.svg") no-repeat center / contain;
  mask: url("/assets/img/icons/arrow-right.svg") no-repeat center / contain;
  transition: translate 0.15s ease;
}

.ask__list a::before {
  background: #1d3d52;
} /* turquoise na beau zaniká */

.ask__list a:hover {
  color: var(--cendre);
}
.ask__list a:hover::before {
  translate: 3px 0;
  background: var(--cendre);
}

/* --- dlaždice hubů (kompaktní varianta z handoffu) --- */
/* nadpis sekce: větší a tenčí, lícuje s mřížkou karet na šířce stránky */
.hubs h2 {
  font-size: clamp(1.8rem, 3.1vw, 2.7rem);
  font-weight: 520;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

/* sekundární (ghost) pilulka + CTA mezi nadpisem a kartami */
.pill--ghost {
  background: transparent;
  border: 1.5px solid var(--turquoise);
  text-decoration: none;
}

.pill--ghost:hover {
  background: rgb(70 205 207 / 0.14);
}

.hubs__cta {
  display: inline-block;
  margin-bottom: 2.25rem;
}

/* víc vzduchu nad sekcí, ať se nelepí na beau pás */
.hubs {
  padding-top: clamp(5.5rem, 11vw, 9rem);
}

/* šest karet na šířce stránky, portrétový formát — užší a vyšší;
   zpět na rádius ostrovů (ostré rohy patřily jen full-bleed verzi) */
.hubs__bleed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.hubs__bleed .tile {
  min-height: clamp(380px, 31vw, 470px);
}

/* velká karta hubu: fotka přes celou plochu, dole navy gradient
   a bílé texty (vzor spodního overlay z handoff galerie) */
.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 1.5rem;
  background: #fff;
  min-height: clamp(340px, 28vw, 420px);
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -16px rgb(0 29 57 / 0.35);
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.25s ease;
}

.tile:hover .tile__img {
  scale: 1.04;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 29 57 / 0) 68%, rgb(0 29 57 / 0.5) 86%, rgb(0 29 57 / 0.68) 100%);
}

.tile__label {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tile__label small {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--mint);
}

/* název = první věc, kterou oko přečte */
.tile__label b {
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
}

.tile__label span {
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.88);
}

@media (max-width: 980px) {
  .hubs__bleed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .hubs__bleed {
    grid-template-columns: 1fr;
  }
  .hubs__bleed .tile {
    min-height: 280px;
  }
}

/* ============ RYCHLÝ TEST — mintový pás mezi stěnou témat a referencemi ============ */
.quicktest {
  background: var(--mint);
}

.quicktest .band {
  padding-block: clamp(3rem, 6vw, 4.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.quicktest p {
  max-width: 26ch;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}

.quicktest .pill {
  flex: none;
  text-decoration: none;
}

/* plná navy pilulka — turquoise na mintu zaniká */
.pill--navy {
  background: var(--navy);
  color: #fff !important;
}

.pill--navy:hover {
  background: #0b3156;
}

@media (max-width: 560px) {
  .quicktest .band {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ============ REFERENCE — rozbalovací galerie (handoff 08) ============ */
/* reference jsou poslední obsahová sekce před tmavou patičkou —
   mezera dole je oddělí od patičky (dřív to řešila Aptien sekce) */
.refs {
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.refs h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.refs__row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: clamp(340px, 44vw, 440px);
  margin-top: 1.5rem;
}

.ref {
  position: relative;
  flex: 1 1 0px;
  min-width: 0;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ref.is-open {
  flex: 2.8 1 0px;
}

/* ilustrační portréty v paletě (AI, návrhové) — nahradí skutečné portréty */
.ref:nth-child(1) {
  background: #cfeef0 url("/assets/img/refs/lekarka.jpg") center top / cover no-repeat;
}
.ref:nth-child(2) {
  background: #dfe8f0 url("/assets/img/refs/stomatolog.jpg") center top / cover no-repeat;
}
.ref:nth-child(3) {
  background: #cfeef0 url("/assets/img/refs/sestra.jpg") center top / cover no-repeat;
}
.ref:nth-child(4) {
  background: #dcf3ec url("/assets/img/refs/pediatricka.jpg") center top / cover no-repeat;
}

.ref__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgb(0 29 57 / 0.4);
  white-space: nowrap;
}

.ref__logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: block;
  width: 30px;
  height: 28px;
  background: var(--navy);
  -webkit-mask: url("/assets/img/logo01.svg") no-repeat center / contain;
  mask: url("/assets/img/logo01.svg") no-repeat center / contain;
  opacity: 0.85;
}

.ref__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 3.2rem 1.15rem 1.1rem;
  background: linear-gradient(180deg, rgb(0 29 57 / 0), rgb(0 29 57 / 0.88));
}

.ref__quote {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.2s ease;
}

.ref.is-open .ref__quote {
  max-height: 12rem;
  opacity: 1;
  transition:
    max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.35s ease 0.18s;
}

.ref__quote p {
  color: #fff;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.ref__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ref__who b {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref__who span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--mint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mobil: žádné rozbalování — portréty v plné velikosti, citace rovnou vidět */
@media (max-width: 700px) {
  .refs__row {
    flex-direction: column;
    height: auto;
  }

  .ref,
  .ref.is-open {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
    transition: none;
  }

  .ref__quote,
  .ref.is-open .ref__quote {
    max-height: none;
    opacity: 1;
    transition: none;
  }
}

/* ============ APTIEN — navy ostrov, jediný tvrdě konverzní blok stránky ============ */
.solution .band {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.solution__card {
  background: var(--navy);
  border-radius: 16px;
  padding: clamp(2rem, 4.5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

.solution__logo {
  display: block;
  width: clamp(104px, 11vw, 138px);
  height: auto;
}

.solution h2 {
  margin-top: 1.5rem;
  max-width: 18ch;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}

.solution h2 span {
  color: var(--turquoise);
}

.solution__lead {
  margin-top: 1rem;
  max-width: 44ch;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--beau);
}

.solution__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
}

.solution__points i {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.6rem;
}

/* každý bod mluví jinou barvou palety — na navy všechny drží kontrast */
.solution__points > div:nth-child(1) i {
  background: var(--mint);
}
.solution__points > div:nth-child(2) i {
  background: var(--turquoise);
}
.solution__points > div:nth-child(3) i {
  background: var(--sky);
}
.solution__points > div:nth-child(4) i {
  background: var(--beau);
}

.solution__points b {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.solution__points span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--beau);
}

.solution__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.solution__cta .pill {
  text-decoration: none;
}

/* obrysová varianta pilulky — druhá akce vedle plné (mint/beau podklady) */
.pill--line {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy) !important;
}

.pill--line:hover {
  background: rgb(0 29 57 / 0.08);
  transform: translateY(-1px);
}

/* na navy ostrově se obrys otáčí do bílé */
.solution .pill--line {
  border-color: rgb(255 255 255 / 0.65);
  color: #fff !important;
}

.solution .pill--line:hover {
  background: rgb(255 255 255 / 0.1);
}

@media (max-width: 900px) {
  .solution__card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .solution__points {
    grid-template-columns: 1fr;
  }
}

/* ============ VIDEO — přehrává se scrollováním ============ */
/* vysoký wrapper dává scrollu dráhu; sticky vnitřek drží video přes
   celou obrazovku, dokud scroll dráhu nedojede (400vh ≈ 3 obrazovky scrubu) */
.scrolly {
  position: relative;
  height: 400vh;
  background: #fff;
}

.scrolly__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scrolly__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* bílý scrim vlevo — text má prioritu, video prosvítá vpravo */
.scrolly__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.96) 0%,
    rgb(255 255 255 / 0.82) 28%,
    rgb(255 255 255 / 0.35) 48%,
    rgb(255 255 255 / 0) 64%
  );
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* detail scény bývá střídavě vlevo/vpravo — scrim se zrcadlí s textem */
.scrolly__scrim.is-flipped {
  transform: scaleX(-1);
}
.scrolly__scrim.is-hidden {
  opacity: 0;
}

/* kroky průchodu — hlavní sdělení sekce, velká typografie jako v hero */
.scrolly__step {
  position: absolute;
  left: var(--page-inset);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(40ch, 46%);
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.35s ease,
    translate 0.35s ease;
  pointer-events: none;
}

.scrolly__step.is-on {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.scrolly__step--right {
  left: auto;
  right: var(--page-inset);
}

/* úvod: text dole vlevo, ať nepřekrývá půdorys s bublinami */
.scrolly__step--intro {
  top: auto;
  bottom: clamp(2rem, 8vh, 4.5rem);
  transform: none;
}

.scrolly__step small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cendre);
}

.scrolly__step h2 {
  margin: 0.7rem 0 0;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--navy);
}

.scrolly__step a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.3rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  transition:
    color 0.15s ease,
    gap 0.15s ease;
}

.scrolly__step a span {
  color: var(--turquoise);
  transition: translate 0.15s ease;
}

.scrolly__step a:hover {
  color: var(--cendre);
}
.scrolly__step a:hover span {
  translate: 3px 0;
}

/* bubliny oblastí ukotvené na místnosti izometrického půdorysu;
   polohu (left/top) počítá JS z reálného výřezu videa */
.scrolly__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scrolly__bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid var(--turquoise);
  color: var(--navy);
  box-shadow: 0 6px 20px -10px rgb(47 46 77 / 0.35);
  opacity: 0;
  scale: 0.85;
  transition:
    opacity 0.3s ease,
    scale 0.3s ease;
}

.scrolly__bubbles.is-on .scrolly__bubble {
  opacity: 1;
  scale: 1;
}

/* nástup s mírným zpožděním po řadě */
.scrolly__bubbles.is-on .scrolly__bubble:nth-child(2) {
  transition-delay: 0.06s;
}
.scrolly__bubbles.is-on .scrolly__bubble:nth-child(3) {
  transition-delay: 0.12s;
}
.scrolly__bubbles.is-on .scrolly__bubble:nth-child(4) {
  transition-delay: 0.18s;
}
.scrolly__bubbles.is-on .scrolly__bubble:nth-child(5) {
  transition-delay: 0.24s;
}
.scrolly__bubbles.is-on .scrolly__bubble:nth-child(6) {
  transition-delay: 0.3s;
}

.scrolly__bubble.is-out {
  display: none;
} /* mimo výřez (úzké displeje) */

/* ============ PATIČKA (sdílená všemi stránkami) ============ */
.foot {
  background: var(--navy);
  color: #fff;
}

.foot .band {
  padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.foot .brand {
  text-decoration: none;
}
.foot .logo-mark::before {
  background: var(--mint);
}
.foot .logo-mark::after {
  background: #fff;
}
.foot .brand b {
  color: #fff;
}
.foot .brand small {
  color: var(--mint);
}

.foot__claim {
  margin-top: 1.1rem;
  max-width: 32ch;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: #fff;
}

.foot__claim + p {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--beau);
}

.foot h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
}

.foot nav {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.9rem;
}

.foot nav a,
.foot address a {
  display: inline-block;
  padding-block: 0.22rem;
  color: var(--beau);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 450;
  transition: color 0.15s ease;
}

.foot nav a:hover,
.foot address a:hover {
  color: #fff;
}

.foot nav a[aria-current="page"] {
  color: #fff;
  font-weight: 650;
  text-decoration: underline 2px var(--turquoise);
  text-underline-offset: 6px;
}

.foot address {
  font-style: normal;
  margin-top: 0.9rem;
}
.foot address a {
  text-decoration: underline;
  text-decoration-color: rgb(189 216 233 / 0.4);
  text-underline-offset: 4px;
}

.foot__note {
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.foot__note .band {
  display: block;
  padding-block: 1.1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--beau);
}

@media (max-width: 800px) {
  .foot .band {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* mobil: nadpis nahoře, fotka větší u spodní hrany, kruh za hlavou */
@media (max-width: 700px) {
  .hero {
    justify-content: center;
  }
  .hero__copy {
    top: 8%;
    transform: none;
    left: 1rem;
    right: 1rem;
  }
  .hero__lead {
    font-size: 0.95rem;
  }
  .hero__figure {
    height: min(62%, 80vw);
    max-width: none;
    margin-left: 0;
  }
  .hero__circle {
    width: 104%;
    left: 50%;
    top: 44%;
  }

  /* průchod: scrim odshora, text nahoře přes celou šířku */
  .scrolly__scrim {
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 0.96) 0%,
      rgb(255 255 255 / 0.75) 34%,
      rgb(255 255 255 / 0) 62%
    );
  }
  .scrolly__step {
    top: clamp(4.5rem, 12vh, 7rem);
    transform: none;
    max-width: none;
    right: 1rem;
  }
}

/* ============ HUB STRÁNKY (sdílené všemi šesti huby) ============ */
/* hlavička hubu: beau pás — drobeček, název, definiční perex, assessment */
.hubhead {
  background: var(--beau);
}

.hubhead .band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.crumbs {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d3d52;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--cendre);
}

.hubhead h1 {
  margin-top: 0.8rem;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--navy);
}

.hubhead p {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 380;
  letter-spacing: 0.014em;
  line-height: 1.75;
  color: #1d3d52;
}

/* assessment karta v hlavičce — lead magnet viditelný bez scrollu */
.hubhead__assess {
  width: min(340px, 90vw);
  background: #fff;
  border: 1px solid var(--mint);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 18px 40px -22px rgb(29 61 82 / 0.5);
}

.hubhead__assess small {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cendre);
}

.hubhead__assess p {
  margin-top: 0.6rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--navy);
  max-width: none;
}

.hubhead__assess .pill {
  display: inline-block;
  margin-top: 1.1rem;
  text-decoration: none;
}

@media (max-width: 800px) {
  .hubhead .band {
    grid-template-columns: 1fr;
  }
}

/* clustery podtémat — „plná karta hubu" z handoffu 06 */
.clusters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 800px) {
  .clusters {
    grid-template-columns: 1fr;
  }
}

.cluster {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.cluster__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem 0.95rem;
  background: var(--mint);
}

.cluster--beau .cluster__head {
  background: var(--beau);
}

.cluster__head b {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.cluster__head i {
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  background: var(--navy);
}

.cluster__links {
  display: grid;
  padding: 0.5rem 0;
}

.cluster__links a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 1.25rem;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.cluster__links a::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--turquoise);
  -webkit-mask: url("/assets/img/icons/arrow-right.svg") no-repeat center / contain;
  mask: url("/assets/img/icons/arrow-right.svg") no-repeat center / contain;
}

.cluster__links a:hover {
  color: var(--cendre);
  background: #f8fbfc;
}

/* patička clusteru: checklist / vzor — jiný typ obsahu, jiný vzhled */
.cluster__foot {
  margin-top: auto;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--line);
}

.cluster__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #14554a;
  text-decoration: none;
}

.cluster__foot a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("/assets/img/icons/list-checks.svg") no-repeat center / contain;
  mask: url("/assets/img/icons/list-checks.svg") no-repeat center / contain;
}

.cluster__foot a:hover {
  color: #0d3a32;
}

/* související témata — menší foto dlaždice na mřížce */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.related .tile {
  border-radius: 16px;
  min-height: clamp(240px, 20vw, 300px);
}

@media (max-width: 900px) {
  .related {
    grid-template-columns: 1fr;
  }
}