:root{
  --type-accent:#C1272D;
  --paper:#F4F0E8;
  --paper-deep:#EAE3D6;
  --ink:#201F1D;
  --indigo:#2E4057;
  --indigo-soft:#8B9DAE;
  --stone:#C9C2B4;
  --moss:#828F73;
  --bengara:#B15A45;
  --max-w:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
a, button{ cursor:none; }

::selection{ background:var(--indigo); color:var(--paper); }

a{ color:inherit; text-decoration:none; }

img, svg{ display:block; max-width:100%; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 32px;
}

/* Nadpis, ktorý má na širokej obrazovke držať druhý riadok pokope.
   Na telefóne sa zákaz zalomenia ruší — dlhší nemecký text by inak
   pretiekol okraj stránky. */
.nezalamovat{ white-space:nowrap; }
@media (max-width:700px){
  .nezalamovat{ white-space:normal; }
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--ink);
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-weight:300;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--indigo);
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--indigo);
  display:inline-block;
}

/* ---------- Visible focus for accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:4px;
}

/* ---------- Stitch divider — signature motif ---------- */
.stitch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0;
  width:100%;
}
.stitch span{
  width:1px;
  height:16px;
  background:var(--stone);
  transform:rotate(20deg);
}
.stitch.dense span{ height:22px; }

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,240,232,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stone);
}
/* Výšku baneru určuje priemer obiehajúceho nápisu — odsadenie
   je len tesný dych okolo neho. */
.nav{
  display:flex;
  align-items:center;
  /* space-between by prebytočné miesto rozdelilo medzi skupiny a lišta by sa
     roztiahla cez celú šírku. Značka ostáva vľavo, navigácia, prepínač jazykov
     a tlačidlo tvoria kompaktnú skupinu vpravo. */
  justify-content:flex-start;
  gap:18px;
  /* Iba zvislé odsadenie — skratka `padding:12px 0` rušila bočných 32 px
     z .wrap a lišta sa pod 1180 px dotýkala okraja obrazovky. */
  padding-top:12px;
  padding-bottom:12px;
}
.wordmark{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1;
}
.wordmark-group{
  display:flex;
  align-items:center;
  gap:12px;
  perspective:600px;
}
.logo-orbit{
  position:relative;
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  perspective:600px;
}
.logo-mark{
  height:58px;
  width:auto;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  animation:logo-spin 7s linear infinite;
}
@keyframes logo-spin{
  from{ transform:rotateY(0deg); }
  to{ transform:rotateY(360deg); }
}
.logo-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  animation:ring-orbit 24s linear infinite;
}
.logo-ring text{
  font-family:'JetBrains Mono', monospace;
  font-weight:300;
  font-size:12px;      /* pri menšom prstenci sa písmo zmenšuje spolu s SVG */
  letter-spacing:0.12em;
  fill:var(--indigo);
}
@keyframes ring-orbit{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.nav > nav{ margin-left:auto; }
.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
  font-size:14px;
  letter-spacing:0.03em;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
  white-space:nowrap;   /* dlhšie ukrajinské a nemecké názvy sa nelámu v strede */
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--indigo);
  transition:width .35s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }
.nav-links a.active{ color:var(--indigo); }
.nav-links a.active::after{ width:100%; }

/* Rovnaké prevedenie ako hero tlačidlo: tmavé, po najazde sa vyprázdni */
.nav-cta{
  /* Tlačidlo je magnetické a pri kurzore sa posúva až o 8 px. Odstup zľava
     musí byť väčší, inak by pri pohybe prekrylo posledný jazyk (UA). */
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  padding:10px 22px;
  font-size:13px;
  letter-spacing:0.04em;
  transition:background .3s ease, color .3s ease;
}
.nav-cta:hover{ background:transparent; color:var(--ink); }

.menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  /* Prúžky ostávajú 24 px široké, dotyková plocha okolo nich má 44 px —
     to je najmenší cieľ, ktorý sa dá na telefóne spoľahlivo trafiť. */
  width:44px;
  height:44px;
  padding:0;
}
.menu-btn span{ width:24px; height:1px; background:var(--ink); }

/* ---------- Rozbalené menu na telefóne ----------
   Panel sa zavesí pod hlavičku podľa jej skutočnej výšky (--vyska-hlavicky
   meria skript), aby neprekryl logo. Mimo mobilného zlomu trieda nerobí nič,
   takže po otočení telefónu na šírku sa navigácia vráti do riadku. */
@media (max-width: 1060px){
  .nav-links.je-otvorene{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:var(--vyska-hlavicky, 117px);
    left:0;
    right:0;
    background:var(--paper);
    padding:8px 32px 16px;
    border-bottom:1px solid var(--stone);
    box-shadow:0 18px 30px -24px rgba(32,31,29,.45);
    z-index:60;
  }
  .nav-links.je-otvorene li{ border-top:1px solid var(--paper-deep); }
  .nav-links.je-otvorene li:first-child{ border-top:none; }
  .nav-links.je-otvorene a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding-bottom:0;
    font-size:15px;
  }
  .nav-links.je-otvorene a::after{ display:none; }
}

/* ---------- Horná lišta na telefóne ----------
   Značka, štyri jazyky, tlačidlo a hamburger sa do 375 px nezmestia
   pri plných 32 px okrajoch — preto je tu lišta tesnejšia a obiehajúca
   značka menšia. Hamburger sa nesmie stlačiť pod 44 px. */
@media (max-width: 560px){
  .nav{
    gap:10px;
    padding-left:20px;
    padding-right:20px;
  }
  .logo-orbit{ width:72px; height:72px; }
  .jazyky{ gap:6px; }
  .nav-cta{ padding-left:14px; padding-right:14px; }
}
.menu-btn{ flex-shrink:0; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding:76px 0 64px;
  border-bottom:1px solid var(--stone);
}
.page-hero h1{
  font-size:clamp(36px,5vw,58px);
  margin-top:18px;
  font-weight:400;
  max-width:20ch;
}
.page-hero p{
  max-width:56ch;
  margin-top:22px;
  font-size:17px;
  color:#4a4844;
}

/* Vodoznak loga v hero — v pravej polovici, zvisle v strede textu.
   Rovnaká poloha ako mal blok ikon na stránke Proces, o 50 % väčší. */
.page-hero--znak .wrap{ position:relative; }
/* text sa nikdy nedotkne vodoznaku ani na užších obrazovkách */
.page-hero--znak p{ max-width:min(56ch, 50%); }
.hero-vodoznak{
  position:absolute;
  left:70.5%;
  top:50%;
  transform:translate(-50%, -50%);
  width:clamp(225px, 25vw, 360px);
  height:auto;
  opacity:.07;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
@media (max-width: 900px){
  .hero-vodoznak{ left:auto; right:0; width:clamp(150px, 30vw, 240px); }
}

/* ---------- Hero so siedmimi krokmi ----------
   Text vľavo, ikony krokov vpravo v poradí 01 → 07. */
.page-hero--kroky .wrap{
  display:grid;
  grid-template-columns:1fr 1.16fr;
  gap:56px;
  align-items:center;
}
.hero-kroky{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* vodorovné vycentrovanie, aj neúplného radu */
  align-content:center;     /* dva rady vycentrované vo výške textu */
  align-items:center;
  align-self:stretch;       /* blok je vysoký presne ako text vedľa neho */
  gap:26px 22px;
}
.hero-krok{
  flex:0 0 calc(25% - 17px);   /* 4 v rade pri medzere 22 px */
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
/* Ikony majú priehľadné pozadie priamo v súbore — nepotrebujú žiadne
   prelínanie, takže sa biely podklad neobjaví v žiadnom stave.
   Bez animácie: ikony sú viditeľné hneď po načítaní. */
.hero-krok img{
  width:100%;
  height:auto;
  aspect-ratio:560/430;
  object-fit:contain;
}
.hero-krok figcaption{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
  text-align:center;
  opacity:.8;
}

/* Na užších obrazovkách vrátime stĺpcom rovnováhu, aby sa nadpis
   nezalamoval do troch riadkov. */
@media (max-width: 1240px){
  .page-hero--kroky .wrap{ grid-template-columns:1fr 1fr; gap:44px; }
}
@media (max-width: 1120px){
  .nav-links{ gap:22px; }
}
@media (max-width: 1060px){
  .nav{ gap:14px; }
}
@media (max-width: 900px){
  .page-hero--kroky .wrap{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width: 560px){
  .hero-krok{ flex:0 0 calc(50% - 11px); }
}


/* ---------- Hero: cesta od fotiek ku knihe ----------
   Štyri kroky v mriežke 2×2. Číslo nesie poradie, popis pomenúva krok.
   Rámiky majú rovnaké prevedenie ako pôvodná hero fotografia. */
.hero-cesta{
  list-style:none;
  width:100%;
  /* 0.75 = pomer 4:3 pri dvoch stĺpcoch; 150 px = popisky, medzery a odsadenie */
  max-width:min(860px, calc((100svh - var(--vyska-hlavicky, 117px) - 150px) / 0.75 + 28px));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 28px;
}
.hero-cesta__krok{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  column-gap:10px;
  row-gap:11px;
  /* viditeľné hneď; animácia je len ozdoba */
  animation:cesta-prichod .85s cubic-bezier(.22,1,.36,1) backwards;
}
.hero-cesta__krok:nth-child(1){ animation-delay:.10s; }
.hero-cesta__krok:nth-child(2){ animation-delay:.25s; }
.hero-cesta__krok:nth-child(3){ animation-delay:.40s; }
.hero-cesta__krok:nth-child(4){ animation-delay:.55s; }
@keyframes cesta-prichod{
  from{ transform:translateY(16px); }
  to{ transform:none; }
}

.hero-cesta__ramik{
  grid-column:1 / -1;
  position:relative;
  margin:0;
  aspect-ratio:4/3;
  border:1px solid var(--stone);
  overflow:hidden;
  filter:drop-shadow(0 18px 24px rgba(32,31,29,0.16));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.hero-cesta__ramik img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
/* svetlá linka vnútri rámika — rovnaký motív ako mala hero fotografia */
.hero-cesta__ramik::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(244,240,232,0.42);
  pointer-events:none;
}
.hero-cesta__krok:hover .hero-cesta__ramik{ transform:translateY(-5px); }

.hero-cesta__cislo{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--indigo-soft);
}
.hero-cesta__popis{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
}

/* VYNÚTENÉ: reduce-motion sa ignoruje (nemožná podmienka min-width:100000px), animácie bežia vždy */
@media (prefers-reduced-motion: reduce) and (min-width:100000px){
  .hero-cesta__krok{ animation:none; }
  .hero-cesta__ramik{ transition:none; }
}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  padding:36px 0;
  overflow:hidden;
  /* celá sekcia sa zmestí pod baner na jednu obrazovku */
  min-height:calc(100svh - var(--vyska-hlavicky, 117px));
  display:flex;
  align-items:center;
}
/* Hero a O ateliéri dostávajú širší pás než zvyšok stránky,
   aby fotografie mohli narásť bez uberania miesta textu. */
.hero .wrap,
.about .wrap{ max-width:1320px; }

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;   /* fotografii patrí väčšia polovica */
  gap:48px;
  align-items:center;
}
.hero h1{
  font-size:clamp(40px, 6vw, 74px);
  line-height:1.08;
  font-weight:400;
  max-width:16ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--indigo);
}
.hero p{
  max-width:44ch;
  margin-top:26px;
  font-size:17px;
  color:#4a4844;
}
.hero p.tagline{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  color:var(--indigo);
  margin-top:20px;
  max-width:34ch;
}

.hero-in{
  opacity:0;
  transform:translateX(-48px);
  animation:hero-slide-in .9s cubic-bezier(.25,.46,.45,.94) forwards;
}
.hero-in-1{ animation-delay:.1s; }
.hero-in-2{ animation-delay:.25s; }
.hero-in-3{ animation-delay:.45s; }
.hero-in-4{ animation-delay:.6s; }
.hero-in-5{ animation-delay:.8s; }
@keyframes hero-slide-in{
  to{ opacity:1; transform:translateX(0); }
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:40px;
  flex-wrap:wrap;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
  font-family:inherit;
  font-weight:inherit;
  padding:16px 34px;
  font-size:14px;
  letter-spacing:0.05em;
  border:1px solid var(--ink);
  transition:background .3s ease, color .3s ease, transform .3s ease;
  display:inline-block;
}
.btn-primary:hover{ background:transparent; color:var(--ink); }

.link-underline{
  font-size:14px;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--stone);
  padding-bottom:3px;
  transition:border-color .3s ease;
}
.link-underline:hover{ border-color:var(--ink); }

/* Hero / about photo (and their placeholders) */
.hero-photo-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-photo{
  position:relative;
  width:100%;
  max-width:860px;
  aspect-ratio:4/3;
  border:1px solid var(--stone);
  overflow:hidden;
  filter:drop-shadow(0 24px 30px rgba(32,31,29,0.18));
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  opacity:0;
  transition:opacity 2.6s ease-out;
}
.hero-photo.img-in img{ opacity:1; }
.hero-photo::after{
  content:"";
  position:absolute;
  inset:26px;
  border:1px solid rgba(244,240,232,0.45);
  pointer-events:none;
}

/* ---------- Section shared ---------- */
section{ padding:110px 0; }
.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head h2{
  font-size:clamp(30px,4vw,46px);
  margin-top:18px;
  font-weight:400;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.6s ease-out, transform 1.6s ease-out;
}
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal .gallery-card,
.reveal .price-card,
.reveal .t-card{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.4s ease-out, transform 1.4s ease-out;
}
.reveal.in .gallery-card,
.reveal.in .price-card,
.reveal.in .t-card{
  opacity:1;
  transform:translateY(0);
}

.reveal .process-item{
  opacity:0;
  transform:translateX(-140px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in .process-item{
  opacity:1;
  transform:translateX(0);
}
.reveal.in .process-item:nth-child(1){ transition-delay:0s; }
.reveal.in .process-item:nth-child(2){ transition-delay:.8s; }
.reveal.in .process-item:nth-child(3){ transition-delay:1.6s; }
.reveal.in .process-item:nth-child(4){ transition-delay:2.4s; }
.reveal.in .process-item:nth-child(5){ transition-delay:3.2s; }
.reveal.in .process-item:nth-child(6){ transition-delay:4.0s; }
.reveal.in .process-item:nth-child(7){ transition-delay:4.8s; }
.reveal.in .process-item:nth-child(8){ transition-delay:5.6s; }
.reveal.in .gallery-card:nth-child(1){ transition-delay:.05s; }
.reveal.in .gallery-card:nth-child(2){ transition-delay:.2s; }
.reveal.in .gallery-card:nth-child(3){ transition-delay:.35s; }
.reveal.in .price-card:nth-child(1){ transition-delay:.05s; }
.reveal.in .price-card:nth-child(2){ transition-delay:.25s; }
.reveal.in .price-card:nth-child(3){ transition-delay:.45s; }
.reveal.in .t-card:nth-child(1){ transition-delay:.05s; }
.reveal.in .t-card:nth-child(2){ transition-delay:.25s; }
.reveal.in .t-card:nth-child(3){ transition-delay:.45s; }

/* ---------- About ---------- */
.about{
  border-top:1px solid var(--stone);
  min-height:calc(100svh - var(--vyska-hlavicky, 117px));
  display:flex;
  align-items:center;
  padding:22px 0;
}
.about .section-head{ margin-bottom:26px; }
.about-text p{ margin-bottom:16px; }
.about-akcia{ margin-top:26px; }
.about-akcia .btn-primary{ border:none; }
.about-akcia .btn-primary:hover{ background:var(--indigo); color:var(--paper); }
.about-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;   /* fotografia dostane viac miesta než text */
  gap:60px;
  align-items:center;
}
.about-visual{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  border:1px solid var(--stone);
  overflow:hidden;
}
.about-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(1.02);
}
.about-visual::after{
  content:"";
  position:absolute;
  inset:26px;
  border:1px solid rgba(244,240,232,0.45);
  pointer-events:none;
}
.about-text p{
  font-size:17px;
  color:#4a4844;
  margin-bottom:22px;
  max-width:52ch;
}
/* Úvodný claim je hlavná veta sekcie — dostáva váhu nadpisu
   a oddeľovaciu linku, aby sa neplietol s bežným odstavcom. */
.about-text p.claim{
  font-family:'Cormorant Garamond', serif;
  /* veľkosť viazaná na šírku okna, aby sa veta vždy zmestila do jedného riadka */
  font-size:clamp(14px, 2.2vw, 28px);
  line-height:1.3;
  font-style:italic;
  color:var(--indigo);
  white-space:nowrap;
  max-width:none;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--stone);
}
.key{ color:#47586A; font-style:italic; font-weight:700; font-size:1.06em; }

/* Claim drží jeden riadok vďaka veľkosti viazanej na šírku okna, tá však má
   spodnú hranicu 14 px. Na najužších telefónoch dlhšie jazyky (ukrajinčina,
   nemčina) pri nej pretečú — tam vetu radšej zalomíme na dva riadky.
   min-width:0 je poistka: .about je flex, bez nej by jeho obsah dokázal
   roztiahnuť celú stránku do šírky. */
@media (max-width:400px){
  .about-text p.claim{ white-space:normal; }
}
.about > .wrap{ min-width:0; }

/* ---------- Process ---------- */
.process{ background:var(--paper-deep); border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }
.process-list{ list-style:none; }
.process-item{
  display:grid;
  grid-template-columns:90px 1fr 1.3fr;
  gap:28px;
  align-items:baseline;
  padding:34px 0;
  border-top:1px solid var(--stone);
}
.process-list li:last-child{ border-bottom:1px solid var(--stone); }
.process-num{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--indigo-soft);
  letter-spacing:0.08em;
}
.process-item h3{
  font-size:24px;
  font-weight:400;
}
.process-item p{
  color:#4a4844;
  font-size:15.5px;
  max-width:46ch;
}

/* ---------- Gallery ---------- */
.gallery-section{ border-top:1px solid var(--stone); }
.gallery-grid{
  display:grid;
  /* tri ukážky: svadba, dieťa, cestovanie */
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  background:var(--stone);
}
.gallery-card{
  background:var(--paper);
  padding:26px 22px 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
  color:inherit;
  transition:background .5s ease;
}
/* Karta je celá odkazom na detail ukážky */
.gallery-card .gallery-card__more{
  margin-top:auto;
  padding-top:16px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
  opacity:.5;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:opacity .4s ease, transform .4s ease;
}
.gallery-card__more::after{
  content:"";
  width:16px;
  height:1px;
  background:currentColor;
  transition:width .4s ease;
}
.gallery-card:hover .gallery-card__more,
.gallery-card:focus-visible .gallery-card__more{ opacity:1; }
.gallery-card:hover .gallery-card__more::after{ width:26px; }
.sample-visual{
  position:relative;
  aspect-ratio:16/11;
  border:1px solid var(--stone);
  background:var(--paper-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .5s ease;
}
.sample-visual::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(32,31,29,0.07);
  pointer-events:none;
}
/* Absolútne polohovanie: obrázok nesmie tlačiť výšku panela a rozbiť pomer 16:11 */
.sample-visual img{
  position:absolute;
  inset:0;
  margin:auto;
  width:auto;
  height:auto;
  max-width:68%;
  max-height:76%;
  opacity:0;
  transform:translateY(12px) scale(.97);
}

/* Ikony pri odhalení sekcie kaskádovito nabehnú, potom sa nepatrne vznášajú */
.reveal.in .sample-visual img{
  animation:icon-in 1.4s cubic-bezier(.22,1,.36,1) forwards,
            icon-float 7s ease-in-out infinite;
  animation-delay:var(--icon-delay, .2s), calc(var(--icon-delay, .2s) + 1.4s);
}
.reveal.in .gallery-card:nth-child(1) .sample-visual{ --icon-delay:.15s; }
.reveal.in .gallery-card:nth-child(2) .sample-visual{ --icon-delay:.35s; }
.reveal.in .gallery-card:nth-child(3) .sample-visual{ --icon-delay:.55s; }
@keyframes icon-in{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes icon-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
/* VYNÚTENÉ: reduce-motion sa ignoruje (nemožná podmienka min-width:100000px), animácie bežia vždy */
@media (prefers-reduced-motion: reduce) and (min-width:100000px){
  .sample-visual img{ opacity:1; transform:none; animation:none !important; }
}
.gallery-card:hover .sample-visual{ background:#E4DCCB; }
.gallery-card h4{
  font-size:19px;
  font-weight:400;
}
.gallery-card span{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--indigo-soft);
  text-transform:uppercase;
}

/* ---------- Pricing ---------- */
.pricing{ border-top:1px solid var(--stone); }
.price-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--stone);
}
.price-card{
  padding:40px 26px;
  border-left:1px solid var(--stone);
  position:relative;
  display:flex;
  flex-direction:column;
}
.price-card:first-child{ border-left:none; }
.price-card.featured{ background:var(--ink); color:var(--paper); }
.price-card.featured .eyebrow{ color:var(--indigo-soft); }
.price-card.featured .eyebrow::before{ background:var(--indigo-soft); }
.price-card h3{
  font-size:28px;
  margin:16px 0 6px;
  color:inherit;
}
.price-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--indigo-soft);
  margin-bottom:6px;
  display:block;
}
.price-doplnok{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--indigo-soft);
  margin-bottom:26px;
}
.price-card.featured .price-doplnok{ color:var(--stone); }
/* štítok dostane vždy dva riadky, aby názvy balíkov začínali na jednej linke */
.price-card .eyebrow{
  min-height:38.4px;
  align-items:flex-start;
}
.price-card .eyebrow::before{ margin-top:9px; }
.price-card.featured .price-tag{ color:var(--stone); }
.price-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14.5px;
}
.price-card.featured ul{ color:#E7E2D8; }
.price-card:not(.featured) ul{ color:#4a4844; }
.price-card li{ display:flex; gap:10px; }
.price-card li::before{ content:"—"; color:var(--indigo); flex-shrink:0; }
.price-card.featured li::before{ color:var(--indigo-soft); }
.pricing-note{
  max-width:760px;
  margin:48px auto 0;
  padding:18px 24px;
  border-left:2px solid var(--moss);
  background:var(--paper-deep);
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  line-height:1.8;
  color:#6b675f;
}
.price-cta{
  align-self:flex-start;   /* podčiarknutie len po text, nie cez celú kartu */
  margin-top:auto;         /* tlačidlá všetkých kariet na rovnakej linke */
  padding-top:32px;
  font-size:13px;
  letter-spacing:0.04em;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}

/* ---------- Dlhý právny text (zásady, podmienky) ---------- */
.legal{ padding:96px 0 130px; }
.legal-wrap{ max-width:760px; }
.legal h2{
  font-size:clamp(24px,3vw,32px);
  margin:64px 0 18px;
  padding-top:26px;
  border-top:1px solid var(--stone);
}
.legal h2:first-of-type{ margin-top:0; border-top:none; padding-top:0; }
.legal h3{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--indigo);
  margin:34px 0 12px;
}
.legal p{
  font-size:16px;
  line-height:1.8;
  color:#4a4844;
  margin-bottom:16px;
}
.legal ul{ list-style:none; margin:0 0 20px; display:flex; flex-direction:column; gap:11px; }
.legal li{ position:relative; padding-left:24px; font-size:16px; line-height:1.7; color:#4a4844; }
.legal li::before{ content:"—"; color:var(--indigo); position:absolute; left:0; top:0; }
.legal strong{ color:var(--ink); font-weight:400; }
.legal a{ border-bottom:1px solid var(--stone); }
.legal a:hover{ border-color:var(--ink); }
.legal-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--indigo-soft);
  margin-bottom:52px;
}
.legal-box{
  border-left:2px solid var(--moss);
  background:var(--paper-deep);
  padding:20px 26px;
  margin:26px 0 30px;
}
.legal-box p{ margin-bottom:0; font-size:15px; }
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 26px;
}
.legal-table th{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--indigo-soft);
  text-align:left;
  padding:0 16px 12px 0;
}
.legal-table td{
  padding:14px 16px 14px 0;
  border-top:1px solid var(--stone);
  font-size:15px;
  line-height:1.6;
  color:#4a4844;
  vertical-align:baseline;
}
.legal-table td:first-child{ color:var(--ink); white-space:nowrap; }
/* na úzkych displejoch nowrap v prvom stĺpci roztlačí tabuľku cez okraj stránky */
@media (max-width:640px){
  .legal-table td:first-child{ white-space:normal; }
  .legal-table td, .legal-table th{ padding-right:12px; }
}

/* ---------- Testimonials ---------- */
.testimonials{ background:var(--paper-deep); border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }
.t-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:60px;
  max-width:820px;
  margin:0 auto;
}
.t-card p{
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  font-style:italic;
  line-height:1.5;
  color:var(--ink);
}
.t-card footer{
  margin-top:20px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--indigo);
}

/* ---------- Contact / CTA ---------- */
.contact{ padding-bottom:140px; }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.contact h2{
  font-size:clamp(34px,5vw,58px);
  font-weight:400;
  max-width:12ch;
}
.contact-info{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:15px;
  color:#4a4844;
}
.contact-info .eyebrow-label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--indigo);
  display:block;
  margin-bottom:2px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--indigo);
}
.field input, .field textarea, .field select{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--stone);
  padding:10px 2px;
  font-family:'Jost', sans-serif;
  font-size:16px;
  color:var(--ink);
  font-weight:300;
  transition:border-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--ink); outline:none; }
.field textarea{ resize:vertical; min-height:70px; }
/* dva súvisiace údaje vedľa seba, aby formulár nenarástol do dĺžky */
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
/* keď sa dlhší popis zalomí do dvoch riadkov, polia v rade
   aj tak zostanú na spoločnej linke */
.field-row .field > input,
.field-row .field > select,
.field-row .field > .vyber{ margin-top:auto; }
/* číselné pole bez systémových šípok, nech drží rovnaký vzhľad ako ostatné */
.field input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field select{
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
  cursor:none;              /* rovnako ako zvyšok stránky — kreslíme si vlastný */
}

/* ---------- Rozbaľovací zoznam v dizajne stránky ----------
   Systémové okno prehliadača sa nedá štýlovať, preto si ho kreslíme sami.
   Natívny <select> zostáva skrytý pod tým ako zdroj hodnoty pre formulár. */
.vyber{ position:relative; }
.vyber select{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.vyber__spust{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--stone);
  border-radius:0;
  padding:10px 2px;
  font-family:'Jost', sans-serif;
  font-size:16px;
  font-weight:300;
  color:var(--ink);
  text-align:left;
  cursor:none;
  transition:border-color .3s ease;
}
.vyber__spust:hover,
.vyber__spust:focus-visible,
.vyber[data-otvorene] .vyber__spust{ border-color:var(--ink); outline:none; }
.vyber__spust--prazdny .vyber__text{ color:#9a958c; }
.vyber__sipka{
  flex-shrink:0;
  width:6px; height:6px;
  margin-right:4px;
  border-right:1px solid var(--indigo);
  border-bottom:1px solid var(--indigo);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.vyber[data-otvorene] .vyber__sipka{ transform:translateY(2px) rotate(225deg); }

.vyber__panel{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 8px);
  z-index:40;
  max-height:264px;
  overflow-y:auto;
  padding:6px 0;
  background:var(--paper);
  border:1px solid var(--stone);
  box-shadow:0 18px 44px rgba(32,31,29,.12);
  animation:vyber-prichod .24s cubic-bezier(.22,1,.36,1);
}
@keyframes vyber-prichod{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.vyber__skupina{
  padding:14px 16px 6px;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--indigo);
}
.vyber__skupina:first-child{ padding-top:8px; }
.vyber__volba{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 16px;
  font-size:15px;
  color:#4a4844;
  cursor:none;
  transition:background .2s ease, color .2s ease;
}
.vyber__volba.je-aktivna{ background:var(--paper-deep); color:var(--ink); }
.vyber__volba--prazdna{ color:#9a958c; }
.vyber__volba[aria-selected="true"]{ color:var(--indigo); }
.vyber__volba[aria-selected="true"]::after{
  content:"";
  width:4px; height:4px;
  background:var(--indigo);
  flex-shrink:0;
}
/* voľba s ukážkou väzby — názov v riadku, pod ním obrázok cez celú šírku */
.vyber__volba--nahlad{
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  padding:11px 16px 14px;
}
.vyber__volba--nahlad .vyber__riadok{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.vyber__volba--nahlad[aria-selected="true"]::after{ display:none; }
.vyber__volba--nahlad[aria-selected="true"] .vyber__riadok::after{
  content:"";
  width:4px; height:4px;
  background:var(--indigo);
  flex-shrink:0;
}
/* v dvojstĺpcovom riadku je pole úzke — panel s ukážkami sa rozšíri doprava,
   aby bol na obrázkoch vidieť rozdiel medzi klenutým a plochým chrbtom */
@media (min-width:621px){
  .vyber__panel--nahlad{ right:auto; min-width:420px; }
}
/* tri voľby s ukážkami sa musia zmestiť bez posúvania */
.vyber__panel--nahlad{ max-height:340px; }
.vyber__nahlad{
  display:block;
  width:100%;
  height:auto;
  /* obrázky nesú vlastný tieň, na papieri pôsobia príliš chladno */
  filter:saturate(.94);
}

/* ---- Porovnávacia tabuľka výrobcov v rozbaľovacom zozname ---- */
@media (min-width:621px){
  .vyber__panel--tabulka{ right:auto; min-width:492px; max-width:560px; }
}
.vyber__panel--tabulka{ max-height:420px; }
.vyber__panel--dolava{ left:auto; right:0; }
.vyber__hlavicka,
.vyber__volba--hodnotenie{
  display:grid;
  grid-template-columns:1fr repeat(4, minmax(44px, auto));
  align-items:center;
  gap:0 10px;
}
.vyber__hlavicka{
  position:sticky;
  top:-6px;                       /* prekryje horný odsadok panela */
  z-index:1;
  padding:10px 16px 9px;
  background:var(--paper);
  border-bottom:1px solid var(--stone);
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
}
.vyber__hlavicka .vyber__nazov{ color:var(--indigo-soft); }
.vyber__znamky{ display:contents; }
.vyber__znamka-popis{ text-align:center; }
.vyber__volba--hodnotenie{ padding:8px 16px; }
.vyber__volba--hodnotenie .vyber__nazov{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.vyber__meno{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vyber__znamka{
  display:flex;
  justify-content:center;
  gap:3px;
}
.vyber__znamka i{
  width:6px; height:6px;
  background:var(--stone);
  transition:background .2s ease;
}
.vyber__znamka i.je-plna{ background:var(--indigo-soft); }
.vyber__volba--hodnotenie.je-aktivna .vyber__znamka i.je-plna,
.vyber__volba--hodnotenie[aria-selected="true"] .vyber__znamka i.je-plna{ background:var(--indigo); }
/* bodka vybranej voľby by rozbila mriežku — nahradí ju zvýraznený názov */
.vyber__volba--hodnotenie[aria-selected="true"]::after{ display:none; }
.vyber__volba--hodnotenie[aria-selected="true"] .vyber__nazov{ color:var(--indigo); }
/* v šírke poľa na mobile treba stĺpce stiahnuť, nech sa názvy neorezávajú */
@media (max-width:620px){
  .vyber__hlavicka,
  .vyber__volba--hodnotenie{ grid-template-columns:1fr repeat(4, minmax(36px, auto)); gap:0 4px; }
  .vyber__hlavicka{ font-size:8px; letter-spacing:0.02em; padding-left:14px; padding-right:14px; }
  .vyber__volba--hodnotenie{ font-size:13.5px; padding-left:14px; padding-right:14px; }
  /* v úzkom stĺpci sa názov skráti tromi bodkami */
  .vyber__volba--hodnotenie .vyber__nazov{ display:block; }
  .vyber__meno{ display:block; }
  .vyber__znamka i{ width:5px; height:5px; }
  .vyber__znamka{ gap:2px; }
}
.vyber__legenda{
  padding:11px 16px 6px;
  border-top:1px solid var(--stone);
  font-size:11.5px;
  line-height:1.55;
  color:#7d7870;
}

/* tenký posuvník v duchu stránky */
.vyber__panel::-webkit-scrollbar{ width:8px; }
.vyber__panel::-webkit-scrollbar-thumb{ background:var(--stone); }
.vyber__panel::-webkit-scrollbar-track{ background:transparent; }
.vyber__panel{ scrollbar-width:thin; scrollbar-color:var(--stone) transparent; }
@media (max-width: 620px){
  .field-row{ grid-template-columns:1fr; }
}

/* potvrdenie po odoslaní formulára */
.form-stav{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--moss);
}
.form-stav:empty{ display:none; }
.form-stav.je-chyba{ color:#9a4b3f; }
.contact-form .form-stav{ align-self:flex-start; max-width:44ch; }

/* ---------- Prepínač jazykov ---------- */
.jazyky{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
}
.jazyky__odkaz{
  color:var(--indigo-soft);
  transition:color .25s ease;
}
.jazyky__odkaz:hover{ color:var(--ink); }
.jazyky__odkaz.je-aktivny{ color:var(--ink); }
@media (max-width:1120px){
  .jazyky{ gap:8px; margin-left:0; }
}
@media (max-width:900px){
  .jazyky{ margin-left:auto; margin-right:16px; }
}
@media (max-width:400px){
  .jazyky{ font-size:10px; gap:8px; margin-right:10px; }
}

/* ---------- Kontakt: čo sa stane po odoslaní ---------- */
.kontakt-h1{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(30px, 3.4vw, 40px);
  font-weight:300;
  line-height:1.2;
  margin-top:18px;
}
.kontakt-lead{ margin-top:20px; color:#4a4844; max-width:42ch; }
.kontakt-kroky{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:26px;
  max-width:46ch;
}
.kontakt-kroky li{ display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start; }
.kontakt-krok-num{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--indigo-soft);
  padding-top:4px;
}
.kontakt-kroky h2{
  font-family:'Jost', sans-serif;
  font-size:15px;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--ink);
  margin-bottom:5px;
}
.kontakt-kroky p{ font-size:14.5px; line-height:1.65; color:#4a4844; }
.kontakt-poznamka{
  margin-top:26px;
  font-size:14px;
  line-height:1.65;
  color:#7d7870;
  max-width:42ch;
}

/* ---------- Vysvetlenia na stránkach ukážok ---------- */
.jp-detail{
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--stone);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.jp-detail .eyebrow{ grid-column:1/-1; margin-bottom:-16px; }
.jp-detail-bod h3{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  font-weight:400;
  margin-bottom:10px;
}
.jp-detail-bod p{ font-size:15px; line-height:1.7; color:#4a4844; }
@media (max-width:900px){
  .jp-detail{ grid-template-columns:1fr; gap:30px; }
  .jp-detail .eyebrow{ margin-bottom:-10px; }
}

/* ---------- Otázky okolo platby ---------- */
.platba-otazky{ border-top:1px solid var(--stone); padding:84px 0; }
.platba-otazky__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 56px;
}
.platba-otazky__grid h3{
  font-family:'Cormorant Garamond', serif;
  font-size:23px;
  font-weight:400;
  margin-bottom:11px;
}
.platba-otazky__grid p{ font-size:15.5px; line-height:1.7; color:#4a4844; }
.platba-otazky__zaver{
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid var(--stone);
  font-size:14px;
  color:#7d7870;
}
@media (max-width:820px){
  .platba-otazky__grid{ grid-template-columns:1fr; gap:32px; }
  .platba-otazky{ padding:64px 0; }
}

/* ---------- Modelový prepočet celkovej ceny ---------- */
.cena-suma{
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--stone);
}
.cena-suma h3{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--indigo);
  margin-bottom:16px;
}
.cena-suma > p{ font-size:15.5px; line-height:1.7; color:#4a4844; max-width:60ch; }
.suma-tabulka{
  width:100%;
  border-collapse:collapse;
  margin:26px 0 22px;
  max-width:760px;
}
.suma-tabulka th{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--indigo-soft);
  text-align:left;
  padding:0 18px 11px 0;
}
.suma-tabulka td{
  padding:14px 18px 14px 0;
  border-top:1px solid var(--stone);
  font-size:15.5px;
  color:#4a4844;
}
.suma-tabulka td:first-child{ color:var(--ink); }
.suma-tabulka td strong{ color:var(--indigo); font-weight:400; }
.cena-suma__poznamka{
  font-size:13.5px;
  line-height:1.65;
  color:#7d7870;
  max-width:64ch;
}
@media (max-width:680px){
  .suma-tabulka th,
  .suma-tabulka td{ padding-right:10px; font-size:14px; }
  .suma-tabulka th{ font-size:9px; letter-spacing:0.06em; }
}

/* orientačná cena tlače pod cenou grafického návrhu */
.price-tlac{
  display:block;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--stone);
  font-size:12.5px;
  line-height:1.55;
  color:#7d7870;
}
.price-tlac strong{ color:var(--indigo); font-weight:400; white-space:nowrap; }
.price-card.featured .price-tlac{ border-top-color:rgba(244,240,232,.22); color:rgba(244,240,232,.72); }
.price-card.featured .price-tlac strong{ color:var(--paper); }

/* ---------- Rozpis ceny (Balíčky) ---------- */
.cena-rozpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin:64px 0 0;
  padding-top:44px;
  border-top:1px solid var(--stone);
}
.cena-rozpis h3,
.cena-vysvetlenie h3{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--indigo);
  margin-bottom:18px;
}
.cena-rozpis ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.cena-rozpis li{
  position:relative;
  padding-left:20px;
  font-size:15.5px;
  line-height:1.65;
  color:#4a4844;
}
.cena-rozpis li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--indigo-soft); }
.cena-vysvetlenie{
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--stone);
  max-width:64ch;
}
.cena-vysvetlenie h3{ margin-top:32px; }
.cena-vysvetlenie h3:first-child{ margin-top:0; }
.cena-vysvetlenie p{ font-size:15.5px; line-height:1.7; color:#4a4844; margin-bottom:14px; }
@media (max-width:820px){
  .cena-rozpis{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- Ako poslať fotografie (Proces) ---------- */
.posielanie{ border-top:1px solid var(--stone); padding:92px 0; background:var(--paper-deep); }
.posielanie-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:44px 56px;
}
.posielanie-bod h3{
  font-family:'Cormorant Garamond', serif;
  font-size:23px;
  font-weight:400;
  margin-bottom:11px;
}
.posielanie-bod p{ font-size:15.5px; line-height:1.7; color:#4a4844; }
.posielanie-zaver{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--stone);
  font-size:14px;
  color:#7d7870;
}
@media (max-width:820px){
  .posielanie-grid{ grid-template-columns:1fr; gap:34px; }
  .posielanie{ padding:68px 0; }
}

/* ---------- Sekcia Remeslo (úvodná stránka) ---------- */
.remeslo{ border-top:1px solid var(--stone); padding:96px 0; }
.remeslo-cisla{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:44px;
  margin:0 0 64px;
  padding:0;
}
.remeslo-cisla li{ display:flex; flex-direction:column; gap:14px; }
.remeslo-num{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(38px, 4.6vw, 58px);
  font-weight:300;
  line-height:1;
  color:var(--indigo);
}
.remeslo-popis{ font-size:15.5px; line-height:1.65; color:#4a4844; max-width:30ch; }
.remeslo-text{ max-width:62ch; }
.remeslo-text p{ margin-bottom:18px; color:#4a4844; }
.remeslo-text p:last-child{ margin-bottom:0; }
/* úvodný odsek nad porovnaním v sekcii Rozdiel */
.dokaz-uvod{ max-width:62ch; margin:0 0 42px; }
.dokaz-uvod p{ margin-bottom:16px; color:#4a4844; }
.dokaz-uvod p:last-child{ margin-bottom:0; }
@media (max-width:860px){
  .remeslo-cisla{ grid-template-columns:1fr; gap:32px; }
  .remeslo{ padding:70px 0; }
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--stone);
  padding:34px 0;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#6b675f;
  flex-wrap:wrap;
  gap:14px;
}
.footer-links{ display:flex; gap:26px; list-style:none; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.logo-mark-small{ height:22px; width:auto; }

/* =========================================================
   Detail ukážky — japonský minimalizmus
   Veľa ticha (ma), asymetria, tenké linky, jediný akcent.
   ========================================================= */
.jp{ --accent:var(--indigo); }

.jp-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:38px;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--indigo);
}
.jp-back::before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  transition:width .35s ease;
}
.jp-back:hover::before{ width:30px; }

.jp-hero{
  position:relative;
  padding:70px 0 130px;
  overflow:hidden;
}
/* Znak ako tichá textúra, nie ozdoba — sotva viditeľný */
/* Vodoznak loga — tichá textúra v pozadí hera */
.jp-mark{
  position:absolute;
  left:-26px;
  bottom:34px;
  width:clamp(170px, 19vw, 290px);
  height:auto;
  opacity:.07;
  pointer-events:none;
  user-select:none;
}
.jp-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:76px;
  align-items:center;
}
.jp-title{
  font-size:clamp(33px, 4.4vw, 54px);
  line-height:1.15;
  margin-top:20px;
  max-width:18ch;
}
.jp-lead{
  margin-top:28px;
  font-size:17px;
  line-height:1.7;
  color:#4a4844;
  max-width:46ch;
}
.jp-figure{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--stone);
  background:var(--paper-deep);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* poznámka v rámčeku na stránkach, kde ukážky ešte nie sú */
.jp-figure--stav{
  flex-direction:column;
  gap:7%;
  container-type:inline-size;   /* veľkosť písma sa viaže na rámček, nie na okno */
}
.jp-figure.jp-figure--stav > img{ width:52%; }
.jp-stav{
  font-family:'JetBrains Mono', monospace;
  font-size:clamp(10px, 3.4cqw, 13px);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--indigo);
  text-align:center;
  text-indent:0.09em;           /* polovica rozpustenia vyrovná optické centrovanie */
}
.jp-figure::after{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(32,31,29,0.07);
  pointer-events:none;
}
.jp-figure > img{ width:62%; height:auto; }

/* Knihy položené na kresbu — mriežka 3×3, vycentrovaná nad kresbou.
   Rovnaké podiely stĺpcov držia rozostupy rovnomerné pri každej šírke. */
.book-row{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:88%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  justify-items:center;
  align-items:center;
  gap:7% 5%;
  z-index:3;
}
.book-peek{
  width:100%;
  position:relative;
  perspective:700px;
  /* pokoji: knihy len naznačené, aby kresba pod nimi ostala čitateľná;
     pod kurzorom sa rozsvietia do plnej farby */
  opacity:.22;
  filter:drop-shadow(0 10px 14px rgba(32,31,29,.32));
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             filter .5s ease,
             opacity .45s ease;
}
.book-peek__cover{
  display:block;
  width:100%;
  height:auto;
  transform:rotateY(32deg) rotateZ(-2deg);
  transform-origin:left center;
  border-left:3px solid #1f1c19;
  background:#1f1c19;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* Popisok sa objaví až pri prejdení — päť popiskov naraz by rušilo */
.book-peek__label{
  position:absolute;
  left:50%;
  bottom:-30px;
  transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
  background:rgba(244,240,232,.9);
  padding:3px 8px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.book-peek:hover,
.book-peek:focus-visible{
  opacity:1;
  transform:translateY(-10px) scale(1.16);
  filter:drop-shadow(0 18px 22px rgba(32,31,29,.42));
  z-index:4;
}
.book-peek:hover .book-peek__cover,
.book-peek:focus-visible .book-peek__cover{ transform:rotateY(16deg) rotateZ(0deg); }
.book-peek:hover .book-peek__label,
.book-peek:focus-visible .book-peek__label{ opacity:1; }

/* Jednotný pomer drží riadky mriežky zarovnané aj pri rôznych predlohách */
.book-peek__cover{
  aspect-ratio:4/3;
  object-fit:cover;
}
.book-peek--caka .book-peek__cover{
  background:repeating-linear-gradient(45deg, var(--paper-deep) 0 6px, #E2D9C7 6px 12px);
  border:1px solid var(--stone);
  font-size:0;          /* nezobrazovať alt text, kým obálka nie je dodaná */
  color:transparent;
}

@media (max-width: 900px){
  .book-row{ width:94%; gap:6% 4%; }
  .book-peek__label{ font-size:9px; }
}

/* Zvislá vlasová linka namiesto klasického oddeľovača */
.jp-divider{
  display:flex;
  justify-content:center;
}
.jp-divider span{
  width:1px;
  height:92px;
  background:var(--stone);
}

.jp-section{
  padding:130px 0;
  border-top:1px solid var(--stone);
}
.jp-cols{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:84px;
  align-items:start;
}
.jp-h2{
  font-size:clamp(26px,3.2vw,38px);
  margin-top:18px;
  font-weight:400;
  max-width:14ch;
}
.jp-points{ list-style:none; }
.jp-point{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:26px;
  padding:32px 0;
  border-top:1px solid var(--stone);
}
.jp-point:first-child{ border-top:none; padding-top:0; }
.jp-point-num{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--accent);
}
.jp-point h3{ font-size:21px; font-weight:400; }
.jp-point p{
  margin-top:9px;
  font-size:15.5px;
  color:#4a4844;
  max-width:54ch;
}

/* Citát mimo osi — asymetria namiesto centrovania */
.jp-quote{
  background:var(--paper-deep);
  border-top:1px solid var(--stone);
  border-bottom:1px solid var(--stone);
  padding:120px 0;
}
.jp-quote p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(22px,2.9vw,32px);
  line-height:1.45;
  max-width:26ch;
  margin-left:8%;
  color:var(--ink);
}

.jp-spec{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--stone);
}
.jp-spec > div{
  padding:32px 30px;
  border-left:1px solid var(--stone);
}
.jp-spec > div:first-child{ border-left:none; }
.jp-spec dt{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}
.jp-spec dd{
  margin-top:12px;
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  line-height:1.4;
}

.jp-cta{
  padding:130px 0 150px;
  text-align:center;
}
.jp-cta h2{
  font-size:clamp(28px,3.6vw,42px);
  margin-top:20px;
  font-weight:400;
}
.jp-cta p{
  margin:22px auto 40px;
  max-width:44ch;
  color:#4a4844;
}
/* dve tlačidlá vedľa seba pod výzvou */
.jp-cta__akcie{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
/* druhé tlačidlo je tichšie, aby objednávka zostala hlavnou voľbou */
.btn-tichy{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--stone);
}
.btn-tichy:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.jp-cta .eyebrow{ color:var(--accent); }
.jp-cta .eyebrow::before{ background:var(--accent); }

/* Ďalšie ukážky — tichý riadok odkazov */
.jp-next{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--stone);
}
.jp-next a{
  flex:1 1 200px;
  padding:34px 28px;
  border-left:1px solid var(--stone);
  transition:background .4s ease;
}
.jp-next a:first-child{ border-left:none; }
.jp-next a:hover{ background:var(--paper-deep); }
.jp-next span{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}
.jp-next strong{
  display:block;
  margin-top:10px;
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  font-weight:400;
}

@media (max-width: 900px){
  .jp-hero{ padding:50px 0 90px; }
  .jp-hero-grid{ grid-template-columns:1fr; gap:52px; }
  .jp-figure{ order:-1; max-width:360px; }
  .jp-section{ padding:90px 0; }
  .jp-cols{ grid-template-columns:1fr; gap:44px; }
  .jp-h2{ max-width:none; }
  .jp-quote{ padding:80px 0; }
  .jp-quote p{ margin-left:0; }
  .jp-spec{ grid-template-columns:1fr; }
  .jp-spec > div{ border-left:none; border-top:1px solid var(--stone); }
  .jp-spec > div:first-child{ border-top:none; }
  .jp-cta{ padding:90px 0 110px; }
  .jp-next a{ border-left:none; border-top:1px solid var(--stone); }
  .jp-next a:first-child{ border-top:none; }
}

/* ---------- Responsive ---------- */
/* Plná navigácia sa v nemčine a ukrajinčine pod 1000 px už nezmestí vedľa
   značky a tlačidla — v tomto pásme ju nahradí rozbaľovacie menu. */
@media (max-width: 1060px){
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo-wrap{ order:-1; }
  .hero-photo{ max-width:440px; margin:0 auto; }
  .hero-cesta{ max-width:520px; margin:0 auto; gap:26px 20px; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .process-item{ grid-template-columns:50px 1fr; }
  .process-item p{ grid-column:2/3; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .price-grid{ grid-template-columns:1fr; }
  .price-card{ border-left:none; border-top:1px solid var(--stone); }
  .price-card:first-child{ border-top:none; }
  .t-grid{ grid-template-columns:1fr; gap:44px; }
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
}

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

/* Kým je v lište hamburger, prepínač štyroch jazykov a tlačidlo, na nápis
   „Bab City Studio" vedľa znaku už nie je miesto — ostáva samotný znak.
   Pôvodná hranica 400 px platila ešte pre dva jazyky. */
@media (max-width:620px){
  .wordmark{ display:none; }
}

/* Najužšie telefóny (320–400 px): lišta ide na doraz. */
@media (max-width:400px){
  .nav{ gap:8px; padding-left:14px; padding-right:14px; }
  .logo-orbit{ width:56px; height:56px; }
  .jazyky{ gap:4px; font-size:10px; }
  .nav-cta{ padding:10px 12px; font-size:11px; }
}

/* Typewriter-style character reveal */
.type-char{
  opacity:0;
  color:var(--type-accent);
  animation:char-reveal 320ms ease-out forwards;
  animation-play-state:paused;
}
.type-ready .type-char{ animation-play-state:running; }
@keyframes char-reveal{
  0%{ opacity:0; color:var(--type-accent); }
  46%{ opacity:1; color:var(--type-accent); }
  100%{ opacity:1; color:inherit; }
}

/* VYNÚTENÉ: reduce-motion sa ignoruje (nemožná podmienka min-width:100000px), animácie bežia vždy */
@media (prefers-reduced-motion: reduce) and (min-width:100000px){
  .type-char{ opacity:1 !important; color:inherit !important; animation:none !important; }
  .hero-photo img, .about-visual img{ opacity:1 !important; }
  .quiet-line, .quiet-ring{ display:none; }
  /* vlastný kurzor sa skrýva, systémový sa preto musí vrátiť —
     inak by používateľ nevidel vôbec žiadny ukazovateľ */
  body{ cursor:auto; }
  a, button, .field select, .vyber__spust, .vyber__volba, .faq summary{ cursor:pointer; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------
   Decentný kurzor: tiché krížové vodiace čiary + pomaly
   doliehajúci prázdny krúžok. Nad odkazmi/tlačidlami sa
   stiahne na bodku a čiary sa ešte stlmia.
   --------------------------------------------------------- */
.quiet-line{
  position:fixed;
  pointer-events:none;
  z-index:9998;
  background:var(--ink);
  opacity:.08;
  transition:opacity .4s ease;
}
.quiet-line.h{ left:0; width:100vw; height:1px; }
.quiet-line.v{ top:0; width:1px; height:100vh; }

.quiet-ring{
  position:fixed;
  top:0; left:0;
  width:22px; height:22px;
  border:1px solid var(--ink);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.quiet-ring.on-link{ width:6px; height:6px; background:var(--ink); }
.quiet-ring.pressed{ width:16px; height:16px; }
body.reading .quiet-line{ opacity:.03; }

@media (max-width: 1120px) and (min-width: 901px){
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  .price-card:nth-child(-n+2){ border-top:none; }
  .price-card:nth-child(2n+1){ border-left:none; }
  .price-card:nth-child(n+3){ border-top:1px solid var(--stone); }
}

@media (max-width: 900px){
  body{ cursor:auto; }
  a, button, .field select, .vyber__spust, .vyber__volba{ cursor:pointer; }
  .quiet-line, .quiet-ring{ display:none; }
}

/* ---------------------------------------------------------
   Magnetické tlačidlá — v okolí kurzora sa tlačidlo jemne
   nakloní jeho smerom, po odchode sa pružne vráti späť.
   Trieda .magnetic pridáva skript, preto stojí až na konci
   (prebíja transition zápisy z .btn-primary a .nav-cta).
   --------------------------------------------------------- */
.magnetic{
  will-change:transform;
  transition:transform .55s cubic-bezier(.22,1,.36,1),
             background .3s ease,
             color .3s ease,
             border-color .3s ease;
}
.magnetic.is-pulled{
  transition:transform .16s ease-out,
             background .3s ease,
             color .3s ease,
             border-color .3s ease;
}

/* ---------------------------------------------------------
   STRÁNKA PLATBA
   Priebeh platby vysádzaný ako dvojstrana knihy — dva stĺpce
   oddelené chrbtom, presne tak, ako listuje hotová fotokniha.
   --------------------------------------------------------- */
.platba{ padding:0 0 130px; }

.platba-spread{
  border-top:1px solid var(--stone);
}
/* Kroky idú pod sebou: číslo kroku vľavo, obsah vpravo. */
.platba-leaf{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:30px;
  align-items:baseline;
  padding:32px 4px;
  border-bottom:1px solid var(--stone);
}
.platba-folio{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}
.platba-leaf h3{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  font-weight:400;
  margin-bottom:10px;
}
.platba-leaf > div{ grid-column:2; }
.platba-leaf p{
  font-size:15.5px;
  color:#4a4844;
  max-width:52ch;
}
.platba-znacka{
  display:inline-block;
  margin-top:16px;
  padding:5px 12px;
  border:1px solid var(--stone);
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
}

/* ---- spôsoby platby + bezpečnosť ---- */
.platba-panel{
  margin-top:76px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  border:1px solid var(--stone);
}
.platba-panel__main{ padding:44px 40px; }
.platba-panel__side{
  padding:44px 40px;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.platba-panel h4{
  font-family:'Cormorant Garamond', serif;
  font-size:24px;
  font-weight:400;
  margin-bottom:26px;
}
.platba-znacky{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}
.platba-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:52px;
  padding:0 12px;
  border:1px solid var(--stone);
}
/* logá sú jednofarebné, aby pestrosť nevytŕčala z tlmenej palety webu */
.platba-logo{
  fill:var(--ink);
  opacity:.78;
  max-width:100%;
  height:auto;
  transition:opacity .3s ease;
}
.platba-badge:hover .platba-logo{ opacity:1; }
.platba-drobne{
  font-size:14.5px;
  color:#4a4844;
  max-width:42ch;
}
.platba-drobne strong{ color:var(--ink); font-weight:400; }
.platba-zamok{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  line-height:1.35;
  margin-bottom:14px;
}
.platba-panel__side p{
  font-size:14.5px;
  color:#C4BFB5;
  max-width:34ch;
}
.platba-podpis{
  margin-top:24px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}

/* ---- rozbaľovacie otázky (Platba, FAQ) ---- */
.faq{
  margin-top:76px;
  border-top:1px solid var(--stone);
}
.faq details{ border-bottom:1px solid var(--stone); }
.faq summary{
  list-style:none;
  cursor:none;
  padding:24px 2px;
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--indigo); }
.faq-plus{
  flex:none;
  position:relative;
  width:20px; height:20px;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.faq-plus::before,
.faq-plus::after{
  content:"";
  position:absolute;
  background:var(--indigo);
}
.faq-plus::before{ top:9.5px; left:0; width:20px; height:1px; }
.faq-plus::after{ left:9.5px; top:0; width:1px; height:20px; }
.faq details[open] .faq-plus{ transform:rotate(45deg); }
.faq details p{
  padding:0 2px 26px;
  font-size:15.5px;
  color:#4a4844;
  max-width:62ch;
}


/* nábeh otázok — rovnaké prevedenie ako kroky v Postupe spolupráce */
.reveal .faq details{
  opacity:0;
  transform:translateX(-140px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in .faq details,
.faq.reveal.in details{
  opacity:1;
  transform:translateX(0);
}
.faq.reveal details{
  opacity:0;
  transform:translateX(-140px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.faq.reveal.in details:nth-child(1){ transition-delay:0.00s; }
.faq.reveal.in details:nth-child(2){ transition-delay:0.18s; }
.faq.reveal.in details:nth-child(3){ transition-delay:0.36s; }
.faq.reveal.in details:nth-child(4){ transition-delay:0.54s; }
.faq.reveal.in details:nth-child(5){ transition-delay:0.72s; }
.faq.reveal.in details:nth-child(6){ transition-delay:0.90s; }
.faq.reveal.in details:nth-child(7){ transition-delay:1.08s; }
.faq.reveal.in details:nth-child(8){ transition-delay:1.26s; }
.faq.reveal.in details:nth-child(9){ transition-delay:1.44s; }
.faq.reveal.in details:nth-child(10){ transition-delay:1.62s; }
.faq.reveal.in details:nth-child(11){ transition-delay:1.80s; }
.faq.reveal.in details:nth-child(12){ transition-delay:1.98s; }
.faq.reveal.in details:nth-child(13){ transition-delay:2.16s; }
.faq.reveal.in details:nth-child(14){ transition-delay:2.34s; }
.faq.reveal.in details:nth-child(15){ transition-delay:2.52s; }
.faq.reveal.in details:nth-child(16){ transition-delay:2.70s; }
.faq.reveal.in details:nth-child(17){ transition-delay:2.88s; }

/* ---- pätný pruh ---- */
.platba-pruh{
  margin-top:70px;
  padding-top:28px;
  border-top:1px solid var(--stone);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.platba-marky{ display:flex; flex-wrap:wrap; gap:9px; }
.platba-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:38px;
  padding:0 9px;
  border:1px solid var(--stone);
}
.platba-zabezpecene{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:#4a4844;
}

@media (max-width: 900px){
  .platba{ padding-bottom:90px; }
  .platba-leaf{ grid-template-columns:1fr; gap:10px; }
  .platba-leaf > div{ grid-column:1; }
  .platba-panel{ grid-template-columns:1fr; }
  .platba-panel__main,
  .platba-panel__side{ padding:34px 28px; }
  .faq summary{ cursor:pointer; }
}

/* ---------------------------------------------------------
   STRÁNKA ČASTO KLADENÉ OTÁZKY
   --------------------------------------------------------- */
.faq-section{ padding:34px 0 130px; }
/* na tejto stránke oddeľuje otázky už spodná linka hero — vlastnú
   linku ani odsadenie zhora nepotrebujú */
.faq-section .faq{ border-top:none; margin-top:0; }

/* tlačidlo v hero potrebuje odsadenie od odstavca nad ním */
.page-hero .btn-primary{ margin-top:34px; }

/* číslovaný postup vnútri odpovede */
.faq-kroky,
.faq-zoznam{
  padding:0 2px 26px 0;
  max-width:62ch;
  font-size:15.5px;
  color:#4a4844;
}
.faq-kroky{ list-style:none; counter-reset:krok; }
.faq-kroky li{
  position:relative;
  padding-left:38px;
  margin-bottom:9px;
  counter-increment:krok;
}
.faq-kroky li::before{
  content:counter(krok, decimal-leading-zero);
  position:absolute;
  left:0;
  top:1px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--indigo-soft);
}
.faq-zoznam{ list-style:none; }
.faq-zoznam li{
  display:flex;
  gap:10px;
  margin-bottom:7px;
}
.faq-zoznam li::before{
  content:"—";
  color:var(--indigo);
  flex-shrink:0;
}
/* odkazy v odpovediach nesú jemné podčiarknutie */
.faq details a{
  border-bottom:1px solid var(--stone);
  transition:border-color .3s ease, color .3s ease;
}
.faq details a:hover{ color:var(--indigo); border-color:var(--indigo); }

/* uzavretie stránky s druhým tlačidlom */
.faq-zaver{
  margin-top:64px;
  padding-top:38px;
  border-top:1px solid var(--stone);
}
.faq-zaver p{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  color:var(--ink);
}
/* pole na otázku pod výzvou — rovnaké prevedenie ako kontaktný formulár */
.faq-form{
  margin-top:24px;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
}
.faq-form .field{ width:100%; }
.faq-form textarea{ min-height:104px; }

@media (max-width: 900px){
  .faq-section{ padding:50px 0 90px; }
  .faq-zaver{ justify-content:flex-start; }
}

/* ---------------------------------------------------------
   TLAČ / EXPORT DO PDF
   Na obrazovke sa obsah odkrýva pri scrollovaní a text sa vypisuje
   po znakoch — na papieri musí byť všetko viditeľné hneď.
   --------------------------------------------------------- */
@media print{
  @page{ size:A4; margin:14mm 12mm; }

  body{
    cursor:auto !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* obsah odkrývaný pri scrollovaní */
  .reveal,
  .reveal .gallery-card,
  .reveal .price-card,
  .reveal .t-card,
  .reveal .process-item,
  .faq.reveal details{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  /* nábeh hero textu a koláže krokov */
  .hero-in, .hero-cesta__krok{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  /* text vypisovaný po znakoch */
  .type-char{ opacity:1 !important; color:inherit !important; animation:none !important; }
  /* fotografie s oneskoreným nábehom */
  .hero-photo img, .about-visual img, .sample-visual img, .hero-cesta__ramik img{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

  /* prvky, ktoré na papieri nemajú zmysel */
  .quiet-line, .quiet-ring, .menu-btn{ display:none !important; }
  .logo-mark, .logo-ring{ animation:none !important; }
  header{
    position:static !important;
    background:var(--paper) !important;
    backdrop-filter:none !important;
  }

  /* neroztrhnúť ucelené bloky cez zlom strany */
  .process-item,
  .price-card,
  .gallery-card,
  .t-card,
  .platba-leaf,
  .faq details,
  .jp-point,
  .contact-info{ break-inside:avoid; }
  h1, h2, h3{ break-after:avoid; }
}

/* ---------------------------------------------------------
   OKIENKO S KONTAKTOM NA BEZPLATNÚ KONZULTÁCIU
   --------------------------------------------------------- */
.konzultacia{
  /* natívne <dialog> sa centruje cez inset + margin:auto —
     position:relative by to zrušilo */
  position:fixed;
  inset:0;
  margin:auto;
  width:min(460px, calc(100vw - 40px));
  height:fit-content;
  padding:44px 44px 40px;
  border:1px solid var(--stone);
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  box-shadow:0 30px 70px rgba(32,31,29,.20);
}
.konzultacia::backdrop{ background:rgba(32,31,29,.42); }
.konzultacia h2{
  font-size:34px;
  margin-top:16px;
}
.konzultacia > p{
  margin-top:14px;
  font-size:15.5px;
  color:#4a4844;
  max-width:36ch;
}
.konzultacia__kontakt{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--stone);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.konzultacia__kontakt a{
  font-size:19px;
  color:var(--ink);
  transition:color .3s ease;
}
.konzultacia__kontakt a:hover{ color:var(--indigo); }
.konzultacia__kontakt .eyebrow-label{
  display:block;
  margin-bottom:3px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo);
}
.konzultacia__zavri{
  position:absolute;
  top:14px;
  right:16px;
  width:30px;
  height:30px;
  background:none;
  border:none;
  font-size:24px;
  line-height:1;
  color:var(--indigo-soft);
  cursor:none;
  transition:color .3s ease;
}
.konzultacia__zavri:hover{ color:var(--ink); }

@media (max-width: 900px){
  .konzultacia{ padding:34px 26px 30px; }
  .konzultacia__zavri{ cursor:pointer; }
}

/* ---------------------------------------------------------
   POROVNANIE PRED / PO
   Obe verzie tej istej dvojstrany úplne viditeľné pod sebou,
   každá so svojím popisom. Nič sa neprekrýva.
   --------------------------------------------------------- */
.porovnanie{
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;   /* obe verzie vedľa seba */
  gap:12px 26px;
  align-items:start;
}
.porovnanie figcaption{ grid-column:1 / -1; }
.porovnanie__polozka{
  display:grid;
  gap:11px;
}
.porovnanie__stitok{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--indigo);
}
.porovnanie__ramik{
  position:relative;
  border:1px solid var(--stone);
  overflow:hidden;
  filter:drop-shadow(0 16px 22px rgba(32,31,29,0.13));
}
.porovnanie__ramik img{
  display:block;
  width:100%;
  height:auto;
}
.porovnanie figcaption{
  margin-top:4px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}

/* sekcia s porovnaním na úvodnej stránke */
.dokaz{
  border-top:1px solid var(--stone);
  padding:96px 0 104px;
}
.dokaz .wrap{ max-width:1320px; }
.dokaz .section-head{ margin-bottom:40px; }
.dokaz__zaver{
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
}
.dokaz__zaver p{
  font-size:17px;
  color:#4a4844;
  max-width:62ch;
}

/* pod túto šírku by boli dvojstrany vedľa seba nečitateľné */
@media (max-width: 1000px){
  .porovnanie{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width: 900px){
  .dokaz{ padding:64px 0 72px; }
  .dokaz__zaver{ grid-template-columns:1fr; gap:24px; }
  .porovnanie__stitok{ font-size:9px; padding:5px 9px; bottom:9px; }
}


/* kompaktný pás s porovnaním nad cenníkom */
.dokaz-pas{ margin-bottom:56px; }
.dokaz-pas > p{
  margin-top:16px;
  font-size:16px;
  color:#4a4844;
  max-width:64ch;
}
/* v odpovedi medzi otázkami */
.faq details .porovnanie{ margin:6px 2px 26px; }

/* ---------------------------------------------------------
   VIDEO
   --------------------------------------------------------- */
/* štvrtá dlaždica v hero — tichá slučka namiesto fotografie */
.hero-cesta__ramik video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  display:block;
}

/* video s hotovou knihou nad cenníkom */
/* ---------- Veľkosť videa ----------
   Video sa doteraz riadilo iba šírkou stránky, takže na notebooku vyrástlo
   nad výšku okna a nebolo ho vidno celé. Obmedzíme ho aj výškou okna; rám
   sa zúži spolu s ním, aby okolo obrazu nezostal prázdny pruh.
   Pomer strán je 16:9 (1280×720). */
:root{ --video-max-v:58svh; }

/* Obmedzenie patrí celému bloku, nie len rámu — inak by popis pod videom
   ostal na pôvodnej šírke a odtrhol by sa od jeho okraja. */
.dokaz-video,
.video-blok{
  max-width:min(100%, calc(var(--video-max-v) * 16 / 9));
  margin-inline:auto;
}

/* Ležiaci telefón má výšky najmenej — tam video stiahneme ešte viac,
   aby pod ním ostal viditeľný popis. */
@media (max-height:540px) and (orientation:landscape){
  :root{ --video-max-v:52svh; }
}

.video-blok{ margin-bottom:56px; }
.video-ramik{
  position:relative;
  margin:0;
  border:1px solid var(--stone);
  overflow:hidden;
  filter:drop-shadow(0 16px 22px rgba(32,31,29,0.13));
}
.video-ramik video{
  display:block;
  width:100%;
  height:auto;
}
/* spúšťacie tlačidlo cez celý rám — mizne po prvom prehratí */
.video-spust{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:rgba(32,31,29,.18);
  border:none;
  cursor:none;
  transition:background .35s ease;
}
.video-spust:hover{ background:rgba(32,31,29,.30); }
.video-spust[hidden]{ display:none; }
.video-spust__ikona{
  position:relative;
  width:74px; height:74px;
  border:1px solid var(--paper);
  border-radius:50%;
  background:rgba(32,31,29,.34);
  backdrop-filter:blur(2px);
  transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.video-spust__ikona::after{
  content:"";
  position:absolute;
  top:50%; left:calc(50% + 3px);
  transform:translate(-50%,-50%);
  border-left:17px solid var(--paper);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.video-spust:hover .video-spust__ikona{ transform:scale(1.07); background:rgba(32,31,29,.5); }
.video-spust__text{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 1px 10px rgba(32,31,29,.5);
}
.video-blok > p{
  margin-top:16px;
  font-size:16px;
  color:#4a4844;
  max-width:64ch;
}

@media (max-width: 900px){
  .video-blok{ margin-bottom:40px; }
  .video-spust{ cursor:pointer; }
  .video-spust__ikona{ width:58px; height:58px; }
}
/* nikomu, kto si pohyb nepraje, sa slučka nespustí */
/* VYNÚTENÉ: reduce-motion sa ignoruje (nemožná podmienka min-width:100000px), animácie bežia vždy */
@media (prefers-reduced-motion: reduce) and (min-width:100000px){
  .hero-cesta__ramik video{ animation:none; }
}

/* video s hotovou knihou pod porovnaním */
.dokaz-video{
  /* `0` po stranách rušilo margin-inline:auto a okno s videom ostávalo
     zarovnané doľava — `auto` ho vráti do stredu sekcie. */
  margin:34px auto 0;
  display:grid;
  gap:12px;
}
/* ---------- Vodoznak značky v sekcii Rozdiel ----------
   Nadpis a úvodný text tvoria ľavý stĺpec, znak ateliéru pravý. Znak siaha
   cez oba riadky mriežky, takže je presne taký vysoký ako celý textový blok
   a rastie s ním (nemecký text je o vyše 70 px dlhší než slovenský).
   Vlastný stĺpec zároveň znamená, že na text nemôže dosiahnuť ani na užšom
   okne. Je len potlačou — nereaguje na kurzor a čítačky ho preskočia. */
.dokaz-text{
  position:relative;
  display:grid;
  /* 640 px je max-width .section-head — text tak zostáva presne taký široký
     ako predtým, mriežka len vyhradí zvyšok pre znak */
  grid-template-columns:minmax(0, 640px) 1fr;
  /* riadky musia byť explicitné — `grid-row:1 / -1` na znaku sa inak nemá
     o čo oprieť a bunka by mala nulovú výšku */
  grid-template-rows:auto auto;
  column-gap:56px;
  align-items:start;
  margin-bottom:42px;
}
.dokaz-text > .section-head,
.dokaz-text > .dokaz-uvod{ grid-column:1; }
/* rozstup pod blokom nesie obal, inak by predĺžil stĺpec so znakom */
.dokaz-text > .dokaz-uvod{ margin-bottom:0; }

.dokaz-znak{
  grid-column:2;
  grid-row:1 / -1;
  /* Absolútne umiestnenie v mriežke: obálkou je vyhradená bunka, takže znak
     dostane presnú výšku textového bloku a zároveň sám do výpočtu riadkov
     nezasahuje. `height:100%` na bežnej položke by tvorilo kruh — výška
     riadka by závisela od obrázka a obrázok od výšky riadka. */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.07;
  pointer-events:none;
  user-select:none;
}

/* Pod 1000 px text využije celú šírku a na znak už nie je miesto. */
@media (max-width:1000px){
  .dokaz-text{ display:block; margin-bottom:0; }
  .dokaz-text > .dokaz-uvod{ margin-bottom:42px; }
  .dokaz-znak{ display:none; }
}

.dokaz-video__ramik{
  border:1px solid var(--stone);
  overflow:hidden;
  filter:drop-shadow(0 16px 22px rgba(32,31,29,0.13));
}
.dokaz-video__ramik video{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(.92) contrast(1.02);
}
.dokaz-video figcaption{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--indigo-soft);
}

/* ---------- Dotykové ciele na telefóne ----------
   Prepínač jazykov a spiatočný odkaz sú vizuálne drobné. Na dotykovom
   zariadení im rozšírime aktívnu plochu zvislým odsadením, aby sa dali
   trafiť prstom; vzhľad textu sa nemení. */
@media (pointer: coarse){
  /* E-mail a telefón sú na kontakte to najdôležitejšie — na dotyk musia
     mať poriadnu plochu, nielen výšku riadku. */
  .contact-info a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .jazyky__odkaz{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 4px;
  }
  .jazyky{ gap:6px; }
  .jp-back{
    min-height:44px;
    padding:4px 0;
  }
  .link-underline{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}