/* ─── PREZENTA — Flexi podstrana ──────────────────────────────────────────
   Soubor: assets/css/flexi.css
   Načítá se POUZE na šabloně page-flexi.php (viz inc/enqueue.php).
   Staví na design tokenech z prezenta.css (:root) – žádné duplicity.
   Konvence: BEM, mobile-first, clamp() typografie, prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

/* Lenis base styly jsou globálně v prezenta.css. */

/* ─── Lokální tokeny ─────────────────────────────────────────── */
.flexi {
  --flexi-max: 1280px;
  --flexi-gutter: clamp(20px, 5vw, 32px);
  --flexi-section-y: clamp(96px, 13vh, 188px);
  --flexi-nav-offset: 84px; /* výška hlavní nav pro kotvy */
  --flexi-radius: 26px;
  --flexi-ease: var(--ease-out); /* napojeno na globální motion systém */

  /* Hlavní tyrkysová z loga – fixně napříč Flexi (i tlačítka/brand prvky) */
  --flexi-accent: #3e98d7;
  --brand: #3e98d7;
  --brand-gradient: linear-gradient(135deg, #3e98d7 0%, #2f88c8 100%);
  --brand-soft: #6fb4e3;

  overflow: clip; /* zamezí horizontálnímu přetečení z parallaxu */
}

/* nav + sticky produktová lišta (offset pro nativní skok / reduced-motion) */
.flexi [id] { scroll-margin-top: calc(var(--flexi-nav-offset) + 78px); }

/* ─── Sticky produktová lišta (on-page chooser) ──────────────── */
.flexi-productbar {
  position: fixed;
  top: var(--flexi-bar-top, 72px);
  left: 0;
  right: 0;
  z-index: 90; /* pod hlavní nav (z-index 100) */
  pointer-events: none; /* skrytá: neblokuj kliknutí */
  opacity: 0;
  /* Schovaná = vysunutá o vlastní výšku nahoru, tj. ZA hlavní nav (nav má vyšší
     z-index a v této oblasti plné pozadí → lištu překryje). Reveal pak vypadá
     jako plynulé „vyjetí zpod menu"; schování jako zalezení zpět pod menu. */
  transform: translateY(-100%);
  transition: opacity 0.45s var(--flexi-ease), transform 0.55s var(--flexi-ease);
}
.flexi-productbar.is-visible {
  opacity: 1;
  transform: translateY(0); /* vyjede zpod nav dolů na své místo */
  pointer-events: auto;
}
/* Auto-hide: lišta sjede nahoru pod nav A SOUČASNĚ vyfadeuje. Nad světlými
   sekcemi má nav plné pozadí (čte se jako „zaleze pod menu"), nad tmavými je
   nav průhledný → bez fadu by zasunutá lišta prosvítala. Fade to řeší. */
.flexi-productbar.is-visible.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.4s var(--flexi-ease), transform 0.45s var(--flexi-ease);
}
/* Hover na „Flexi" v menu (nebo na samotnou lištu) → submenu zase vyjede ven,
   i když ho scroll schoval. Definováno ZA .is-hidden → při souběhu vyhrává. */
.flexi-productbar.is-visible.is-peek {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform 0.5s var(--flexi-ease);
}

/* Pruh: nad hero průhledný (overlay), po opuštění hero plný bílý (solid white –
   backdrop blur rozbíjel produkty). Přepíná se přes .is-solid spolu s nav. */
.flexi-productbar__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 4px var(--flexi-gutter);
  list-style: none;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 14px 32px -26px rgba(18, 18, 36, 0);
  transition: background 0.4s var(--flexi-ease), border-color 0.4s var(--flexi-ease), box-shadow 0.4s var(--flexi-ease);
}
.flexi-productbar.is-solid .flexi-productbar__list {
  background: #ffffff;
  border-bottom-color: var(--line);
  box-shadow: 0 14px 32px -26px rgba(18, 18, 36, 0.3);
}
.flexi-productbar__list::-webkit-scrollbar { display: none; }

.flexi-productbar__item { flex: 0 0 auto; list-style: none; }

/* Dlaždice – obrázek + label (à la původní flyout), světlý chip */
.flexi-productbar__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 120px;
  padding: 4px 10px 5px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s var(--flexi-ease), transform 0.25s var(--flexi-ease);
}
.flexi-productbar__tile:hover { transform: translateY(-2px); }

.flexi-productbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  padding: 2px;
}
.flexi-productbar__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(18, 18, 36, 0.16));
  transition: transform 0.4s var(--flexi-ease);
}
.flexi-productbar__tile:hover .flexi-productbar__icon img { transform: scale(1.05); }

/* Glyf „vlajka" z loga (Všechny Flexi) místo fotky – barva sleduje stav lišty. */
.flexi-productbar__icon--glyph { color: #fff; transition: color 0.3s var(--flexi-ease); }
.flexi-productbar.is-solid .flexi-productbar__icon--glyph { color: var(--fg); }
.flexi-productbar__icon--glyph svg { width: 42px; height: auto; display: block; transition: transform 0.4s var(--flexi-ease); }
.flexi-productbar__tile:hover .flexi-productbar__icon--glyph svg { transform: scale(1.05); }
.flexi-productbar__tile.is-active .flexi-productbar__icon--glyph { color: var(--brand); }

.flexi-productbar__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff; /* nad tmavým hero */
  transition: color 0.3s var(--flexi-ease);
}
.flexi-productbar.is-solid .flexi-productbar__label {
  color: var(--fg);
}

.flexi-productbar__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: var(--kicker);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--brand-tint, #e3f4fb);
  color: var(--brand);
}

/* Scroll-spy: aktivní produkt – bez podbarvení, jen zvýrazněný popisek */
.flexi-productbar__tile.is-active .flexi-productbar__label { color: var(--brand); }

/* Připravujeme: produkt zatím bez vlastní podstrany – plně barevný, jen bez odkazu */
.flexi-productbar__tile.is-disabled { cursor: default; }
.flexi-productbar__tile.is-disabled:hover { transform: none; }
.flexi-productbar__tile.is-disabled:hover .flexi-productbar__icon img { transform: none; }

/* ─── Varianta „ghost": bílý text, BEZ bílého pruhu (overlay) ─────────
   Pro podstrany, kde má lišta zůstat průhledná přes celou stránku –
   pruh se nikdy nezesvětlí (ani v .is-solid), text/ikony drží bílé se
   stínováním pro čitelnost nad světlejším pozadím. Aktivní stav (brand)
   zůstává, proto :not(.is-active). */
.flexi-productbar--ghost .flexi-productbar__list,
.flexi-productbar--ghost.is-solid .flexi-productbar__list {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.flexi-productbar--ghost .flexi-productbar__tile:not(.is-active) .flexi-productbar__label,
.flexi-productbar--ghost.is-solid .flexi-productbar__tile:not(.is-active) .flexi-productbar__label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(18, 18, 36, 0.5);
}
.flexi-productbar--ghost .flexi-productbar__tile:not(.is-active) .flexi-productbar__icon--glyph,
.flexi-productbar--ghost.is-solid .flexi-productbar__tile:not(.is-active) .flexi-productbar__icon--glyph {
  color: #fff;
}
.flexi-productbar--ghost .flexi-productbar__icon img {
  filter: drop-shadow(0 4px 10px rgba(18, 18, 36, 0.5));
}

@media (max-width: 600px) {
  .flexi-productbar__list { justify-content: flex-start; }
  .flexi-productbar__tile { width: 92px; }
  .flexi-productbar__icon { width: 52px; height: 34px; }
  .flexi-productbar__label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .flexi-productbar { transition: opacity 0.2s linear; transform: none; }
  .flexi-productbar.is-visible { transform: none; }
  .flexi-productbar.is-visible.is-hidden { transform: none; opacity: 0; transition: opacity 0.2s linear; }
  .flexi-productbar.is-visible.is-peek { transform: none; opacity: 1; transition: opacity 0.2s linear; }
  .flexi-productbar__tile:hover { transform: none; }
}

/* Sdílený container */
.flexi-hero__inner,
.flexi-stolky__grid,
.flexi-panely__inner,
.flexi-acc__inner,
.flexi-intro__inner {
  width: min(var(--flexi-max), 100% - (var(--flexi-gutter) * 2));
  margin-inline: auto;
}

/* Reveal primitive (řízeno JS / fallback níže) */
[data-flexi-reveal] {
  opacity: 0;
  transform: translateY(var(--move));
  will-change: opacity, transform;
}
.flexi.is-ready [data-flexi-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════
   HERO „CINEMATIC EXPAND" (Stěny) – scroll-driven reveal snímku
   (ref: sliderrevolution oceanview-villa jako wireframe, NE kopie)
   LOAD: tmavé pozadí, nadpis+eyebrow nahoře, snímek = malé „okénko"
   (clip-path inset). SCROLL: okénko se roztáhne na full-bleed
   (clip-path → 0), nadpis přebarví na bílou, eyebrow zmizí, lead+CTA
   se odhalí dole vlevo. Default (no-JS/mobil/a11y) = otevřený stav.
   ══════════════════════════════════════════════════════════════ */
.flexi-hero {
  --hero-ink: #f4f8fc;
  --hero-teal: #5cc0ec;
  position: relative;
  min-height: 100svh;
  overflow: hidden; isolation: isolate;
  color: var(--hero-ink);
  background: #15171a; /* tmavá báze – viditelná kolem zmenšeného okénka */
}

/* ── Snímek jako roztažitelné „okénko" (clip-path) ───────────── */
.flexi-hero__media {
  position: absolute; inset: 0; z-index: 0;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}
.flexi-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  will-change: transform;
}
/* čitelnost nadpisu/CTA po roztažení (jen v otevřeném stavu se projeví) */
.flexi-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.52) 0%,
    rgba(8, 10, 14, 0.06) 22%,
    rgba(8, 10, 14, 0.00) 54%,
    rgba(8, 10, 14, 0.50) 100%
  );
}

/* ── Hlava: nadpis nahoře vystředěný (posunutý níž do optického středu) ─ */
.flexi-hero__head {
  position: absolute; top: clamp(104px, 16vh, 196px); left: 50%;
  transform: translateX(-50%);
  z-index: 3; width: 100%; padding-inline: var(--flexi-gutter);
  text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vh, 20px);
}
/* Nadpis = Apple-style: lehčí řez, čistá typografie, minimum dekorace,
   jeden řádek (nowrap). Jen velmi jemný stín kvůli čitelnosti nad snímkem. */
.flexi-hero__title {
  margin: 0; max-width: none; white-space: nowrap;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 6vw, 80px); line-height: 1.06; letter-spacing: -0.015em;
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(2, 4, 8, 0.28);
}
/* Pravý dolní roh: typografický podpis + standardní CTA tlačítko (.btn).
   Wrapper pozicuje, děti centrované pod sebou. */
.flexi-hero__corner {
  position: absolute; right: calc(var(--flexi-gutter) + clamp(16px, 4vw, 72px)); bottom: clamp(44px, 9vh, 104px);
  top: auto; left: auto; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.4vh, 26px);
  text-align: center; pointer-events: none;
}
.flexi-hero__corner .flexi-hero__cta { pointer-events: auto; }

/* Eyebrow = decentní typografický podpis (Apple-style): tři slova na střed,
   lehký řez, vzdušné prostrkání. Reveal (fade + jemný blur) řeší flexi.js
   (buildHeroEntrance). Žádný transform pro pozicování (GSAP cinematic
   tweenuje na eyebrow y → kolidovalo by). */
.flexi-hero__eyebrow {
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.6vh, 7px);
  font-family: var(--kicker); font-weight: 300;
  font-size: clamp(11px, 0.78vw, 12px); line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 248, 252, 0.5);
  text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.flexi-hero__eyebrow-line { display: block; }

/* ── Scroll cue ──────────────────────────────────────────────── */
.flexi-hero__scroll {
  position: absolute; left: 50%; bottom: clamp(16px, 3vh, 30px); transform: translateX(-50%);
  z-index: 3; display: block;
}
.flexi-hero__scroll-track {
  display: flex; justify-content: center; padding-top: 7px;
  width: 22px; height: 36px; border: 1.5px solid rgba(244, 248, 252, 0.4); border-radius: 12px;
}
.flexi-hero__scroll-dot {
  width: 3px; height: 7px; border-radius: 2px; background: rgba(244, 248, 252, 0.85);
  animation: flexiHeroScroll 1.9s var(--flexi-ease) infinite;
}
@keyframes flexiHeroScroll {
  0% { opacity: 0; transform: translateY(-4px); }
  35% { opacity: 1; }
  70% { opacity: 1; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ── Initial („closed") stav – jen když naběhl JS na desktopu bez
   reduced-motion. Předkreslí okénko → žádný flash full-bleed před
   převzetím GSAPem. GSAP hodnoty (clip-path / barva) musí sedět! ── */
@media (min-width: 920px) and (prefers-reduced-motion: no-preference) {
  /* Okénko vertikálně posunuté o +88px dolů (optický střed pod nadpisem).
     inset(top right bottom left) – musí sedět s JS applyClip (START_OFFSET_Y). */
  .flexi.is-ready .flexi-hero__media {
    clip-path: inset(
      calc((100vh - 450px) / 2 + 88px)
      calc((100vw - 380px) / 2)
      calc((100vh - 450px) / 2 - 88px)
      calc((100vw - 380px) / 2)
    );
  }
}

/* ── Responsivita ────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Mobil (full-bleed snímek): nadpis nahoře (smí se zalomit), podpis + CTA
     vycentrované dole. */
  .flexi-hero__head { top: clamp(96px, 16vh, 150px); }
  .flexi-hero__title { white-space: normal; }
  .flexi-hero__corner {
    right: 0; left: 0; bottom: clamp(40px, 8vh, 88px);
    padding-inline: var(--flexi-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flexi-hero__media { clip-path: inset(0 0 0 0); }
  .flexi-hero__bg { will-change: auto; }
  .flexi-hero__scroll-dot { animation: none; }
}



/* ══════════════════════════════════════════════════════════════
   STOLKY – pinned scrub sestavení + časovač
   ══════════════════════════════════════════════════════════════ */
.flexi-stolky {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 40%, var(--bg-tint-2) 100%);
}
.flexi-stolky__pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--flexi-section-y) 0;
}
.flexi-stolky__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  width: min(var(--flexi-max), 100% - (var(--flexi-gutter) * 2));
}
@media (min-width: 920px) {
  .flexi-stolky__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.flexi-stolky__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 18px 0 28px;
}
.flexi-stolky__accent {
  display: inline;
  background: var(--brand-gradient, var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flexi-stolky__timer {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin-bottom: 30px;
}
.flexi-stolky__timer-val { font-size: clamp(46px, 6vw, 80px); font-variant-numeric: tabular-nums; }
.flexi-stolky__timer-unit { font-size: clamp(22px, 2.6vw, 34px); color: var(--brand); }

.flexi-stolky__visual {
  position: relative;
  margin: 0;
}
.flexi-stolky__stack {
  position: relative;
  aspect-ratio: 1000 / 1500;
  width: min(100%, 420px);
  margin-inline: auto;
  z-index: 2;
}
.flexi-stolky__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.flexi-stolky__frame.is-base { opacity: 1; }
.flexi-stolky__glow {
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 152, 215, 0.22), transparent 70%);
  filter: blur(40px);
  z-index: 1;
}
.flexi-stolky__floor {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 62%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(18, 18, 36, 0.16), transparent 70%);
  filter: blur(8px);
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   PANELY – showroom lineup (3 produkty 100% viditelné, wow)
   ══════════════════════════════════════════════════════════════ */
.flexi-panely {
  position: relative;
  /* „cover" reveal jako na tbp.studio – sekce se vynoří jako zaoblená karta
     a překryje předchozí sekci (stolky). z-index + přesah + zaoblená hrana. */
  z-index: 2;
  margin-top: clamp(-110px, -9vh, -64px);
  box-shadow: 0 -36px 90px -28px rgba(0, 0, 0, 0.65);
  min-height: 100vh;
  display: block;
  padding: 0 0 clamp(56px, 8vh, 100px);
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 78%, #0a3a5c 0%, transparent 62%),
    linear-gradient(170deg, #051f30 0%, #03121a 60%, #020a10 100%);
}
.flexi-panely__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* fotka jako cinematic pozadí + ztmavení pro čitelnost produktů a textu */
  background-image:
    radial-gradient(50% 40% at 50% 64%, rgba(62, 152, 215, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(3, 16, 26, 0.93) 0%, rgba(3, 16, 26, 0.84) 42%, rgba(2, 10, 16, 0.96) 100%),
    var(--panely-bg);
  background-size: cover, cover, cover;
  /* pozice fotky musí být shodná se zoom-scénou (center 32%), aby při
     prolnutí (ztmavnutí) nebyl vidět posun/skok pozadí */
  background-position: center, center, center 32%;
  background-repeat: no-repeat;
  /* fotka jen jako náznak – ztmavená a změklá, aby produkty nezanikaly */
  filter: saturate(0.85) brightness(0.9);
  /* jemné přiblížení, aby fotka působila prostorově (mobil / no-JS) */
  transform: scale(1.06);
  will-change: transform;
}
/* Desktop (kde běží zoom hero): „cover" MUSÍ vycházet z viewportu, ne
   z celé (několikanásobně vyšší) sekce – jinak se fotka nafoukne ~3× a
   po předání ze zoom scény působí mnohem větší/detailnější. background-
   attachment: fixed přepne referenční box na viewport = shodně se scénou.
   (transform by fixed rozbil → měřítko zde neřešíme, řídí ho zoom scéna). */
@media (min-width: 920px) and (prefers-reduced-motion: no-preference) {
  .flexi-panely__bg {
    background-attachment: fixed;
    transform: none;
    will-change: auto;
  }
}
.flexi-panely__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(1320px, 100% - (var(--flexi-gutter) * 2));
  margin-inline: auto;
  padding-top: clamp(64px, 11vh, 132px);
}

/* ── Zoom-mask hero (Apple-style scroll storytelling) ───────────
   Obří UNIKÁT = díry v tmavém overlay; za nimi showroom. Scrollem
   se písmena (v SVG masce) zvětší → uživatel „prolétne" skrz text,
   overlay zprůhlední a odhalí produktovou sekci. Řízeno JS scrubem.
   Default skryté; aktivní jen desktop + no-reduced-motion (níže). */
.flexi-panely__zoom { display: none; }

@media (min-width: 920px) and (prefers-reduced-motion: no-preference) {
  .flexi-panely__zoom {
    display: block;
    position: relative;
    z-index: 25;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .flexi-panely__zoom-scene {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(60% 50% at 50% 55%, rgba(62, 152, 215, 0.16), transparent 72%),
      var(--zoom-photo);
    background-size: cover, cover;
    background-position: center, center 32%;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transform-origin: center center;
    will-change: transform;
  }
  /* Ztmavovací ZÁVOJ – POUZE gradienty, žádná druhá kopie fotky.
     Fotka se tak renderuje jen jednou (ve scéně); při ztmavení se mění
     výhradně opacity tohoto závoje → výřez, velikost ani pozice fotky se
     nemají jak změnit (žádný druhý cover, žádné subpixelové rozdíly). */
  .flexi-panely__zoom-dark {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(50% 40% at 50% 64%, rgba(62, 152, 215, 0.12), transparent 70%),
      linear-gradient(180deg, rgba(3, 16, 26, 0.93) 0%, rgba(3, 16, 26, 0.84) 42%, rgba(2, 10, 16, 0.96) 100%);
    opacity: 0;
    will-change: opacity;
  }
  .flexi-panely__zoom-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .flexi-panely__zoom-mask [data-panely-zoom-letters] {
    will-change: transform;
  }
  /* scroll hint */
  .flexi-panely__zoom-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 5vh, 56px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--kicker);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
  .flexi-panely__zoom-hint-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
    animation: flexi-zoom-hint 2.4s var(--ease-in-out) infinite;
    transform-origin: top center;
  }
}
@keyframes flexi-zoom-hint {
  0%   { transform: scaleY(0.2); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.flexi-panely__head { position: relative; z-index: 20; margin-bottom: clamp(28px, 4vw, 52px); }
.flexi-panely__head .kicker { justify-content: center; }
.flexi-panely__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  margin-top: clamp(14px, 1.6vw, 22px);
  /* prostor, aby background-clip:text neořezal diakritiku/dotahy */
  padding-bottom: 0.14em;
}
.flexi-panely__line { display: block; }
.flexi-panely__line--dim {
  /* fresh tyrkysový gradient – diagonální, se světlou aqua špičkou */
  background: linear-gradient(125deg, #2fe0b0 0%, #38e1d8 30%, #5fd0f5 60%, #3e98d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* diakritika (ý, č) + dotahy se vejdou */
  padding: 0.04em 0.04em 0.1em;
}

/* galerie – tři produkty vedle sebe, každý celý vidět */
.flexi-panely__gallery {
  /* nad sticky intro hlavičkou – produkty se při scrollu nasunou přes text */
  position: relative;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 48px);
  margin-bottom: clamp(32px, 5vw, 56px);
  /* full-bleed: dost místa pro velkou stěnu + boční panely */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(20px, 4vw, 80px);
}
.flexi-panely__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  will-change: transform;
  /* zoom reveal: start malé+skryté → .is-zoomed je zvětší (řízeno JS) */
  opacity: 0;
  transform: translateY(var(--move)) scale(0.9);
  transform-origin: bottom center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.flexi-panely__item.is-zoomed {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .flexi-panely__item { opacity: 1; transform: none; }
}

/* ── Cursor magnifier (lupa na kurzoru) ── */
@media (hover: hover) and (pointer: fine) {
  .flexi-panely__item { cursor: none; }
}
.flexi-panely__lens {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(150px, 13vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  transition: opacity 0.28s var(--flexi-ease), transform 0.4s var(--flexi-ease);
  box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 50px rgba(62, 152, 215, 0.45);
  will-change: transform, opacity, left, top;
  background: #04090c;
}
.flexi-panely__lens.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.flexi-panely__lens img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: auto;
  height: auto;
}
/* jemný lesk / vinětace uvnitř lupy */
.flexi-panely__lens-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), inset 0 2px 6px rgba(255, 255, 255, 0.25);
}
.flexi-panely__shot {
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 60px var(--glow)) drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
  transform-origin: bottom center;
  will-change: transform;
  /* jemný nekonečný float – každý produkt jiné tempo (viz modifikátory) */
  animation: flexi-panely-float 6s ease-in-out infinite;
}
/* odsazené tempo a fáze pro organický, nesynchronní pohyb */
.flexi-panely__item--fatra .flexi-panely__shot   { animation-duration: 6.5s; animation-delay: -1.2s; }
.flexi-panely__item--wall .flexi-panely__shot    { animation-duration: 8s;   animation-delay: -3s; }
.flexi-panely__item--samsung .flexi-panely__shot { animation-duration: 7.2s; animation-delay: -0.4s; }

@keyframes flexi-panely-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .flexi-panely__shot { animation: none; }
}
/* výšky dle formátu – prostřední stěna VĚTŠÍ než boční panely */
.flexi-panely__item--fatra .flexi-panely__shot,
.flexi-panely__item--samsung .flexi-panely__shot { height: clamp(360px, 60vh, 680px); }
.flexi-panely__item--wall .flexi-panely__shot { height: clamp(400px, 70vh, 760px); }

/* odraz pod produktem */
.flexi-panely__reflect {
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: 76%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--glow), transparent 72%);
  filter: blur(10px);
  opacity: 0.7;
}

.flexi-panely__actions { position: relative; z-index: 2; }

/* tablet/mobil: produkty pod sebe, stále plně vidět */
@media (max-width: 860px) {
  .flexi-panely__gallery {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: clamp(40px, 9vw, 72px);
  }
  .flexi-panely__item { flex: 0 0 100%; }
  .flexi-panely__item--fatra .flexi-panely__shot,
  .flexi-panely__item--samsung .flexi-panely__shot { height: 60vh; max-height: 500px; }
  .flexi-panely__item--wall .flexi-panely__shot { height: auto; width: min(94%, 520px); }
}

/* MacBook Air (a podobné laptopy): boční panely posunout dovnitř k prostřední
   stěně – panely-lit-1 (fatra) o 15 % doprava, panely-lit-2 (samsung) o 15 %
   doleva. Posun je v obou stavech (před i po zoom revealu), aby nezmizel. */
@media (min-width: 861px) and (max-width: 1536px) {
  .flexi-panely__item--fatra {
    transform: translateY(var(--move)) translateX(15%) scale(0.9);
  }
  .flexi-panely__item--fatra.is-zoomed {
    transform: translateX(15%) scale(1);
  }
  .flexi-panely__item--samsung {
    transform: translateY(var(--move)) translateX(-15%) scale(0.9);
  }
  .flexi-panely__item--samsung.is-zoomed {
    transform: translateX(-15%) scale(1);
  }
}

/* ══════════════════════════════════════════════════════════════
   CUBE LED – tmavá, rozsvícení
   ══════════════════════════════════════════════════════════════ */
.flexi-cube {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #0a3a5c 0%, #061a24 55%, #03101a 100%);
  color: #fff;
  overflow: hidden;
}
.flexi-cube__pin {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 36px;
  width: 100%;
  padding: var(--flexi-section-y) var(--flexi-gutter);
  text-align: center;
}
@media (min-width: 920px) {
  .flexi-cube__pin {
    /* full-bleed: prosvětlený Cube panel táhne k levému okraji, text vpravo */
    grid-template-columns: 1.7fr 1fr;
    align-items: center;
    justify-items: stretch;
    gap: clamp(20px, 3vw, 56px);
    padding: var(--flexi-section-y) clamp(40px, 6vw, 110px) var(--flexi-section-y) 0;
    text-align: left;
  }
}
.flexi-cube__aura {
  position: absolute;
  width: 82vw;
  height: 82vw;
  max-width: 1040px;
  max-height: 1040px;
  border-radius: 50%;
  /* směrový přechod jako na displeji: cyan vlevo → fialová vpravo (dvě překryté záře) */
  background:
    radial-gradient(62% 62% at 30% 44%, rgba(40, 205, 255, 0.62) 0%, rgba(30, 150, 255, 0.32) 38%, transparent 70%),
    radial-gradient(60% 60% at 72% 60%, rgba(165, 70, 230, 0.5) 0%, rgba(120, 60, 220, 0.26) 40%, transparent 72%);
  filter: blur(44px);
  opacity: 0.12;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) scale(var(--aura-s, 0.85));
  z-index: 0;
}
@media (min-width: 920px) {
  /* záře za prosvětleným panelem */
  .flexi-cube__aura { left: 40%; top: 50%; transform: translate(-50%, -50%) scale(var(--aura-s, 0.85)); }
}
.flexi-cube__visual {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1600 / 1067;
}
@media (min-width: 920px) {
  .flexi-cube__visual {
    max-width: none;
    /* posunuto doprava (blíž k textu), bez levého přesahu */
    width: 100%;
    margin-left: 6vw;
    aspect-ratio: auto;
    height: clamp(520px, 82vh, 880px);
  }
  .flexi-cube__img { object-position: center center; }
}
.flexi-cube__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flexi-cube__img--off { filter: brightness(0.72) saturate(0.8); }
.flexi-cube__img--on {
  opacity: 0;
  /* backlit záře v barvách displeje (cyan/modrá → magenta dozvuk) – sílí s --glow (řízeno scrollem) */
  filter:
    drop-shadow(0 0 calc(60px + var(--glow, 0) * 90px) rgba(60, 180, 255, calc(0.35 + var(--glow, 0) * 0.5)))
    drop-shadow(0 0 calc(120px + var(--glow, 0) * 130px) rgba(170, 70, 225, calc(0.2 + var(--glow, 0) * 0.4)))
    brightness(calc(1 + var(--glow, 0) * 0.18));
}

.flexi-cube__copy { position: relative; z-index: 2; max-width: 560px; }
@media (min-width: 920px) { .flexi-cube__copy { max-width: none; } }
.flexi-cube__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 16px 0 30px;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   DOPLŇKY – sticky product showcase (žádné karty)
   ══════════════════════════════════════════════════════════════ */
.flexi-acc { padding: var(--flexi-section-y) 0; background: var(--bg-tint); overflow: clip; }
.flexi-acc__inner { }
.flexi-acc__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.flexi-acc__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-top: 16px;
}
.flexi-acc__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .flexi-acc__layout { grid-template-columns: 1.25fr 0.85fr; gap: clamp(32px, 4.5vw, 80px); align-items: start; }
}

/* sticky vizuál */
.flexi-acc__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
@media (min-width: 880px) {
  .flexi-acc__stage { position: sticky; top: calc(var(--flexi-nav-offset) + 2vh); height: 82vh; aspect-ratio: auto; }
  /* vysoké položky → dost scroll prostoru, aby se sticky obrázek stihl měnit */
  .flexi-acc__item {
    min-height: 64vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.flexi-acc__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 152, 215, 0.18), transparent 68%);
  filter: blur(40px);
}
.flexi-acc__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ukotvení vlevo dole → fotka vyplní spodní levý prostor */
  object-position: left bottom;
  transform-origin: left bottom;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--flexi-ease), transform 0.8s var(--flexi-ease);
  filter: drop-shadow(0 40px 60px rgba(18, 18, 36, 0.2));
}
.flexi-acc__shot.is-active { opacity: 1; transform: scale(1); }
/* LED světlo: zdrojová fotka má produkt odsazený doprava+dolů (okraje L30/R11/T16/B0 %),
   landscape navíc nejde posunout object-position vodorovně → kompenzace transformem doleva. */
.flexi-acc__shot[data-acc-shot="1"] { object-position: center center; transform-origin: center center; transform: translateX(-18%) scale(0.92); }
.flexi-acc__shot[data-acc-shot="1"].is-active { transform: translateX(-18%) scale(1); }

/* seznam */
.flexi-acc__list { list-style: none; margin: 0; padding: 0; }
.flexi-acc__item {
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0;
  border-top: 1px solid var(--line);
  opacity: 0.42;
  transition: opacity 0.4s var(--flexi-ease);
}
.flexi-acc__item:last-child { border-bottom: 1px solid var(--line); }
.flexi-acc__item.is-active { opacity: 1; }
.flexi-acc__eyebrow {
  font-family: var(--kicker);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.flexi-acc__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 12px 0 20px;
  background-image: linear-gradient(90deg, var(--fg), var(--fg));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: none;
}
.flexi-acc__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--flexi-ease), transform 0.4s var(--flexi-ease);
}
.flexi-acc__item.is-active .flexi-acc__cta { opacity: 1; transform: none; }
.flexi-acc__cta svg { transition: transform 0.4s var(--flexi-ease); }
.flexi-acc__cta:hover svg { transform: translateX(5px); }

/* obrázek v položce – jen mobil */
.flexi-acc__item-img { display: none; }
@media (max-width: 879px) {
  /* mobil: obrázek v každé položce, bez sticky stage */
  .flexi-acc__stage { display: none; }
  .flexi-acc__item { padding: 40px 0; opacity: 1; }
  .flexi-acc__item-img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    margin-bottom: 22px;
    filter: drop-shadow(0 24px 40px rgba(18, 18, 36, 0.16));
  }
  .flexi-acc__cta { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   PORADIT – „Nebojte se zeptat" používá globální .contact styly
   (prezenta.css) → identická grafika jako homepage kontakt sekce.
   Lokální pravidla nejsou potřeba; jen odskok pod fixní navigaci.
   ══════════════════════════════════════════════════════════════ */
#flexi-poradit { scroll-margin-top: var(--flexi-nav-offset); }

/* ══════════════════════════════════════════════════════════════
   SHOWCASE – pinned horizontální cinematic scrollytelling
   ══════════════════════════════════════════════════════════════ */
.flexi-show {
  position: relative;
  background: #04202a;
  color: #fff;
}
.flexi-show__pin {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
.flexi-show__track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  /* JEDNOTNÉ navazující pozadí přes celou dráhu (ne slide po slidu) –
     jedna plynulá tyrkysová cesta, kterou „projíždíš". Bohatší brand
     tyrkysová s hezkým přechodem (tmavší tóny stejného hue jako cube nadpis). */
  background: linear-gradient(102deg,
    #04222e 0%, #0a5366 16%, #0f7d96 32%, #16a3c0 48%, #119ab4 56%, #0c6e88 72%, #084a5e 86%, #04202a 100%);
}
.flexi-show__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  /* produkty smí přesahovat přes hrany → plynulý přechod mezi scénami */
  overflow: visible;
  display: flex;
  align-items: center;
  background: transparent;
}

.flexi-show__orb {
  position: absolute;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 210, 228, 0.42), transparent 64%);
  filter: blur(70px);
  top: 20%;
  pointer-events: none;
}
/* orby v různých výškách → světlo plyne, ne „jeden na slide" */
.flexi-show__panel[data-panel="0"] .flexi-show__orb { top: 6%;  width: 52vw; }
.flexi-show__panel[data-panel="1"] .flexi-show__orb { top: 44%; width: 64vw; background: radial-gradient(circle, rgba(40, 190, 220, 0.42), transparent 64%); }
.flexi-show__panel[data-panel="2"] .flexi-show__orb { top: 12%; width: 50vw; }
.is-side-left .flexi-show__orb { right: 2%; }
.is-side-right .flexi-show__orb { left: 2%; }

/* ── Vizuální scéna (vrstvené cutouty + parallax) ── */
.flexi-show__scene { position: absolute; inset: 0; z-index: 1; }
.flexi-show__img {
  position: absolute;
  object-fit: contain;
  will-change: transform;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.5));
}
.flexi-show__img--hero { height: 74vh; bottom: 11vh; }
.flexi-show__img--accent { height: 42vh; bottom: 16vh; opacity: 0.96; }
.flexi-show__img--extra { height: 30vh; bottom: 12vh; }
.flexi-show__img--extra2 { height: 24vh; bottom: 14vh; }

/* strana obrázků = opačná než text; hero přesahuje přes hranu panelu */
.is-side-left .flexi-show__img--hero { right: -11vw; }
.is-side-left .flexi-show__img--accent { right: 34vw; bottom: 38vh; }
.is-side-left .flexi-show__img--extra { right: 4vw; bottom: 15vh; }
.is-side-right .flexi-show__img--hero { left: -10vw; }
.is-side-right .flexi-show__img--accent { left: 30vw; bottom: 28vh; }
.is-side-right .flexi-show__img--extra { left: 6vw; bottom: 9vh; }

/* různé výšky a vertikální posun → kompozice, ne uniformní slidy */
.flexi-show__panel[data-panel="0"] .flexi-show__img--hero { height: 72vh; bottom: 9vh; }
.flexi-show__panel[data-panel="1"] .flexi-show__img--hero { height: 82vh; bottom: 5vh; margin-left: -140px; }

/* Scéna „Příslušenství" – 4 produktové cutouty (transparentní webp z media
   knihovny) v čisté 2×2 mřížce, která vyplní celý prostor VLEVO od textového
   sloupce (fotky první, text za nimi). Grid se napojuje na šířku copy
   (right: min(46%,600px)) → funguje na všech šířkách bez zásahu do textu.
   Průhledné pozadí zachováno, produkt drží pohromadě jen drop-shadow.
   Desktop only – mobil řeší fallback níž. */
@media (min-width: 920px) {
  .flexi-show__panel[data-panel="2"] .flexi-show__scene {
    right: min(46%, 600px); left: 0; top: 0; bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(16px, 1.8vw, 32px);
    align-items: center; justify-items: stretch;
    padding: 13vh clamp(20px, 2.5vw, 48px) 13vh clamp(28px, 4vw, 80px);
    box-sizing: border-box;
    margin-left: 140px;
  }
  .flexi-show__panel[data-panel="2"] .flexi-show__img {
    position: relative;
    width: 100%; height: 100%; max-height: 40vh;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
  }
  /* Rozházení mřížky POZIČNĚ (velikosti stejné). Výrazný vertikální stagger
     rozbije zarovnání řádků/sloupců → nevypadá to jako grid. top/left, ne
     transform → nekoliduje s JS scale. Levý sloup drží jen malý posun doleva
     kvůli odstupu od textu. */
  .flexi-show__panel[data-panel="2"] .flexi-show__img--hero   { top: 9vh;  left: -2vw;   }  /* vlevo nahoře → výrazně dolů */
  .flexi-show__panel[data-panel="2"] .flexi-show__img--accent { top: 1vh;  left: -3.5vw; }  /* vpravo nahoře → nahoře, doleva */
  .flexi-show__panel[data-panel="2"] .flexi-show__img--extra  { top: -3vh; left: 0;      }  /* vlevo dole → nahoru */
  .flexi-show__panel[data-panel="2"] .flexi-show__img--extra2 { top: 7vh;  left: -2.5vw; }  /* vpravo dole → níž */
}

/* prosvětlený panel ve scéně „sys" svítí */
.flexi-show__panel--sys .flexi-show__img--accent {
  filter: drop-shadow(0 0 60px rgba(62, 152, 215, 0.6));
}

/* ── Copy ── */
.flexi-show__copy {
  position: relative;
  z-index: 3;
  width: min(46%, 600px);
  padding: 0 clamp(32px, 6vw, 120px);
}
.is-side-left .flexi-show__copy { margin-right: auto; }
.is-side-right .flexi-show__copy { margin-left: auto; }
.flexi-show__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--kicker);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #79c6ee;
  margin-bottom: 26px;
}
.flexi-show__label-line {
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, #3e98d7, transparent);
}
.flexi-show__text {
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ── HUD: counter + progress ── */
.flexi-show__hud {
  position: absolute;
  top: clamp(84px, 12vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.flexi-show__counter { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.flexi-show__counter-sep { font-size: 15px; color: rgba(255, 255, 255, 0.5); }
.flexi-show__bar {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  margin-left: 6px;
}
.flexi-show__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0.1);
  transform-origin: left;
  background: linear-gradient(90deg, #3e98d7, #2f88c8);
}

.flexi-show__cue {
  position: absolute;
  bottom: 5vh;
  right: clamp(32px, 6vw, 90px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kicker);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.flexi-show__cue svg { color: rgba(62, 152, 215, 0.8); }

/* ── Laptop (MacBook Air apod.): text nesmí zasahovat do produktu ──
   Na užších šířkách se textový sloupec a bleed-out hero potkávaly. Řešení:
   užší copy sloupec + boční hero produkty (sys, outdoor) víc k vnější hraně
   a lehce menší → text má vlastní prostor, produkt zůstává prakticky celý. */
@media (min-width: 920px) and (max-width: 1600px) {
  .flexi-show__copy {
    width: min(38%, 440px);
    padding: 0 clamp(28px, 3vw, 52px);
  }
  /* Systém – hero vpravo: dál za pravou hranu + menší */
  .flexi-show__panel[data-panel="0"] .flexi-show__img--hero {
    height: 66vh;
    right: -7vw;
  }
  /* Outdoor – hero vlevo: dál za levou hranu + menší */
  .flexi-show__panel[data-panel="1"] .flexi-show__img--hero {
    height: 72vh;
    left: -8vw;
  }
}

/* ── Mobile / no-pin fallback: vertikální stack ── */
@media (max-width: 919px) {
  .flexi-show__pin { height: auto; min-height: 0; overflow: visible; }
  .flexi-show__track { flex-direction: column; width: 100%; }
  .flexi-show__panel { flex: none; width: 100%; min-height: 92vh; padding: 110px 0; }
  .flexi-show__copy { width: min(100% - 48px, 560px); margin: 0 auto; }
  .flexi-show__img--hero { height: 38vh; position: relative; bottom: auto; right: auto !important; left: auto !important; margin: 0 auto 24px; display: block; }
  .flexi-show__img--accent, .flexi-show__img--extra, .flexi-show__img--extra2 { display: none; }
  .flexi-show__scene { position: relative; height: auto; display: flex; justify-content: center; }
  .flexi-show__hud, .flexi-show__cue { display: none; }
  .flexi-show__panel { flex-direction: column; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   INTRO – obsahový závěr, sticky vizuál
   ══════════════════════════════════════════════════════════════ */
.flexi-intro { padding: var(--flexi-section-y) 0 clamp(120px, 16vh, 200px); }
.flexi-intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 920px) {
  .flexi-intro__inner { grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start; }
  .flexi-intro__visual { order: 2; }
}
.flexi-intro__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.flexi-intro__p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--fg-dim);
}
.flexi-intro__p:first-child {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.flexi-intro__visual { margin: 0; }
.flexi-intro__visual-sticky {
  position: relative;
  border-radius: var(--flexi-radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-tint), var(--bg-tint-2));
  padding: clamp(24px, 4vw, 48px);
}
@media (min-width: 920px) {
  .flexi-intro__visual-sticky { position: sticky; top: var(--flexi-nav-offset); }
}
.flexi-intro__glow {
  position: absolute;
  inset: 20% 10%;
  background: radial-gradient(ellipse, rgba(62, 152, 215, 0.18), transparent 65%);
  filter: blur(36px);
}
.flexi-intro__visual-sticky img { position: relative; width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════
   DARK THEME tweaky (nav adaptace už řeší prezenta.js)
   ══════════════════════════════════════════════════════════════ */
.flexi-cube .kicker--light { color: rgba(255, 255, 255, 0.72); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 919px) {
  .flexi-stolky__pin { min-height: 0; display: block; }
  .flexi-cube__pin { min-height: 0; }
}


/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION – statické, čitelné, bez scrubu
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-flexi-reveal] { opacity: 1; transform: none; }
  .flexi-cube__img--on { opacity: 1; }
  .flexi-cube__img--off { opacity: 0; }
  .flexi-stolky__pin, .flexi-cube__pin { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════
   CUBE PODSTRANA – obsahové sekce
   ══════════════════════════════════════════════════════════════ */
.cube-page { background: var(--bg); }
.cube-page .cube-why,
.cube-page .cube-detail,
.cube-page .cube-combine,
.cube-page .cube-form { color: var(--fg); }

/* sdílený container */
.cube-statement__inner,
.cube-why__inner,
.cube-gallery__inner,
.cube-detail__inner,
.cube-combine__inner,
.cube-form__inner,
.cube-cta__inner,
.cube-spotlight__inner {
  width: min(var(--flexi-max), 100% - (var(--flexi-gutter) * 2));
  margin-inline: auto;
}

/* ── Statement – full-screen glass blur moment ── */
.cube-statement {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 70% at 50% 30%, #0c4a66 0%, transparent 60%),
    linear-gradient(165deg, #062436 0%, #03141c 60%, #02080d 100%);
}
/* barevné orby ZA sklem – sklo je rozmaže (frosted) */
.cube-statement__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cube-statement__orb {
  position: absolute; border-radius: 50%; filter: blur(50px);
  transform: translate3d(0, var(--par-y, 0px), 0); will-change: transform;
}
.cube-statement__orb--1 { width: 52vw; height: 52vw; top: -8%; left: -6%; background: radial-gradient(circle, rgba(62,152,215,0.6), transparent 66%); }
.cube-statement__orb--2 { width: 44vw; height: 44vw; bottom: -10%; right: -4%; background: radial-gradient(circle, rgba(33,156,207,0.5), transparent 66%); }
.cube-statement__orb--3 { width: 36vw; height: 36vw; top: 36%; right: 28%; background: radial-gradient(circle, rgba(127,227,255,0.32), transparent 68%); }

.cube-statement__inner {
  --word-dim: rgba(173,209,232,0.22);
  position: relative; z-index: 2;
  width: min(1500px, 100% - (var(--flexi-gutter) * 2));
  margin-inline: auto;
  text-align: center;
}

/* ── Apple-style obří text PŘES CELOU OBRAZOVKU, glass je v písmu ── */
.cube-statement__lead {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 7.6vw, 124px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 auto clamp(28px, 4vw, 56px);
  max-width: 18ch;
}
/* frosted glass halo POD textem – dává sklu hloubku bez tvrdého boxu */
.cube-statement__lead::before {
  content: "";
  position: absolute; z-index: -1;
  inset: clamp(-30px, -4vw, -64px) clamp(-24px, -5vw, -88px);
  -webkit-backdrop-filter: blur(34px) saturate(1.4);
  backdrop-filter: blur(34px) saturate(1.4);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 78%);
  pointer-events: none;
}
/* scroll-driven word reveal – JS startuje slova ztlumeně (--word-dim)
   a postupně je rozsvítí. Skleněná typografie: frosted rim + glow. */
.cube-word {
  color: inherit; will-change: color;
  text-shadow: 0 1px 1px rgba(255,255,255,0.12), 0 22px 60px rgba(8,40,58,0.5);
}
.cube-word.is-accent { color: #7fe3ff; }

.cube-statement__sub {
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
  margin: 0 auto;
  max-width: 46ch;
}
@media (max-width: 760px) {
  .cube-statement { min-height: 100svh; }
  .cube-statement__lead { max-width: 14ch; }
}
@media (prefers-reduced-motion: reduce) {
  .cube-statement__lead::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Why (3 benefity) ── */
.cube-why { padding: clamp(80px, 11vw, 150px) 0; }
.cube-why__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.cube-why__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.035em;
  margin: 14px 0 0;
}
.cube-why__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 760px) { .cube-why__grid { grid-template-columns: repeat(3, 1fr); } }
.cube-why__card {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--flexi-radius);
  background: var(--bg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.cube-why__card:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 152, 215, 0.35);
  box-shadow: 0 30px 60px -28px rgba(62, 152, 215, 0.4);
}
.cube-why__num {
  display: block; font-family: var(--kicker); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; color: var(--brand); margin-bottom: 28px;
}
.cube-why__card-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.cube-why__card-text { font-size: 16px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 22px; }
.cube-why__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--brand);
}
.cube-why__link svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.cube-why__link:hover svg { transform: translateX(5px); }

/* ── Spotlight (full-bleed fotka) ── */
.cube-spotlight {
  position: relative; min-height: clamp(520px, 86vh, 880px);
  display: flex; align-items: center; overflow: hidden; color: #fff;
}
.cube-spotlight__media {
  position: absolute; inset: -10% 0;
  background-image: var(--cube-spot-img);
  background-size: cover; background-position: center;
  transform: translate3d(0, var(--par-y, 0px), 0);
  will-change: transform; z-index: 0;
}
.cube-spotlight__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,12,20,0.55) 0%, rgba(3,12,20,0.25) 40%, rgba(3,12,20,0.85) 100%),
    radial-gradient(60% 80% at 18% 50%, rgba(3,12,20,0.7), transparent 70%);
}
.cube-spotlight__inner { position: relative; z-index: 2; }
.cube-spotlight__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: -0.04em;
  margin: 16px 0 clamp(28px, 3vw, 40px);
}
.cube-spotlight__accent {
  background: linear-gradient(118deg, #7fe3ff, #219ccf);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em;
}

/* ── Gallery (asymetrická masonry) ── */
.cube-gallery { padding: clamp(80px, 11vw, 150px) 0; background: #03141c; color: #fff; }
.cube-gallery__head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.cube-gallery__head .kicker { justify-content: center; }
.cube-gallery__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.035em; margin: 14px 0 0;
}
.cube-gallery__grid {
  display: grid; gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: 1fr; grid-auto-rows: 240px;
}
@media (min-width: 760px) {
  .cube-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "a a b c"
      "a a d c"
      "e e d c";
  }
  .cube-gallery__tile--a { grid-area: a; }
  .cube-gallery__tile--b { grid-area: b; }
  .cube-gallery__tile--c { grid-area: c; }
  .cube-gallery__tile--d { grid-area: d; }
  .cube-gallery__tile--e { grid-area: e; }
}
.cube-gallery__tile {
  position: relative; margin: 0; overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 22px);
  background: #08222e;
}
.cube-gallery__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* parallax (--par-y z JS) + pevný base scale pro přesah; hover = brightness */
  transform: translate3d(0, var(--par-y, 0px), 0) scale(1.14);
  will-change: transform;
  transition: filter 0.6s var(--ease-out);
}
.cube-gallery__tile:hover .cube-gallery__img { filter: brightness(1.08); }

/* ── Detail (sticky fotka + bloky) ── */
.cube-detail { padding: clamp(80px, 11vw, 150px) 0; }
.cube-detail__inner { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) {
  .cube-detail__inner { grid-template-columns: 0.95fr 1.05fr; align-items: start; }
}
.cube-detail__media-sticky {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: var(--flexi-radius); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, #0a3a5c, #03141c);
  padding: clamp(28px, 4vw, 56px); min-height: 60vh;
}
@media (min-width: 900px) { .cube-detail__media-sticky { position: sticky; top: calc(var(--flexi-nav-offset) + 4vh); } }
.cube-detail__glow {
  position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(62,152,215,0.45), transparent 66%); filter: blur(30px);
}
.cube-detail__img { position: relative; z-index: 1; max-height: 64vh; width: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4)); }
.cube-detail__content { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.cube-detail__block { padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.cube-detail__block:last-of-type { border-bottom: none; padding-bottom: 0; }
.cube-detail__eyebrow {
  display: inline-block; font-family: var(--kicker); font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.cube-detail__block-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 14px;
}
.cube-detail__block-text { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--fg-dim); margin: 0; }
.cube-detail__actions { margin-top: 8px; }

/* ── Combine (3 karty) ── */
.cube-combine { padding: clamp(80px, 11vw, 150px) 0; background: var(--bg-tint); }
.cube-combine__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); }
.cube-combine__head .kicker { justify-content: center; }
.cube-combine__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.035em; margin: 14px 0 0;
}
.cube-combine__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2vw, 32px); }
@media (min-width: 820px) { .cube-combine__grid { grid-template-columns: repeat(3, 1fr); } }
.cube-combine__card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--flexi-radius); background: var(--bg);
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.cube-combine__card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(18,18,36,0.28); }
.cube-combine__media {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #0a3a5c, #051f30);
  display: flex; align-items: center; justify-content: center;
}
.cube-combine__img {
  width: 84%; height: 84%; object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
  transform: translate3d(0, var(--par-y, 0px), 0) scale(1.02);
  transition: filter 0.7s var(--ease-out);
}
.cube-combine__card:hover .cube-combine__img { filter: drop-shadow(0 26px 48px rgba(0,0,0,0.5)) brightness(1.04); }
.cube-combine__body { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; flex: 1; }
.cube-combine__card-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -0.02em; margin: 0 0 12px;
}
.cube-combine__card-text { font-size: 15.5px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 22px; flex: 1; }
.cube-combine__btn { align-self: flex-start; color: var(--fg); border-color: var(--line); background: transparent; }
.cube-combine__btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Form (poptávka) ── */
.cube-form { padding: clamp(80px, 11vw, 150px) 0; }
.cube-form__inner { max-width: 880px; }
.cube-form__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.cube-form__head .kicker { justify-content: center; }
.cube-form__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 54px); letter-spacing: -0.035em; margin: 14px 0 14px;
}
.cube-form__lede { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--fg-dim); max-width: 52ch; margin: 0 auto; }
.cube-form__form {
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line); border-radius: var(--flexi-radius);
  background: var(--bg-tint);
  display: grid; gap: clamp(16px, 1.8vw, 22px);
}
.cube-form__row { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 1.8vw, 22px); }
@media (min-width: 640px) { .cube-form__row { grid-template-columns: 1fr 1fr; } }
.cube-form__field { display: flex; flex-direction: column; gap: 8px; }
.cube-form__label { font-size: 13px; font-weight: 600; color: var(--fg); }
.cube-form__opt { color: var(--fg-soft); font-weight: 400; }
.cube-form__input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cube-form__input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(62, 152, 215, 0.16);
}
.cube-form__textarea { resize: vertical; min-height: 120px; }
.cube-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.cube-form__note { font-size: 14px; color: var(--fg-dim); margin: 0; }
.cube-form__note.is-ok { color: #16a34a; }
.cube-form__note.is-err { color: #e8445a; }
.cube-form__input.is-invalid { border-color: #e8445a; box-shadow: 0 0 0 3px rgba(232,68,90,0.14); }

/* ── CTA (Nebojte se zeptat) ── */
.cube-cta { padding: clamp(80px, 11vw, 150px) 0; background: radial-gradient(110% 90% at 80% 10%, #0a3a5c, #03141c 60%, #020a10); color: #fff; }
.cube-cta__inner { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 880px) { .cube-cta__inner { grid-template-columns: 0.85fr 1.15fr; } }
.cube-cta__media { margin: 0; border-radius: var(--flexi-radius); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); }
.cube-cta__img {
  width: 100%; height: 116%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transform: translate3d(0, var(--par-y, 0px), 0);
  will-change: transform;
}
.cube-cta__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.04em; margin: 16px 0 18px;
}
.cube-cta__text { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 46ch; margin: 0 0 clamp(24px, 3vw, 36px); }
.cube-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 880px) {
  .cube-cta__media { order: -1; }
  .cube-detail__media { order: -1; }
}


/* ══════════════════════════════════════════════════════════════
   CUBE PODSTRANA – MEGA fullscreen hero s light-up (à la Apple)
   ══════════════════════════════════════════════════════════════ */
.cube-hero {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  color: #fff;
  background: #02080d;
}

/* pinned scéna – produkt se odzoomuje z obřího detailu do malého (JS) */
.cube-hero__stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transform-origin: center 50%; will-change: transform, filter;
}
.cube-hero__img {
  position: absolute;
  width: auto; height: clamp(340px, 70vh, 820px);
  object-fit: contain;
}
.cube-hero__img--on {
  z-index: 1; opacity: 0;
  filter: saturate(1.06) brightness(1.05);
}
.cube-hero__aura {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--aura-s, 0.8));
  width: min(1100px, 96vw); aspect-ratio: 1.25 / 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,190,255,0.6) 0%, rgba(62,152,215,0.4) 30%, rgba(33,156,207,0.18) 52%, transparent 70%);
  filter: blur(46px); mix-blend-mode: screen; opacity: 0.1; pointer-events: none;
}

/* veil – kontrast pro text (nahoře + dole) */
.cube-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,8,13,0.6) 0%, transparent 24%, transparent 52%, rgba(2,8,13,0.82) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(2,8,13,0.4) 100%);
}

.cube-hero__content { position: absolute; inset: 0; z-index: 2; opacity: 0; will-change: opacity, transform; }

/* intro vpravo dole */
.cube-hero__intro {
  position: absolute; right: var(--flexi-gutter); bottom: clamp(170px, 23vh, 270px);
  z-index: 4; max-width: min(34ch, 42vw); text-align: right;
}
.cube-hero__kicker { margin-bottom: 18px; }
.cube-hero__sub {
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; font-weight: 400;
  color: rgba(255,255,255,0.9); margin: 0 0 clamp(22px, 2.6vw, 30px); margin-left: auto; max-width: 34ch;
  text-shadow: 0 2px 20px rgba(2,8,13,0.8);
}
.cube-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

/* OBŘÍ nadpis dole přes celou šíři */
.cube-hero__title {
  position: absolute; left: 0; right: 0; bottom: clamp(33px, calc(2.5vh + 25px), 61px);
  z-index: 5; margin: 0; padding-inline: var(--flexi-gutter);
  text-align: center; pointer-events: none;
}
.cube-hero__title-text {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 7.1vw, 168px); line-height: 0.92; letter-spacing: -0.04em; word-spacing: 0.06em;
  white-space: nowrap; color: #eaf2f8; text-shadow: 0 4px 40px rgba(2,8,13,0.5);
}
.cube-hero__title-accent {
  background: linear-gradient(118deg, #7fe3ff 0%, #3bc6ef 45%, #219ccf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* scroll cue */
.cube-hero__cue {
  position: absolute; left: var(--flexi-gutter); bottom: clamp(28px, 4vh, 48px); z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: var(--kicker); font-weight: 300; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.cube-hero__cue-line {
  width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,0.65), transparent);
  transform-origin: top center; animation: cube-cue 2.4s var(--ease-in-out) infinite;
}

@keyframes cube-cue { 0% { transform: scaleY(0.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* bez JS / reduced-motion → rovnou odhalený stav (produkt malý, rozsvícený, text vidět) */
@media (prefers-reduced-motion: reduce) {
  .cube-hero__content { opacity: 1; }
  .cube-hero__img--on { opacity: 1; }
  .cube-hero__aura { opacity: 0.85; transform: translate(-50%, -50%) scale(1.2); }
  .cube-hero__cue { display: none; }
}

@media (max-width: 920px) {
  .cube-hero__intro { right: auto; left: var(--flexi-gutter); bottom: auto; top: clamp(96px, 14vh, 140px); text-align: left; max-width: none; }
  .cube-hero__sub { margin-left: 0; }
  .cube-hero__actions { justify-content: flex-start; }
  .cube-hero__title-text { white-space: normal; font-size: clamp(40px, 13vw, 90px); line-height: 0.96; }
  .cube-hero__cue { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   CUBE PODSTRANA – premium polish (mask reveal nadpisů + grain)
   ══════════════════════════════════════════════════════════════ */
/* mask reveal nadpisů – třídu .cube-line přidává JS */
.cube-line { overflow: hidden; }
.cube-line__inner { display: inline-block; padding-bottom: 0.1em; will-change: transform; }

/* jemná filmová grain textura přes celou stránku (prémiový tactile feel) */
.cube-page::after {
  content: "";
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: reduce) {
  .cube-page::after { display: none; }
  .cube-line__inner { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   CUBE — PREMIUM REDESIGN LAYER
   Jeden koherentní design systém (tokeny • kickery • karty • form).
   Senior polish: chladná neutrální paleta, jemné stíny, konzistence.
   ══════════════════════════════════════════════════════════════ */
.cube-page {
  /* chladná neutrální light paleta (pryč s lavender nádechem) */
  --bg-tint: #f3f7f9;
  --bg-tint-2: #e8f0f4;
  --line: rgba(14, 60, 84, 0.10);
  --line-strong: rgba(14, 60, 84, 0.16);
  --fg-dim: #5a6b75;

  /* jednotný radius systém */
  --flexi-radius: 20px;
  --cube-radius-lg: 24px;
  --cube-radius: 18px;
  --cube-radius-sm: 14px;

  /* jednotný stínový systém */
  --cube-shadow-sm: 0 1px 2px rgba(14,40,60,0.04), 0 10px 24px -14px rgba(14,40,60,0.18);
  --cube-shadow-md: 0 2px 6px rgba(14,40,60,0.05), 0 24px 48px -24px rgba(14,40,60,0.22);
  --cube-shadow-brand: 0 24px 56px -26px rgba(33,156,207,0.42);
}

/* ── Kicker / eyebrow — rafinovaný tracked label s vodicí linkou ── */
.cube-page .kicker {
  font-family: var(--kicker);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  gap: 12px;
}
.cube-page .kicker::before {
  content: "";
  width: 26px; height: 1px; flex: none;
  background: currentColor; opacity: 0.55;
}
.cube-page .cube-detail__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  letter-spacing: 0.22em;
}
.cube-page .cube-detail__eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55;
}

/* ── Section heads — konzistentní rytmus a měkčí mezery ── */
.cube-page .kicker[data-flexi-reveal] { margin-bottom: 18px; }

/* ── WHY — prémiové feature karty ── */
.cube-page .cube-why { background: var(--bg); }
.cube-page .cube-why__card {
  padding: clamp(30px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--cube-radius);
  background: var(--bg);
  box-shadow: var(--cube-shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.cube-page .cube-why__card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--cube-shadow-md);
}
.cube-page .cube-why__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--brand-tint); color: var(--brand);
  font-family: var(--display); font-weight: 800; font-size: 16px;
  letter-spacing: 0; margin-bottom: 26px;
  font-variant-numeric: tabular-nums;
}
.cube-page .cube-why__card-title { font-size: clamp(20px, 1.6vw, 23px); margin-bottom: 14px; }
.cube-page .cube-why__card-text { color: var(--fg-dim); }

/* ── DETAIL — editorial bloky + sticky media ── */
.cube-page .cube-detail__media-sticky {
  border-radius: var(--cube-radius-lg);
  box-shadow: var(--cube-shadow-md);
  background: radial-gradient(120% 90% at 50% 12%, #0e466b, #041824);
}
.cube-page .cube-detail__block { border-bottom: 1px solid var(--line); }

/* ── COMBINE — produktové karty ── */
.cube-page .cube-combine__card {
  border: 1px solid var(--line);
  border-radius: var(--cube-radius);
  box-shadow: var(--cube-shadow-sm);
}
.cube-page .cube-combine__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cube-shadow-md);
  border-color: var(--line-strong);
}
.cube-page .cube-combine__media {
  background: radial-gradient(120% 100% at 50% 0%, #0e466b, #041d2e);
}
.cube-page .cube-combine__card-text { color: var(--fg-dim); }

/* ── GALLERY — vyladěná masonry: ring, vignette, plynulý hover ── */
.cube-page .cube-gallery__tile {
  border-radius: var(--cube-radius);
  box-shadow: 0 30px 64px -40px rgba(0,0,0,0.8);
  background: #07202c;
}
.cube-page .cube-gallery__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  background: linear-gradient(180deg, transparent 52%, rgba(2,12,18,0.5) 100%);
  opacity: 0.9; transition: opacity 0.6s var(--ease-out);
}
.cube-page .cube-gallery__tile:hover::after { opacity: 0.55; }
.cube-page .cube-gallery__img {
  transition: transform 1s var(--ease-out), filter 0.6s var(--ease-out);
}
.cube-page .cube-gallery__tile:hover .cube-gallery__img {
  transform: translate3d(0, var(--par-y, 0px), 0) scale(1.2);
  filter: brightness(1.06);
}

/* ── FORM — prémiový poptávkový panel ── */
.cube-page .cube-form { background: var(--bg); }
.cube-page .cube-form__form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--cube-radius-lg);
  box-shadow: var(--cube-shadow-md);
  padding: clamp(28px, 3.6vw, 52px);
  gap: clamp(18px, 2vw, 24px);
}
.cube-page .cube-form__label { font-size: 13px; letter-spacing: 0.01em; color: var(--fg); }
.cube-page .cube-form__input {
  padding: 15px 18px;
  border-radius: var(--cube-radius-sm);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  font-size: 15.5px;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.cube-page .cube-form__input::placeholder { color: var(--fg-soft); }
.cube-page .cube-form__input:focus {
  background: var(--bg);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(33, 156, 207, 0.14);
}
.cube-page .cube-form__foot { margin-top: 6px; gap: 18px 26px; }

/* ── SPOTLIGHT / CTA — drobné dotažení ── */
.cube-page .cube-spotlight__scrim {
  background:
    linear-gradient(180deg, rgba(3,12,20,0.5) 0%, rgba(3,12,20,0.15) 38%, rgba(3,12,20,0.9) 100%),
    radial-gradient(70% 90% at 16% 50%, rgba(3,12,20,0.72), transparent 72%);
}
.cube-page .cube-cta__media { border-radius: var(--cube-radius-lg); }

/* ══════════════════════════════════════════════════════════════
   CUBE — CINEMATIC DARK EDITORIAL  (kompletní art-direction rebuild)
   Jeden hluboký kinematografický tmavý canvas napříč celou stranou.
   Redefinuje sémantické tokeny → všechny sekce se sjednotí jedním tahem.
   Reference: Linear • Vercel • Arc • Apple product pages.
   ══════════════════════════════════════════════════════════════ */
.cube-page {
  /* — Cinematic dark paleta — */
  --c-bg:        #07090d;   /* base near-black (cool) */
  --c-bg-2:      #0b0f16;   /* raised surface */
  --c-bg-3:      #10151d;   /* karta */
  --c-ink:       #eef3f7;   /* primární text */
  --c-ink-dim:   #9aa7b3;   /* sekundární */
  --c-ink-mute:  #61707c;   /* terciární / popisky */
  --c-line:      rgba(255,255,255,0.08);
  --c-line-2:    rgba(255,255,255,0.14);
  --c-accent:    #45c6ee;   /* tyrkysová (jasnější pro dark) */
  --c-accent-2:  #7fe3ff;
  --c-accent-deep: #1b8cbf;
  --c-accent-tint: rgba(69,198,238,0.12);

  /* — Přemapování sémantických tokenů → vše ztmavne jedním tahem — */
  --bg:        var(--c-bg);
  --bg-tint:   var(--c-bg-2);
  --bg-tint-2: var(--c-bg-3);
  --fg:        var(--c-ink);
  --fg-dim:    var(--c-ink-dim);
  --fg-soft:   var(--c-ink-mute);
  --line:      var(--c-line);
  --line-strong: var(--c-line-2);
  --brand:     var(--c-accent);
  --brand-tint: var(--c-accent-tint);

  /* — Editoriální dýchací prostor + stíny v dark — */
  --flexi-section-y: clamp(120px, 15vh, 230px);
  --cube-shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.8);
  --cube-shadow-md: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 80px -40px rgba(0,0,0,0.9);

  background: var(--c-bg);
  color: var(--c-ink);
}

/* jednotná tmavá plocha pod celou stranou (i přesahy/elastický scroll) */
.cube-page { background-color: var(--c-bg); }
body:has(.cube-page) { background-color: var(--c-bg); }

/* sjednocené vertikální odsazení sekcí (editoriální rytmus) */
.cube-page .cube-why,
.cube-page .cube-detail,
.cube-page .cube-combine,
.cube-page .cube-form,
.cube-page .cube-gallery { padding: var(--flexi-section-y) 0; }

/* — Kicker / eyebrow v dark — */
.cube-page .kicker { color: var(--c-ink-mute); }
.cube-page .kicker--brand { color: var(--c-accent); }
.cube-page .cube-detail__eyebrow { color: var(--c-accent); }

/* — Nadpisy: jemný optický lift na tmavém pozadí — */
.cube-page .cube-why__title,
.cube-page .cube-combine__title,
.cube-page .cube-gallery__title,
.cube-page .cube-form__title { color: var(--c-ink); }

/* ── WHY — glass karty na tmavém plátně ── */
.cube-page .cube-why { background: var(--c-bg); }
.cube-page .cube-why__card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)) ,
    var(--c-bg-3);
  border: 1px solid var(--c-line);
  box-shadow: var(--cube-shadow-sm);
}
.cube-page .cube-why__card:hover {
  border-color: rgba(69,198,238,0.35);
  box-shadow: var(--cube-shadow-md), 0 30px 70px -34px rgba(69,198,238,0.3);
}
.cube-page .cube-why__num {
  background: var(--c-accent-tint);
  color: var(--c-accent);
  box-shadow: inset 0 0 0 1px rgba(69,198,238,0.22);
}
.cube-page .cube-why__card-title { color: var(--c-ink); }
.cube-page .cube-why__card-text { color: var(--c-ink-dim); }
.cube-page .cube-why__link { color: var(--c-accent); }

/* ── DETAIL — editorial bloky v dark ── */
.cube-page .cube-detail { --word-dim: rgba(255,255,255,0.14); }
.cube-page .cube-detail__block { border-bottom-color: var(--c-line); }
.cube-page .cube-detail__block-title { color: var(--c-ink); }
.cube-page .cube-detail__media-sticky {
  border: 1px solid var(--c-line);
  background: radial-gradient(120% 90% at 50% 12%, #103a56, #06121b);
}

/* ── COMBINE — produktové karty v dark ── */
.cube-page .cube-combine { background: var(--c-bg-2); }
.cube-page .cube-combine__card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    var(--c-bg-3);
  border: 1px solid var(--c-line);
  box-shadow: var(--cube-shadow-sm);
}
.cube-page .cube-combine__card:hover {
  border-color: var(--c-line-2);
  box-shadow: var(--cube-shadow-md);
}
.cube-page .cube-combine__card-title { color: var(--c-ink); }
.cube-page .cube-combine__card-text { color: var(--c-ink-dim); }
.cube-page .cube-combine__btn { color: var(--c-ink); border-color: var(--c-line-2); }
.cube-page .cube-combine__btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #04222e; }

/* ── GALLERY — sjednocení s novou paletou ── */
.cube-page .cube-gallery { background: var(--c-bg); }

/* ── FORM — tmavý glass panel ── */
.cube-page .cube-form { background: var(--c-bg-2); }
.cube-page .cube-form__lede { color: var(--c-ink-dim); }
.cube-page .cube-form__form {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    var(--c-bg-3);
  border: 1px solid var(--c-line);
  box-shadow: var(--cube-shadow-md);
}
.cube-page .cube-form__label { color: var(--c-ink); }
.cube-page .cube-form__opt { color: var(--c-ink-mute); }
.cube-page .cube-form__input {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}
.cube-page .cube-form__input::placeholder { color: var(--c-ink-mute); }
.cube-page .cube-form__input:focus {
  background: rgba(255,255,255,0.05);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(69,198,238,0.16);
}

/* ── CLIENTS — trust band v dark, loga invertovaná do bílé ── */
.cube-page .clients { background: var(--c-bg); color: var(--c-ink); }
.cube-page .clients__kicker { color: var(--c-accent); }
.cube-page .clients__kicker::before { display: none; } /* ponecháme em-dash z PHP */
.cube-page .clients__title { color: var(--c-ink); }
.cube-page .marquee__logo--img img {
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease-out);
}
.cube-page .marquee__logo--img:hover img { opacity: 0.9; }
.cube-page .marquee::before,
.cube-page .marquee::after {
  background: linear-gradient(90deg, var(--c-bg), transparent);
}

/* ── Hero intro — čistší hierarchie ── */
.cube-page .cube-hero__sub { color: rgba(255,255,255,0.82); }

/* ── Grain jemně silnější pro filmový tactile feel ── */
.cube-page::after { opacity: 0.05; }

/* ══════════════════════════════════════════════════════════════════════════
   CUBE — „SWISS EDITORIAL PRECISION"  ▸  ZCELA NOVÁ STRÁNKA OD NULY
   Světlá, gridem řízená, typograficky vedená. Asymetrické label/obsah sloupce,
   číslovaný systém sekcí, hairline linky, produkty v tmavých „stage" rámech.
   Prefix .cx-* — nesdílí nic se starým .cube-* layoutem.
   Reference: Stripe • Linear • Vercel • Notion • Apple.
   ══════════════════════════════════════════════════════════════════════════ */
.cx {
  /* — Sjednoceno s HOMEPAGE (prezenta.css :root) — */
  --cx-bg:        #ffffff;
  --cx-bg-2:      #f8f9ff;       /* homepage tint */
  --cx-ink:       #121214;
  --cx-ink-2:     #6d6c89;
  --cx-ink-3:     #9897b0;
  --cx-line:      rgba(18,18,36,0.08);
  --cx-line-2:    rgba(18,18,36,0.16);
  --cx-accent:    #009fe3;       /* brand tyrkysová (jediná správná) */
  --cx-accent-2:  #4fc4ee;
  --cx-accent-ink:#0b88c5;
  --cx-stage:     #05111c;       /* tmavý produkt stage = homepage hero blue-black */
  --cx-stage-2:   #0a2233;

  --cx-gutter:    clamp(20px, 5vw, 32px);
  --cx-maxw:      1280px;
  --cx-gap:       clamp(28px, 4.5vw, 80px);
  --cx-sec-y:     clamp(70px, 9vw, 130px);
  --cx-radius:    22px;
  --cx-radius-lg: 32px;          /* homepage karty = 32px */

  background: var(--cx-bg);
  color: var(--cx-ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.cx [data-flexi-reveal] { --move: 26px; }

/* container + primitives */
.cx-wrap { width: min(var(--cx-maxw), 100% - var(--cx-gutter) * 2); margin-inline: auto; }
.cx-rule { height: 1px; background: var(--cx-line); border: 0; margin: 0; }

/* kicker — sjednoceno s homepage .hero__kicker (uppercase, tracked, light) */
.cx-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--kicker, var(--body)); font-weight: 300;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cx-ink-3);
}
.cx-label--accent { color: var(--cx-accent); }
.cx-index {
  font-family: var(--kicker, var(--body)); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; color: var(--cx-accent);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.cx-h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em;
  margin: 0; color: var(--cx-ink);
  text-wrap: balance;
}
.cx-accent { color: var(--cx-accent); }

/* tlačítka — pilulky identické s homepage .btn */
.cx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.4s var(--easing), background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.cx-btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
.cx-btn:hover svg { transform: translateX(4px); }
.cx-btn--primary { background: var(--brand-gradient, var(--cx-accent)); color: #fff; box-shadow: 0 10px 28px -10px rgba(33,156,207,0.5); }
.cx-btn--primary:hover { transform: translateY(-2px); background: #1b8bbf; box-shadow: 0 18px 38px -10px rgba(33,156,207,0.6); }
.cx-btn--ghost,
.cx-btn--ondark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.cx-btn--ghost:hover,
.cx-btn--ondark:hover { background: rgba(255,255,255,0.16); }
.cx-btn--light { background: #fff; color: var(--brand-deep); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25); }
.cx-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(0,0,0,0.3); }
.cx-btn--outline { background: #fff; color: var(--cx-ink); border-color: var(--cx-line-2); }
.cx-btn--outline:hover { border-color: var(--cx-ink); transform: translateY(-2px); }
.cx-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--cx-accent);
}
.cx-textlink svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-out); }
.cx-textlink:hover svg { transform: translateX(4px); }

/* ── HERO — homepage-style aurora, centrovaný, gradientový titulek ── */
.cx-hero {
  position: relative; overflow: hidden; color: #fff;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(120px, 16vh, 168px) 0 clamp(64px, 8vw, 110px);
  background: linear-gradient(180deg, #0a2233 0%, #05111c 56%, #03080f 100%);
}
.cx-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cx-hero__bg-inner { position: absolute; inset: -20%; filter: blur(48px); }
.cx-hero__blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.cx-hero__blob--1 { width: 62%; height: 62%; top: 4%; left: 4%; background: radial-gradient(circle at 42% 42%, #4cb0f0 0%, #2470a8 34%, transparent 70%); opacity: 0.85; animation: gradBlob1 12s ease-in-out infinite alternate; }
.cx-hero__blob--2 { width: 56%; height: 56%; top: -6%; right: -6%; background: radial-gradient(circle at 60% 40%, #2fc0ec 0%, #1c6fa0 36%, transparent 70%); opacity: 0.8; animation: gradBlob2 15s ease-in-out infinite alternate; }
.cx-hero__blob--3 { width: 50%; height: 50%; bottom: -10%; left: 32%; background: radial-gradient(circle, #7fc8ff 0%, transparent 66%); opacity: 0.45; animation: gradBlob3 18s ease-in-out infinite alternate; }
.cx-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cx-hero__kicker {
  font-family: var(--kicker, var(--body)); font-weight: 300;
  font-size: clamp(10px, 0.82vw, 12px); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.88); margin-bottom: 28px;
}
.cx-hero__title { margin: 0 0 clamp(26px, 3vw, 36px); display: flex; flex-direction: column; }
.cx-hero__line {
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -0.035em;
  padding: 0.04em 0.04em; color: #fff;
}
.cx-hero__line--grad {
  background: linear-gradient(135deg, #ffffff 0%, #cfeaff 42%, #7fd8f0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cx-hero__lead {
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: rgba(255,255,255,0.78);
  max-width: 46ch; margin: 0 0 clamp(30px, 3.4vw, 40px);
}
.cx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cx-hero__cue {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: clamp(36px, 5vw, 52px); color: rgba(255,255,255,0.72);
  font-family: var(--kicker, var(--body)); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
}
.cx-hero__cue-line { width: 11px; height: 11px; border-right: 2px solid rgba(255,255,255,0.9); border-bottom: 2px solid rgba(255,255,255,0.9); transform: rotate(45deg); animation: cubeCue 1.5s ease-in-out infinite; }
@keyframes cubeCue { 0% { transform: rotate(45deg) translateY(-4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: rotate(45deg) translateY(6px); opacity: 0; } }
/* ── 3D FILMSTRIP — depth-of-field carousel (drift + blur dle vzdálenosti) ── */
.cx-hero--film .cx-hero__inner { pointer-events: none; }
.cx-hero--film .cx-hero__inner a,
.cx-hero--film .cx-hero__inner .cx-btn { pointer-events: auto; }
.cx-hero--film .cx-hero__lead { text-shadow: 0 2px 34px rgba(2,9,16,0.7); }

/* Bílý nadpis bez efektu (oba řádky). */
.cx-hero--film .cx-hero__line { color: #fff; }
.cx-hero--film .cx-hero__line--grad {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}

/* Editorial overlay: kicker nahoře, velký titulek vlevo, patka dole.
   Inner vyplní celou výšku hero (justify-content: stretch na sekci), aby
   patka (lead + CTA) byla vždy v záběru hned po načtení, ne pod ohybem. */
.cx-hero--film {
  justify-content: stretch;
  /* Vyšší hero + víc prostoru nahoře, ať nadpis odsedne od submenu. */
  min-height: 112svh;
  padding-top: clamp(180px, 24vh, 300px);
  /* Tmavě tyrkysovo-navy pozadí + brand zář vpravo dole a vlevo nahoře. */
  background:
    radial-gradient(58% 58% at 88% 96%, rgba(0,159,227,0.36) 0%, rgba(0,102,153,0.16) 36%, rgba(0,102,153,0) 64%),
    radial-gradient(46% 46% at 10% 6%, rgba(56,184,239,0.22) 0%, rgba(56,184,239,0) 60%),
    linear-gradient(160deg, #052433 0%, #04161f 50%, #020a10 100%);
}
.cx-hero--film .cx-hero__blob--1 { background: radial-gradient(circle at 42% 42%, #1aa7e8 0%, #0a5a86 34%, transparent 70%); }
.cx-hero--film .cx-hero__blob--2 { background: radial-gradient(circle at 60% 40%, #38d0ef 0%, #14739c 36%, transparent 70%); }
.cx-hero--film .cx-hero__blob--3 { background: radial-gradient(circle, #7fe6ff 0%, transparent 66%); }

/* Moderní záře: měkké radiální brand glow body, jen pomalu pulzují (žádné hrany/pruhy). */
.cx-hero--film::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 30% 38%, rgba(56,184,239,0.14) 0%, transparent 70%),
    radial-gradient(42% 46% at 72% 66%, rgba(0,159,227,0.16) 0%, transparent 72%);
  mix-blend-mode: screen; opacity: 0.9;
  animation: cxAuraPulse 14s ease-in-out infinite alternate; will-change: opacity, transform;
}
@keyframes cxAuraPulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-hero--film::before { animation: none; }
}

/* Zkosená spodní hrana hero — světlý klín v barvě navazující sekce.
   Vpravo vodorovná hrana, vlevo diagonální „výkus" (zlom cca v 32 % šířky). */
.cx-hero--film { --cx-slant: clamp(60px, 9vw, 150px); }
.cx-hero--film::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--cx-slant); z-index: 2; pointer-events: none;
  background: var(--cx-bg, #fff);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
}

.cx-hero--film .cx-hero__inner {
  position: relative; z-index: 3;
  width: 100%; flex: 1 1 auto; min-height: 440px;
  padding-inline: clamp(20px, 6vw, 70px); /* ~70px od krajů (titulek i patka) */
  display: grid; grid-template-rows: 1fr auto; align-items: stretch;
  text-align: left; gap: clamp(18px, 3vh, 36px);
}
.cx-hero--film .cx-hero__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cx-hero--film .cx-hero__kicker { margin: 0; }
.cx-hero--film .cx-hero__collection {
  font-family: var(--kicker, var(--body)); font-weight: 300;
  font-size: clamp(10px, 0.82vw, 12px); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.cx-hero--film .cx-hero__title {
  align-self: start; margin: 0; justify-self: start;
}
.cx-hero--film .cx-hero__line {
  font-size: clamp(54px, 11vw, 184px); line-height: 0.9;
  /* stejný řez jako hero na homepage (.hero__title-line): Inter Tight 700 */
  font-family: "Inter Tight", var(--display); font-weight: 700; letter-spacing: -0.04em;
}
.cx-hero--film .cx-hero__foot {
  align-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(16px, 2vw, 24px);
  /* nad zkosený klín (vpravo je plná výška --cx-slant) + odstup */
  padding-bottom: clamp(80px, 11vw, 180px);
}
.cx-hero--film .cx-hero__lead { margin: 0; max-width: 42ch; text-align: right; }
.cx-hero--film .cx-hero__actions { flex: 0 0 auto; justify-content: flex-end; }

.cx-filmstrip {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
.cx-filmstrip__viewport {
  position: absolute; inset: 0; pointer-events: auto; cursor: grab;
  perspective: 1500px; perspective-origin: 50% 50%;
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
.cx-filmstrip__viewport.is-drag { cursor: grabbing; }
/* JS pozicuje každý rám absolutně ze středu (left/top 50 %) přes transform.
   Velikost je fixní, hloubku dělá scale; --cx-film-w řídí responsivitu. */
.cx-filmstrip__viewport { --cx-film-w: clamp(240px, 24vw, 360px); }
.cx-filmstrip__frame {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: var(--cx-film-w); aspect-ratio: 1 / 1;
  border-radius: 22px; overflow: hidden; background: #0a1622;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  will-change: transform, filter, opacity;
  transform: translate(-50%,-50%); backface-visibility: hidden;
  pointer-events: none; opacity: 0;
}
.cx-filmstrip__frame.is-live { opacity: 1; }
.cx-filmstrip__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,24,38,0) 56%, rgba(3,10,18,0.42) 100%),
    radial-gradient(120% 90% at 50% 38%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 46%);
}
.cx-filmstrip__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none;
}
.cx-filmstrip__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 90% at 50% 50%, rgba(4,8,16,0) 0%, rgba(4,8,16,0.35) 64%, rgba(4,8,16,0.6) 100%);
}

/* ══════════════════════════════════════════════════════════════
   HERO v2 — 3D fotogalerie (létající spirálový corridor fotek)
   Markup: template-parts/cube/cx-hero-gallery.php · JS: buildCubeGallery3d
   ══════════════════════════════════════════════════════════════ */
.cx-hero--gallery {
  justify-content: center;
  min-height: 100svh;
  padding: clamp(120px, 16vh, 180px) 0 clamp(70px, 9vw, 120px);
  background: radial-gradient(120% 86% at 50% 34%, #06222f 0%, #04141d 52%, #020a0f 100%);
}
.cx-gallery3d {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  pointer-events: none; /* galerii řídí scroll (pinned scrub), netřeba interakce */
}
.cx-gallery3d__stage { position: absolute; inset: 0; }
.cx-gallery3d__item {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: clamp(200px, 32vw, 560px); aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden; background: #0a1622;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translate(-50%,-50%); opacity: 0;
  will-change: transform, opacity, filter; backface-visibility: hidden;
}
.cx-gallery3d__item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.cx-gallery3d__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 36%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(4,16,26,0) 58%, rgba(2,9,15,0.42) 100%);
}
/* Tmavý střed → čitelnost nadpisu/CTA přes fotky. */
.cx-hero--gallery .cx-gallery3d__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(48% 44% at 50% 50%, rgba(2,9,15,0.66) 0%, rgba(2,9,15,0.28) 52%, rgba(2,9,15,0) 78%);
}
.cx-hero--gallery .cx-hero__inner {
  position: relative; z-index: 3;
  align-items: center; text-align: center;
  pointer-events: none;
}
.cx-hero--gallery .cx-hero__inner a,
.cx-hero--gallery .cx-hero__inner .cx-btn { pointer-events: auto; }
.cx-hero--gallery .cx-hero__title { margin: 0 0 clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; }
/* Velký display nadpis (~3× oproti sdílené cx-hero variantě). */
.cx-hero--gallery .cx-hero__line { font-size: clamp(84px, 10.2vw, 150px); line-height: 0.64; }
/* Padding kolem textu, ať se neořezávají dotahy (p, y) ani boční hrany písmen
   („e" v „panely Cube") – záporný letter-spacing + background-clip:text. */
.cx-hero--gallery .cx-hero__split { padding: 0.02em 0.12em 0.14em; }
.cx-hero--gallery .cx-hero__lead { margin: 0 auto clamp(26px, 3vw, 36px); }
.cx-hero--gallery .cx-hero__actions { justify-content: center; }
/* Split nadpisu: vnitřní span (bez load-animace cx-rise) – JS jej na scroll
   rozjede do stran. Gradient řádku „panely Cube" musí být na tomto spanu,
   aby background-clip:text klipoval na jeho text. */
.cx-hero__split { display: inline-block; will-change: transform, opacity; }
.cx-hero--gallery .cx-hero__line--grad {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}
.cx-hero--gallery .cx-hero__line--grad .cx-hero__split {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}

@media (max-width: 768px) {
  .cx-hero__actions { flex-direction: column; width: 100%; max-width: 300px; }
  .cx-hero__actions .cx-btn { width: 100%; justify-content: center; }
  .cx-filmstrip__viewport { --cx-film-w: clamp(190px, 56vw, 260px); }
  .cx-filmstrip__frame { border-radius: 18px; }
  .cx-hero--film .cx-hero__foot { flex-direction: column; align-items: flex-start; }
  .cx-hero--film .cx-hero__actions { width: 100%; max-width: none; }
  .cx-hero--film .cx-hero__lead { max-width: none; margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-filmstrip__viewport { cursor: default; }
}

.cx-side { display: flex; align-items: baseline; gap: 14px; }

/* ── FOCUS — fullscreen pinned „zaostření" gradientového textu ──
   100vh, bílé pozadí, centrovaný headline s hero gradientem. Počáteční
   rozostření/glass + zaostření na scroll řídí GSAP (buildCubeFocus). */
.cx-focus {
  min-height: 100svh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  padding: clamp(48px, 9vh, 120px) var(--cx-gutter);
}
.cx-focus__inner { width: 100%; }
.cx-focus__text {
  max-width: min(1180px, 100%); margin: 0 auto; text-align: center;
}
.cx-focus__line {
  margin: 0; text-wrap: balance; color: #111;
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.3; letter-spacing: -0.02em;
}
.cx-focus__line--sub {
  margin-top: 0.72em; font-weight: 600;
  font-size: clamp(22px, 3vw, 40px); color: #1a1a1a;
}
/* Apple-style „word focus": JS rozdělí řádky na slova, scrub je postupně
   zaostřuje (blur→0 + opacity + posun). */
.cx-focus__word {
  display: inline-block; color: inherit;
  will-change: filter, opacity, transform;
}
.cx-focus:not(.is-split) .cx-focus__text { will-change: filter, opacity; }
@media (prefers-reduced-motion: reduce) {
  .cx-focus__text, .cx-focus__word { filter: none !important; opacity: 1 !important; }
}

/* Globální „cursor glow" z homepage nepatří na produktové podstrany –
   bez pohybu myši sedí uprostřed jako kolečko. Na Flexi/cube ho skryjeme. */
.hero__mouse-glow { display: none; }

/* ── DESIGN IN MOTION — pás karet po oblouku (trionn-style) ───── */
.cx-motion {
  position: relative;
  background: #e7e7ea; color: var(--cx-ink);
}
/* PIN řeší ScrollTrigger (buildCubeMotionScene) – ne CSS sticky (kvůli Lenis) */
.cx-motion__stage {
  position: relative; height: 100vh; overflow: hidden;
  display: grid; place-items: start center;
  perspective: 1500px;
}

/* scroll-scrubované video v pozadí scény (currentTime řídí JS) */
.cx-motion__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* nadpisy nahoře, pás karet pluje dole pod nimi */
.cx-motion__head {
  position: relative; z-index: 3; text-align: center;
  padding: calc(clamp(64px, 12vh, 150px) + 120px) var(--cx-gutter) 0; pointer-events: none;
}
.cx-motion__title {
  margin: 0; color: #fff; text-wrap: balance; max-width: 14ch;
  font-family: "Inter Tight", var(--display); font-weight: 600;
  font-size: clamp(38px, 7vw, 104px); line-height: 1.0; letter-spacing: -0.04em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.28);
}
/* Stejný styl jako homepage lead „Kompletní prezentační systémy…"
   (.cta-s__lede) – jen světlá barva kvůli tmavému pozadí sekce. */
.cx-motion__sub {
  margin: clamp(16px, 1.8vw, 28px) 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 22px rgba(0,0,0,0.26);
}
/* Hlavička má pointer-events:none (kvůli proscrollování přes scénu) → tlačítku
   musíme klikatelnost vrátit. */
.cx-motion__cta { margin-top: clamp(22px, 2.6vw, 36px); pointer-events: auto; }
/* slova pro blur reveal nadpisů (stejný princip jako cx-focus__word) */
.cx-motion__word { display: inline-block; color: inherit; will-change: filter, opacity, transform; }

/* pole karet — 3D scéna; karty polohuje JS (translate3d + rotateY/Z) */
.cx-motion__field {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0; transition: opacity 0.5s ease;
}
.cx-motion.is-arc-ready .cx-motion__field { opacity: 1; }
.cx-motion__card {
  position: absolute; top: 0; left: 0; margin: 0;
  width: clamp(200px, 23vw, 350px); aspect-ratio: 4 / 4.3;
  background: transparent;
  will-change: transform, opacity;
  transform-style: preserve-3d; backface-visibility: hidden;
}
/* fotky bez pozadí (průhledné PNG) – plně barevné, měkký stín dle tvaru */
.cx-motion__card img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 26px 34px rgba(20,24,40,0.32));
}

@media (max-width: 768px) {
  .cx-motion__card { width: clamp(160px, 48vw, 240px); }
}

/* ── SPECS / DETAIL — sticky produkt stage + bloky s hairline ── */
.cx-specs { padding: var(--cx-sec-y) 0; }
.cx-specs__grid { display: grid; grid-template-columns: 1fr; gap: var(--cx-gap); }
@media (min-width: 940px) { .cx-specs__grid { grid-template-columns: 0.92fr 1.08fr; align-items: start; } }
.cx-specs__stage {
  position: relative; border-radius: var(--cx-radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, var(--cx-stage-2), var(--cx-stage));
  border: 0; box-shadow: 0 34px 70px -34px rgba(10,40,60,0.45); min-height: 56vh;
  display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 56px);
}
@media (min-width: 940px) { .cx-specs__stage { position: sticky; top: calc(var(--flexi-nav-offset) + 4vh); } }
.cx-specs__stage::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(40,170,225,0.34), transparent 66%); filter: blur(34px); }
.cx-specs__shot { position: relative; z-index: 1; max-height: 60vh; width: auto; object-fit: contain; filter: drop-shadow(0 30px 56px rgba(0,0,0,0.45)); }
.cx-specs__list { display: flex; flex-direction: column; }
.cx-specs__head { margin-bottom: clamp(32px, 4vw, 52px); }
.cx-specs__head .cx-h2 { margin-top: 16px; max-width: 16ch; }
.cx-specs__block { padding: clamp(24px, 2.6vw, 34px); background: var(--cx-bg); border: 0; border-radius: var(--cx-radius-lg); box-shadow: 0 24px 52px -30px rgba(33,156,207,0.20); margin-bottom: clamp(16px, 1.6vw, 22px); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.cx-specs__block:last-of-type { margin-bottom: 0; }
.cx-specs__block:hover { transform: translateY(-4px); box-shadow: 0 34px 62px -28px rgba(33,156,207,0.28); }
.cx-specs__row { display: grid; grid-template-columns: 1fr; gap: 8px 28px; }
@media (min-width: 560px) { .cx-specs__row { grid-template-columns: 150px 1fr; } }
.cx-specs__eyebrow { font-family: var(--kicker, var(--body)); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-accent); padding-top: 6px; }
.cx-specs__title { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.16; margin: 0 0 12px; color: var(--cx-ink); }
.cx-specs__text { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.6; color: var(--cx-ink-2); margin: 0; }
.cx-specs__cta { margin-top: clamp(30px, 3.4vw, 44px); }

/* ── SHOWCASE — bento realizací (tmavé fotky v rámech na světlém) ── */
.cx-show { padding: var(--cx-sec-y) 0; background: var(--cx-bg-2); }
.cx-show__head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 72px); }
.cx-show__head .cx-h2 { margin-top: 16px; }
.cx-show__lead { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--cx-ink-2); max-width: 48ch; }
.cx-show__cta { margin-top: clamp(26px, 3vw, 34px); }
.cx-bento { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.4vw, 20px); grid-auto-rows: 200px; }
@media (min-width: 760px) {
  .cx-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
  .cx-bento__cell--a { grid-column: span 2; grid-row: span 2; }
  .cx-bento__cell--b { grid-column: span 2; }
  .cx-bento__cell--c { grid-column: span 1; grid-row: span 1; }
  .cx-bento__cell--d { grid-column: span 1; grid-row: span 1; }
}
.cx-bento__cell {
  position: relative; overflow: hidden; border-radius: var(--cx-radius);
  background: var(--cx-stage); border: 0; box-shadow: 0 26px 56px -32px rgba(10,30,50,0.40);
}
.cx-bento__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); }
.cx-bento__cell:hover img { transform: scale(1.06); }

/* ── ECOSYSTEM — kombinace (světlé karty, dark image stage, hairline) ── */
.cx-eco { padding: var(--cx-sec-y) 0; }
.cx-eco__head { max-width: 720px; margin-bottom: clamp(44px, 5vw, 72px); }
.cx-eco__head .cx-h2 { margin-top: 16px; }
.cx-eco__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2vw, 28px); }
@media (min-width: 820px) { .cx-eco__grid { grid-template-columns: repeat(3, 1fr); } }
.cx-eco__card {
  display: flex; flex-direction: column; background: var(--cx-bg);
  border: 0; border-radius: var(--cx-radius-lg); overflow: hidden;
  box-shadow: 0 26px 56px -32px rgba(33,156,207,0.22);
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.cx-eco__card:hover { transform: translateY(-5px); box-shadow: 0 36px 66px -28px rgba(33,156,207,0.30); }
.cx-eco__media { aspect-ratio: 4 / 3; background: radial-gradient(120% 100% at 50% 0%, var(--cx-stage-2), var(--cx-stage)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cx-eco__media img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 34px rgba(0,0,0,0.4)); transition: transform 0.7s var(--ease-out); }
.cx-eco__card:hover .cx-eco__media img { transform: scale(1.04); }
.cx-eco__body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.4vw, 32px); }
.cx-eco__num { font-family: var(--kicker, var(--body)); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--cx-accent); margin-bottom: 14px; }
.cx-eco__title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--cx-ink); }
.cx-eco__text { font-size: 15.5px; line-height: 1.55; color: var(--cx-ink-2); margin: 0 0 22px; flex: 1; }

/* ── BENEFITS — Apple-style 3 karty (foto + titulek + text + CTA) ── */
/* Prémiové, téměř nepostřehnutelné pozadí: jemný modrý base + soft light-bloby
   z brand tyrkysové (velmi nízká opacita) → dojem hloubky a vzdušnosti. */
.cx-benefits {
  position: relative; isolation: isolate;
  --cx-slant: clamp(56px, 8vw, 130px);
  /* sekce o 20 % vyšší nahoře i dole; spodní padding navíc o klín hokejky */
  padding: calc(var(--cx-sec-y) * 1.2) 0 calc(var(--cx-sec-y) * 1.2 + var(--cx-slant));
  /* Apple-style „mesh": horní světelný spotlight + 2 chladné nuance
     (tyrkysová + jemná modro-fialová) v rozích → hloubka, ne plochá modř. */
  background:
    radial-gradient(78% 58% at 50% -12%, rgba(255,255,255,0.92) 0%, transparent 56%),
    radial-gradient(52% 48% at 6% 8%,    rgba(0,159,227,0.10)   0%, transparent 60%),
    radial-gradient(56% 50% at 96% 16%,  rgba(122,168,255,0.11) 0%, transparent 62%),
    radial-gradient(62% 56% at 86% 110%, rgba(79,196,238,0.11)  0%, transparent 60%),
    radial-gradient(70% 60% at 14% 104%, rgba(0,159,227,0.07)   0%, transparent 60%),
    linear-gradient(162deg, #eef4fb 0%, #e9f1fb 42%, #f2f7fd 100%);
}
/* extrémně jemný šum proti „digitální plochosti" gradientu */
.cx-benefits::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03; mix-blend-mode: overlay;
}
/* zkosená spodní hrana — „hokejka" jako v hero (vpravo plná výška, vlevo
   diagonální zlom cca v 32 %), vyplněná barvou navazující tmavé sekce cx-keynote */
.cx-benefits::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--cx-slant); z-index: 2; pointer-events: none;
  background: #1c1d21;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
}
/* nejširší kontejner sekce (širší než výchozích 1280px) */
/* sekce skoro na celou šířku obrazovky — limit jen postranní gutter (strop pro ultrawide) */
.cx-benefits .cx-wrap { position: relative; z-index: 1; width: min(2400px, 100% - var(--cx-gutter) * 2); }
.cx-benefits__head { text-align: center; margin: 0 auto clamp(44px, 5vw, 72px); }
.cx-benefits__title { margin: 0; max-width: none; }
.cx-benefits__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2vw, 28px); }
@media (min-width: 760px) { .cx-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cx-benefits__grid { grid-template-columns: repeat(3, 1fr); } }
/* Karta = foto přes celé pozadí + tmavý scrim zespodu pro čitelný text.
   Poměr 4:3 = nativní poměr fotek → minimální ořez, produkt je vidět celý. */
.cx-benefits__card {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid rgba(18,18,36,0.06); border-radius: var(--cx-radius-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,32,64,0.04), 0 20px 44px -30px rgba(16,40,80,0.20);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.cx-benefits__card:hover {
  transform: translateY(-4px); border-color: rgba(18,18,36,0.10);
  box-shadow: 0 2px 4px rgba(16,32,64,0.05), 0 32px 60px -28px rgba(16,40,80,0.26);
}
.cx-benefits__media { position: absolute; inset: 0; z-index: 0; background: #eef3f8; }
.cx-benefits__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease-out); }
.cx-benefits__card:hover .cx-benefits__media img { transform: scale(1.04); }
/* tmavý scrim zespodu → foto vyplňuje celou kartu, text dole zůstává čitelný */
.cx-benefits__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg,
    rgba(8,16,32,0.66) 0%,
    rgba(8,16,32,0.55) 7%,
    rgba(8,16,32,0.38) 16%,
    rgba(8,16,32,0.22) 26%,
    rgba(8,16,32,0.10) 36%,
    rgba(8,16,32,0.03) 46%,
    rgba(8,16,32,0) 56%);
}
.cx-benefits__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(28px, 2.8vw, 42px);
  padding-right: clamp(70px, 7vw, 92px); /* místo pro kruhovou šipku v rohu */
}
.cx-benefits__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.025em; line-height: 1.16;
  margin: 0 0 clamp(8px, 1vw, 14px); color: #fff;
  text-shadow: 0 1px 18px rgba(0,0,0,0.28);
}
.cx-benefits__text { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 34ch; text-shadow: 0 1px 14px rgba(0,0,0,0.30); }
/* kruhové „icon" tlačítko se šipkou — pravý dolní roh karty (à la Apple) */
.cx-benefits__icon {
  position: absolute; right: clamp(20px, 2vw, 28px); bottom: clamp(20px, 2vw, 28px); z-index: 3;
  display: grid; place-items: center;
  width: clamp(31px, 2.6vw, 39px); height: clamp(31px, 2.6vw, 39px); border-radius: 999px;
  background: var(--brand-gradient, var(--brand, var(--cx-accent))); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(0,159,227,0.55);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.cx-benefits__icon svg { width: 13px; height: 13px; }
.cx-benefits__card:hover .cx-benefits__icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 16px 32px -10px rgba(0,159,227,0.6); }
/* proklik přes celou kartu na kontaktní formulář (#cx-poptavka) */
.cx-benefits__link { position: absolute; inset: 0; z-index: 4; cursor: pointer; border-radius: inherit; }
.cx-benefits__link:focus-visible { outline: 3px solid var(--brand, var(--cx-accent)); outline-offset: 3px; }

/* ── GALERIE „Ukázky realizací" — scatter masonry + parallax (Apple/Samsung) ── */
.cx-gallery { padding: var(--cx-sec-y) 0; overflow: hidden; }
.cx-gallery__wrap { position: relative; }
.cx-gallery__head { margin: 0 0 clamp(28px, 4vw, 56px); }
.cx-gallery__title {
  margin: 0; color: var(--cx-ink);
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(40px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.04em;
}
.cx-gallery__title-line { display: block; }

.cx-gallery__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 1.6vw, 26px); align-items: start; }
.cx-gallery__col { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 26px); will-change: transform; }
.cx-gallery__item {
  position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--cx-radius); background: #eef3f8;
  box-shadow: 0 1px 2px rgba(16,32,64,0.04), 0 26px 54px -34px rgba(16,40,80,0.26);
}
.cx-gallery__open { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.cx-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.cx-gallery__item:hover img { transform: scale(1.05); }

/* ── LIGHTBOX — moderní fullscreen prohlížeč fotek ── */
html.cx-lightbox-lock { overflow: hidden; }
.cx-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(8,10,16,0); backdrop-filter: blur(0);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out), background 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out), visibility 0.45s;
}
.cx-lightbox.is-open { opacity: 1; visibility: visible; background: rgba(8,10,16,0.84); backdrop-filter: blur(16px); }
.cx-lightbox__stage { margin: 0; display: flex; align-items: center; justify-content: center; max-width: min(94vw, 1500px); }
.cx-lightbox__img {
  max-width: 100%; max-height: 86vh; width: auto; height: auto; display: block;
  border-radius: 12px; box-shadow: 0 50px 130px -34px rgba(0,0,0,0.75);
}
.cx-lightbox__close, .cx-lightbox__nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.cx-lightbox__close:hover, .cx-lightbox__nav:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.35); }
.cx-lightbox__close { top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px); width: clamp(42px, 4vw, 52px); height: clamp(42px, 4vw, 52px); }
.cx-lightbox__nav { top: 50%; transform: translateY(-50%); width: clamp(46px, 5vw, 62px); height: clamp(46px, 5vw, 62px); }
.cx-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.cx-lightbox__nav--prev { left: clamp(12px, 3vw, 44px); }
.cx-lightbox__nav--next { right: clamp(12px, 3vw, 44px); }
.cx-lightbox__counter {
  position: absolute; bottom: clamp(16px, 3vw, 32px); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 14px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .cx-lightbox__nav { top: auto; bottom: clamp(16px, 5vw, 28px); transform: none; }
  .cx-lightbox__nav:hover { transform: scale(1.06); }
  .cx-lightbox__nav--prev { left: 24%; }
  .cx-lightbox__nav--next { right: 24%; }
  .cx-lightbox__counter { bottom: auto; top: clamp(16px, 5vw, 28px); left: clamp(16px, 4vw, 24px); transform: none; }
}

/* desktop: 3 sloupce + „scatter" odsazení (parallax drift dolaďuje JS) */
@media (min-width: 760px) {
  .cx-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .cx-gallery__head { position: absolute; top: 0; left: 0; z-index: 2; margin: 0; max-width: 9ch; }
  .cx-gallery__col[data-col="0"] { margin-top: clamp(180px, 24vh, 320px); }
  .cx-gallery__col[data-col="1"] { margin-top: clamp(40px, 6vh, 90px); }
  .cx-gallery__col[data-col="2"] { margin-top: clamp(96px, 13vh, 180px); }
}

/* ── KEYNOTE — pinned cinematic product story (Apple/Tesla) ─────────
   Default = čistý statický stack (mobil / reduced-motion / bez JS).
   .is-cinematic (desktop) = pinned 2-sloupec + scrub timeline (JS). */
.cx-keynote { position: relative; overflow: hidden; background: #1c1d21; color: #fff; padding: var(--cx-sec-y) 0; }
.cx-keynote__stage { width: min(var(--cx-maxw), 100% - var(--cx-gutter) * 2); margin-inline: auto; }
.cx-keynote__rail { display: none; }
.cx-keynote__visual { position: relative; width: min(420px, 78%); margin: 0 auto clamp(40px, 6vw, 72px); aspect-ratio: 1150 / 1726; }
.cx-keynote__glow {
  position: absolute; inset: -16%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 50% 44%, rgba(0,159,227,0.34), transparent 64%);
  filter: blur(36px);
}
.cx-keynote__shot {
  position: absolute; inset: 0; z-index: 1;
  /* Produktové fotky (i na šířku) ukázat CELÉ, bez ořezu po stranách –
     keynote vizuál je portrét, takže cover by fotky na šířku zařízl. */
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  border-radius: var(--cx-radius-lg);
}
/* Všechny snímky vystředěné (contain) – žádný posun, ať jsou fotky konzistentní. */
.cx-keynote__shot[data-i="1"], .cx-keynote__shot[data-i="2"] { display: none; }

/* ── Hotspoty na fotce (interaktivní body s popiskem) ──────────────
   Vrstva per slide; zobrazí se jen u aktivního (JS přidá .is-active).
   Dot tepe (2 kruhové vlny), popisek se rozbalí na hover/tap. */
.cx-keynote__spots {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  visibility: hidden;
}
.cx-keynote__spots.is-active { visibility: visible; }
.cx-spot {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: 0; height: 0; pointer-events: auto;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* staggerovaný nálet bodů po aktivaci slidu */
.cx-keynote__spots.is-active .cx-spot {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--si, 0) * 0.14s + 0.15s);
}
.cx-spot__dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  /* tmavé sklo + bílý „+“ (dvě křížící se výplně) */
  background-color: rgba(5,17,28,0.55);
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size: 15px 2.4px, 2.4px 15px;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 2px solid var(--cx-accent, #009fe3);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow:
    0 0 0 5px rgba(0,159,227,0.18),
    0 0 22px -2px rgba(0,159,227,0.85),
    inset 0 0 14px -5px rgba(0,159,227,0.9);
  cursor: pointer; z-index: 2;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
/* dvě tepající kruhové vlny (rozfázované) */
.cx-spot__dot::before,
.cx-spot__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 2px solid var(--cx-accent, #009fe3);
  animation: cx-spot-pulse 2.4s var(--ease-out) infinite;
  animation-delay: calc(var(--si, 0) * 0.3s);
}
.cx-spot__dot::after { animation-delay: calc(var(--si, 0) * 0.3s + 1.2s); }
@keyframes cx-spot-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.cx-spot:hover .cx-spot__dot,
.cx-spot.is-open .cx-spot__dot {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 0 0 6px rgba(0,159,227,0.26),
    0 0 30px 0 rgba(0,159,227,0.95),
    inset 0 0 16px -4px rgba(0,159,227,1);
}

.cx-spot__pop {
  position: absolute; left: 30px; top: -14px;
  max-width: 230px; width: max-content;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(14,16,20,0.92); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  box-shadow: 0 16px 38px -14px rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px) scale(0.94); transform-origin: 0 60%;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.cx-spot:hover .cx-spot__pop,
.cx-spot.is-open .cx-spot__pop { opacity: 1; transform: translateY(0) scale(1); }

/* Mimo cinematic režim (mobil/tablet) je vidět jen 1. snímek → ukaž jeho hotspoty. */
.cx-keynote:not(.is-cinematic) .cx-keynote__spots[data-i="0"] { visibility: visible; }
.cx-keynote:not(.is-cinematic) .cx-keynote__spots[data-i="0"] .cx-spot { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cx-spot__dot::before, .cx-spot__dot::after { animation: none; }
  .cx-spot { transition: opacity 0.2s linear; transform: none; }
}
.cx-keynote__panel { margin: 0 0 clamp(38px, 5vw, 64px); max-width: 60ch; }
.cx-keynote__title {
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1.06;
  margin: 0 0 clamp(14px, 1.4vw, 22px); color: #fff;
}
.cx-keynote__text { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; color: rgba(255,255,255,0.62); margin: 0; }
.cx-keynote__cta { margin-top: clamp(10px, 2vw, 26px); }

@media (min-width: 880px) {
  .cx-keynote.is-cinematic { padding: 0; }
  .cx-keynote.is-cinematic .cx-keynote__stage {
    width: 100%; max-width: none; height: 100vh; margin: 0;
    /* Symetrické sloupce → vizuál i text lze čistě prohazovat mezi stranami
       (zig-zag): posun přesně o jednu buňku = (šířka buňky + gap).
       Definitní řádek (minmax 0/1fr = celých 100vh) → height:100 % vizuálu
       se má vůči čemu vztáhnout (jinak auto řádek → procento zkolabuje). */
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr);
    align-items: center;
    /* Menší padding/gap → sloupce širší → portrétní fotka dostane dost šířky,
       aby vyrostla na celých 100vh (výška portrétu = šířka × poměr). Sloupce
       drží symetrii (1fr/1fr) kvůli swapShift() prohazování stran. */
    gap: clamp(24px, 3vw, 64px); padding-inline: clamp(24px, 4vw, 88px);
    perspective: 1500px;
  }
  .cx-keynote.is-cinematic .cx-keynote__content { position: relative; min-height: 48vh; }
  .cx-keynote.is-cinematic .cx-keynote__panel {
    position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
    margin: 0; max-width: 44ch; will-change: transform, opacity, filter;
  }
  .cx-keynote.is-cinematic .cx-keynote__cta {
    position: absolute; left: 0; top: calc(50% + clamp(130px, 19vh, 210px)); margin: 0;
    will-change: transform, opacity;
  }
  .cx-keynote.is-cinematic .cx-keynote__visual {
    /* Dominantní vizuál: vyplní (skoro) celou výšku viewportu, dolní/horní mezery
       minimální. Výška = řídicí rozměr (92vh), škáluje s viewportem → velký i na
       MacBook Air. Šířka volná. Fotka uvnitř = cover (viz níže), aby vyplnila
       výšku i u čtvercových/landscape fotek (contain by je nechal malé). */
    position: relative; width: 100%; max-width: none; aspect-ratio: auto;
    height: min(92vh, 1040px);
    margin: 0; justify-self: center;
    transform-style: preserve-3d; will-change: transform;
  }
  /* V cinematic režimu fotka VYPLNÍ box (ořízne jen okrajové prázdno) → dominantní
     a vždy na celou výšku. Mimo cinematic (mobil) zůstává contain (celá fotka). */
  .cx-keynote.is-cinematic .cx-keynote__shot { object-fit: cover; object-position: center; }
  /* Snímky 2 „Snadná montáž a transport“ a 3 „Flexibilita pro každý prostor“ jsou
     landscape → cover by je ořízl/přerostl (a rozhodil hotspoty); contain je
     zobrazí celé, aby se vešly na obrazovku a body seděly. */
  .cx-keynote.is-cinematic .cx-keynote__shot[data-i="1"],
  .cx-keynote.is-cinematic .cx-keynote__shot[data-i="2"] { object-fit: contain; }
  .cx-keynote.is-cinematic .cx-keynote__shot { display: block; will-change: transform, opacity, filter; }
  .cx-keynote.is-cinematic .cx-keynote__rail {
    display: flex; flex-direction: column; gap: 9px; z-index: 3;
    position: absolute; left: clamp(18px, 2.6vw, 40px); top: 50%; transform: translateY(-50%);
  }
  .cx-keynote.is-cinematic .cx-keynote__seg {
    width: 3px; height: 40px; border-radius: 3px; background: rgba(255,255,255,0.16);
    transition: background 0.45s var(--ease-out);
  }
  .cx-keynote.is-cinematic .cx-keynote__seg.is-active { background: var(--cx-accent, #009fe3); }
}

/* ── KOMPATIBILITA — editorial showcase (Apple/Samsung magazine) ──── */
.cx-combine {
  position: relative; isolation: isolate; overflow: hidden; padding: var(--cx-sec-y) 0;
  background:
    radial-gradient(58% 48% at 10% 4%,  rgba(0,159,227,0.06)  0%, transparent 60%),
    radial-gradient(54% 48% at 94% 26%, rgba(122,168,255,0.06) 0%, transparent 62%),
    radial-gradient(66% 56% at 50% 108%, rgba(79,196,238,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
}
.cx-combine__head { text-align: center; max-width: none; margin: 0 auto clamp(56px, 8vw, 116px); }
.cx-combine__eyebrow {
  display: block; font-family: var(--kicker, var(--body)); font-weight: 600;
  font-size: clamp(11px, 0.85vw, 13px); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cx-accent, #009fe3); margin: 0 0 clamp(14px, 1.4vw, 20px);
}
.cx-combine__title {
  margin: 0; color: var(--cx-ink); white-space: nowrap;
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(23px, 4.4vw, 62px); line-height: 1.03; letter-spacing: -0.035em;
}

.cx-combine__rows { display: flex; flex-direction: column; gap: clamp(60px, 9vw, 150px); }
.cx-combine__row { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 52px); align-items: center; }
.cx-combine__media {
  /* Odsazení .cx-wrap od kraje viewportu → o tolik fotku „vytáhneme" ke kraji. */
  --bleed: calc((100vw - min(var(--cx-maxw), 100vw - var(--cx-gutter) * 2)) / 2);
  position: relative; aspect-ratio: var(--ratio, 4 / 3); overflow: hidden;
  background: #eef3f8;
  /* Full-bleed: na mobilu (1 sloupec) přes celou šířku obrazovky. */
  width: calc(100% + 2 * var(--bleed));
  margin-inline: calc(-1 * var(--bleed));
}
.cx-combine__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-combine__name {
  font-family: "Inter Tight", var(--display); font-weight: 700;
  font-size: clamp(28px, 3vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 clamp(16px, 1.6vw, 24px); color: var(--cx-ink);
}
.cx-combine__text { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.62; color: var(--cx-ink-2); margin: 0 0 clamp(26px, 2.8vw, 40px); max-width: 46ch; }
.cx-combine__btn { background: var(--brand-gradient, var(--brand, var(--cx-accent))); color: #fff; border-color: transparent; }
.cx-combine__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(0,159,227,0.5); }

@media (min-width: 880px) {
  .cx-combine__row { grid-template-columns: 1.12fr 0.88fr; gap: clamp(48px, 6vw, 110px); }
  .cx-combine__row--reverse .cx-combine__media { order: 2; }
  .cx-combine__row--reverse .cx-combine__body { order: 1; }
  .cx-combine__body { padding-inline: clamp(0px, 2vw, 44px); }
  /* jemný editorial posun (asymetrie) */
  .cx-combine__row:nth-child(even) { margin-top: clamp(0px, 3vw, 56px); }
  /* Full-bleed jen na vlastní straně řádku: vnitřní hrana zůstane u textu. */
  .cx-combine__media { width: calc(100% + var(--bleed)); }
  .cx-combine__row:not(.cx-combine__row--reverse) .cx-combine__media {
    margin-left: calc(-1 * var(--bleed)); margin-right: 0;
  }
  .cx-combine__row--reverse .cx-combine__media {
    margin-left: 0; margin-right: calc(-1 * var(--bleed));
  }
}

/* ── CLIENTS — trust strip ── */
.cx-clients { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--cx-line); }
.cx-clients__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .cx-clients__grid { grid-template-columns: 0.9fr 1.1fr; } }
.cx-clients__title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -0.03em; margin: 16px 0 0; color: var(--cx-ink); max-width: 16ch; }
.cx-clients__logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 560px) { .cx-clients__logos { grid-template-columns: repeat(4, 1fr); } }
.cx-clients__logo { display: flex; align-items: center; justify-content: center; }
.cx-clients__logo img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: opacity 0.4s, filter 0.4s; }
.cx-clients__logo:hover img { filter: grayscale(0); opacity: 1; }

/* ── CONTACT — 2 sloupce: copy + reassurance / formulář ── */
.cx-contact { padding: var(--cx-sec-y) 0; background: var(--cx-bg-2); }
.cx-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--cx-gap); }
@media (min-width: 940px) { .cx-contact__grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }
/* nadpisy nahoře přes celou šířku */
.cx-contact__intro { max-width: 60ch; margin: 0 0 clamp(40px, 5vw, 74px); }
.cx-contact__intro .cx-h2 { margin-top: 16px; }
.cx-contact__lead { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--cx-ink-2); max-width: 46ch; }
.cx-contact__meta { display: flex; flex-direction: column; gap: 14px; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--cx-line); }
.cx-contact__meta a, .cx-contact__meta span { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--cx-ink); }
.cx-contact__meta svg { width: 18px; height: 18px; color: var(--cx-accent); }
/* Karta se salesákem (převzato z homepage) v poptávkové sekci –
   bez bílé karty: jen fotka + údaje, žádné pozadí/rámeček/fixní výška */
.cx-contact__card {
  margin-top: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  padding: 0;
}
/* ── FORMULÁŘ — Apple moderní (měkká výplň + plovoucí labely) ────────
   Bezrámečková pole s jemnou šedou výplní, velký radius, plovoucí label
   (vyplave nahoru po focusu/vyplnění), výrazný focus ring, micro-interakce.
   16px font (bez iOS zoomu). */
.cx-form {
  background: #fff;
  border: 1px solid rgba(18,18,36,0.06);
  border-radius: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 1px 2px rgba(16,32,64,0.04), 0 40px 90px -48px rgba(16,40,80,0.26);
  padding: clamp(26px, 3.2vw, 50px);
  display: grid; gap: clamp(14px, 1.6vw, 20px);
}
.cx-form__row { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 560px) { .cx-form__row { grid-template-columns: 1fr 1fr; } }

/* pole = label (absolutně) + input/textarea s místem na plovoucí label */
.cx-field { position: relative; display: block; }
.cx-field__label {
  position: absolute; left: 18px; top: 19px; pointer-events: none;
  font-size: 16px; font-weight: 500; color: var(--cx-ink-2); /* 4.54:1 na výplni – WCAG AA */
  transform-origin: left top;
  transition: transform 0.22s var(--ease-out), color 0.2s var(--ease-out);
}
.cx-field .opt { color: var(--cx-ink-2); font-weight: 400; }

.cx-input {
  width: 100%; min-height: 60px; padding: 26px 18px 10px;
  border: 1.5px solid transparent; border-radius: 16px;
  background: #f1f3f7; color: var(--cx-ink);
  font-family: var(--body); font-size: 16px; line-height: 1.3;
  transition: background 0.22s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
/* placeholder je jen " " (mezera) kvůli detekci vyplnění → skrytý */
.cx-input::placeholder { color: transparent; }
.cx-input:hover { background: #e9ecf2; }
.cx-input:focus {
  outline: none; background: #fff; border-color: #0089c4; /* 3.9:1 vs bílá – WCAG non-text */
  box-shadow: 0 0 0 4px rgba(0,159,227,0.20), 0 10px 26px -12px rgba(0,159,227,0.3);
}
/* plovoucí label: nahoru + zmenšení po focusu nebo když je pole vyplněné */
.cx-input:focus ~ .cx-field__label,
.cx-input:not(:placeholder-shown) ~ .cx-field__label {
  transform: translateY(-12px) scale(0.74);
  font-weight: 600; color: var(--cx-ink-2);
}
.cx-input:focus ~ .cx-field__label { color: #0077a8; } /* 4.98:1 brand na bílé – WCAG AA */

.cx-input.is-invalid, .cx-input:user-invalid {
  border-color: #e0445a; background: #fff;
  box-shadow: 0 0 0 4px rgba(224,68,90,0.14);
}
.cx-input.is-invalid ~ .cx-field__label, .cx-input:user-invalid ~ .cx-field__label { color: #e0445a; }
.cx-input.is-valid { border-color: #15a34a; box-shadow: 0 0 0 4px rgba(21,163,74,0.12); }
.cx-input:disabled { background: #f2f4f7; color: var(--cx-ink-3); cursor: not-allowed; }

.cx-field--area .cx-field__label { top: 22px; }
textarea.cx-input { resize: vertical; min-height: 150px; padding-top: 30px; line-height: 1.55; }

.cx-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(4px, 1vw, 10px); }
.cx-form__foot .cx-btn { min-height: 52px; }
.cx-form__note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--cx-ink-2); }
.cx-form__note.is-ok { color: #1a7f43; } .cx-form__note.is-err { color: #c2283d; } /* 5.05:1 / 5.74:1 – WCAG AA */
@media (max-width: 559px) {
  .cx-form__foot { flex-direction: column; align-items: stretch; }
  .cx-form__foot .cx-btn { width: 100%; justify-content: center; }
  .cx-form__note { text-align: center; }
}

/* ── FINAL CTA — jediný tmavý moment (dramatický závěr) ── */
/* FINAL CTA — homepage brand card (světlý gradient, turquoise, pilulky) */
.cx-final { background: var(--cx-bg); padding: var(--cx-sec-y) 0; }
.cx-final__grid {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: var(--cx-gap); align-items: center;
  background: linear-gradient(160deg, #fafbff 0%, #eaf5fb 100%);
  border: 1px solid rgba(33,156,207,0.10);
  border-radius: var(--cx-radius-lg);
  padding: clamp(32px, 5vw, 72px);
}
.cx-final__grid::before {
  content: ""; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(33,156,207,0.10) 0%, transparent 70%); pointer-events: none;
}
@media (min-width: 880px) { .cx-final__grid { grid-template-columns: 1.05fr 0.95fr; } }
.cx-final__copy { position: relative; z-index: 1; }
.cx-final .cx-label { color: var(--cx-accent); }
.cx-final__title { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.04em; margin: 16px 0 18px; color: var(--cx-ink); }
.cx-final__text { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: var(--cx-ink-2); max-width: 44ch; margin: 0 0 clamp(26px, 3vw, 34px); }
.cx-final__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cx-final__media { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: var(--cx-radius); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(10,40,60,0.4); }
.cx-final__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) { .cx-final__media { order: -1; } }

@media (prefers-reduced-motion: reduce) {
  .cx-bento__cell:hover img, .cx-eco__card:hover .cx-eco__media img { transform: none; }
}

/* ── REVEAL STRATEGIE (.cx) ────────────────────────────────────────────────
   Priorita = obsah NIKDY neviditelný. Nezávislé na JS ScrollTriggeru.
   • default: vše viditelné (přebíjí skryvací base [data-flexi-reveal]{opacity:0})
   • hero (nad ohybem): časová entrance animace na load
   • tělo: scroll-driven CSS reveal přes animation-timeline:view() (Chrome/moderní)
     — v nepodporujících prohlížečích prostě zůstává viditelné. */
.cx [data-flexi-reveal] { opacity: 1; transform: none; }
@keyframes cx-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cx [data-flexi-reveal] {
      animation: cx-rise both linear;
      animation-timeline: view();
      animation-range: entry 4% entry 36%;
    }
  }
  /* Hero je nad ohybem → časová animace na load (ne scroll-driven). */
  .cx-hero [data-flexi-reveal] {
    animation: cx-rise 0.9s var(--ease-out) both;
    animation-timeline: auto;
    animation-range: normal;
  }
  .cx-hero__kicker[data-flexi-reveal]  { animation-delay: 0.05s; }
  .cx-hero__line[data-flexi-reveal]    { animation-delay: 0.12s; }
  .cx-hero__line--grad[data-flexi-reveal] { animation-delay: 0.18s; }
  .cx-hero__lead[data-flexi-reveal]    { animation-delay: 0.24s; }
  .cx-hero__actions[data-flexi-reveal] { animation-delay: 0.30s; }
  .cx-hero__cue[data-flexi-reveal]     { animation-delay: 0.42s; }
  .cx-hero__collection[data-flexi-reveal] { animation-delay: 0.08s; }
  .cx-hero__nav[data-flexi-reveal]     { animation-delay: 0.34s; }
}
@media (prefers-reduced-motion: reduce) {
  .cx [data-flexi-reveal] { opacity: 1 !important; transform: none !important; }
}