/* ============================================================
   3DDen — MEDAL THEATER · v5 „černá & červená"
   Černá scéna · bílý text · brandová červená
   ============================================================ */

:root{
  /* stage */
  --bg:#0A0A0C;
  --bg-2:#101013;
  --white:#F5F3F0;
  --ink:#F5F3F0;              /* text on black */
  --muted:rgba(245,243,240,.76);
  --faint:rgba(245,243,240,.56);
  --line:rgba(245,243,240,.1);
  --line-strong:rgba(245,243,240,.26);

  /* světlé plochy — bílé bloky prosvětlují černý podklad */
  --paper:#FFFFFF;
  --paper-ink:#141414;
  --paper-muted:rgba(20,20,20,.6);
  --paper-line:rgba(20,20,20,.12);

  /* brand */
  --red:#E02020;
  --red-2:#F04438;
  --red-deep:#B01515;
  --red-tint:rgba(224,32,32,.12);

  /* medal glows */
  --glow-gold:rgba(222,164,60,.26);
  --glow-yellow:rgba(242,194,30,.22);
  --glow-violet:rgba(160,107,245,.22);
  --glow-red:rgba(224,32,32,.2);

  --shadow-sm:0 10px 30px -14px rgba(0,0,0,.55);
  --shadow:0 30px 70px -28px rgba(0,0,0,.7);

  --maxw:1280px;
  --gutter:clamp(20px,4vw,56px);
  --nav-h:76px;

  --ease-ui:cubic-bezier(.23,1,.32,1);
  --ease:var(--ease-ui);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-label:"Space Grotesk",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--red);color:#fff}

/* height:auto je nutné — jinak by se atributy width/height v HTML (přidané kvůli
   rezervaci místa) použily jako skutečná výška a obrázek by se zdeformoval.
   Takhle slouží jen jako poměr stran a layout se při načítání neposouvá. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
main:focus{outline:none}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:88%;
  letter-spacing:-.02em;
  line-height:1.03;
  text-wrap:balance;
}
.t-display,
h1.display-xl,h2.display-l{
  font-style:italic;
  font-weight:900;
  font-stretch:76%;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.96;
}
.display-xl{font-size:clamp(2.7rem,6.4vw,6rem)}
.display-l{font-size:clamp(2.1rem,4.6vw,3.9rem)}

.eyebrow{
  font-family:var(--font-label);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--red-2);
  display:inline-flex;
  align-items:center;
  gap:.9em;
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.eyebrow--cyan{color:var(--red-2)}

.lede{
  color:var(--muted);
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  max-width:52ch;
}
em.hl,em.hl-ember,em.hl-cyan{font-style:inherit;color:var(--red)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(90px,11vw,150px);position:relative}

/* ---------- word-mask reveal ---------- */
.mask-line{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.mask-line>span{display:inline-block;transform:translateY(115%);will-change:transform}
.in .mask-line>span{transition:transform 1.1s var(--ease-out);transform:translateY(0)}
.in .mask-line:nth-child(2)>span{transition-delay:.09s}
.in .mask-line:nth-child(3)>span{transition-delay:.18s}
.in .mask-line:nth-child(4)>span{transition-delay:.27s}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.06s}
.stagger.in>*:nth-child(3){transition-delay:.12s}
.stagger.in>*:nth-child(4){transition-delay:.18s}
.stagger.in>*:nth-child(5){transition-delay:.24s}
.stagger.in>*:nth-child(6){transition-delay:.3s}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-label);
  font-size:.84rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:17px 30px;
  border-radius:999px;
  position:relative;
  overflow:hidden;
  transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui),border-color .3s var(--ease-ui),transform .12s var(--ease-ui);
  white-space:nowrap;
}
.btn .arr{transition:transform .3s var(--ease-ui)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.97)}

.btn-ember{background:var(--red);color:#fff;box-shadow:none}
.btn-ember:hover{background:var(--red-deep);box-shadow:none}

.btn-ghost{
  border:1px solid var(--line-strong);
  color:var(--ink);
  background:rgba(245,243,240,.03);
  /* backdrop-filter pryč — na plochém tmavém pozadí nebyl vidět, jen se přepočítával při scrollu */
}
.btn-ghost:hover{border-color:var(--red-2);color:var(--red-2)}

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:3000;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:transform 1s var(--ease-in-out),visibility 0s 1s;
}
#preloader.done{transform:translateY(-100%);visibility:hidden}
#preloader .pl-counter{
  font-family:var(--font-display);
  font-style:italic;font-weight:900;font-stretch:76%;
  font-size:clamp(5rem,18vw,12rem);line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(245,243,240,.85);
  font-variant-numeric:tabular-nums;
}
#preloader .pl-line{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);
  font-variant-numeric:tabular-nums;
}
#preloader .pl-bar{
  width:min(320px,60vw);height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px;
}
#preloader .pl-bar i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),var(--red-2));
}

/* ---------- nav ---------- */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:transform .5s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#site-nav.scrolled{
  /* hustší tmavý podklad místo backdrop-bluru — blur fixní lišty se přepočítává
     při KAŽDÉM scrollnutém framu; na tmavém webu je rozdíl nepostřehnutelný */
  background:rgba(10,10,12,.92);
  border-bottom-color:var(--line);
}
#site-nav.hidden{transform:translateY(-100%)}
#site-nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand svg{display:block}
.brand .brand-den{
  font-family:var(--font-display);font-weight:800;font-stretch:88%;
  font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);
}

.menu-btn{
  font-family:var(--font-label);font-size:.78rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
  padding:10px 4px;z-index:1102;position:relative;
}
.menu-btn::after{
  content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.menu-btn:hover::after{transform:scaleX(1);transform-origin:left}

#mobile-menu{
  position:fixed;inset:0;z-index:990;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 9vw;gap:8px;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .7s var(--ease-in-out),visibility 0s .7s;
}
#mobile-menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-in-out)}
#mobile-menu a{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(2.2rem,9vw,3.6rem);color:var(--ink);line-height:1.12;
  display:flex;align-items:baseline;gap:16px;
  transition:color .3s;
}
#mobile-menu a:hover{color:var(--red-2)}
#mobile-menu a small{font-family:var(--font-label);font-style:normal;font-size:.7rem;letter-spacing:.2em;color:var(--red-2)}
#mobile-menu .mm-contact{margin-top:34px;color:var(--muted);font-size:.95rem}
#mobile-menu .mm-cta{margin-top:22px;align-self:flex-start;font-style:normal;font-stretch:100%;font-size:.84rem;text-transform:uppercase}

/* skip link + focus */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:4000;
  background:var(--red-deep);color:#fff;padding:12px 18px;border-radius:8px;
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.1em;
  transform:translateY(-200%);transition:transform .3s;
}
.skip-link:focus{transform:none}

:is(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--red-2);outline-offset:3px;border-radius:4px;
}
#design-modal :is(a,button,input,textarea):focus-visible{outline-color:var(--red-deep)}

/* ============================================================
   HERO — MEDAL THEATER
   ============================================================ */
#hero{position:relative;background:var(--bg)}
.theater{
  position:relative;
  height:100svh;
  overflow:hidden;
}
.t-glow{
  position:absolute;inset:-10%;
  opacity:0;visibility:hidden; /* gsap autoAlpha přepíná i visibility — skryté vrstvy se neskládají */
  pointer-events:none;
}
.t-glow.g0{background:radial-gradient(55% 48% at 50% 44%,var(--glow-gold),transparent 70%)}
.t-glow.g1{background:radial-gradient(55% 48% at 50% 44%,var(--glow-yellow),transparent 70%)}
.t-glow.g2{background:radial-gradient(55% 48% at 50% 44%,var(--glow-violet),transparent 70%)}
.t-glow.g3{background:radial-gradient(55% 48% at 50% 44%,var(--glow-red),transparent 70%)}

.t-stage{position:absolute;inset:0}
.t-medal{
  position:absolute;
  left:50%;top:44%;bottom:auto;
  /* Kotvíme STŘED — první medaile je na výšku (0,746), zbylé tři čtvercové;
     při kotvení spodkem by každá seděla jinde a při přeletu poskakovaly.
     Strop 49vh drží i tu nejvyšší uvnitř obrazovky na nízkých oknech. */
  /* 68vh strop se na běžných oknech vůbec neuplatní (na 900px dá 612 → platí
     600px jako v nasazené verzi, kterou uživatel schválil) a chrání jen nízká
     okna, kde by medaile jinak přetekla přes obrazovku.
     POZOR: vyrovnávací koeficient je vepsaný přímo do čísel a NENÍ počítaný přes
     calc(var() * var()) — Safari takové násobení uvnitř min() zahodí, šířka pak
     spadne na vlastní velikost obrázku (746 px) a medaile se rozjedou vedle sebe. */
  width:min(86vw,600px,68vh);
  /* Skryté od prvního vykreslení, stejně jako .t-glow výš. Bez toho leží všechny
     čtyři medaile na sobě a nemají ještě od GSAPu vycentrování — než se skript
     po preloaderu rozběhne, bliknul přes celou scénu poslední kus v pořadí
     (vánoční) posunutý mimo střed. Skript pak první medaili odkryje sám. */
  opacity:0;visibility:hidden;
  /* ŽÁDNÝ transform tady! Centrování řeší GSAP přes xPercent/yPercent (viz initTheater).
     Když bylo -50% v CSS a GSAP zároveň animoval x ve vw, GSAP tu procentuální část
     zahodil a medaile skončila o půlku své šířky vedle (nalezeno na okně 965×610). */
  will-change:transform,opacity;
}
/* Vyrovnání čtyř medailí na stejnou optickou velikost a stejné těžiště.
   Změřeno skriptem .orig/centroid.swift: obsah zabírá v každém souboru jinou
   část plátna (74 % u European Open vs 90–97 % u čtvercových) a alfa-vážené
   těžiště leží jinde (48,0 / 48,4 / 50,4 / 54,3 % výšky). Bez korekce působí
   medaile různě velké a při přeletu „poskakují" nahoru a dolů.
   --k = poměrová korekce velikosti, top = korekce těžiště. */
.t-medal[data-i="0"]{width:min(81.5vw,569px,64.5vh);top:43.75%}
.t-medal[data-i="1"]{width:min(89.7vw,626px,70.9vh);top:45.02%}
.t-medal[data-i="2"]{width:min(90.1vw,629px,71.3vh);top:44.82%}
.t-medal[data-i="3"]{width:min(83.2vw,581px,65.8vh);top:41.96%}

.t-medal img{
  width:100%;height:auto;
  filter:drop-shadow(0 0 34px rgba(222,164,60,.35)) drop-shadow(0 50px 70px rgba(0,0,0,.65));
}

.t-medal:not([data-i="0"]) img,
.t-medal[data-i="0"].printed img:not(.ghost){
  animation:medfloat 6.5s var(--ease-in-out) infinite alternate;
}
@keyframes medfloat{
  from{transform:translateY(-7px) rotate(-1deg)}
  to{transform:translateY(9px) rotate(1.2deg)}
}

.t-medal[data-i="0"] img:not(.ghost){
  clip-path:inset(calc((1 - var(--pq,0)) * 100%) -14% -4% -14%);
  /* will-change:clip-path sem NEDÁVAT — na iOS to povyšuje obrázek 746×1000 na
     vlastní vrstvu a při nedostatku paměti se scéna vykresluje chybně. */
}

/* red blueprint ghost of the finished medal */
.t-medal .ghost{
  position:absolute;inset:0;
  filter:grayscale(1) brightness(1.9) sepia(.6) hue-rotate(325deg) saturate(2.6)
         drop-shadow(0 0 24px rgba(224,32,32,.4));
  /* --pq (72 skoků) místo --p (každý snímek): průhlednost se mění jen když
     přibude vrstva, takže se ten drahý filtr+maska nepřepočítává 240× místo 72×.
     will-change:opacity navíc drží výsledek filtru v paměti jako hotovou texturu
     a mění se pak už jen krytí — bez toho telefon rendruje filtr znovu každý snímek. */
  opacity:calc(var(--holo,1) * .34 * (1 - var(--pq,0)));
  will-change:opacity;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2.5px,rgba(0,0,0,.25) 2.5px 6px);
  mask-image:repeating-linear-gradient(180deg,#000 0 2.5px,rgba(0,0,0,.25) 2.5px 6px);
}
.t-medal .holo-scan{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:url("../assets/img/medal-hero2.webp");
  -webkit-mask-size:100% 100%;
  mask-image:url("../assets/img/medal-hero2.webp");
  mask-size:100% 100%;
  opacity:calc(var(--holo,1) * (1 - var(--pq,0)));
  will-change:opacity;
  pointer-events:none;
}
.t-medal .holo-scan .band{
  position:absolute;left:0;right:0;height:34%;top:-36%;
  background:linear-gradient(180deg,transparent,rgba(240,120,80,.2) 40%,rgba(255,170,130,.38) 50%,rgba(240,120,80,.2) 60%,transparent);
  /* translateY místo top → jede jen na compositoru, žádný layout/paint per frame */
  animation:holoscan 3.2s var(--ease-in-out) infinite;
  will-change:transform;
}
@keyframes holoscan{
  0%{transform:translateY(0)}
  100%{transform:translateY(412%)} /* (104+36)/34 výšky pásu = stejná dráha jako dřív */
}
/* po dotisknutí je sken neviditelný a po odscrollování divadla taky — animaci zastavit */
.t-medal.printed .holo-scan .band,
.theater-off .holo-scan .band{animation-play-state:paused}

/* hot print line + sweeping head */
.t-medal .print-line{
  position:absolute;left:-8%;right:-8%;height:3px;top:0;
  /* pozice v px přes transform (JS ji počítá z výšky scény) — bez layoutu */
  transform:translateY(var(--liney,0px));
  background:linear-gradient(90deg,transparent,var(--red) 18%,var(--red-2) 50%,var(--red) 82%,transparent);
  box-shadow:0 0 20px rgba(224,32,32,.8),0 0 48px rgba(240,68,56,.5);
  transition:opacity .4s;
  will-change:transform;
}
.t-medal .nozzle{
  position:absolute;top:0;left:0;
  width:16px;height:16px;
  /* --nxpx = pozice hlavy v px od levého okraje scény; −8px centruje 16px tečku */
  transform:translate(calc(var(--nxpx,0px) - 8px),-8px);
  background:radial-gradient(circle at 50% 45%,#fff 0 18%,var(--red-2) 40%,var(--red) 66%,transparent 74%);
  border-radius:50%;
  box-shadow:0 0 14px rgba(255,220,200,.95),0 0 34px rgba(224,32,32,.9),0 0 70px rgba(240,68,56,.6);
  will-change:transform;
}
.t-medal .nozzle::after{
  content:"";position:absolute;left:50%;top:-26px;
  width:10px;height:22px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(245,243,240,0),rgba(245,243,240,.35));
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}
.t-medal.printed .print-line{opacity:0}

.t-names{
  position:absolute;left:0;right:0;bottom:16vh;
  display:grid;place-items:center;
  pointer-events:none;
  z-index:5;
}
.t-name{
  grid-area:1/1;
  text-align:center;
  padding-inline:16px;
}
.t-name .big{
  display:block;
  font-family:var(--font-display);
  font-style:italic;font-weight:900;font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(2.3rem,7.4vw,5.8rem);
  line-height:.94;
  color:var(--ink);
}
.t-name .sub{
  display:block;margin-top:14px;
  visibility:hidden; /* až GSAP rozhodne, který podtitulek patří k medaili — jinak by se všechny 4 překryly, než se skript rozběhne */
  font-family:var(--font-label);font-size:.74rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}

.t-badge{
  position:absolute;top:calc(var(--nav-h) + 18px);left:50%;transform:translateX(-50%);
  z-index:6;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:max-content;max-width:min(88vw,640px);
  text-align:center;line-height:1.6;
  font-family:var(--font-label);font-size:.68rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
  border:1px solid rgba(240,68,56,.45);
  background:rgba(224,32,32,.08);
  backdrop-filter:blur(8px);
  padding:11px 22px;border-radius:999px;
  pointer-events:none;
}
.t-badge .star{color:var(--red-2);font-size:.8em}

.t-hud{
  position:absolute;right:var(--gutter);bottom:46px;z-index:6;
  text-align:right;
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red-2);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

.t-bottom{
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  z-index:6;pointer-events:none;
}
.t-progress{
  width:min(240px,38vw);height:2px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.t-progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%; /* plní se přes transform, ne width */
  background:linear-gradient(90deg,var(--red),var(--red-2));
}
.t-cue{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);
}
@keyframes cuepulse{0%,100%{opacity:.9}50%{opacity:.35}}

/* ============================================================
   MANIFEST — text se dobarvuje při scrollu
   ============================================================ */
#manifest{background:var(--bg);overflow:hidden}
#manifest .wrap{max-width:1180px;position:relative;z-index:1}
.manifest-medal{
  position:absolute;right:-8%;top:50%;
  width:min(48vw,580px);
  transform:translateY(-50%) rotate(14deg);
  opacity:.13;
  filter:grayscale(.35) drop-shadow(0 0 60px rgba(224,32,32,.25));
  pointer-events:none;
}
.m-eyebrow{
  display:block;
  font-family:var(--font-label);font-size:.68rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red-2);
  margin-bottom:34px;
}
.fill-part{
  font-family:var(--font-display);
  font-style:italic;font-weight:900;font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3.8rem);
  line-height:1.04;
  letter-spacing:0;
  text-wrap:balance;
}
/* podřízený odstavec — normální velikost, jen efekt dobarvování zůstává */
.fill-part--sub{
  font-family:var(--font-body);
  font-style:normal;font-weight:600;font-stretch:100%;
  text-transform:none;
  font-size:clamp(1.1rem,1.65vw,1.45rem);
  line-height:1.55;
  max-width:56ch;
  text-wrap:pretty;
}
.fill-part + .fill-part{margin-top:1.4em}
.fill-part .w{color:rgba(245,243,240,.16);transition:color .25s linear}
.fill-part .w.on{color:var(--ink)}
#manifest .hero-ctas{margin-top:54px}
.hero-sub{margin-top:26px;max-width:50ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.18rem)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   KLIENTI — marquee
   ============================================================ */
#klienti{background:var(--bg);padding-block:clamp(80px,10vw,130px)}
.klienti-head{
  margin-bottom:clamp(44px,5vw,70px);
  display:grid;grid-template-columns:1.4fr auto;
  align-items:center;gap:clamp(24px,4vw,70px);
}
.klienti-head .kh-text{min-width:0}
.klienti-head .lede{margin-top:20px}
.cov-lockup{
  background:#fff;border-radius:18px;
  padding:clamp(18px,2vw,30px);
  box-shadow:0 0 0 1px var(--line),0 0 50px rgba(224,32,32,.14),0 30px 60px rgba(0,0,0,.5);
  justify-self:end;
}
.cov-lockup img{width:min(38vw,300px);height:auto;display:block}
@media (max-width:900px){
  .klienti-head{grid-template-columns:1fr}
  .cov-lockup{justify-self:start}
  .cov-lockup img{width:min(70vw,300px)}
}
.marquee{overflow:hidden;position:relative}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  will-change:transform;
  animation:marquee 44s linear infinite;
  animation-delay:-22s; /* pás vypadá, jako by běžel odjakživa — žádný „začátek" */
}
/* mimo obrazovku pásy stojí — šetří to compositor a scroll je plynulejší */
.mq-off .marquee-track,.mq-off .dm-track{animation-play-state:paused}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.m-chip{
  background:#fff;border-radius:14px;
  height:76px;padding:15px 28px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  /* mezera jako margin (ne gap na tracku) — posun o −50 % pak sedí na pixel a smyčka neskáče */
  margin-right:clamp(16px,2.2vw,28px);
  transition:transform .35s var(--ease);
}
.m-chip:hover{transform:translateY(-4px)}
.m-chip img{height:100%;width:auto;max-width:190px;object-fit:contain}

/* ============================================================
   PROCES
   ============================================================ */
#proces{background:var(--bg)}
.proces-head{padding-top:clamp(90px,11vw,140px);padding-bottom:40px}
.proces-head .lede{margin-top:20px}

.h-scroll{
  position:relative;
  /* Pás se 4 kartami je ~1336 px široký. Bez ořezu čouhá mimo obrazovku a na
     telefonu se dá odzoomovat na prázdnou černou plochu vpravo. */
  overflow:hidden;
}
.h-track{
  display:flex;gap:clamp(20px,2.6vw,36px);
  padding:40px var(--gutter) clamp(90px,10vw,140px);
  width:max-content;
  will-change:transform;
}
.step-card{
  position:relative;
  width:min(80vw,960px);
  min-height:min(66vh,560px);
  background:transparent;
  border:0;
  border-radius:0;
  padding:clamp(28px,3vw,44px) min(38vw,440px) clamp(28px,3vw,44px) clamp(28px,4vw,60px);
  display:flex;flex-direction:column;justify-content:center;
  overflow:visible;
}
.step-tag{
  position:relative;z-index:1;
  font-family:var(--font-label);font-size:.7rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red-2);
  display:inline-flex;align-items:center;gap:.8em;margin-bottom:18px;
}
.step-tag::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}

.step-img{
  position:absolute;right:clamp(-10px,1vw,30px);left:auto;
  width:min(34vw,400px);
  /* menší strop výšky: bez něj by se medaile po zvednutí dotýkala horní hrany
     okna a ořízla se (je vysoká ~486 px v kartě vysoké 560 px) */
  max-height:min(46vh,390px);object-fit:contain;
  top:46%;
  transform:translateY(-50%) rotate(3deg);
  z-index:0;
  animation:stepfloat 7s var(--ease-in-out) infinite alternate;
  pointer-events:none;
}
/* Každý render má těžiště jinde ve svém plátně (změřeno .orig/centroid.swift:
   medvěd 53,4 % / Nottingham 50,9 % / ninja 47,0 % / sekera 52,9 %), takže při
   společném `top` sedí opticky každá jinde — medvěd nejníž. Korekce je vepsaná
   přímo v vh, NE přes calc(var()*var()) — to Safari u min() zahodí (viz .t-medal). */
.step-card[data-step="1"] .step-img{top:calc(46% - 1.56vh)} /* medvěd — zvednout nejvíc */
.step-card[data-step="2"] .step-img{top:calc(46% - .41vh)}
.step-card[data-step="3"] .step-img{top:calc(46% + 1.38vh)} /* ninja — srovnat dolů */
.step-card[data-step="4"] .step-img{top:calc(46% - 1.33vh)}
@keyframes stepfloat{
  from{transform:translateY(calc(-50% - 8px)) rotate(1.5deg)}
  to{transform:translateY(calc(-50% + 9px)) rotate(4.5deg)}
}
.step-card[data-step="1"] .step-img{filter:drop-shadow(0 0 32px rgba(222,164,60,.4)) drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.step-card[data-step="2"] .step-img{filter:drop-shadow(0 0 32px rgba(143,166,201,.45)) drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.step-card[data-step="3"] .step-img{filter:drop-shadow(0 0 32px rgba(160,107,245,.45)) drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.step-card[data-step="4"] .step-img{filter:drop-shadow(0 0 32px rgba(226,64,44,.45)) drop-shadow(0 40px 60px rgba(0,0,0,.6))}

.step-card h3{
  position:relative;z-index:1;
  font-style:italic;font-weight:900;font-stretch:76%;text-transform:uppercase;
  font-size:clamp(2rem,4.4vw,3.8rem);margin:0 0 20px;
}
.step-card p{position:relative;z-index:1;color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);max-width:44ch}
/* parametry kroku — obrysové chipy v řadě */
.step-card .tagpills{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:34px;
}
.pill{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);
}
.pill--gold,.pill--ember{border-color:rgba(240,101,60,.5);color:var(--red-2)}

.step-card .glow{
  position:absolute;right:-8%;left:auto;top:50%;transform:translateY(-50%);
  width:min(52vw,620px);height:min(52vw,620px);border-radius:50%;
  background:radial-gradient(circle,var(--glow-red),transparent 62%);
  pointer-events:none; /* blur odstraněn — radial-gradient je měkký sám, filtr jen pálil GPU */
}
.step-card[data-step="1"] .glow{background:radial-gradient(circle,var(--glow-gold),transparent 62%)}
.step-card[data-step="2"] .glow{background:radial-gradient(circle,rgba(143,166,201,.2),transparent 62%)}
.step-card[data-step="3"] .glow{background:radial-gradient(circle,var(--glow-violet),transparent 62%)}
.step-card[data-step="4"] .glow{background:radial-gradient(circle,var(--glow-red),transparent 62%)}
.mini-medal{display:none}
.layers-demo{display:none}

.step-progress{
  position:sticky;left:0;bottom:0;
  height:3px;margin:0 var(--gutter);
  background:var(--line);border-radius:2px;overflow:hidden;
  transform:translateY(-16px);
}
.step-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--red),var(--red-2))}

/* mobil = zmenšený desktop: text vlevo, medaile vpravo vedle něj */
body.v-steps .h-track{flex-direction:column;width:auto;padding-bottom:clamp(60px,8vw,100px);gap:clamp(30px,7vw,52px)}
body.v-steps .step-card{
  width:100%;margin-inline:auto;
  min-height:min(60vw,310px);
  padding:20px min(41vw,200px) 20px clamp(18px,4vw,32px);
}
body.v-steps .step-card p{font-size:.92rem}
body.v-steps .step-img{
  width:min(37vw,190px);
  max-height:min(54vw,280px);
  right:clamp(2px,1.5vw,12px);
}
body.v-steps .step-card .glow{width:min(80vw,380px);height:min(80vw,380px);right:-16%}
body.v-steps .step-progress{display:none}

/* POZOR: tady bývalo `content-visibility:auto` na #cisla/#tym/#kontakt/footer.
   Odstraněno — #cisla leží NAD sekcí materiálů a její odhadovaná výška (900 px)
   se při vykreslení změnila na skutečnou, čímž se všechno pod ní skokem posunulo.
   Zámek Predatora pak chytal na jiném místě, než kde uživatel byl → „už jsem
   skoro pod tím a teprve pak mě to tam hodí". Výkon to nepotřebuje (120 fps). */

/* ============================================================
   ČÍSLA
   ============================================================ */
#cisla{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.stat{
  padding:clamp(44px,5vw,80px) clamp(18px,2.5vw,40px);
  border-left:1px solid var(--line);
  position:relative;
}
.stat:first-child{border-left:0}
.stat .val{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:1;
  color:var(--red);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:4px;
}
.stat .val .suffix{color:var(--ink);font-size:.55em}
.stat .lab{
  margin-top:14px;
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.stat .sub{margin-top:6px;color:var(--muted);font-size:.86rem}

/* ============================================================
   MATERIÁL — minulost vs. budoucnost
   ============================================================ */
#material{
  background:var(--bg);
  background-image:
    linear-gradient(rgba(245,243,240,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,243,240,.03) 1px,transparent 1px);
  background-size:56px 56px;
  border-bottom:1px solid var(--line);
}
.mat-stage{
  /* zpět na plnou scénu jako v nasazené verzi, kterou uživatel schválil */
  position:relative;height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
}
/* Když se obsah nevejde do okna, JS přidá .mat-flow a sekce se místo zámku
   normálně scrolluje. Pravidlo NESMÍ být uvnitř mobilní media query — na nízkém
   okně desktopu (např. 1280×560) by scéna zůstala 100svh a obsah by přetekl. */
body.mat-flow .mat-stage{height:auto;padding:70px 0 60px}
/* MOBIL — obě řady pod sebou se do zámku nevejdou. Zmenšit je na míru obrazovky
   jsme zkoušeli a nebylo to ono: písmo skončilo tak malé, že to nešlo číst.
   Místo toho leží obě řady PŘES SEBE na stejném místě a při scrollu se vystřídají:
   nejdřív se odškrtá minulost, pak se na jejím místě rozsvítí budoucnost.
   Text tak zůstává v plné velikosti a video stojí uprostřed jako na počítači. */
body.mat-solo .mat-stage{padding-top:var(--nav-h)}
/* nadpis sekce je absolutní, takže ho padding neposune — jinak leží přes logo */
body.mat-solo .mat-head{top:calc(var(--nav-h) + 2px)}
body.mat-solo .mat-cols{grid-template-columns:1fr}
body.mat-solo .mat-medal{grid-row:1;grid-column:1}
body.mat-solo .mat-col{
  grid-row:2;grid-column:1;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s;
}
body.mat-solo .mat-col.show{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}

.mat-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(56vw,680px);height:min(56vw,680px);border-radius:50%;
  background:radial-gradient(circle,var(--glow-red),transparent 70%);
  filter:blur(24px);pointer-events:none;
}
.mat-head{
  position:absolute;top:calc(var(--nav-h) + 22px);left:0;right:0;
  text-align:center;
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);
  padding-inline:16px;
}
.mat-cols{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(22px,4.5vw,80px);
  align-items:center;width:100%;
}
.mat-col-head{
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:baseline;gap:14px;
}
.mat-col-head span{font-size:.62rem;letter-spacing:.18em;opacity:.75}
.mat-col-head--past{color:var(--faint)}
.mat-col-head--future{color:var(--red-2)}
.mat-left{text-align:right}
.mat-left .mat-item{flex-direction:row-reverse}
.mat-item{
  display:flex;align-items:center;gap:16px;
  padding:15px 0;
  border-top:1px solid var(--line);
  opacity:.3;
  transition:opacity .45s var(--ease);
}
.mat-list .mat-item:first-of-type{border-top:0}
.mat-item.on{opacity:1}
.mat-item .chip{
  font-family:var(--font-label);font-size:.6rem;letter-spacing:.1em;
  border:1px solid var(--line-strong);border-radius:7px;
  padding:5px 9px;color:var(--faint);flex-shrink:0;
  transition:all .4s var(--ease);
}
.mat-item.on .chip{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 18px rgba(224,32,32,.35)}
.mat-item h3{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:80%;
  font-size:clamp(1.05rem,1.7vw,1.5rem);
  letter-spacing:.02em;text-transform:uppercase;margin:0;
  transition:color .3s,text-decoration-color .4s;
  text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:3px;
}
.mat-right .mat-item h3{text-decoration:none}
.mat-left .mat-item.done h3{text-decoration-color:var(--red);color:var(--faint)}
.mat-left .mat-item.done .chip{background:transparent;border-color:var(--line);color:var(--faint)}
.mat-item p{margin:5px 0 0;color:var(--muted);font-size:.88rem;max-width:30ch;line-height:1.5}
.mat-item > div{min-width:0}
.mat-medal{
  position:relative;width:min(34vw,440px);
  z-index:2;
}
/* výškový ořez — medaile vyplní kartu, prázdné pozadí zůstane mimo záběr */
.mat-medal{width:min(30vw,400px)}
.mat-medal video{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 0 0 1px var(--line),0 0 60px rgba(224,32,32,.16),0 44px 90px rgba(0,0,0,.65);
}
.mat-cap{
  margin-top:16px;text-align:center;
  font-family:var(--font-label);font-size:.64rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
#portfolio{background:var(--bg)}

.filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.chip{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--muted);
  transition:all .35s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}

.gallery{
  margin-top:clamp(40px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:dense;
  gap:clamp(14px,1.8vw,24px);
}
.g-item{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--bg-2);
  cursor:pointer;
  grid-column:span 4;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-sm);
  /* scroll-in: wipe open from a clipped sliver */
  opacity:0;
  clip-path:inset(16% 8% 16% 8% round 18px);
  transform:translateY(46px) scale(.98);
  transition:opacity .9s var(--ease),clip-path 1s var(--ease-out),transform 1s var(--ease-out),box-shadow .5s var(--ease);
}
.g-item.in{
  opacity:1;
  clip-path:inset(0 0 0 0 round 18px);
  transform:none;
}
.g-item:hover{box-shadow:var(--shadow)}
/* klidný, velkorysý rytmus: dvojice velkých karet + kino pás přes celou šířku */
.gallery .g-item{grid-column:span 6;aspect-ratio:4/3}
.gallery .g-item:nth-child(5n+1){grid-column:span 12;aspect-ratio:21/9}
/* sbaleno bez JavaScriptu: aspoň prvních 10 fotek. Jakmile se ujme slovo main.js,
   o viditelnosti rozhoduje třída .over — tlačítko "Načíst další" přidá vždy 10. */
.gallery.collapsed .g-item:nth-child(n+11){display:none}
.g-item.over{display:none}
.gallery-more{
  display:flex;margin:clamp(28px,3vw,44px) auto 0;
}
.gallery-more.hidden{display:none}
.g-item.hide{display:none}
.g-item img{
  width:100%;height:118%;object-fit:cover;
  transform:scale(1.04);
  filter:saturate(.7) brightness(.88);
  transition:transform 1s var(--ease),filter .6s var(--ease);
  will-change:transform;
}
.g-item:hover img{transform:scale(1.09);filter:saturate(1) brightness(1)}
.g-item .g-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:44px 20px 16px;
  background:linear-gradient(180deg,transparent 20%,rgba(5,5,7,.88));
  color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  opacity:1;transform:none;
  transition:padding-bottom .4s var(--ease);
}
.g-item:hover .g-cap{padding-bottom:22px}
.g-cap .t{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:80%;
  text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.35rem);
}
@media (max-width:900px){.g-cap .k{display:none}}
.g-cap .k{font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#FFC9BC;white-space:nowrap}

/* nenápadná výzva ke kliknutí na jezdící návrhy */
.dm-hint{
  display:inline-flex;align-items:center;gap:.9em;
  margin-top:28px;
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.dm-hint::before{content:"◆";color:var(--red);font-size:.6rem}

.designs-head{margin-top:clamp(70px,8vw,110px)}
/* samostatná sekce návrhů vysoko na stránce — odsazení řeší .section, ne margin */
#navrhy{background:var(--bg)}
#navrhy .designs-head{margin-top:0}
.designs-head .dm-hint{margin-top:18px}
/* závěrečné CTA pod pásy návrhů */
.dm-cta-row{display:flex;justify-content:center;margin-top:clamp(36px,4.5vw,60px)}
.designs-head h3{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.3rem);
}
.designs-head .lede{margin-top:12px}

.design-marquee{
  overflow:hidden;position:relative;
  margin-top:clamp(28px,3vw,40px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.design-marquee + .design-marquee{margin-top:18px}
.dm-track{
  display:flex;gap:18px;width:max-content;
  will-change:transform;
  animation:marquee 70s linear infinite;
}
.dm-reverse .dm-track{animation-direction:reverse}
/* Pás si přebírá skript (viz initDesignSwipe) — CSS animace se vypne a posun
   řídí transform. touch-action:pan-y = vodorovné tažení patří nám, svislý scroll
   stránky zůstává prohlížeči, takže se prstem dá pořád normálně scrollovat. */
.dm-swipe{touch-action:pan-y;cursor:grab}
.dm-swipe:active{cursor:grabbing}
.dm-swipe .dm-track{animation:none}
.dm-swipe img{-webkit-user-drag:none;user-select:none}
.design-marquee:hover .dm-track{animation-play-state:paused}
.dm-card{
  position:relative;
  width:clamp(120px,14vw,168px);
  aspect-ratio:1;
  background:#fff;
  border-radius:16px;
  padding:12px;
  flex-shrink:0;
  transition:transform .4s var(--ease);
  cursor:pointer;
}
.dm-card:hover{transform:translateY(-5px)}
.dm-card::after{
  content:"Poptat ↗";
  position:absolute;left:10px;bottom:10px;
  font-family:var(--font-label);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--red);
  padding:5px 10px;border-radius:999px;
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
}
.dm-card:hover::after{opacity:1;transform:none}
.dm-card img{width:100%;height:100%;object-fit:contain}

/* design inquiry modal — light island like the Framer site */
#design-modal{
  position:fixed;inset:0;z-index:2600;
  background:rgba(5,5,7,.72);
  display:flex;align-items:center;justify-content:center;
  padding:4vmin;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s .35s;
}
#design-modal.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.dmm-box{
  position:relative;
  background:#fff;color:#141414;
  border-radius:18px;
  width:min(1000px,94vw);
  max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(20px,3vw,44px);
  padding:clamp(22px,3.4vw,48px);
  transform:translateY(14px) scale(.985);
  transition:transform .35s var(--ease);
}
#design-modal.open .dmm-box{transform:none}
.dmm-close{
  position:absolute;top:16px;right:18px;
  font-size:1.25rem;line-height:1;color:#141414;
  padding:8px;
}
.dmm-close:hover{color:var(--red)}
.dmm-img{
  border:1px solid #E4E4E4;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:18px;min-height:280px;
}
.dmm-img img{max-width:100%;max-height:52vh;object-fit:contain}
.dmm-body h3{
  font-family:var(--font-display);font-weight:800;font-stretch:92%;
  font-size:clamp(1.3rem,2.2vw,1.8rem);
  margin:6px 0 22px;color:#111;
}
#design-form{display:flex;flex-direction:column;gap:16px}
#design-form label{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--font-label);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#222;
}
#design-form :is(input,textarea){
  border:1px solid #C9C9C9;border-radius:6px;
  background:#fff;color:#111;
  font:inherit;font-family:var(--font-body);font-size:.95rem;
  letter-spacing:normal;text-transform:none;
  padding:12px 14px;resize:vertical;
}
#design-form :is(input,textarea):focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
#design-form ::placeholder{color:#9A9A9A}
.dmm-submit{
  margin-top:8px;
  background:var(--red);color:#fff;
  font-family:var(--font-label);font-size:.8rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:16px 20px;border-radius:6px;
  transition:background .3s;
}
.dmm-submit:hover{background:var(--red-deep)}
.dmm-ok{display:none;padding:18px;border:1px solid #D8D8D8;border-radius:10px;background:#F6F6F4;color:#141414}
#design-form.sent .dmm-ok{display:block}
#design-form.sent :is(label,.dmm-submit){display:none}
@media (max-width:820px){
  .dmm-box{grid-template-columns:1fr}
  .dmm-img{min-height:0}
  .dmm-img img{max-height:30vh}
}

/* lightbox */
#lightbox{
  position:fixed;inset:0;z-index:2500;
  background:rgba(5,5,7,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s .4s;
  padding:5vmin;
}
#lightbox.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
#lightbox img{
  max-width:92vw;max-height:82vh;object-fit:contain;border-radius:14px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
#lightbox figcaption{
  position:absolute;bottom:5vmin;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.8);font-family:var(--font-label);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;white-space:nowrap;
}
#lightbox .lb-close{
  position:absolute;top:26px;right:30px;color:#fff;
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
#lightbox .lb-close:hover{color:var(--red-2)}
#lightbox .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;
  transition:border-color .3s,background .3s;
}
.lb-nav:hover{border-color:var(--red-2);background:rgba(224,32,32,.18)}
.lb-nav.prev{left:26px}.lb-nav.next{right:26px}
@media (max-width:720px){.lb-nav{display:none}}

/* ============================================================
   CENÍK
   ============================================================ */
#cenik{background:var(--bg)}
.price-grid{
  margin-top:clamp(44px,5vw,70px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
}
.price-card{
  position:relative;
  border:0;border-top:2px solid var(--ink);border-radius:0;
  background:transparent;
  padding:clamp(30px,4vw,52px) 0 0;
  overflow:visible;
  transition:transform .5s var(--ease);
  transform-style:preserve-3d;
}
.price-card .p-eyebrow{
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red-2);margin-bottom:20px;
}
.price-card .p-val{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  font-size:clamp(3.2rem,7.6vw,6.6rem);line-height:1;color:var(--ink);
}
.price-card .p-val small{font-size:.34em;color:var(--muted);font-weight:600}
.price-card ul{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.price-card li{display:flex;gap:12px;color:var(--muted);font-size:.96rem}
.price-card li::before{content:"◆";color:var(--red);font-size:.6rem;line-height:2.1}
.price-card .p-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;right:-120px;bottom:-140px;
  background:radial-gradient(circle,var(--glow-red),transparent 65%);
  pointer-events:none;
}
.price-card--trofej .p-glow{background:radial-gradient(circle,var(--glow-gold),transparent 65%)}
.price-note{margin-top:26px;color:var(--faint);font-size:.86rem}

/* ============================================================
   TÝM
   ============================================================ */
#tym{background:var(--bg);border-top:1px solid var(--line)}
.team-grid{
  margin-top:clamp(44px,5vw,64px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,34px) clamp(18px,2.2vw,28px);
  background:none;border:0;border-radius:0;overflow:visible;
}
.member{background:transparent;position:relative}
.member .m-photo{
  aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:var(--bg-2);
  box-shadow:var(--shadow-sm);
}
.member .m-photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform .8s var(--ease);
}
.member:hover .m-photo img{transform:scale(1.06)}
.member .m-photo--init{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  font-size:clamp(2.4rem,5vw,4rem);color:var(--red-2);
  background:linear-gradient(150deg,var(--red-tint),var(--bg-2) 70%);
  border:1px solid rgba(240,68,56,.25);
}
.member h3{
  margin:16px 0 0;
  font-style:italic;font-weight:900;font-stretch:80%;text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.45rem);
  transition:color .3s;
}
.member:hover h3{color:var(--red-2)}
.member .role{
  margin:6px 0 0;font-family:var(--font-label);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.member .flag{font-size:.95rem;margin-left:6px}

.join-band{
  margin-top:clamp(40px,5vw,60px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  border:1px solid rgba(240,68,56,.35);border-radius:20px;
  padding:clamp(24px,3vw,38px);
  background:linear-gradient(120deg,var(--red-tint),transparent 60%);
}
.join-band h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.join-band p{color:var(--muted);margin-top:8px;font-size:.95rem}

/* ============================================================
   KONTAKT
   ============================================================ */
#kontakt{background:var(--bg-2);overflow:hidden;position:relative;border-top:1px solid var(--line)}
#kontakt::before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  left:-220px;top:-160px;
  background:radial-gradient(circle,var(--glow-red),transparent 62%);
  pointer-events:none;
}
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.contact-promise{margin-top:30px;display:flex;align-items:center;gap:16px;color:var(--muted)}
.contact-promise strong{color:var(--ink)}
.contact-promise .dot{width:10px;height:10px;border-radius:50%;background:var(--red-2);box-shadow:0 0 14px var(--red-2);animation:pulse 2s infinite}
.contact-lines{margin-top:44px;display:flex;flex-direction:column}
.c-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-top:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.c-line:hover{padding-left:10px}
.c-line:last-child{border-bottom:1px solid var(--line)}
.c-line .c-lab{font-family:var(--font-label);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.c-line .c-val{font-family:var(--font-display);font-weight:700;font-stretch:90%;font-size:clamp(1.05rem,1.8vw,1.5rem);color:var(--ink)}
.c-line:hover .c-val{color:var(--red-2)}

form.lead{display:flex;flex-direction:column;gap:8px}
.field{position:relative;padding-top:22px}
.field label{
  position:absolute;left:0;top:34px;
  font-size:1rem;color:var(--muted);
  transition:all .3s var(--ease);
  pointer-events:none;
}
.field :is(input,textarea){
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  color:var(--ink);font:inherit;padding:12px 0;
  resize:vertical;
}
.field textarea{min-height:96px}
.field :is(input,textarea):focus{outline:none;border-bottom-color:var(--red-2)}
.field :is(input,textarea):focus~label,
.field :is(input,textarea):not(:placeholder-shown)~label{
  top:0;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-2);
  font-family:var(--font-label);
}
.field .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.field :is(input,textarea):focus~.bar{transform:scaleX(1)}

form.lead .btn{margin-top:30px;align-self:flex-start}
.gdpr{color:var(--faint);font-size:.78rem;margin-top:16px;max-width:46ch}
.gdpr a{text-decoration:underline;text-underline-offset:3px}
.form-ok{
  display:none;padding:26px;border:1px solid rgba(240,68,56,.4);border-radius:16px;
  background:var(--red-tint);color:var(--ink);
}
form.lead.sent .form-ok{display:block}
form.lead.sent :is(.field,.btn,.gdpr){display:none}

/* ============================================================
   FOOTER — červený závěr
   ============================================================ */
footer{background:var(--red);color:#fff;padding-top:clamp(60px,7vw,100px);overflow:hidden}
footer .brand .brand-den{color:#fff}
footer .brand svg rect{fill:#fff}
footer .brand svg :is(text,circle){fill:var(--red)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(30px,5vw,80px);padding-bottom:60px}
.f-brand p{color:#fff;margin-top:18px;max-width:36ch;font-size:.95rem}
.f-col h4{
  font-family:var(--font-label);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:#fff;margin-bottom:20px;
}
.f-col ul{display:flex;flex-direction:column;gap:12px}
.f-col a,.f-col li{color:#fff;font-size:.95rem}
.f-col a{transition:color .3s}
.f-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.f-legal{
  border-top:1px solid rgba(255,255,255,.25);
  padding:26px 0 30px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  color:#fff;font-size:.8rem;
}
.f-word{
  font-family:var(--font-display);font-style:italic;font-weight:900;font-stretch:76%;
  font-size:clamp(4.5rem,17vw,15rem);line-height:.86;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.4);
  user-select:none;pointer-events:none;
  transform:translateY(18%);
}
.f-word .d{-webkit-text-stroke-color:rgba(255,255,255,.75)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr}
  /* .gallery prefix je nutný — bez něj přebije obecné .gallery .g-item (vyšší specificita) */
  .gallery .g-item,.gallery .g-item.wide{grid-column:span 6}
}
@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr)}

  /* KROKY na mobilu — vodorovný scroll běží i tady, karta se musí vejít na displej:
     méně vnitřního odsazení, menší medaile i typografie */
  .step-card{
    min-height:min(72vh,560px);
    /* vpravo se rezervuje místo na medaili — musí zbýt aspoň ~200 px na text,
       jinak se dlouhý nadpis („INTERAKTIVNÍ") ořízne */
    padding:20px clamp(110px,34vw,150px) 20px clamp(16px,4.5vw,22px);
  }
  .step-card h3{font-size:clamp(1.15rem,5.2vw,1.7rem);margin-bottom:12px}
  .step-card p{font-size:.9rem;max-width:none;line-height:1.5}
  .step-card .tagpills{gap:8px;margin-top:18px}
  .step-card .pill{font-size:.58rem;padding:6px 11px;letter-spacing:.1em}
  .step-tag{font-size:.6rem;margin-bottom:12px}
  .step-img{
    width:clamp(110px,34vw,150px);
    max-height:clamp(170px,32vh,260px);
    right:clamp(2px,1.5vw,10px);
  }
  .step-card .glow{width:min(90vw,420px);height:min(90vw,420px);right:-22%}
  .h-track{gap:clamp(16px,4vw,30px)}
  /* MATERIÁLY na mobilu — sekce se zamyká i tady, obsah se proto musí vejít
     na jednu obrazovku (hodnoty v px, ne vw, ať sedí i na úzkých displejích) */
  .mat-stage{height:100svh;padding:0}
  .mat-head{top:14px;font-size:.58rem;letter-spacing:.18em}
  .mat-cols{grid-template-columns:1fr;gap:6px;justify-items:start;padding-top:20px}
  .mat-left{text-align:left}
  .mat-left .mat-item{flex-direction:row;gap:10px}
  .mat-medal{order:-1;margin-inline:auto;width:min(40vw,150px)}
  /* MINULOST na mobilu do dvou sloupců — 7 položek pod sebou je moc vysoké
     a sekce se pak nevejde na displej, takže se nemůže zamknout při scrollu */
  .mat-list.mat-left{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
  .mat-left .mat-item{margin:0}
  .mat-left .mat-item h3{font-size:.86rem}
  .mat-right .mat-item{margin-block:1px}
  .mat-right .mat-item h3{font-size:.9rem}
  .mat-right .mat-item p{font-size:.68rem;line-height:1.3}
  .mat-cap{font-size:.52rem;margin-top:3px;letter-spacing:.14em}
  .mat-col-head{font-size:.58rem;margin-bottom:4px;gap:8px}
  .mat-item{margin-block:2px}
  .mat-item h3{font-size:.95rem}
  .mat-item p{font-size:.72rem;line-height:1.35}
  .mat-item .chip{font-size:.5rem;padding:3px 7px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-top:1px solid var(--line)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(5){grid-column:span 2}
}
@media (max-width:720px){
  .price-grid{grid-template-columns:1fr}
  /* na telefonu jedna fotka na řádek — jinak zbývaly poloprázdné řádky („mezery") */
  .gallery .g-item,.gallery .g-item.wide,.gallery .g-item:nth-child(5n+1){grid-column:span 12;aspect-ratio:4/3}
  .t-hud{display:none}
  /* per-medaili i tady, jinak by desktopová pravidla (vyšší specificita) přebila
     mobilní šířku a medaile by na telefonu byly obří */
  .t-medal{width:min(84vw,380px,46vh)}
  .t-medal[data-i="0"]{width:min(79.6vw,360px,43.6vh)}
  .t-medal[data-i="1"]{width:min(87.6vw,396px,48vh)}
  .t-medal[data-i="2"]{width:min(88vw,398px,48.2vh)}
  .t-medal[data-i="3"]{width:min(81.3vw,368px,44.5vh)}
  .t-names{bottom:13vh}
  .hero-ctas .btn{width:100%;justify-content:center}
  .marquee img{height:42px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (min-width:999999px) /* dřív prefers-reduced-motion:reduce — vypnuto */{
  /* šetrný režim: nekonečné CSS smyčky stojí, přechody jsou krátké (ne nulové — scény by jinak skákaly) */
  *,*::before,*::after{animation-iteration-count:1!important;transition-duration:.15s!important}
  html{scroll-behavior:auto}
  .mask-line>span{transform:none}
  .t-name .sub{visibility:visible}
  .reveal,.stagger>*{opacity:1;transform:none}
  .marquee-track,.dm-track{animation:none}
  .t-medal[data-i="0"] img:not(.ghost){clip-path:none}
  .print-line,.t-medal .ghost,.t-medal .holo-scan{display:none}
  .g-item{opacity:1;clip-path:none;transform:none}
  .h-track{padding-bottom:60px}
}

/* ============================================================
   DOTYKOVÁ ZAŘÍZENÍ — odlehčení GPU
   Mobilní GPU je řádově slabší než desktopová. Nejdražší jsou tady velké
   `filter:` na obrázcích (každý drop-shadow = další průchod přes celý obrázek)
   a maska z PNG. Vzhled se skoro nemění, ale ubude většina práce na snímek.
   ============================================================ */
@media (hover:none),(pointer:coarse){
  /* Skenovací pruh maskuje 750×1000 PNG každý snímek — nejdražší efekt, pryč.
     Hologramový „duch" ale ZŮSTÁVÁ (bez něj není vidět nedotištěná část medaile),
     jen s jednodušším filtrem místo pěti-krokového řetězu. */
  .t-medal .holo-scan{display:none}
  .t-medal .ghost{filter:grayscale(1) brightness(1.5)}
  /* jeden levný stín místo dvou velkých rozostřených */
  .t-medal img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
  .step-card[data-step="1"] .step-img,
  .step-card[data-step="2"] .step-img,
  .step-card[data-step="3"] .step-img,
  .step-card[data-step="4"] .step-img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
  /* rozostření přes velkou plochu — gradient sám o sobě je měkký dost */
  .mat-glow{filter:none}
  .manifest-medal{filter:grayscale(.35)}
  /* fotky v galerii se nepřebarvují (hover na dotyku stejně není) */
  .g-item img{filter:none}
}

/* ============================================================
   POMALÝ POČÍTAČ — stejné odlehčení, ale podle skutečného výkonu
   Blok nahoře platí jen pro dotyková zařízení. Starší Mac s integrovanou
   grafikou je ale na tyhle filtry stejně krátký a přitom má myš, takže mu
   nic z toho nepomohlo. Třídu `lite` nasazuje skript, když naměří, že
   počítač při scrollování nestíhá (viz initAutoLite v main.js).
   ============================================================ */
body.lite .t-medal .holo-scan{display:none}
body.lite .t-medal .ghost{filter:grayscale(1) brightness(1.5)}
body.lite .t-medal img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
body.lite .step-card[data-step="1"] .step-img,
body.lite .step-card[data-step="2"] .step-img,
body.lite .step-card[data-step="3"] .step-img,
body.lite .step-card[data-step="4"] .step-img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
body.lite .mat-glow{filter:none}
body.lite .manifest-medal{filter:grayscale(.35)}
body.lite .g-item img{filter:saturate(.85)}
body.lite .g-item:hover img{filter:none}


/* ============================================================
   SVĚTLÉ PLOCHY
   Podklad zůstává černý, ale dvě velké sekce jsou bílé desky —
   stejnou řečí jako karty návrhů, video Predatora a poptávkové okno.
   Prosvětlí to stránku, aniž by se sáhlo na barevnost celku.
   ============================================================ */

/* pruh s čísly = bílá deska přes celou šířku */
#cisla{background:var(--paper);border-top:0;border-bottom:0}
#cisla .stat{border-left:1px solid var(--paper-line)}
#cisla .stat:first-child{border-left:0}
#cisla .stat .val .suffix{color:var(--paper-ink)}
#cisla .stat .lab{color:var(--paper-ink)}
#cisla .stat .sub{color:var(--paper-muted)}

/* poptávkový formulář = bílá karta, stejná jako okno „Mám zájem o podobnou medaili" */
form.lead{
  background:var(--paper);color:var(--paper-ink);
  border-radius:20px;padding:clamp(24px,3vw,40px);
  box-shadow:var(--shadow);
}
form.lead .field label{color:var(--paper-muted)}
form.lead .field :is(input,textarea){color:var(--paper-ink);border-bottom-color:var(--paper-line)}
form.lead .field :is(input,textarea):focus{border-bottom-color:var(--red)}
form.lead .field :is(input,textarea):focus~label,
form.lead .field :is(input,textarea):not(:placeholder-shown)~label{color:var(--red-deep)}
form.lead .gdpr{color:var(--paper-muted)}
form.lead .gdpr a{color:var(--red-deep)}
form.lead .form-ok{
  border-color:rgba(224,32,32,.3);background:rgba(224,32,32,.07);color:var(--paper-ink);
}
form.lead .form-ok a{color:var(--red-deep)}
/* obrys pro klávesnici musí být vidět i na bílé */
form.lead :is(input,textarea,button):focus-visible{outline-color:var(--red-deep)}

/* past na roboty (18) — pole je mimo obrazovku i mimo tabulátor; když ho něco
   vyplní, odeslání se tiše zahodí (viz main.js) */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}


/* ============================================================
   MATERIÁLY — bílá deska
   Sekce, která nese hlavní argument (proč 3D tisk místo kovu a dřeva),
   je celá bílá. Video Predatora i medaile mají bílé pozadí, takže na bílém
   splynou a působí jako fotografie na papíře, ne jako karta na černé.
   ============================================================ */
#material{
  background:var(--paper);
  background-image:
    linear-gradient(rgba(20,20,20,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.045) 1px,transparent 1px);
  border-bottom:0;
}
#material .mat-glow{display:none} /* záře patří na černou, na bílé je z ní špína */
#material .mat-head{color:var(--paper-muted)}
#material .mat-col-head--past{color:rgba(20,20,20,.45)}
#material .mat-col-head--future{color:var(--red)}
#material .mat-item{border-color:var(--paper-line)}
#material .mat-item h3{color:rgba(20,20,20,.45)}
#material .mat-item.on h3{color:var(--paper-ink)}
#material .mat-item p{color:var(--paper-muted)}
#material .mat-item .chip{border-color:var(--paper-line);color:rgba(20,20,20,.45);background:transparent}
#material .mat-item.on .chip{background:var(--red);border-color:var(--red);color:#fff}
#material .mat-left .mat-item.done h3{color:rgba(20,20,20,.34);text-decoration-color:var(--red)}
#material .mat-left .mat-item.done .chip{background:transparent;border-color:var(--paper-line);color:rgba(20,20,20,.34)}
#material .mat-cap{color:var(--paper-muted)}
#material .mat-medal video{box-shadow:0 24px 60px -30px rgba(20,20,20,.5)}

/* ------- vizualizace obou světů -------
   Vlevo materiálové vzorky starého světa (kov, dřevo, plexi, plast, sklo,
   dřevotříska) — zavřená, matná paleta. Vpravo skutečná tištěná medaile
   v plné barvě. Rozdíl je vidět dřív, než člověk začne číst. */
.mat-visual{margin:0 0 14px}
.mat-visual--past{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  width:min(100%,164px);
}
.mat-visual--past .sw{
  aspect-ratio:1;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.18),0 6px 14px -8px rgba(20,20,20,.4);
  filter:saturate(.78);
}
/* v pravém sloupci textu drží vzorky u pravého okraje jako všechno ostatní */
.mat-left-wrap .mat-visual--past,.mat-col:first-of-type .mat-visual--past{margin-left:auto}
.sw-kov{background:linear-gradient(140deg,#e7e9ec,#9aa0a8 45%,#cfd4d9 70%,#8d949c)}
.sw-drevo{background:linear-gradient(140deg,#b98a52,#8a5f31 55%,#a3743f)}
.sw-plexi{background:linear-gradient(140deg,rgba(190,214,224,.9),rgba(140,175,190,.75))}
.sw-plast{background:linear-gradient(140deg,#d8d8d6,#a9a9a6)}
.sw-sklo{background:linear-gradient(140deg,rgba(214,230,232,.95),rgba(160,190,196,.8))}
.sw-drevotriska{background:linear-gradient(140deg,#cbb08a,#a98d67)}

.mat-visual--future{width:min(100%,190px)}
.mat-visual--future img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 26px rgba(20,20,20,.28));
}
.mat-right .mat-visual--future{margin-left:0}

@media (max-width:900px){
  /* na telefonu se musí vejít celá sekce do zámku — vizuály jsou proto menší */
  .mat-visual{margin-bottom:8px}
  /* stejná specificita jako desktopové pravidlo výš, jinak by vzorky zůstaly u pravého okraje */
  .mat-col:first-of-type .mat-visual--past{margin-left:0}
  .mat-visual--past{width:100px;gap:4px}
  .mat-visual--future{width:60px}
  .mat-visual{margin-bottom:6px}
}


/* ============================================================
   DALŠÍ SVĚTLÉ PLOCHY — klienti a návrhy
   Loga klientů i rendery návrhů mají bílé pozadí, takže na bílé desce
   nesedí jako nalepené kartičky, ale jako tisk na papíře.
   ============================================================ */
#klienti{background:var(--paper)}
#klienti .eyebrow{color:var(--red-deep)}
#klienti .eyebrow::before{background:var(--red)}
#klienti h2{color:var(--paper-ink)}
#klienti .lede{color:var(--paper-muted)}
#klienti .hl{color:var(--red)}
/* čipy ztrácejí bílé pozadí — logo leží rovnou na desce */
#klienti .m-chip{background:transparent;box-shadow:inset 0 0 0 1px rgba(20,20,20,.09)}
#klienti .m-chip:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.2)}
#klienti .cov-lockup{background:transparent}
#klienti .cov-lockup img{filter:none}

#navrhy{background:var(--paper)}
#navrhy .designs-head h2,#navrhy .designs-head{color:var(--paper-ink)}
#navrhy .designs-head .lede,#navrhy .designs-head p{color:var(--paper-muted)}
#navrhy .hl{color:var(--red)}
#navrhy .dm-hint{color:var(--paper-muted)}
/* rendery jsou na bílém pozadí — bez orámování by na bílé desce splynuly */
#navrhy .dm-card{box-shadow:inset 0 0 0 1px rgba(20,20,20,.1),0 10px 26px -18px rgba(20,20,20,.5)}
#navrhy .dm-card:hover{box-shadow:inset 0 0 0 1px rgba(20,20,20,.18),0 18px 40px -20px rgba(20,20,20,.55)}


/* ============================================================
   SVĚTLÉ PLOCHY — portfolio a kontakt
   ============================================================ */
#portfolio{background:var(--paper)}
#portfolio .eyebrow{color:var(--red-deep)}
#portfolio .eyebrow::before{background:var(--red)}
#portfolio h2,#portfolio .display-l{color:var(--paper-ink)}
#portfolio .lede{color:var(--paper-muted)}
#portfolio .hl{color:var(--red)}
#portfolio .chip{border-color:var(--paper-line);color:var(--paper-muted)}
#portfolio .chip:hover{border-color:rgba(20,20,20,.35);color:var(--paper-ink)}
#portfolio .chip.active{background:var(--red);border-color:var(--red);color:#fff}
#portfolio .gallery-more{border-color:var(--paper-line);color:var(--paper-ink);background:rgba(20,20,20,.03)}
#portfolio .gallery-more:hover{border-color:rgba(20,20,20,.4)}
#portfolio .g-item{box-shadow:0 12px 30px -22px rgba(20,20,20,.6)}
#portfolio .g-item:hover{box-shadow:0 26px 60px -28px rgba(20,20,20,.65)}
#portfolio .designs-head h2{color:var(--paper-ink)}

#kontakt{background:var(--paper);border-top:0}
#kontakt::before{display:none} /* červená záře patří na černou, na bílé je z ní šmouha */
#kontakt .eyebrow{color:var(--red-deep)}
#kontakt .eyebrow::before{background:var(--red)}
#kontakt h2,#kontakt .display-l{color:var(--paper-ink)}
#kontakt .hl{color:var(--red)}
#kontakt .contact-promise{color:var(--paper-muted)}
#kontakt .contact-promise strong{color:var(--paper-ink)}
#kontakt .c-line{border-color:var(--paper-line)}
#kontakt .c-line:last-child{border-bottom-color:var(--paper-line)}
#kontakt .c-line .c-lab{color:rgba(20,20,20,.62)}
#kontakt .c-line .c-val{color:var(--paper-ink)}
#kontakt .c-line:hover .c-val{color:var(--red)}
/* formulář už nemusí být karta — celá sekce je jedna bílá plocha */
#kontakt form.lead{background:transparent;box-shadow:none;border-radius:0;padding:0}


/* ------- šipky u pásů s návrhy -------
   Kliknutí pás zastaví a posune o jednu kartu; po 4 sekundách bez dalšího
   stisku se zase rozjede sám (viz initDesignSwipe v main.js). */
.dm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;
  background:var(--paper);color:var(--paper-ink);
  border:1px solid rgba(20,20,20,.14);
  box-shadow:0 10px 26px -12px rgba(20,20,20,.45);
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.dm-nav:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-50%) scale(1.07)}
.dm-nav:active{transform:translateY(-50%) scale(.95)}
.dm-nav--vlevo{left:clamp(8px,1.4vw,20px)}
.dm-nav--vpravo{right:clamp(8px,1.4vw,20px)}
@media (max-width:900px){
  .dm-nav{width:40px;height:40px;font-size:1rem}
}


/* ------- přepínač jazyků v horním pruhu ------- */
.lang{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:clamp(14px,2.4vw,30px)}
.lang a{
  font-family:var(--font-label);font-size:.66rem;letter-spacing:.16em;
  padding:7px 9px;border-radius:8px;color:var(--faint);text-decoration:none;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lang a:hover{color:var(--ink)}
.lang a.on{color:var(--ink);background:rgba(245,243,240,.1)}
@media (max-width:600px){
  .lang{margin-right:10px;gap:0}
  .lang a{padding:6px 6px;font-size:.6rem;letter-spacing:.1em}
}

/* značka buildu vedle „Scrollujte" — dřív inline styl, teď třída,
   aby mohla platit přísná CSP bez povolení inline stylů */
.t-build{opacity:.5}

/* shrnutí poptávky při otevření ze složky (bez serveru nejde odeslat) */
.pp-shrnuti{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 16px;font-size:.92rem}
.pp-shrnuti dt{font-family:var(--font-label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding-top:3px}
.pp-shrnuti dd{margin:0;word-break:break-word}
.pp-mailto{font-weight:600;color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}