/* ==========================================================================
   1961 studio — design system
   Figma: H69Wi6Fan6B1qVWMDyW20G (home 128:13, case study 520:53)
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Hellix (licencovaný rez) — self-hosted woff2 v /fonts. Iné písmo web
   nepoužíva, aj drobné popisky idú v Hellixe.                               */
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hellix';
  src: url('../fonts/Hellix-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* colour */
  --bg:          #08070c;
  --bg-tile:     #110f1c;
  --cream:       #eee9e3;
  --pink:        #aa92ff;
  --maroon:      #1f0846;
  --lime:        #d7e866;   /* značková farba klienta, nie súčasť palety */
  --surface:     #0c0a14;   /* podklad pod obrázkami a placeholdermi */
  --surface-2:   #0e0c18;
  --pink-soft:   #e8e1ff;
  --cream-90: rgba(238,233,227,.9);
  --cream-70: rgba(238,233,227,.7);
  --cream-60: rgba(238,233,227,.6);
  --cream-50: rgba(238,233,227,.5);
  --cream-40: rgba(238,233,227,.4);
  --cream-30: rgba(238,233,227,.3);
  --cream-12: rgba(238,233,227,.12);
  --dark-12:  rgba(8,7,12,.12);
  --dark-70:  rgba(8,7,12,.7);
  /* závoje nad fotkou v hero a v paneli About */
  --hairline:    rgba(238,233,227,.2);   /* deliaca linka nad logami klientov */
  /* Výplne tlačidiel sú plné, nie priesvitné — zodpovedajú 12 % krému
     na podklade stránky, resp. na obrátenej karte. */
  --btn-fill:        #242226;
  --btn-fill-invert: #d2cec9;
  --scrim-hero:  rgba(8,7,12,.78);
  --scrim-panel: rgba(8,7,12,.86);
  --footer-gradient: linear-gradient(180deg, #1f0846 0%, #3d2971 50%, #5f4a9e 75%, #aa92ff 100%);
  /* Recent projects nadväzuje na pätičku, preto ide vlastným gradientom —
     v svetlom režime svetlým, aby na ňom tmavé písmo čítalo. */
  --recent-bg: var(--footer-gradient);
  --recent-media: var(--bg);

  /* type */
  --font-sans: 'Hellix', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Web používa jediné písmo. Premenná ostáva, aby sa drobné popisky dali
     kedykoľvek prepnúť na iný rez bez prepisovania desiatok pravidiel. */
  --font-mono: var(--font-sans);

  /* layout */
  /* Bočný okraj. Figma mala 100 px pri 1600 (6,25vw), čo na bežnom
     notebooku ukrajuje priveľa. Užší raster dáva obsahu viac miesta:
     pri 1440 vyjde 60 px, pri 1728 (16") 72 px, pri 2560 (27" 5K) 107 px.
     Pomer okraja k šírke okna je tak všade rovnaký — 4,17 %. */
  --page-x: clamp(20px, 4.17vw, 112px);
  /* Strop šírky obsahu. Figma kreslila 1400 px, lenže na 16" notebooku
     (1728 px) to necháva po stranách 164 px namiesto ~65 px, ktoré má
     outloud — obsah tam nie je orezaný, len odsadený. Strop je posunutý
     tak, aby sa neuplatnil ani na 27" 5K displeji (2560 px). */
  --maxw: 2400px;
  --col-label: 237px;          /* label column used across the design */
  --gap: 20px;
  --logo-s: .69;    /* spoločné škálovanie log klientov */

  /* Metriky fontu pre vertikálny trim (z TTF, unitsPerEm 1000).
     Hellix: ascender 938, descender 221, capHeight 700. */
  --lh: 1.6;
  --f-content: 1.159;   /* (asc + desc) / upm — výška „normal“ riadku */
  --f-capgap:  0.238;   /* (asc - capHeight) / upm — medzera nad verzálkou */
  --f-desc:    0.221;   /* desc / upm — dotiahy pod účiarou */
  --f-cap:     0.700;   /* capHeight / upm — výška verzálky */
  /* Podklad stránky, ktorý sa pri prelievaní mení — mimo neho je to `--bg`. */
  --bg-now: var(--bg);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* fluid type scale (design px @1600 → responsive) */
  --fs-display: clamp(36px, 4.5vw, 72px);
  --fs-h1:      clamp(28px, 2.9vw, 46px);
  --fs-h2:      clamp(24px, 2vw, 32px);
  --fs-h3:      clamp(20px, 1.5vw, 24px);
  --fs-body-lg: clamp(20px, 1.75vw, 28px);
  --fs-nav:     clamp(18px, 1.375vw, 22px);
  --fs-body:    clamp(17px, 1.35vw, 20px);   /* čitateľnejší základ, 19,4 px pri 1440 */
  --fs-mono:    14px;
  --fs-mono-sm: 12px;
  --fs-contact: clamp(24px, 2.75vw, 44px);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Podkladová farba patrí koreňu, nie <body> — <body> je priehľadné, takže
     sa farba nesie cez celý dokument aj pod pretiahnutým obsahom. */
  background-color: var(--bg);
}
body {
  margin: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  --lh: 1.6; line-height: var(--lh);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* padding 1px 6px je predvolený štýl prehliadača pre <button> — bez jeho
   vynulovania by segmenty tlačidla nelícovali na doraz */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* označený text — značková ružová na 90 % krytí */
::selection { background: rgba(170, 146, 255, .9); color: var(--cream); }
::-moz-selection { background: rgba(170, 146, 255, .9); color: var(--cream); }

/* --- Helpers -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--page-x) * 2);
  margin-inline: auto;
  padding-inline: var(--page-x);
}
.section { padding-block: clamp(60px, 6.25vw, 100px); }

/* --- Vertikálny trim ------------------------------------------------------
   Figma orezáva textový rám na verzálku a účiaru (text-box-trim: trim-both,
   text-box-edge: cap alphabetic), takže riadok nemá polovičné prestupy.
   Bez toho je každý riadok vyšší a odsadenia nesedia na dizajn.
   Moderné prehliadače to vedia natívne; inde sa to dopočíta zo skutočných
   metrík fontu (capsize) — preto sú --f-* premenné.                        */
.trim,
.hero__claim, .scroll-hint, .lead,
.stat__num, .stat__label,
.work-card__title, .card__title, .card__sub,
.programs__title, .about__title, .about__text, .contact__title,
.founder__name, .founder__role,
.footer__contact a, .footer__contact > span, .footer__legal p,
.cs-hero__title, .cs-panel__text, .cs-review__quote,
.credit-row__name, .recent__title,
.tag, .chip, .btn__label, .mono,
.nav a, .nav-menu__trigger, .nav-drawer__list a,
.arrow-link {
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  .trim::before,
  .hero__claim::before, .scroll-hint::before, .lead::before,
  .stat__num::before, .stat__label::before,
  .work-card__title::before, .card__title::before, .card__sub::before,
  .programs__title::before, .about__title::before, .about__text::before,
  .contact__title::before,
  .founder__name::before, .founder__role::before,
  .footer__contact a::before, .footer__contact > span::before, .footer__legal p::before,
  .cs-hero__title::before, .cs-panel__text::before, .cs-review__quote::before,
  .credit-row__name::before, .recent__title::before,
  .tag::before, .chip::before, .btn__label::before, .mono::before,
  .nav a::before, .nav-menu__trigger::before, .nav-drawer__list a::before,
  .arrow-link::before {
    content: '';
    display: table;
    margin-bottom: calc((var(--f-content) - var(--lh)) / 2 * 1em - var(--f-capgap) * 1em);
  }
  .trim::after,
  .hero__claim::after, .scroll-hint::after, .lead::after,
  .stat__num::after, .stat__label::after,
  .work-card__title::after, .card__title::after, .card__sub::after,
  .programs__title::after, .about__title::after, .about__text::after,
  .contact__title::after,
  .founder__name::after, .founder__role::after,
  .footer__contact a::after, .footer__contact > span::after, .footer__legal p::after,
  .cs-hero__title::after, .cs-panel__text::after, .cs-review__quote::after,
  .credit-row__name::after, .recent__title::after,
  .tag::after, .chip::after, .btn__label::after, .mono::after,
  .nav a::after, .nav-menu__trigger::after, .nav-drawer__list a::after,
  .arrow-link::after {
    content: '';
    display: table;
    margin-top: calc((var(--f-content) - var(--lh)) / 2 * 1em - var(--f-desc) * 1em);
  }
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  /* Bez verzálok netreba prestrkanie — malé písmená držia rytmus samy. */
  letter-spacing: 0;
  --lh: 1.6; line-height: var(--lh);
}
.mono--sm { font-size: var(--fs-mono-sm); }
.dim   { color: var(--cream-40); }
.dim-3 { color: var(--cream-30); }
.pink  { color: var(--pink); }
.rule { height: 1px; border: 0; margin: 0; background: var(--cream-12); }

/* Two column "label + content" grid used all over the design */
.split {
  display: grid;
  grid-template-columns: var(--col-label) 1fr;
  gap: 0;
  align-items: start;
}
.split > .split__label { padding-top: .5em; }

/* Lead odsek — vyfarbovanie riadené scrollom.
   Slovo prejde zo stlmenej šedej cez ružový vrchol do plnej krémovej,
   takže po texte beží mäkká vlna. --t (0–1) nastavuje JS podľa toho,
   kde je odsek vo viewporte. Bez JS ostane text rovno v koncovej farbe. */
.lead {
  font-size: var(--fs-h1);
  --lh: 1.4; line-height: var(--lh);
  letter-spacing: -.02em;
  color: var(--cream);

  --lead-mid: var(--pink);
  --lead-lit: var(--cream);
  /* Východzia hodnota patrí odseku, nie znaku — vďaka tomu ju vieme
     nastaviť aj na obale riadku a znaky ju zdedia. Na telefóne tak stačí
     prepísať päť premenných namiesto dvoch stoviek. */
  --t: 0;
}
/* Rovnaká vlna beží aj v case study textoch — premenné aj farbenie preto
   visia na `[data-text-reveal]`, nielen na lead odseku. */
[data-text-reveal] {
  --lead-dim: var(--lead-dim-base, rgba(238, 233, 227, .22));
  --lead-mid: var(--pink);
  --lead-lit: var(--cream);
  --t: 0;
}
.lead .wd,
[data-text-reveal] .wd { white-space: nowrap; }   /* slovo sa neláme po znakoch */
.lead .w,
[data-text-reveal] .w {
  color: color-mix(in oklab,
      color-mix(in oklab, var(--lead-dim), var(--lead-mid) calc(clamp(0, var(--t) * 2, 1) * 100%)),
      var(--lead-lit) calc(clamp(0, (var(--t) - .5) * 2, 1) * 100%));
}
@supports not (color: color-mix(in oklab, red, blue 50%)) {
  /* staršie prehliadače: aspoň plynulé odkrytie */
  .lead .w,
  [data-text-reveal] .w { color: var(--cream); opacity: calc(.28 + var(--t) * .72); }
}
@media (prefers-reduced-motion: reduce) {
  .lead .w,
  [data-text-reveal] .w { --t: 1 !important; }
}

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  --lh: 1.6; line-height: var(--lh);
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--cream-12);
  color: var(--cream);
  white-space: nowrap;
}
.tag--dim { color: var(--cream-40); }
.tag--soft { color: var(--cream-70); }
.tag--pink { background: rgba(170,146,255,.2); color: var(--pink); }
.tag--pink-round { border-radius: 40px; }

/* Split button: round icon + label block */
.btn {
  display: inline-flex;
  align-items: center;
  /* Ako položka stĺpcového flexu by sa tlačidlo roztiahlo na celú šírku
     rodiča (karta v Programs, panel About). Obsah je vľavo, takže by to
     nebolo vidieť — ale bublina odsadená k pravému okraju áno: odskočila by
     do prázdna. `fit-content` prebije natiahnutie, lebo to platí len pri
     `auto` rozmere. */
  width: fit-content;
  max-width: 100%;
  transition: transform .25s ease;
}
/* bez nadvihnutia — pohyb nahor sme z hoverov odstránili */
.btn__icon {
  display: grid; place-items: center;
  background: var(--pink);
  border-radius: 999px;
  padding: 16px;
  flex: none;
  transition: transform .35s ease;
}
/* Bublina pri prejdení myšou preskočí na druhú stranu: pôvodná sa scvrkne
   na mieste, na opačnom konci narastie jej dvojička (dopĺňa ju JS) a text sa
   posunie do uvoľneného miesta. Šírka tlačidla sa nemení — dvojička je
   odsadená absolútne, takže si nepýta vlastné miesto v rade. */
.btn { position: relative; }
/* Poradie je vždy rovnaké: najprv sa scvrkne bublina, ktorá odchádza, potom
   sa presunie text a až nakoniec narastie bublina na druhej strane. Aby to
   platilo aj pri odchode kurzora, nesie oneskorenie premenná `--d`: v pokoji
   ho má strana, ktorá vtedy dorastá, pri hoveri sa role vymenia. Bez toho
   pri odchode kruh narástol ešte nad posunutým textom a prekryl ho. */
.btn__icon { transition: transform .38s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.btn__icon img { transition: transform .45s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.btn__label { transition: transform .45s cubic-bezier(.22, 1, .36, 1) .08s; }
.btn__icon--in  { --d: .18s; }
.btn__icon--out { --d: 0s; }
.btn:hover .btn__icon--in,
.btn:focus-visible .btn__icon--in,
.card:hover .btn__icon--in  { --d: 0s; }
.btn:hover .btn__icon--out,
.btn:focus-visible .btn__icon--out,
.card:hover .btn__icon--out { --d: .18s; }
.btn__icon--out {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
}
.btn__icon--out img { transform: rotate(-90deg); }
/* Karta v sekcii Programs je klikateľná celá, takže jej hover riadi aj
   tlačidlo vnútri — inak by dlaždica reagovala, ale bublina nie. */
.btn:hover .btn__icon--in,
.btn:focus-visible .btn__icon--in,
.card:hover .btn__icon--in { transform: scale(0); }
.btn:hover .btn__icon--in img,
.btn:focus-visible .btn__icon--in img,
.card:hover .btn__icon--in img { transform: rotate(90deg); }
.btn:hover .btn__icon--out,
.btn:focus-visible .btn__icon--out,
.card:hover .btn__icon--out { transform: translateY(-50%) scale(1); }
.btn:hover .btn__icon--out img,
.btn:focus-visible .btn__icon--out img,
.card:hover .btn__icon--out img { transform: rotate(0deg); }
.btn:hover .btn__label,
.btn:focus-visible .btn__label,
.card:hover .btn__label { transform: translateX(calc(var(--btn-shift, 0px) * -1)); }

/* bez dvojičky (JS nebeží alebo je vypnutý pohyb) ostáva pôvodné otočenie */
.btn:not(:has(.btn__icon--out)):hover .btn__icon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .btn__icon, .btn__label, .btn__icon img { transition: none; }
}
.btn__icon img { width: 19px; height: 19px; }
.btn__label {
  display: inline-block;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--btn-fill);
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.btn--sm .btn__icon { padding: 10px; }
.btn--sm .btn__label {
  display: inline-block;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--maroon);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--cream);
}
.btn--ghost .btn__icon { padding: 13px; background: var(--pink); }
.btn--ghost .btn__label {
  display: inline-block;
  padding: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}
.btn--mini { gap: 4px; }
.btn--mini .btn__icon {
  padding: 7px; width: 34px; height: 34px;
  background: var(--btn-fill); border-radius: var(--radius-sm);
}
.btn--mini .btn__label {
  display: inline-block;
  padding: 12px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-mono);
}
.card--light .btn--mini .btn__icon,
.card--light .btn--mini .btn__label { background: var(--btn-fill-invert); color: var(--bg); }

/* Arrow link (case study) */
.arrow-link { display: inline-flex; align-items: center; gap: 12px; }
.arrow-link img { width: 20px; height: 20px; transition: transform .25s ease; }
.arrow-link:hover img { transform: translateX(3px); }

/* ==========================================================================
   Preloader — celý beh trvá 2,8 s.
   Na úvode je vidieť len tmavá — fialová rastie zákryte pod ňou a ukáže sa
   až v závere, keď tmavá odíde hore.
     0,24–0,70 s  tmavá plocha narastie od spodnej hrany nahor
                  (fialová rastie s ňou, skrytá pod ňou)
     0,84–1,74 s  logo sa otočí o 180° s miernym prešvihnutím
     2,02–2,21 s  logo vyfade
     2,13–2,58 s  tmavý panel odchádza hore a odkryje fialovú
     2,41–2,60 s  fialový panel sa strhne a odíde za ním
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}
.preloader[data-done='true'] { display: none; }

/* Animácie štartujú až po prvom vykreslení — spúšťa ich JS triedou na <body>.
   Bez toho beží hodina animácie už od spracovania CSS, takže kým prehliadač
   dokreslí prvý snímok (fonty, obrázky), je preloader už v polovici a
   na obrazovke to vyzerá ako skok. */
.preloader__panel,
.preloader__logo { animation-play-state: paused; }
body[data-preloader='run'] .preloader__panel,
body[data-preloader='run'] .preloader__logo { animation-play-state: running; }

.preloader__panel {
  position: absolute;
  inset: 0;
  will-change: transform, clip-path;
  /* na začiatku je panel orezaný na nulovú výšku pri spodnej hrane —
     nábeh ho odtiaľ „vytiahne“ nahor, nie posunie ako celok */
  clip-path: inset(100% 0 0 0);
}
.preloader__panel--pink {
  z-index: 1;
  background: var(--pink);
  animation: preloader-pink 2.8s forwards;
}
.preloader__panel--base {
  z-index: 2;
  background: var(--bg);
  display: grid;
  place-items: center;
  animation: preloader-base 2.8s forwards;
}

.preloader__logo {
  width: 58px;
  height: 40px;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: 0;
  animation: preloader-logo 2.8s forwards;
}
.preloader__logo img { width: 100%; height: 100%; }

/* Fialová: pri nábehu rastie presne s tmavou, takže spod nej nevykukne —
   na úvode je vidieť len tmavá. Ukáže sa až na konci, keď tmavá odíde. */
@keyframes preloader-pink {
  0%, 8.5% { clip-path: inset(100% 0 0 0); transform: translateY(0);
             animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  25%      { clip-path: inset(0 0 0 0);    transform: translateY(0);
             animation-timing-function: linear; }
  86%      { clip-path: inset(0 0 0 0);    transform: translateY(0);
             animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  93%, 100% { clip-path: inset(0 0 0 0);   transform: translateY(-100%); }
}

/* Tmavá: rovnaký nárast zdola, len s odstupom — a odchádza skôr,
   takže fialová je vidieť na začiatku aj na konci. */
@keyframes preloader-base {
  0%, 8.5% { clip-path: inset(100% 0 0 0); transform: translateY(0);
             animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  25%      { clip-path: inset(0 0 0 0);    transform: translateY(0);
             animation-timing-function: linear; }
  76%      { clip-path: inset(0 0 0 0);    transform: translateY(0);
             animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  92%, 100% { clip-path: inset(0 0 0 0);   transform: translateY(-100%); }
}

/* Logo: nádych, otočka o 180° s prešvihnutím na 190° a dosadnutím späť. */
@keyframes preloader-logo {
  0%, 25% {
    opacity: 0;
    transform: rotate(0deg) scale(.8);
    animation-timing-function: cubic-bezier(.2, .9, .3, 1);
  }
  30% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .2, 1);   /* švih otočky */
  }
  57% {
    transform: rotate(190deg) scale(1);                        /* prešvihne */
    animation-timing-function: cubic-bezier(.25, 1.4, .45, 1); /* dosadne späť */
  }
  62% {
    opacity: 1;
    transform: rotate(180deg) scale(1);
    animation-timing-function: linear;
  }
  72% {
    opacity: 1;
    transform: rotate(180deg) scale(1);
    animation-timing-function: cubic-bezier(.4, 0, .8, .4);
  }
  79%, 100% {
    opacity: 0;
    transform: rotate(180deg) scale(.9);
  }
}

/* Zámok scrollu kým beží preloader. Odomkne ho JS, ale poistkou je aj
   odložená animácia — keby JS z akéhokoľvek dôvodu nedobehol, scroll sa
   vráti sám po 2,4 s. Stránka nesmie ostať zamknutá. */
body[data-loading='true'] {
  overflow-y: hidden;
  animation: unlock-scroll 0s 3.2s forwards;
}
@keyframes unlock-scroll { to { overflow-y: auto; } }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .preloader__panel, .preloader__logo { animation: none; }
}

/* ==========================================================================
   v2 — prechody medzi stránkami
   Rovnaké panely ako preloader, len iný rozvrh: pri odchode plocha narastie
   zdola, na novej stránke sa zhora odsunie. Vďaka tomu je z piatich
   samostatných stránok jeden celok a nikde nepreblikne biele okno.
   ========================================================================== */

/* Na stránke, na ktorú sme prišli cez prechod, sa nehrá celý preloader —
   panely už držia obrazovku a len odídu hore. */
html[data-pt='reveal'] .preloader__logo { display: none; }
html[data-pt='reveal'] .preloader__panel { clip-path: inset(0 0 0 0); }
html[data-pt='reveal'] .preloader__panel--base { animation: pt-reveal .52s cubic-bezier(.7, 0, .2, 1) forwards; }
html[data-pt='reveal'] .preloader__panel--pink { animation: pt-reveal .46s .1s cubic-bezier(.55, 0, .15, 1) forwards; }

@keyframes pt-reveal {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

/* Odchod zo stránky — plocha narastie zdola, fialová vedie. */
.preloader[data-pt-mode='leave'] { display: block !important; }
.preloader[data-pt-mode='leave'] .preloader__logo { display: none; }
.preloader[data-pt-mode='leave'] .preloader__panel--pink {
  animation: pt-leave .42s cubic-bezier(.16, 1, .3, 1) forwards;
}
.preloader[data-pt-mode='leave'] .preloader__panel--base {
  animation: pt-leave .42s .07s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes pt-leave {
  from { clip-path: inset(100% 0 0 0); transform: translateY(0); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

/* ==========================================================================
   v2 — sústredenie na kartu pod kurzorom
   Rovnaký princíp ako v navigácii: zvýrazni jedno, stlm zvyšok.
   ========================================================================== */
/* Stlmenie ostatných kariet ostáva len na prehľade projektov. Na homepage
   sú tri case studies veľké plochy — ich stlmovanie pôsobilo rušivo. */
.project-grid .work-card { transition: opacity .35s ease; }
/* Stlmíme až vtedy, keď je kurzor naozaj na niektorej karte. Mriežka má
   veľké medzery a zvislé posuny — pri :hover na celej mriežke sa stlmovalo
   aj vtedy, keď kurzor stál v prázdnom mieste medzi kartami. */
.project-grid:has(.work-card:hover) .work-card { opacity: .4; }
/* rovnaká váha ako pravidlo vyššie, inak by sa stlmila aj karta pod kurzorom */
.project-grid:has(.work-card:hover) .work-card:hover { opacity: 1; }

@media (hover: none) {
  .project-grid:has(.work-card:hover) .work-card { opacity: 1; }
}

/* ==========================================================================
   v2 — odkrývanie médií (shutter)
   Blok sa pri príchode do záberu otvorí zdola nahor. Rieši monotónnosť
   dlhých sekvencií rovnakých obdĺžnikov v case study.
   ========================================================================== */
[data-shutter] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path;
}
[data-shutter='shown'] { clip-path: inset(0 0 0 0); }

/* jemný parallax obsahu vnútri rámu */
.work-card__media img,
.recent__media img { will-change: transform; }

/* ==========================================================================
   v2 — nábeh nadpisov
   Slová vychádzajú spod hrany riadku so zdržaním. Jednorazovo, po príchode
   do záberu — nie viazané na scroll ako lead odsek.
   ========================================================================== */
.rv { display: inline-block; overflow: hidden; vertical-align: top; }
.rv__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
[data-rv='shown'] .rv__i { transform: translateY(0); }

/* ==========================================================================
   v2 — filter projektov
   Karty pri prepnutí doplávajú na nové pozície (technika FLIP), nepreskočia.
   ========================================================================== */
.project-grid .work-card { will-change: transform, opacity; }
.project-grid .work-card[data-flip='out'] { opacity: 0; transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  [data-shutter] { clip-path: none !important; transition: none; }
  .rv__i { transform: none !important; transition: none; }
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  padding-block: 40px;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { width: 58px; height: 40px; flex: none; }
.logo img { width: 100%; height: 100%; }

/* Logo v hlavičke sa v pokoji otáča ako v preloaderi: otočka o 180° s tým
   istým prešvihnutím a dosadnutím, potom 8 s stojí. Cyklus má dve otočky
   (0 -> 180 -> 360), takže sa na konci slučky nič nepreklopí naspäť.
   V pätičke logo stojí. */
.site-header .logo img,
.nav-drawer .logo img {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: logo-flip 17.8s infinite;
}
@keyframes logo-flip {
  0%      { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.62, 0, .2, 1); }
  3.82%   { transform: rotate(190deg); animation-timing-function: cubic-bezier(.25, 1.4, .45, 1); }
  5.06%   { transform: rotate(180deg); animation-timing-function: linear; }
  50%     { transform: rotate(180deg); animation-timing-function: cubic-bezier(.62, 0, .2, 1); }
  53.82%  { transform: rotate(370deg); animation-timing-function: cubic-bezier(.25, 1.4, .45, 1); }
  55.06%  { transform: rotate(360deg); animation-timing-function: linear; }
  100%    { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .logo img,
  .nav-drawer .logo img { animation: none; }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  max-width: calc(100% - var(--col-label));
  margin-left: auto;
  font-size: var(--fs-nav);
  letter-spacing: -.02em;
}
.nav__list { display: flex; align-items: center; gap: 36px; }
/* Dlhšie slovenské názvy sa nesmú lámať do dvoch riadkov — radšej sa zmenší
   medzera medzi nimi. */
.nav a, .nav-menu__list a { white-space: nowrap; }
.nav a { transition: opacity .25s ease; }

/* Pri nabehnutí na ktorýkoľvek odkaz v navigácii stlmíme celý rad na 60 %
   a necháme svietiť len ten pod kurzorom. Platí v hlavičke aj v pätičke,
   rovnako pre rozbaľovacie menu na case study aj mobilnú zásuvku. */
.nav:hover a,
.nav:hover .nav__toggle,
.nav-drawer__list:hover a {
  opacity: .6;
}
.nav a:hover,
.nav .nav__toggle:hover,
.nav-drawer__list a:hover {
  opacity: 1;
}
.nav__toggle, .nav-drawer__list a { transition: opacity .25s ease; }

/* keď je otvorené rozbaľovacie menu, „Menu“ ostáva plné —
   stlmuje sa až podľa toho, na čom stojí kurzor */
.nav-menu:hover .nav-menu__trigger { opacity: .6; }
.nav-menu .nav-menu__trigger:hover { opacity: 1; }
.nav__toggle { display: none; font-size: var(--fs-nav); letter-spacing: -.02em; }

/* „Let's talk" pomaly pulzuje medzi krémovou a akcentom — je to jediná
   výzva v navigácii, tak si smie pýtať pozornosť. Pri hoveri sa zastaví. */
.nav__link--talk { animation: talk-pulse 3.2s ease-in-out infinite; }
.nav:hover .nav__link--talk,
.nav__link--talk:hover { animation-play-state: paused; }
/* pulz len v krytí: zo stlmenej krémovej do plnej a späť */
@keyframes talk-pulse {
  0%, 100% { color: var(--cream-30); }
  50%      { color: var(--cream); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link--talk { animation: none; }
}

/* Rozbaľovacie menu (case study).
   Po nabehnutí na „Menu“ slovo zmizne a na jeho mieste sa vyrolujú odkazy.
   Obidve sú v tom istom bode — odkazy sú vyňaté z toku, takže sa hlavička
   pri prepnutí nikam neposunie. Zatvorenie rieši JS: buď po piatich
   sekundách, alebo hneď ako kurzor opustí priestor s odkazmi. */
.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 8px;
}
.nav-menu__trigger {
  font-size: var(--fs-nav);
  letter-spacing: -.02em;
  padding: 0;
  /* späť sa vynorí až keď odkazy dorolujú dole — 0,5 s prechodu plus
     0,15 s najväčšieho oneskorenia, inak by sa s nimi na chvíľu prekryl */
  transition: opacity .2s ease .62s;
}
.nav-menu[data-open='true'] .nav-menu__trigger {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.nav-menu__list {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 36px;
  opacity: 0;
  visibility: hidden;
  /* Zatvorenie nesmie odkazy prekryť skorším zhasnutím — rad ostáva
     viditeľný, kým sa posledný odkaz nezroluje späť (0,5 s prechodu plus
     0,15 s najväčšieho oneskorenia). Až potom sa vrstva vypne. */
  transition: opacity 0s linear .66s, visibility 0s linear .66s;
}
/* Okienko, z ktorého odkaz vyroluje. Text má orezaný rám na výšku
   verzálky, takže presahy zaoblených písmen pod účiarou by sa oholili —
   preto je okienko nižšie doplnené a rovnakou hodnotou stiahnuté späť,
   aby sa poloha odkazu nezmenila. */
.nav-menu__list li {
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.22em;
  /* Okienko orezáva aj do strán — pri zápornom prestrkaní vyčnieva posledné
     písmeno o zlomok pixela a zmizne mu pätka. Rovnaký trik ako pri výške:
     doplniť a hneď stiahnuť späť, aby sa poloha odkazu nezmenila. */
  padding-right: .14em;
  margin-right: -.14em;
}
.nav-menu__list a {
  display: block;
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  /* vlastná vrstva — bez nej sa rolovanie na slabšom stroji trhá */
  will-change: transform;
  backface-visibility: hidden;
}
.nav-menu[data-open='true'] .nav-menu__list { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-menu[data-open='true'] .nav-menu__list a { transform: translateY(0); }

/* Postupné nabiehanie zľava doprava; pri zatváraní ide poradie opačne,
   takže odchod je zrkadlom príchodu. */
.nav-menu__list li:nth-child(1) a { transition-delay: .15s; }
.nav-menu__list li:nth-child(2) a { transition-delay: .10s; }
.nav-menu__list li:nth-child(3) a { transition-delay: .05s; }
.nav-menu__list li:nth-child(4) a { transition-delay: 0s; }
.nav-menu[data-open='true'] .nav-menu__list li:nth-child(1) a { transition-delay: 0s; }
.nav-menu[data-open='true'] .nav-menu__list li:nth-child(2) a { transition-delay: .05s; }
.nav-menu[data-open='true'] .nav-menu__list li:nth-child(3) a { transition-delay: .10s; }
.nav-menu[data-open='true'] .nav-menu__list li:nth-child(4) a { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu__list a { transition: none; }
  .service__panel, .service__sign { transition: none; }
}

/* ==========================================================================
   Hlavička pri scrollovaní nahor
   Samostatný pruh nad obsahom — pôvodná hlavička ostáva v toku, takže sa
   rozloženie stránky nikam neposunie. Ukáže sa, keď sa používateľ vracia
   hore, a zmizne, keď pokračuje nadol.
   ========================================================================== */
.site-header--pinned {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding-block: 16px;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(-100%);
  /* Samotné odsunutie nad hranu nestačí: pri odpružení scrollu na macu sa
     fixné prvky hýbu s obsahom a schovaný pruh sa vynorí nad vrchom
     stránky. Preto je v skrytom stave aj priehľadný a bez viditeľnosti —
     tá sa vypína až po dobehnutí posunu, aby bolo vidieť odchod. */
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              opacity .3s ease,
              visibility 0s linear .45s;
  pointer-events: none;
  will-change: transform;
}
.site-header--pinned[data-shown='true'] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              opacity .3s ease,
              visibility 0s linear 0s;
  pointer-events: auto;
}
/* kým je otvorená zásuvka alebo beží prechod, pruh nemá čo robiť navrchu */
body[data-loading='true'] .site-header--pinned { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-header--pinned { transition: none; }
}

/* Mobilná zásuvka.
   Otvára sa rovnakou logikou ako preloader — dve plochy narastú, fialová
   vedie — len smerom zhora nadol. Pri zatváraní ide poradie opačne, takže
   fialová odchádza posledná.
   Odsadenie hore je zhodné s hlavičkou, aby logo aj tlačidlo ostali po
   otvorení presne tam, kde boli. */
.nav-drawer {
  position: fixed; inset: 0; z-index: 50;
  padding: 24px var(--page-x) 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  visibility: hidden;
  pointer-events: none;
  /* Viditeľnosť sa vypína až po dobehnutí zbalenia — inak by zásuvka
     zmizla hneď a spätný pohyb by nebolo vidieť. */
  transition: visibility 0s linear .5s;
}
.nav-drawer[data-open='true'] {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.nav-drawer__panel {
  position: absolute; inset: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.16, 1, .3, 1);
}
.nav-drawer__panel--pink { background: var(--pink); z-index: 0; transition-delay: .08s; }
.nav-drawer__panel--base { background: var(--bg);   z-index: 1; transition-delay: 0s; }
.nav-drawer[data-open='true'] .nav-drawer__panel { clip-path: inset(0 0 0 0); }
.nav-drawer[data-open='true'] .nav-drawer__panel--pink { transition-delay: 0s; }
.nav-drawer[data-open='true'] .nav-drawer__panel--base { transition-delay: .08s; }

.nav-drawer__top,
.nav-drawer__list,
.nav-drawer__tools,
.nav-drawer__meta { position: relative; z-index: 2; }

/* Horný riadok sa len vyjasní — akýkoľvek posun by logo aj tlačidlo
   odsunul z miesta, kde sedeli pred otvorením.
   Zdržania patria otvorenému stavu: pri otváraní obsah počká na plochu,
   pri zatváraní zmizne ako prvý a plocha sa zbalí za ním. */
.nav-drawer__top {
  opacity: 0;
  transition: opacity .18s ease 0s;
}
.nav-drawer__list, .nav-drawer__tools, .nav-drawer__meta {
  opacity: 0; transform: translateY(-12px);
  transition: opacity .18s ease 0s, transform .3s cubic-bezier(.7, 0, .3, 1) 0s;
}
.nav-drawer[data-open='true'] .nav-drawer__top {
  opacity: 1;
  transition: opacity .3s ease .16s;
}
.nav-drawer[data-open='true'] .nav-drawer__list,
.nav-drawer[data-open='true'] .nav-drawer__tools,
.nav-drawer[data-open='true'] .nav-drawer__meta {
  opacity: 1; transform: none;
  transition: opacity .3s ease .2s, transform .5s cubic-bezier(.16, 1, .3, 1) .2s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__panel, .nav-drawer__top,
  .nav-drawer__list, .nav-drawer__tools, .nav-drawer__meta { transition: none; }
}

.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; }
/* odkazy tlačíme k spodnej hrane — palec ich má bližšie ako vrch obrazovky */
.nav-drawer__list {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 36px;
  font-size: clamp(32px, 9vw, 46px); letter-spacing: -.02em;
}
.nav-drawer__meta { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(636px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--surface); }
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--scrim-hero); }
.hero__body {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
}
.hero__grid {
  display: grid;
  grid-template-columns: var(--col-label) 1fr;
  align-items: end;
  width: 100%;
  /* Bez medzery medzi stĺpcami — druhý stĺpec tak začína presne na hrane
     stĺpca s popiskom, teda v jednej zvislej osi s odkazom „Work“
     v navigácii, ktorá má rovnaké odsadenie. */
  gap: 0;
}
/* „keep scrolling“ — sedí v spodnom rohu hero sekcie a odchádza s ňou.
   Nemizne skokom, len pulzuje krytím medzi 30 % a 80 %. Nábeh je kratší ako útlm,
   takže to pôsobí ako nádych, nie ako blikanie kurzora. */
.scroll-hint {
  pointer-events: none;
  color: var(--cream);
  font-family: var(--font-mono); font-size: var(--fs-mono); --lh: 1.1; line-height: var(--lh);
  animation: scroll-pulse 2.6s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { opacity: .3; }
  35%  { opacity: .8; }   /* nádych je kratší ako výdych */
  100% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; opacity: .5; }
}

.hero__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero__claim {
  /* o 60 % nad spoločným H1 — zväčšenie je zámerne len tu, aby sa nehli
     ostatné nadpisy, ktoré ten istý token používajú */
  font-size: calc(var(--fs-h1) * 1.6);
  --lh: 1.1; line-height: var(--lh);
  letter-spacing: -.02em;
  max-width: 24ch;   /* dva riadky; priestoru je dosť aj vedľa karty vpravo */
}

.founder { display: flex; align-items: flex-end; }
.founder__stack { display: flex; flex-direction: column; align-items: flex-end; }
.founder__polygon { width: 82px; height: 82px; }
.founder__card {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: 6px 22px 6px 6px;
}
/* Portrét je na výšku (825×1024) — do štvorca sa vojde len jeho výrez.
   Zarovnanie na spodok odrezávalo temeno, preto ho držíme pri vrchu,
   kde je tvár. */
.founder__avatar { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; object-position: 50% 12%; background: var(--cream); }
.founder__name { color: var(--bg); font-weight: 600; font-size: var(--fs-body); letter-spacing: -.03em; }
.founder__role { font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: rgba(31,8,70,.5); margin-top: 8px; }
.founder__slab { width: 160px; height: 262px; border-radius: var(--radius); background: var(--bg); }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 80px);
  padding-top: clamp(60px, 9vw, 145px);
}
.stat { display: flex; align-items: flex-start; gap: 20px; }
.stat__num { font-size: var(--stat-size, var(--fs-display)); --lh: 1.2; line-height: var(--lh); letter-spacing: -.02em; }
.stat__label {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; --lh: 1.1; line-height: var(--lh); color: var(--pink);
}
.stats--muted .stat__label { color: var(--cream-40); }

.intro { padding-top: clamp(48px, 7vw, 110px); padding-bottom: clamp(40px, 4vw, 60px); }
.intro .lead { text-indent: var(--col-label); }

/* ==========================================================================
   Work
   ========================================================================== */
.work { position: relative; padding-top: clamp(40px, 6vw, 100px); }
/* Prvá dlaždica je zarovnaná doprava, takže vľavo ostáva voľné miesto —
   label doň sadne tak, že jeho vrch lícuje s vrchom dlaždice. Preto je mimo
   toku: v toku by dlaždice odtlačil nadol. */
.work__head {
  position: absolute;
  left: var(--page-x);
  top: clamp(40px, 6vw, 100px);
  display: flex;
  align-items: center;
  gap: 30px;
}
.work__list { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 100px); }

.work-card { display: flex; flex-direction: column; gap: 30px; }
.work-card--right { width: 57.71%; margin-left: auto; }   /* 808/1400 */
.work-card--left  { width: 49.29%; }                      /* 690/1400 */
.work-card--wide  { width: 83.07%; margin-left: auto; }   /* 1163/1400 */

.work-card__media {
  position: relative;
  aspect-ratio: 808 / 539;   /* default: card--right */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card--left  .work-card__media { aspect-ratio: 690 / 539; }
.work-card--wide  .work-card__media { aspect-ratio: 1163 / 539; }
.work-card__media--lime { background: var(--lime); display: grid; place-items: center; }
.work-card__logo { display: flex; align-items: center; gap: 16px; width: 78%; }
.work-card__logo img { height: clamp(40px, 6vw, 80px); width: auto; }
.work-card__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Najdlhší názov má 51 znakov — pri 27ch sa zmestí do dvoch riadkov.
   Riadkovanie 1 by na dvoch riadkoch lepilo dotiahy, tak je 1,15. */
.work-card__title { font-size: var(--fs-h3); --lh: 1.15; line-height: var(--lh); letter-spacing: -.02em; max-width: 27ch; }

/* Štítky pri projektoch sú len text oddelený čiarkami — bez plôch, verzálkami
   ako na predlohe. Skratky (3D, UX) tak ostanú v tom istom reze ako zvyšok. */
.work-card .tags { gap: 0; }
.work-card .tag {
  padding: 0; border-radius: 0; background: none;
  color: var(--cream-40);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: -.02em;
}
.work-card .tag:not(:last-child)::after { content: ','; margin-right: .4em; }

.work__more { display: flex; justify-content: center; padding-top: clamp(48px, 6vw, 90px); }

/* ==========================================================================
   Klienti — 6 pevných pozícií, logá sa v nich striedajú cez fade.
   Jedno logo je na pozícii najviac 3 s, pozície sú posunuté o 500 ms,
   takže sa v jednom okamihu prepína jedna, nanajvýš dve.
   Výšky sú dopočítané na rovnakú optickú plochu
   (h = h_figma * sqrt(cielova_plocha / plocha_figma), cieľ ≈ 3400 px²)
   a orezané do rozsahu 20–50 px, aby značky nedominovali radu.
   --logo-s škáluje celý rad naraz podľa šírky okna.
   ========================================================================== */
.clients { margin-top: clamp(48px, 5vw, 73px); border-top: 1px solid var(--hairline); }
.logo-grid {
  display: grid;
  /* Rovnako široké stĺpce — pri výmene loga sa rozloženie nepohne.
     Každé logo je vycentrované vo svojej pozícii. */
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 24px;
  padding-block: 40px;
}
/* všetky pozície rovnako široké, logo vždy na stred svojej pozície */
.logo-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  height: calc(58px * var(--logo-s, 1));   /* najvyššie logo v rade */
}
.logo-slot img {
  height: calc(var(--h, 30) * var(--logo-s, 1) * 1px);
  width: auto;
  max-width: 100%;
  opacity: .85;
  transition: opacity .35s ease;
}
.logo-slot img[data-hidden='true'] { opacity: 0; }

[data-logo="01"] { --h: 29; }   /* KIA              */
[data-logo="02"] { --h: 30; }   /* Zanora           */
[data-logo="03"] { --h: 21; }   /* SCR design       */
[data-logo="04"] { --h: 51; }   /* monogram         */
[data-logo="05"] { --h: 35; }   /* Sygic            */
[data-logo="06"] { --h: 56; }   /* TOP FARM         */
[data-logo="07"] { --h: 34; }   /* Love Them        */
[data-logo="08"] { --h: 29; }   /* bookio           */
[data-logo="09"] { --h: 34; }   /* Shoptet Premium  */
[data-logo="10"] { --h: 28; }   /* vidadu           */
[data-logo="11"] { --h: 34; }   /* Dr Martin        */
[data-logo="12"] { --h: 36; }   /* ABB              */
[data-logo="13"] { --h: 26; }   /* Mobilonline      */
[data-logo="14"] { --h: 55; }   /* Tatra banka      */
[data-logo="15"] { --h: 31; }   /* aulientte        */
[data-logo="16"] { --h: 32; }   /* UNION            */
[data-logo="17"] { --h: 23; }   /* DECATHLON        */

/* Na telefóne sa mriežka nahradí plynulým pásmom cez celú šírku obrazovky
   — vyjde z odsadenia kontajnera, takže beží od hrany po hranu. */
.logo-marquee { display: none; }
.logo-marquee__track {
  display: flex;
  align-items: center;
  /* Zámerne margin, nie gap. Pri gap sa medzera medzi dvoma kópiami započíta
     len raz, takže posun o -50 % nezodpovedá presne jednej kópii a na konci
     slučky to cukne. S marginom má každá položka vlastnú medzeru a polovica
     šírky pásu je presne jedna kópia. */
  width: max-content;
  animation: logo-marquee 46s linear infinite;
  /* zámerne bez will-change a backface-visibility: tie by pás povýšili na
     jednu obrovskú kompozitnú vrstvu, ktorú iOS zahadzuje */
}
.logo-marquee img {
  height: calc(var(--h, 30) * var(--logo-s, 1) * 1px);
  width: auto;
  margin-right: 72px;
  opacity: .85;
  flex: none;
}
@keyframes logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slot img { transition: none; }
  .logo-marquee__track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}

/* ==========================================================================
   Programs
   ========================================================================== */
.programs { position: relative; background: var(--maroon); padding-top: clamp(170px, 19.8vw, 285px); }

/* Sekcia programs nemá vlastné pozadie — farbu preberá celá stránka a JS ju
   scrollom prelieva z tmavej do bordovej a späť. Bez JS (alebo bez podpory
   color-mix) ostáva sekcia zafarbená sama, takže stránka vyzerá správne aj tak. */
.has-scroll-tint {
  /* Aktuálna farba podkladu ide do premennej, nie rovno do pozadia — čokoľvek,
     čo má splynúť so stránkou (napr. body časovej osi), si ju vie zobrať. */
  --bg-now: color-mix(in oklab,
    var(--bg), var(--maroon) calc(var(--page-tint, 0) * 100%));
  background-color: var(--bg-now);
}
.has-scroll-tint .programs,
.has-scroll-tint .process-pin { background: transparent; }
/* V dvoch stĺpcoch label sedí vedľa, pod 900 px sa zlomí nad odstavec —
   vtedy potrebuje vlastnú medzeru, inak sa dotýka prvého riadku. */
.programs__head { display: grid; grid-template-columns: var(--col-label) 1fr; gap: 0; }
.programs__title { font-size: var(--fs-h1); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; }
.chip {
  display: inline-block; text-align: center;
  padding: clamp(10px, 1.25vw, 20px);
  font-size: var(--fs-nav); letter-spacing: -.02em;
  vertical-align: middle;
}
.chip--pink { background: var(--pink); color: var(--bg); border-radius: 50px; }
.chip--soft { background: var(--pink-soft); color: var(--maroon); border-radius: var(--radius); }

.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(48px, 6vw, 100px);
}
/* Dlaždice začínajú tam, kde nadpis nad nimi — teda za stĺpcom labelu.
   Label sám sedí staticky v prvom stĺpci hlavičky a nikam sa nehýbe. */
.programs .programs__grid { margin-left: var(--col-label); }
.card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(48px, 6vw, 100px);
  background: var(--bg);
  border-radius: var(--radius-xl);
  padding: 30px;
  min-height: 249px;
  transition: transform .3s ease;
}
/* Celá karta je klikateľná. Vrstvu dopĺňa JS ako samostatný odkaz — pseudo-
   prvok tlačidla by sa neroztiahol, lebo `.btn` má vlastný `position`.
   Vrstva je pre čítačky aj klávesnicu neviditeľná, cieľom ostáva tlačidlo. */
.card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* karta sa pri hoveri nedvíha */
.card--light { background: var(--cream); color: var(--bg); }
/* Figma: nadpis (cap 22 px) a podnadpis (cap 13 px) delí presne 20 px. */
.card__head { display: flex; flex-direction: column; gap: 20px; }
.card__title { font-size: var(--fs-h2); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; }
.card__sub { font-size: var(--fs-body); --lh: 1.1; line-height: var(--lh); letter-spacing: -.02em; color: var(--cream-70); }
.card--light .card__sub { color: var(--dark-70); }
.programs__rule { margin-top: clamp(60px, 6.25vw, 100px); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
/* ==========================================================================
   About panel
   ========================================================================== */
/* Nad panelom je dvojnásobná medzera — sekcia nad ním končí zoznamom
   služieb a bez toho by naň panel nadväzoval pritesno. */
.about { padding-top: clamp(112px, 12vw, 192px); padding-bottom: clamp(56px, 6vw, 96px); }
.about__panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6.25vw, 100px);
}
/* Obrázok aj závoj sedia na zápornom z-indexe, takže ich orez rohom panela
   nie je v každom prehliadači spoľahlivý — vo WebKite vedia hranaté rohy
   pretŕčať spod zaoblenia. Vlastný `border-radius: inherit` to uzatvára. */
.about__panel::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit;
  background: url('../assets/hero-bg.png') center / cover;
}
.about__panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--scrim-panel);
}
.about__inner { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 100px); max-width: 454px; }
.about__body { display: flex; flex-direction: column; gap: 60px; }
.about__title { font-size: var(--fs-h1); --lh: 1.1; line-height: var(--lh); letter-spacing: -.02em; }
.about__text { font-weight: 400; font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); letter-spacing: -.01em; color: var(--cream-60); }

/* ==========================================================================
   Contact + orbit
   ========================================================================== */
.contact { padding-block: clamp(60px, 6.25vw, 100px); overflow: hidden; }
.contact__head { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.contact__title { font-size: var(--fs-display); letter-spacing: -.02em; --lh: 1.1; line-height: var(--lh); }
.contact__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: clamp(40px, 5vw, 80px); }
.contact__mail { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--pink); }

/* Koncepty sú vodorovný karusel na všetkých šírkach: jedna dlaždica sa vždy
   zastaví v strede obrazovky, susedné prekukávajú po stranách. Bočné
   odsadenie radu je presne také, aby sa aj prvá a posledná vedeli
   vycentrovať. */
.orbit {
  --tile-w: clamp(220px, 25vw, 360px);
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(40px, 5vw, 60px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 50%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.orbit::-webkit-scrollbar { display: none; }
.orbit__row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline: calc((100vw - var(--tile-w)) / 2);
}
.orbit__tile {
  flex: none;
  width: var(--tile-w);
  aspect-ratio: 360 / 420;
  background: var(--bg-tile);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex; align-items: flex-end;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--cream);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: opacity .35s ease;
}

/* ==========================================================================
   Podstránky (work / services / contact)
   Postavené z rovnakých komponentov ako homepage — rovnaké odsadenia,
   rovnaký label stĺpec, rovnaké pilulky a tlačidlá.
   ========================================================================== */
.page-hero { padding-top: clamp(48px, 8vw, 143px); padding-bottom: clamp(40px, 5vw, 80px); }
.page-hero__grid { display: grid; grid-template-columns: var(--col-label) 1fr; gap: 0; }
/* H1 podstránok ide o 40 % nad spoločný token; vlastná premenná preto, aby
   z nej počítalo aj odsadenie štítku vedľa nadpisu. */
.page-hero { --fs-h1-page: calc(var(--fs-h1) * 1.4); }
.page-hero__title { font-size: var(--fs-h1-page); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; }
/* Štítok vedľa nadpisu sadá na jeho verzálku. Nadpis sa neoreže (slová sú
   pri nábehu zabalené do vlastných obalov a orez by na nich nesedel) — štítok
   sa preto posunie o medzeru, ktorú má nadpis nad verzálkou:
   (riadkovanie − výška obsahu) / 2 + medzera nad verzálkou. */
.page-hero__grid > .mono,
.about-page__team .split__label {
  padding-top: calc(((1.4 - var(--f-content)) / 2 + var(--f-capgap)) * var(--fs-h1-page, var(--fs-h1)));
}
.page-hero__title .muted { color: var(--cream-40); }
/* Filtre sadajú na tú istú os ako nadpis nad nimi a majú od neho poriadny
   odstup — riadok tak nečíta ako súčasť nadpisu. */
.page-hero__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: clamp(40px, 6.25vw, 90px); margin-left: var(--col-label);
}

/* --- filtre projektov --- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
/* Nevybraný filter je len obrys, vybraný je plný — plocha tak povie, čo je
   zapnuté, aj bez farby. */
.filter {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 500; --lh: 1.6; line-height: var(--lh);
  padding: 13px; border-radius: var(--radius-sm);
  background: transparent; color: var(--cream-40);
  border: 1px solid var(--cream-30);
  text-box: trim-both cap alphabetic;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.filter:hover { color: var(--cream); border-color: var(--cream-60); }
.filter[aria-pressed='true'] {
  background: var(--cream); border-color: var(--cream); color: var(--bg);
}

/* --- mriežka projektov ---
   Editorská mriežka namiesto pravidelných dvojíc: 12 stĺpcov, karty majú
   tri formáty (štvorec, na výšku, na šírku) a striedajú sa v osemdielnom
   rytme. Niektoré sú zvislo posunuté, takže riadok nečíta ako riadok. */
.project-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 40px; row-gap: 96px;
  padding-bottom: clamp(60px, 6vw, 100px);
}
.project-grid .work-card { width: 100%; margin: 0; }
.project-grid .work-card[hidden] { display: none; }
.project-grid .work-card__foot { flex-direction: column; gap: 16px; }
/* nadpis zaberá 90 % šírky obrázka nad ním */
.project-grid .work-card__title { max-width: 90%; }

/* rozmiestnenie: 1 vľavo pol, 2 vpravo úzka, 3 široká, 4+5 dvojica,
   6 úzka vľavo, 7 na šírku vpravo, 8 široká odsadená */
.project-grid .work-card:nth-child(8n+1) { grid-column: 1 / span 6; }
.project-grid .work-card:nth-child(8n+2) { grid-column: 9 / span 4; margin-top: 200px; }
.project-grid .work-card:nth-child(8n+3) { grid-column: 1 / span 10; }
.project-grid .work-card:nth-child(8n+4) { grid-column: 1 / span 6; margin-top: 170px; }
.project-grid .work-card:nth-child(8n+5) { grid-column: 7 / span 6; }
.project-grid .work-card:nth-child(8n+6) { grid-column: 1 / span 4; margin-top: 160px; }
.project-grid .work-card:nth-child(8n+7) { grid-column: 7 / span 6; }
.project-grid .work-card:nth-child(8n+8) { grid-column: 3 / span 10; }

/* formáty: štvorec, na výšku 3:4, na šírku 16:9 */
.project-grid .work-card__media { aspect-ratio: 1 / 1; }
.project-grid .work-card:nth-child(8n+2) .work-card__media,
.project-grid .work-card:nth-child(8n+6) .work-card__media { aspect-ratio: 3 / 4; }
.project-grid .work-card:nth-child(8n+3) .work-card__media,
.project-grid .work-card:nth-child(8n+7) .work-card__media,
.project-grid .work-card:nth-child(8n+8) .work-card__media { aspect-ratio: 16 / 9; }

.project-count { color: var(--pink); }

/* --- služby --- */
/* Služby ako na predlohe (outloud.co): riadok nesie len znamienko a názov,
   všetko ostatné sa vysunie v paneli — vizuál vľavo, text a zoznamy vpravo.
   Riadok tak ostane pokojný a otvorená položka má priestor. */
.service-list { display: flex; flex-direction: column; }
.service { border-top: 1px solid var(--cream-12); }
.service:last-child { border-bottom: 1px solid var(--cream-12); }

.service__head {
  display: grid;
  /* Názov sadá do rovnakej osi ako nadpis stránky (stĺpec labelu), znamienko
     ostáva úplne vľavo na začiatku riadku. */
  grid-template-columns: calc(var(--col-label) - 20px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: clamp(22px, 2.4vw, 32px) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.service__title {
  display: block;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 500;
  --lh: 1.2; line-height: var(--lh);
  letter-spacing: -.02em;
  transition: color .3s ease;
}

/* Znamienko je ten istý prvok ako plusko na tlačidlách domovskej stránky:
   plná fialová bublina s tmavým znakom. Rozdiel je len v tom, že po otvorení
   sa zvislá čiara otočí do vodorovnej a ostane mínus. Preto je znak z dvoch
   pruhov a nie z obrázka — obrázok by sa animovať nedal. */
.service__sign {
  position: relative;
  justify-self: start;
  width: 51px; height: 51px;
  background: var(--pink);
  border-radius: 999px;
  color: var(--bg);
  transition: transform .35s ease;
}
.service__sign::before,
.service__sign::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.service__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.service__head:hover .service__title { color: var(--pink); }
.service__head:hover .service__sign { transform: rotate(90deg); }
.service[data-open='true'] .service__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.service[data-open='true'] .service__head:hover .service__sign { transform: none; }

/* Rozbalenie cez riadok mriežky 0fr -> 1fr: netreba merať výšku v JS
   a prechod ostane plynulý pri akokoľvek dlhom obsahu. */
.service__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1);
}
.service[data-open='true'] .service__panel { grid-template-rows: 1fr; }
.service__panel > div { overflow: hidden; }

/* Pomery z predlohy: vizuál a text v pomere 2:1, medzera 32 px. K textovému
   stĺpcu sa pripočíta --service-copy-extra, aby riadky neboli krátke; vizuál
   si berie zvyšok a jeho max-width 480 px zostáva, takže obrázok sa nemení.
   Vizuál je odsadený tak, aby lícoval s názvom nad ním. */
.service__body {
  display: grid;
  --service-copy-extra: 150px;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 32px) / 3 + var(--service-copy-extra)));
  gap: 32px;
  /* text začína hore, vizuál dosadá na spodnú hranu panela */
  align-items: end;
  padding: clamp(24px, 2.6vw, 44px) 0 clamp(28px, 3vw, 44px);
}
.service__copy { align-self: start; }
/* bez vizuálu ostane text pod názvom, nie osamote vpravo */
.service__body--plain {
  grid-template-columns: minmax(0, 1fr);
  padding-left: var(--col-label);
}
.service__media {
  align-self: end;
  margin: 0 0 0 var(--col-label); overflow: hidden;
  max-width: 480px; width: 100%; aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--surface);
}
.service__media img,
.service__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.service__lead {
  font-size: var(--fs-body-lg); --lh: 1.35; line-height: var(--lh);
  letter-spacing: -.02em; margin-bottom: 18px;
}
.service__text { font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); color: var(--cream-60); }
.service__group { margin-top: 65px; }
/* Veľkosť aj rez sedia na štítky `.tag` z case studies; verzálky navyše,
   aby popis skupiny nečítal ako súčasť zoznamu pod ním. */
.service__group-label {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: -.03em;
  color: var(--cream-40);
  margin-bottom: 25px;
}
.service__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.service__group li {
  font-size: var(--fs-body); --lh: 1.45; line-height: var(--lh);
  color: var(--cream-70); padding-left: 18px; position: relative;
}
.service__group li::before {
  /* fajka namiesto pomlcky: dva okraje stvorca otocene o 45 stupnov */
  content: ''; position: absolute; left: 1px;
  /* stred prveho riadku: polovica vysky riadku, potom posun o vlastnu polovicu */
  top: calc(var(--lh) * .5em);
  width: 5px; height: 9px;
  border: solid var(--pink);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-50%) rotate(45deg);
}

/* --- priebeh spolupráce ---
   Kroky mali triedu `.card`, tá má podklad `--bg` — na stránke s rovnakým
   podkladom boli neviditeľné. Vlastný rám ich vráti na povrch. */
/* Priebeh spolupráce ako časová os.
   Základ je zvislý zoznam — funguje bez JS, na úzkom výreze aj pri obmedzenom
   pohybe. Na širokom výreze ho JS prepne do pripnutého režimu: sekcia sa
   zastaví cez celú obrazovku a kroky prejdú zľava doprava, až potom stránka
   pokračuje nadol. Rozmery linky aj posun počíta JS, CSS drží len vzhľad. */
.process-pin { position: relative; }
.process-pin__stage {
  display: grid;
  align-content: center;
  gap: clamp(28px, 3vw, 48px);
  padding-block: clamp(60px, 6vw, 100px);
}
.process-pin__label { color: var(--cream-40); }
.process-pin__viewport { padding-inline: var(--page-x); }

.process {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(56px, 7vw, 104px);
  --process-dot: 38px;
}
.process__rail {
  position: absolute;
  left: calc(var(--process-dot) / 2);
  top: var(--process-rail-top, 0px);
  width: 1px;
  height: var(--process-rail-height, 0px);
  background: var(--cream-12);
  transform: translateX(-50%);
}
.process__fill {
  display: block;
  width: 100%;
  height: var(--process-fill, 0px);
  background: var(--pink);
}

.process__step {
  display: grid;
  grid-template-columns: var(--process-dot) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 32px);
  align-items: start;
}

.process__dot {
  /* Pozicovaný zámerne: linka je `absolute`, takže by sa inak kreslila nad
     bodom a presvitala by cezeň. Takto bod prichádza na rad až po nej. */
  position: relative;
  display: grid; place-items: center;
  width: var(--process-dot); height: var(--process-dot);
  border-radius: 999px;
  border: 1px solid var(--cream-12);
  /* Splýva s podkladom aj počas prelievania — pevná tmavá by na fialovom
     pozadí ostala ako tmavý terč. */
  background: var(--bg-now);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  color: var(--cream-40);
  transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
/* Krok, ktorý už linka minula, má bod vyplnený — os tak ukazuje, kde si. */
.process__step[data-state='done'] .process__dot,
.process__step[data-state='active'] .process__dot {
  background: var(--pink); border-color: var(--pink); color: var(--bg);
}
.process__step[data-state='active'] .process__dot {
  box-shadow: 0 0 0 8px rgba(170, 146, 255, .14);
}

.process__body {
  display: flex; flex-direction: column; gap: 28px; padding-top: .35em;
  /* Stlmené kroky ostávajú čitateľné, len ustúpia — nie sú skryté. */
  opacity: .34;
  transition: opacity .45s ease;
}
.process__step[data-state='active'] .process__body { opacity: 1; }
.process__title { font-size: var(--fs-h1); --lh: 1.1; line-height: var(--lh); letter-spacing: -.02em; }
.process__text {
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh);
  color: var(--cream-60); max-width: 46ch;
}
/* Krok môže niesť obrázok alebo video — nepovinné, sadá pod text. */
.process__media {
  margin: 6px 0 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  max-width: 46ch;
}
.process__media img,
.process__media video {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* --- pripnutý horizontálny beh ------------------------------------------- */
.process-pin[data-pin='on'] .process-pin__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  padding-block: 0;
}
.process-pin[data-pin='on'] .process-pin__viewport { padding-inline: 0; overflow: hidden; }
.process-pin[data-pin='on'] .process {
  grid-auto-flow: column;
  /* Krok zaberá väčšinu šírky, takže os má čo prechádzať — inak by sa pri
     troch krokoch zmestila na obrazovku naraz a pripnutie by nemalo zmysel. */
  grid-auto-columns: min(900px, 82vw);
  gap: clamp(80px, 10vw, 180px);
  /* Miesto za posledným krokom si dorobí posun sám — dráhu počíta JS z jeho
     bodu, takže odsadenie tu má na starosti len začiatok osi. */
  padding-inline: var(--page-x);
  /* Aktívny bod má okolo seba svätožiaru 8 px; bez rezervy by ju vodorovný
     orez posuvníka odstrihol zhora. */
  padding-block: 12px;
  transform: translate3d(var(--process-x, 0px), 0, 0);
  will-change: transform;
}
.process-pin[data-pin='on'] .process__step {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--process-dot) auto;
  gap: clamp(88px, 9.6vw, 136px);
}
.process-pin[data-pin='on'] .process__rail {
  left: var(--process-rail-left, 0px);
  top: var(--process-rail-top, 0px);
  width: var(--process-rail-width, 0px);
  height: 1px;
  transform: translateY(-50%);
}
.process-pin[data-pin='on'] .process__fill {
  width: var(--process-fill, 0px);
  height: 100%;
}
.process-pin[data-pin='on'] .process__body { padding-top: 0; }
/* Bod má rovnaký priemer ako fialové koliesko v zozname služieb nad ním. */
.process-pin[data-pin='on'] .process { --process-dot: 51px; }
.process-pin[data-pin='on'] .process__dot { font-size: var(--fs-mono); }
/* V posuvníku nesie krok celú obrazovku, tak nadpis znesie trojnásobok. */
.process-pin[data-pin='on'] .process__title {
  font-size: calc(var(--fs-h1) * 3);
  --lh: .95; line-height: var(--lh);
  letter-spacing: -.03em;
}
.process-pin[data-pin='on'] .process__text { max-width: 40ch; }
.process-pin[data-pin='on'] .process__media { max-width: none; margin-top: 12px; }

/* Bez JS aj pri vypnutom pohybe stoja všetky kroky naplno. */
.process:not([data-ready]) .process__body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .process__body { opacity: 1; transition: none; }
  .process__dot { transition: none; }
}

/* --- kontakt --- */
/* Formulár stojí sám — zarovnaný na nadpis nad ním, teda odsadený o stĺpec
   štítkov. Šírku si drží tú, ktorú mal, keď vedľa neho stáli kontakty:
   polovicu obsahu bez medzery medzi stĺpcami. */
.contact-grid {
  padding-bottom: clamp(60px, 6vw, 100px);
  --contact-gap: clamp(40px, 5vw, 80px);
}
.contact-grid .form {
  margin-left: var(--col-label);
  width: calc((100% - var(--contact-gap)) / 2);
}
.contact-block + .contact-block { margin-top: 48px; }
.contact-block__label { margin-bottom: 20px; }
.contact-block__value { font-size: var(--fs-contact); --lh: .9; line-height: var(--lh); letter-spacing: -.03em; }
.contact-block__note { color: var(--cream-40); margin-top: 12px; }

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { color: var(--cream-40); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--cream);
  /* zámerne background-color, nie skratka background — tá by zmazala
     vlastnú šípku selectu nastavenú cez background-image */
  background-color: var(--cream-12); border: 1px solid transparent;
  border-radius: var(--radius); padding: 16px 18px;
  transition: border-color .25s ease, background .25s ease;
}
/* input aj select musia mať rovnakú výšku — select si inak počíta vlastnú
   podľa systémových metrík a ignoruje line-height */
.field input, .field select { height: calc(1.6em + 34px); }
.field textarea { min-height: 160px; resize: vertical; }

/* Natívny vzhľad selectu preč, vlastná šípka v tóne rozhrania. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23EEE9E3' stroke-opacity='0.5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.field select:hover, .field select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23FD084D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field select::-ms-expand { display: none; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--pink); background-color: var(--cream-12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--cream-30); }
.field select option { background: var(--bg); color: var(--cream); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__note { color: var(--cream-40); }
.form__note[data-state='error'] { color: var(--pink); }

@media (max-width: 1024px) {
  .service { grid-template-columns: 60px 1fr; }
  .service__tags { grid-column: 2; }
}
@media (max-width: 900px) {
  .programs__head { row-gap: 24px; }
  /* Pilulka má výplň rovnakú zo všetkých strán. Aby napriek tomu
     nevyplnila celý riadok a rytmus odstavca ostal pokojný, dostane
     odstavec na telefóne väčšie preloženie riadkov — miesto berieme
     z riadku, nie z výplne. */
  .programs__title { --lh: 1.85; }
  .chip { padding: 10px; }
  .page-hero__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  /* Na úzkom výreze berie formulár celú šírku — stĺpec štítkov je tam nulový. */
  .contact-grid .form { margin-left: 0; width: auto; }
  /* v jednom stĺpci ide rytmus preč: rovnaký formát, bez posunov */
  .project-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .project-grid .work-card { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .project-grid .work-card__media { aspect-ratio: 4 / 3 !important; }
  .service { grid-template-columns: 1fr; gap: 20px; }
  .service__tags { grid-column: auto; }
}

/* ==========================================================================
   v2 — bodové pole za kontaktným formulárom
   Najprázdnejšia stránka webu dostane tichý pohyb, ktorý reaguje na kurzor.
   ========================================================================== */
.contact-grid { position: relative; }

@media (max-width: 900px) {
  .service__head { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .service__sign { justify-self: start; width: 42px; height: 42px; }
  .service__body { grid-template-columns: minmax(0, 1fr); padding-left: 0; gap: 20px; }
  .service__body--plain { padding-left: 0; }
  .service__media { max-width: none; margin-left: 0; }
  .process { --process-dot: 32px; gap: clamp(40px, 9vw, 64px); }
}
/* ==========================================================================
   Právne stránky (gdpr, cookies)
   Rovnaká stavba ako zoznam služieb — číslo, nadpis, text — aby pôsobili
   ako súčasť webu, nie ako priložený dokument.
   ========================================================================== */
.legal { padding-bottom: clamp(60px, 6vw, 100px); }
.legal__block {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  align-items: start;
  padding-block: clamp(32px, 3.5vw, 50px);
  border-top: 1px solid var(--cream-12);
}
.legal__block:last-child { border-bottom: 1px solid var(--cream-12); }
.legal__no { color: var(--pink); padding-top: .35em; }
.legal__title { font-size: var(--fs-h2); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; }
.legal__text {
  font-size: var(--fs-body);
  --lh: 1.6; line-height: var(--lh);
  color: var(--cream-70);
  max-width: 62ch;
  margin-top: 20px;
}
.legal__text a { color: var(--cream); text-decoration: underline; text-underline-offset: .18em; }
.legal__text a:hover { color: var(--pink); }
/* Bez monospace odlíšime názov v texte iným rezom, nie iným písmom. */
.legal__code { font-weight: 600; color: var(--cream); }

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

/* odkazy v pätičkovom riadku s právnymi údajmi */
.footer__legal a { text-decoration: underline; text-underline-offset: .2em; transition: opacity .25s ease; }
.footer__legal a:hover { opacity: .7; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--footer-gradient); padding: 80px 0 40px; }
.site-footer__inner { display: flex; flex-direction: column; gap: clamp(56px, 7.5vw, 120px); }
.site-footer .nav__list--social { display: flex; gap: 36px; }
.footer__contacts {
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  /* Rovnaké odsadenie ako navigácia nad tým — prvý kontakt tak sedí
     v jednej zvislej osi s odkazom „Work“. Percento sa s ňou nezhodovalo. */
  width: calc(100% - var(--col-label));
  margin-left: auto;
}
.footer__contact { display: flex; flex-direction: column; gap: 30px; }
.footer__contact a, .footer__contact > span { font-size: var(--fs-contact); --lh: .9; line-height: var(--lh); letter-spacing: -.03em; }
.footer__contact .mono { color: var(--cream); }
.footer__bottom { display: flex; flex-direction: column; gap: 40px; }
.footer__legal {
  /* Odstavce majú orezaný rám na výšku verzálky, tlačidlo nie — bez
     zarovnania na účiaru sedí jeho text o 5,7 px nižšie. */
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--bg);
}
/* Copyright ostáva vľavo, právne odkazy sa pridajú k „back to top“ vpravo —
   medzi nimi väčšia medzera, nech nesplynú do jedného radu. */
.footer__legal p + p { margin-left: auto; }
.footer__legal .footer-top { margin-left: 24px; }
.footer__rule { background: rgba(8,7,12,.35); }

/* ==========================================================================
   Odkrývacia päta (case study)
   Päta je fixne ukotvená dole a leží "o poschodie nižšie" — obsah stránky
   sa cez ňu posúva a na konci scrollu ju odkryje.
   ========================================================================== */
.page {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.page--reveal { margin-bottom: var(--footer-h, 520px); }

.site-footer--reveal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: var(--bg);          /* plná tmavá namiesto gradientu */
}
/* text v tmavej päte musí zmeniť kontrast oproti gradientovej verzii */
.site-footer--reveal .footer__legal { color: var(--cream-40); }
.site-footer--reveal .footer__rule { background: var(--cream-12); }
.site-footer--reveal .footer__contact .mono { color: var(--cream-40); }

/* keby päta nesadla do viewportu (nízke okno), vypni efekt a vráť ju do toku */
.site-footer--reveal.is-static { position: static; }
.page--reveal.is-static { margin-bottom: 0; }

/* ==========================================================================
   Pätička — kontakty a návrat hore
   Pri nabehnutí na kontakt sa zľava vysunie ikona a odtlačí text.
   „Späť hore" má šípku v orezanom okienku: pri hoveri sa vyroluje nahor
   a nastúpi za ňu druhá.
   ========================================================================== */
/* Prevaľovanie kontaktu.
   Dva rovnaké riadky nad sebou: pôvodný odchádza hore, kópia prichádza
   zdola. Oneskorenie nesie každé písmeno vo vlastnej premennej `--d`, takže
   riadok sa prelomí zľava doprava, nie naraz.

   Orez je o kúsok voľnejší než riadok — pri riadkovaní .9 by tesný orez
   odstrihol dotiahy. Rezervu hneď stiahne záporný okraj, aby sa rozloženie
   pätičky nepohlo. */
.fc-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-block: .14em;
  margin-block: -.14em;
  vertical-align: bottom;
}
.fc-roll__line { display: block; white-space: pre; }
.fc-roll__line--copy { position: absolute; left: 0; top: .14em; }
.fc-roll__ch {
  display: inline-block;
  transition: transform .55s cubic-bezier(.625, .05, 0, 1);
  transition-delay: var(--d, 0ms);
}
/* Posun je väčší než riadok. Pri 100 % by písmeno odišlo len o vlastný
   riadok, lenže dotiahy siahajú nižšie — `@` v e-maile potom ostáva pri
   hornej hrane ako odseknutý prúžok. 135 % ho spoľahlivo vynesie von aj
   pri hlbších dotiahoch (g, y, j), keby sa kontakt niekedy zmenil. */
.fc-roll { --roll-shift: 135%; }
.fc-roll__line--copy .fc-roll__ch { transform: translateY(var(--roll-shift)); }

@media (hover: hover) and (pointer: fine) {
  .footer__contact a:hover .fc-roll__line .fc-roll__ch,
  .footer__contact a:focus-visible .fc-roll__line .fc-roll__ch {
    transform: translateY(calc(var(--roll-shift) * -1));
  }
  .footer__contact a:hover .fc-roll__line--copy .fc-roll__ch,
  .footer__contact a:focus-visible .fc-roll__line--copy .fc-roll__ch {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-roll__ch { transition: none; }
}

/* Sedí v riadku pod čiarou spolu s údajmi o firme, tak preberá ich
   typografiu aj farbu — líši sa len šípkou. */
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: inherit;
  cursor: pointer;
  transition: opacity .25s ease;
}
.footer-top:hover { opacity: .7; }
.footer-top__arrow {
  display: flex;
  flex-direction: column;
  height: 1.05em;
  overflow: hidden;
}
.footer-top__arrow > svg {
  flex: 0 0 auto;
  transition: transform .6s cubic-bezier(.625, .05, 0, 1);
}
.footer-top:hover .footer-top__arrow > svg,
.footer-top:focus-visible .footer-top__arrow > svg { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .footer-top__arrow > svg { transition: none; }
}

/* Striedané mestá pod „meet“. Všetky varianty ležia v jednej bunke mriežky,
   takže stĺpec má šírku najdlhšieho názvu a pri výmene sa nič neposunie.
   Spodné odsadenie vracia priestor pre presahy pod účiarou, ktoré by inak
   orezanie okna zrezalo. */
.fc-cities {
  display: inline-grid;
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
.fc-city {
  grid-area: 1 / 1;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .62s cubic-bezier(.625, .05, 0, 1),
              opacity .42s cubic-bezier(.625, .05, 0, 1);
}
.fc-city.is-on  { transform: none; opacity: 1; }
.fc-city.is-out { transform: translateY(-115%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fc-city { transition: none; }
}

/* ==========================================================================
   Case study
   ========================================================================== */
.cs-hero { padding-top: clamp(48px, 8vw, 143px); }
.cs-hero__title { font-size: calc(var(--fs-h1) * 1.4); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; text-indent: var(--col-label); color: var(--cream-60); max-width: 1282px; }
.cs-hero__label { position: absolute; }
.cs-hero__titlewrap { position: relative; }
.cs-hero__meta { margin-top: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; gap: 30px; }
.cs-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.cs-media {
  width: 100%;
  aspect-ratio: 1400 / 750;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Fotky aj video vypĺňajú plochu — pomery zdrojov sedia na rámy (1400/750
   pri širokých, 808/750 v dvojstĺpci), takže sa oreže nanajvýš pár pixelov. */
.cs-media img,
.cs-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-stack { display: flex; flex-direction: column; gap: 20px; padding-block: 20px; }
.cs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-duo .cs-media { aspect-ratio: 690 / 750; }

.cs-split { display: grid; grid-template-columns: 572fr 808fr; gap: 20px; align-items: stretch; }
.cs-split--flip { grid-template-columns: 808fr 572fr; }
.cs-split .cs-media { aspect-ratio: 808 / 750; height: 100%; }
.cs-panel {
  display: flex; flex-direction: column; justify-content: space-between; gap: 60px;
  padding: 40px;
  min-height: 100%;
}
.cs-panel__text { font-size: var(--fs-body-lg); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; text-indent: 140px; color: var(--cream-40); }
.cs-panel__text .c90 { color: var(--cream-90); }
.cs-panel__text .c70 { color: var(--cream-70); }
.cs-panel__text .c50 { color: var(--cream-50); }
.cs-panel__body { display: flex; flex-direction: column; gap: 60px; }

.cs-review { padding: clamp(56px, 8vw, 120px) clamp(24px, 8.4vw, 118px); display: grid; grid-template-columns: var(--col-label) 1fr; gap: 24px; }
.cs-review__quote { font-size: var(--fs-h1); --lh: 1.4; line-height: var(--lh); letter-spacing: -.02em; color: var(--cream-60); }

/* before / after */
.cs-compare {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  aspect-ratio: 1400 / 750;
  user-select: none;
  touch-action: pan-y;
}
.cs-compare__before, .cs-compare__after { position: absolute; inset: 0; }
.cs-compare__before { background: var(--bg); border-right: 3px solid var(--cream); width: 35.5%; z-index: 2; }
.cs-compare__label {
  position: absolute; top: 49.3%; z-index: 3;
  font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--cream);
}
.cs-compare__label--before { left: 29.8%; }
.cs-compare__label--after  { left: 37.6%; }
.cs-compare__handle {
  position: absolute; top: 0; bottom: 0; left: 35.5%; z-index: 4;
  width: 40px; transform: translateX(-50%); cursor: ew-resize;
}

.credits { padding-block: clamp(56px, 5vw, 80px); }
.credits__list { display: flex; flex-direction: column; gap: 30px; margin-top: 60px; }
.credit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.credit-row__person { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.credit-row__id { display: flex; align-items: center; gap: 12px; min-width: 169px; }
.credit-row__id img { width: 37px; height: 37px; border-radius: 50%; }
.credit-row__name { font-size: var(--fs-nav); --lh: 1; line-height: var(--lh); letter-spacing: -.02em; }
.credit-row .tags { gap: 6px; }

.recent { background: var(--recent-bg); padding-block: clamp(60px, 6.25vw, 100px); }
/* Medzera od štítku po obrázky je polovičná oproti pôvodnej (60 px linka
   + 30 px odsadenie mriežky) — deliaca čiara tu už nie je. */
.recent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 45px; }
.recent__item { display: flex; flex-direction: column; gap: 30px; }
/* Oba rámy majú rovnakú výšku; obrázok ich vyplní a oreže sa po stranách,
   stred záberu ostáva v strede rámu. */
.recent__media {
  aspect-ratio: 690 / 500;
  border-radius: var(--radius);
  background: var(--recent-media);
  overflow: hidden;
}
.recent__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* nadpis zaberá 70 % šírky obrázka nad ním */
.recent__title { font-size: var(--fs-h3); --lh: 1; line-height: var(--lh); letter-spacing: -.02em; max-width: 70%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Medzi 900 a 1200 px je v hlavičke najmenej miesta: dlhé názvy, výzva,
   jazyky aj téma. Medzeru preto škálujeme so šírkou okna. */
@media (max-width: 1240px) {
  .nav__list { gap: clamp(16px, 2.4vw, 36px); }
  .site-footer .nav__list--social { gap: clamp(16px, 2.4vw, 36px); }
}

@media (max-width: 1200px) {
  :root { --col-label: 180px; --logo-s: .55; }
}

@media (max-width: 1024px) {
  /* menšie posuny, aby sa mriežka pri užšom okne nerozpadla do výšky */
  .project-grid .work-card:nth-child(8n+2) { margin-top: 120px; }
  .project-grid .work-card:nth-child(8n+4) { margin-top: 100px; }
  .project-grid .work-card:nth-child(8n+6) { margin-top: 100px; }
  .work-card--right, .work-card--wide { width: 72%; }
  .work-card--left { width: 62%; }
  .programs__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__contacts { width: 100%; }
  .cs-split, .cs-split--flip { grid-template-columns: 1fr; }
  .cs-split .cs-media { aspect-ratio: 1400 / 750; }
  .cs-split--flip .cs-panel { order: 2; }
  .cs-panel { padding: 32px 0; }
}

@media (max-width: 900px) {
  :root { --col-label: 0px; --logo-s: .47; }
  .nav__list, .nav .nav__link--talk { display: none; }
  .nav__toggle { display: block; }
  .nav-menu__list { display: none; }
  .nav { max-width: none; justify-content: flex-end; }
  .site-header { padding-block: 24px; }

  .split, .hero__grid, .programs__head, .cs-review { grid-template-columns: 1fr; }
  .programs .programs__grid { margin-left: 0; }
  /* na úzkom výreze dlaždica zaberá celú šírku, label sa vráti nad ňu */
  .work__head { position: static; margin-bottom: 30px; }
  .scroll-hint { display: none; }
  .hero__main { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hero__claim { font-size: clamp(24px, 5vw, 32px); max-width: none; }
  .founder { align-self: flex-end; }
  .founder__slab { display: none; }

  .intro .lead, .cs-hero__title { text-indent: 0; }
  .cs-hero__label { position: static; display: block; margin-bottom: 16px; }
  .cs-panel__text { text-indent: 0; }

  .work-card--right, .work-card--left, .work-card--wide { width: 100%; margin-left: 0; }
  .work-card__media { aspect-ratio: 4 / 3; }
  .work-card__foot { flex-direction: column; gap: 16px; }

  .recent__grid, .cs-duo { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .footer__contacts { flex-direction: column; gap: 32px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* v stĺpci by pravé zarovnanie odsunulo text od ľavého okraja */
  .footer__legal p + p, .footer__legal .footer-top { margin-left: 0; }
  .credit-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 640px) {
  :root { --logo-s: .55; }

  /* Na telefóne hero nesie len tvrdenie nad videom. Tlačidlo prehrávania
     aj karta so zakladateľom sa v úzkom stĺpci tlačili na seba a brali
     priestor, tak sú skryté. */
  .founder { display: none; }
  .hero__main { gap: 0; }

  /* Čísla: statická mriežka 2 × 2, žiadny posun ani animácia. */
  .stats {
    --stat-size: clamp(47px, 14.3vw, 78px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 24px;   /* väčšia medzera medzi riadkami než medzi stĺpcami */
    width: auto;
    padding-top: clamp(48px, 12vw, 80px);
  }
  /* popisok sa zarovnáva na hornú hranu verzálky čísla — obidva texty
     majú orezaný rám na výšku verzálky, takže flex-start ich posadí presne */
  .stat { gap: 12px; align-items: flex-start; }
  /* pás s číslami potrebuje pod sebou vzduch, inak sa lepí na odsek */
  .intro { padding-top: clamp(64px, 20vw, 96px); }
  /* mriežku nahradí pásmo — plné šírky, od hrany po hranu */
  body.has-logo-marquee .logo-grid { display: none; }
  body.has-logo-marquee .logo-marquee {
    display: block;
    overflow: hidden;
    padding-block: 40px;
    margin-inline: calc(var(--page-x) * -1);
  }
  /* mriežka (bez JS) ostane trojstĺpcová v jednom rade */
  .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .logo-slot:nth-child(n+4) { display: none; }
  .programs__grid { grid-template-columns: 1fr; }
  .about__inner { max-width: none; }
  .about__body { gap: 40px; }
  .orbit { --tile-w: 74vw; }
  .orbit__row { gap: 16px; }
  .orbit__tile { padding: 20px; }
  .btn__label { padding: 16px; }
  .cs-media, .cs-compare { aspect-ratio: 4 / 3; }
  .cs-duo .cs-media { aspect-ratio: 4 / 5; }
  .cs-compare__label--before { left: 12%; }
  .cs-compare__label--after  { left: 42%; }
}

/* ==========================================================================
   Orbit — nekonečná slučka dlaždíc na perspektívnom prstenci
   Dlaždice obiehajú po kruhu v priestore: predná je najväčšia a ostrá,
   bočné utekajú k okrajom, zadné sa zmenšia a rozostria (hĺbka ostrosti).
   Rovina prstenca sa navyše pomaly otáča okolo stredu, takže os, po ktorej
   sa dlaždice zoraďujú, putuje dokola. Rozmery a transformácie počíta JS,
   CSS drží len vzhľad. Bez JS ostane pôvodný scroll-snap karusel.
   ========================================================================== */
.orbit.is-orbit {
  position: relative;
  display: block;
  height: clamp(460px, 52vw, 760px);
  margin-top: clamp(40px, 5vw, 60px);
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.orbit.is-orbit.is-dragging { cursor: grabbing; }
.orbit.is-orbit .orbit__row {
  position: absolute;
  inset: 0;
  display: block;
  gap: 0;
  padding: 0;
}
.orbit.is-orbit .orbit__tile {
  position: absolute;
  top: 0;
  left: 0;
  /* rozmer aj mierku nastavuje JS — pomer strán je 4:3 ako v predlohe */
  width: auto;
  aspect-ratio: auto;
  padding: 24px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transition: none;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, filter;
}
/* dlaždica znesie aj obrázok — text ostane ako popis nad ním */
.orbit.is-orbit .orbit__tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.orbit.is-orbit .orbit__tile > span { position: relative; }

@media (max-width: 900px) {
  .orbit.is-orbit { height: clamp(380px, 64vw, 560px); }
  .orbit.is-orbit .orbit__tile { padding: 18px; }
}
@media (max-width: 640px) {
  .orbit.is-orbit { height: clamp(340px, 82vw, 460px); }
}

/* --- kontakt ako scéna: text leží v strede orbitu ------------------------
   Orbit je samostatná vrstva cez celú sekciu, text sa vykresľuje nad ním.
   `z-index: 0` na orbite drží vlastný stacking context, takže dlaždice
   (ktoré si radí JS až po 1000) nikdy nevylezú nad hlavičku ani preloader. */
.contact--orbit {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(600px, 70vw, 1010px);
  overflow: hidden;
}
/* text sedí vyššie než stred scény — pod ním ostane voľnejšie miesto
   pre prednú dlaždicu, takže sa titulok neprekrýva s ostrým obrázkom */
.contact--orbit > .container { position: relative; z-index: 2; transform: translateY(-320px); }
.contact--orbit .orbit.is-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  margin: 0;
}
@media (max-width: 900px) {
  .contact--orbit { min-height: clamp(480px, 112vw, 640px); }
  .contact--orbit > .container { transform: translateY(-70px); }
}

/* --- dlaždica s obrázkom --------------------------------------------------
   Popis leží nad fotkou, čitateľnosť drží jemný spád zdola. */
.orbit .orbit__tile { position: relative; }
.orbit .orbit__tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.orbit .orbit__tile > span {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.orbit .orbit__tile:has(> img)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(8,7,12,.72) 0%, rgba(8,7,12,.22) 34%, transparent 62%);
}

/* ==========================================================================
   Svetlý režim
   Paleta je postavená na dvojici --bg / --cream (podklad / písmo). Svetlý
   režim ich prehodí, takže aj zámerne obrátené prvky (karta `card--light`,
   vizitka zakladateľa, tlačidlá slidera) ostanú kontrastné — len naopak.
   Bloky, ktoré nesú značkový fialový podklad (pätička, preloader, zásuvka),
   si dole prepíšu tmavé hodnoty späť.
   ========================================================================== */
:root[data-theme='light'] {
  --bg:          #f3f0ea;
  --bg-tile:     #e2ddd2;
  --cream:       #14121c;   /* v svetlom režime je to farba písma */
  --pink:        #5b3fd4;
  --maroon:      #ded3fc;   /* sýtejšia levanduľa, aby na nej karty vystúpili */
  --surface:     #e9e4da;
  --surface-2:   #e3ded4;
  --pink-soft:   #241559;
  --cream-90: rgba(20,18,28,.9);
  --cream-70: rgba(20,18,28,.7);
  --cream-60: rgba(20,18,28,.6);
  --cream-50: rgba(20,18,28,.5);
  --cream-40: rgba(20,18,28,.4);
  --cream-30: rgba(20,18,28,.3);
  --cream-12: rgba(20,18,28,.12);
  --dark-12:  rgba(243,240,234,.14);
  --dark-70:  rgba(243,240,234,.72);
  --hairline:    rgba(20,18,28,.18);
  --recent-bg: linear-gradient(180deg, #efe9ff 0%, #ddd0fc 50%, #c3aef9 78%, #b09af6 100%);
  --recent-media: #b7a3f2;
  --btn-fill:        #d8d5d1;
  --btn-fill-invert: #333139;
  --lead-dim-base: rgba(20,18,28,.22);
  --scrim-panel: rgba(243,240,234,.88);
}

/* Dlaždice orbitu nesú fotky — popis nad nimi ostáva svetlý v oboch režimoch. */
:root[data-theme='light'] .orbit .orbit__tile { color: #eee9e3; }

/* Bloky so značkovým fialovým podkladom ostávajú tmavé aj v svetlom režime. */
:root[data-theme='light'] .hero,
:root[data-theme='light'] .site-footer,
:root[data-theme='light'] .preloader,
:root[data-theme='light'] .nav-drawer {
  /* farbu písma treba prepísať aj priamo — dedí sa z <body>, nie z premennej */
  color: var(--cream);
  --bg:       #08070c;
  --cream:    #eee9e3;
  --pink:     #aa92ff;
  --cream-90: rgba(238,233,227,.9);
  --cream-70: rgba(238,233,227,.7);
  --cream-60: rgba(238,233,227,.6);
  --cream-50: rgba(238,233,227,.5);
  --cream-40: rgba(238,233,227,.4);
  --cream-30: rgba(238,233,227,.3);
  --cream-12: rgba(238,233,227,.12);
  --dark-12:  rgba(8,7,12,.12);
  --dark-70:  rgba(8,7,12,.7);
}

/* Monochromatické ikony sú v assetoch napevno krémové alebo tmavé. Keďže
   podklad pod nimi sa prehodil, prehodíme aj ich — inverzia stačí, sú
   jednofarebné. Pätičkové logo, preloader a fialové bloky sem nespadajú. */
:root[data-theme='light'] .site-header .logo img,
:root[data-theme='light'] img.logo-slot,
:root[data-theme='light'] .logo-slot img,
:root[data-theme='light'] .btn__icon img,
:root[data-theme='light'] .arrow-link img,
:root[data-theme='light'] img[src$="-dark.svg"],
:root[data-theme='light'] img[src$="-light.svg"],
:root[data-theme='light'] img[src*="avatar-placeholder"] {
  filter: invert(1);
}
/* Panel je vždy fialový, jeho ikony sa preto neprevracajú spolu s webom —
   šípka v tlačidle aj krížik musia ostať tmavé. */
:root[data-theme='light'] .cpanel img { filter: none !important; }
/* Hlavička nad hero stojí na tmavom podklade aj v svetlom režime, jej logo
   teda ostáva krémové. Pripnutý pruh je kópia mimo hero, ten sa invertuje. */
:root[data-theme='light'] .hero .site-header .logo img { filter: none; }

/* ---------- prepínač light / dark ---------------------------------------- */
.nav__end { display: flex; align-items: center; gap: 30px; }
/* Prepínač témy je kruh 34 px okolo 16 px ikony — bez korekcie by pri ňom
   medzery vyzerali väčšie ako medzi textami. Zápornou marginou sa rozostupy
   merajú od ikony, nie od klikacej plochy. */
.nav__end .theme-toggle { margin-inline: -9px; }
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: color .25s ease, opacity .25s ease;
}
/* Ikony sa nevymieňajú skokom — jedna vyjde hore von z kruhu a druhá
   nabehne zdola. Kruh ich oreže, takže je vidieť len prechod v ňom. */
.theme-toggle { overflow: hidden; }
.theme-toggle svg {
  width: 16px; height: 16px;
  /* ťah ikony zodpovedá driekom písmen EN/SK vedľa nej (SemiBold 14 px):
     2 jednotky na výkrese 20 px = 1,6 px na obrazovke */
  stroke-width: 2;
  grid-area: 1 / 1;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .26s ease;
}
/* v tmavom režime ponúkame slnko (prepni na svetlo), v svetlom mesiac */
.theme-toggle .theme-toggle__sun { transform: translateY(0); opacity: 1; }
.theme-toggle .theme-toggle__moon { transform: translateY(160%); opacity: 0; }
:root[data-theme='light'] .theme-toggle .theme-toggle__sun { transform: translateY(-160%); opacity: 0; }
:root[data-theme='light'] .theme-toggle .theme-toggle__moon { transform: translateY(0); opacity: 1; }

/* Prepnutie témy: farby na stránke prejdú plynule, nie skokom. Prechod je
   zapnutý len počas prepnutia, aby inak neovplyvňoval ostatné animácie.
   Vyňaté sú prvky, ktoré si farbu riadia samy — lead odsek (podľa scrollu)
   a čísla v štatistikách, ktoré majú byť úplne statické. */
:root[data-theme-anim] body,
:root[data-theme-anim] body *:not(.theme-toggle svg) {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}
/* Zdvojený atribút je len kvôli váhe — plošné pravidlo vyššie má !important. */
:root[data-theme-anim][data-theme-anim] body .lead,
:root[data-theme-anim][data-theme-anim] body .lead *,
:root[data-theme-anim][data-theme-anim] body .stats,
:root[data-theme-anim][data-theme-anim] body .stats * {
  transition: none !important;
}

/* Štatistiky sú čisté čísla — žiadny prechod, animácia ani odkrývanie.
   Podklad pod nimi sa preto prepína rovnako naraz, aby v tej pol sekunde
   nesvietili v starej farbe na novom pozadí. */
.stats, .stats * { transition: none !important; animation: none !important; }
:root[data-theme-anim] body,
:root[data-theme-anim] main,
:root[data-theme-anim] .container { transition-property: color, border-color, fill, box-shadow !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
  :root[data-theme-anim] body,
  :root[data-theme-anim] body * { transition: none !important; }
}
/* hlavička stmavuje odkazy pri prejdení myšou — prepínač sa pridá k nim */
.nav:hover .theme-toggle { opacity: .6; }
.nav .theme-toggle:hover { opacity: 1; }

/* ==========================================================================
   Právne dokumenty ako dialóg
   Cookies a privacy nemajú vlastnú stránku — otvárajú sa z pätičky. Natívny
   <dialog> rieši fokus, Esc aj podklad za sebou, takže netreba vlastnú pascu
   na fokus. Adresa s #cookies alebo #gdpr dialóg otvorí, takže sa dá poslať
   odkazom.
   ========================================================================== */
.legal-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: opacity .25s ease;
}
.legal-link:hover { opacity: .7; }

/* Právne dokumenty sa vysúvajú sprava rovnako ako panel „začnime projekt“ —
   rovnaká šírka, rovnaké odsadenie od okrajov aj rovnaké zaoblenie.
   Ostáva to natívny <dialog>, takže fokus, Esc aj podklad rieši prehliadač;
   posun ovláda JS cez `data-open`, aby sa dal animovať aj odchod. */
.legal-modal {
  position: fixed;
  inset: 16px 16px 16px auto;
  margin: 0;
  width: min(660px, calc(100vw - 32px));
  /* <dialog> má od prehliadača `height: fit-content`; bez `auto` by sa
     neroztiahol medzi horný a dolný okraj, ale narástol podľa obsahu. */
  height: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--cream);
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.legal-modal[data-open='true'] { transform: translateX(0); }
.legal-modal::backdrop {
  background: rgba(8, 7, 12, .78);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  opacity: 0;
  transition: opacity .45s ease;
}
.legal-modal[data-open='true']::backdrop { opacity: 1; }
.legal-modal[open] { display: flex; }
.legal-modal__box { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.legal-modal__head {
  display: flex; align-items: center; gap: 24px;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
}
.legal-modal__title {
  flex: 1; min-width: 0;
  font-size: var(--fs-h2); --lh: 1.2; line-height: var(--lh);
  letter-spacing: -.02em;
}
/* rovnaký krížik ako v paneli „začnime projekt“ */
.legal-modal__close {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--cream-12); color: var(--cream); cursor: pointer;
  transition: background .25s ease;
}
.legal-modal__close svg { width: 16px; height: 16px; }
.legal-modal__close:hover { background: var(--cream-30); }
.legal-modal__body {
  overflow-y: auto;
  /* vzduch patrí obsahu, nie hlavičke — pri posune odchádza spolu s textom */
  padding: clamp(40px, 4.5vw, 64px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
  overscroll-behavior: contain;
}
/* V dialógu bloky nič nerozdeľuje — namiesto liniek ich oddeľuje priestor
   a stlmené číslo. */
.legal-modal .legal__title { font-size: var(--fs-h3); }
.legal-modal .legal__block {
  border: 0;
  padding-block: 0 clamp(28px, 3vw, 40px);
}
.legal-modal .legal__block:last-child { padding-bottom: 0; }

@media (max-width: 640px) {
  .legal-modal { inset: 0; width: 100vw; border-radius: 0; }
  .legal-modal .legal__block { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-modal, .legal-modal__close { transition: none; }
  .legal-modal::backdrop { transition: none; }
}

/* ==========================================================================
   Prepínač jazykov
   Dve skratky vedľa seba, aktívna svieti. Sedí do radu s výzvou a prepínačom
   témy, takže hlavička nerastie o ďalší prvok.
   ========================================================================== */
/* V prepínači je vždy len ten jazyk, na ktorý sa dá prepnúť — aktívny sa
   nezobrazuje, takže netreba ani oddeľovač. */
.lang { display: flex; align-items: center; font-size: var(--fs-mono); }
.lang__item {
  /* bez bočného odsadenia, aby rozostupy v hlavičke merali od písmen */
  padding: 4px 0;
  font-weight: 600;
  color: var(--cream);
  transition: color .25s ease;
}
.lang__item:hover { color: var(--pink); }
.lang__item[aria-current='true'] { display: none; }

@media (max-width: 900px) {
  .lang { order: -1; }
}

/* ==========================================================================
   Zaoblenie obrázkov
   Všetky obrazové plochy majú rovnaké zaoblenie ako štítky pod projektmi
   (`--radius-sm`), aby si web držal jeden polomer. Plochy bez fotky — panel
   About us, kroky v priebehu spolupráce — držia `--radius-lg`.
   ========================================================================== */
.work-card__media,
.work-card__media img,
.orbit__tile,
.orbit__tile > img,
.cs-media,
.recent__media,
.service__media { border-radius: var(--radius-sm); }


/* --- prepínače v mobilnej zásuvke ---
   Na úzkom výreze sa jazyk aj téma presúvajú do vysúvacieho menu, nech
   hlavička ostane na logo a hamburger. */
.nav-drawer__tools { display: none; }

@media (max-width: 900px) {
  .nav__end .lang,
  .nav__end .theme-toggle { display: none; }
  .nav-drawer__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 24px;
    border-top: 1px solid var(--cream-12);
    margin-top: 32px;
  }
  .nav-drawer__tools .lang { font-size: var(--fs-nav); }
  .nav-drawer__tools .lang__item { padding: 6px 10px; }
  .nav-drawer__tools .theme-toggle { width: 40px; height: 40px; }
}

/* --- služby na domovskej stránke ---
   Ten istý rozbaľovací zoznam ako na podstránke Services, len inak zarovnaný:
   celý blok — vrátane deliacich liniek — začína pod nadpisom sekcie
   a znamienko sa presunulo na pravý koniec riadku. */
.programs__services {
  margin-top: clamp(40px, 5vw, 72px);
  margin-left: var(--col-label);
}
.programs__services .service { border-top-color: var(--cream-12); }
.programs__services .service:last-child { border-bottom-color: var(--cream-12); }
.programs__services .service__head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
}
/* Znamienko je v značkách prvé — bez určenia riadku by ho mriežka odsunula
   pod názov. */
.programs__services .service__title { grid-column: 1; grid-row: 1; }
.programs__services .service__sign { grid-column: 2; grid-row: 1; justify-self: end; }
/* blok už je odsadený ako celok, vnútri sa neodsadzuje znova */
.programs__services .service__media { margin-left: 0; }
.programs__services .service__body--plain { padding-left: 0; }

@media (max-width: 900px) {
  .programs__services { margin-left: 0; }
}

/* ==========================================================================
   Stránka s faktami pre AI nástroje
   Suchý, dobre čitateľný výpis — pre človeka aj pre stroj. Preberá bloky
   z právnych stránok, aby web nezískal ďalší vlastný komponent.
   ========================================================================== */
.ai-intro {
  font-size: var(--fs-body-lg); --lh: 1.5; line-height: var(--lh);
  letter-spacing: -.02em; color: var(--cream-70); max-width: 62ch;
  margin-left: var(--col-label);
}
.ai-intro a { color: var(--cream); text-decoration: underline; text-underline-offset: .18em; }
.ai { padding-bottom: clamp(60px, 6vw, 100px); }
.ai-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 40px;
  margin: 0 0 clamp(48px, 5vw, 80px) var(--col-label);
  padding-top: clamp(40px, 4vw, 64px);
}
.ai-fact { display: flex; flex-direction: column; gap: 8px; }
.ai-fact dt { color: var(--cream-40); }
.ai-fact dd { margin: 0; font-size: var(--fs-body); letter-spacing: -.01em; }
.ai-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.ai-list li {
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh);
  color: var(--cream-70); padding-left: 18px; position: relative;
}
.ai-list li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px; background: var(--pink);
}
.ai-list strong { color: var(--cream); font-weight: 600; }
.ai-list a { color: var(--cream); text-decoration: underline; text-underline-offset: .18em; }

/* Bloky sadajú do tej istej osi ako nadpis stránky — číslo ostáva vľavo
   pri okraji, text začína pod nadpisom. */
.ai .legal__block { grid-template-columns: calc(var(--col-label) - 40px) 1fr; }

@media (max-width: 900px) {
  .ai-intro, .ai-facts { margin-left: 0; }
  .ai .legal__block { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   About — príbeh štúdia a ľudia
   Stavia na tých istých komponentoch ako ostatné podstránky: stĺpec so
   štítkom vľavo, obsah v pravom stĺpci, takže texty sedia na rovnakej osi
   ako nadpis stránky.
   ========================================================================== */
.about-page { padding-bottom: clamp(48px, 5vw, 80px); }
.story { display: grid; gap: clamp(18px, 1.8vw, 26px); max-width: 60ch; }
.story__text {
  font-size: var(--fs-body-lg); --lh: 1.5; line-height: var(--lh);
  letter-spacing: -.01em; color: var(--cream-70);
}
.story__text:first-child { color: var(--cream); }
/* štatistiky si nesú vlastné odsadenie zhora, sekcia ho už nepridáva */
.about-page__stats .stats { padding-top: clamp(48px, 6vw, 96px); }

.about-page__team { padding-bottom: clamp(60px, 6vw, 100px); }
.team__title { font-size: var(--fs-h1); --lh: 1.3; line-height: var(--lh); letter-spacing: -.02em; }
.team__intro {
  margin-top: 20px; max-width: 52ch;
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); color: var(--cream-40);
}

.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) 20px;
  padding-top: clamp(40px, 4.5vw, 72px);
}
.member__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--cream-12);
  display: grid; place-items: center;
}
.member__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member__initials {
  font-family: var(--font-mono); font-size: clamp(28px, 3vw, 44px); font-weight: 500;
  color: var(--cream-30); letter-spacing: .02em;
}
.member__name {
  margin-top: 20px;
  font-size: var(--fs-h3); --lh: 1.3; line-height: var(--lh); letter-spacing: -.01em;
}
.member__role { margin-top: 8px; color: var(--pink); }
.member__note {
  margin-top: 12px; max-width: 34ch;
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); color: var(--cream-40);
}

@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .story, .team__intro, .member__note { max-width: none; }
  .about-page__stats .stats { padding-top: clamp(36px, 6vw, 56px); }
}
@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Nevyplnený odkaz na sociálnu sieť — stlmený text bez interakcie.
   Doplnením adresy v obsahu sa z neho automaticky stane odkaz. */
.link-off { color: var(--cream-30); cursor: default; }
.tag--off { color: var(--cream-30); pointer-events: none; }

/* ==========================================================================
   Karusel v case study
   Vodorovný pás kariet, ktorý sa posúva prstom, kolieskom alebo prúžkami
   pod ním. Beží na natívnom scrollovaní so zarážkami — žiadna knižnica,
   takže funguje aj bez JS (vtedy ostane obyčajný posuvný pás).
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.cs-carousel { display: grid; gap: clamp(28px, 3vw, 48px); }
.cs-carousel__head { display: grid; gap: 16px; }
/* bez štítka aj nadpisu hlavička zmizne aj s medzerou nad pásom */
.cs-carousel__head:not(:has(*)) { display: none; }
.cs-carousel__title {
  font-size: var(--fs-h1); --lh: 1.2; line-height: var(--lh); letter-spacing: -.02em;
  max-width: 20ch;
}

.cs-carousel__track {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  overflow-x: auto;
  align-items: start;
  scroll-snap-type: x mandatory;
  /* zarážka je na osi obsahu, nie na hrane okna */
  scroll-padding-inline-start: var(--page-x);
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* pás siaha po okraj okna, prvá karta ostáva na osi obsahu */
  margin-inline: calc(var(--page-x) * -1);
  padding-inline: var(--page-x);
  padding-bottom: 4px;
  outline-offset: 8px;
}
.cs-carousel__track::-webkit-scrollbar { display: none; }
/* ťahanie myšou: kurzor drží ruku a text sa pri ňom neoznačuje */
.cs-carousel__track { cursor: grab; }
.cs-carousel__track.is-dragging { cursor: grabbing; user-select: none; }
.cs-carousel__track.is-dragging img,
.cs-carousel__track.is-dragging video { pointer-events: none; }

.cs-carousel__slide {
  flex: 0 0 clamp(260px, 48%, 640px);
  margin: 0;
  scroll-snap-align: start;
  display: grid;
  gap: clamp(20px, 2vw, 32px);
  align-content: start;
}
.cs-carousel__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.cs-carousel__media img,
.cs-carousel__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-carousel__caption { display: grid; gap: 12px; }
.cs-carousel__slide-title { font-size: var(--fs-h3); --lh: 1.2; line-height: var(--lh); letter-spacing: -.02em; }
.cs-carousel__text {
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); color: var(--cream-60);
  max-width: 42ch;
}

/* Ukazovateľ je jedna čiara v strede pod pásom. Bežec na nej má šírku aj
   polohu odvodenú z pomeru „koľko je vidieť ku celej dĺžke pásu“ — je to
   teda zmenšenina posunu, nie delenie na počet kariet. */
/* pod ukazovateľom je odstup, aby sa nelepil na ďalší blok case study */
.cs-carousel__bars { display: flex; justify-content: center; padding-bottom: 90px; }
.cs-carousel__bar {
  position: relative; overflow: hidden;
  width: min(420px, 60%); height: 2px;
  background: var(--cream-12); cursor: pointer;
}
.cs-carousel__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 25%; background: var(--cream);
  will-change: transform, width;
}


@media (max-width: 900px) {
  .cs-carousel__slide { flex-basis: min(82%, 420px); }

}
@media (prefers-reduced-motion: reduce) {
  .cs-carousel__track { scroll-behavior: auto; }
}

/* ==========================================================================
   Panel „začnime projekt“
   Výzva v hlavičke neodvedie na inú stránku — sprava sa vysunie panel s
   formulárom. Kým sa JS nespustí, panel je skrytý a odkaz vedie na kontakt,
   takže bez skriptu web funguje ako predtým.
   ========================================================================== */
.panel-scrim {
  position: fixed; inset: 0; z-index: 90;
  /* zákryt je v oboch režimoch tmavý — panel tak vždy vystúpi dopredu */
  background: rgba(8, 7, 12, .78);
  /* obsah pod panelom sa rozostrí, aby formulár čítal ako popredie */
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  opacity: 0;
  /* zavretý zákryt nesmie brať kliky — inak by prekryl celú stránku */
  pointer-events: none;
  transition: opacity .45s ease;
}
.panel-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.cpanel {
  position: fixed; z-index: 91;
  top: 16px; right: 16px; bottom: 16px;
  width: min(660px, calc(100vw - 32px));
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.cpanel { pointer-events: none; }
.cpanel[data-open='true'] { transform: translateX(0); pointer-events: auto; }
.cpanel__inner {
  height: 100%; overflow-y: auto;
  /* rovnaký okraj zo všetkých strán, o 40 % užší než predtým */
  padding: clamp(17px, 2.1vw, 29px);
  display: grid; gap: clamp(24px, 2.5vw, 36px); align-content: start;
}

/* krížik sedí na osi nadpisu, nie pri hornej hrane panela */
.cpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cpanel__title { font-size: var(--fs-h1); --lh: 1.2; line-height: var(--lh); letter-spacing: -.02em; }
.cpanel__close {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--cream-12); color: var(--cream);
  cursor: pointer; transition: background .25s ease;
}
.cpanel__close:hover { background: var(--cream-30); }
.cpanel__close svg { width: 16px; height: 16px; }

.cpanel__text {
  /* text sedí tesnejšie pod nadpisom než ostatné bloky panela */
  margin-top: calc(clamp(24px, 2.5vw, 36px) * -1 + 10px);
  font-size: var(--fs-body); --lh: 1.1; line-height: var(--lh); color: var(--cream-60);
  max-width: 46ch;
}
/* Polia musia rešpektovať šírku panela — bez minmax(0,…) by si mriežka
   nechala prerásť stĺpec na vlastnú šírku vstupov a formulár by vytekal. */
.cpanel__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.cpanel__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cpanel__row .field { margin: 0; }
.cpanel__form .field { min-width: 0; }
.cpanel__form input,
.cpanel__form select,
.cpanel__form textarea { width: 100%; min-width: 0; }
.cpanel__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Kontakty pod čiarou stoja vedľa seba, štítok je nad hodnotou. */
.cpanel__foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  /* pod čiarou rovnaká medzera ako nad ňou (rozostup blokov panela) */
  gap: 20px; padding-top: clamp(24px, 2.5vw, 36px); border-top: 1px solid var(--cream-12);
}
.cpanel__contact { display: grid; gap: 6px; align-content: start; }
/* zväčšená je len hodnota, štítok ostáva v bežnej veľkosti */
.cpanel__contact-label { color: var(--cream-40); }
.cpanel__contact-value { font-size: calc(var(--fs-body) * 1.25); letter-spacing: -.01em; }
.cpanel__contact-value { color: var(--cream); transition: color .25s ease; }
.cpanel__contact:hover .cpanel__contact-value { color: var(--pink); }

/* kým beží panel, stránka pod ním nescrolluje */
body[data-panel='open'] { overflow: hidden; }

@media (max-width: 620px) {
  .cpanel { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .cpanel__row { grid-template-columns: 1fr; }
  .cpanel__foot { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cpanel, .panel-scrim { transition: none; }
}

/* --- panel v značkovej fialovej ---------------------------------------
   Panel je jediná plocha, ktorá vždy nesie fialovú — v svetlom aj tmavom
   režime rovnako. Vnútri sa preto prevrátia farebné tokeny: text a polia
   idú do tmavej, takže sa nič nemusí prefarbovať po jednom. */
.cpanel {
  /* v oboch režimoch tá istá fialová — nie tá stmavená pre svetlý web */
  background: #aa92ff;
  color: #08070c;
  --cream:    #08070c;
  --cream-90: rgba(8,7,12,.9);
  --cream-70: rgba(8,7,12,.72);
  --cream-60: rgba(8,7,12,.62);
  --cream-50: rgba(8,7,12,.5);
  --cream-40: rgba(8,7,12,.55);
  --cream-30: rgba(8,7,12,.42);
  --cream-12: rgba(8,7,12,.1);
}
/* jednotné zaoblenie 4 px — plocha panela aj všetko v ňom */
.cpanel { border-radius: 4px; }
.cpanel .field input,
.cpanel .field textarea,
.cpanel .field select,
.cpanel .pill span,
.cpanel .consent__box { border-radius: 4px !important; }
/* tlačidlo si drží pôvodné zaoblenie */
.cpanel .btn__label { border-radius: var(--radius); }
/* šípka selectu aj ohraničenie pri fokuse musia byť tmavé, nie fialové */
.cpanel .field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2308070C' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cpanel .field select:hover,
.cpanel .field select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2308070C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* v paneli sa nič neobkresľuje — stav ukazuje výplň, nie obrys */
.cpanel .field input,
.cpanel .field textarea,
.cpanel .field select,
.cpanel .field input:focus,
.cpanel .field textarea:focus,
.cpanel .field select:focus { border-color: transparent; outline: none; }
.cpanel .field select option { background: var(--bg); color: #eee9e3; }
.cpanel .form__note[data-state='error'] { color: #7a1030; }

/* tlačidlo na fialovej: tmavá výplň a svetlý text */
.cpanel .btn--sm .btn__label { background: #08070c; color: #eee9e3; }
/* vnútri panela majú pilulky aj tlačidlo rovnaké zaoblenie ako vypĺňané polia */
.cpanel .pill span,
.cpanel .btn--sm .btn__label { border-radius: var(--radius); }

/* Vybraná pilulka aj vyplnený riadok svietia na bielo — na fialovej je hneď
   vidieť, čo je hotové a čo ešte nie. */
.cpanel .pill input:checked + span { background: #eee9e3; color: #08070c; }
.cpanel .field input:not(:placeholder-shown),
.cpanel .field textarea:not(:placeholder-shown),
.cpanel .field input:focus,
.cpanel .field textarea:focus {
  background-color: #eee9e3;
  color: #08070c;
}
.cpanel .field input:focus::placeholder,
.cpanel .field textarea:focus::placeholder { color: rgba(8,7,12,.4); }
/* Bublina je svetlá, štítok tmavý — pri prehodení strán je tak vidieť, čo sa
   hýbe. Farby sú tu napevno, nie cez tokeny, aby tlačidlo vyzeralo rovnako
   v tmavom aj svetlom režime a neprebilo ho žiadne tematické pravidlo. */
.cpanel .btn__icon { background: #eee9e3 !important; }
.cpanel .btn__label { background: #08070c !important; color: #eee9e3 !important; }

/* Šípka na odoslanie mieri šikmo nahor a neotáča sa ako plus — otáčanie sa
   hodí k „otvoriť“, nie k „odoslať“. */
.cpanel .btn__icon img,
.form .contact__actions .btn__icon img { transform: rotate(-45deg) !important; }

/* Odosielacie tlačidlo je hlavná akcia formulára — asi 1,7× väčšie než
   bežné malé tlačidlo. Platí v paneli aj na kontaktnej stránke. */
.cpanel .btn--sm .btn__icon,
.form .contact__actions .btn--sm .btn__icon { padding: 17px; }
.cpanel .btn--sm .btn__icon img,
.form .contact__actions .btn--sm .btn__icon img { width: 22px; height: 22px; }
.cpanel .btn--sm .btn__label,
.form .contact__actions .btn--sm .btn__label { padding: 24px 26px; font-size: var(--fs-body); }

/* Formulár na kontakte dýcha rovnako ako panel. */
.contact-grid .form { gap: 40px; }
.contact-grid .form .form__row { gap: 40px; }

.cpanel .cpanel__close { background: rgba(8,7,12,.12); color: #08070c; }
.cpanel .cpanel__close:hover { background: rgba(8,7,12,.24); }
.cpanel .cpanel__contact-value { color: #08070c; }
.cpanel .cpanel__contact:hover .cpanel__contact-value { color: rgba(8,7,12,.6); }
.cpanel .cpanel__foot { border-top-color: rgba(8,7,12,.18); }

/* --- pilulky namiesto rozbaľovacích zoznamov --------------------------- */
/* skupina pilulek sa správa ako každé iné pole — rovnaká medzera pod
   popiskom aj medzi poľami */
.cpanel__choice { display: flex; flex-direction: column; gap: 10px; }
.cpanel__choice .field__label { margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { cursor: pointer; position: relative; }
.pill input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
}
.pill span {
  display: inline-block;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--cream-12);
  color: var(--cream-60);
  /* rovnaké písmo aj veľkosť ako vo vypĺňaných poliach nad nimi */
  font-size: var(--fs-body);
  letter-spacing: normal;
  transition: background .25s ease, color .25s ease;
}
.pill:hover span { background: var(--cream-30); color: var(--cream); }
/* vybraná pilulka je plná; pri ovládaní klávesnicou sa vyplní rovnako,
   obrys netreba */
.pill input:checked + span,
.pill input:focus-visible + span { background: var(--cream); color: var(--bg); }

/* V paneli sú farebné tokeny prevrátené, tak si pilulky nesú vlastné farby:
   tmavý text na priehľadnej ploche, vybraná biela. */
.cpanel .pill span { background: rgba(8,7,12,.1); color: rgba(8,7,12,.62); }
.cpanel .pill:hover span { background: rgba(8,7,12,.18); color: #08070c; }
.cpanel .pill input:checked + span,
.cpanel .pill input:focus-visible + span { background: #eee9e3; color: #08070c; }

/* Tlačidlá držia farby tmavej verzie aj na svetlom webe — sú to značkové
   prvky, nie plochy, ktoré by sa mali prefarbovať s režimom. */
:root[data-theme='light'] .btn {
  --btn-fill: #242226;
  --btn-fill-invert: #d2cec9;
}
:root[data-theme='light'] .btn__icon { background: #aa92ff; }
:root[data-theme='light'] .btn__label { color: #eee9e3; }
:root[data-theme='light'] .btn--sm .btn__label { background: #1f0846; color: #eee9e3; }
:root[data-theme='light'] .btn--ghost .btn__label { color: #eee9e3; }

/* --- povinné polia a súhlas so spracovaním údajov ---------------------- */
.field__req { color: var(--pink); margin-left: .25em; }
.cpanel .field__req { color: #08070c; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; cursor: pointer;
  position: relative;
}
.consent input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
}
.consent__box {
  width: 22px; height: 22px; margin-top: 2px;
  border-radius: var(--radius-sm);
  background: var(--cream-12);
  display: grid; place-items: center;
  transition: background .25s ease;
}
.consent__box::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.consent:hover .consent__box { background: var(--cream-30); }
.consent input:checked + .consent__box { background: var(--cream); }
.consent input:checked + .consent__box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--pink); outline-offset: 3px; }
.consent__text {
  font-size: var(--fs-mono); --lh: 1.6; line-height: var(--lh); color: var(--cream-60);
}
.consent__text a { color: var(--cream); text-decoration: underline; text-underline-offset: .18em; }
.cpanel .consent__text a { color: #08070c; }
/* v paneli sú tokeny prevrátené — zaškrtnutý štvorček preto nastavíme priamo:
   biela plocha, tmavá fajka */
.cpanel .consent input:checked + .consent__box { background: #eee9e3; }
.cpanel .consent input:checked + .consent__box::after { border-color: #08070c; }
.cpanel .consent input:focus-visible + .consent__box { outline-color: #08070c; }

/* výzva v mobilnej zásuvke otvára ten istý panel ako v hlavičke */
.nav-drawer__cta {
  display: inline-block;
  font-size: var(--fs-nav); letter-spacing: -.02em;
  color: var(--pink);
  margin-top: 24px;
}

/* ==========================================================================
   Kariéra
   Zoznam otvorených pozícií; bez nich ostane len výzva napísať.
   ========================================================================== */
.jobs { padding-bottom: clamp(60px, 6vw, 100px); }
.jobs__list { display: grid; gap: clamp(28px, 3vw, 44px); }
.job { display: grid; gap: 14px; padding-top: clamp(24px, 2.5vw, 36px); border-top: 1px solid var(--cream-12); }
.job:first-child { padding-top: 0; border-top: 0; }
.job__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.job__title { font-size: var(--fs-h2); --lh: 1.2; line-height: var(--lh); letter-spacing: -.02em; }
.job__type { color: var(--pink); }
.job__text {
  font-size: var(--fs-body); --lh: 1.6; line-height: var(--lh); color: var(--cream-60);
  max-width: 62ch;
}
.jobs__empty {
  font-size: var(--fs-body-lg); --lh: 1.4; line-height: var(--lh); color: var(--cream-60);
  max-width: 52ch;
}
.jobs__apply {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(40px, 4vw, 64px);
}
.jobs__note { color: var(--cream-40); max-width: 44ch; }