/* ==========================================================================
   jirisladek.com — sdílené styly
   Jeden motiv: černá. Žádný light režim — monolit v hero potřebuje černou
   a web je záměrně jednobarevný s jedním akcentem.
   ========================================================================== */

:root{
  --bg:#000000;
  --bg-2:#0A0A0A;
  --bg-3:#121212;
  --ink:#EDEBE6;
  --ink-2:#8F8F8A;
  --ink-3:#55554F;
  --line:rgba(237,235,230,.12);
  --line-2:rgba(237,235,230,.22);
  --ac:#D9FF3F;
  --ac-ink:#0A0A0A;

  --f-display:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --vw:100vw;              /* skutečná šířka okna, nastavuje JS z clientWidth */
  --gutter:clamp(20px, 4vw, 64px);
  --max:1440px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.25s;
  --t:.6s;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:auto;
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1.05rem;
  line-height:1.55;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  min-height:100dvh;
}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}   /* atribut height jinak drží pevnou výšku a obrázek se roztáhne */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
::selection{background:var(--ac);color:var(--ac-ink)}
:focus-visible{outline:1px solid var(--ac);outline-offset:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- typografie ----------------------------------------------------------- */
.label{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.label--ac{color:var(--ac)}

.display{
  font-family:var(--f-display);
  font-weight:800;
  font-variation-settings:"opsz" 96;
  letter-spacing:-.035em;
  line-height:.92;
  font-size:clamp(2.75rem, 9.2vw, 9.6rem);
  text-wrap:balance;
}
.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:"opsz" 96;
  letter-spacing:-.03em;
  line-height:.96;
  font-size:clamp(2rem, 5.4vw, 4.8rem);
  text-wrap:balance;
}
.h3{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:clamp(1.35rem, 2.4vw, 1.9rem);
}
.lead{
  font-size:clamp(1.1rem, 1.6vw, 1.35rem);
  line-height:1.45;
  color:var(--ink-2);
  max-width:38ch;
}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}

.prose{max-width:62ch}
.prose p{margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{border-bottom:1px solid var(--line-2);transition:border-color var(--t-fast)}
.prose a:hover{border-color:var(--ac)}

/* --- tlačítka a odkazy ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.5em;
  border-radius:999px;
  background:var(--ac);color:var(--ac-ink);
  font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .i{transition:transform var(--t-fast) var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn--lg{padding:1.15em 1.9em;font-size:1.05rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}
.link-arrow .i{transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover .i{transform:translate(3px,-3px)}
.link-arrow--ac{color:var(--ac)}

/* --- navigace ---------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding-block:18px;
  transition:background var(--t), backdrop-filter var(--t), padding var(--t);
}
.nav.is-scrolled{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:12px;
}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7em;
}
.nav__logo i{width:8px;height:8px;border-radius:50%;background:var(--ac);display:inline-block}
/* portrét místo tečky: limetkový prstenec drží akcent, který tečka nesla */
.nav__logo img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1.5px var(--ac);flex:none;
  transition:box-shadow var(--t-fast);
}
.nav__logo:hover img{box-shadow:0 0 0 2px var(--ac)}
@media (max-width:420px){.nav__logo img{width:24px;height:24px}}
.nav__links{display:flex;gap:28px}
.nav__links a{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding-block:4px;
  transition:color var(--t-fast);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ac);
}
.nav__cta{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.7em 1.1em;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.nav__cta:hover{background:var(--ac);color:var(--ac-ink);box-shadow:inset 0 0 0 1px var(--ac)}
.nav__burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  margin-right:-10px;
}
.nav__burger span{
  display:block;width:22px;height:1.5px;background:var(--ink);position:relative;
  transition:transform var(--t) var(--ease), background var(--t-fast);
}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:100%;height:100%;background:var(--ink);
  transition:transform var(--t) var(--ease), top var(--t) var(--ease);
}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}
html.menu-open .nav__burger span{background:transparent}
html.menu-open .nav__burger span::before{top:0;transform:rotate(45deg)}
html.menu-open .nav__burger span::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:40;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--gutter) + 64px) var(--gutter) var(--gutter);   /* 64px = výška fixní lišty */
  transform:translateY(-100%);
  transition:transform .7s var(--ease);
  visibility:hidden;
}
html.menu-open .menu{transform:none;visibility:visible}
html.menu-open{overflow:hidden}
.menu a{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.4rem, 11vw, 5rem);line-height:1.02;
  display:flex;align-items:baseline;gap:.4em;padding-block:.08em;
  color:var(--ink);
}
.menu a small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-3)}
.menu > a:first-of-type{margin-top:auto}   /* spolu s margin-top:auto patičky drží odkazy uprostřed */
.menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px 32px;color:var(--ink-2);font-size:.9rem}

@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* --- hero --------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;align-items:end;
  padding-top:clamp(120px, 20vh, 200px);
  padding-bottom:clamp(40px, 7vh, 80px);
  overflow:clip;
  isolation:isolate;
}
.hero__stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.hero__stage canvas.is-on{opacity:1}
.hero__fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  opacity:.9;transition:opacity 1.2s ease;
}
.hero__stage.is-live .hero__fallback{opacity:0}
/* bez 3D (telefon, slabý stroj): statický kámen pomalu pluje (jen transform = GPU),
   parallaxu při scrollu k tomu přidává site.js */
html.base .hero__fallback{transform-origin:60% 45%;animation:heroDrift 28s ease-in-out infinite alternate}
html.base .hero__stage{will-change:transform,opacity}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-3%,2%,0)}}
.hero__stage::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.85) 100%);
}
/* ?flat=1: hero na pevnou výšku, ať jde vyrenderovat celá stránka v jednom vysokém okně */
html.flat .hero{min-height:900px}
.hero__inner{position:relative;display:grid;gap:clamp(28px, 4vh, 48px)}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.hero__title{max-width:14ch}
.hero__title em{font-style:normal;color:var(--ink-2)}
.hero__bottom{
  display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:end;
}
.hero__sub{max-width:44ch;color:var(--ink-2);font-size:clamp(1rem, 1.45vw, 1.2rem);line-height:1.5}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 20px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__scroll{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.hero__scroll i{
  width:1px;height:38px;background:linear-gradient(var(--ink-3), transparent);display:block;
  animation:drop 1.8s var(--ease) infinite;
  transform-origin:top;
}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:820px){
  .hero__bottom{grid-template-columns:1fr}
  .hero{padding-top:clamp(110px, 18vh, 160px)}
}
@media (max-width:600px){
  .hero__top .label:last-child{display:none}   /* na úzkém displeji stačí jeden štítek */
}

/* --- marquee ------------------------------------------------------------------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;gap:0;width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;padding-inline:26px;
  display:inline-flex;align-items:center;gap:26px;
}
.marquee__track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- sekce ---------------------------------------------------------------------- */
.sec{padding-block:clamp(88px, 12vw, 176px)}
.sec--tight{padding-block:clamp(64px, 8vw, 120px)}
.sec--alt{background:var(--bg-2)}
.sec__head{
  display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:end;
  margin-bottom:clamp(40px, 6vw, 80px);
}
.sec__head .label{padding-bottom:.6em}
.sec__head .h2{grid-column:1 / -1}
.sec__head .lead{grid-column:1 / -1}
@media (min-width:1000px){
  .sec__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .sec__head .label{grid-column:1 / -1}
  .sec__head .h2{grid-column:1}
  .sec__head .lead{grid-column:2;justify-self:end;padding-bottom:.3em}
}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- práce (karty) --------------------------------------------------------------- */
.work-grid{display:grid;gap:clamp(24px, 3vw, 40px)}
@media (min-width:900px){
  .work-grid{grid-template-columns:repeat(12,1fr)}
  .work-card:nth-child(1){grid-column:1 / span 7}
  .work-card:nth-child(2){grid-column:8 / span 5;margin-top:clamp(40px, 8vw, 140px)}
  .work-card:nth-child(3){grid-column:1 / span 5;margin-top:clamp(0px, 2vw, 24px)}
  .work-card:nth-child(4){grid-column:6 / span 7;margin-top:clamp(40px, 8vw, 140px)}
  .work-card:nth-child(n+5){grid-column:span 6}
}
/* tři store screenshoty jako plakáty vyrůstající zespodu karty */
.work-card__media--store{
  display:flex;align-items:flex-start;justify-content:center;gap:3%;
  padding:6% 6% 0;aspect-ratio:16/10;
  background:radial-gradient(120% 90% at 50% 100%, #1A1A1A 0%, #0A0A0A 60%);
}
.work-card__media--store img{
  width:29%;height:auto;object-fit:contain;border-radius:10px;
  box-shadow:0 0 0 1px var(--line);filter:none;
  transition:transform 1.1s var(--ease);
}
.work-card__media--store img:nth-child(2){transform:translateY(-4%)}
.work-card:hover .work-card__media--store img{transform:translateY(-3%)}
.work-card:hover .work-card__media--store img:nth-child(2){transform:translateY(-7%)}
.work-card{display:grid;gap:18px;position:relative}
.work-card__media{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--bg-3);
  aspect-ratio:16/10;
}
.work-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s;
  filter:saturate(.85) contrast(1.02);
}
.work-card:hover .work-card__media img{transform:scale(1.035);filter:saturate(1)}
.work-card__media::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none;
}
.work-card__body{display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:baseline}
.work-card__idx{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-3)}
.work-card__title{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem, 2.2vw, 2rem);line-height:1.05}
.work-card__tags{grid-column:2;color:var(--ink-2);font-size:.92rem}
.work-card__arrow{
  font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);
  transition:transform var(--t-fast) var(--ease), color var(--t-fast);
}
.work-card:hover .work-card__arrow{transform:translate(3px,-3px);color:var(--ac)}
.work-card a.cover{position:absolute;inset:0;z-index:1}
.work-card__media--phones{
  display:flex;align-items:flex-end;justify-content:center;gap:4%;
  padding:8% 8% 0;aspect-ratio:16/10;
  background:radial-gradient(120% 90% at 50% 100%, #1A1A1A 0%, #0A0A0A 60%);
}
.work-card__media--phones img{
  width:26%;height:auto;object-fit:contain;border-radius:14px 14px 0 0;
  transform:translateY(6%);transition:transform 1.1s var(--ease);filter:none;
}
.work-card__media--phones img:nth-child(2){width:30%;transform:translateY(0)}
.work-card:hover .work-card__media--phones img{transform:translateY(0)}
.work-card:hover .work-card__media--phones img:nth-child(2){transform:translateY(-3%)}

.work-card__media--tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  aspect-ratio:16/10;padding:0;background:#0A0A0A;
}
.work-card__media--tiles img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.05);
  transition:filter .6s, transform 1.1s var(--ease);
}
.work-card:hover .work-card__media--tiles img{filter:saturate(.9);transform:none}

/* --- služby ------------------------------------------------------------------------ */
.svc-list{border-top:1px solid var(--line)}
.svc{
  display:grid;gap:12px 32px;padding-block:clamp(28px, 3.6vw, 48px);
  border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;
  position:relative;
  transition:padding-left var(--t) var(--ease);
}
.svc__idx{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-3);padding-top:.6em}
.svc__name{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.7rem, 3.6vw, 3.2rem);line-height:1;
}
.svc__desc{grid-column:2;color:var(--ink-2);max-width:52ch}
.svc__price{
  grid-column:2;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;color:var(--ink);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
}
.svc__price b{font-weight:500;color:var(--ac)}
.svc__price span{color:var(--ink-3)}
@media (min-width:1000px){
  .svc{grid-template-columns:80px minmax(0,5fr) minmax(0,5fr) auto;align-items:start}
  .svc__desc{grid-column:3;padding-top:.5em}
  .svc__price{grid-column:4;justify-self:end;padding-top:.6em;text-align:right;flex-direction:column;align-items:flex-end;gap:2px}
  .svc:hover{padding-left:12px}
}
.svc a.cover{position:absolute;inset:0}

/* --- postup / kroky ---------------------------------------------------------------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--bg);padding:clamp(26px, 3vw, 40px);display:grid;gap:14px;align-content:start}
.sec--alt .step{background:var(--bg-2)}
.step .label{color:var(--ac)}
.step .h3{max-width:16ch}
.step p{color:var(--ink-2);font-size:.98rem}

/* --- čísla ----------------------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg);padding:clamp(24px, 3vw, 40px) 0;display:grid;gap:6px}
.stat b{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(2.6rem, 6vw, 5.2rem);
}
.stat span{color:var(--ink-2);font-size:.92rem}
@media (min-width:700px){.stat{padding-inline:clamp(16px, 2vw, 32px)}.stat:first-child{padding-left:0}}

/* --- CTA + patička ---------------------------------------------------------------- */
.cta{
  padding-block:clamp(96px, 14vw, 200px);
  border-top:1px solid var(--line);
  position:relative;overflow:clip;
}
.cta__inner{display:grid;gap:clamp(28px, 4vw, 48px)}
.cta__title{max-width:12ch}
.cta__row{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta__mail{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem, 3vw, 2.4rem);
  border-bottom:1px solid var(--line-2);padding-bottom:.1em;
  transition:border-color var(--t-fast);
}
.cta__mail:hover{border-color:var(--ac)}

.footer{border-top:1px solid var(--line);padding-block:32px 40px;font-size:.88rem;color:var(--ink-2)}
.footer__row{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:center}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__links a{transition:color var(--t-fast)}
.footer__links a:hover{color:var(--ink)}
.footer .label{color:var(--ink-3)}

/* --- detail projektu --------------------------------------------------------------- */
.case-hero{padding-top:clamp(140px, 20vh, 220px);padding-bottom:clamp(40px, 6vw, 80px)}
.case-hero__grid{display:grid;gap:32px}
@media (min-width:1000px){.case-hero__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end}}
.case-meta{
  display:grid;grid-template-columns:auto 1fr;gap:10px 24px;
  font-size:.92rem;border-top:1px solid var(--line);padding-top:20px;
}
.case-meta dt{color:var(--ink-3);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding-top:.35em}
.case-meta dd{color:var(--ink)}
.case-media{border-radius:10px;overflow:hidden;background:var(--bg-3);position:relative}
.case-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none}
.case-media img{width:100%;height:auto}
.case-media--wide{aspect-ratio:21/9}
.case-media--wide img{height:100%;object-fit:cover}
.phones{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px, 2vw, 28px);
  padding:clamp(24px, 4vw, 64px) clamp(16px, 4vw, 64px) 0;
  background:radial-gradient(90% 80% at 50% 100%, #1A1A1A 0%, #0A0A0A 65%);
  border-radius:10px;overflow:hidden;
}
.phones img{border-radius:18px 18px 0 0;box-shadow:0 0 0 1px var(--line)}
.phones img:nth-child(even){transform:translateY(clamp(12px, 3vw, 40px))}
@media (max-width:700px){.phones{grid-template-columns:repeat(2,1fr)}}
.case-body{display:grid;gap:clamp(40px, 6vw, 96px)}
.case-row{display:grid;gap:20px 48px}
@media (min-width:1000px){.case-row{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.case-row .h3{max-width:16ch}
.gallery{display:grid;gap:clamp(12px, 2vw, 24px)}
@media (min-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figure{border-radius:8px;overflow:hidden;background:var(--bg-3);position:relative}
.gallery figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gallery figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:rgba(0,0,0,.55);padding:6px 10px;border-radius:4px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tiles img{width:100%;aspect-ratio:1;object-fit:contain;background:#141414;border-radius:6px;padding:8%;box-shadow:inset 0 0 0 1px var(--line)}
.next{
  border-top:1px solid var(--line);padding-block:clamp(56px, 8vw, 120px);
}
.next a{display:grid;gap:12px}
.next .h2{transition:color var(--t-fast)}
.next a:hover .h2{color:var(--ac)}

/* --- formulář ------------------------------------------------------------------------ */
.form{display:grid;gap:22px;max-width:640px}
.form__row{display:grid;gap:22px}
@media (min-width:700px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.input{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  padding:12px 0;font:inherit;font-size:1.05rem;
  transition:border-color var(--t-fast);
  appearance:none;-webkit-appearance:none;
}
.input:focus{outline:none;border-color:var(--ac)}
.input::placeholder{color:var(--ink-3)}
textarea.input{min-height:150px;resize:vertical}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238F8F8A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:24px;
}
select.input option{background:var(--bg-3);color:var(--ink)}
.form__note{color:var(--ink-3);font-size:.85rem;max-width:48ch}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* --- pomocné ---------------------------------------------------------------------------- */
.grid-2{display:grid;gap:clamp(28px, 4vw, 64px)}
@media (min-width:900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-2--wide{grid-template-columns:1fr}
@media (min-width:1000px){.grid-2--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.stack{display:grid;gap:14px}
.stack--lg{gap:28px}
.list{display:grid;gap:14px;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding-top:14px;border-bottom:1px solid var(--line);padding-bottom:14px}
.list li:last-child{border-bottom:0}
.list .label{padding-top:.35em}
.compare{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media (min-width:820px){.compare{grid-template-columns:1fr 1fr}}
.compare > div{background:var(--bg);padding:clamp(24px, 3vw, 40px);display:grid;gap:14px;align-content:start}
.compare .h3{margin-bottom:6px}
.compare ul{display:grid;gap:8px;color:var(--ink-2)}
.compare ul li{display:flex;gap:12px}
.compare ul li::before{content:"—";color:var(--ink-3);flex:none}
.compare .is-good ul li::before{content:"+";color:var(--ac)}
.pill{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.5em .8em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}

/* --- zrnitost, kurzor ------------------------------------------------------------------- */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;
  width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.055;
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(5%,4%)}
  100%{transform:translate(0,0)}
}
.cursor{
  position:fixed;left:0;top:0;z-index:70;pointer-events:none;
  width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1px solid rgba(237,235,230,.5);
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-color .3s, opacity .3s;
  opacity:0;
  mix-blend-mode:difference;
}
.cursor__dot{
  position:fixed;left:0;top:0;z-index:71;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ac);
  transition:opacity .3s, transform .3s var(--ease);
  opacity:0;
}
html.has-cursor .cursor,html.has-cursor .cursor__dot{opacity:1}
html.has-cursor .cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(237,235,230,.9)}
html.has-cursor .cursor.is-hidden,html.has-cursor .cursor__dot.is-hidden{opacity:0}
html.has-cursor a,html.has-cursor button{cursor:none}
html.has-cursor{cursor:none}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto}

/* --- odhalování ----------------------------------------------------------------------------- */
/* Skrývá se JEN když je jisté, že animace poběží (html.js-anim z inline skriptu
   v hlavičce + potvrzení ze site.js). Bez JS nebo bez GSAP zůstane všechno vidět. */
.rv{will-change:transform,opacity}
html.js-anim .rv{opacity:0;transform:translateY(22px)}
html.no-anim .rv{opacity:1;transform:none}
.lines .line{display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0}
.lines .line > span{display:block;will-change:transform}
html.js-anim .lines .line > span{transform:translateY(112%)}
html.no-anim .lines .line > span{transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .lines .line > span{transform:none}
  .grain{animation:none}
  .marquee__track{animation:none}
  .hero__scroll i{animation:none;transform:none}
  .hero__fallback{animation:none}
  *{transition-duration:.01ms !important}
}

/* --- výrobní režimy: ?render=1 (jen kámen na černé), ?og=1 (hero bez spodku) -------------- */
html.render .nav,html.render .menu,html.render .grain,html.render .hero__inner,
html.render .hero__fallback,html.render .marquee,html.render main > :not(.hero),html.render .footer,
html.render .cursor,html.render .cursor__dot{display:none !important}
html.render .hero__stage::after{display:none}
html.render .hero__stage canvas{opacity:1;transition:none}
html.og .nav,html.og .menu,html.og .grain,html.og .hero__bottom,html.og .hero__scroll,
html.og .cursor,html.og .cursor__dot{display:none !important}
html.og .hero{min-height:0;height:630px;padding-top:120px;padding-bottom:64px}
html.og .hero__title{font-size:96px}

/* --- ladicí výpis (jen s ?debug) ---------------------------------------------------------- */
#errlog{display:none;position:fixed;left:8px;bottom:8px;z-index:100;max-width:60vw;background:#300;color:#fdd;font:12px/1.4 var(--f-mono);padding:8px 10px;border-radius:6px;white-space:pre-wrap}
#errlog.is-on{display:block}