/* ---------- fonts ----------
   Figtree variable, self-hosted as ONE file (site/fonts/figtree-var.woff2):
   latin + latin-ext cut from the upstream Figtree[wght].ttf with pyftsubset.
   The earlier build used the two fontsource subsets split by unicode-range;
   Slovak diacritics (č ž ť ľ š) then came from a different file than the rest
   of the word and rendered visibly off in some browsers. One file, no
   unicode-range, plain format("woff2") — every glyph in a word comes from the
   same face. Rebuild the file with:
     pyftsubset "Figtree[wght].ttf" --flavor=woff2 --layout-features='*' \
       --unicodes="U+0000-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2122,U+2212" */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-var.woff2) format("woff2");
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* No sideways scroll, ever. The reveal cards sit 40px off the right edge
   before they slide in; iOS Safari ignores overflow-x:hidden on body alone,
   so clip on both html and body (clip does not create a scroll container). */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- layout ----------
   No dividers anywhere: sections are separated by whitespace and by the cream
   panels, not by lines. */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section > .wrap { padding-block: var(--space-section); }
.section { scroll-margin-top: var(--head-h); }
.panel {
  background: var(--surface-1);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 72px);
}

/* Inverted panel for the closing CTA: black ground, white text, white pill. */
.panel--dark { background: var(--ink); color: rgba(255, 255, 255, .78); }
.panel--dark h2 { color: #fff; }
.panel--dark .btn { background: #fff; color: var(--ink); border-color: #fff; }
.panel--dark .btn:hover { background: var(--surface-2); border-color: var(--surface-2); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.panel--dark .btn:focus-visible { outline-color: #fff; }

/* ---------- typography ---------- */
h1, h2, h3, .wordmark { color: var(--ink); }
h1 {
  font-size: var(--size-h1);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 14em;
}
h2 {
  font-size: var(--size-h2);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 22em;
}
h3 { font-size: var(--size-h3); font-weight: 600; line-height: 1.4; }
p + p { margin-top: var(--space-md); }
.lede { font-size: var(--size-lede); line-height: 1.6; max-width: 38em; }
.small { font-size: var(--size-small); line-height: 1.6; }
.eyebrow {
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body);
}
.eyebrow--center { text-align: center; }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--space-sm); }
h1 + .lede, h2 + .lede, h2 + p, h1 + p { margin-top: var(--space-md); }

/* ---------- button ---------- */
.btn {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 18px 34px;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:hover {
  background: #222;
  border-color: #222;
  transform: scale(1.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Secondary pill: same shape, inverted colours. Used for in-site links
   (e.g. "Pozrieť všetky služby") so the black pill stays reserved for booking. */
.btn--outline { color: var(--ink); background: transparent; }
.btn--outline:hover { color: var(--ink); background: var(--surface-1); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .15s ease; }
  .btn:hover { transform: none; }
}

/* ---------- header ---------- */
/* Frosted glass: translucent white over whatever scrolls beneath (on the home
   page the fluted-glass hero runs under it). Fixed height so the hero can pull
   itself up underneath by exactly that much. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  transform: translateZ(0); /* own compositing layer: keeps iOS from flickering the blur over the canvas while scrolling */
}
@supports not (backdrop-filter: blur(1px)) {
  .site-head { background: rgba(255, 255, 255, .92); }
}
.site-head > .wrap {
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.wordmark {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav { display: flex; gap: var(--space-lg); font-size: var(--size-body); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-head .btn { margin-top: 0; padding: 12px 24px; font-size: var(--size-body); }

/* ---------- hero: fills the first viewport, text left-aligned ----------
   Behind it, a WebGL fluted-glass panel (site/fluted.js) over the cream
   surface; the shader fades it out towards the headline on the left and at
   the bottom edge. ≤ 860px it stays, lighter and without pointer reaction. */
.hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--head-h)); }
.hero__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero > .wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--head-h) + var(--space-xl)) var(--space-2xl);
}
.hero .lede { margin-top: var(--space-lg); }
/* Flex children stretch by default; the button must keep its own width. */
.hero .btn { align-self: flex-start; }

/* ---------- logo marquee ----------
   Two identical lists in one track, translated by exactly half the track. The
   gap between the two halves is padding on each list, not a track gap, so the
   loop point lands on a seam that does not exist. Official SVGs untouched;
   monochrome comes from CSS. */
.marquee {
  overflow: hidden;
  margin-top: var(--space-lg);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.logos {
  display: flex;
  align-items: center;
  gap: 96px;
  padding-right: 96px;
  flex: none;
}
.logos img { height: 34px; width: auto; filter: grayscale(1); opacity: .6; }
/* Emorfiq's file is a tall lockup (bird over wordmark); at wordmark height it reads too small. */
.logos img[alt="Emorfiq"], .logos img[src*="emorfiq"] { height: 52px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .logos { flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding-right: 0; }
  .logos[aria-hidden="true"] { display: none; }
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.about__head { display: flex; align-items: center; gap: var(--space-sm); }
.about__head + p { margin-top: var(--space-md); }
.icon-link {
  display: inline-flex;
  color: var(--ink);
  border-radius: 999px;
  transition: opacity .15s ease, transform .2s ease;
}
.icon-link:hover { opacity: .7; transform: scale(1.1); }
.icon-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.about__text { max-width: 40em; }
/* Proof points: a bare check mark, one sentence each. */
.checks {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
.checks li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--ink);
}
.checks + p { margin-top: var(--space-md); }
.about__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ---------- tools ---------- */
.tools {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.tool {
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-md);
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}
.tool img { height: 32px; width: auto; filter: grayscale(1); opacity: .75; }
.tool span { font-size: var(--size-small); color: var(--ink); }

/* ---------- cards: cream tiles in a grid ----------
   Home "Kde AI reálne pomôže" runs four across; the services page runs three
   across per group. Same tile as a process step. */
.cards {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface-1);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.card p { font-size: var(--size-body); line-height: 1.6; }
.cards + .btn { margin-top: var(--space-xl); }
/* Example industries under a service card. Pills, no uppercase; pushed to the
   tile's bottom edge so a row of cards lines up. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-xs);
}
.tags li {
  font-size: var(--size-small);
  line-height: 1.4;
  color: var(--body);
  background: var(--bg);
  border-radius: var(--radius-btn);
  padding: 6px 12px;
}

/* ---------- subpage head + groups (services) ----------
   A subpage does not fill the viewport; its h1 sits between h2 and the hero size.
   Groups stack with a smaller gap than top-level sections. */
.page-head > .wrap { padding-block: var(--space-xl) var(--space-lg); }
@media (min-width: 861px) {
  .page-head > .wrap { padding-block: calc(var(--space-xl) + 48px) calc(var(--space-lg) + 48px); }
}
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 18em; }
.page-head .lede { margin-top: var(--space-md); }
.section--group > .wrap { padding-block: var(--space-lg) var(--space-xl); }
.section--group + .section--group > .wrap { padding-top: var(--space-xl); }
.section--group .cards { margin-top: var(--space-lg); }

/* ---------- process: four cards side by side ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.step {
  background: var(--surface-1);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: grid;
  align-content: start;
  gap: var(--space-sm);
}
/* Step number: a 64px rounded square, white on the cream tile (same surface
   as the tags on the services page), the number centred. */
.step__num {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}
.step p { font-size: var(--size-body); line-height: 1.6; }

/* ---------- reveal on scroll ----------
   Home only: the "Kde AI reálne pomôže" cards and the process steps slide in
   from the right (40px, not from the viewport edge) and fade, one after
   another. The hidden state is gated on html.js, which the inline script sets,
   so without JS everything is simply visible. Reduced motion: fade only. */
.js .reveal > li {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-in > li { opacity: 1; transform: none; }
.reveal > li:nth-child(2) { transition-delay: .12s; }
.reveal > li:nth-child(3) { transition-delay: .24s; }
.reveal > li:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal > li { transform: none; transition: opacity .4s ease; }
}

/* ---------- footer ---------- */
.site-foot > .wrap {
  padding-block: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--size-small);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
/* bottom row: copyright left, language switcher right */
.site-foot .foot-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.site-foot .copy { margin: 0; }
.site-foot .lang { gap: var(--space-xs); }
.site-foot .lang a + a::before { content: "/"; margin-right: var(--space-xs); color: var(--rule); }
.site-foot .lang a[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
  .steps, .cards--4, .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about__photo { max-width: 320px; }
}
@media (max-width: 640px) {
  .site-nav { display: none; }
  .logos img { height: 26px; }
  .logos img[src*="emorfiq"] { height: 40px; }
  .logos { gap: var(--space-xl); padding-right: var(--space-xl); }
  .tools { grid-template-columns: repeat(2, 1fr); }
  .steps, .cards--4, .cards--3 { grid-template-columns: 1fr; }
  .card, .step { border-radius: 24px; }
  .panel { border-radius: 24px; }
  /* footer: everything stacked, one link per line, 44px tap targets */
  .site-foot > .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .site-foot nav { flex-direction: column; gap: 0; width: 100%; }
  .site-foot nav a { display: block; padding-block: 10px; font-size: var(--size-body); }
  .site-foot .foot-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .site-foot .lang { flex-direction: row; gap: var(--space-md); width: auto; }
  .site-foot .lang a + a::before { content: none; }
}

/* ---------- cookie consent (consent.js) ---------- */
.linkish {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: none;
}
.linkish:hover { color: var(--ink); }
.copy__sep { margin-inline: var(--space-2xs); }
.consent {
  position: fixed; inset: auto var(--gutter) var(--space-md) var(--gutter); z-index: 50;
  display: flex; justify-content: flex-end; pointer-events: none;
}
.consent__box {
  pointer-events: auto;
  width: min(100%, 460px);
  background: var(--bg); color: var(--body);
  border: 1px solid var(--rule); border-radius: 24px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
  font-size: var(--size-small); line-height: 1.5;
}
.consent__title { margin: 0 0 var(--space-2xs); color: var(--ink); font-weight: 600; font-size: var(--size-body); }
.consent__text { margin: 0; }
.consent__prefs { margin-top: var(--space-md); border-top: 1px solid var(--rule); }
.consent__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.consent__row--locked { cursor: default; }
.consent__cat { display: grid; gap: 2px; }
.consent__cat strong { color: var(--ink); font-weight: 600; }
.consent__cat small { font-size: var(--size-small); }
.consent__cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.consent__switch {
  position: relative; width: 44px; height: 26px; flex: none;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule);
  transition: background .2s;
}
.consent__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.consent__cb:checked + .consent__switch { background: var(--ink); border-color: var(--ink); }
.consent__cb:checked + .consent__switch::after { transform: translateX(18px); }
.consent__cb:disabled + .consent__switch { opacity: .45; }
.consent__cb:focus-visible + .consent__switch { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.consent[hidden], .consent [hidden] { display: none !important; }
.consent__actions .btn { margin-top: 0; padding: 10px 18px; font-size: var(--size-small); }
.consent__link { background: none; border: 0; padding: 10px 4px; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.consent__link:hover { color: var(--ink); }
@media (max-width: 640px) {
  .consent { inset: auto 0 0 0; }
  .consent__box { width: 100%; border-radius: 24px 24px 0 0; padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom)); }
}

/* ---------- prose pages (cookies / legal) ---------- */
.prose { max-width: 44em; }
.prose h2 { font-size: var(--size-h3); margin-top: var(--space-xl); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose .table-wrap { margin-top: var(--space-sm); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; white-space: nowrap; }
.prose .table-wrap { overflow-x: auto; }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--size-small); line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); }
.prose th { color: var(--ink); font-weight: 600; }
.prose__meta { margin-top: var(--space-xl); }
.linkish--inline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__more { color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }