/* spaice studio
   Showroom: práce je vystavená jako produkt, ve skutečném světle, se skutečnými obrazovkami.
   Barvu na stránce má jen slunce. Rozhraní je teplé černobílé, barvy dodávají fotografie a práce. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --bg: #0a0908;
  --bg-1: #13110f;
  --line: rgb(242 236 228 / 0.1);
  --line-2: rgb(242 236 228 / 0.18);
  --line-3: rgb(242 236 228 / 0.6);
  --text: #f2eee8;
  --text-2: #aba398;
  --text-3: #857d73;
  --ink: #0a0908;
  --sun: #ffae57;
  --error: #ff9584;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --max: 90rem;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --nav-h: 4rem;
}

/* Základ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
/* Na velkých monitorech se celý web plynule zvětší, ať obsah nezůstane drobným sloupcem uprostřed */
@media (min-width: 1680px) {
  html { font-size: clamp(16px, calc(16px + (100vw - 1680px) * 0.009), 24px); }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--sun); color: var(--ink); }

:focus-visible { outline: 1px solid var(--text); outline-offset: 0.25rem; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  background: var(--text);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* Typografie: verzálky jen v úvodu, navigaci a tlačítkách, jinak větná sazba */

.display {
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.004em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.headline {
  max-width: 16ch;
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.042em;
  line-height: 0.98;
  text-wrap: balance;
}
.meta {
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Logo: tečka nad „i“ je slunce */
.logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 640;
  font-stretch: 120%;
  letter-spacing: -0.05em;
  line-height: 1;
  text-decoration: none;
}
.logo__i { position: relative; }
.logo__i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.02em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 42% 40%, #fff6e8 0%, #ffd7a3 32%, var(--sun) 72%);
  box-shadow: 0 0 0.3em rgb(255 174 87 / 0.55);
}

/* Šipka: násada se při najetí prodlouží */
.arrow {
  position: relative;
  flex: none;
  display: inline-block;
  width: 1.875rem;
  height: 0.625rem;
}
.arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 0.875rem;
  height: 1px;
  background: currentColor;
  transition: width .6s var(--ease);
}
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.arrow--out { width: 1rem; transform: rotate(-45deg); }
.arrow--out::before { width: 0.75rem; }

/* Tlačítka: ostrý obdélník, tenká linka, výplň najede zleva */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.375rem;
  height: 3.25rem;
  padding: 0 1.125rem 0 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--ease);
}
.btn:hover,
.btn:focus-visible { color: var(--ink); border-color: var(--text); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover .arrow::before,
.btn:focus-visible .arrow::before { width: 1.75rem; }
.btn:active { transform: translateY(1px); }

.btn--solid { border-color: var(--text); background: var(--text); color: var(--ink); }
.btn--solid::before { background: var(--bg); }
.btn--solid:hover,
.btn--solid:focus-visible { color: var(--text); }

.btn--sm { height: 2.5rem; gap: 1rem; padding: 0 0.75rem 0 1rem; font-size: 0.6875rem; }
.btn--sm .arrow { width: 1.5rem; }
.btn--lg { height: 3.75rem; padding: 0 1.375rem 0 1.75rem; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}
.link:hover .arrow::before,
.link:focus-visible .arrow::before { width: 1.75rem; }
.link .arrow--out { transition: transform .5s var(--ease); }
.link:hover .arrow--out,
.link:focus-visible .arrow--out { transform: rotate(-45deg) translateX(0.25rem); }

/* Navigace */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-scrolled,
.nav.is-open {
  background: rgb(10 9 8 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.nav__links {
  position: absolute;
  left: 50%;
  display: flex;
  gap: clamp(1.75rem, 3vw, 3rem);
  transform: translateX(-50%);
}
.nav__links a {
  position: relative;
  padding-block: 0.5rem;
  color: rgb(242 238 232 / 0.8);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="true"] { color: var(--text); }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left center; }

/* Naše aplikace: tlačítko v navigaci a polička pod ní */
.nav.has-apps { background: var(--bg); border-bottom-color: var(--line); }
.nav__apps {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: rgb(242 238 232 / 0.8);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease);
}
/* Tenké plus, které se při otevření otočí na křížek */
.nav__plus { position: relative; width: 0.6rem; height: 0.6rem; transition: transform .45s var(--ease); }
.nav__plus::before,
.nav__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.nav__plus::before { width: 100%; height: 1px; }
.nav__plus::after { width: 1px; height: 100%; }
.nav__apps:hover,
.nav__apps[aria-expanded="true"] { color: var(--text); }
.nav__apps[aria-expanded="true"] .nav__plus { transform: rotate(45deg); }

.apps {
  position: absolute;
  inset: 100% 0 auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .45s var(--ease);
}
.apps[hidden] { display: none; }
.apps.is-open { clip-path: inset(0); }
.apps__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
  padding-block: 2.25rem 2.75rem;
}
.apps__list { grid-column: 1 / span 8; border-top: 1px solid var(--line); }
.app {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.app__icon {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 22.5%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  filter: grayscale(1) brightness(0.8);
  transition: filter .4s var(--ease);
}
.app:is(:hover, :focus-visible, .is-current) .app__icon { filter: none; }
.app__name {
  color: var(--text-2);
  font-size: 1.5rem;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: color .3s var(--ease);
}
.app:is(:hover, :focus-visible, .is-current) .app__name { color: var(--text); }
.app__desc { grid-column: 2; color: var(--text-3); font-size: 0.9375rem; line-height: 1.4; }
.app__status {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-3);
  font-size: 0.875rem;
}
.apps__preview.phone { --w: 8rem; grid-column: 10 / span 3; justify-self: end; box-shadow: 0 0 0 1px #34302b, 0 0 0 2px #141210; }
.apps__preview .phone__screen img { opacity: 0; transition: opacity .6s var(--ease-io); }
.apps__preview .phone__screen img.is-active { opacity: 1; }

.nav__cta { transition: opacity .4s var(--ease), visibility 0s, color .5s var(--ease), border-color .5s var(--ease); }
body:has(.hero) .nav:not(.is-scrolled):not(.has-apps) .nav__cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}

.nav__toggle {
  display: none;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line-3);
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--nav-h) + 1.5rem) var(--pad) max(1.75rem, env(safe-area-inset-bottom));
  background: var(--bg);
}
.menu[hidden] { display: none; }
.menu nav { border-top: 1px solid var(--line); }
.menu__link {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-decoration: none;
}
.menu .btn { align-self: stretch; }
.menu nav { overflow-y: auto; }
.menu__apps { margin-top: 2rem; }
.menu__label { margin-bottom: 0.5rem; color: var(--text-3); font-size: 0.875rem; }
.menu__apps ul { border-top: 1px solid var(--line); }
.menu__apps .app { grid-template-columns: 2.75rem minmax(0, 1fr) auto; min-height: 4rem; padding-block: 0.75rem; }
.menu__apps .app__icon { width: 2.75rem; height: 2.75rem; filter: none; }
.menu__apps .app__name { color: var(--text); font-size: 1.375rem; }
.menu__foot { display: grid; gap: 1.25rem; }
.menu__mail { color: var(--text-2); font-size: 0.9375rem; text-decoration: none; text-align: center; }

/* Úvod */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  min-height: max(100svh, 40rem);
  overflow: clip;
  isolation: isolate;
}
.work__zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../img/grain.png") repeat;
  background-size: 12rem;
  mix-blend-mode: overlay;
  opacity: 0.09;
  pointer-events: none;
}
/* Scéna: fotka v pevných souřadnicích, JS ji škáluje jako object-fit: cover */
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 2752px;
  height: 1536px;
  transform-origin: 0 0;
}
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.js .stage { opacity: 0; transition: opacity .6s var(--ease); }
.js .stage.is-fit,
.no-script-run .stage { opacity: 1; }

/* Displeje: skutečné screenshoty napasované do perspektivy fotky */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #000;
  transform-origin: 0 0;
  backface-visibility: hidden;
}
.screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.94);
  transition: opacity 1.4s var(--ease-io);
}
.screen img.is-active { opacity: 1; }
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.screen--laptop { border-radius: 12px; }
.screen--laptop::after {
  background:
    linear-gradient(180deg, rgb(255 236 214 / 0.09) 0%, rgb(255 236 214 / 0) 42%),
    radial-gradient(130% 100% at 60% 0%, transparent 55%, rgb(0 0 0 / 0.22));
  box-shadow: inset 0 0 40px rgb(0 0 0 / 0.35);
}
.screen--phone { border-radius: 108px; }
.screen--phone::after {
  background:
    linear-gradient(174deg, rgb(255 240 226 / 0.16) 0%, rgb(255 240 226 / 0.07) 33%, rgb(255 240 226 / 0) 33.5%),
    radial-gradient(130% 100% at 65% 0%, transparent 50%, rgb(0 0 0 / 0.28));
}
.screen--phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1.5%;
  left: 50%;
  width: 31%;
  height: 3.3%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.screen--phone img { filter: brightness(0.9) contrast(0.95) saturate(0.9); }

.hero__content { padding-block: calc(var(--nav-h) + 2.5rem) clamp(6rem, 14vh, 9.375rem); }
.hero__title {
  margin-top: 1.25rem;
  font-size: clamp(2.3rem, 4.6vw, 4.6rem);
  line-height: 1.03;
}
.hero__line { display: block; }
.hero__lead {
  max-width: 25rem;
  margin-top: clamp(1.375rem, 2.4vw, 1.875rem);
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2.25rem;
  margin-top: clamp(1.875rem, 3.4vw, 2.625rem);
}

.hero__toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.hero__toggle:hover { border-color: var(--text); }
.hero__toggle svg { width: 0.75rem; height: 0.75rem; fill: var(--text); }
.hero__toggle .i-play { display: none; }
.hero__toggle.is-paused .i-play { display: block; }
.hero__toggle.is-paused .i-pause { display: none; }

/* Jedna redakční myšlenka */

.statement { padding-block: clamp(6rem, 15vh, 11rem) clamp(5rem, 13vh, 9rem); }
.statement__text {
  max-width: 24em;
  font-size: clamp(1.75rem, 3.3vw, 3.25rem);
  font-weight: 400;
  font-stretch: 104%;
  letter-spacing: -0.03em;
  line-height: 1.16;
  text-wrap: pretty;
}
.statement__text span { color: var(--text-3); }
.statement__founder { margin-top: 1.75rem; color: var(--text-2); font-size: 1.125rem; }

/* Práce: exponáty */

.works {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(9.375rem, 20vh, 15rem);
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
}
.work__media { position: relative; }
.work__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #0d0b09;
}
.work--bleed .work__frame { max-height: 92svh; }
.work--contained .work__frame { aspect-ratio: 16 / 9; }
.work__zoom { position: absolute; inset: 0; }

.work__caption {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: clamp(1.75rem, 3.4vw, 3rem);
}
.work__title { grid-column: 1 / span 6; }
.work__body { grid-column: 7 / span 5; padding-top: 0.6em; }
.work__name {
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.work__kind { margin-top: 1rem; color: var(--text-3); font-size: 0.9375rem; }
.work__body p { max-width: 34rem; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.work__facts {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.375rem;
  color: var(--text-3);
  font-size: 0.875rem;
}
.link--url { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.work__links { display: flex; flex-wrap: wrap; gap: 0 2.25rem; margin-top: 1.25rem; }

/* MojeTripy: grafika z App Storu. Na desktopu stojí v jedné řadě, na mobilu jde posouvat. */
.reel { margin-top: clamp(3.5rem, 7vw, 6rem); }
.reel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  padding-block: 0.25rem 1.25rem;
}
.reel__viewport::-webkit-scrollbar { display: none; }
.reel__track {
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  width: max-content;
  padding-inline: var(--pad);
}
.reel__track li { flex: none; scroll-snap-align: start; }
.reel__track img {
  width: auto;
  height: min(68svh, 35rem);
  aspect-ratio: 760 / 1651;
  background: var(--bg-1);
}
@media (min-width: 768px) {
  .reel__viewport { overflow: visible; padding: 0; }
  .reel__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    max-width: var(--max);
    margin-inline: auto;
  }
  .reel__track img { width: 100%; height: auto; }
}
@media (min-width: 1100px) {
  .reel__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Cookpit: tři obrazovky */
.screens {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4.5rem, 9vw, 8.125rem);
}
.screens__item { display: grid; justify-items: start; align-content: start; }
.screens__item :is(h2, h3) {
  margin-top: 1.875rem;
  font-size: 1.25rem;
  font-weight: 500;
  font-stretch: 106%;
  letter-spacing: -0.02em;
}
.screens__item p { max-width: 30ch; margin-top: 0.5rem; color: var(--text-2); font-size: 0.9375rem; text-wrap: pretty; }

/* Telefon kolem skutečných screenshotů */
.phone {
  --w: clamp(13.125rem, 21vw, 18.75rem);
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.16);
  background: #050504;
  box-shadow:
    0 0 0 1px #34302b,
    0 0 0 2.5px #141210,
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    0 3.125rem 5.625rem -30px rgb(0 0 0 / 0.95);
}
.phone::after {
  content: "";
  position: absolute;
  top: calc(var(--w) * 0.055);
  left: 50%;
  width: 31%;
  height: calc(var(--w) * 0.088);
  border-radius: 62.4375rem;
  background: #000;
  transform: translateX(-50%);
}
.phone__screen {
  position: relative;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--w) * 0.13);
  overflow: hidden;
  background: #000;
}
.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Služby: přehled jako v tiráži */

.services { padding-block: clamp(9.375rem, 20vh, 15rem) clamp(6.875rem, 15vh, 11.25rem); }
.services__rows { margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line-2); }
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.service__name {
  grid-column: 1 / span 6;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.04em;
  line-height: 1;
}
.service__text {
  grid-column: 7 / span 3;
  max-width: 40ch;
  color: var(--text-2);
  font-size: 1.0625rem;
  text-wrap: pretty;
}
.service:last-child { border-bottom: 0; }
.service__list {
  grid-column: 10 / span 3;
  color: var(--text-2);
  display: grid;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

/* Kontakt: poptávka jako věta */

.contact {
  padding-block: clamp(8.125rem, 17vh, 13.125rem) clamp(6.875rem, 15vh, 10.625rem);
  border-top: 1px solid var(--line);
}
.contact__lead {
  max-width: 40rem;
  margin-top: 1.375rem;
  color: var(--text-2);
  font-size: 1.125rem;
  text-wrap: pretty;
}
.letter { margin-top: clamp(3.5rem, 7vw, 6rem); }
.letter__text {
  max-width: 21em;
  color: var(--text);
  font-size: clamp(1.45rem, 3vw, 2.75rem);
  font-weight: 400;
  font-stretch: 104%;
  letter-spacing: -0.025em;
  line-height: 1.6;
}
.blank {
  width: 9.5em;
  min-width: 6em;
  max-width: 100%;
  padding: 0 0.08em;
  border: 0;
  border-bottom: 1px solid var(--line-3);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  letter-spacing: inherit;
  line-height: 1.2;
  vertical-align: baseline;
  transition: border-color .3s var(--ease);
}
@supports (field-sizing: content) {
  .blank { width: auto; min-width: 3em; field-sizing: content; }
}
.blank::placeholder { color: var(--text-3); opacity: 1; }
.blank:hover { border-bottom-color: var(--text); }
.blank:focus { outline: none; border-bottom: 2px solid var(--sun); }
.blank[aria-invalid="true"] { border-bottom-color: var(--error); }

.picks { white-space: normal; }
.pick { position: relative; display: inline-block; }
.pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pick span {
  color: var(--text-3);
  border-bottom: 1px dashed var(--line-3);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.pick:hover span { color: var(--text-2); }
.pick input:checked + span { color: var(--text); border-bottom: 2px solid var(--sun); }
.pick input[aria-invalid="true"] + span { border-bottom-color: var(--error); }
.pick input:focus-visible + span { outline: 1px solid var(--text); outline-offset: 0.25rem; }

.letter__errors { display: grid; gap: 0.25rem; margin-top: 1rem; }
.field__error { color: var(--error); font-size: 0.9375rem; }
.field__error:empty { display: none; }

.letter__message { display: grid; gap: 0.625rem; max-width: 46rem; margin-top: clamp(2.75rem, 5vw, 4rem); }
.letter__message label { color: var(--text-2); font-size: 0.9375rem; }
.letter__message textarea {
  width: 100%;
  min-height: 9.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.letter__message textarea:hover { border-color: var(--line-3); }
.letter__message textarea:focus { outline: none; border-color: var(--text); background: var(--bg-1); }
.field__hint { color: var(--text-3); font-size: 0.875rem; }

.letter__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem 1.75rem;
  margin-top: 2.25rem;
}
.letter__note { max-width: 28rem; color: var(--text-3); font-size: 0.875rem; }
.letter__note a,
.letter__done a { color: var(--text-2); text-underline-offset: 0.2em; transition: color .3s var(--ease); }
.letter__note a:hover,
.letter__done a:hover { color: var(--text); }
.letter__done {
  max-width: 40rem;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--sun);
  color: var(--text-2);
}

/* Stránka projektu */

.case__head {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem)) clamp(1.5rem, 3vw, 2.5rem);
}
.case .work__frame { max-height: calc(100svh - 13rem); }
.case__kind { color: var(--text-3); font-size: 0.9375rem; }
.case__name {
  margin-top: 0.875rem;
  font-size: clamp(2.6rem, 10vw, 9.5rem);
  overflow-wrap: break-word;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-wrap: balance;
}
.case__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.case__text { grid-column: 1 / span 7; }
.case__lead {
  font-size: clamp(1.5rem, 2.5vw, 2.375rem);
  font-weight: 400;
  font-stretch: 104%;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-wrap: pretty;
}
.case__more { max-width: 38rem; margin-top: 1.5rem; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.case__side { grid-column: 9 / span 4; padding-top: 0.6em; }
.case__side .work__facts { margin-top: 0; }
.case__side .link { margin-top: 1.25rem; }

/* Weby klientů: skutečné stránky bez rámu prohlížeče */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(4.5rem, 9vw, 8.125rem);
}
.shots__item:nth-child(2) { margin-top: clamp(3rem, 7vw, 6.875rem); }
.shots__item img { width: 100%; height: auto; background: var(--bg-1); box-shadow: 0 0 0 1px var(--line); }
.shots__item figcaption { margin-top: 0.875rem; color: var(--text-3); font-size: 0.875rem; }

.next { margin-top: clamp(8.75rem, 18vh, 13.75rem); border-top: 1px solid var(--line); }
.next__link {
  display: grid;
  justify-items: start;
  gap: 1.125rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  text-decoration: none;
}
.next__label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.next__name {
  color: var(--text-2);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: -0.045em;
  line-height: 0.95;
  transition: color .5s var(--ease);
}
.next__link:hover .next__name,
.next__link:focus-visible .next__name { color: var(--text); }
.next__link:hover .arrow::before,
.next__link:focus-visible .arrow::before { width: 1.75rem; }

.cta { padding-block: clamp(6.875rem, 15vh, 11.25rem); border-top: 1px solid var(--line); }
.cta .btn { margin-top: clamp(2rem, 4vw, 3rem); }

/* Patička */

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo tag nav"
    "copy copy mail";
  align-items: center;
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
  padding-block: 2.5rem 2.25rem;
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.logo--footer { grid-area: logo; font-size: 1.15rem; letter-spacing: -0.05em; text-transform: none; }
.footer__tag { grid-area: tag; color: var(--text-3); }
.footer__nav { grid-area: nav; display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.footer__mail { grid-area: mail; justify-self: end; color: var(--text); }
.footer__copy { grid-area: copy; color: var(--text-3); }
/* Značka a e-mail se píšou malými písmeny, verzálky zůstávají jen navigaci */
.footer__tag,
.footer__copy,
.footer__mail { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none; }
.footer__nav a,
.footer__mail { text-decoration: none; transition: color .3s var(--ease); }
.footer__nav a:hover,
.footer__mail:hover { color: var(--text); }

/* Pohyb */

@media (prefers-reduced-motion: no-preference) {
  .hero__meta,
  .hero__line,
  .hero__lead,
  .hero__actions {
    animation: rise 1.4s var(--ease) both;
    animation-delay: .3s;
  }
  .hero__line:nth-child(1) { animation-delay: .42s; }
  .hero__line:nth-child(2) { animation-delay: .54s; }
  .hero__line:nth-child(3) { animation-delay: .66s; }
  .hero__line:nth-child(4) { animation-delay: .78s; }
  .hero__lead { animation-delay: .92s; }
  .hero__actions { animation-delay: 1.04s; }
  .hero__toggle { animation: fade 1s ease 1.4s both; }

  .apps.is-open .apps__list li { animation: apps-in .5s var(--ease) both; }
  .apps.is-open .apps__list li:nth-child(2) { animation-delay: .04s; }
  .apps.is-open .apps__list li:nth-child(3) { animation-delay: .08s; }

  .js:not(.no-script-run) [data-reveal] {
    opacity: 0;
    transform: translateY(1.625rem);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Pomalé najetí kamery, když exponát vjíždí do obrazu */
  @supports (animation-timeline: view()) {
    .work__zoom {
      animation: push-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.875rem); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apps-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes push-in {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apps { transition: none; }
  .hero__toggle { display: none; }
  .screen img { transition: none; }
}

/* Responzivita */

@media (max-width: 1100px) {
  .work__title { grid-column: 1 / span 6; }
  .work__body { grid-column: 7 / span 6; }
  .service__name { grid-column: 1 / span 5; }
  .service__text,
  .service__list { grid-column: 7 / span 6; }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta,
  .apps { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; }

  .works { gap: clamp(6.875rem, 16vh, 9.375rem); }
  .work__frame,
  .work--contained .work__frame { aspect-ratio: 1 / 1; }
  @media (orientation: landscape) {
    .work__frame,
    .work--contained .work__frame { aspect-ratio: 16 / 9; }
  }
  .work__title,
  .work__body { grid-column: 1 / -1; }
  .work__body { padding-top: 0.5rem; }

  .screens {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 18.75rem);
    justify-content: start;
    gap: 1.25rem;
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .screens::-webkit-scrollbar { display: none; }
  .screens__item { scroll-snap-align: start; }
  .screens__item .phone { --w: min(72vw, 18.75rem); }

  .case__text,
  .case__side { grid-column: 1 / -1; }
  .case__side { padding-top: 0.5rem; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shots__item:nth-child(2) { margin-top: 0; }

  .service { gap: 0.875rem; }
  .service__name,
  .service__text,
  .service__list { grid-column: 1 / -1; }
  .service__list { margin-top: 0.5rem; }
}

@media (max-width: 600px) {
  :root { --nav-h: 3.75rem; }
  .hero__actions { gap: 0.25rem 1.75rem; }
  .letter__text { line-height: 1.75; }
  .letter__submit .btn { width: 100%; }
  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "tag" "nav" "mail" "copy";
    gap: 1.125rem;
  }
  .footer__nav { flex-wrap: wrap; }
  .footer__mail { justify-self: start; }
}

/* Úvod „Živá práce“: místo vystavených zařízení skutečný záznam webů klientů,
   na počítači i v mobilu. Světlo kolem obrazu vyzařuje sama práce (rozmazaná kopie záznamu). */

.hero--live { background: var(--bg); }

.live__glow { pointer-events: none; opacity: 0.72; filter: blur(80px) saturate(1.5) brightness(1.15); transform: scale(1.18); }
.live__glow video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.live__screen,
.live__phone { position: relative; overflow: hidden; background: #000; }
.live__screen { border-radius: 0.75rem; box-shadow: 0 0 0 1px rgb(242 236 228 / 0.12), 0 3.5rem 8rem -2rem rgb(0 0 0 / 0.85); }
.live__phone {
  z-index: 2;
  border-radius: calc(var(--ph-w) * 0.11);
  box-shadow: 0 0 0 1px rgb(242 236 228 / 0.16), 0 0 0 calc(var(--ph-w) * 0.025) #050505, 0 0 0 calc(var(--ph-w) * 0.025 + 1px) rgb(242 236 228 / 0.1), 0 2.5rem 5rem -1rem rgb(0 0 0 / 0.9);
}
.live__screen video,
.live__phone video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.live__screen video.is-active,
.live__phone video.is-active { opacity: 1; }

/* Popisek: dva úseky průběhu, projekt, co jsme dodali, odkaz na živý web */
.live__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  column-gap: 1.75rem;
  row-gap: 0.875rem;
}
.live__segments { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.live__segments button {
  position: relative;
  flex: 0 0 4.5rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.live__segments button::before,
.live__segments i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.live__segments button::before { background: var(--line-2); }
.live__segments i { background: var(--text); transform-origin: left center; transform: scaleX(0); }
.live__segments button.is-active i { transform: scaleX(var(--p, 0)); }
.live__segments button:hover::before { background: var(--line-3); }
.live__caption { display: grid; gap: 0.375rem; min-width: 0; }
.live__name {
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.live__what { color: var(--text-2); font-size: 0.9375rem; }
.live__open { min-height: 2.5rem; font-size: 0.6875rem; }
.live__open .arrow { width: 1rem; }

@media (min-width: 1024px) {
  .hero--live {
    --cx: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    --cw: calc(min(100vw, var(--max)) - 2 * var(--pad));
    --scr-w: min(60vw, calc((100svh - var(--nav-h) - 13.5rem) * 1.6));
    --scr-h: calc(var(--scr-w) / 1.6);
    --ph-h: calc(var(--scr-h) * 0.8);
    --ph-w: calc(var(--ph-h) * 0.462);
    --scr-x: calc(var(--cx) + var(--cw) * 0.44 + var(--ph-w) * 0.22 + 2.5rem);
    --scr-y: max(calc(var(--nav-h) + 3vh), calc((100svh - var(--scr-h) - 6.5rem) / 2));
    min-height: max(100svh, 44rem);
  }
  .live { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .live > * { pointer-events: auto; }
  .live__glow,
  .live__screen { position: absolute; left: var(--scr-x); top: var(--scr-y); width: var(--scr-w); height: var(--scr-h); }
  .live__phone {
    position: absolute;
    left: calc(var(--scr-x) - var(--ph-w) * 0.22);
    top: calc(var(--scr-y) + var(--scr-h) - var(--ph-h) - 1.5rem);
    width: var(--ph-w);
    height: var(--ph-h);
  }
  .live__bar {
    position: absolute;
    left: calc(var(--scr-x) - var(--ph-w) * 0.22);
    right: var(--pad);
    top: calc(var(--scr-y) + var(--scr-h) + 1.5rem);
  }
  .hero--live .hero__content { position: relative; z-index: 1; padding-block: calc(var(--nav-h) + 2rem) 4rem; }
  .hero--live .hero__content > * { max-width: calc(var(--cw) * 0.44); }
  /* Textový sloupec je široký jako celá stránka: kliknutí propouští k ovládání ukázek vpravo */
  .hero--live .hero__content { pointer-events: none; }
  .hero--live .hero__content > * { pointer-events: auto; }
  .hero--live .hero__title { font-size: clamp(2.1rem, calc(var(--cw) * 0.042), 4rem); }
}

@media (max-width: 1023px) {
  .hero--live { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero.hero--live .hero__content { order: -1; padding-block: calc(var(--nav-h) + 1.75rem) 2.25rem; }
  .live { position: relative; display: grid; padding: 0 var(--pad) 3.5rem; }
  .live__glow { position: absolute; inset: 0 var(--pad) 3.5rem; }
  .live__screen { aspect-ratio: 16 / 10; }
  .live__phone { display: none; }
  .live__bar { margin-top: 1.25rem; }
}
@media (max-width: 599px) {
  .hero--live { --ph-w: min(70vw, 17.5rem); --ph-h: calc(var(--ph-w) / 0.462); }
  .live__screen { display: none; }
  .live__phone { display: block; width: var(--ph-w); height: var(--ph-h); margin: 0 auto; }
  .live__glow { inset: 0 auto auto 50%; width: var(--ph-w); height: var(--ph-h); transform: translateX(-50%) scale(1.25); }
  .live__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .live__open { grid-column: 1; grid-row: 3; justify-self: start; }
  .live__toggle { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .live__glow { display: none; }
}