/* ==========================================================================
   ONEMØRE Studio — vizuál „Inkoust a mosaz"
   Klid recepce + přesnost výkresu. Mosaz je šperk (≤5 %), ne plocha.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-papir);
  color: var(--c-inkoust);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-mosaz-tmava); outline-offset: 3px; border-radius: 2px; }
/* na inkoustových plochách je tmavá mosaz nevidět → světlá varianta */
.origin :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible,
.founder-card :focus-visible { outline-color: var(--c-mosaz-svetla); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); padding-inline: var(--container-pad); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.section + .section { padding-top: 0; }
.section-gap { margin-bottom: var(--space-section-gap); }
.prose { max-width: var(--prose); }
section[id] { scroll-margin-top: 5.5rem; }

/* ---------- Typografie ---------- */
.t-display {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: var(--text-display); line-height: var(--leading-heading);
  letter-spacing: -0.015em; text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.008em;
}
.t-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--c-inkoust); max-width: var(--prose); }
.t-meta { font-size: var(--text-body); color: var(--c-inkoust-60); }
.t-small { font-size: var(--text-small); color: var(--c-inkoust-60); }
.tagline { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--c-inkoust-60); }
p { max-width: var(--prose); }

/* eyebrow — značkový štítek sekce: brand Ø + název (bez čísel a šablonové kóty) */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-inkoust-60);
  margin-bottom: var(--space-6);
}
.eyebrow .num { display: none; }
.eyebrow::before {
  content: "Ø"; font-family: var(--font-display); font-weight: 600; font-size: 1.3em;
  color: var(--c-mosaz); letter-spacing: 0; line-height: 0; position: relative; top: .12em;
}

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 13px 26px; border-radius: var(--r-s);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-body);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--c-inkoust); color: var(--c-papir); border-color: var(--c-inkoust); }
.btn-primary:hover { background: var(--c-inkoust-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--c-inkoust); border-color: var(--c-linka); }
.btn-ghost:hover { border-color: var(--c-inkoust); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-papir) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--c-linka); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); }

/* wordmark */
.nav-logo { display: inline-flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: 1.5rem; letter-spacing: 0.01em; color: var(--c-inkoust); line-height: 1;
}
.wordmark .wm-o { color: var(--c-mosaz); }
.nav-logo .wm-studio {
  font-family: var(--font-mono); font-weight: 500; font-size: .6rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-inkoust-60);
}

.nav-menu { display: flex; align-items: center; gap: var(--space-6); }
.nav-link {
  font-size: .95rem; font-weight: 500; color: var(--c-inkoust); position: relative; padding-block: 4px;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--c-mosaz); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { min-height: 42px; padding: 9px 18px; }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-inkoust);
  margin-bottom: var(--space-5);
}
.hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-mosaz); flex: none; }
.hero-copy, .hero-visual { min-width: 0; }   /* umožní gridu se zúžit, brání overflow */
.hero-copy { max-width: 34rem; }
.hero .t-display { overflow-wrap: break-word; }
.dossier { max-width: 100%; }
.hero .t-display { font-size: clamp(2.4rem, 1.2rem + 4vw, 3.9rem); line-height: 1.03; }
.hero .t-display em { font-style: italic; color: var(--c-inkoust); }
.hero-copy .t-lead { margin-top: var(--space-4); color: var(--c-inkoust-60); }
.hero-cta { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hero-cta .t-meta { font-size: var(--text-small); }
.hero-tagline { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: .6em; font-size: 1.15rem; }
.hero-tagline::before { content: "Ø"; font-family: var(--font-display); color: var(--c-mosaz); font-style: normal; }

/* hero vizuál — dossier / karta zakázky (náhrada „produktového screenshotu") */
.hero-visual { position: relative; }
.dossier {
  background: var(--c-karta); border: 1px solid var(--c-linka); border-radius: var(--r-m);
  box-shadow: var(--stin-karta); overflow: hidden;
}
.dossier-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-linka);
  font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .08em; color: var(--c-inkoust-60);
}
.dossier-head .dot { display: inline-flex; align-items: center; gap: .5em; }
.dossier-head .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-mosaz); }
.dossier-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.msg { max-width: 82%; padding: 11px 14px; border-radius: 12px; font-size: .95rem; line-height: 1.4; }
.msg-in { align-self: flex-start; background: var(--c-papir); border: 1px solid var(--c-linka); border-bottom-left-radius: 4px; }
.msg-out { align-self: flex-end; background: var(--c-inkoust); color: var(--c-papir); border-bottom-right-radius: 4px; }
.msg-stamp {
  align-self: flex-end; font-family: var(--font-display); font-weight: 600; font-style: italic;
  color: var(--c-mosaz-tmava); font-size: 1.05rem; display: inline-flex; align-items: center; gap: .4em;
}
.dossier-foot {
  border-top: 1px solid var(--c-linka); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-mono); color: var(--c-inkoust-60);
}
.dossier-foot .send {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-inkoust); color: var(--c-papir);
  display: grid; place-items: center; font-size: 14px;
}
.hero-note {
  margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: .06em; color: var(--c-inkoust-60); text-align: center;
}

/* ---------- iPhone / iMessage mockup ---------- */
.iphone { width: min(300px, 76vw); margin-inline: auto; background: #17181b; border-radius: 46px; padding: 10px; box-shadow: 0 2px 6px rgb(32 40 31 / .12), 0 34px 70px -26px rgb(32 40 31 / .55); }
.iphone__screen { position: relative; background: #fbfbfd; border-radius: 37px; overflow: hidden; aspect-ratio: 292 / 620; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", system-ui, sans-serif; }
.iphone__island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 25px; background: #000; border-radius: 20px; z-index: 6; }
.iphone__screen::after { content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 108px; height: 4px; border-radius: 3px; background: #000; opacity: .78; z-index: 6; }
.ios__bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 4px; font-size: 12px; font-weight: 600; color: #000; }
.ios__icons { display: inline-flex; align-items: flex-end; gap: 5px; }
.ios__signal { width: 18px; height: 11px; background:
  linear-gradient(#000,#000) 0 100%/3px 4px no-repeat,
  linear-gradient(#000,#000) 5px 100%/3px 6px no-repeat,
  linear-gradient(#000,#000) 10px 100%/3px 9px no-repeat,
  linear-gradient(#000,#000) 15px 100%/3px 11px no-repeat; }
.ios__batt { position: relative; width: 24px; height: 12px; border: 1px solid #000; border-radius: 3px; }
.ios__batt::before { content: ""; position: absolute; inset: 1.5px; right: 4px; background: #000; border-radius: 1px; }
.ios__batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; background: #000; border-radius: 0 1px 1px 0; }
.ios__head { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 12px 12px; border-bottom: .5px solid #e2e2e6; }
.ios__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--c-inkoust); color: var(--c-papir); display: grid; place-items: center; font-family: var(--font-display); font-size: 23px; margin-bottom: 3px; }
.ios__name { font-size: 13px; font-weight: 600; color: #000; }
.ios__sub { font-size: 10px; color: #8a8a8e; }
.ios__thread { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 6px; overflow: hidden; }
.ios__day { text-align: center; font-size: 10px; font-weight: 600; color: #a3a3a7; margin: 0 0 8px; }
.bubble { max-width: 80%; padding: 8px 13px; font-size: 13px; line-height: 1.32; border-radius: 18px; }
.bubble.in { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 5px; }
.bubble.out { align-self: flex-end; background: linear-gradient(#2aa1ff, #0a7dff); color: #fff; border-bottom-right-radius: 5px; }
.ios__delivered { align-self: flex-end; font-size: 9px; color: #a3a3a7; margin-top: 2px; padding-right: 4px; }
.ios__input { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 5px 10px 16px; padding: 6px 6px 6px 14px; border: 1px solid #d3d3d8; border-radius: 20px; font-size: 13px; color: #9a9a9e; }
.ios__send { width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(#2aa1ff, #0a7dff); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 700; }

/* ---------- Úvodní video ---------- */
.video-wrap { max-width: 60rem; margin-inline: auto; }
.video-embed { position: relative; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--c-linka); background: linear-gradient(150deg, #2c3529, var(--c-inkoust)); aspect-ratio: 16 / 9; display: grid; place-items: center; box-shadow: var(--stin-karta); cursor: pointer; }
.video-embed__play { width: clamp(60px, 8vw, 84px); height: clamp(60px, 8vw, 84px); border-radius: 50%; background: var(--c-papir); color: var(--c-inkoust); display: grid; place-items: center; padding-left: 5px; box-shadow: 0 12px 34px rgb(0 0 0 / .35); transition: transform var(--dur-fast) var(--ease); }
.video-embed:hover .video-embed__play { transform: scale(1.06); }
.video-embed__play svg { width: 40%; height: 40%; }
.video-embed__cap { position: absolute; left: var(--space-6); bottom: var(--space-6); color: var(--c-papir); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .06em; }
.video-embed__cap span { color: var(--c-mosaz-svetla); }

/* ---------- Ukázky prací (foto placeholder v kartách) ---------- */
.card-thumb { aspect-ratio: 16 / 10; border-radius: var(--r-s); background: linear-gradient(150deg, #ece6d7, #ddd6c3); border: 1px solid var(--c-linka); display: grid; place-items: center; color: var(--c-inkoust-60); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .14em; margin-bottom: var(--space-5); }

/* ---------- Naše projekty ---------- */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.project { display: block; background: var(--c-karta); border: 1px solid var(--c-linka); border-radius: var(--r-m); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.project:hover { box-shadow: var(--stin-karta-hover); transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-linka) 60%, var(--c-inkoust)); }
.project__thumb { aspect-ratio: 16 / 9; background: linear-gradient(150deg, #2c3529, var(--c-inkoust)); color: var(--c-papir); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: .08em; }
.project__thumb--ph { background: linear-gradient(150deg, #ece6d7, #ddd6c3); color: var(--c-inkoust-60); }
.project__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.project__tag { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--c-mosaz-tmava); letter-spacing: .1em; text-transform: uppercase; }
.project__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); display: flex; align-items: center; gap: .4em; margin-top: var(--space-2); }
.project__name .arrow { color: var(--c-mosaz); transition: transform var(--dur-fast) var(--ease); }
.project:hover .project__name .arrow { transform: translate(3px, -3px); }
.project__desc { color: var(--c-inkoust-60); font-size: .95rem; margin-top: var(--space-2); }

/* ---------- Origin: proč jste o nás neslyšeli ---------- */
.origin { background: var(--c-inkoust); color: var(--c-papir); padding-block: clamp(3.5rem, 3rem + 4vw, 6rem); }
.origin .container { max-width: 54rem; }
.origin__label { display: inline-flex; align-items: baseline; gap: .5em; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c-papir) 60%, transparent); margin-bottom: var(--space-5); }
.origin__label::before { content: "Ø"; font-family: var(--font-display); font-weight: 600; font-size: 1.3em; color: var(--c-mosaz-svetla); line-height: 0; position: relative; top: .12em; }
.origin__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 2.3vw, 2.75rem); line-height: 1.22; letter-spacing: -.01em; max-width: none; }
.origin__big em { font-style: italic; color: var(--c-mosaz-svetla); }
.origin__body { margin-top: var(--space-5); font-size: var(--text-lead); line-height: 1.55; color: color-mix(in srgb, var(--c-papir) 78%, transparent); max-width: 56ch; }
.origin__body b { color: var(--c-papir); font-weight: 600; }

/* ---------- Definice: co je concierge pro firmy ---------- */
.defn { padding-block: clamp(3rem, 2rem + 4vw, 5rem); border-bottom: 1px solid var(--c-linka); }
.defn .container { max-width: 54rem; }
.defn__label { display: inline-flex; align-items: baseline; gap: .5em; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-inkoust-60); margin-bottom: var(--space-5); }
.defn__label::before { content: "Ø"; font-family: var(--font-display); font-weight: 600; font-size: 1.3em; color: var(--c-mosaz); line-height: 0; position: relative; top: .12em; }
.defn__text { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem); line-height: 1.34; letter-spacing: -.01em; color: var(--c-inkoust); max-width: none; }
.defn__text b { font-weight: 600; box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--c-mosaz) 24%, transparent); }

/* ---------- iMessage: aktivní přehrání konverzace ---------- */
.has-motion .ios__thread > .bubble,
.has-motion .ios__thread > .ios__day,
.has-motion .ios__thread > .ios__delivered { display: none; }
.has-motion .ios__thread > .show { display: block; animation: bubblein .34s var(--ease) both; }
@keyframes bubblein { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.typing { align-self: flex-start; background: #e9e9eb; border-radius: 18px 18px 18px 5px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 4px; }
.typing.out { align-self: flex-end; background: linear-gradient(#2aa1ff, #0a7dff); border-radius: 18px 18px 5px 18px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: typedot 1.1s infinite ease-in-out; }
.typing.out span { background: rgba(255,255,255,.9); }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typedot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Track record + ukázky prací ---------- */
.trackrec { display: grid; grid-template-columns: minmax(0, .8fr) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: var(--space-12); }
.trackrec__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 2rem + 20vw, 15rem); line-height: .78; letter-spacing: -.04em; color: var(--c-inkoust); font-variant-numeric: lining-nums; }
.trackrec__num span { font-size: .32em; color: var(--c-mosaz); vertical-align: super; margin-left: .04em; }
.trackrec__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem); line-height: 1.24; letter-spacing: -.01em; }
.trackrec__lead b { color: var(--c-mosaz-tmava); font-weight: 600; }
.trackrec__desc { margin-top: var(--space-4); color: var(--c-inkoust-60); font-size: var(--text-lead); line-height: 1.5; }
.trackrec__desc b { color: var(--c-inkoust); font-weight: 600; }
.trackrec__link { display: inline-flex; align-items: center; gap: .4em; margin-top: var(--space-6); font-weight: 600; color: var(--c-inkoust); border-bottom: 2px solid var(--c-mosaz); padding-bottom: 2px; }
.trackrec__link .arrow { color: var(--c-mosaz); transition: transform var(--dur-fast) var(--ease); }
.trackrec__link:hover .arrow { transform: translate(3px, -3px); }
.worksamples { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.worksample { aspect-ratio: 4 / 5; border-radius: var(--r-s); border: 1px solid var(--c-linka); background: linear-gradient(150deg, #ece6d7, #ddd6c3); display: grid; place-items: center; color: var(--c-inkoust-60); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .1em; }
@media (max-width: 760px) {
  .trackrec { grid-template-columns: 1fr; gap: var(--space-5); }
  .trackrec__num { font-size: clamp(5rem, 30vw, 9rem); }
  .worksamples { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Proces / kroky ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0; border-top: 1px solid var(--c-linka); }
.step {
  padding: var(--space-8) var(--space-6) var(--space-6) 0;
  border-top: 2px solid transparent; margin-top: -1px;
  position: relative;
}
.steps .step + .step { padding-left: var(--space-6); }
.step::before {
  content: attr(data-num); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-mono);
  letter-spacing: .1em; color: var(--c-mosaz-tmava); display: block; margin-bottom: var(--space-4);
}
.step .t-h3 { margin-bottom: var(--space-3); }
.step p { color: var(--c-inkoust-60); }

/* ---------- Karty (služby, příklady) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.card {
  background: var(--c-karta); border: 1px solid var(--c-linka); border-radius: var(--r-m);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--c-mosaz); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.card:hover { box-shadow: var(--stin-karta-hover); transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-linka) 60%, var(--c-inkoust)); }
.card:hover::before { transform: scaleX(1); }
.card .card-index {
  font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .12em;
  color: var(--c-inkoust-60); display: block; margin-bottom: var(--space-3);
}
.card .t-h3 { margin-bottom: var(--space-3); font-family: var(--font-display); }
.card p { color: var(--c-inkoust-60); }
.card--wide { grid-column: 1 / -1; }

/* ---------- Číselný pás ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-8) var(--space-6);
  border-block: 1px solid var(--c-linka); padding-block: var(--space-8);
  margin-bottom: var(--space-12);
}
.stat { position: relative; padding-left: var(--space-4); }
.stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--c-mosaz); opacity: .55; }
.stat-value {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: var(--text-cislo); line-height: .95; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
}
.stat-label { margin-top: var(--space-3); font-size: var(--text-small); line-height: 1.4; }
.examples-head { margin-bottom: var(--space-8); }
.examples-head .t-meta { margin-top: var(--space-2); font-size: var(--text-small); }
.examples-grid { margin-top: 0; }

/* ---------- FAQ (accordion) ---------- */
.faq-list { border-top: 1px solid var(--c-linka); max-width: 56rem; }
.faq-item { border-bottom: 1px solid var(--c-linka); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-6); color: var(--c-inkoust);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); line-height: 1.2;
}
.faq-q .ico { flex: none; width: 24px; height: 24px; position: relative; }
.faq-q .ico::before, .faq-q .ico::after {
  content: ""; position: absolute; background: var(--c-mosaz); border-radius: 2px;
  left: 50%; top: 50%; transition: transform var(--dur-base) var(--ease);
}
.faq-q .ico::before { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq-q .ico::after { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-q .ico::before { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--c-inkoust-60); max-width: 52rem; padding-bottom: 0; }
.faq-item.is-open .faq-a p { padding-bottom: var(--space-6); }
html.is-static .faq-a { grid-template-rows: 1fr; }
html.is-static .faq-a p { padding-bottom: var(--space-6); }
/* Bez JS accordion nefunguje → odpovědi nechat otevřené */
html:not(.has-motion):not(.is-static) .faq-a { grid-template-rows: 1fr; }
html:not(.has-motion):not(.is-static) .faq-a p { padding-bottom: var(--space-6); }

/* ---------- Závěrečné CTA (inverzní) ---------- */
.cta-band { background: var(--c-inkoust); color: var(--c-papir); border-radius: var(--r-m); }
.cta-band .container { padding-block: clamp(3rem, 6vw, 5.5rem); text-align: center; }
.cta-band .t-h2 { color: var(--c-papir); max-width: 20ch; margin-inline: auto; }
.cta-band .t-lead { color: color-mix(in srgb, var(--c-papir) 78%, transparent); margin: var(--space-4) auto 0; }
.cta-band .btn-primary { margin-top: var(--space-8); background: var(--c-papir); color: var(--c-inkoust); border-color: var(--c-papir); }
.cta-band .btn-primary:hover { background: #fff; }
.cta-band .tagline {
  margin-top: var(--space-8); color: var(--c-mosaz-svetla); font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: .5em;
}
.cta-band .tagline::before { content: "Ø"; font-style: normal; color: var(--c-mosaz-svetla); }
.section.has-cta { padding-block: 0; margin-block: var(--space-section); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-inkoust); color: var(--c-papir); padding-block: var(--space-12) var(--space-8); margin-top: var(--space-section); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: var(--space-8); padding-bottom: var(--space-8); }
.footer-name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin-bottom: var(--space-3); }
.footer-name .wm-o { color: var(--c-mosaz-svetla); }
.footer-col p, .footer-col a { color: color-mix(in srgb, var(--c-papir) 72%, transparent); }
.footer-col p + p, .footer-col a + p { margin-top: var(--space-3); }
.footer-mail { font-family: var(--font-mono); font-size: 1rem; color: var(--c-papir) !important; border-bottom: 1px solid var(--c-mosaz-svetla); padding-bottom: 2px; }
.footer-legal { font-family: var(--font-mono); font-size: var(--text-mono); line-height: 1.8; letter-spacing: .02em; }
.footer-legal a { color: var(--c-mosaz-svetla) !important; }
.footer-bottom { border-top: 1px solid color-mix(in srgb, var(--c-papir) 18%, transparent); padding-top: var(--space-6); }
.footer-bottom p { font-size: var(--text-small); color: color-mix(in srgb, var(--c-papir) 60%, transparent); max-width: none; }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-inkoust); color: var(--c-papir); padding: var(--space-3) var(--space-6); }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Reveal (výchozí skrytý stav; JS animuje) ---------- */
.has-motion [data-reveal], .has-motion [data-reveal-item] { opacity: 0; transform: translateY(18px); }

/* ---------- Responsivní ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-visual { order: 2; max-width: min(24rem, 100%); margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
/* 721–900 px se plná navigace (6 odkazů + CTA) nevejde → hamburger už od 900 px,
   kde se láme i hero grid. */
@media (max-width: 900px) {
  /* blur dělá z hlavičky containing block pro fixed overlay → s off-canvas menu vypnout */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--c-papir); }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); z-index: 55;
    background: var(--c-papir); border-left: 1px solid var(--c-linka);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--space-6); padding: var(--space-8);
    transform: translateX(100%); visibility: hidden;
    /* visibility s plnou durací: diskrétní interpolace = visible po dobu animace,
       hidden až na konci (delay-hack 0s+delay se v Chromiu zasekával) */
    transition: transform var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
    box-shadow: -20px 0 60px rgb(32 40 31 / .12);
  }
  body.nav-open .nav-menu { transform: translateX(0); visibility: visible; }
  .nav-link { font-size: 1.25rem; font-family: var(--font-display); font-weight: 600; }
  .nav-cta { font-size: 1rem; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; z-index: 60;
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--c-inkoust); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .steps .step + .step, .step { padding-left: 0; }
}

/* ==========================================================================
   SOCIÁLNÍ DŮKAZ (dle strategie/RESEARCH-produkty.md)
   ========================================================================== */

/* placeholder marker — ať je na první pohled jasné, že obsah není ostrý */
.placeholder-note {
  font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .04em;
  color: var(--c-mosaz-tmava); margin-top: var(--space-6); /* bez opacity — 13px text musí držet AA kontrast */
  display: inline-flex; align-items: center; gap: .5em;
}
.placeholder-note::before { content: "⌁"; }

/* hero mikro-důkaz */
.hero-proof { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
.avatars { display: inline-flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-papir);
  background: linear-gradient(135deg, var(--c-linka), #cfc7b2); margin-left: -10px; flex: none;
}
.avatars span:first-child { margin-left: 0; }
.avatars .avatars__more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-papir); background: var(--c-inkoust); color: var(--c-papir); margin-left: -10px; font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: 0; }
.hero-proof-text { font-size: var(--text-small); color: var(--c-inkoust-60); max-width: 32ch; margin: 0; }
.hero-proof-text strong { color: var(--c-inkoust); font-weight: 600; }

/* trust pás / logo wall */
.trust-strip { padding-block: var(--space-12); border-block: 1px solid var(--c-linka); background: var(--c-papir); }
.trust-strip__label {
  text-align: center; font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-inkoust-60); margin-bottom: var(--space-8);
}
.logo-wall {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6);
  align-items: center;
}
.logo-wall li {
  height: 40px; border: 1px dashed var(--c-linka); border-radius: var(--r-s);
  display: grid; place-items: center; color: var(--c-inkoust-60);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; opacity: .7;
}
.trust-strip .placeholder-note { display: flex; justify-content: center; margin-top: var(--space-6); }

/* pull quote (oddělovač mezi sekcemi) */
.pullquote { padding-block: var(--space-section); text-align: center; }
.pullquote .container { max-width: 46rem; }
.pullquote__mark { font-family: var(--font-display); font-size: 3rem; color: var(--c-mosaz); line-height: 1; margin-bottom: var(--space-4); }
.pullquote__text {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.25rem); line-height: 1.28; letter-spacing: -.01em;
  margin: 0 auto; max-width: 24ch;
}
.pullquote__id { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-small); color: var(--c-inkoust-60); }
.avatar-sm { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--c-linka), #cfc7b2); flex: none; }
.pullquote .placeholder-note { display: block; margin-top: var(--space-4); }

/* recenze — mřížka karet */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.review {
  background: var(--c-karta); border: 1px solid var(--c-linka); border-radius: var(--r-m);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.review__mark { font-family: var(--font-display); font-size: 1.8rem; color: var(--c-mosaz); line-height: .6; }
.review__text { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.4; color: var(--c-inkoust); margin: 0; }
.review__id { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.review__id .avatar-sm { width: 42px; height: 42px; }
.review__name { font-weight: 600; font-size: .95rem; }
.review__role { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--c-inkoust-60); }

/* důvěryhodnostní blok */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.trust-card {
  background: var(--c-karta); border: 1px solid var(--c-linka); border-radius: var(--r-m);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}
.trust-card__label { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-mosaz-tmava); }
.trust-card__big { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); line-height: 1.1; }
.trust-card p { font-size: var(--text-small); color: var(--c-inkoust-60); }
.trust-card ul { display: flex; flex-direction: column; gap: var(--space-2); }
.trust-card ul li { position: relative; padding-left: 1.4rem; font-size: .95rem; }
.trust-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--c-mosaz); font-weight: 700; }

/* kdo to vyřídí — founder */
.founder-card {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); align-items: center;
  background: var(--c-inkoust); color: var(--c-papir); border-radius: var(--r-m); padding: var(--space-8);
}
.founder-photo {
  aspect-ratio: 1; border-radius: var(--r-m); background: linear-gradient(160deg, #33402f, #20281f);
  display: grid; place-items: center; color: color-mix(in srgb, var(--c-papir) 40%, transparent);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-align: center; border: 1px solid rgb(244 241 234 / .12);
}
.founder-body .eyebrow { color: color-mix(in srgb, var(--c-papir) 70%, transparent); }
.founder-body .eyebrow::before { color: var(--c-mosaz-svetla); }
.founder-quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.32; margin: var(--space-3) 0 var(--space-5); max-width: 34ch; }
.founder-id { font-weight: 600; }
.founder-id span { display: block; font-family: var(--font-mono); font-size: var(--text-mono); color: var(--c-mosaz-svetla); font-weight: 400; letter-spacing: .04em; margin-top: 2px; }
.founder .placeholder-note { margin-top: var(--space-4); }

/* záruky u CTA */
.guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.guarantees li {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .03em;
  color: color-mix(in srgb, var(--c-papir) 82%, transparent);
  border: 1px solid rgb(244 241 234 / .22); border-radius: 100px; padding: .5em 1em;
}
.guarantees li::before { content: "✓"; color: var(--c-mosaz-svetla); }

@media (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .founder-card { grid-template-columns: 1fr; text-align: left; }
  .founder-photo { width: 140px; }
}

/* ==========================================================================
   CRAFT LAYER — awwwards pass (přepisuje základ, cascade vítězí)
   ========================================================================== */

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 300; background: var(--c-inkoust); color: var(--c-papir); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-6); }
.loader__mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); overflow: hidden; }
.loader__o { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; color: var(--c-mosaz-svetla); display: inline-block; }
.loader__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .06em; display: inline-block; }
.loader__word i { font-style: normal; color: var(--c-mosaz-svetla); }
.loader__meta { display: flex; align-items: baseline; gap: var(--space-6); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-papir) 60%, transparent); }
.loader__count b { color: var(--c-papir); font-weight: 500; font-variant-numeric: tabular-nums; }
.loader__bar { width: min(280px, 60vw); height: 1px; background: color-mix(in srgb, var(--c-papir) 18%, transparent); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0%; background: var(--c-mosaz-svetla); }
html.is-static .loader { display: none; }
/* Bez JS (inline skript nedoběhl → chybí obě třídy): loader nesmí překrýt obsah */
html:not(.has-motion):not(.is-static) .loader { display: none; }
/* Pojistka i pro případ, že JS částečně selže po startu: loader se po 6 s sám uklidí */
.loader { animation: loader-failsafe .5s ease 6s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Grain ---------- */
.grain { position: fixed; inset: -100%; z-index: 120; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); animation: grainmove .7s steps(4) infinite; }
@keyframes grainmove { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,2%)} 50%{transform:translate(2%,-2%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(2%,2%)} }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ---------- Watermarky Ø ---------- */
.hero { position: relative; overflow: hidden; }
.hero__watermark { position: absolute; right: -4%; top: 46%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 600; font-size: clamp(30rem, 60vw, 64rem); line-height: 1; color: var(--c-inkoust); opacity: .035; pointer-events: none; z-index: 0; }
.origin { position: relative; overflow: hidden; }
.cta-band { position: relative; overflow: hidden; }
.cta-band__watermark { position: absolute; left: -3%; bottom: -30%; font-family: var(--font-display); font-weight: 600; font-size: clamp(18rem, 34vw, 38rem); line-height: 1; color: var(--c-papir); opacity: .05; pointer-events: none; }
.cta-band .container { position: relative; z-index: 1; }

/* ---------- Typo drama ---------- */
.t-h2 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem); letter-spacing: -.018em; }
.section-head .t-h2 { max-width: 22ch; }
.hero .t-display { font-size: clamp(2.5rem, 1.25rem + 4.3vw, 4.15rem); }
.hero .t-display em { color: var(--c-mosaz-tmava); }
.eyebrow { letter-spacing: .12em; }

/* ---------- Hero phone: náklon + hloubka ---------- */
.hero-visual { perspective: 1200px; z-index: 1; }
.iphone { transform: rotate(3deg); box-shadow: 0 2px 6px rgb(32 40 31 / .14), 0 44px 90px -30px rgb(32 40 31 / .55); will-change: transform; }
.hero-copy { position: relative; z-index: 1; }

/* ---------- Origin pin (cinematic) ---------- */
.has-motion .origin [data-o-line] { opacity: 0; transform: translateY(26px); display: inline-block; }
.origin__body span { display: block; }
.origin__body span + span { margin-top: .5em; }

/* ---------- Masked heading reveals (SplitText lines) ---------- */
.st-mask-line { overflow: hidden; }

/* ---------- Workstrip (běžící pás prací) ---------- */
.workstrip { overflow: hidden; margin-inline: calc(-1 * var(--container-pad)); }
.workstrip__track { display: flex; gap: var(--space-4); width: max-content; padding-inline: var(--space-4); will-change: transform; }
.workstrip .worksample { width: clamp(180px, 20vw, 280px); flex: none; aspect-ratio: 4 / 5; }
.workstrip:hover .worksample { opacity: .92; }

/* ---------- Brass marquee ---------- */
.brassband { overflow: hidden; background: var(--c-inkoust); border-block: 1px solid var(--c-linka); padding-block: clamp(1.2rem, 2.4vw, 2rem); }
.brassband__track { display: flex; white-space: nowrap; width: max-content; will-change: transform; }
.brassband__track span { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--c-papir); letter-spacing: -.01em; }
.brassband__track i { font-style: normal; color: var(--c-mosaz-svetla); padding-inline: .45em; }

/* ---------- Buttons: šipka mikro ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: var(--c-mosaz); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.btn-primary { z-index: 0; }
.btn-primary:hover::after { transform: scaleX(1); }
.btn-primary:hover { background: var(--c-inkoust); color: var(--c-papir); }

/* ---------- Nav: brass underline sweep už je; logo hover ---------- */
.nav-logo .wordmark { transition: letter-spacing .4s var(--ease); }
.nav-logo:hover .wordmark { letter-spacing: .03em; }

/* ---------- Sekce: víc vzduchu, hairline rytmus ---------- */
.section { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.section + .section { padding-top: 0; }

@media (max-width: 760px) {
  .hero__watermark { display: none; }
  .workstrip .worksample { width: 46vw; }
}

/* hero fold fix (musí být po craft layeru) */
.hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   POST-REVIZE: rytmus a fold (lead, dle REVIZE.md slabin 1-3)
   ========================================================================== */
/* 2) díry mezi sekcemi přes ne-sekční pásy */
.pullquote { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.pullquote + .section, .trust-strip + .section, .brassband + .section,
.origin + .section, .defn + .section { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }
.section + .pullquote { padding-top: 0; }
/* 3) dech mezi H2 a perexem */
.section-head .t-lead { margin-top: var(--space-4); }

/* ==========================================================================
   BENTO GRID — políčka s různou váhou (služby, příklady)
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.bento .card { margin: 0; height: 100%; display: flex; flex-direction: column; border-radius: 16px; }
.b-2 { grid-column: span 2; }
.b-3 { grid-column: span 3; }
.b-4 { grid-column: span 4; }
.b-6 { grid-column: span 6; }

/* tmavá hrdinská dlaždice */
.card--ink { background: var(--c-inkoust); border-color: var(--c-inkoust); color: var(--c-papir); }
.card--ink .t-h3 { color: var(--c-papir); }
.card--ink p { color: color-mix(in srgb, var(--c-papir) 75%, transparent); }
.card--ink .card-index { color: var(--c-mosaz-svetla); }
.card--ink::before { background: var(--c-mosaz-svetla); }
.card--ink .card-link { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--c-papir); }
.card--ink .card-link .arrow { color: var(--c-mosaz-svetla); transition: transform var(--dur-fast) var(--ease); }
.card--ink:hover .card-link .arrow { transform: translate(3px, -3px); }

/* široká „cokoliv" dlaždice */
.card--strip { flex-direction: row; align-items: center; gap: var(--space-6); }
.card--strip .t-h3 { margin-bottom: 0; white-space: nowrap; }
.card--strip p { margin: 0; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-2, .b-3, .b-4 { grid-column: span 1; }
  .b-6 { grid-column: span 2; }
  .card--strip { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .card--strip .t-h3 { white-space: normal; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .b-2, .b-3, .b-4, .b-6 { grid-column: span 1; }
}