/*  ======================================================================
   michalweb — the one stylesheet of the live site (2026-09-30)
   Merged from style.css (the landing page + shared layer) and home.css (the homepage layer),
   in that order, so the cascade is unchanged. Rules whose selectors match nothing on the page
   were dropped. The pre-merge files live in _archive/site-dev/.
   ======================================================================  *//*  ============================== PART 1 — base (was style.css) ==============================  *//* === Tokens (from pmw-globals) === */
:root {
  /* === PALETTE (closed, 5) === */
  --bg-light:   #e8e9f3;
  --bg-dark:    #000f08;
  --bg-blue:    #084887;
  --bg-red:     #b20d30;
  --accent-cyan:#00abd6;
  --cta-green:#82ad37;              /* menu CTA only — added 2026-09-23 by user decision */
  --text-color: #060606;

  /* === TYPE === */
  --font-headline: 'Exo 2', sans-serif;
  --font-body:     'Plus Jakarta Sans', 'Open Sans', sans-serif;

  /* === SHAPE === */
  --radius: 5px;

  /* === HERO SPLIT === */
  --split-left:  53.3%;
  --split-right: 46.7%;

  --nav-gutter:         32px;

  --ticker-height:      64px;   /* was 48 — grew with the 20px menu (2026-09-20) */
  --accent-line-height: 4px;

  /* === LAYOUT (sections below the hero) === */
  --container-max:     1464px;
  --container-width:   80%;
  --section-padding-y: 60px;
  --header-height:     48px;
  --column-gap:        40px;

  /* === RHYTHM === */
  --headline-padding-bottom:      20px;
  --aboveheadline-padding-bottom: 0px;
  --text-button-gap:              24px;
  --blurb-icon-gap:               12px;
  --row-after-intro:              60px;
  --footer-column-gap:            14px;
}

.grecaptcha-badge { visibility: hidden; }

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  /* Was `height:100%; overflow:hidden` — correct for the one-viewport landing page,
     fatal here: it locked away every section below the hero.
     `clip` not `hidden`: hidden makes body a scroll container, which breaks
     position:sticky on .site-top. clip contains the overflow without doing that. */
  overflow-x: clip;
  background: var(--bg-light);
  color: var(--text-color);
  font-family: var(--font-body);
}

/* Ticker removed — the blue strip is now the sticky nav. --ticker-height still
   sets that bar's height and the hero's viewport math. */

/* === Cyan accent line === */
.accent-line {
  height: var(--accent-line-height);
  background: var(--accent-cyan);
}

/* === Main split === */
.split {
  display: flex;
  height: calc(100vh - var(--ticker-height) - var(--accent-line-height));
}

.split__photo {
  width: var(--split-left);
  flex-shrink: 0;
  overflow: hidden;
}

.split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  display: block;
}

.split__content {
  width: var(--split-right);
  position: relative;
  overflow: hidden;
  background: url('images/mk-web-background.jpg') no-repeat top left;
  background-size: cover;
}

/* === Mosaic decoration — full width, absolute at 85px from top === */
.mosaic {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: 85px;
  left: 0;
  right: 0;
  padding: 0 10px;
  overflow: hidden;
}

.mosaic__row {
  display: flex;
  gap: 10px;
}

.mosaic__tile {
  width: 35px;
  height: 25px;
  border-radius: 5px;
  background: var(--bg-blue);
  flex-shrink: 0;
}

.mosaic__row--cyan .mosaic__tile {
  background: var(--accent-cyan);
}

/* === Pitch area — positioned from top === */
.pitch {
  position: absolute;
  top: 364px;
  left: min(110px, 12.3%);
  right: min(56px, 6.25%);
}

/* === Content A: headline state === */
.content-a {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.content-a.is-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

h1 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: clamp(42px, 4.5vw, 72px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--bg-blue);
  margin-bottom: 24px;
}

.lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--text-color);
  margin-bottom: 36px;
}

/* === Buttons === */
.btn-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  transform: rotate(35deg);
  pointer-events: none;
}

.btn:hover::after {
  left: 120%;
}

.btn--primary {
  background: var(--bg-blue);
  color: #ffffff;
}

.btn--primary::after {
  background-color: rgba(127, 168, 207, 0.35);
  transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn--outline {
  background: var(--accent-cyan);
  color: #ffffff;
  border: none;
}

.btn--outline::after {
  background-color: rgba(255, 255, 255, 0.3);
  transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* === Content B: reveal — designed experience === */
.content-b {
  display: none;
  position: absolute;
  top: 155px;
  bottom: 0;
  left: min(110px, 12.3%);
  right: min(110px, 12.3%);
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc((100vh - 155px) * 0.12);
}

/* --- Mosaic fill — loading effect: transparent → wave → full color --- */
@keyframes mosaic-fill {
  0% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.08); background: var(--accent-cyan); }
  100% { opacity: 1; transform: scale(1); }
}

.mosaic.is-loading .mosaic__tile {
  animation: mosaic-fill 0.45s ease forwards;
}

/* --- Content nav (back arrow + close) --- */
.content-nav {
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.25s ease, border-color 0.25s ease;
}

.content-nav--back {
  top: 187px;
  left: calc(min(110px, 12.3%) / 2 - 20px);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 171, 214, 0.25);
}

.content-nav--back.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.content-nav--back:hover {
  color: var(--bg-blue);
  border-color: rgba(8, 72, 135, 0.4);
}

/* --- Lines: typographic statements --- */
.reveal-lines {
  margin-bottom: 24px;
}

.reveal-line {
  font-family: var(--font-headline);
  color: var(--bg-blue);
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-line--hero {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  margin-bottom: 8px;
  transform: translateX(-24px);
}

.reveal-line--mid {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  margin-bottom: 8px;
  transform: translateY(12px);
  transition-delay: 250ms;
}

.reveal-line--close {
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 400;
  color: #86ae3b;
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 500ms;
}

.content-b.is-visible .reveal-line {
  opacity: 1;
  transform: translate(0, 0);
}

/* Highlight: cyan underline that draws itself */
.reveal-highlight {
  position: relative;
  display: inline;
}

.reveal-highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent-cyan);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.content-b.is-visible .reveal-highlight::after {
  width: 100%;
}

/* --- Form card: scale-up entrance with cyan border + glow --- */
.reveal-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--accent-cyan);
  border-radius: 5px;
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* reveal-card transition driven by JS timing */

@keyframes card-glow {
  0% { box-shadow: 0 0 0 0 rgba(0, 171, 214, 0); }
  50% { box-shadow: 0 0 16px 2px rgba(0, 171, 214, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(0, 171, 214, 0); }
}

.reveal-card.is-glowing,
.btn.is-glowing {
  animation: card-glow 0.8s ease;
}

.reveal-card__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 18px;
  color: var(--bg-blue);
  margin-bottom: 20px;
}

.reveal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Animated underline inputs */
.reveal-input {
  position: relative;
}

.reveal-input input,
.reveal-input textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 0 8px;
  border: none;
  border-bottom: 1px solid rgba(6, 6, 6, 0.2);
  background: transparent;
  color: var(--text-color);
  outline: none;
  transition: border-color 0.3s ease;
}

.reveal-input textarea {
  resize: none;
}

.reveal-input label {
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-color);
  opacity: 0.45;
  pointer-events: none;
  transition: transform 0.25s ease, font-size 0.25s ease, opacity 0.25s ease;
}

.reveal-input input:focus + label,
.reveal-input input:not(:placeholder-shown) + label,
.reveal-input textarea:focus + label,
.reveal-input textarea:not(:placeholder-shown) + label {
  transform: translateY(-22px);
  font-size: 11px;
  opacity: 0.7;
  color: var(--bg-blue);
}

.reveal-input__line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-cyan);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-input input:focus ~ .reveal-input__line,
.reveal-input textarea:focus ~ .reveal-input__line {
  width: 100%;
  left: 0;
}

.btn--submit {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 15px;
  padding: 12px 28px 14px;
}

.btn--submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.form-banner {
  padding: 14px 18px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 15px;
  margin-top: 12px;
}

.form-banner--success {
  background: rgba(134, 174, 59, 0.12);
  color: #5a7a20;
  border: 1px solid rgba(134, 174, 59, 0.3);
}

.form-banner--error {
  background: rgba(178, 13, 48, 0.08);
  color: var(--bg-red);
  border: 1px solid rgba(178, 13, 48, 0.2);
}

.grecaptcha-badge { visibility: hidden; }

/* --- Contacts: inline, fly from right --- */
.reveal-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.reveal-contact {
  display: flex;
  flex-wrap: wrap;             /* too tight → the value moves under the label as a whole */
  align-items: baseline;       /* label + value share one text baseline (were centred: 1.5px off) */
  gap: 4px 10px;
  text-decoration: none;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

/* contact transitions driven by JS timing */

.reveal-contact__icon {
  display: flex;               /* inline SVG, same icons as the kontakt section (2026-10-13) */
  align-self: center;
  width: 22px;
  height: 22px;
  color: var(--accent-cyan);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-contact:hover .reveal-contact__icon {
  transform: scale(1.2);
}

.reveal-contact__label {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bg-blue);
  white-space: nowrap;         /* "E-MAIL" never breaks at the hyphen */
}

.reveal-contact__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  white-space: nowrap;
  color: var(--bg-blue);
  position: relative;
}

.reveal-contact__value::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-cyan);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-contact:hover .reveal-contact__value::after {
  width: 100%;
}

/* === Portfolio overlay === */
.portfolio-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-dark);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.portfolio-overlay.is-open {
  transform: translateX(0);
}

.portfolio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 48px;
  flex-shrink: 0;
  background: var(--bg-blue);
  border-bottom: 2px solid var(--accent-cyan);
}

.portfolio-header__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 26px;
  color: var(--bg-light);
}

.portfolio-header__counter {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bg-light);
}

.portfolio-close {
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid rgba(232, 233, 243, 0.3);
  border-radius: 0;
  color: var(--bg-light);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.portfolio-close:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* --- Mobile nav strip (hidden on desktop) --- */
.portfolio-nav-strip {
  display: none;
}

.portfolio-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.portfolio-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: max(24px, calc((100vh - 707px) / 3)) 76px 0 132px;
  gap: 56px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-slide__viewport {
  flex: 0 1 1120px;
  max-width: 1120px;
  height: 650px;
  border: 1px solid rgba(232, 233, 243, 0.15);
  border-radius: 3px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: rgba(232, 233, 243, 0.03);
  will-change: scroll-position;
}

@supports (-moz-appearance: none) {
  .portfolio-slide__viewport {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) rgba(232, 233, 243, 0.08);
  }
}

.portfolio-slide__viewport::-webkit-scrollbar { width: 5px; }
.portfolio-slide__viewport::-webkit-scrollbar-track { background: rgba(232, 233, 243, 0.08); }
.portfolio-slide__viewport::-webkit-scrollbar-thumb { background: var(--accent-cyan); border-radius: 3px; }

.portfolio-slide__img {
  width: 100%;
  display: block;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide__img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.portfolio-slide__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.portfolio-slide__loader.is-hidden {
  opacity: 0;
}

.mini-mosaic {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-mosaic__row {
  display: flex;
  gap: 6px;
}

.mini-mosaic__tile {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  background: var(--bg-blue);
  opacity: 0;
}

.mini-mosaic__row--cyan .mini-mosaic__tile {
  background: var(--accent-cyan);
}

@keyframes mini-mosaic-loop {
  0%   { opacity: 0; transform: scale(0.85); }
  40%  { opacity: 1; transform: scale(1.06); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

.mini-mosaic.is-animating .mini-mosaic__tile {
  animation: mini-mosaic-loop 1.6s ease infinite;
}

@keyframes mini-mosaic-drain {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

.mini-mosaic.is-draining .mini-mosaic__tile {
  animation: mini-mosaic-drain 0.35s ease forwards;
}

.portfolio-slide__info {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- Name: dominant, animated entrance --- */
.portfolio-slide__name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 71px;
  line-height: 0.95;
  color: var(--bg-light);
  letter-spacing: -0.04em;
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide.is-active .portfolio-slide__name {
  opacity: 1;
  transform: translateY(0);
}

/* --- Accent rule: cyan line draws from left --- */
.portfolio-slide__rule {
  height: 3px;
  width: 0;
  background: var(--accent-cyan);
  margin: 28px 0 24px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide.is-active .portfolio-slide__rule {
  width: 72px;
  transition-delay: 300ms;
}

/* --- Detail rows: label + value structured pair --- */
.portfolio-slide__detail {
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide.is-active .portfolio-slide__detail {
  opacity: 1; transform: translateY(0); transition-delay: 450ms;
}

.portfolio-slide__label {
  display: block;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-cyan);
  margin-bottom: 4px;
}

.portfolio-slide__val {
  display: block;
  font-family: var(--font-body);
  font-size: 19px;
  color: rgba(232, 233, 243, 0.85);
  line-height: 1.4;
}

/* --- Visit link --- */
.portfolio-slide__link {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-cyan);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}

.portfolio-slide__link::after {
  content: '↗';
  font-size: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-cyan);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide__link:hover::after {
  transform: translate(3px, -3px);
}

.portfolio-slide__link:hover::before {
  width: 100%;
}

.portfolio-slide__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-slide.is-active .portfolio-slide__meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 600ms;
}

.portfolio-slide__url {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(232, 233, 243, 0.4);
  letter-spacing: 0.04em;
}

/* --- Viewport glow — breathing loop --- */
@keyframes viewport-glow {
  0%   { box-shadow: 0 0 12px 2px rgba(0, 171, 214, 0.05); border-color: rgba(232, 233, 243, 0.15); }
  50%  { box-shadow: 0 0 28px 4px rgba(0, 171, 214, 0.2); border-color: rgba(0, 171, 214, 0.4); }
  100% { box-shadow: 0 0 12px 2px rgba(0, 171, 214, 0.05); border-color: rgba(232, 233, 243, 0.15); }
}

.portfolio-slide.is-active .portfolio-slide__viewport {
  animation: viewport-glow 9s ease-in-out infinite;
}

.portfolio-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(232, 233, 243, 0.08);
  border: 1px solid rgba(232, 233, 243, 0.2);
  border-radius: 0;
  color: var(--bg-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 10;
}

.portfolio-nav svg {
  display: block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-nav--prev:hover svg {
  transform: translateX(-2px);
}

.portfolio-nav--next:hover svg {
  transform: translateX(2px);
}

.portfolio-nav:hover {
  background: rgba(0, 171, 214, 0.15);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.portfolio-nav:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.portfolio-nav--prev { left: 20px; }
.portfolio-nav--next { right: 20px; }

.portfolio-progress {
  height: 3px;
  background: rgba(232, 233, 243, 0.1);
  flex-shrink: 0;
}

@keyframes progress-breathe {
  0%   { box-shadow: 0 0 20px 3px rgba(0, 171, 214, 0.08); }
  50%  { box-shadow: 0 0 60px 14px rgba(0, 171, 214, 0.22); }
  100% { box-shadow: 0 0 20px 3px rgba(0, 171, 214, 0.08); }
}

.portfolio-progress__bar {
  height: 100%;
  background: var(--accent-cyan);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: progress-breathe 9s ease-in-out infinite;
  border-radius: 0 1px 1px 0;
}

/* === Short viewport — enable page scroll + tighten gap === */
@media (max-height: 850px) {
  /* (was `html, body { overflow-y: auto }` — a landing-page leftover; it made body a scroll
     container, so the sticky nav scrolled away on windows ≤850px tall. Removed 2026-09-29.) */
  .split {
    min-height: 850px;
  }
  .pitch {
    top: clamp(165px, calc(50vh - 165px), 364px);
  }
}

/* === Below 1570px — photo repositions === */
@media (max-width: 1569px) {
  .split__photo img {
    object-position: left top;
  }
}

/* === Mobile (below 960px) === */
@media (max-width: 959px) {
  html, body {
    height: auto;           /* (overflow: auto removed 2026-09-29 — it broke the sticky nav on phones) */
  }

  .split {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--ticker-height) - var(--accent-line-height));
  }

  .split__photo {
    width: 100%;
    height: 45vh;
  }

  .split__content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .mosaic { order: 1; }
  .content-nav--back { order: 2; }
  .pitch { order: 3; }
  .content-b { order: 4; }

  .mosaic {
    position: relative;
    top: 0;
    margin: 24px 0;
    padding: 0 16px;
  }

  .pitch {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 0 24px 32px;
  }

  .content-b {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 24px;
  }

  .reveal-contacts {
    flex-wrap: wrap;
    gap: 12px;
  }

  .reveal-card {
    padding: 20px 20px 18px;
  }

  h1 {
    font-size: 30px;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    text-align: center;
  }

  .portfolio-header {
    padding: 16px 20px;
  }

  .portfolio-slide {
    flex-direction: column;
    padding: 0 20px 20px;
    gap: 24px;
  }

  .portfolio-slide__viewport {
    height: 300px;
    max-width: 100%;
  }

  .portfolio-slide__info {
    width: 100%;
  }

  .portfolio-slide__name {
    font-size: 40px;
  }

  .mini-mosaic__tile {
    width: 18px;
    height: 12px;
  }

  .content-nav--back {
    position: absolute;
    top: auto;
    bottom: auto;
    left: 24px;
    display: none;
  }

  .content-nav--back.is-visible {
    display: flex;
    position: relative;
    left: auto;
    margin: 0 0 -15px 24px;
  }

  .content-b {
    padding-top: 0;
  }

  .portfolio-nav {
    display: none;
  }

  .portfolio-nav-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    flex-shrink: 0;
    gap: 12px;
  }

  .portfolio-nav-strip__btn {
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid rgba(232, 233, 243, 0.3);
    border-radius: 0;
    color: var(--bg-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .portfolio-nav-strip__btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
  }

  .portfolio-nav-strip__name {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 20px;
    color: var(--bg-light);
    text-align: center;
    flex: 1;
    min-width: 0;
  }

  .portfolio-nav-strip__name span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portfolio-nav-strip__rule {
    height: 3px;
    width: 70%;
    margin: 10px auto 0;
    background: var(--accent-cyan);
  }

  .portfolio-slide__name,
  .portfolio-slide__rule {
    display: none;
  }
}

/* ==========================================================================
   SECTIONS BELOW THE HERO — Chemistric
   Merged in from the archived onepage draft as structural scaffolding.
   Styling is placeholder: to be recreated in the landing page's visual
   language. No selector collisions with the hero (audited: only .is-active
   and .is-open overlap, both scoped).
   ========================================================================== */
/* ============================================================
   michalweb — style.css
   Phase 2 (layout) + Phase 3 (visual) — 5-color closed palette.
   Phase 4 (copy) DONE. Phase 5 (animation) pending.
   ============================================================ */

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
img, picture, svg, video { display: block; max-width: 100%; }

/* ============================================
   TOKENS — closed 5-color palette (Layer 3)
   Per pmw-globals.md. No other colors permitted anywhere.
   ============================================ */

/* ============================================
   BASE TYPOGRAPHY (mobile-first)
   ============================================ */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: var(--bg-dark);
    background-color: var(--bg-light);
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
}

h1 { font-size: 38px; font-weight: 700; line-height: 1.05; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

strong, b { font-weight: 600; }

em {
    font-style: italic;
    color: var(--accent-cyan);
}

.text-large { font-size: 21px; }

/* ============================================
   COLOR UTILITIES — bg surfaces
   Active surfaces (this design):
     .bg-light  — primary section bg (most sections)
     .bg-cyan   — single emphasis band (the claim)
     .bg-blue   — menu + footer only
     .bg-dark   — under-layer band beneath overlapping cards
   Latent (palette colors still defined but unused as section bg):
     .bg-red — kept in :root tokens for future variants / borders
   ============================================ */
.bg-blue {
    background-color: var(--bg-blue);
    color: var(--bg-light);
}
.bg-dark {
    background-color: var(--bg-dark);
    color: var(--bg-light);
}
.bg-dark em {
    color: var(--accent-cyan);
    font-style: italic;
}

/* ============================================
   STRUCTURAL — section / row / column
   ============================================ */
.section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.row {
    width: var(--container-width);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--column-gap);
}
.row--gap-sm   { --column-gap: 20px; }
.row--gap-lg   { --column-gap: 60px; }
.row--gap-xl   { --column-gap: 80px; }

.column {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.column > .module:only-child:not(.module--image):not(.module--badge) {
    flex: 1;
}

/* ============================================
   RR — Relationship Rules (atom-owned + pair-owned)
   ============================================ */
.module--aboveheadline + .module--headline { margin-top: 0; }
.module--headline + .module { margin-top: 0; }
.module--text + .module--button { margin-top: var(--text-button-gap); }

.module--headline { padding-bottom: var(--headline-padding-bottom); }

.module--aboveheadline {
    padding-bottom: var(--aboveheadline-padding-bottom);
    color: var(--accent-cyan);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.module { /* atom shell — no native padding/margin */ }

/* ============================================
   ATOM — text
   ============================================ */
.module--text p + p {
    margin-top: 16px;
}

/* ============================================
   ATOM — image
   ============================================ */
.module--image {
    overflow: hidden;
    border-radius: var(--radius);
    background-color: transparent;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--bg-dark);
}
.module--image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================
   ATOM — button
   Native: dark fill on light bg. Auto-pairs per section bg.
   ============================================ */
.module--button {
    display: inline-block;
    align-self: flex-start;
    background-color: var(--button-bg, var(--bg-dark));
    color: var(--button-color, var(--bg-light));
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: var(--radius);
    border: 2px solid var(--button-bg, var(--bg-dark));
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.module--button:hover {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-dark);
}

.module--button--link {
    background-color: transparent;
    color: var(--accent-cyan);
    border: 0;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.module--button--link:hover {
    color: var(--bg-dark);
}

/* Blue (menu + footer) — cyan button when used inside */
.bg-blue .module--button:not(.module--button--outline):not(.module--button--link) {
    background-color: var(--accent-cyan);
    color: var(--bg-dark);
    border-color: var(--accent-cyan);
}
.bg-blue .module--button:not(.module--button--outline):not(.module--button--link):hover {
    background-color: var(--bg-light);
    color: var(--bg-dark);
    border-color: var(--bg-light);
}
.bg-blue .module--button--link:hover {
    color: var(--bg-light);
}

/* ============================================
   ATOM — divider
   ============================================ */
.module--divider {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    margin: 0;
    background-color: var(--divider-color, currentColor);
    opacity: var(--divider-opacity, 0.22);
}

/* ============================================
   MOLECULE — pitch
   ============================================ */
.molecule--pitch {
    display: flex;
    flex-direction: column;
}

/* ============================================
   HEADER + MENU
   ============================================ */
.container {
    width: var(--container-width);
    max-width: var(--container-max);
    margin: 0 auto;
}

#header {
    padding-top: 18px;
    padding-bottom: 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-blue);
    color: var(--bg-light);
    border-bottom: 2px solid var(--accent-cyan);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    padding: 0;
}
.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

#menu {
    display: none;
    width: 100%;
    margin-top: 18px;
}
#menu.is-open { display: block; }
#menu ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#menu a {
    font-size: 20px;
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}
#menu a:hover { color: var(--accent-cyan); }

/* The archived draft's hero block (#hero, .hero*, the giant ::before wordmark and the
   glass stripe) was removed here — that markup does not exist in this page. The hero
   is the landing split, styled by .split / .split__* above. */

/* ============================================
   SECTION-SPECIFIC LAYOUT
   ============================================ */

/* @6 proces — zigzag vertical process. Center vertical line connects
   dot markers on alternating L/R cards. Mobile: single column, line at
   left edge. Desktop: cards alternate sides, line centered. */
#proces .row:first-child {
    text-align: center;
}
#proces .row:first-child .module--text {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.molecule--zigzag-step {
    background-color: var(--bg-light);
    border: 1px solid var(--bg-dark);
    border-top: 3px solid var(--accent-cyan);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
}
.molecule--zigzag-step .module--aboveheadline p {
    color: var(--accent-cyan);
    font-size: 14px;
    letter-spacing: 0.12em;
}
.molecule--zigzag-step .module--headline h3 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
    padding-bottom: 12px;
}
.molecule--zigzag-step .module--text p {
    font-size: 16px;
    line-height: 1.55;
}
@media (min-width: 768px) {
    .molecule--zigzag-step {
        padding: 28px 32px;
    }
    .molecule--zigzag-step .module--headline h3 {
        font-size: 24px;
    }
}

/* @9 o-mne — 3-5-8 img|txt split */
#o-mne .row {
    align-items: center;
}
#o-mne .module--image {
    aspect-ratio: 4 / 5;
}

/* @5 quote band — cyan single emphasis */
#claim {
    text-align: center;
}
#claim .module--text p {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.35;
    max-width: 800px;
    margin: 0 auto;
    color: var(--bg-dark);
}
#claim em {
    color: var(--bg-light);   /* on cyan, em flips to light so it stands out vs the dark base text */
}

/* @6 testimonials — section header centered, 3-up grid */
#reference .row:first-child {
    text-align: center;
}
#reference .row + .row {
    margin-top: var(--row-after-intro);
}

/* @7 CTA — centered */
#kontakt {
    text-align: center;
}
#kontakt .molecule--pitch {
    align-items: center;
}
#kontakt .module--text {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
}
#kontakt .module--button {
    margin-top: 32px;
}

/* footer */
#footer {
    padding-top: 48px;
    padding-bottom: 32px;
    border-top: 2px solid var(--accent-cyan);
}
.footer-credit-col {
    align-items: flex-start;
}

/* ============================================
   DESKTOP (≥ 768px)
   ============================================ */
@media (min-width: 768px) {
    :root {
        --section-padding-y: 100px;
        --header-height: 88px;
    }

    body {
        font-size: 18px;
    }

    h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.02em; }
    h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; }
    h3 { font-size: 30px; }
    h4 { font-size: 22px; }

    .logo {
        font-size: 24px;
    }

    .hamburger { display: none; }

    #menu {
        display: block;
        width: auto;
        margin-top: 0;
    }
    #menu ul {
        flex-direction: row;
        align-items: center;      /* the links centre on the bar, not on the CTA's top edge */
        gap: 36px;
    }

    /* Row goes horizontal */
    .row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Column proportions */
    .column {
        flex-basis: 0;
    }
    .column--1-1 { flex-grow: 12; }
    .column--1-2 { flex-grow: 6;  }
    .column--1-3 { flex-grow: 4;  }
    .column--2-3 { flex-grow: 8;  }
    .column--1-4 { flex-grow: 3;  }
    .column--3-4 { flex-grow: 9;  }

    #claim .module--text p {
        font-size: 42px;
    }

    .footer-credit-col {
        align-items: flex-end;
        text-align: right;
    }
}

/* ==========================================================================
   NAV MERGE — the ticker's 48px blue strip becomes the sticky nav
   The header and the cyan accent line stick together as one bar.
   ========================================================================== */

.site-top {
    position: sticky;
    top: 0;
    z-index: 90;              /* under the portfolio overlay (100) */
}

#header {
    position: relative;       /* .site-top does the sticking */
    padding: 0;
    height: var(--ticker-height);
    border-bottom: none;      /* the accent line replaces it */
    display: flex;
    align-items: center;
}

/* The bar spans the full viewport — the logo sits hard left, the menu hard
   right. It deliberately does NOT use .container's 80% / 1460px measure, which
   governs the sections below. --nav-gutter keeps the text off the screen edge. */
#header .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--nav-gutter);
    padding-right: var(--nav-gutter);
}
.header-inner   { flex-wrap: nowrap; justify-content: space-between; }
#menu           { margin-top: 0; }

/* The logo link targets the true top of the document. #top sits on <main>,
   which starts below the bar, so without this it scrolls to y=52 and tucks the
   hero under the nav. Offsetting by the bar height lands it at y=0. */
#top {
    scroll-margin-top: calc(var(--ticker-height) + var(--accent-line-height));
}

/* Mobile: menu drops out of the bar instead of growing it */
@media (max-width: 767px) {
    #menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        background-color: var(--bg-blue);
        padding: 18px 24px 22px;
        border-bottom: var(--accent-line-height) solid var(--accent-cyan);
    }
}

@media (min-width: 768px) {
    :root { --header-height: 48px; }
}

/* Menu CTA — cyan button at the right end of the bar (user, 2026-09-22).
   Matches the hero's .btn--outline: cyan fill, white text, the same sheen sweep. */
#menu .menu-cta { display: flex; align-items: center; }   /* the button centres on the bar */
#menu .menu-cta a {
    display: block;
    line-height: 1.25;
    background-color: var(--cta-green);
    color: #ffffff;
    font-size: 17px;
    padding: 7px 18px 8px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}
#menu .menu-cta a:hover { color: #ffffff; }
#menu .menu-cta a::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -75px;
    width: 50px;
    height: 155px;
    transform: rotate(35deg);
    background-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}
#menu .menu-cta a:hover::after { left: 120%; }
@media (max-width: 767px) {
    #menu .menu-cta { margin-top: 4px; }
    #menu .menu-cta a { width: 100%; text-align: center; }
}

/* Anchor targets clear the sticky bar */
#hero,
.section {
    scroll-margin-top: calc(var(--ticker-height) + var(--accent-line-height));
}

/* ==========================================================================
   HERO TYPOGRAPHY GUARD
   The hero is the landing page kept verbatim, but it styles its headline with a
   bare `h1` selector — and the archived draft's global `body` / `h1..h4` rules
   were appended after it at equal specificity, so they were winning:
   weight 700 not 500, 38/56px not clamp(42–72px), line-height 1.05 not 1.15,
   letter-spacing 0/-0.02em not 0.01em, and `margin: 0` killing the 24px below
   the headline. This re-asserts the landing's own values, scoped to #hero.
   ========================================================================== */

#hero {
    color: var(--text-color);
    font-size: 16px;      /* the landing relied on the browser default */
    line-height: normal;  /* not the draft's 1.7 */
}

#hero h1 {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(42px, 4.5vw, 72px);
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--bg-blue);
    margin-bottom: 24px;
}

#hero h2 {
    line-height: normal;
    letter-spacing: normal;
}

/*  ============================== PART 2 — homepage (was home.css) ==============================  *//* ==========================================================================
   home.css — the homepage (site/index.html), promoted from myown on 2026-09-22, everything below the hero.
   Loads after style.css (hero, nav, tokens, structure, base atoms).

   Answers the copy2 critique:
   - scale: h2 44/48px, statement 56px, leads 20px
   - color: white base, a blue tint for alternation, two full-colour moments
     (@2 hero-green + hero-scale mosaic, @5 full blue) — #e8e9f3 dropped
   - tiles in three places only: hero, the @2 band, the @4 vertical line
   - no icon cards, no card-boxes in the process, second photo crop in @7
   - footer white, separated from the blue contact
   ========================================================================== */

/* --- tokens & page rhythm -------------------------------------------------- */
.page-home {
  --white:   #ffffff;
  --bg-tint: #f0f4f8;              /* --bg-blue at ~6 % over white */
  --tile-w: 35px;
  --tile-h: 25px;
  --tile-gap: 10px;
  --card-pad: 32px;
  --line-alpha: 0.16;
  --line: rgba(8, 72, 135, var(--line-alpha));
  --card-line: rgba(6, 6, 6, 0.09);   /* the resting outline of a @6 card — the cyan replaces it */
}

/* Neutralise style.css id rules written for the old draft's sections that share
   these anchor ids (#proces, #prace, #o-mne, #kontakt). */
.page-home #proces .row:first-child,
.page-home #kontakt { text-align: left; }
.page-home #proces .row:first-child .module--text,
.page-home #kontakt .module--text { max-width: none; margin-left: 0; margin-right: 0; padding-top: 0; }
.page-home #o-mne .row { align-items: flex-start; }
.page-home #o-mne .module--image { aspect-ratio: auto; }
.page-home #kontakt .module--button { margin-top: 6px; }

/* Nested rows fill their parent column; mobile stacks with a capped gap */
.row--nested { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.row--nested + .row--nested { margin-top: var(--column-gap); }
.page-home .row { gap: min(var(--column-gap), 40px); }

/* Section head → content (container-owned RR); a grid's second row keeps the column gap */
.page-home .section > .row + .row { margin-top: var(--row-after-intro); }
.page-home .section > .row + .row--continue { margin-top: var(--column-gap); }

/* The two big moments breathe more */
.section--big { padding-top: 80px; padding-bottom: 80px; }

/* --- surfaces ---------------------------------------------------------------- */
.bg-white { background-color: var(--white); color: var(--bg-dark); }
.bg-tint  { background-color: var(--bg-tint); color: var(--bg-dark); }

/* Text on blue: headlines full, small print softened */
.page-home .bg-blue .module--headline { color: var(--bg-light); }
.page-home .bg-blue .module--text { color: rgba(232, 233, 243, 0.82); }
.page-home .bg-blue .module--divider { --divider-color: var(--bg-light); }

/* --- type scale --------------------------------------------------------------- */
.page-home .module--headline h2,
.page-404 .module--headline h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; }
.page-home .module--headline h3 { font-size: 22px; }
.page-home .text-large p { font-size: 19px; line-height: 1.55; }

/* Section head row: 1/3 headline | 2/3 lead on the headline's line */
.section-head .column--2-3 { justify-content: flex-start; }

/* --- ATOM · mosaic (three appearances) ---------------------------------------- */
.module--mosaic {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  pointer-events: none;
}
.mosaic-row { display: flex; gap: var(--tile-gap); }
.mosaic-tile {
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: var(--radius);
  background: var(--bg-blue);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.85);
}
.mosaic-row--cyan .mosaic-tile { background: var(--accent-cyan); }

@keyframes mosaic-fill-in {
  0%   { opacity: 0; transform: scale(0.85); }
  50%  { opacity: 1; transform: scale(1.08); background: var(--accent-cyan); }
  100% { opacity: 1; transform: scale(1); }
}
.module--mosaic.is-in .mosaic-tile {
  animation: mosaic-fill-in 0.45s ease forwards;
  animation-delay: var(--d, 0ms);
}
/* After the fill, a band with data-mosaic-loop keeps breathing like the
   portfolio's mini-mosaic while it is on screen (80ms column stagger, 1.6s) */
@keyframes mosaic-loop {
  0%   { opacity: 0; transform: scale(0.85); }
  40%  { opacity: 1; transform: scale(1.06); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}
.module--mosaic.is-loop .mosaic-tile {
  animation: mosaic-loop 1.6s ease infinite;
  animation-delay: var(--loop-d, 0ms);
}

/* @2 band — hero scale, hugging the top edge of the band, full width */
.module--mosaic--band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 var(--tile-gap);
  overflow: hidden;
}

/* slider indicators: three thin lines, the active one fills like a progress bar */
.module--mosaic--dots {
  --tile-w: 40px;
  --tile-h: 3px;
  --tile-gap: 8px;
  pointer-events: auto;
}
.module--mosaic--dots .mosaic-tile {
  opacity: 1;
  transform: none;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(8, 72, 135, 0.22);
  transition: background-color 0.3s ease;
}
.module--mosaic--dots .mosaic-tile:hover { background: rgba(8, 72, 135, 0.5); }
.module--mosaic--dots .mosaic-tile.is-active {
  background: linear-gradient(to right, var(--accent-cyan) var(--p, 0%), var(--bg-blue) var(--p, 0%));
}

/* --- @1 features: editorial — hairline above, no marker ------------------------ */
.molecule--feature {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.molecule--feature .module--headline h3 { font-size: 22px; }
.molecule--feature .module--headline { padding-bottom: 8px; }
.molecule--feature .module--text p { font-size: 16px; line-height: 1.6; }

/* --- @3 slider ------------------------------------------------------------------ */
.molecule--project-slide { display: none; }
.molecule--project-slide.is-active {
  display: block;
  animation: slide-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
.molecule--project-slide.is-leaving-back.is-active { animation-name: slide-in-back; }
@keyframes slide-in-back {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

/* The screenshot sits on a solid blue plate, offset down-right — a tile at
   page scale instead of a drop shadow. Drawn as a hard box-shadow so the
   image box can stay overflow:hidden (a flex item with visible overflow
   would grow to the image's intrinsic height and ignore the aspect ratio). */
.molecule--project-slide .column--2-3 { padding-right: 16px; padding-bottom: 16px; }

.molecule--project-slide .column--1-3 { justify-content: center; }
.molecule--testimonial { display: flex; flex-direction: column; }
.molecule--testimonial .module--text:first-child p {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.45;
  color: var(--bg-blue);
}
.molecule--testimonial .module--text:nth-child(2) { margin-top: 22px; }
.molecule--testimonial .module--text:nth-child(2) p { font-weight: 600; font-size: 16px; line-height: 1.4; }
.molecule--testimonial .module--text:nth-child(3) p { font-size: 15px; opacity: 0.6; line-height: 1.4; }
.molecule--testimonial + .module--button--link { margin-top: 22px; align-self: flex-start; }

.slider-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.slider-arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(8, 72, 135, 0.3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--bg-blue);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.slider-arrow:hover { background: var(--bg-blue); border-color: var(--bg-blue); color: var(--bg-light); }
.slider-arrow svg { transition: transform 0.3s ease; }
.slider-arrow--prev:hover svg { transform: translateX(-2px); }
.slider-arrow--next:hover svg { transform: translateX(2px); }

/* --- @5 numbered reasons on blue ------------------------------------------------ */
.molecule--numbered { display: flex; flex-direction: column; }
.module--headline--numeral { padding-bottom: 6px; }
.module--headline--numeral p {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-cyan);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.molecule--numbered:hover .module--headline--numeral p { transform: translateX(6px); }
.molecule--numbered .module--headline h3 { font-size: 22px; }
.molecule--numbered .module--headline { padding-bottom: 8px; }
.molecule--numbered .module--text p { font-size: 16px; line-height: 1.6; }

/* --- @6 price cards ---------------------------------------------------------------- */
.molecule--price-card {
  height: 100%;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease;
}
.molecule--price-card:hover { border-color: var(--bg-blue); }
.molecule--price-card .module--aboveheadline { padding-bottom: 14px; }
.page-home .module--headline--price h3 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.module--headline--price { padding-bottom: 8px; }
.molecule--price-card .module--headline h4 { font-size: 20px; font-weight: 600; }
.molecule--price-card .module--headline + .module--text { margin-top: 6px; }
.molecule--price-card .module--text p { font-size: 16px; line-height: 1.6; }
.molecule--price-card .module--list { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.molecule--price-card--featured { background: var(--bg-blue); color: var(--bg-light); border-color: var(--bg-blue); }
.molecule--price-card--featured .module--list { border-top-color: rgba(232, 233, 243, 0.2); }

/* price lists: tile bullets — the 18×12 cyan tile from DEV3 (copy2) @8 (user, 2026-09-23) */
.module--list--tiles ul { list-style: none; }
.module--list--tiles li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.module--list--tiles li + li { margin-top: 10px; }
.module--list--tiles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 18px;
  height: 12px;
  border-radius: var(--radius);
  background: var(--accent-cyan);
}

.pricing-cta { margin-top: var(--row-after-intro); padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--accent-cyan); border-bottom: 1px solid var(--accent-cyan); }
.pricing-cta .module--headline { padding-bottom: 0; }
.pricing-cta .module--headline h3 { font-size: 24px; }
.molecule--pitch--inline { gap: 12px; }
.molecule--pitch--inline .module--text + .module--button { margin-top: 12px; }

/* --- @7 about ----------------------------------------------------------------------- */
.page-home #o-mne .module--image--portrait { aspect-ratio: 4 / 5; border: 0; border-radius: var(--radius); overflow: hidden; }
.module--image--portrait > img { object-position: 30% top; }
.about-close { margin-top: 24px; }
.about-close p { font-family: var(--font-headline); font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--bg-blue); }
.about-close strong { font-weight: 500; }
/* the close's button — a 1:1 match of the hero's cyan .btn--outline: size, line-height,
   and the sheen sweep on hover instead of a colour change (user, 2026-09-29) */
.page-home #o-mne .about-close + .module--button {
  margin-top: 28px;
  padding: 14px 32px 16px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  background-color: var(--accent-cyan);
  border: 0;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  transition: none;
}
.page-home #o-mne .about-close + .module--button:hover { background-color: var(--accent-cyan); color: #ffffff; }
.page-home #o-mne .about-close + .module--button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  transform: rotate(35deg);
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}
.page-home #o-mne .about-close + .module--button:hover::after { left: 120%; }
.about-projects { padding-top: var(--row-after-intro); border-top: 1px solid var(--line); }
.about-projects .module--headline h3 { font-size: 24px; }
.about-projects .module--text + .module--text { margin-top: 16px; }
.about-projects .module--text + .module--button--link { margin-top: 10px; }

.molecule--card-basic {
  height: 100%;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.molecule--card-basic .module--headline h4 { font-size: 20px; }
.molecule--card-basic .module--headline { padding-bottom: 8px; }
.molecule--card-basic .module--text p { font-size: 16px; line-height: 1.6; }
/* @10 side projects — a top crop of the site preview above the card's title (2026-09-29) */
.page-home #o-mne .about-projects .molecule--card-basic .module--image {
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
}
.page-home #o-mne .about-projects .molecule--card-basic .module--image > a { display: block; width: 100%; height: 100%; }
.page-home #o-mne .about-projects .molecule--card-basic .module--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* --- @8 contact ----------------------------------------------------------------------- */
.contact-divider { margin: 28px 0; }
.contact-lines a {
  color: var(--bg-light);
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 20px;
  transition: color 0.25s ease;
}
.contact-lines a:hover { color: var(--accent-cyan); }
.contact-lines p + p { margin-top: 8px; }
.molecule--contact-card {
  padding: 28px;
  background: var(--white);
  color: var(--bg-dark);
  border-radius: var(--radius);
}
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.page-home .reveal-input input:focus + label,
.page-home .reveal-input input:not(:placeholder-shown) + label,
.page-home .reveal-input textarea:focus + label,
.page-home .reveal-input textarea:not(:placeholder-shown) + label { color: var(--accent-cyan); opacity: 1; }
.contact-form .module--button { margin-top: 6px; cursor: pointer; }
.contact-form .module--button:disabled { opacity: 0.5; cursor: not-allowed; }

/* @11 kontakt — DEV1's dark section with the mosaic band on its top edge (2026-09-29).
   Everything scoped to .bg-dark so the hidden #kontakt-2 (blue, white card) keeps its look. */
.page-home .section--mosaic-top {
  position: relative;
  padding-top: calc(var(--section-padding-y) + var(--tile-h) * 2 + var(--tile-gap));
}
.page-home .bg-dark .module--text { color: rgba(232, 233, 243, 0.78); }
.page-home .bg-dark .module--headline { color: var(--bg-light); }
.page-home .bg-dark .module--button:not(.module--button--outline):not(.module--button--link) {
  background-color: var(--accent-cyan);
  color: var(--bg-dark);
  border-color: var(--accent-cyan);
}
.page-home .bg-dark .module--button:not(.module--button--outline):not(.module--button--link):hover {
  background-color: var(--bg-light);
  color: var(--bg-dark);
  border-color: var(--bg-light);
}
.page-home .bg-dark .molecule--contact-card {
  padding: var(--card-pad);
  background: transparent;
  color: inherit;
  border: 1px solid rgba(232, 233, 243, 0.16);
}
.page-home .bg-dark .reveal-input input,
.page-home .bg-dark .reveal-input textarea {
  color: var(--bg-light);
  font-size: 16px;
  border-bottom-color: rgba(232, 233, 243, 0.25);
}
.page-home .bg-dark .reveal-input label { color: var(--bg-light); opacity: 0.55; font-size: 16px; }
.page-home .bg-dark .reveal-input input:focus + label,
.page-home .bg-dark .reveal-input input:not(:placeholder-shown) + label,
.page-home .bg-dark .reveal-input textarea:focus + label,
.page-home .bg-dark .reveal-input textarea:not(:placeholder-shown) + label { color: var(--accent-cyan); opacity: 1; }
/* contact lines + company details, each line led by a cyan line icon */
.contact-lines p,
.contact-details p { display: flex; align-items: flex-start; gap: 14px; }
.contact-lines__icon { flex-shrink: 0; color: var(--accent-cyan); }
.contact-lines p { align-items: center; }
.contact-lines p + p { margin-top: 14px; }
.page-home #kontakt .contact-details { margin-top: 32px; display: grid; gap: 20px; }
.page-home #kontakt .contact-details p { font-size: 16px; line-height: 1.6; margin: 0; }
.page-home #kontakt .contact-details small { font-size: 12px; letter-spacing: 0.02em; opacity: 0.8; }
.page-home #kontakt .contact-details .contact-lines__icon { margin-top: 1px; opacity: 0.85; }
/* address | IČ side by side only above 1024 — at 1024 and below they stack (user, 2026-10-02) */
@media (min-width: 1025px) {
  .page-home #kontakt .contact-details { grid-template-columns: auto auto; justify-content: start; column-gap: 48px; }
}
/* the contact rule is the sections' cyan accent rule; the form card is white, cyan outline
   (user, 2026-09-29) — the fields go back to dark text inside it */
.page-home #kontakt .module--divider--accent.contact-divider { margin: 28px 0; }
/* At 1024 and below: one column — headline, text, cyan rule, then the form, then the contacts
   and company details (user, 2026-10-02). The left column dissolves (display: contents) so its
   modules and the form column can be ordered as one list. */
@media (max-width: 1024px) {
  .page-home #kontakt .row--gap-xl { flex-direction: column; gap: 0; }
  .page-home #kontakt .row--gap-xl > .column:first-child { display: contents; }
  .page-home #kontakt .row--gap-xl > .column:last-child { order: 1; }
  .page-home #kontakt .contact-lines,
  .page-home #kontakt .contact-details { order: 2; }
  .page-home #kontakt .contact-lines { margin-top: 40px; }
}
.page-home #kontakt.bg-dark .molecule--contact-card {
  background: var(--white);
  color: var(--bg-dark);
  border: 3px solid var(--accent-cyan);
}
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input input,
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input textarea {
  color: var(--bg-dark);
  border-bottom-color: rgba(6, 6, 6, 0.2);
}
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input label { color: var(--bg-dark); opacity: 0.55; }
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input input:focus + label,
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input input:not(:placeholder-shown) + label,
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input textarea:focus + label,
.page-home #kontakt.bg-dark .molecule--contact-card .reveal-input textarea:not(:placeholder-shown) + label { color: var(--accent-cyan); opacity: 1; }
/* the send button = the hero's cyan button: size, white text, shine sweep, no colour hover */
.page-home #kontakt.bg-dark .molecule--contact-card .module--button,
.page-home #kontakt.bg-dark .molecule--contact-card .module--button:hover {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  background-color: var(--accent-cyan);
  border: 0;
  color: #ffffff;
}
.page-home #kontakt.bg-dark .molecule--contact-card .module--button::after { background-color: rgba(255, 255, 255, 0.3); }
.page-home .bg-dark .form-banner--success { background: rgba(0, 171, 214, 0.12); color: var(--accent-cyan); border-color: rgba(0, 171, 214, 0.35); }

/* --- footer: its own band in the contact's dark, split from it by a grey hairline
   (user, 2026-09-29) ------------------------------------------------------------------- */
.page-home #footer { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid rgba(232, 233, 243, 0.14); }
.footer-claim p { font-family: var(--font-headline); font-weight: 600; font-size: 20px; color: var(--bg-blue); }
.page-home #footer.bg-dark .footer-claim p { color: var(--bg-light); }
.page-home #footer .module--text p { line-height: 1.5; }
/* The claim takes the room it needs and the credit only its own width, so the claim stays on
   one line until the row is really full — not from ~1500px as the 1/3 column made it (user, 2026-10-02) */
@media (min-width: 768px) {
  .page-home #footer .row > .column--1-3 { flex: 1 1 auto; }
  .page-home #footer .row > .footer-credit-col { flex: 0 0 auto; }
}

/* --- buttons: the hero's shine sweep --------------------------------------------------- */
.page-home .module--button:not(.module--button--link) {
  position: relative;
  overflow: hidden;
  font-family: var(--font-headline);
  padding: 14px 32px 16px;
}
.page-home .module--button:not(.module--button--link)::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  transform: rotate(35deg);
  background-color: rgba(232, 233, 243, 0.35);
  pointer-events: none;
}
.page-home .module--button:not(.module--button--link):hover::after {
  left: 120%;
  transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}
/* --- text links: the hero's contact hover — no static underline, a 2px cyan line
   draws in from the left on hover (user, 2026-09-29) ------------------------------------- */
.page-home .module--button--link,
.page-home .contact-lines a,
.page-home .about-projects .molecule--card-basic .module--text a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent-cyan), var(--accent-cyan));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .module--button--link:hover,
.page-home .contact-lines a:hover,
.page-home .about-projects .molecule--card-basic .module--text a:hover { background-size: 100% 2px; }
.page-home .module--button--link:hover { color: var(--accent-cyan); background-color: transparent; border-color: transparent; }  /* the base .module--button:hover fills cyan — never on a link */
/* "Ozvěte se" reads exactly like the project addresses: body face, 16px, 600, cyan (user) */
.page-home .about-projects .module--button--link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--accent-cyan);
}
.page-home .contact-lines a:hover { color: var(--bg-light); }
.page-home .about-projects .molecule--card-basic .module--text a { color: var(--accent-cyan); font-weight: 600; }

/* --- motion: scroll reveal --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }


/* --- desktop ------------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .page-home { --card-pad: 36px; }
  .page-home .row { gap: var(--column-gap); }
  .section--big { padding-top: 120px; padding-bottom: 120px; }

  .page-home .module--headline h2, .page-404 .module--headline h1 { font-size: 44px; }
  .page-home .text-large p { font-size: 20px; }
  .section-head .column--2-3 { padding-top: 10px; }

  .rail {
    position: sticky;
    top: calc(var(--ticker-height) + var(--accent-line-height) + 32px);
    align-self: flex-start;
  }

  .molecule--pitch--inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 48px;
  }
  .molecule--pitch--inline .module--text { flex: 1 1 320px; }
  .molecule--pitch--inline .module--text + .module--button { margin-top: 0; }

  .page-home #kontakt .column--2-3 .module--text.text-large { max-width: 520px; }
  .footer-credit-col { align-items: flex-end; text-align: right; }
}

@media (min-width: 1100px) {
  .page-home .module--headline h2, .page-404 .module--headline h1 { font-size: 48px; }
  .module--headline--numeral p { font-size: 56px; }
  .page-home .module--headline--price h3 { font-size: 44px; }
}

/* --- @3 vitrina — poster slider ---------------------------------------------------------- */
/* Head: split weight — "Co jsem už" light, "postavil" bold (the reference); @3 right-aligned,
   then the nav bar's cyan rule at the same thickness. */
.module--headline--right { text-align: right; }
.module--headline--split h2 span, .module--headline--split h1 span { font-weight: 500; }
.module--headline--split h2 strong, .module--headline--split h1 strong { font-weight: 700; }
.module--divider--accent,
.page-home .bg-blue .module--divider--accent {      /* stays cyan on blue too */
  height: var(--accent-line-height);
  --divider-color: var(--accent-cyan);
  --divider-opacity: 1;
  margin-top: 8px;
}

/* Counter: eight dashes across the full width, under the rule and above the posters */
.module--mosaic--dots--full { width: 100%; }
.module--mosaic--dots--full .mosaic-row { width: 100%; }
.module--mosaic--dots--full .mosaic-tile { flex: 1 1 0; width: auto; }
.molecule--showcase .module--mosaic--dots { margin-bottom: 32px; }

/* One 700px poster per portfolio web; the full-page screenshot sits at the top
   and scrolls down by itself while hovered ("the page plays"), back up on leave.
   --per-view drives the card width; JS reads the rendered width for the offset. */
.molecule--showcase { --per-view: 1; --poster-h: 584px; position: relative; }
.showcase-stage { position: relative; }
.showcase-viewport { overflow: hidden; }
.showcase-track {
  display: flex;
  gap: var(--column-gap);
  will-change: transform;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.2, 1);   /* a slow glide: eases in, travels, eases out */
  touch-action: pan-y;
  user-select: none;
}
.showcase-track.is-jumping { transition: none; }
.module--image--poster {
  position: relative;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--column-gap)) / var(--per-view));
  height: var(--poster-h);
  aspect-ratio: auto;
  border: 0;
  border-radius: 10px;                 /* deviation from --radius 5px (user, 2026-09-21) */
  background: var(--bg-tint);
}
.module--image--poster > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: unset;
  transform: none;
  transition: transform 1.2s ease, opacity 0.5s ease;   /* the way back up · fade-in after the loader */
}
/* Images below the fold fade in only when whole (home.js, 2026-10-02): .img-fade is added by
   JS only to an image that is still arriving, so without JS nothing is hidden. A data-later
   image has no src until the second pass — hide the empty element meanwhile. */
.img-fade { opacity: 0; transition: opacity 0.5s ease; }
.img-fade.is-loaded { opacity: 1; }
img[data-later]:not([src]) { visibility: hidden; }

/* posters 4+ have no src until the second pass brings the full screenshot — hide the empty
   img (no alt text, no broken icon); the card's tint shows meanwhile (2026-10-02) */
.module--image--poster > img:not([src]) { visibility: hidden; }
/* hover scroll only once the full-height screenshot has replaced the top cut (data-full is
   removed on the swap) — the cut alone would scroll to its own end (2026-10-02) */
.module--image--poster:hover > img:not([data-full]) {
  transform: translateY(calc(var(--poster-h) - 100%));
  transition: transform var(--scroll-d, 8s) linear, opacity 0.5s ease; /* JS sets --scroll-d from the image height */
}

/* Side arrows: the @4 slider's arrow, taller than wide and bigger, centred in the gutter
   between the content area and the screen edge (the row is min(80%, 1464px) wide, so the
   gutter is max(10vw, (100vw - 1464px) / 2)). Style unchanged from .slider-arrow. */
.molecule--showcase {
  --gutter: max(10vw, (100vw - var(--container-max)) / 2);
  --arrow-w: 64px;
  --arrow-h: 104px;
}
.molecule--showcase .slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--arrow-w);
  height: var(--arrow-h);
  transform: translateY(-50%);
}
.molecule--showcase .slider-arrow svg { width: 32px; height: 32px; }
.molecule--showcase .slider-arrow--prev { left: calc(-1 * var(--gutter) / 2 - var(--arrow-w) / 2); }
.molecule--showcase .slider-arrow--next { right: calc(-1 * var(--gutter) / 2 - var(--arrow-w) / 2); }
.molecule--showcase .slider-arrow--prev:hover svg { transform: translateX(-2px); }
.molecule--showcase .slider-arrow--next:hover svg { transform: translateX(2px); }

@media (min-width: 768px) {
  .molecule--showcase { --per-view: 2; }   /* tablets: two posters (user, 2026-09-29) */
}
@media (min-width: 1024px) {
  .molecule--showcase { --per-view: 3; }
}
@media (max-width: 767px) {
  /* phones: the arrows leave the poster (they vanished on the screenshot) and sit at the two
     ends of the counter row — 40px squares centred on the 3px dash line (user, 2026-09-29) */
  .molecule--showcase { --arrow-w: 40px; --arrow-h: 40px; }
  .molecule--showcase .showcase-stage { position: static; }
  .molecule--showcase .module--mosaic--dots--full { width: auto; margin-left: 52px; margin-right: 52px; }
  .molecule--showcase .slider-arrow { top: 1.5px; }
  .molecule--showcase .slider-arrow--prev { left: 0; }
  .molecule--showcase .slider-arrow--next { right: 0; }
}

/* --- @6b / @6c detaily on stripes — copy2's icon cards on two cyan hatched bands ---------- */

/* Safety loader: the overlay's mini-mosaic, small and only while a card's image is not
   loaded yet (is-waiting) — never as a visual element on its own. The image fades in on load.
   During a move the cards ease back a touch so the travel reads (is-moving). */
/* while moving the cards pull back; on landing they grow back with a long soft ease */
.module--image--poster { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.showcase-track.is-moving .module--image--poster { transform: scale(0.94); transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.module--image--poster.is-waiting > img { opacity: 0; }
.poster-loader {
  --tile-w: 14px;
  --tile-h: 10px;
  --tile-gap: 4px;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tile-gap);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.module--image--poster.is-waiting .poster-loader { opacity: 1; }
.module--image--poster.is-waiting .poster-loader .mosaic-tile {
  animation: mosaic-loop 1.6s ease infinite;
  animation-delay: var(--loop-d, 0ms);
}

/* --- @1 features on blue: the hairline goes light ------------------------------------------ */
.page-home .bg-blue .molecule--feature { border-top-color: rgba(232, 233, 243, 0.28); }

/* --- @0 pruh — the nav bar mirrored: cyan line on top, the bar's blue below ---------------- */
.section--bar {
  padding: 0;
  height: calc(var(--ticker-height) + var(--accent-line-height));
  border-top: var(--accent-line-height) solid var(--accent-cyan);
  box-sizing: border-box;
}
/* @2 features: hairline below as well as above, 23px (18 + 5) off the text on both sides */
.page-home #mluvi-light .molecule--feature {
  padding-top: 23px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--line);
  flex: 1;                              /* equal heights, so the bottom lines align across the row */
}

/* @2 feature with an icon: icon on the left spanning the full height of headline + text
   (grid: icon in column 1 across headline + text, headline / text stacked in column 2).
   The icon box has a fixed width and the SVG is absolutely positioned inside it, so its
   height is the rows' height without relying on percentage heights resolving (which left
   the icon at 0 × 0 in a live browser). */
.molecule--feature--icon {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto 1fr;    /* headline, text, then slack — the icon spans the text only */
  column-gap: 20px;
}
.molecule--feature--icon .module--icon {
  grid-row: 1 / 3;
  position: relative;
  min-height: 48px;
  color: var(--bg-blue);
}
.molecule--feature--icon .module--icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                          /* drawn to fit: min(64px, rows height), centred */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.molecule--feature--icon .module--headline { grid-column: 2; }
.molecule--feature--icon .module--text { grid-column: 2; }

/* @balicky CTA "Nezávazná konzultace": blue instead of the dark default; hover stays cyan */
.page-home #cenik .molecule--pitch .module--button { --button-bg: var(--bg-blue); }

/* --- @7b reference — one testimonial, the reference layout ----------------------------- */
/* (head handled by the shared split-weight rule) */

.molecule--testimonial--author { display: flex; flex-direction: column; }
.molecule--testimonial--author .text-quote p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--bg-dark);
  opacity: 0.78;
}
.molecule--testimonial--author .module--divider {
  --divider-color: var(--bg-blue);
  --divider-opacity: 0.16;
  margin: 32px 0 30px;
}
.molecule--author {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
}
.molecule--author .module--headline { padding-bottom: 4px; align-self: end; }
.molecule--author .module--headline h3 { font-size: 18px; font-weight: 600; } /* names are H3 since 2026-10-02 (heading order) — look unchanged */
.molecule--author .module--aboveheadline { padding-bottom: 0; align-self: start; font-size: 11px; }

/* --- unified section heads (2026-09-22) ------------------------------------------------
   Every section: split-weight headline on a full row (light + bold), dark blue on light
   surfaces (light on blue), the cyan rule under it. Sides alternate section by section;
   on a right-headed section the lead / content column under the rule sits on the right too. */
.page-home .module--headline--split h2,
.page-404 .module--headline--split h1 { color: var(--bg-blue); }
.page-home .section--head-right .section-head .module--aboveheadline { text-align: right; }
.page-home .section--head-right > .row--continue > .column--2-3:only-child { margin-left: auto; }
.page-home #duvod > .row--continue > .column--2-3:only-child { margin-left: 0; }   /* @4: the lead starts in column 1 (user) */
/* the testimonial's quote: body face, not the @4 slider's blue headline face */
.molecule--testimonial--author .module--text:first-child p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--bg-dark);
  opacity: 0.78;
}
@media (min-width: 768px) {
  .molecule--testimonial--author .module--text:first-child p { font-size: 18px; line-height: 1.7; }
}

/* blue surfaces: the split headline is set on the h2 itself, so it needs its own light rule */
.page-home .bg-blue .module--headline--split h2 { color: var(--bg-light); }

/* a lone 2/3 column under a rule is a real 2/3 measure, not a full row (flex-basis 0 would
   let it grow across); right-headed sections push it to the right */
@media (min-width: 768px) {
  .page-home .section > .row--continue > .column--2-3:only-child { flex: 0 0 calc((100% - var(--column-gap)) * 2 / 3); }
}

/* @6 head: headline left, the portfolio button on the right, both above the rule */
.page-home #portfolio .section-head .column--1-1 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 24px;
}
.page-home #portfolio .section-head .module--button {
  --button-bg: var(--bg-blue);
  margin-bottom: var(--headline-padding-bottom);
  align-self: center;   /* centred on the headline's line, not bottom-aligned (2026-09-29) */
}
.page-home #portfolio .section-head .module--divider { grid-column: 1 / -1; }

/* @8 klienti on blue: quote and hairline go light, the monogram flips to cyan */
.page-home .bg-blue .molecule--testimonial--author .module--text:first-child p { color: var(--bg-light); opacity: 0.9; }
.page-home .bg-blue .molecule--testimonial--author .module--divider { --divider-color: var(--bg-light); --divider-opacity: 0.25; }

/* --- back to top — Divi-style floating square, bottom right; shows once the hero is passed -- */
.to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 80;                          /* under the portfolio overlay (100) and the Lab */
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-cyan);       /* cyan: stays visible over the blue sections too */
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, visibility 0s linear 0.35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* hover: no colour change — only the arrow moves: it flies out through the top edge and
   comes back in from below, looping while hovered (user, 2026-09-23) */
.to-top { overflow: hidden; }
.to-top:hover svg,
.to-top:focus-visible svg { animation: to-top-fly 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes to-top-fly {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-36px); }
  41%  { transform: translateY(36px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
/* phones: no back-to-top — it covered content (user, 2026-10-13) */
@media (max-width: 767px) {
  .to-top { display: none; }
}

/* --- @6 postup — six steps along a centre line, cards alternating sides ------------------ */
.postup-zigzag {
  position: relative;
  width: var(--container-width);
  max-width: var(--container-max);
  margin: var(--row-after-intro) auto 0;
}
.postup-zigzag__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 1px;
  background: var(--bg-blue);
  opacity: 0.16;
}
.postup-zigzag__step {
  position: relative;
  padding-left: 56px;
  margin-bottom: 24px;
  box-sizing: border-box;
}
.postup-zigzag__step::before {                 /* the marker on the line */
  content: "";
  position: absolute;
  top: 34px;
  left: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-cyan);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px rgba(8, 72, 135, 0.16);
  z-index: 2;
}
.page-home .molecule--zigzag-step {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: var(--radius);
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .molecule--zigzag-step:hover { border-color: var(--bg-blue); transform: translateY(-3px); }
.page-home .molecule--zigzag-step .module--headline--numeral { padding-bottom: 4px; }
.page-home .molecule--zigzag-step .module--headline--numeral p { font-size: 36px; }
.page-home .molecule--zigzag-step .module--headline h3 { font-size: 22px; line-height: 1.25; margin: 0; }
.page-home .molecule--zigzag-step .module--headline { padding-bottom: 10px; }
.page-home .molecule--zigzag-step .module--text p { font-size: 16px; line-height: 1.6; }

@media (min-width: 768px) {
  .postup-zigzag__line { left: 50%; transform: translateX(-0.5px); }
  .postup-zigzag__step { width: 50%; padding-left: 0; margin-bottom: 32px; }
  .postup-zigzag__step--left  { padding-right: 56px; }
  .postup-zigzag__step--right { margin-left: 50%; padding-left: 56px; }
  .postup-zigzag__step--left::before  { left: auto; right: -7px; }
  .postup-zigzag__step--right::before { left: -7px; }
  .page-home .molecule--zigzag-step { padding: 30px 34px 32px; }
  .page-home .molecule--zigzag-step .module--headline--numeral p { font-size: 40px; }
  .page-home .molecule--zigzag-step .module--headline h3 { font-size: 24px; }
}

/* --- @6 postup — scroll relay (2026-09-23) -----------------------------------------------
   Every card is awake all the time (the dimmed state was killing the section). What the
   scroll drives instead: the 2px spine fills, each connection point fills as the head
   reaches it, a hairline crosses the gutter and the card's own top edge draws cyan — and
   the cards float, drifting against each other as the section passes the viewport, so the
   motion has room to evolve over the whole scroll rather than snapping per card.
   Runs regardless of prefers-reduced-motion — it is the section's content, not decoration. */
.postup-zigzag--relay .postup-zigzag__fill {
  position: absolute;
  top: 0;
  left: 20px;
  width: 2px;                       /* the spine leads; every branch stays a hairline */
  margin-left: -0.5px;
  height: 100%;
  background: var(--accent-cyan);
  transform: scaleY(var(--relay, 0));
  transform-origin: 50% 0;
  will-change: transform;
}

/* the connection point — at the card's middle, and big enough to be a point */
.postup-zigzag--relay .postup-zigzag__step::before {
  top: 50%;
  margin-top: -11px;
  width: 22px;
  height: 22px;
  border-width: 5px;
  background: var(--bg-tint);
  box-shadow: 0 0 0 1px var(--line);
  transform: scale(0.72);
  transition: background-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}
.postup-zigzag--relay .postup-zigzag__step.is-lit::before {
  background: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(0, 171, 214, 0.25), 0 0 0 10px rgba(0, 171, 214, 0.12);
  transform: scale(1);
}

/* the hairline across the gutter, level with the point */
.postup-zigzag--relay .postup-zigzag__pipe {
  position: absolute;
  top: 50%;
  left: 20px;
  width: calc(36px + var(--reach, 0px));
  height: 1px;
  pointer-events: none;
  z-index: 0;
}
.postup-zigzag--relay .postup-zigzag__pipe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.postup-zigzag--relay .is-lit .postup-zigzag__pipe::before { transform: scaleX(1); transition-delay: 0.06s; }

/* the border runs all the way around the card the line is on now — entering where the arm
   lands, tracing the perimeter, and retracting the same way once the line moves on.
   Only one card carries it at a time; JS writes the path and its length per card. */
.postup-zigzag--relay .molecule--zigzag-step { position: relative; }
.postup-zigzag--relay .postup-zigzag__frame {
  position: absolute;
  inset: -1px;                      /* the border box, not the padding box — the stroke has to
                                       land on the base border, not beside it */
  width: calc(100% + 2px);          /* an <svg> with auto size falls back to 300x150 */
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.postup-zigzag--relay .postup-zigzag__frame path {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1;                  /* exactly the base border's weight, so it covers it */
  stroke-linecap: butt;
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 0.95s cubic-bezier(0.33, 0, 0.2, 1);
}
.postup-zigzag--relay .is-current .postup-zigzag__frame path {
  stroke-dashoffset: 0;
  transition-delay: 0.22s;
}

/* the cards fly — JS sets --float per card from its place in the viewport; the two sides
   drift against each other sideways, and --reach keeps the hairline attached as they move */
.postup-zigzag--relay .molecule--zigzag-step {
  background: var(--white);
  border: 1px solid var(--card-line); /* a complete outline — the base rule drops the top edge */
  box-shadow: 0 18px 40px rgba(8, 72, 135, 0.13);
  border-radius: var(--radius);
  transform: translateX(var(--float, 0px));
  transition: none;
  will-change: transform;
  z-index: 2;
}
/* the shared molecule lifts on hover — not in the relay, the scroll owns the motion here */
.postup-zigzag--relay .molecule--zigzag-step:hover {
  border-color: var(--card-line);
  transform: translateX(var(--float, 0px));
}

/* the steps stand well apart, so each hand-over has its own stretch of scroll */
.postup-zigzag--relay .postup-zigzag__step { margin-bottom: 48px; }

/* mobile: the spine starts on the headline rule's left edge (not 20px in), the cards keep
   the same 36px gutter to it, and the 22px points sit centred on the line (user, 2026-09-29) */
@media (max-width: 767.98px) {
  .postup-zigzag--relay .postup-zigzag__line { left: 0.5px; }
  .postup-zigzag--relay .postup-zigzag__fill { left: 0; margin-left: 0; }
  .postup-zigzag--relay .postup-zigzag__step { padding-left: 37px; }
  .postup-zigzag--relay .postup-zigzag__step::before { left: -10px; }
  .postup-zigzag--relay .postup-zigzag__pipe { left: 1px; }
}

@media (min-width: 768px) {
  /* no interlock any more — the cards stand apart so the line has time between them */
  .postup-zigzag--relay .postup-zigzag__step { margin-bottom: 0; }
  .postup-zigzag--relay .postup-zigzag__step + .postup-zigzag__step { margin-top: 75px; }

  .postup-zigzag--relay .postup-zigzag__fill { left: 50%; margin-left: -1px; }

  .postup-zigzag--relay .postup-zigzag__step--left::before  { left: auto; right: -11px; }
  .postup-zigzag--relay .postup-zigzag__step--right::before { left: -11px; }

  .postup-zigzag--relay .postup-zigzag__pipe { width: calc(56px + var(--reach, 0px)); }
  .postup-zigzag--relay .postup-zigzag__step--left .postup-zigzag__pipe  { left: auto; right: 0; }
  .postup-zigzag--relay .postup-zigzag__step--right .postup-zigzag__pipe { left: 0; }
  .postup-zigzag--relay .postup-zigzag__step--left .postup-zigzag__pipe::before { transform-origin: right center; }
  .postup-zigzag--relay .postup-zigzag__step--left .molecule--zigzag-step::before { transform-origin: right center; }
}

/* testimonials are always italic (user, 2026-09-22) — PJS italic 400 is loaded for it */
.page-home .molecule--testimonial .module--text:first-child p { font-style: italic; }

/* @6 postup at 80 % of the content width, centred (user: too dominant at full width) —
   desktop only; below 1024px the cards need the full width (user, 2026-09-29) */
@media (min-width: 1024px) {   /* was 960 — below 1024 the cards take the full width (user, 2026-09-29) */
  .postup-zigzag { max-width: calc(var(--container-max) * 0.8); width: calc(var(--container-width) * 0.8); }
}

/* --- @5 testimonials rotator: full texts, one shown, cross-fade; height = the tallest one
   (all stacked in one grid cell), so the section never jumps. Two dashes = indicator +
   progress; click to switch; 14s per quote, paused on hover. */
.molecule--testimonials { display: grid; }
.molecule--testimonials > .molecule--testimonial {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.7s;
  pointer-events: none;
}
.molecule--testimonials > .molecule--testimonial.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
.molecule--testimonials > .molecule--testimonial { align-self: start; }
.molecule--testimonials > .slider-controls { grid-area: 2 / 1; margin-top: 36px; }
.page-home .bg-blue .module--mosaic--dots .mosaic-tile { background: rgba(232, 233, 243, 0.25); }
.page-home .bg-blue .module--mosaic--dots .mosaic-tile:hover { background: rgba(232, 233, 243, 0.5); }
.page-home .bg-blue .module--mosaic--dots .mosaic-tile.is-active {
  background: linear-gradient(to right, var(--accent-cyan) var(--p, 0%), rgba(232, 233, 243, 0.6) var(--p, 0%));
}

/* @5 controls as in DEV1: arrow | real tiles | arrow, on blue */
.molecule--testimonials .slider-controls { margin-top: 36px; }
.module--mosaic--dots--tiles { --tile-w: 35px; --tile-h: 12px; --tile-gap: 10px; }
.module--mosaic--dots--tiles .mosaic-tile { border-radius: var(--radius); }
.page-home .bg-blue .slider-arrow { border-color: rgba(232, 233, 243, 0.3); color: var(--bg-light); }
.page-home .bg-blue .slider-arrow:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: var(--bg-dark); }

/* @2 trial (2026-09-22): green hairlines on the feature cards — a colour outside the closed
   palette; keep or retire after review */
.page-home { --green-trial: #83a93d; }
.page-home #mluvi-light .molecule--feature { border-top-color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }   /* cyan; green (#83a93d) tried before it */

/* @5 klienti — the client's photo in a 1/4 column left of the quote (2026-09-23). All three
   stacked in one grid cell, cross-fading with the active quote (home.js syncs is-active).
   Desktop: the photo stretches to the row's height (= the tallest quote), and the controls
   sit bottom-right on the author line, so their bottom edge meets the photo's. */
.klienti-photos { display: grid; }
.klienti-photos > .module--image--portrait {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.klienti-photos > .module--image--portrait.is-active { opacity: 1; transform: none; }
.klienti-photos > .module--image--portrait > img { object-position: center top; }
@media (max-width: 767px) {
  .klienti-photos { max-width: 320px; margin-bottom: 32px; }
}
@media (min-width: 768px) {
  #klienti .klienti-row { align-items: stretch; }
  #klienti .column--1-4,
  #klienti .column--3-4 { display: flex; flex-direction: column; }
  .klienti-photos { flex: 1; }
  .klienti-photos > .module--image--portrait { aspect-ratio: auto; height: 100%; }
  #klienti .molecule--testimonials { flex: 1; }
}
/* below 1280: the controls follow the active quote — right under its name (home.js sets
   --quote-h / --ctl-h). Every quote reserves the controls' room, so nothing jumps. */
@media (max-width: 1279px) {
  #klienti .molecule--testimonials > .molecule--testimonial { padding-bottom: calc(36px + var(--ctl-h, 48px)); }
  #klienti .molecule--testimonials > .slider-controls {
    grid-area: 1 / 1;
    align-self: start;
    margin-top: calc(var(--quote-h, 0px) + 36px);
    transition: margin-top 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
  }
}
/* the controls join the author line (bottom-right) only from 1280 — below that a long name
   or role ran into them, so they sit on their own row under the name (user, 2026-09-29) */
@media (min-width: 1280px) {
  #klienti .molecule--testimonials > .slider-controls {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
}
.page-home #klienti .molecule--author { display: flex; flex-direction: column; align-items: flex-start; }
.page-home #klienti .molecule--author > * { align-self: auto; }

/* @6 postup: the lead sits on the right, under the rule's right end (user, 2026-09-23) */
@media (min-width: 768px) {
  .page-home #spoluprace > .row--continue > .column--2-3:only-child { margin-left: auto; }
}
.page-home #spoluprace > .row--continue .text-large { text-align: right; }

/* --- @9 balíčky: "Základní SEO optimalizace" opens its ten points (2026-09-23) -----------
   The item is a button: cyan dotted underline + a small "+" tile that turns to ×. The card
   (module--popover) rises above the item on hover / focus / tap; its points stagger in.
   Hover is taken from the button (text + icon) only, not the whole row; the open card
   keeps itself open while the pointer is on it. */
.list-more { position: relative; }
.list-more__trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline dotted var(--accent-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.list-more__icon {
  position: relative;
  display: inline-block;
  vertical-align: -2px;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 3px;
  background: var(--accent-cyan);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.list-more__icon::before,
.list-more__icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 2px;
  background: #fff;
}
.list-more__icon::after { transform: rotate(90deg); }
.list-more__trigger:hover .list-more__icon,
.list-more:has(.module--popover:hover) .list-more__icon,
.list-more.is-open .list-more__icon,
.list-more__trigger:focus-visible .list-more__icon { transform: rotate(45deg); }

.module--popover {
  position: absolute;
  left: -12px;
  bottom: calc(100% + 14px);
  z-index: 5;
  width: min(340px, calc(100vw - 40px));
  padding: 22px 24px 24px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-color);
  box-shadow: 0 18px 50px rgba(0, 15, 8, 0.18), 0 0 0 1px rgba(6, 6, 6, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  pointer-events: none;
}
/* a hover bridge across the 14px gap, so the pointer can travel into the card */
.module--popover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.list-more__trigger:hover + .module--popover,
.module--popover:hover,
.list-more.is-open .module--popover,
.list-more:focus-within .module--popover {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
.module--popover .module--aboveheadline { padding-bottom: 12px; }
.module--popover .module--aboveheadline p { color: var(--accent-cyan); }
.molecule--price-card .module--popover .module--list { margin-top: 0; padding-top: 0; border-top: 0; }
.module--popover .module--list--tiles li { font-size: 14px; line-height: 1.45; padding-left: 24px; }
.module--popover .module--list--tiles li + li { margin-top: 7px; }
.module--popover .module--list--tiles li::before { top: 0.4em; width: 14px; height: 9px; border-radius: 3px; }
.module--popover li { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.list-more__trigger:hover + .module--popover li,
.module--popover:hover li,
.list-more.is-open .module--popover li,
.list-more:focus-within .module--popover li { opacity: 1; transform: none; }
.module--popover li:nth-child(2)  { transition-delay: 0.03s; }
.module--popover li:nth-child(3)  { transition-delay: 0.06s; }
.module--popover li:nth-child(4)  { transition-delay: 0.09s; }
.module--popover li:nth-child(5)  { transition-delay: 0.12s; }
.module--popover li:nth-child(6)  { transition-delay: 0.15s; }
.module--popover li:nth-child(7)  { transition-delay: 0.18s; }
.module--popover li:nth-child(8)  { transition-delay: 0.21s; }
.module--popover li:nth-child(9)  { transition-delay: 0.24s; }
.module--popover li:nth-child(10) { transition-delay: 0.27s; }
/* the open card's column rises above its neighbours (reveal transforms make stacking contexts) */
#cenik .column:has(.list-more__trigger:hover),
#cenik .column:has(.module--popover:hover),
#cenik .column:has(.list-more.is-open),
#cenik .column:has(.list-more:focus-within) { position: relative; z-index: 3; }

/* @9 the footnote under the price cards (user, 2026-09-23) */
.page-home .pricing-note { margin-top: 24px; }
.page-home .pricing-note .module--text p { font-size: 13px; line-height: 1.5; opacity: 0.6; font-style: italic; }

/* a one-line bubble (contact form note): sized to its text */
.module--popover--text { width: max-content; max-width: min(320px, calc(100vw - 40px)); padding: 16px 20px; }
.module--popover--text .module--text p { font-size: 14px; line-height: 1.45; }
/* @9 balíčky: headline left → subtitle right (the subtitle rule) */
@media (min-width: 768px) {
  .page-home #cenik > .row--continue > .column--2-3:only-child { margin-left: auto; }
}
.page-home #cenik > .row--continue .text-large { text-align: right; }
.module--popover--text .module--text p + p { margin-top: 10px; }

/* Výkonný: "od" before the price (user, 2026-09-24) */
.price-from { font-size: 0.5em; font-weight: 600; letter-spacing: 0; margin-right: 4px; vertical-align: 0.15em; }

/* audit 2026-09-24: the "+" never wraps alone (last word + icon glued), the price never breaks */
.list-more__tail { white-space: nowrap; }
.page-home .module--headline--price h3 { white-space: nowrap; }

/* --- hero State C (konzultace): "Kdy se vám hodí zavolat?" as radio buttons — a cyan ring,
   the chosen one gets a cyan dot; the native radio sits underneath, keyboard works.
   (Tile-like choices tried first — they competed with the submit button, user 2026-09-29) --- */
.reveal-choice { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.reveal-choice legend {
  width: 100%;
  margin-bottom: 13px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-color);
  opacity: 0.45;
}
.reveal-choice label { position: relative; cursor: pointer; }
.reveal-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reveal-choice span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-color);
}
.reveal-choice span::before {
  content: "";
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--accent-cyan);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-cyan) 0 3.5px, transparent 4px) center / 0 0 no-repeat;
  transition: background-size 0.2s ease;
}
.reveal-choice input:checked + span::before { background-size: 100% 100%; }
.reveal-choice input:focus-visible + span::before { outline: 2px solid var(--bg-blue); outline-offset: 2px; }
/* phone + e-mail side by side, so the konzultace card is no taller than the poptávka card and
   both headlines start at the same height (desktop; stacked on mobile) */
.reveal-pair { display: grid; gap: inherit; }
@media (min-width: 961px) {
  .reveal-pair { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
/* the konzultace button under the times, 15px further down (user, 2026-09-29) */
#konzultace-form .btn--submit { margin-top: 15px; }

/* every message field (hero poptávka + konzultace, @12): the textarea is inline-block by
   default, so in Chrome/Edge it sits on the text baseline and leaves a gap under it — the
   focus line (bottom: 0) then ran below the grey hairline. Firefox never showed it. */
.page-home .reveal-input textarea { display: block; }

/* --- menu: the item of the section on screen is cyan (scroll spy, home.js) ------------------ */
#menu a.is-current { color: var(--accent-cyan); }

/* --- logo: mark 20 "Vystoupení" before the name (2026-09-29) ------------------------------- */
.page-home #header .logo { display: inline-flex; align-items: center; gap: 12px; }
.page-home #header .logo__mark { width: 42px; height: auto; flex-shrink: 0; }
/* "webdesignér" under the name — the aboveheadline voice: small caps, cyan (2026-09-29).
   Tried and dropped the same day: green lowercase, "webdesign & vývoj", sales add-ons. */
.page-home #header .logo__text { display: flex; flex-direction: column; gap: 5px; }
.page-home #header .logo__role {
  font-family: var(--font-headline);   /* body face tried 2026-09-29 — rejected */
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 233, 243, 0.6);   /* grey = the light text colour at 60 % on the blue bar */
}

/* --- "Zobrazit celé portfolio" (@4) and "Konzultace zdarma" (@9) = the hero's blue .btn--primary
   1:1 — 49px tall, white text, no colour change on hover, the blue-tinted shine sweep (2026-09-29) --- */
.page-home #portfolio .section-head .module--button,
.page-home #cenik .module--button[data-open-konzultace],
.page-404 .section-404 .module--button {
  padding: 14px 32px 16px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  background-color: var(--bg-blue);
  border: 0;
  color: #ffffff;
  transition: none;
}
.page-home #portfolio .section-head .module--button:hover,
.page-home #cenik .module--button[data-open-konzultace]:hover,
.page-404 .section-404 .module--button:hover {
  background-color: var(--bg-blue);
  color: #ffffff;
}
.page-home #portfolio .section-head .module--button::after,
.page-home #cenik .module--button[data-open-konzultace]::after,
.page-404 .section-404 .module--button::after {
  background-color: rgba(127, 168, 207, 0.35);
  transition: left 715ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* phones: no "Zobrazit celé portfolio" button in the @4 head — it crowded the headline (user) */
@media (max-width: 767px) {
  .page-home #portfolio .section-head .module--button { display: none; }
}

/* phones: every section head and subtitle aligns left — the left/right alternation is a
   desktop device (user, 2026-09-29) */
@media (max-width: 767px) {
  .page-home .module--headline--right,
  .page-home .section--head-right .section-head .module--aboveheadline,
  .page-home #spoluprace > .row--continue .text-large,
  .page-home #cenik > .row--continue .text-large { text-align: left; }
  .page-home .section--head-right > .row--continue > .column--2-3:only-child { margin-left: 0; }
}

/* --- menu: hamburger below 1280 (user, 2026-09-29). style.css switches to the inline bar at
   768 for every page; the homepage keeps the phone panel up to 1279 — five links + the CTA
   need the room. Mirrors the ≤767 rules of style.css. ---------------------------------- */
@media (min-width: 768px) and (max-width: 1279px) {
  .page-home .hamburger { display: flex; }
  .page-home #menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    padding: 18px 24px 22px;
    background-color: var(--bg-blue);
    border-bottom: var(--accent-line-height) solid var(--accent-cyan);
  }
  .page-home #menu.is-open { display: block; }
  .page-home #menu ul { flex-direction: column; align-items: stretch; gap: 14px; }
  .page-home #menu .menu-cta { margin-top: 4px; }
  .page-home #menu .menu-cta a { width: 100%; text-align: center; }
}

/* --- @5 klienti below 1280: the tall photo column goes (too narrow on laptops, lost above the
   quote on phones); instead a round cut-out of the client's face sits next to the name.
   From 1280 the photo column is back and the avatars hide (user, 2026-09-29). ------------- */
.module--image--avatar { display: none; }
@media (max-width: 1279px) {
  #klienti .klienti-row > .column--1-4 { display: none; }
  #klienti .klienti-row > .column--3-4 { flex: 1 1 100%; width: 100%; max-width: none; }
  .page-home #klienti .molecule--author {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 18px;
    align-items: center;
    align-content: center;
  }
  .page-home #klienti .molecule--author > .module--image--avatar {
    display: block;
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--accent-cyan);
  }
  .page-home #klienti .module--image--avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;   /* square face crops in images/testimonials/avatars/ */
  }
  .page-home #klienti .molecule--author > .module--headline { align-self: end; padding-bottom: 4px; }
  .page-home #klienti .molecule--author > .module--aboveheadline { align-self: start; }
}

/* ==========================================================================
   404 page (2026-10-02) — one section between the bar and the footer. The page's one heading is
   an H1 dressed exactly like the section heads (it joins their rules above); the bare h1 rules
   from the landing page must not reach it. The page fills the screen so the footer sits low.
   ========================================================================== */
.page-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-404 main { flex: 1; display: flex; flex-direction: column; }
.page-404 .section-404 { flex: 1; }   /* white to the footer — no page bg showing between */
.page-404 .module--headline h1 { margin: 0; font-weight: 600; text-transform: none; }