/* ============================================================
   Cautora landing — cautora.cz
   Tokeny zrcadlí SapiLanding/brand/tokens.css (single source of
   truth). Hex hodnoty smí existovat POUZE v tomto :root bloku —
   zbytek souboru používá výhradně var(--...). Akcent produktu:
   gold (--c-gold), sdílen se systémovou paletou.
   ============================================================ */

:root {
  /* Colors — copy of SapiLanding/brand/tokens.css (single source of truth) */
  --c-navy: #0b1d3a;
  --c-gold: #c4820a;
  --c-cream: #ede5cc;
  --c-black: #141720;
  --c-emerald: #1f7a4b;
  --c-tint: #dfd5b4;
  --c-border: #c8bfa0;
  --c-muted: #5c5643;
  --c-white: #ffffff;
  --c-error: #a23b2e;
  --c-terracotta: #a23b2e;
  /* Lighter terracotta tint for use on navy backgrounds — base
     --c-terracotta is 2.56:1 on navy (fails 4.5:1, system §10);
     this variant is 5.5:1. */
  --c-terracotta-on-navy: #d97a5f;

  --accent: var(--c-gold);

  /* Motion tokens */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 650ms;
  --duration-reveal-reduced: 150ms;
  --duration-draw: 900ms;
  --duration-phase: 400ms;
  --duration-micro: 200ms;
  --stagger-step: 90ms;

  /* Typography */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "DM Sans", -apple-system, sans-serif;
  --font-code: "JetBrains Mono", "Courier New", monospace;
  --font-hand: "Caveat", cursive;

  /* Spacing scale */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;
  --sp-2xl: 4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(11, 29, 58, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 29, 58, 0.12);

  /* Content widths */
  --content-width: 720px;
  --wide-width: 1040px;

  /* Section rhythm (system §6.1) */
  --section-pad-desktop: 96px;
  --section-pad-mobile: 64px;
  --gutter: 24px;
}

/* ------------------------------------------------------------
   Self-hosted fonts (system §4: "self-contained, no CDN requests")
   Caveat, Cormorant Garamond, JetBrains Mono, Plus Jakarta Sans —
   latin + latin-ext subsets only (latin-ext required for Czech
   diacritics). Files live in ./assets/fonts/. font-display: swap
   per subset so text renders immediately with a fallback.
   ------------------------------------------------------------ */
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/Wnz6HAc5bAfYB2Q7aDYYmg8.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/Wnz6HAc5bAfYB2Q7ZjYY.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;
}

/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/Wnz6HAc5bAfYB2Q7aDYYmg8.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/Wnz6HAc5bAfYB2Q7ZjYY.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;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-htM8Efs.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-iNM8.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;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.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;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-black);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  color: inherit;
  font-weight: 500;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.container {
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-navy);
  color: var(--c-cream);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Section backgrounds (system §6.2) — navy vs cream "kapitoly"
   ------------------------------------------------------------ */
.section {
  padding-block: var(--section-pad-mobile);
  position: relative;
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-pad-desktop);
  }
}

.section-cream {
  background: var(--c-cream);
}

.section-navy {
  background: var(--c-navy);
  color: var(--c-cream);
  position: relative;
  /* No overflow:hidden here: this class is also applied to sticky
     scrollytelling containers (.pipeline-section) — an overflow-hidden
     ancestor breaks `position: sticky` on its children (CSS spec: sticky
     containing block = nearest scroll container / clipping ancestor).
     The ::before texture below is absolute + inset:0, so it's already
     sized to this box and needs no parent clipping. */
  background-image: radial-gradient(
    circle at 85% 0%,
    rgba(255, 255, 255, 0.04),
    transparent 55%
  );
}

/* Cautora navy texture: document line rows, opacity 0.04 (system §6.2) */
.section-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--c-cream) 0,
    var(--c-cream) 2px,
    transparent 2px,
    transparent 28px
  );
  background-size: 100% 100%;
}

.section-navy .eyebrow,
.section-navy .section-title {
  color: var(--c-cream);
}

.section-navy .section-lead {
  color: rgba(237, 229, 204, 0.65);
}

/* Straight-edge transition, 1px accent line (system §6.3) */
.section-navy + .section-cream,
.section-cream + .section-navy {
  border-top: 1px solid rgba(196, 130, 10, 0.3);
}

.eyebrow {
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-sm);
  display: block;
}

.section-title {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: var(--sp-lg);
  max-width: 720px;
}

@media (min-width: 1024px) {
  .section-title {
    font-size: 40px;
  }
}

.section-lead {
  font-size: 18px;
  color: var(--c-muted);
  max-width: 640px;
  margin-bottom: var(--sp-xl);
}

/* ------------------------------------------------------------
   Reveal / fadeUp (system §2)
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    /* initReveal() adds .is-visible synchronously under reduced-motion,
       but without this the element still starts at the base rule's
       opacity:0 with no transform, and stays invisible if is-visible
       is added before that stylesheet rule is available (or if a
       consumer sets [data-reveal] content without running the JS,
       e.g. crawlers) — content must default to visible. */
    opacity: 1;
    transition: opacity var(--duration-reveal-reduced) linear;
    transform: none;
  }
}

/* ------------------------------------------------------------
   Nav
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: height var(--duration-micro) ease, border-color var(--duration-micro) ease;
  border-bottom: 1px solid transparent;
  /* backdrop-filter/background live on ::before (below), not on this
     element: a `backdrop-filter` (like `transform`/`filter`) on an
     ancestor creates a new containing block for `position: fixed`
     descendants. The mobile nav overlay (`.main-nav.is-open`) is
     `position: fixed` and MUST anchor to the viewport, not to this
     64/56px header box — otherwise it renders pinned to the header's
     height instead of covering the screen. */
  isolation: isolate;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background-color var(--duration-micro) ease,
    backdrop-filter var(--duration-micro) ease;
}

html[data-scrolled] .site-header {
  height: 56px;
  border-bottom-color: rgba(196, 130, 10, 0.3);
}

html[data-scrolled] .site-header::before {
  background: rgba(11, 29, 58, 0.92);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: var(--c-cream);
  font-family: var(--font-display);
  font-size: 20px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  color: var(--c-gold);
}

.main-nav {
  display: none;
  gap: var(--sp-xl);
}

@media (min-width: 1024px) {
  .main-nav {
    display: flex;
  }
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-cream);
  position: relative;
  padding-block: 4px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-micro) ease;
}

@media (hover: hover) {
  .main-nav a:hover::after {
    transform: scaleX(1);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.sapiform-link {
  font-family: var(--font-code);
  font-size: 12px;
  opacity: 0.7;
  text-decoration: none;
  color: var(--c-cream);
  display: none;
}

@media (min-width: 1024px) {
  .sapiform-link {
    display: inline-block;
  }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--c-cream);
  transition: transform var(--duration-micro) ease, opacity var(--duration-micro) ease;
}

/* ------------------------------------------------------------
   Buttons (system §8)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--duration-micro) ease, transform var(--duration-micro) ease;
}

@media (max-width: 767px) {
  .btn {
    height: 44px;
  }
}

.btn-primary {
  background: var(--c-gold);
  color: var(--c-navy);
}

@media (hover: hover) {
  .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(237, 229, 204, 0.4);
  color: var(--c-cream);
}

@media (hover: hover) {
  .btn-ghost:hover {
    background: rgba(237, 229, 204, 0.06);
  }
}

.btn:focus-visible {
  outline: 3px solid rgba(196, 130, 10, 0.4);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   HERO — vrstvený dokument (exploded view)
   ------------------------------------------------------------ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-copy h1 {
  font-size: 40px;
  line-height: 1.1;
  color: var(--c-cream);
  margin-bottom: var(--sp-lg);
}

@media (min-width: 1024px) {
  .hero-copy h1 {
    font-size: 64px;
  }
}

.hero-lead {
  font-size: 18px;
  color: rgba(237, 229, 204, 0.75);
  max-width: 480px;
  margin-bottom: var(--sp-xl);
}

.hero-cta {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin-inline: auto;
}

.doc-svg {
  width: 100%;
  height: 100%;
}

/* Exploded-view layers: staggered translate + scale (spec §2) */
.doc-layer {
  transition: transform 700ms var(--ease-out-expo), opacity 500ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.doc-layer-text {
  transform: translateY(0);
}

.doc-layer-data {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}

.doc-layer-risk {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.doc-layer-deadline {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
}

.hero-visual.is-exploded .doc-layer-text {
  transform: translateY(-24px);
}

.hero-visual.is-exploded .doc-layer-data {
  opacity: 1;
  transform: translateY(-8px) scale(1);
  transition-delay: 150ms;
}

.hero-visual.is-exploded .doc-layer-risk {
  opacity: 1;
  transform: translateY(8px) scale(1);
  transition-delay: 300ms;
}

.hero-visual.is-exploded .doc-layer-deadline {
  opacity: 1;
  transform: translateY(24px) scale(1);
  transition-delay: 450ms;
}

/* Resting float + gold pulse, after explode settles */
.hero-visual.is-settled .doc-layer {
  animation: doc-float 6s ease-in-out infinite;
}

.hero-visual.is-settled .doc-layer-data rect,
.hero-visual.is-settled .doc-field {
  animation: gold-pulse 2.4s ease-in-out infinite;
}

@keyframes doc-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@keyframes gold-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.doc-risk-underline {
  stroke: var(--c-terracotta);
}

.doc-marginalia {
  font-family: var(--font-hand);
  /* Navy-context variant: base --c-terracotta is 2.56:1 on navy
     (fails 4.5:1 text contrast, system §10); this is 5.5:1. */
  fill: var(--c-terracotta-on-navy);
}

@media (prefers-reduced-motion: reduce) {
  .doc-layer,
  .hero-visual.is-settled .doc-layer,
  .hero-visual.is-settled .doc-field {
    animation: none !important;
    transition: none !important;
  }
  .hero-visual .doc-layer-text {
    transform: translateY(-24px);
  }
  .hero-visual .doc-layer-data {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }
  .hero-visual .doc-layer-risk {
    opacity: 1;
    transform: translateY(8px) scale(1);
  }
  .hero-visual .doc-layer-deadline {
    opacity: 1;
    transform: translateY(24px) scale(1);
  }
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  translate: -50% 0;
  color: rgba(237, 229, 204, 0.6);
  animation: cue-bounce 2s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Social proof / marquee
   ------------------------------------------------------------ */
.proof-strip {
  padding-block: var(--sp-2xl);
}

.proof-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xl);
  justify-content: center;
  margin-bottom: var(--sp-xl);
}

.proof-count {
  text-align: center;
}

.proof-count .value {
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  color: var(--c-navy);
  display: block;
}

.proof-count .label {
  font-size: 13px;
  color: var(--c-muted);
}

.proof-note {
  text-align: center;
  font-size: 14px;
  color: var(--c-muted);
  font-style: italic;
}

/* ------------------------------------------------------------
   Pain -> Promise cards
   ------------------------------------------------------------ */
.pain-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .pain-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pain-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  transition: box-shadow var(--duration-micro) ease, transform var(--duration-micro) ease;
}

@media (hover: hover) {
  .pain-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }
}

.pain-icon {
  width: 32px;
  height: 32px;
  color: var(--c-navy);
  margin-bottom: var(--sp-md);
}

.pain-icon .accent-dot {
  fill: var(--c-gold);
}

.pain-card h3 {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--sp-sm);
}

.pain-card p {
  color: var(--c-muted);
  font-size: 15px;
}

/* ------------------------------------------------------------
   Scrollytelling — Pipeline (6 phases, mirrors ProcessingStepper)
   ------------------------------------------------------------ */
.pipeline-section {
  position: relative;
  height: 400vh;
}

.pipeline-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* No overflow here either — sticky's containing block must not be
     clipped by any ancestor (including itself) or it stops sticking
     (renders at its scrolled-past offset instead of pinning to top:0). */
}

.pipeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xl);
  width: 100%;
}

@media (min-width: 1024px) {
  .pipeline-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pipeline-visual {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

.pipeline-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.pipeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(237, 229, 204, 0.25);
  transition: background var(--duration-phase) ease;
}

.pipeline-dot-line {
  flex: 1;
  height: 1px;
  background: rgba(237, 229, 204, 0.2);
  position: relative;
  overflow: hidden;
}

.pipeline-dot-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform var(--duration-phase) ease;
}

.pipeline-section.is-step-0 .pipeline-dot:nth-child(1),
.pipeline-section.is-step-1 .pipeline-dot:nth-child(1),
.pipeline-section.is-step-1 .pipeline-dot:nth-child(3),
.pipeline-section.is-step-2 .pipeline-dot:nth-child(1),
.pipeline-section.is-step-2 .pipeline-dot:nth-child(3),
.pipeline-section.is-step-2 .pipeline-dot:nth-child(5),
.pipeline-section.is-step-3 .pipeline-dot:nth-child(-n + 7):nth-child(odd),
.pipeline-section.is-step-4 .pipeline-dot:nth-child(-n + 9):nth-child(odd),
.pipeline-section.is-step-5 .pipeline-dot {
  background: var(--c-gold);
}

.pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.pipeline-step {
  padding-left: var(--sp-lg);
  border-left: 2px solid rgba(237, 229, 204, 0.15);
  opacity: 0.4;
  transition: opacity var(--duration-phase) ease, border-color var(--duration-phase) ease;
}

.pipeline-step.is-active {
  opacity: 1;
  border-color: var(--c-gold);
}

.pipeline-step .step-num {
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--c-gold);
  display: block;
  margin-bottom: 4px;
}

.pipeline-step h3 {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--c-cream);
}

.pipeline-step p {
  font-size: 14px;
  color: rgba(237, 229, 204, 0.65);
}

.pipeline-final-note {
  font-family: var(--font-code);
  font-size: 13px;
  color: var(--c-gold);
  margin-top: var(--sp-sm);
}

/* Mini document visual reused inside pipeline sticky panel */
.pipeline-doc {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 260px;
  margin-inline: auto var(--sp-lg);
}

/* Mobile: cards instead of sticky (system §2) */
.pipeline-cards {
  display: none;
}

@media (max-width: 1023px) {
  .pipeline-section {
    height: auto;
  }
  .pipeline-sticky {
    display: none;
  }
  .pipeline-cards {
    display: grid;
    gap: var(--gutter);
  }
  .pipeline-card {
    background: rgba(237, 229, 204, 0.04);
    border: 1px solid rgba(237, 229, 204, 0.12);
    border-radius: var(--radius-lg);
    padding: 24px;
  }
  .pipeline-card .step-num {
    font-family: var(--font-code);
    font-size: 12px;
    color: var(--c-gold);
  }
  .pipeline-card h3 {
    color: var(--c-cream);
    font-size: 17px;
    font-family: var(--font-body);
    font-weight: 600;
    margin-block: 4px 8px;
  }
  .pipeline-card p {
    color: rgba(237, 229, 204, 0.65);
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-section {
    height: auto;
  }
  .pipeline-sticky {
    position: static;
    height: auto;
    padding-block: 48px;
  }
  .pipeline-step {
    opacity: 1;
    border-color: var(--c-gold);
  }
}

/* ------------------------------------------------------------
   Feature blocks (alternating)
   ------------------------------------------------------------ */
.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xl);
  align-items: center;
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .feature-block {
    grid-template-columns: 1fr 1fr;
  }
  .feature-block.is-reversed .feature-copy {
    order: 2;
  }
}

.feature-copy h3 {
  font-size: 24px;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--sp-md);
  color: var(--c-navy);
}

.feature-copy p {
  color: var(--c-muted);
  font-size: 16px;
}

.feature-visual {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  min-height: 220px;
}

/* ------------------------------------------------------------
   Trust / on-prem
   ------------------------------------------------------------ */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--sp-xl);
}

@media (min-width: 768px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust-card {
  background: rgba(237, 229, 204, 0.04);
  border: 1px solid rgba(237, 229, 204, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.trust-card.is-highlight {
  border-color: var(--c-gold);
}

.trust-card h3 {
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--c-cream);
  margin-bottom: var(--sp-sm);
}

.trust-card p {
  font-size: 14px;
  color: rgba(237, 229, 204, 0.65);
}

.trust-diagram {
  margin-top: var(--sp-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .trust-diagram {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shape-card {
  text-align: center;
  padding: 24px;
}

.shape-card svg {
  margin-inline: auto var(--sp-sm);
}

.shape-card h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-cream);
}

.shape-draw {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset var(--duration-draw) var(--ease-out-expo);
}

.trust-diagram.is-visible .shape-draw {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .shape-draw {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ------------------------------------------------------------
   Pricing
   ------------------------------------------------------------ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: start;
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.price-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  border: 1px solid transparent;
}

.price-card.is-featured {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-md);
}

@media (min-width: 1024px) {
  .price-card.is-featured {
    transform: translateY(-12px);
  }
}

.price-card h3 {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--sp-sm);
}

.price-card .price {
  font-family: var(--font-code);
  font-size: 32px;
  color: var(--c-navy);
  margin-bottom: var(--sp-md);
  display: block;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-lg);
  font-size: 14px;
  color: var(--c-muted);
}

.price-card li {
  padding-block: 6px;
  border-top: 1px solid var(--c-tint);
}

.price-card li:first-child {
  border-top: none;
}

/* ------------------------------------------------------------
   Final CTA strip
   ------------------------------------------------------------ */
.cta-strip {
  text-align: center;
  border-top: 1px solid var(--c-gold);
}

.cta-strip h2 {
  color: var(--c-cream);
  font-size: 32px;
  margin-bottom: var(--sp-lg);
}

@media (min-width: 1024px) {
  .cta-strip h2 {
    font-size: 40px;
  }
}

/* ------------------------------------------------------------
   Footer + Sapiform bar
   ------------------------------------------------------------ */
.site-footer {
  background: var(--c-navy);
  color: rgba(237, 229, 204, 0.7);
  padding-block: 64px 32px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}

.footer-nav a {
  text-decoration: none;
  color: rgba(237, 229, 204, 0.7);
  font-size: 14px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--c-cream);
}

.sapiform-bar {
  border-top: 1px solid rgba(237, 229, 204, 0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg);
  font-size: 13px;
}

.sapiform-bar .label {
  font-family: var(--font-code);
  opacity: 0.7;
}

.sapiform-mini-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.sapiform-mini-logos a {
  text-decoration: none;
  color: rgba(237, 229, 204, 0.55);
  font-size: 13px;
  transition: color var(--duration-micro) ease;
}

@media (hover: hover) {
  .sapiform-mini-logos a:hover {
    color: var(--c-gold);
  }
}

.footer-meta {
  margin-top: var(--sp-lg);
  font-size: 13px;
}

/* Scroll-lock while mobile nav overlay is open (system §7) */
body.nav-open {
  overflow: hidden;
}

/* Mobile nav overlay (system §7) */
@media (max-width: 1023px) {
  .main-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    top: 0;
    /* Explicit viewport height defends against any future containing-
       block regression on an ancestor (see .site-header comment) —
       `inset:0` alone should suffice, but dvh is authoritative. */
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-xl);
    background: rgba(11, 29, 58, 0.96);
    backdrop-filter: blur(12px);
    z-index: 90;
    /* Circle-expand open: clip-path grows from the hamburger button
       (top-right corner, ~24px inset) to fill the viewport, 400ms
       out-expo (spec §7). --nav-toggle-x/-y set by JS if available,
       fallback keeps the origin near the button. */
    clip-path: circle(0% at var(--nav-toggle-x, 92%) var(--nav-toggle-y, 40px));
    animation: nav-circle-expand var(--duration-phase, 400ms) var(--ease-out-expo) forwards;
    animation-duration: 400ms;
  }

  .main-nav.is-open a {
    font-family: var(--font-display);
    font-size: 32px;
  }
}

@keyframes nav-circle-expand {
  from {
    clip-path: circle(0% at var(--nav-toggle-x, 92%) var(--nav-toggle-y, 40px));
  }
  to {
    clip-path: circle(150% at var(--nav-toggle-x, 92%) var(--nav-toggle-y, 40px));
  }
}

/* Reduced-motion: overlay open is a plain 150ms fade, no clip-path sweep */
@media (prefers-reduced-motion: reduce) {
  .main-nav.is-open {
    animation: none;
    clip-path: none;
    transition: opacity var(--duration-reveal-reduced, 150ms) linear;
  }
}

/* Overlay footer: CTA + language/Sapiform link, stacked at the bottom
   of the fullscreen nav overlay (system §7 mobile spec). Hidden on
   desktop where header-actions already provides these. */
.nav-overlay-footer {
  display: none;
}

@media (max-width: 1023px) {
  .nav-overlay-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
    width: 100%;
    max-width: 320px;
    margin-top: var(--sp-lg);
  }

  .nav-overlay-cta {
    width: 100%;
  }

  .nav-overlay-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-md);
    font-family: var(--font-code);
    font-size: 12px;
    opacity: 0.7;
  }

  .nav-overlay-meta a {
    color: var(--c-cream);
    text-decoration: none;
  }
}

/* 4th footer mini-logo placeholder (Mirora, domain TBD) stays visually
   consistent but non-interactive until the domain ships. */
.sapiform-mini-logos a.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}