/* ============================================================
   cfg.cz — směr 2 (navy & zlatá) · stránkové styly
   Vygenerováno z inline stylů design canvasu. Třídy jsou pojmenované
   podle sekce, ve které prvek leží. Identické deklarace jsou sloučené,
   takže jedna třída může být na několika prvcích.
   Tokeny a layout jsou v css/cfg-brand.css.
   ============================================================ */

/* ---- root ---- */
.cfg-page {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  min-width: 0;
}

/* ============ sdílené (víc prvků) ============ */

.u-1 {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 5x */

.u-2 {
  width: 40px;
  height: 1px;
  background: var(--gold);
  display: block;
}

/* 10x */

.u-3 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-on-paper);
}

/* Na navy pásech zůstává zlatá (AA ~7–9:1). Výchozí navy je pro papír. */
.hero-1 .u-3,
.o-skupine-1 .u-3,
.principy .u-3,
.pj-hero .u-3,
.kr-hero .u-3,
.kn-form-band .u-3,
.kontakt-1 .u-3,
.foot .u-3 {
  color: var(--gold-soft);
}

/* 9x */

.u-4 {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* 4x */

/* Číslo v hero statistice. Velké a bílé, ať nezapadne do pozadí hero. */
.u-5 {
  font-family: var(--f-head);
  font-size: clamp(52px, 4.6vw, 74px);
  line-height: .95;
  letter-spacing: -.02em;
  color: #fff;
}

/* 3x */

.u-6 {
  font-size: 14px;
  color: var(--text-on-dark-muted);
}

/* 4x */

.u-7 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-left: 1px solid rgba(255, 255, 255, .16);
  min-width: 0;
  text-align: center;
}

/* 2x */

.u-8 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* 2x */

.u-9 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(30px, 3.43vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* 2x */

/* Akcentní slovo v headline: na papíru navy (AA), na navy zlatá. */
.u-10 {
  color: var(--accent-on-paper);
}

.hero-1 .u-10,
.o-skupine-1 .u-10,
.principy .u-10,
.pj-hero .u-10,
.kr-hero .u-10,
.kn-form-band .u-10 {
  color: var(--gold-soft);
}

/* 3x */

.u-18 {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 4x */

.u-19 {
  font-size: 15px;
  color: var(--ink-soft);
}

/* 2x */

.u-20 {
  width: 100%;
  background: var(--paper-2);
}

/* 2x */

.u-21 {
  position: relative;
  height: 280px;
  overflow: hidden;
  min-width: 0;
  display: block;
  transition: transform .35s;
}

/* 3x */
.u-21:hover {
  transform: translateY(-6px);
  color: #fff;
}

.u-22 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3x */

.u-23 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 25, 47, 0) 30%, rgba(8, 25, 47, .88) 100%);
  pointer-events: none;
}

/* 3x */

.u-24 {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* 3x */

/* Štítek na kartě aktuality: chip, ať nezanikne ve fotce. */
.u-25 {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-on-gold);
  background: var(--gold);
}

/* 3x */

.u-26 {
  font-family: var(--f-head);
  font-size: 22px;
  line-height: 1.25;
}

/* 3x */

.u-27 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 3x */

.u-28 {
  font-size: 13.5px;
  color: var(--bg-white);
}

/* 3x */

.u-29 {
  font-style: normal;
  font-variant: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-stretch: normal;
  font-size: 13px;
  line-height: normal;
  color: var(--bg-white);
}

/* 2x */

.u-30 {
  font-size: 17px;
}

/* 3x */

.u-31 {
  width: 100%;
  background: var(--paper);
  padding-bottom: 40px;
}

/* #o-skupine končí sekcí .licence (vlastní padding-block) a hned pod ní
   začíná navy .principy. Bez vynulování by padding-bottom .u-31 nechal
   40px proužek --paper mezi paper-2 a navy — pozadí by „nenavazovalo“. */
#o-skupine {
  padding-bottom: 0;
}

/* 3x */

.u-32 {
  margin: 0;
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* u-33 / u-34 / u-35 (dvojice čísel v „O skupině“) nahradila .fakta v koruně schématu */

/* 2x */

.u-36 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
}

/* 4x */

/* u-37 (headline „Licencované společnosti“) zmizelo s přesunem licencí
   do „O skupině“ — sekce už vlastní h2 nemá. */

.u-46 {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(48px, 6.29vw, 88px);
}

/* u-47 / u-48 (číslo a text bodu v „Proč nám věřit“) zmizely se sekcí —
   principy mají vlastní .principy__num a .principy__name. */

/* 4x */

/* u-50 / u-51 / u-52 (karty licencí z canvasu) nahradila .licence__item,
   viz sekce „licence“. */

.u-53 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* 7x */

/* Portrét neurčuje pevná výška, ale poměr stran: v úzkém sloupci se 420px
   protáhly do pásu a sekce vedení tím narostla na 970px. S poměrem drží
   portrét rastr v každé šířce.

   Fotky vedení jsou vyříznuté WebP s průhledným pozadím, proto `contain`,
   ne `cover`: výřezy nemají jeden poměr (od 0,74 do 0,84) a `cover` by je
   dorovnal na 3:4 tím, že uřízne hlavu. `bottom` postavy postaví na spodní
   hranu, takže v řadě stojí na jedné linii. Rám sám nemá ani pozadí, ani
   rámeček — v kartě má být vidět jen člověk. */
.u-54 {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Portrét se prolne dovnitř teprve, když je jeho fotka dekódovaná —
   [data-loaded] nasazuje initPortraits v js/main.js, který zároveň dává
   masku .js-portraits na <html>. Bez JS maska nevznikne a fotky jsou
   vidět rovnou. Místo v rastru drží aspect-ratio výš, takže čekání
   nehýbe layoutem. */
.js-portraits .u-54 {
  opacity: 0;
}

.js-portraits .u-54[data-loaded] {
  opacity: 1;
  transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {

  .js-portraits .u-54[data-loaded] {
    transition: none;
  }
}

/* 7x */

.u-55 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 7x */

.u-56 {
  font-family: var(--f-head);
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--navy);
}

/* 7x */

.u-57 {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* 7x */

.u-58 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid rgba(26, 31, 41, .12);
  transition: padding .25s;
}

/* 3x */
.u-58:hover {
  padding-left: 12px;
  color: var(--navy);
}

.u-59 {
  font-family: var(--f-head);
  font-size: 24px;
  color: var(--navy);
}

/* 3x */

.u-60 {
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 6x */

.u-61 {
  color: var(--accent-on-paper);
  font-size: 18px;
  transition: color var(--dur) var(--ease-out);
}

.u-58:hover .u-61 {
  color: var(--gold);
}

/* 3x */

/* ============ hero ============ */

.hero-1 {
  position: relative;
  width: 100%;
  background: linear-gradient(115deg, #071426 0%, #0a1e38 48%, #0e2c50 100%);
  color: #fff;
  overflow: hidden;
}

.hero-2 {
  position: absolute;
  top: -10%;
  right: 8%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 161, 58, .14), rgba(216, 161, 58, 0) 62%);
  pointer-events: none;
  display: none;
}

/* Výška sticky lišty. Panel mobilního menu z ní počítá svůj horní okraj,
   takže musí být token, ne dvě nezávislá čísla. */
:root {
  --nav-h: 82px;
}

@media (max-width: 1100px) {
  :root {
    --nav-h: 64px;
  }
}

/* Lišta visí nahoře po celou dobu, na desktopu i na telefonu.
   position: sticky by to nesvedlo: lišta bydlí uvnitř .hero-1 (resp.
   .pj-hero na /projekty/) a ten má overflow hidden/clip, takže sticky
   drží jen po dobu hera a pak odjede. fixed z toho boxu vystoupí,
   protože jeho containing block je viewport a ořez předka se na něj
   nevztahuje — v řetězci body → .cfg-page → .hero-1 není transform,
   filter ani contain, které by fixed ukotvily jinam.

   Krytí je .92 místo původních .55: lišta teď leží i nad světlými
   sekcemi a na papíru by z bílého wordmarku i z odkazů zbyl šedý
   otisk hluboko pod hranicí čitelnosti. Nad navy herem je rozdíl proti
   původnímu sklu neznatelný — navy přes navy.

   width: 100 % (ne 100vw): u fixed prvku se počítá z initial containing
   blocku, tedy bez klasické scrollbary. S 100vw by lišta byla o její
   šířku širší než sekce pod ní a obsah by se s nimi rozešel. */
.hero-3 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  box-sizing: border-box;
  padding-block: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 20, 38, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  /* Vlas v border-bottom je na světlé sekci neviditelný, oddělení
     tedy nese stín. */
  box-shadow: 0 10px 26px -18px rgba(5, 16, 31, .9);
}

/* Lišta vypadla z toku, hero si její výšku musí nechat jako odsazení.
   Pozadí hera (.hero-8 / .hero-9, .pj-hero__bg) je absolutní vůči
   padding boxu, takže zůstane přilepené k horní hraně — padding
   out-of-flow vrstvy neodsazuje a přes lištu prosvítají dál. */
.hero-1,
.pj-hero {
  padding-top: var(--nav-h);
}

/* Kotva musí doskočit pod lištu, ne za ni. Platí i pro scrollIntoView
   (rejstřík oborů na /projekty/). Stránky, které si odstup řeší samy
   (.pj-anchor, .kr-body h2, NAV_OFFSET v kariera-detail.js), mají větší
   hodnotu a tahle jim ji nepřebije. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* Pod 1100px musí blur pryč: backdrop-filter dělá z prvku containing
   block pro position: fixed, takže by byl panel mobilního menu
   (.hero-6) uvězněný uvnitř 64px vysoké lišty místo přes celou
   obrazovku. Krytí .92 ho stejně dělá skoro neznatelným. */
@media (max-width: 1100px) {
  .hero-3 {
    backdrop-filter: none;
  }
}

/* Logo v navigaci. assets/logo-cfg.svg je kopie z cfg/public/assets/images/logo.svg,
   wordmark má fill="white" napevno — sedí jen na tmavém navu. */
.hero-4 {
  display: block;
  height: 32px;
  width: auto;
}

.hero-5 {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  line-height: 1.4;
}

/* Aktivní položka menu. Zlatá je v systému barva akcentu, takže nese
   i „jsi tady“. Patří sem, ne do CSS jednotlivých stránek: menu je na
   všech stránkách identické. */
.hero-6 a[aria-current="page"] {
  color: var(--gold);
}

.hero-6 a:hover {
  color: var(--gold-soft);
}

.hero-6 {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}

/* ---- podmenu „O skupině" ----
   Sekce má tři podstránky (historie, čísla, lidé a směr) — vedle sebe by
   se do lišty nevešly, takže visí pod svou položkou.

   Otevírá je :hover a :focus-within, žádný skript: menu tak funguje
   i bez JS a z klávesnice se do něj dostaneš tabulátorem přes rodičovskou
   položku.

   Rodič je <button>, ne odkaz: „O skupině" je jen záhlaví sekce a klikem
   nemá nikam odcházet (Historie je až první položka panelu). Focusovatelný
   ale zůstat musí — panel je v klidu visibility: hidden, takže odkazy
   uvnitř nejsou v tab orderu a :focus-within se bez rodiče nikdy
   nespustí. Na dotyku, kde není hover, panel otevře právě to zaostření. */
.nav-group {
  position: relative;
  /* Most pod položkou: hover musí přežít cestu myši do panelu. Padding
     roztahuje jen hover plochu, marginem se vrací zpátky do řádku. */
  padding-bottom: 14px;
  margin-bottom: -14px;
}

/* Reset tlačítka na typografii lišty: pravidla .hero-6 a na <button>
   nesednou, takže si font i barvu bere odsud. */
.nav-group__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  cursor: default;
  transition: color var(--dur) var(--ease-in-out);
}

.nav-group:hover .nav-group__link,
.nav-group:focus-within .nav-group__link {
  color: var(--gold-soft);
}

.nav-group__link:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

/* Označuje sekci, ne stránku: gold svítí na všech třech podstránkách,
   aria-current="page" nese až konkrétní položka v panelu. */
.hero-6 .nav-group__link.is-current {
  color: var(--gold);
}

.nav-group__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
  transition: opacity var(--dur) var(--ease-in-out);
}

.nav-group:hover .nav-group__chev,
.nav-group:focus-within .nav-group__chev {
  opacity: 1;
}

/* Panel začíná na spodní hraně mostu, takže na sebe plynule navazují. */
.nav-sub {
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 3;
  min-width: 236px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: var(--brand-darker);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur) var(--ease-in-out),
    transform var(--dur) var(--ease-in-out),
    visibility 0s var(--dur);
}

.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease-in-out),
    transform var(--dur) var(--ease-in-out),
    visibility 0s;
}

.nav-sub a {
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease-in-out),
    color var(--dur) var(--ease-in-out);
}

.nav-sub a:hover,
.nav-sub a:focus-visible {
  background: rgba(255, 255, 255, .08);
}

/* ---- mobilní menu ----
   Položka „Společnosti a produkty" je delší než původní „Projekty",
   s 34px mezerou se pod ~1100px do lišty nevejde a .hero-1
   { overflow: hidden } ji uřízne. Pod tou hranicí se z .hero-6 stane
   drawer a otevírá ho burger. Markup i chování je stejné jako na
   ostatních webech skupiny (.nav__burger ve firemnizalozna): tři pruhy,
   .is-open na liště, body.menu-open zamyká scroll. */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  /* Optický okraj: čtvercový tap target přesahuje ikonu, bez posunu by
     ikona odskočila od hrany .cfg-wrap víc než logo na druhé straně. */
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease-in-out),
    opacity var(--dur) var(--ease-in-out);
}

.nav-burger:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .nav-burger {
    display: flex;
  }

  /* Tři pruhy do křížku. 7px = rozteč (gap 5 + výška 2). */
  .hero-3.is-open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hero-3.is-open .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .hero-3.is-open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Panel přes celou plochu pod lištou. position: fixed (ne absolute):
     lišta je sticky uvnitř hera s overflow: hidden, absolutní panel by
     se s ním ořízl. Proto výš to vypnutí backdrop-filtru. */
  .hero-6 {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    box-sizing: border-box;
    padding: 12px clamp(20px, 5vw, 32px) calc(32px + env(safe-area-inset-bottom));
    background: var(--brand-darker);
    font-family: var(--f-head);
    font-size: 20px;
    overflow-y: auto;
    /* Aby scroll na konci panelu nepokračoval do stránky pod ním. */
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* visibility drží odkazy mimo pořadí tabulátoru, dokud je zavřeno;
       mění se až po dojetí posunu, jinak by panel zmizel v půlce. */
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-drawer),
      visibility 0s var(--dur-slow);
  }

  .hero-3.is-open .hero-6 {
    transform: none;
    visibility: visible;
    transition:
      transform var(--dur-slow) var(--ease-drawer),
      visibility 0s;
  }

  /* Klikací je celý řádek, ne jen text — 56px je nad minimem pro prst. */
  .hero-6 a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .92);
    letter-spacing: -.01em;
  }

  .hero-6 a:last-child {
    border-bottom: 0;
  }

  /* V drawru se podmenu nerozbaluje — na tři položky by přepínač byl
     zbytečná překážka, takže stojí odsazené hned pod svou sekcí. */
  .nav-group {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .nav-group__chev {
    display: none;
  }

  /* Záhlaví sekce v drawru: stejný řádek jako odkazy vedle (.hero-6 a),
     jen bez vlasu — pod ním hned následují jeho tři položky. */
  .nav-group__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 2px;
    color: rgba(255, 255, 255, .92);
    letter-spacing: -.01em;
  }

  .nav-sub {
    position: static;
    min-width: 0;
    padding: 0 0 0 18px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-sub a {
    min-height: 48px;
    padding: 6px 2px;
    border-radius: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .74);
  }

  .nav-sub a:hover,
  .nav-sub a:focus-visible {
    background: none;
  }

  .hero-6 a:focus-visible {
    outline: 2px solid var(--gold-soft);
    outline-offset: -2px;
  }

  /* Zámek scrollu pod panelem. Je uvnitř media query schválně: po otočení
     do landscape (nad 860px) se menu vrátí do lišty a scroll se odemkne
     sám, i když .is-open na liště zůstane. */
  body.menu-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-6,
  .nav-burger span {
    transition: none;
  }
}

/* ---- zlaté CTA ----
   .hero-7 (nav) a .hero-16 (hero) sdílí jeden „kovový" povrch: svislý
   přechod místo ploché barvy, vnitřní hairline nahoře (odlesk) a tmavší
   spodní hrana (tloušťka). Dvě vrstvy pod textem — ::before prosvětlení
   při hoveru, ::after přejezd světla. Obě mají z-index -1; `isolation`
   je drží nad vlastním pozadím tlačítka a pod jeho textem. */
.hero-7,
.hero-16 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(168deg, var(--gold-soft) 0%, var(--gold) 52%, var(--gold-dark) 100%);
  color: var(--navy);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(8, 25, 47, .18),
    0 1px 2px rgba(8, 25, 47, .28),
    0 10px 26px -14px rgba(216, 161, 58, .8);
  transition:
    transform .35s cubic-bezier(.2, .7, .2, 1),
    box-shadow .35s cubic-bezier(.2, .7, .2, 1);
}

.hero-7::before,
.hero-16::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(168deg, #f0cd8b 0%, var(--gold-soft) 55%, var(--gold) 100%);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2, .7, .2, 1);
}

/* Přejezd světla — jeden šikmý pruh, který projede tlačítkem. */
.hero-7::after,
.hero-16::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.32, .72, .28, 1);
}

.hero-7:hover,
.hero-16:hover {
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(8, 25, 47, .2),
    0 2px 4px rgba(8, 25, 47, .26),
    0 16px 34px -14px rgba(216, 161, 58, .95);
}

.hero-7:hover::before,
.hero-16:hover::before {
  opacity: 1;
}

.hero-7:hover::after,
.hero-16:hover::after {
  transform: translateX(130%);
}

/* Stisk: tlačítko se vrátí do roviny a odlesk zmizí dovnitř. */
.hero-7:active,
.hero-16:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(8, 25, 47, .28),
    0 1px 2px rgba(8, 25, 47, .2);
  transition-duration: .1s;
}

.hero-7:focus-visible,
.hero-16:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

/* Tlačítko si nese display: flex, takže by na něm samotný [hidden]
   neplatil. Potřebuje ho výzva kariéry na homepage, která mezi dvěma
   CTA přepíná podle počtu otevřených pozic. */
.hero-16[hidden] {
  display: none;
}

.hero-7 {
  padding: 13px 30px;
}

.hero-8 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Bez cover a bez roztažení — obrázek v původní velikosti přilepený
     k pravé hraně. Vlevo zůstává čistý navy gradient pod textem. */
  background: url('../assets/hero_cfg_new.png') no-repeat right top;
  pointer-events: none;
}

.hero-9 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(7, 20, 38, .92) 0%, rgba(7, 20, 38, .5) 46%, rgba(7, 20, 38, 0) 72%);
  pointer-events: none;
}

/* ---- pulzující tečka na zlatém bodu v pozadí ----
   Hvězda v hero_cfg_new.png (1672×844) má střed na 1510×306 px. Obrázek je
   v .hero-8 vykreslený v původní velikosti a přilepený `right top`, takže
   stačí odsadit 162 px zprava (1672 − 1510) a 306 px shora — bod sedí při
   každé šířce okna, dokud se obrázek neškáluje. translate(50%, -50%) posune
   krabičku tak, aby ta souřadnice byla její střed.
   Jádro dýchá září i velikostí, dva prstence odjíždějí ven (druhý s polovičním
   posunem fáze, aby ping nebyl přerušovaný). Translate se v keyframech musí
   psát znovu — jinak by scale přepsal celý transform a tečka by ujela z bodu.

   Nad tím běží druhá, pomalá vlna (cfgHeroDotFade, 4× delší perioda): celá
   tečka se plynule vynoří, chvíli tepe a zase se ztratí do obrázku. Dvě
   animace na jednom prvku si nelezou do cesty — každá jede po jiné vlastnosti
   (transform + box-shadow vs. opacity). Prstence dědí opacity rodiče, takže
   se ztrácí s ním. */
.hero-28 {
  position: absolute;
  top: 306px;
  right: 162px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background: radial-gradient(circle, #fff 24%, #f7e3b4 48%, var(--gold-soft) 68%, var(--gold) 84%, rgba(216, 161, 58, 0) 100%);
  pointer-events: none;
  animation:
    cfgHeroDotCore 2.2s ease-in-out infinite,
    cfgHeroDotFade 8.8s ease-in-out infinite;
}

.hero-28::before,
.hero-28::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Prstenec není hairline, ale měkký pruh: nejsvětlejší hned za jádrem
     a odtud plynule vyhasíná k vnějšímu okraji. Proto radial-gradient místo
     borderu — ten by se při zvětšování jen ztlušťoval a hrana by zůstala
     tvrdá. Bez box-shadow: záře by obepnula celou krabičku, ne jen pruh. */
  background: radial-gradient(circle,
      rgba(227, 185, 104, 0) 40%,
      rgba(255, 240, 205, .85) 55%,
      rgba(227, 185, 104, .42) 71%,
      rgba(216, 161, 58, .14) 87%,
      rgba(216, 161, 58, 0) 100%);
  animation: cfgHeroDotPing 2.2s cubic-bezier(.16, .84, .44, 1) infinite;
}

.hero-28::after {
  animation-delay: 1.1s;
}

@keyframes cfgHeroDotCore {

  0%,
  100% {
    transform: translate(50%, -50%) scale(1);
    box-shadow: 0 0 14px 3px rgba(247, 227, 180, .7), 0 0 42px 11px rgba(216, 161, 58, .42);
  }

  50% {
    transform: translate(50%, -50%) scale(1.35);
    box-shadow: 0 0 24px 7px rgba(255, 240, 205, .95), 0 0 66px 20px rgba(216, 161, 58, .6);
  }
}

/* Prstenec se rozpouští po celou dobu cesty — žádný zlom, na konci z něj
   nezůstane hrana, která by zmizela skokem. */
@keyframes cfgHeroDotPing {
  0% {
    transform: scale(1);
    opacity: .95;
  }

  25% {
    opacity: .55;
  }

  55% {
    opacity: .24;
  }

  80% {
    opacity: .07;
  }

  100% {
    transform: scale(8.5);
    opacity: 0;
  }
}

/* Pomalá vlna: vynoření, tep, ztrácení. Nádech je kratší než výdech, aby
   se tečka objevila zřetelně a odcházela pozvolna. */
@keyframes cfgHeroDotFade {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  58% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Pod 860px jde text hera přes celou šířku a tečka by ležela v něm. */
@media (max-width: 860px) {
  .hero-28 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-28 {
    display: none;
  }
}

/* Zlatý oblouk u levé hrany. Leží nad ztmavovacím gradientem (.hero-9),
   ale pod obsahem (.hero-10 je position: relative). preserveAspectRatio="none"
   nechá křivku sledovat výšku hera, non-scaling-stroke drží linku stále
   stejně tenkou. Výšku dorovnává main.js přes data-herobg. */
.hero-24 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: clamp(150px, 17vw, 280px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(216, 161, 58, .22));
}

.hero-25 {
  fill: none;
  stroke: url(#heroArcStroke);
  stroke-width: 1.5;
  stroke-linecap: round;
}

@media (min-width: 861px) {
  .hero-25 {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cfgHeroArc 1.8s cubic-bezier(.22, .7, .2, 1) .35s forwards;
  }
}

@keyframes cfgHeroArc {
  to {
    stroke-dashoffset: 0;
  }
}

/* Modrý oblouk — stejný rám jako .hero-24, jen vlastní (modrá) záře a tenčí
   linka, aby zlatá zůstala dominantní. Křivka v SVG je posunutá (začíná níž,
   končí výš, vybočuje víc doleva). */
.hero-26 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: clamp(150px, 17vw, 280px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(77, 142, 201, .2));
}

.hero-27 {
  fill: none;
  stroke: url(#heroArcStroke2);
  stroke-width: 1.2;
  stroke-linecap: round;
}

@media (min-width: 861px) {
  .hero-27 {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cfgHeroArc 1.8s cubic-bezier(.22, .7, .2, 1) .6s forwards;
  }
}

/* Pod 860px se hero zúží a text jde přes celou šířku — oblouky by ležely pod ním. */
@media (max-width: 860px) {

  .hero-24,
  .hero-26 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-25,
  .hero-27 {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}

.hero-10 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(82px, 10.71vw, 150px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-11 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 28px;
}

/* Fluidní stupeň odvozený od referenční šířky 1400px (104 / 1400 * 100),
   jako zbytek sazby. Napevno 104px se na telefonu nevešlo ani slovo
   „Měníme“ do sloupce a hero ho uřízlo o pravou hranu. */
.hero-12 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(40px, 7.43vw, 104px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.035em;
}

.hero-13 {
  color: var(--gold);
  position: relative;
  display: inline-block;
}

.hero-14 {
  margin: 32px 0 0;
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  max-width: 620px;
}

/* Dvojici CTA dělí osa stránky: primární tlačítko končí půl mezery před
   ní, sekundární odkaz půl mezery za ní. Oba sloupce jsou stejně široké
   (1fr), takže mezera mezi nimi padne přesně na osu — a ta je stejná jako
   u headline a perexu nad nimi.

   Dřív mělo tlačítko vlastní auto sloupec ve středu (1fr auto 1fr) a odkaz
   visel až za ním: dvojice pak rostla jen doprava a vůči ose byla vidět
   jako celek posunutá. */
.hero-15 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 2.57vw, 36px);
  width: 100%;
  padding: clamp(32px, 3.71vw, 52px) 0 clamp(64px, 9.29vw, 130px);
}

.hero-15 > .hero-16 {
  justify-self: end;
}

.hero-15 > .hero-17 {
  justify-self: start;
}

@media (max-width: 520px) {
  .hero-15 {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
  }

  .hero-15 > .hero-16,
  .hero-15 > .hero-17 {
    grid-column: 1;
    justify-self: center;
  }
}

.hero-16 {
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Šipka je výraznější než text (větší, tučnější, bez letter-spacing
   z uppercase CTA) a při hoveru se odlepí od textu. */
.hero-16 > span {
  display: inline-block;
  font-size: 1.45em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.hero-16:hover > span {
  transform: translateX(8px);
}

/* Sekundární CTA: dvě linky pod sebou. Šedá je stálá, zlatá se přes ni
   vypíše zleva doprava — jemnější než překlopení barvy borderu. */
.hero-17 {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: 6px;
  transition: color .25s;
}

.hero-17::before,
.hero-17::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.hero-17::before {
  background: rgba(255, 255, 255, .4);
}

.hero-17::after {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.hero-17:hover {
  color: #fff;
}

.hero-17:hover::after {
  transform: scaleX(1);
}

.hero-17:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

.hero-18 {
  padding-top: 20px;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Zlatá linka nad čísly jde přes celé okno, ne jen přes obsahový sloupec.
   Proto ne border-top, ale full-bleed pseudoprvek: 100vw vycentrovaných
   na střed .hero-18 (ten je díky .cfg-wrap taky centrovaný). Přetečení
   ořízne .hero-1 { overflow: hidden }. */
.hero-18::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(216, 161, 58, .35);
  pointer-events: none;
}

.hero-19 {
  padding: 18px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.hero-20 {
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: 0;
}

/* Plus u zaokrouhlené hodnoty aktiv. Stejný stupeň jako .fakta__suffix,
   ale bez barvy: na navy hero se dědí bílá z .u-5, kde by navy akcent
   ze světlé sekce zmizel. V plné velikosti číslice byl plus těžší než
   samotné číslo. */
.hero-21 {
  font-size: .55em;
}

/* Trojice drží tři sloupce i na tabletu. Pod ~640 px jeden sloupec,
   ať „540+ mil. Kč“ nepřeteče. Kolaps je tady (ne přes .cfg-g3 v
   cfg-brand.css) ze stejného důvodu jako dřív u čtyř sloupců. */
@media (max-width: 640px) {
  .hero-18 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-18> :nth-child(n+2) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
}

.hero-23 {
  width: 100%;
  padding: 0 0 32px;
}

/* ============ oblasti ============ */

.oblasti-1 {
  width: 100%;
  background: var(--paper);
  position: relative;
  z-index: 2;
}

.oblasti-2 {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(53px, 6.86vw, 96px) clamp(44px, 5.71vw, 80px);
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: 56px;
}

.oblasti-3 {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 320px;
}

.oblasti-9 {
  width: 100%;
  box-sizing: border-box;
  padding-block: 0 clamp(42px, 5.43vw, 76px);
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.oblasti-10 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}

/* ============ novinky ============ */

.novinky-1 {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(42px, 5.43vw, 76px);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 56px;
  align-items: center;
}

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

.novinky-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-on-paper);
  transition: color var(--dur) var(--ease-out);
}

.novinky-more:hover {
  color: var(--gold-on-paper);
}

/* Šipka drží barvu textu (navy) a zezlátne až s hoverem — na papíru by
   samostatná zlatá šipka vedle navy textu vypadala jako cizí prvek. */
.novinky-more__arrow {
  color: inherit;
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.novinky-more:hover .novinky-more__arrow {
  transform: translateX(4px);
}

/* ============ o-skupine ============ */

/* Úvodní blok sekce stojí na navy pásu přes celou šířku okna — .cfg-wrap
   je 100 % široká a sloupec drží jen padding-inline, takže stačí pozadí
   přímo tady. Schéma struktury pod ním zůstává na světlém. */
/* Gradient tady zůstává jako podklad i fallback: video se nemusí načíst
   (preload, datový režim, blokovaný autoplay) a pás musí být navy i tak.
   overflow: clip drží smyčku uvnitř pásu; clip (ne hidden) proto, aby se
   z .cfg-wrap nestal scroll container.

   Odsazení je vyšší než u ostatních pásů (dřív clamp(64px, 7.5vw, 104px)):
   výšku pásu teď nese i pozadí, ne jen copy, a na nižším pásu byla ze
   záběru vidět jen úzká proužka. Výšku drží padding, ne min-height —
   systém min-height nezná a vertikální rytmus je fluidní přes clamp().

   isolation: isolate drží mix-blend-mode: screen smyčky uvnitř pásu, aby
   se neprolila do papírové plochy pod ním — stejný důvod jako u .principy. */
.o-skupine-1 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(92px, 10.6vw, 150px);
  background: linear-gradient(158deg, var(--navy) 0%, #0b2340 100%);
  color: #fff;
}

/* Zlatá vlásečnice na spodní hraně — předěl k světlé části sekce. */
.o-skupine-1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 161, 58, 0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(216, 161, 58, 0) 100%);
}

/* Síť jako pozadí celého pásu. Dřív tu byla smyčka (.o-skupine-1__video,
   assets/o-skupine-bg.mp4 + její poster, oboje smazané), ještě dřív
   dekorativní deska 16/9 v pravém sloupci .o-skupine-head. Teď plochu
   kreslí WebGL naživo: Vanta NET nad three.js, canvas do tohoto divu
   vloží initNet z js/main.js.

   Kde WebGL nenaběhne (starý prohlížeč, prefers-reduced-motion, spadlé
   knihovny), zůstane pás jen na svém navy gradientu. Žádná statická
   náhrada tu není záměrně, ten pás obstojí i sám.

   Rám je posunutý doprava: začíná 10 % zleva a o 10 % přetéká za pravou
   hranu (overflow: clip na pásu ho ustřihne), takže těžiště sítě padne
   za copy, ne pod ni. Vlastní šířka rámu zůstává 100 % pásu, canvas se
   tedy nezvětšuje. */
.o-skupine-1__net {
  position: absolute;
  inset: 0 -10% 0 10%;
  /* Síť nemá chytat wheel ani klik, pod ní není nic interaktivního.
     Reakci na myš to nebere, Vanta si listener drží na window. */
  pointer-events: none;
  user-select: none;
}

/* .vanta-canvas si třídu přidává Vanta sama, inline styly (position,
   top/left, z-index, rozměry) taky. Zvenčí se tedy dolaďuje jen blend,
   maska a náběh.

   mix-blend-mode: screen, protože plocha mezi linkami je černá (Vanta
   má backgroundColor 0x000000): screen ji nechá být a přidá jen zlaté
   linky, takže podklad pásu zůstane přesně jeho navy gradient. Bez
   screenu by z canvasu byla černá deska. Stejný vzorec drží .principy__bg.

   Maska je jediné krytí textu (scrim odešel celý, viz níž): vlevo, kde
   stojí copy, síť vůbec nekreslí a doprava se rozsvěcí. Levá třetina je
   čistá nula, tam je i ustřižená levá hrana rámu, takže po ní není vidět
   ani hrana. Maska musí sedět na canvasu, ne na rámu: maska na rámu by
   z něj udělala izolovanou grupu a screen blend by pak blendoval sám se
   sebou, ne s pásem (výsledek: černá deska).

   Pozor, procenta masky jsou k šířce canvasu, ne pásu, a ten je
   posunutý o 10 % doprava. Zastávky tedy leží o 10 % dál: nula končí
   na 45 % pásu, plná síla začíná na 90 %. Odstavce jsou zastropované
   na 62ch (~620 px), tedy 44 % pásu na 1400 px a 32 % na 1920 px:
   text celý stojí v nule, síť začíná až za ním. */
.o-skupine-1__net .vanta-canvas {
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0 35%,
    rgba(0, 0, 0, .16) 45%,
    rgba(0, 0, 0, .5) 62%,
    #000 80%);
  mask-image: linear-gradient(90deg,
    transparent 0 35%,
    rgba(0, 0, 0, .16) 45%,
    rgba(0, 0, 0, .5) 62%,
    #000 80%);
  transition: opacity 1s var(--ease-out);
}

/* Náběh sítě: canvas se objeví, až když má co kreslit (.is-live přidává
   initNet po prvním úspěšném initu), ať plocha neprobleskne. */
.o-skupine-1__net.is-live .vanta-canvas {
  opacity: 1;
}

/* Náběh je dekorace: kdo si vypnul animace, dostane hotový stav rovnou.
   (Vanta při reduced-motion vůbec nenaběhne, ale kdyby se to někdy
   změnilo, ať se plocha nepřelévá.) */
@media (prefers-reduced-motion: reduce) {
  .o-skupine-1__net .vanta-canvas {
    transition: none;
  }
}

/* Scrim (.o-skupine-1__scrim) tu byl do 9/2026 jako tmavý vodorovný
   přechod přes celý pás: plné krytí vlevo pod copy, slabé vpravo, kde
   měla síť prosvítat. Odešel celý, protože pás tlumil i tam, kde tlumit
   nepotřeboval. Čitelnost textu teď drží samotná maska canvasu
   (.o-skupine-1__net .vanta-canvas), která síť pod copy vůbec nekreslí,
   místo aby ji překrývala. Ladí se tedy jedno místo, ne dvě. */

/* Obsah nad sítí. */
.o-skupine-head {
  position: relative;
  z-index: 1;
}

.o-skupine-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.o-skupine-3 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.o-skupine-4 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(38px, 4.1vw, 54px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--navy);
  text-wrap: balance;
}

/* První odstavec nese sekci, druhý ji doplňuje. */
.o-skupine-lead {
  font-size: clamp(17.5px, 1.4vw, 19.5px);
  line-height: 1.72;
  max-width: 62ch;
}

.o-skupine-copy .u-32 {
  max-width: 62ch;
}

/* Inverze na navy pásu. Zlatý štítek (.u-3) i linka (.u-2) sedí i tady,
   mění se jen headline a odstavce — sdílené .u-32 / --ink drží tmavou. */
.o-skupine-1 .o-skupine-4 {
  color: #fff;
}

.o-skupine-1 .u-32 {
  color: rgba(255, 255, 255, .72);
}

/* Musí být až za .u-32 — lead nese obě třídy a stejnou specificitu. */
.o-skupine-1 .o-skupine-lead {
  color: rgba(255, 255, 255, .9);
}

.o-skupine-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  /* Zlatý vlas pod řádkem jako u ostatních textových CTA. Na navy pásu
     drží text bílý a zlatá je jen podtržení a šipka. */
  align-self: flex-start;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  transition: color var(--dur) var(--ease-out);
}

.o-skupine-cta__arrow {
  color: var(--gold-soft);
  transition: transform var(--dur-slow) var(--ease-out);
}

.o-skupine-cta:hover {
  color: var(--gold-soft);
}

.o-skupine-cta:hover .o-skupine-cta__arrow {
  transform: translateX(5px);
}

.o-skupine-cta:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}

/* ---- čísla sekce ----
   Čtyři čísla leží v jedné řadě s CFG diskem, po dvou na každé straně:
   dva seznamy vedle sebe, každý dvousloupcový, takže čísla padnou na
   čtvrtiny šířky koruny. Nad číslem stojí zlatá ikona, dvojici dělí
   svislý vlas. Rozvržení celé koruny řeší .struct__crown, tady je dvojice
   a typografie čísla. */
.fakta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
}

/* Jedna statistika na stranu koruny: bez druhé kolonky by zůstala prázdná půlka. */
.fakta:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.fakta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: center;
  padding-inline: clamp(12px, 1.6vw, 28px);
}

/* Vlas jen mezi dvojicí, ne kolem disku: pás nemá rám, dělí se uvnitř. */
.fakta__item+.fakta__item {
  border-left: 1px solid var(--divider-dark);
}

/* Zlatá je tu bezpečná — ikona je kresba, ne text, takže na ni neplatí
   minimum kontrastu pro sazbu (proto je popisek pod číslem ink-soft). */
.fakta__ico {
  display: block;
  width: clamp(26px, 2.4vw, 32px);
  color: var(--gold);
}

.fakta__ico svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Flex kvůli suffixu „+“: řádkový tok drží obě čísla na účaří. */
.fakta__num {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-head);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--navy);
  /* Aby čísla při dopočítávání nahoru neposkakovala do šířky. */
  font-variant-numeric: tabular-nums;
}

.fakta__suffix {
  font-size: .55em;
  color: var(--accent-on-paper);
}

.fakta__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.o-skupine-6 {
  width: 100%;
  box-sizing: border-box;
  padding-block: 0 clamp(48px, 6.29vw, 88px);
}

.o-skupine-20 {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 44px 0 0;
  border-top: 1px solid rgba(26, 31, 41, .16);
  margin-top: 44px;
}

.o-skupine-21 {
  font-size: 16px;
  color: var(--navy);
}

/* ============ principy ============
   Dřív tu bylo „Proč nám věřit“: 2 × 2 jednořádkové body + svislý fotoslot
   vpravo. Fotoslot padl s ním, protože ilustroval bod „reálná aktiva“,
   ne principy. Principů je pět a každý nese ikonu; jsou v jednom sloupci
   řádků (.p-col__row), protože mřížka 3 + 2 nechávala ve druhé řadě
   prázdné okno. Rail vlevo nese ikonu a pořadové číslo. */

.principy {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* isolation: blend vlny (.principy__bg) se drží uvnitř sekce */
  isolation: isolate;
  background: linear-gradient(115deg, #071426, var(--navy-2));
  color: #fff;
}

/* Částicová vlna u spodní hrany sekce. Předloha má černé pozadí, proto
   mix-blend-mode: screen — černá se ztratí a přes navy gradient zůstane
   jen svítící vlna. Žádná další maska tak není potřeba. */
.principy__bg {
  position: absolute;
  inset: auto 0 0;
  background: url('../assets/bg_believe.webp') no-repeat;
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
}

/* Obsah je nad vlnou, proto z-index. */
.principy__inner {
  position: relative;
  z-index: 1;
}

.principy__title {
  margin: 0 0 18px;
  font-family: var(--f-head);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.principy__lead {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--text-on-dark-muted);
  max-width: 62ch;
}

/* ---- ikony principů ----
   Kresba se odhaluje tahem (stroke-dashoffset). Aby jeden keyframe stačil
   na kružnici i na lomenou čáru, mají všechny tahové prvky pathLength="1" —
   dasharray 1 je pak celá délka bez ohledu na geometrii.
   Stagger uvnitř ikony drží inline --d, posun celého řádku v kaskádě
   přidává --rd, kterou nastavuje reveal v js/main.js. */
.p-ico {
  display: block;
  width: clamp(40px, 3.8vw, 52px);
  height: auto;
  color: var(--gold);
  /* Tah je v CSS, ne jen v atributu na <svg>: u 52px ikony by se 1.4
     z mřížky 32 vykreslila přes 2 px a proti vlasovým linkám sekce by
     ikona zhrubla. CSS přebíjí prezentační atribut, děti tah dědí. */
  stroke-width: 1.05;
  /* tahy vylézají z viewBoxu jen o půl stopy, ať se špičky neřežou */
  overflow: visible;
  transition: color .35s ease, transform .35s ease;
}

.p-ico [data-draw] {
  stroke-dasharray: 1;
}

/* Bez JS (nebo bez observeru) je ikona rovnou dokreslená. */
.js-anim .p-ico [data-draw] {
  stroke-dashoffset: 1;
}

.js-anim .p-ico [data-pop],
.js-anim .p-ico [data-ring] {
  opacity: 0;
}

.js-anim .p-ico [data-grow] {
  transform: scaleY(0);
  opacity: 0;
}

/* transform-box: fill-box — bez něj se scale u SVG prvků počítá
   k počátku viewBoxu, ne k tvaru samotnému. */
.p-ico [data-pop],
.p-ico [data-ring],
.p-ico [data-grow] {
  transform-box: fill-box;
}

.p-ico [data-pop],
.p-ico [data-ring] {
  transform-origin: center;
}

/* Sloupce grafu rostou z účaří, ne ze středu. */
.p-ico [data-grow] {
  transform-origin: bottom;
}

.p-ico__pulse {
  opacity: 0;
}

/* Spouštěčem je revealovaný předek, ne konkrétní řádek principů: stejnou
   ikonu nesou i karty hodnot v „O skupině“ (.avis). Obě místa mají ikonu
   uvnitř prvku s [data-anim], kterému reveal nasazuje [data-shown]. */
.js-anim [data-anim][data-shown] .p-ico [data-draw] {
  animation: pIcoDraw .72s cubic-bezier(.62, .02, .34, 1) both;
  animation-delay: calc(var(--rd, 0ms) + var(--d, 0ms));
}

.js-anim [data-anim][data-shown] .p-ico [data-grow] {
  animation: pIcoGrow .5s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--rd, 0ms) + var(--d, 0ms));
}

.js-anim [data-anim][data-shown] .p-ico [data-pop] {
  animation: pIcoPop .42s cubic-bezier(.2, 1.5, .4, 1) both;
  animation-delay: calc(var(--rd, 0ms) + var(--d, 0ms));
}

/* Jeden rozjezd kruhu z uzlu u „AI First“ — dojezd celé sekvence,
   proto nejdelší delay a forwards, ať po sobě nic nenechá. */
.js-anim [data-anim][data-shown] .p-ico [data-ring] {
  animation: pIcoRing .9s ease-out forwards;
  animation-delay: calc(var(--rd, 0ms) + var(--d, 0ms));
}

@keyframes pIcoDraw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pIcoGrow {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pIcoPop {
  from {
    opacity: 0;
    transform: scale(.2);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pIcoRing {
  from {
    opacity: .5;
    transform: scale(.7);
  }

  to {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Ikona se na kurzor rozsvítí a nadzvedne; zbytek hoveru řádku je
   u .p-col__row níž. Na dotyku (hover: none) se nespouští nic. */
@media (hover: hover) {
  .p-col__row:hover .p-ico {
    color: var(--gold-soft);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Redukovaný pohyb: ikony jsou hotové, žádná kresba ani pop. */
  .js-anim .p-ico [data-draw] {
    stroke-dashoffset: 0;
  }

  .js-anim .p-ico [data-pop],
  .js-anim .p-ico [data-grow] {
    opacity: 1;
    transform: none;
  }

  .js-anim [data-anim][data-shown] .p-ico :is([data-draw], [data-grow], [data-pop], [data-ring]) {
    animation: none;
  }

  .p-ico {
    transition: none;
  }
}

.principy__name {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.3;
}

.principy__desc {
  margin: 0;
  /* Poslední dvě karty jsou přes tři stopky; bez stropu by v nich popis
     tekl do zbytečně dlouhých řádků. */
  max-width: 102ch;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}

/* ---- sloupec principů (ručně psané, BEM) ----
   Pět principů je jeden sloupec řádků dělených vlasem, ne mřížka karet:
   3 + 2 nechávalo ve druhé řadě prázdné okno. Rail vlevo drží ikonu
   a pořadové číslo, vpravo je text. Panel, rám ani rádius tu nejsou.
   Sekce má dvě stopky: text vlevo, dekorativní 3D scéna vpravo. */

.p-col {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr);
  gap: clamp(32px, 4vw, 88px);
  /* stretch, ne start: pravá stopka musí dostat celou výšku řádku,
     jinak by šroubovice skončila tam, kde skončí její obsah. */
  align-items: stretch;
}

.p-col__main {
  min-width: 0;
}

/* Scéna se veze s textem: pět principů je vysoký sloupec, bez sticky by
   pravá stopka většinu scrollu zela prázdnem. Odsazení shora počítá
   s lepící se navigací. */
/* Šroubovice jde po celé výšce sekce, od horní hrany k dolní. Výšku
   diktuje levá stopka s principy, pravá se na ni jen napne.

   Scéna proto musí být absolutní: SVG má viewBox 1 : 6, a kdyby stálo
   v toku s height: 100 % pod rodičem o automatické výšce, dopočítalo by
   si výšku z poměru viewBoxu (šestinásobek vlastní šířky) a sekci by si
   samo natáhlo. Absolutní pozice ji z výpočtu výšky vyřadí.

   Záporné margin-block ruší svislé odsazení sekce, takže helix začíná
   na hraně navy pásu, ne až za jeho paddingem. .principy má
   overflow: hidden, přetečení se ořízne. */
.p-col__viz {
  /* Musí sedět na padding-block třídy .u-46 na .principy__inner. Ta je
     generovaná z canvasu, takže se sem hodnota opisuje; při regeneraci
     .u-46 zkontrolovat i tohle. */
  --p-col-bleed: clamp(48px, 6.29vw, 88px);
  position: relative;
  min-width: 0;
  margin-block: calc(-1 * var(--p-col-bleed));
}

.p-col__scene {
  position: absolute;
  inset: 0;
}

/* ---- dvoušroubovice ----
   Dvě sinusovky posunuté o půl periody. Vlákno blíž k oku je plné, to za
   ním jde na třetinovou sytost — hloubka je v kontrastu, ne ve stínu.
   Tah je non-scaling, aby při zvětšení SVG zůstal vlasový jako linky
   ve zbytku sekce.

   Rotace kolem svislé osy se rozpadá na dvě věci, které dělá CSS zvlášť:
     · vlákna se posouvají svisle o jednu periodu (u sinusovky je posun
       o periodu totéž co otočka o 360°),
     · příčky nikam nejdou, jen se jim mění šířka — při otáčení mizí
       v překřížení a jsou nejširší v půli závitu.
   Obojí běží stejně dlouho (--dna-turn), takže konce příček sedí na
   vláknech v každém okamžiku, ne jen na začátku. */

.dna {
  --dna-turn: 13s;
  display: block;
  width: 100%;
  height: 100%;
}

.dna__strand,
.dna__rung {
  stroke: var(--gold);
  fill: none;
  vector-effect: non-scaling-stroke;
}

.dna__strand {
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Zadní vlákno je tenčí i bledší: prohození vrstev v půli závitu je
   jediné, co z posunu dělá otáčení, a musí být čitelné na první pohled. */
.dna__strand--back {
  stroke-width: 1;
  opacity: .22;
}

.dna__rung {
  stroke-width: 1;
  opacity: .3;
  /* view-box, ne fill-box: příčka má nulovou výšku bounding boxu a osa
     otáčení je stejná pro všechny (x = 110), takže je to i spolehlivější. */
  transform-box: view-box;
  transform-origin: 110px 0;
}

@keyframes dnaRise {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-220px);
  }
}

/* Šířka příčky přes jednu otáčku: od plné rozteče k zářezu a zpátky,
   a to dvakrát — při otočce o 360° projde příčka dvěma překříženími.
   Hodnoty jsou odečtené ze sinusovky. Do nuly nejdou schválně: úplné
   zmizení čte oko jako blikání, ne jako příčku viděnou z boku. */
@keyframes dnaTurn {
  0% {
    transform: scaleX(0.1);
    opacity: 0.18;
  }

  6.25% {
    transform: scaleX(0.444);
    opacity: 0.318;
  }

  12.5% {
    transform: scaleX(0.736);
    opacity: 0.435;
  }

  18.75% {
    transform: scaleX(0.931);
    opacity: 0.513;
  }

  25% {
    transform: scaleX(1);
    opacity: 0.54;
  }

  31.25% {
    transform: scaleX(0.931);
    opacity: 0.513;
  }

  37.5% {
    transform: scaleX(0.736);
    opacity: 0.435;
  }

  43.75% {
    transform: scaleX(0.444);
    opacity: 0.318;
  }

  50% {
    transform: scaleX(0.1);
    opacity: 0.18;
  }

  56.25% {
    transform: scaleX(0.444);
    opacity: 0.318;
  }

  62.5% {
    transform: scaleX(0.736);
    opacity: 0.435;
  }

  68.75% {
    transform: scaleX(0.931);
    opacity: 0.513;
  }

  75% {
    transform: scaleX(1);
    opacity: 0.54;
  }

  81.25% {
    transform: scaleX(0.931);
    opacity: 0.513;
  }

  87.5% {
    transform: scaleX(0.736);
    opacity: 0.435;
  }

  93.75% {
    transform: scaleX(0.444);
    opacity: 0.318;
  }

  100% {
    transform: scaleX(0.1);
    opacity: 0.18;
  }
}

@keyframes dnaDraw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dnaFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dna__spin {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Bez JS (nebo bez observeru) je šroubovice rovnou hotová a stojí. */
.js-anim .dna__strand {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js-anim .dna__rungs,
.js-anim .dna__nodes {
  opacity: 0;
}

/* Vlákna se vykreslí tahem, příčky za nimi doskočí. Otáčení běží od
   začátku, takže se šroubovice kreslí už za pohybu. */
.js-anim [data-shown] .dna__strand {
  animation: dnaDraw 1.5s cubic-bezier(.62, .02, .34, 1) both;
}

.js-anim [data-shown] .dna__strand--front {
  animation-delay: .14s;
}

.js-anim [data-shown] .dna__rungs,
.js-anim [data-shown] .dna__nodes {
  animation: dnaFade .8s ease-out .9s both;
}

.dna__spin {
  animation: dnaRise var(--dna-turn) linear infinite;
}

.dna__rung {
  animation: dnaTurn var(--dna-turn) linear infinite;
}

/* Fázi příčky určuje její výška. Rozteč je perioda/6, takže různých
   fází je právě šest — šest pravidel místo jednoho na každou z 36. */
.dna__rung:nth-child(6n + 1) {
  animation-delay: calc(var(--dna-turn) * -0 / 6);
}

.dna__rung:nth-child(6n + 2) {
  animation-delay: calc(var(--dna-turn) * -1 / 6);
}

.dna__rung:nth-child(6n + 3) {
  animation-delay: calc(var(--dna-turn) * -2 / 6);
}

.dna__rung:nth-child(6n + 4) {
  animation-delay: calc(var(--dna-turn) * -3 / 6);
}

.dna__rung:nth-child(6n + 5) {
  animation-delay: calc(var(--dna-turn) * -4 / 6);
}

.dna__rung:nth-child(6n + 6) {
  animation-delay: calc(var(--dna-turn) * -5 / 6);
}

/* Uzel obíhá kolem osy: vodorovná výchylka je A·sin(θ), hloubka cos(θ).
   Hloubka se nekreslí perspektivou, ale velikostí a sytostí — uzel vpředu
   je větší a jasnější. Prohození každou půlotočku je to, co dělá rotaci.
   Vlákno B je vlákno A posunuté o π, takže mu stačí tatáž sada s fázovým
   posunem o půl otáčky (viz --dna-turn * -1/2 níž). */
@keyframes dnaNode {
  0% {
    transform: translateX(0px) scale(1.34);
    opacity: 0.85;
  }

  6.25% {
    transform: translateX(28.32px) scale(1.314);
    opacity: 0.83;
  }

  12.5% {
    transform: translateX(52.33px) scale(1.24);
    opacity: 0.772;
  }

  18.75% {
    transform: translateX(68.37px) scale(1.13);
    opacity: 0.686;
  }

  25% {
    transform: translateX(74px) scale(1);
    opacity: 0.585;
  }

  31.25% {
    transform: translateX(68.37px) scale(0.87);
    opacity: 0.484;
  }

  37.5% {
    transform: translateX(52.33px) scale(0.76);
    opacity: 0.398;
  }

  43.75% {
    transform: translateX(28.32px) scale(0.686);
    opacity: 0.34;
  }

  50% {
    transform: translateX(0px) scale(0.66);
    opacity: 0.32;
  }

  56.25% {
    transform: translateX(-28.32px) scale(0.686);
    opacity: 0.34;
  }

  62.5% {
    transform: translateX(-52.33px) scale(0.76);
    opacity: 0.398;
  }

  68.75% {
    transform: translateX(-68.37px) scale(0.87);
    opacity: 0.484;
  }

  75% {
    transform: translateX(-74px) scale(1);
    opacity: 0.585;
  }

  81.25% {
    transform: translateX(-68.37px) scale(1.13);
    opacity: 0.686;
  }

  87.5% {
    transform: translateX(-52.33px) scale(1.24);
    opacity: 0.772;
  }

  93.75% {
    transform: translateX(-28.32px) scale(1.314);
    opacity: 0.83;
  }

  100% {
    transform: translateX(-0px) scale(1.34);
    opacity: 0.85;
  }
}

.dna__node {
  fill: var(--gold);
  /* fill-box: scale musí být kolem středu kolečka, ne kolem počátku
     viewBoxu. Kolečko má na rozdíl od příčky nenulový bounding box. */
  transform-box: fill-box;
  transform-origin: center;
  animation: dnaNode var(--dna-turn) linear infinite;
}

/* Vlákno A */
.dna__nodes--a .dna__node:nth-child(6n + 1) {
  animation-delay: calc(var(--dna-turn) * -0 / 6);
}

.dna__nodes--a .dna__node:nth-child(6n + 2) {
  animation-delay: calc(var(--dna-turn) * -1 / 6);
}

.dna__nodes--a .dna__node:nth-child(6n + 3) {
  animation-delay: calc(var(--dna-turn) * -2 / 6);
}

.dna__nodes--a .dna__node:nth-child(6n + 4) {
  animation-delay: calc(var(--dna-turn) * -3 / 6);
}

.dna__nodes--a .dna__node:nth-child(6n + 5) {
  animation-delay: calc(var(--dna-turn) * -4 / 6);
}

.dna__nodes--a .dna__node:nth-child(6n + 6) {
  animation-delay: calc(var(--dna-turn) * -5 / 6);
}

/* Vlákno B */
.dna__nodes--b .dna__node:nth-child(6n + 1) {
  animation-delay: calc(var(--dna-turn) * -0 / 6 - var(--dna-turn) / 2);
}

.dna__nodes--b .dna__node:nth-child(6n + 2) {
  animation-delay: calc(var(--dna-turn) * -1 / 6 - var(--dna-turn) / 2);
}

.dna__nodes--b .dna__node:nth-child(6n + 3) {
  animation-delay: calc(var(--dna-turn) * -2 / 6 - var(--dna-turn) / 2);
}

.dna__nodes--b .dna__node:nth-child(6n + 4) {
  animation-delay: calc(var(--dna-turn) * -3 / 6 - var(--dna-turn) / 2);
}

.dna__nodes--b .dna__node:nth-child(6n + 5) {
  animation-delay: calc(var(--dna-turn) * -4 / 6 - var(--dna-turn) / 2);
}

.dna__nodes--b .dna__node:nth-child(6n + 6) {
  animation-delay: calc(var(--dna-turn) * -5 / 6 - var(--dna-turn) / 2);
}

@media (prefers-reduced-motion: reduce) {

  /* Šroubovice je hotová a stojí. Příčky se musí zmrazit na šířce, která
     odpovídá jejich fázi, jinak by stály všechny na plné rozteči a z
     šroubovice by byl žebřík. */
  .js-anim .dna__strand {
    stroke-dashoffset: 0;
  }

  .js-anim .dna__rungs,
  .js-anim .dna__nodes {
    opacity: 1;
  }

  .js-anim [data-shown] .dna__strand,
  .js-anim [data-shown] .dna__rungs,
  .js-anim [data-shown] .dna__nodes,
  .dna__spin,
  .dna__rung,
  .dna__node {
    animation: none;
  }

  .dna__rung:nth-child(6n + 1) {
    transform: scaleX(0.1);
    opacity: 0.18;
  }

  .dna__rung:nth-child(6n + 2) {
    transform: scaleX(0.879);
    opacity: 0.492;
  }

  .dna__rung:nth-child(6n + 3) {
    transform: scaleX(0.879);
    opacity: 0.492;
  }

  .dna__rung:nth-child(6n + 4) {
    transform: scaleX(0.1);
    opacity: 0.18;
  }

  .dna__rung:nth-child(6n + 5) {
    transform: scaleX(0.879);
    opacity: 0.492;
  }

  .dna__rung:nth-child(6n + 6) {
    transform: scaleX(0.879);
    opacity: 0.492;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 1) {
    transform: translateX(0px) scale(1.34);
    opacity: 0.85;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 2) {
    transform: translateX(64.09px) scale(1.17);
    opacity: 0.718;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 3) {
    transform: translateX(64.09px) scale(0.83);
    opacity: 0.453;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 4) {
    transform: translateX(0px) scale(0.66);
    opacity: 0.32;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 5) {
    transform: translateX(-64.09px) scale(0.83);
    opacity: 0.452;
  }

  .dna__nodes--a .dna__node:nth-child(6n + 6) {
    transform: translateX(-64.09px) scale(1.17);
    opacity: 0.718;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 1) {
    transform: translateX(0px) scale(0.66);
    opacity: 0.32;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 2) {
    transform: translateX(-64.09px) scale(0.83);
    opacity: 0.452;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 3) {
    transform: translateX(-64.09px) scale(1.17);
    opacity: 0.717;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 4) {
    transform: translateX(0px) scale(1.34);
    opacity: 0.85;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 5) {
    transform: translateX(64.09px) scale(1.17);
    opacity: 0.718;
  }

  .dna__nodes--b .dna__node:nth-child(6n + 6) {
    transform: translateX(64.09px) scale(0.83);
    opacity: 0.452;
  }
}

.p-col__head {
  padding-bottom: clamp(30px, 3.4vw, 52px);
}

.p-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.p-col__row {
  display: grid;
  grid-template-columns: minmax(0, clamp(120px, 11vw, 190px)) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 2.2vw, 40px);
  padding: clamp(26px, 2.6vw, 40px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

/* Obsahové benefity jsou vysoké řádky. Kratší dráha a doba než u obecného
   cfgRise zabrání dojmu, že se při scrollu na okamžik zastaví; pořadí
   stále drží jemný stagger z main.js. Stejný rytmus mají tři obory výše. */
.js-anim .p-col__row[data-anim][data-shown],
.js-anim .obl-led__row[data-anim][data-shown] {
  animation: cfgBenefitRise .68s cubic-bezier(.18, .76, .24, 1) both;
}

@keyframes cfgBenefitRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Rail vede kresbou, ne číslem: ikona nese řádek a index pod ní klesá na
   vlasovou značku (viz .p-col__mark níž). */
.p-col__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.9vw, 28px);
  min-width: 0;
}

/* Fluidní jako zbytek systému, strop 96 px sedí na referenční šířce 1400 px.
   Zvětšená ikona si musí ztenčit tah: 32j viewBox roztažený na 96 px je
   3× zvětšení a z 1.05 by byly přes 3 px — proti vlasovým linkám sekce
   by ikona zhrubla. */
.p-col__rail .p-ico {
  width: clamp(72px, 7vw, 96px);
  max-width: 100%;
  stroke-width: .4;
}

.p-col__body {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  min-width: 0;
}

/* Popis má vlastní míru řádku; strop z .principy__desc (52ch) byl počítaný
   na úzkou kartu, tady by řádek zbytečně lámal. */
.p-col__body .principy__desc {
  max-width: 93ch;
}

/* Řádek reaguje na kurzor: vlas u spodní hrany zezlátne, značka se rozsvítí.
   Na dotyku (hover: none) se nic z toho nespouští. */
@media (hover: hover) {
  .p-col__row:hover {
    border-bottom-color: rgba(216, 161, 58, .38);
  }

  .p-col__row:hover .p-col__idx {
    color: var(--gold-soft);
  }

  .p-col__row:hover .p-col__hair {
    opacity: 1;
  }
}

@media (max-width: 1100px) {

  /* Jedna stopka a šroubovice pryč: na úzkém okně by se z ní stal jen
     tenký proužek nad textem a vzala by výšku, kterou potřebují principy. */
  .p-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-col__viz {
    display: none;
  }

  /* Ve stohu se rail položí nad text: značka odskočí k pravé hraně
     a ikona se vrátí k velikosti, která nebere výšku textu. */
  .p-col__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .p-col__rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .p-col__rail .p-ico {
    width: 56px;
  }
}

.p-col__mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Stejný zlatý vlas jako oddělovač .u-2, jen kratší. */
.p-col__hair {
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
  transition: opacity .35s ease;
}

.p-col__idx {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  color: rgba(255, 255, 255, .5);
  transition: color .35s ease;
}

/* ============ licence ============
   Vývoj sekce: kruh ČNB se spojnicemi do tří větví (dva pavouci nad sebou,
   schéma struktury je hned nad tím) → plochý pás uvnitř .o-skupine-6 se
   zlatou čepicí přes hlavu karty → dnešní stav: samostatný pás na papíru 2
   s fotkou budovy ČNB u pravé hrany okna, tři karty s pečetí v hlavě
   a jedním souhrnným řádkem pod nimi.

   Pás je proto v HTML sourozenec .o-skupine-6, ne jeho dítě: uvnitř
   .cfg-wrap by fotku zastavil padding obsahového sloupce. */

.licence {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* Fotka přetéká pravou hranu pásu, pás ji musí seříznout. */
  overflow: hidden;
  /* Horní odsazení je stejné jako .struct__title po vlásečnici navy pásu —
     odstup od předělu k prvnímu prvku drží na stránce jeden rastr. */
  padding-block: clamp(44px, 5vw, 72px) clamp(56px, 6.3vw, 96px);
  background: var(--paper-2);
}

/* Předěl na horní hraně je zlatý vlas, stejný jako na konci navy pásu
   sekce (.o-skupine-1::after) — pás se tím hlásí jako další doklad. */
.licence::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 161, 58, 0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(216, 161, 58, 0) 100%);
}

/* Jediná rastrová dekorace v systému. Fasáda ČNB je doklad, ne ornament —
   vlasovou kresbou (jak jinde) by se z ní ornament stal. Asset má alfu,
   která se sama rozpouští doleva, takže nepotřebuje masku ani gradient,
   jen ztlumení, aby zůstala pod textem. */
.licence__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: min(56%, 880px);
  height: auto;
  opacity: .6;
  pointer-events: none;
  user-select: none;
}

.licence__inner {
  position: relative;
  /* Obsah nad fotkou. */
  z-index: 1;
}

.licence__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Lead je kratší než obvyklých 62ch: vpravo stojí fotka a text pod ni
   nemá zajet. */
.licence__lead {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink);
  max-width: 46ch;
}

/* Zdůraznění nese hlavně posun barvy do navy, weight jen na 500 — v běžné
   sazbě by tučný řez uvnitř odstavce působil jako nadpis. */
.licence__lead strong {
  font-weight: 500;
  color: var(--navy);
}

/* Řádkový odstup je 46px kvůli pečeti: ta přesahuje horní hranu karty
   o 31 px, takže při kolapsu do jednoho sloupce (.cfg-g3, 760 px) by
   jinak sedla do karty nad sebou. Na desktopu je jedna řada, tam se
   neprojeví. */
.licence__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px clamp(18px, 1.8vw, 26px);
  /* Odstup od leadu nese pečeť první řady, proto je větší než u ostatních
     bloků sekce. */
  margin: clamp(56px, 5vw, 76px) 0 0;
  padding: 0;
  list-style: none;
}

/* Karta je centrovaná: pečeť, razítko a jméno stojí na jedné svislé ose,
   protože ta osa je celé sdělení („tuhle firmu někdo pustil na trh“).
   Bílá plocha proti papíru 2 pásu, hrana vlas, poloměr 14px jako všude. */
.licence__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
  box-sizing: border-box;
  /* Horní odsazení nese půlku pečeti (31px) plus odstup. */
  padding: clamp(48px, 4.2vw, 58px) clamp(22px, 2vw, 30px) clamp(28px, 2.6vw, 36px);
  border: 1px solid rgba(26, 31, 41, .10);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

/* Pečeť patří na hranu, ne dovnitř plochy — proto disk přesahuje horní
   hranu karty o svou polovinu. Rozměr je pevný (ne clamp): na půlce
   závisí negativní top a fluidní hodnota by ji rozladila. Zlatá zůstala
   prstenci, tah ikony je bílý (na navy 15:1). Vnější prstenec je
   průhledný, aby fungoval nad papírem i nad bílou kartou zároveň. */
.licence__shield {
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 8px rgba(8, 25, 47, .04);
  color: #fff;
}

.licence__shield svg {
  display: block;
  width: 26px;
  height: 26px;
}

/* ČNB razítko: zlatá plocha + navy text (AA). Bílá na zlaté padá pod 3:1. */
.licence__tag {
  padding: 7px 13px;
  border-radius: 4px;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-on-gold);
  background: var(--gold);
}

.licence__name {
  font-family: var(--f-head);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}

/* Dělič mezi jménem a rolí je zlatý vlas jako .u-2, jen přes celou šířku
   obsahu karty a s rozpouštěnými konci, aby nedělal z karty tabulku. */
.licence__rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 161, 58, 0) 0%, var(--gold) 50%, rgba(216, 161, 58, 0) 100%);
  opacity: .75;
}

.licence__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Druhý řádek u FUNDSTERu — vazba na produkt. Weight jen 500, důraz nese
   hlavně navy. */
.licence__extra {
  margin-top: -6px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--navy);
  text-wrap: pretty;
}

/* Souhrnný řádek pod kartami. Není to CTA, proto vlas a průsvitný papír,
   ne zlatá plocha; zlatá tady drží jen hranu, ikonu a puntíky. */
.licence__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: fit-content;
  margin: clamp(30px, 3.2vw, 44px) auto 0;
  padding: 12px clamp(20px, 2vw, 28px);
  border: 1px solid rgba(216, 161, 58, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
}

.licence__note-icon {
  display: block;
  width: 17px;
  height: 17px;
  color: var(--gold-dark);
}

.licence__note-item {
  font-family: var(--f-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
}

.licence__note-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* Pod 760 px je hlavička pásu přes celou šířku a fotka by jí ležela pod
   textem — stejný ústupek, jaký dělá [data-herobg] v cfg-brand.css. */
@media (max-width: 760px) {
  .licence__bg {
    width: 84%;
    opacity: .3;
  }
}

/* ============ vedeni ============ */

.vedeni-1 {
  margin: 0 0 44px;
  font-family: var(--f-head);
  font-size: clamp(30px, 3.29vw, 46px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* Sekce má jeden nadpis s perexem, oba bloky lidí pod ním jsou podnadpisy. */
.vedeni-head {
  margin-bottom: clamp(34px, 3.6vw, 54px);
}

.vedeni-head .u-9,
.vedeni-head .about-h2 {
  margin-top: clamp(14px, 1.4vw, 20px);
}

.vedeni-lead {
  max-width: 68ch;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  font-family: var(--f-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink-soft);
}

.vedeni-block + .vedeni-block {
  margin-top: clamp(40px, 4.4vw, 64px);
}

.vedeni-block__title {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-family: var(--f-head);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* Sloupec je užší (170px), aby se celé vedení vešlo do jedné řady — auto-fit
   prázdné tracky sbalí, takže se karty rozprostřou na plnou šířku. */
.vedeni-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px 18px;
}

/* Dva vlastníci: držet maximálně dva sloupce, ať se neroztáhnou přes celou
   šířku. Sloupec je širší než u vedení (300 proti 170 až 220 px) — zakladatelé
   mají v sekci vážit víc a proti menším portrétům vedení pod nimi tvoří
   jasnou první úroveň. */
.vedeni-2--owners {
  grid-template-columns: repeat(2, minmax(220px, 300px));
}

@media (max-width: 520px) {
  .vedeni-2--owners {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* .vedeni-ph (zástupné iniciály místo chybějící fotky) zmizelo — všechny
   karty vlastníků i vedení mají portrét, placeholder není potřeba. */

/* ============ kariera ============ */

.kariera-1 {
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(44px, 5.4vw, 76px);
}

/* Text vlevo, jedno CTA vpravo — stejný pás jako „Nenašli jste svou
   pozici?“ na /kariera/ (.kr-join__inner v css/kariera.css). Ve druhém
   sloupci stojí dvě tlačítka, jedno z nich vždycky hidden — proto auto,
   ne fixní track: skrytá varianta si místo nedrží. */
.kariera-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

.kariera-cta .u-9 {
  max-width: 26ch;
  text-wrap: balance;
}

.kariera-cta__lead {
  max-width: 60ch;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  font-family: var(--f-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink-soft);
}

/* Tlačítko vedle textu se pod 860 px mačká na dvě řádky uppercase —
   radši pod text, zarovnané na levou hranu sekce. */
@media (max-width: 860px) {
  .kariera-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-items: start;
  }
}

/* .kariera-2 / -3 / -4 / -5 (hlavička a výpis tří pozic, který na homepage
   stával do rozdělení sekce „O skupině“) zmizely s ním — sekce je teď jen
   výzva, pozice žijí na /kariera/. Řádek výpisu (.u-58 az .u-61) zůstává:
   drží ho teaser režim v js/kariera.js. */

/* ============ kontakt ============ */

.kontakt-1 {
  width: 100%;
  background: var(--navy);
  color: #fff;
}

/* Odsazení je v proměnné, protože o něj počítá bleed portrétu v .kontakt-8.
   Sekce je nižší než ostatní (dřív 6.29vw / 88px): výšku jí dává portrét
   a ten teď kus své výšky odevzdá patičce, do které přesahuje. */
.kontakt-2 {
  --kontakt-pad: clamp(25px, 3.15vw, 45px);
  /* Výška portrétu a z ní i šířka jeho sloupce: fotka má poměr 0,8, takže
     sloupec sedí přesně na ni. Napevno 520px v něm portrét plaval a citát
     začínal až za 130 px prázdné plochy. Zúžení zároveň vrátilo místo
     citátu mezi 760 a 1100 px, kde mu z 736px zbývalo 144 px. */
  --kontakt-portrait: 490px;
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--kontakt-pad);
  display: grid;
  grid-template-columns: calc(var(--kontakt-portrait) * .8) 1fr;
  gap: 72px;
  align-items: center;
}

/* Portrét stojí vlevo, citát vpravo, ale v markupu zůstává citát první:
   ten sekci nese, portrét je prázdný dekorativní div.

   Řádek se přiřazuje spolu se sloupcem. Bez něj automatické umístění
   nedovolí portrétu vrátit se do sloupce 1, protože citát před ním už
   posunul kurzor za řádek 1 — portrét pak spadl na druhý řádek pod text
   a sekce byla dvakrát vyšší.

   Po kolapsu na jeden sloupec se obě umístění musí zrušit, jinak by
   grid-column: 2 vyrobil implicitní druhý sloupec — viz media query dole. */
.kontakt-2 > .kontakt-3 {
  grid-column: 2;
  grid-row: 1;
}

.kontakt-2 > .kontakt-8 {
  grid-column: 1;
  grid-row: 1;
}

.kontakt-3 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.kontakt-4 {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(21px, 2.43vw, 34px);
  line-height: 1.4;
  font-weight: 400;
}

.kontakt-5 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kontakt-6 {
  font-family: var(--f-head);
  font-size: 26px;
  line-height: 1.1;
}

.kontakt-7 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.kontakt-8 {
  min-width: 0;
  align-self: end;
  position: relative;
  z-index: 2;
  /* Bleed je spodní padding sekce (--kontakt-pad) plus přesah: portrét
     nedosedá na dělící linku patičky, ale rukama ji překrývá a pokračuje
     do další sekce. Kreslí se nad ni, protože .foot má z-index auto
     a .foot__inner jen 1 — proti z-indexu 2 tady oba prohrají.

     Přesah je vždy menší než horní odsazení patičky (clamp(48px, 5.4vw,
     76px)), takže ruce přejdou linku a klidný pás pod ní, ale nikdy
     nezasáhnou do jejího obsahu. */
  margin-bottom: calc(-1 * (var(--kontakt-pad) + clamp(8px, calc(2.6vw - 10px), 32px)));
  height: var(--kontakt-portrait);
  /* `left bottom`: postava stojí u levé hrany obsahového sloupce, ne na
     středu svého gridového pole. */
  background: url('../assets/pavel_citat.webp') no-repeat left bottom/contain;
}

/* Pásek .kontakt-9/.kontakt-10/.kontakt-11 (copyright + odkazy) nahradila
   plnohodnotná patička .foot na konci souboru. */

/* ============================================================
   RUČNĚ PSANÁ ČÁST — nevzniklo z inline stylů
   Struktura skupiny: CFG hub, animované spojnice, tři pilíře.
   Pokud se styles.css znovu generuje z canvasu, tato část se musí
   zachovat (generátor přepisuje celý soubor).
   ============================================================ */

/* Strop šířky a stání v ose stránky. .cfg-wrap drží sloupec až do 1920 px,
   takže bez stropu jede schéma na širokém okně skoro přes celou plochu
   a čte se jako plakát, ne jako struktura — stejný důvod, kvůli kterému
   se stropuje časová osa na /o-skupine/. Strop platí pro celý blok, takže
   se s ním zúží i koruna a vějíř spojnic a nic se nerozejde. */
.struct {
  /* Mezera mřížky sloupců. Vedle mřížky ji potřebují i svody vějíře, které
     z ní počítají středy krajních sloupců — viz .struct__links. Od zrušení
     velkých karet je širší: sloupce od sebe nedělí obrys, jen vzduch. */
  --struct-gap: clamp(22px, 2.4vw, 40px);
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Podnadpis schématu — o stupeň menší než headline sekce („Naše mise
   a vize“), aby zůstal druhý v pořadí. Vlastní eyebrow nemá: zlatý
   štítek „O skupině“ platí pro celou sekci a zlatá značka pod titulkem
   je .struct__rule. Spodní padding je odstup k ní. */
.struct__title {
  margin: 0;
  padding-block: clamp(44px, 5vw, 72px) clamp(22px, 2.4vw, 34px);
  font-family: var(--f-head);
  /* Stejný rastr jako ostatní h2 na stránce (.o-skupine-4, .principy__title). */
  font-size: clamp(38px, 4.1vw, 54px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}

/* Zlatá značka pod titulkem místo dřívějšího vlasu přes celou šířku:
   pás čísel pod ní dělí svislé vlasy uvnitř dvojic, vodorovná linka by
   se s nimi tloukla. */
.struct__rule {
  width: 64px;
  height: 2px;
  background: var(--gold);
}

/* ---- koruna: čísla kolem hubu ----
   Tři sloupce: čísla | disk | čísla. Prostřední sloupec je auto, aby si
   disk držel svou šířku a boční sloupce se dělily o zbytek symetricky. */
.struct__crown {
  align-self: stretch;
  display: grid;
  /* Prostřední sloupec je auto, aby si disk držel svou šířku a boční
     sloupce se dělily o zbytek symetricky. Tím disk zůstává na svislé ose
     stránky: pod korunou na něj navazuje stopka .struct__stem, která je
     vycentrovaná v procentech. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* Čísla leží v jedné řadě s diskem, ne pod ním. */
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(34px, 3.6vw, 56px) 0;
}

/* ---- hub: CFG v kruhu na navy ---- */
.struct__disc {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid rgba(216, 161, 58, .45);
  box-shadow: 0 0 0 12px rgba(8, 25, 47, .05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.struct__mark {
  font-family: var(--f-head);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
}

.struct__est {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.struct__hub-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.struct__hub-name {
  font-family: var(--f-head);
  font-size: 19px;
  color: var(--ink);
}

/* ---- spojnice hub -> pilíře ----
   Statické CSS linky místo SVG. Původní verze kreslila cesty přes
   stroke-dasharray s pathLength="1", ale dohromady s preserveAspectRatio="none"
   a non-scaling-stroke prohlížeč počítá čárku v jiném prostoru než délku
   cesty — kreslení se nedopočítalo a linky nedosáhly až k pilířům. Navíc
   celý blok visel na data-anim, takže bez doběhlého observeru zůstal skrytý.
   Tady je každá linka box s 1px pozadím: vždy celá, bez animace, bez JS.

   Střed krajního sloupce není v šestině šířky: mřížka karet má mezeru,
   takže sloupec je (100% - 2×mezera)/3 a jeho střed leží o třetinu mezery
   blíž ke středu. Proto --struct-gap, kterou drží .struct i mřížka karet —
   jedna hodnota na obou místech, jinak by svody minuly karty. */
.struct__links {
  position: relative;
  align-self: stretch;
  height: 120px;
  /* Odstup shora: pavouk nezačíná hned pod pásem čísel. */
  margin-top: 20px;
}

.struct__stem,
.struct__bar,
.struct__drop {
  position: absolute;
  background: rgba(8, 25, 47, .32);
}

/* svislý pahýl z hubu do rozvětvení */
.struct__stem {
  left: 50%;
  top: 0;
  width: 1px;
  height: 44px;
}

/* vodorovná traverza mezi krajními sloupci */
.struct__bar {
  left: calc((100% - 2 * var(--struct-gap)) / 6);
  right: calc((100% - 2 * var(--struct-gap)) / 6);
  top: 44px;
  height: 1px;
}

/* svody do středů tří sloupců */
.struct__drop {
  top: 44px;
  bottom: 0;
  width: 1px;
}

/* Svod nemá na konci tečku: dobíhá přesně na horní hranu kolečka s ikonou
   (.pillar__ico stojí na svislé ose sloupce a mřížka pilířů začíná hned
   pod vějířem), takže linku ukončuje samo kolečko. Tečka na ni jen
   nasedala a dělala z konce dvojitý bod. */
.struct__drop--l {
  left: calc((100% - 2 * var(--struct-gap)) / 6);
}

.struct__drop--c {
  left: 50%;
}

.struct__drop--r {
  right: calc((100% - 2 * var(--struct-gap)) / 6);
}

/* ---- tři pilíře ---- */
/* Tři karty v mřížce. Mezeru drží --struct-gap ze .struct, protože z ní
   počítá středy sloupců i vějíř spojnic nad kartami. */
.struct__pillars {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--struct-gap);
}

/* Podpůrná kompetence pod schématem: AKVIN dělá právní servis pro všechny
   tři pilíře, takže nepatří do žádného sloupce. Vlas nahoře ho od pilířů
   oddělí, ale pás zůstává ve stejném rastru — proto align-self: stretch
   a ne vlastní šířka. */
.struct__support {
  align-self: stretch;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--divider-dark);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
}

/* Stejný rastr jako počet značek v hlavě pilíře (.pillar__count). */
.struct__support-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-on-paper);
}

/* Jeden široký řádek, ne destička jako u značek v pilířích: AKVIN nemá
   nad sebou hlavu oboru, takže si obor (ikona váhy) a roli nese sám.
   Svislé vlasy dělí tři části řádku — identita, popis, odchod na web.
   Odsazení za vlasem je stejné jako mezera před ním (--akvin-pad), jinak
   linka nesedí v ose mezery. */
.akvin {
  --akvin-pad: clamp(13px, 1.4vw, 20px);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--akvin-pad);
  box-sizing: border-box;
  padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 24px);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(8, 25, 47, .1);
  border-radius: 10px;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.akvin:hover {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(8, 25, 47, .22);
}

.akvin:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.akvin__ico {
  width: clamp(26px, 2.2vw, 32px);
  color: var(--gold);
}

.akvin__ico svg {
  width: 100%;
  height: auto;
  display: block;
}

.akvin__id,
.akvin__desc {
  padding-left: var(--akvin-pad);
  border-left: 1px solid var(--divider-dark);
}

.akvin__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Stejná sazba jako název pilíře (.pillar__title) — AKVIN stojí v hierarchii
   vedle nich, ne pod nimi. */
.akvin__name {
  font-family: var(--f-head);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

.akvin__role {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* V 16px (stejně jako ostatní běžný text) se text na širokém pásu láme na
   dva řádky — balance je rozloží rovnoměrně, ať na druhém nezůstane
   osamocené „CFG.“. */
.akvin__desc {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: balance;
}

/* Popisek u šipky zůstává: holá šikmá šipka na konci širokého řádku už
   nedrží u značky a nebylo z ní poznat, na čí web vede. Sazba je stejná
   jako u CTA pilířů (.pillar__more). */
.akvin__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}

.akvin__arrow {
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1;
  color: inherit;
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.akvin:hover .akvin__cta,
.akvin:hover .akvin__arrow {
  color: var(--gold-on-paper);
}

.akvin:hover .akvin__arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {

  .akvin,
  .akvin__cta,
  .akvin__arrow {
    transition: none;
  }

  .akvin:hover .akvin__arrow {
    transform: none;
  }
}

/* Sloupec oboru, ne karta: hlava a pod ní stoh značek, každá ve vlastní
   destičce. Velká deska kolem toho všeho zmizela — plochu v sekci nesou
   jednotlivé značky, ne obor.

   Sloupec je flex, takže odkaz na /projekty/ může marginem sednout na dno
   a všechny tři končí na jedné lince. position: relative drží jen skrytý
   popisek odkazu (.pillar__more-ctx), nic víc ve sloupci nepluje —
   dekorativní fotka v rohu se zkoušela a zase odešla. */
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
  min-width: 0;
}

/* Bez pohybu: u CTA zůstane jen prosvětlení, přejezd světla a nadzvednutí ne. */
@media (prefers-reduced-motion: reduce) {

  .hero-7,
  .hero-16,
  .hero-7:hover,
  .hero-16:hover,
  .hero-7:active,
  .hero-16:active {
    transform: none;
  }

  .hero-7::after,
  .hero-16::after {
    display: none;
  }

  .hero-16 > span,
  .hero-16:hover > span {
    transform: none;
  }

  .hero-17::after {
    transform: scaleX(1);
    opacity: 0;
    transition: opacity .2s linear;
  }

  .hero-17:hover::after {
    opacity: 1;
  }
}

/* Hlava na střed: kolečko s ikonou nahoře, pod ním název oboru a počet
   značek. Kolečko stojí na svislé ose sloupce, protože v ní končí svod
   vějíře z disku CFG — linka doběhne k jeho horní hraně a schéma tím
   drží pohromadě. Kolečko je navy se zlatým vlasem jako ten disk, jen
   v malém. */
.pillar__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: clamp(14px, 1.4vw, 18px);
  border-bottom: 1px solid var(--divider-dark);
}

.pillar__ico {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: clamp(50px, 4.4vw, 58px);
  aspect-ratio: 1;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid rgba(216, 161, 58, .45);
  color: #fff;
  transition: background .45s cubic-bezier(.2, .7, .2, 1);
}

.pillar__ico svg {
  width: 48%;
  height: auto;
  display: block;
}

/* Verzálky, ne displejový stupeň jako dřív: název je tu popiskem oboru
   nad seznamem značek, ne nadpisem karty s vlastní sazbou. */
.pillar__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Počet značek — na papíru navy (AA), ne zlatá (~2,3:1). */
.pillar__count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-on-paper);
  white-space: nowrap;
}

/* Jeden sloupec destiček pod sebou. Dva sloupce se zkoušely, ale při
   1160px stropu na ně vyjde ~150 px na jméno a delší značky se lámaly. */
.pillar__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Položka je jen obal; plochu destičky nese samo .brand, aby u značek
   s vlastním webem byl celý dlaždicový povrch klikací. */
.pillar__list li {
  display: flex;
  min-width: 0;
}

/* Odchod z pilíře na /projekty/ do jeho kotvy. Drobný zlatý řádek bez
   obrysu na střed, hned pod posledním řádkem seznamu: destičky nad ním
   nesou plochu i obrys, takže tlačítko by pod nimi bylo třetí rám v řadě.

   Bez margin-top: auto — odkaz visí na konci svého seznamu, ne na spodní
   hraně sloupce. Seznamy jsou různě dlouhé (7 / 4 / 5 značek), takže tři
   odkazy nesedí na jedné lince; to je záměr, drží se svého oboru. */
.pillar__more {
  align-self: center;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Podtržení: textové CTA na webu je vždy zlatý vlas pod řádkem, aby
     bylo poznat, že jde o odkaz (viz .cta-underline v této sekci). */
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  /* Písmo dědí (Manrope) — v General Sans (--f-ui) čte stejná 700 výrazně
     tučněji než ostatní CTA na stránce a odkaz z řady vystupoval. */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-on-paper);
  transition: color var(--dur) var(--ease-out);
}

.pillar__more:hover {
  color: var(--gold-on-paper);
}

.pillar__more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pillar__more-arrow {
  display: inline-block;
  color: inherit;
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.pillar__more:hover .pillar__more-arrow {
  color: var(--gold-on-paper);
  transform: translateX(5px);
}

/* Tři odkazy mají stejný text; upřesnění je jen pro odečítač, ať se dají
   v seznamu odkazů rozeznat. */
.pillar__more-ctx {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {

  .pillar__more,
  .pillar__more-arrow {
    transition: none;
  }
}

/* Destička jedné značky. Průsvitná bílá na papíru s vlasovým obrysem —
   plocha je světlejší než podklad, takže se stoh čte jako řada dlaždic
   i bez stínu, a fotka pod ní zůstane tušená.

   Jména jdou do displejového písma: struktura je to nejcennější, co sekce
   nese, tak ji nese hlavní hlas stránky, ne běžný text. */
.brand {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(12px, 1.2vw, 16px);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(8, 25, 47, .1);
  border-radius: 10px;
  font-family: var(--f-head);
  font-size: 16.5px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy);
  transition:
    color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Zlatá tečka jako značka řádu, ne odrážka seznamu: v destičce stojí
   uvnitř plochy před jménem. */
.brand::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Šikmá šipka u pravé hrany označuje destičky, které opravdu někam vedou.
   Bez ní vypadá dlaždice se značkou bez webu (prostý <span>) stejně jako
   odkaz a klikatelnost se pozná až najetím myší — na dotyku vůbec.
   Šikmá, ne rovná: všechny tyhle odkazy vedou ven na web značky, kdežto
   rovná šipka dole míří na vlastní /projekty/. */
a.brand::after {
  content: "↗";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 6px;
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

/* Hover jen na značkách, které mají vlastní web — zbytek je prostý <span>.
   Destička se prosvětlí a obrys ztmavne; posun do strany odpadl, dlaždice
   v řadě by se od sebe odtrhávala. Místo něj se hne šipka. */
a.brand:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, .92);
  border-color: rgba(8, 25, 47, .22);
}

a.brand:hover::after {
  color: var(--gold-dark);
  transform: translate(2px, -2px);
}

a.brand:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  .brand,
  a.brand::after {
    transition: none;
  }

  a.brand:hover::after {
    transform: none;
  }
}

/* Značka s licencí ČNB — jediné zvýraznění v seznamu, stojí hned za
   jménem, ať je vidět, ke které společnosti patří (u pravé hrany destičky
   se od jména odtrhla).

   Text je navy na světle zlaté ploše, ne zlatý na bílé: zlatá by při
   8,5 px dala kontrast 2,4:1. Pilulka tak vypadá zlatě a nápis je přitom
   čitelný. */
.brand__cnb {
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy);
  background: rgba(216, 161, 58, .18);
  border: 1px solid rgba(216, 161, 58, .5);
  border-radius: 999px;
  padding: 3px 7px;
}

/* ---- uzávěr schématu: pás k licencím ----
   Zavírá strukturu jednou větou a odkazuje na sekci ČNB hned pod ním.
   Vlajka je kresba, ne text, takže se u ní kontrast neřeší; odkaz jde na
   navy se zlatým podtržením — zlatý text by na papíru neprošel. */
.struct__note {
  align-self: stretch;
  margin: clamp(28px, 3vw, 44px) 0 0;
  box-sizing: border-box;
  padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.2vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  background: var(--paper-2);
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.struct__flag {
  flex: 0 0 auto;
  display: block;
  width: 34px;
  border-radius: 3px;
  overflow: hidden;
  /* Bílá půlka vlajky by na papíru splynula s podkladem. */
  box-shadow: inset 0 0 0 1px rgba(8, 25, 47, .14);
}

.struct__flag svg {
  width: 100%;
  height: auto;
  display: block;
}

.struct__note-text {
  min-width: 0;
}

.struct__note-link {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease-out);
}

.struct__note-link:hover {
  text-decoration-color: var(--navy);
}

@media (max-width: 1100px) {

  /* Pod 1100 px zabírá copy celou šířku pásu, takže vodorovná maska nemá
     kam ustoupit: rám jde zpátky na celý pás (posun doprava nemá na jednom
     sloupci co dělat) a maska se stočí svisle. Síť tím odchází dolů, do
     spodního odsazení pásu pod posledním odstavcem. */
  .o-skupine-1__net {
    inset: 0;
  }

  .o-skupine-1__net .vanta-canvas {
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0 45%,
      rgba(0, 0, 0, .22) 65%,
      #000 90%);
    mask-image: linear-gradient(180deg,
      transparent 0 45%,
      rgba(0, 0, 0, .22) 65%,
      #000 90%);
  }

  /* Na tabletu se disk mezi dva sloupce čísel nevejde: koruna se rozpadne
     na řádky (dvojice — disk — dvojice), obojí na střed. */
  .struct__crown {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(30px, 4.4vw, 44px);
  }

  .fakta {
    column-gap: clamp(30px, 6vw, 60px);
  }

  /* Klema v kontaktu se zužuje s oknem. Mění se jen výška v proměnné —
     šířku sloupce si z ní grid dopočítá sám, takže portrét a citát drží
     odstup v každé šířce. */
  .kontakt-2 {
    --kontakt-portrait: clamp(224px, 43.4vw, 364px);
  }
}

/* Karty už nenesou fotku, takže tři vedle sebe vydrží až sem — kolabují
   na stejné hranici jako ostatní trojice v systému (.cfg-g3), ne s korunou
   na 1100 px. */
@media (max-width: 760px) {

  .struct__pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  /* AKVIN: popis pod identitu. Ve čtyřech sloupcích by na něj zbyla
     necelá polovina šířky a lámal by se po dvou slovech. Svislý vlas
     se tím mění na vodorovný. */
  .akvin {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .akvin__desc {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: var(--akvin-pad);
    border-left: 0;
    border-top: 1px solid var(--divider-dark);
  }

  /* Bez explicitního místa spadne CTA za popis na třetí řádek — popis
     zabírá celou druhou řadu, takže auto-placement pro něj nemá kam. */
  .akvin__cta {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }

  /* Na nejužších displejích se „Navštívit web“ (nezalomitelné) tlačí
     k podtitulu značky, tak jde pod popis na vlastní řádek. */
  @media (max-width: 460px) {

    .akvin {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .akvin__cta {
      grid-row: 3;
      grid-column: 1 / -1;
      justify-self: start;
    }
  }

  /* Vějíř míří na tři sloupce. Ve stohu pod sebou nemá co rozvětvovat,
     takže z něj zůstane jen jedna svislá linka do prvního pilíře. */
  .struct__links {
    height: 56px;
  }

  .struct__bar,
  .struct__drop--l,
  .struct__drop--r {
    display: none;
  }

  .struct__stem {
    height: 28px;
  }

  .struct__drop--c {
    top: 28px;
  }

  /* Pás uzávěru se na telefonu zalomí pod vlajku, aby věta nezůstala
     v úzkém sloupci vedle ní. */
  .struct__note {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 620px) {

  /* Na telefonu zůstávají dvojice v řadě, jen se stáhnou čísla i disk. */
  .fakta__item {
    padding-inline: 8px;
  }

  .fakta__num {
    font-size: 32px;
  }

  .struct__disc {
    width: 112px;
    height: 112px;
  }
}

/* ============================================================
   PATIČKA (ručně psané, převzatá struktura z cfgtech, vizuál směru 2)
   Navazuje bez mezery na navy sekci kontaktu — vlastní horní linka
   nahrazuje dřívější pásek .kontakt-9. Portrét CEO na ní nestojí, ale
   přesahuje přes ni dovnitř patičky (bleed je v .kontakt-8), takže její
   horní odsazení musí zůstat větší než ten přesah.
   ============================================================ */

.foot {
  position: relative;
  background: #05101f;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .14);
  overflow: clip;
}

/* Vodoznak je tentýž wordmark jako logo v patičce — General Sans 400
   měl jiný řez a vypadal tenký. Průsvitnost drží, aby zůstal texturou. */
.foot__mark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(200px, 24vw, 340px);
  aspect-ratio: 65 / 23;
  background: url('../assets/logo-cfg.svg') no-repeat center / contain;
  opacity: .09;
  pointer-events: none;
  user-select: none;
  font-size: 0;
}

.foot__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(48px, 5.4vw, 76px) clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.4vw, 56px);
}

.foot__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}

.foot__logo {
  width: 96px;
  height: auto;
  display: block;
}

.foot__claim {
  margin: 0;
  max-width: 340px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.foot__head {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
  transition: color .25s, transform .25s;
}

.foot__list a:hover {
  color: var(--gold);
  transform: translateX(3px);
}

.foot__ext {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-dark-soft);
}

.foot__list a:hover .foot__ext {
  color: var(--gold);
}

/* Kontakt jede na stejném rastru jako Navigace a Sítě (.foot__list), aby
   byly rozestupy řádků ve všech sloupcích patičky shodné. Adresa není
   odkaz, takže barvu i velikost dostane zvlášť. */
.foot__addr address {
  margin: 0;
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}

.foot__bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding-block: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.foot__legal a {
  transition: color .25s;
}

.foot__legal a:hover {
  color: var(--gold);
}

@media (max-width: 1100px) {
  .foot__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Brandový sloupec přes celou šířku, ať se claim nezalamuje po dvou slovech. */
  .foot__brand {
    grid-column: 1 / -1;
  }

  .foot__claim {
    max-width: 460px;
  }
}

@media (max-width: 620px) {
  .foot__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .foot__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .foot__mark {
    display: none;
  }
}

/* ============================================================
   NAŠE OBLASTI — rejstřík (ručně psané, BEM)
   Tři pilíře nejsou tři karty, ale jeden registr: řádky dělené
   vlasem, bez rámečků a bez pořadových čísel (pořadí tu nenese
   informaci). Celý řádek je jeden <a>, takže proklik funguje
   z libovolného místa i z klávesnice.
   ============================================================ */

.obl-led {
  border-top: 1px solid var(--divider-dark);
}

.obl-led__row {
  position: relative;
  isolation: isolate;
  display: grid;
  /* Dva sloupce: název | text + CTA pod ním — CTA neukrajuje šířku popisu. */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr);
  align-items: start;
  column-gap: clamp(28px, 3.2vw, 56px);
  row-gap: 12px;
  padding-block: clamp(22px, 2.2vw, 32px);
  padding-inline: clamp(14px, 1.6vw, 26px);
  border-bottom: 1px solid var(--divider-dark);
  color: var(--ink);
  transition: color var(--dur-slow) var(--ease-out);
}

/* Navy vyjede zleva doprava — vodorovný tah po řádku výkazu.
   Pseudo leží na z-index: -1 v izolovaném kontextu, takže překryje
   podklad i vlas, ale ne obsah. */
.obl-led__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease-out);
}

.obl-led__row:hover::before,
.obl-led__row:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.obl-led__row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.obl-led__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.obl-led__name {
  font-family: var(--f-head);
  font-size: clamp(27px, 2.29vw, 36px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--navy);
}

.obl-led__meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-soft);
}

.obl-led__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.obl-led__desc {
  max-width: 68ch;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  /* ink místo ink-soft — delší odstavec musí projít AA na papíru. */
  color: var(--ink);
}

.obl-led__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}

.obl-led__arrow {
  display: inline-block;
  color: inherit;
}

/* Barvy mají potomci nastavené explicitně, takže se na navy podkladu
   musí přebarvit adresně — dědění by nestačilo. */
.obl-led__name,
.obl-led__meta,
.obl-led__desc,
.obl-led__go,
.obl-led__arrow {
  transition: color var(--dur-slow) var(--ease-out);
}

.obl-led__arrow {
  transition: transform var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}

.obl-led__row:hover .obl-led__name,
.obl-led__row:focus-visible .obl-led__name {
  color: #fff;
}

.obl-led__row:hover .obl-led__meta,
.obl-led__row:focus-visible .obl-led__meta,
.obl-led__row:hover .obl-led__go,
.obl-led__row:focus-visible .obl-led__go {
  color: var(--gold-soft);
}

.obl-led__row:hover .obl-led__desc,
.obl-led__row:focus-visible .obl-led__desc {
  color: rgba(238, 242, 248, .72);
}

.obl-led__row:hover .obl-led__arrow,
.obl-led__row:focus-visible .obl-led__arrow {
  color: var(--gold-soft);
  transform: translateX(5px);
}

@media (max-width: 1100px) {

  /* Ve stohu se řádek sesype na jeden sloupec: název, popis, proklik. */
  .obl-led__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Místo wipe se výplň prolne a šipka se nehýbe. */
  .obl-led__row::before {
    clip-path: inset(0 0 0 0);
    opacity: 0;
    transition: opacity .2s linear;
  }

  .obl-led__row:hover::before,
  .obl-led__row:focus-visible::before {
    opacity: 1;
  }

  .obl-led__arrow,
  .obl-led__row:hover .obl-led__arrow,
  .obl-led__row:focus-visible .obl-led__arrow {
    transform: none;
  }
}

/* ============================================================
   MOBILNÍ ROZVRŽENÍ HOMEPAGE
   ------------------------------------------------------------
   Sekce homepage sázely na marker třídy .cfg-split / .cfg-g3 /
   .cfg-g4 / .cfg-foot z cfg-brand.css. Ty ale mají stejnou
   specificitu (0,1,0) jako pojmenované třídy tady a cfg-brand.css
   se načítá dřív, takže kolaps nikdy nenastal — na telefonu stály
   tři pilíře i tři novinky vedle sebe a přebytek uřízl
   overflow: clip. Rozvržení pro telefon proto drží tenhle blok:
   je poslední v souboru, takže vyhraje bez !important a bez
   zvyšování specificity (to by rozbilo podstránky, které stejné
   markery používají s vlastními hodnotami).

   Vzorec je všude stejný: nadpis a perex nahoře, karty pod nimi
   na plnou šířku.
   ============================================================ */
@media (max-width: 760px) {

  /* ---- hero: čísla ve třech sloupcích / na úzkém pod sebou ----
     Buňka má ~165px. S původním 24px odsazením po stranách a číslem
     v 52px by se „540+ mil. Kč“ zalomilo pod hodnotu a pás by narostl
     o řádek na každé buňce. Odsazení se sjednocuje i proto, že střední
     buňky (.u-7) měly 10px a krajní 24px. */
  .hero-18> * {
    padding-inline: clamp(8px, 3vw, 20px);
  }

  .u-5 {
    font-size: clamp(38px, 11vw, 52px);
  }

  /* ---- tři pilíře, aktuálně, slovo CEO: hlava nad obsahem ---- */
  .oblasti-2,
  .novinky-1,
  .kontakt-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 6vw, 40px);
  }

  /* ---- aktuálně: karty pod sebou ---- */
  .novinky-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- kariéra (teaser): řádek pozice jako stoh ----
     Pořadí je jiné než v DOM: po názvu jde „kde a na jak dlouho“
     a teprve pak tým, do kterého se nastupuje. Přes order, ne
     přepsaným markupem — stejný řádek staví i js/kariera.js
     z /api/jobs a musel by se měnit na dvou místech. */
  .u-58 {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 22px 0;
  }

  .u-58> :nth-child(1) {
    order: 1;
  }

  .u-58> :nth-child(3) {
    order: 2;
  }

  .u-58> :nth-child(2) {
    order: 3;
  }

  .u-58> :nth-child(4) {
    order: 4;
  }

  .u-59 {
    font-size: 21px;
    line-height: 1.25;
  }

  /* Holá šipka je na samostatném řádku bez významu — dostane slovo.
     Přes ::before, aby ho měl i řádek vykreslený z API. */
  .u-61 {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .u-61::before {
    content: 'Více ';
  }

  /* Hover posouvá řádek doprava; na dotyku se drží jako stav po
     tapnutí a lišta pak visí mimo osu ostatních. */
  .u-58:hover {
    padding-left: 0;
  }

  /* ---- ČNB licence: karty pod sebou ---- */
  .licence__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* ---- vedení: dvojice na řádek ----
     auto-fit s minmax(170px, 1fr) spadne na telefonu na jeden sloupec
     a z každého portrétu 3/4 je pak samostatná obrazovka. Napevno dva. */
  .vedeni-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- slovo CEO: text na střed, portrét přes celou šířku ---- */
  .kontakt-3 {
    align-items: center;
    text-align: center;
  }

  .kontakt-3 .u-1 {
    justify-content: center;
  }

  .kontakt-5 {
    align-items: center;
  }

  /* Portrét jde z obsahového sloupce až k hranám okna: bleed je záporný
     padding .cfg-wrap. Opisuje se celý clamp, ne jen jeho spodní mez —
     mezi 500 a 760px je padding 20 až 30px, ne pořád 20. Druhý člen
     max() v .cfg-wrap je pod 1920px záporný, takže se do bleedu nepočítá. */
  /* Jeden sloupec: umístění z širokého okna se musí zrušit celé, jinak by
     grid-column: 2 u citátu vyrobil implicitní druhý sloupec a grid-row: 1
     by portrét nacpal do stejného pole jako text. */
  .kontakt-2 > .kontakt-3,
  .kontakt-2 > .kontakt-8 {
    grid-column: auto;
    grid-row: auto;
  }

  .kontakt-2 {
    --kontakt-portrait: clamp(210px, 54.6vw, 322px);
  }

  .kontakt-8 {
    margin-inline: calc(-1 * clamp(20px, 4vw, 56px));
    background-position: center bottom;
    background-size: contain;
  }
}