/* =========================================================================
   E.C.H.O. - vizuální systém
   Parte (55 %) × úřední dokumentace (30 %) × digitální ozvěna (15 %)
   Tokeny vycházejí z ECHO_web_PRD/design-tokens.example.json
   ========================================================================= */

:root{
  /* Inverzní parte: teplá černá, krémový text, bílé nadpisy.
     color-scheme: dark kvůli nativním prvkům formulářů a scrollbarům. */
  color-scheme: dark;

  /* --- barvy (kontrasty počítané proti --paper) --- */
  --paper:          #100F0D;   /* teplá černá */
  --paper-elevated: #171613;
  --paper-deep:     #201E1A;
  --ink:            #EDE8DC;   /* krémová - hlavní text, 15,7:1 */
  --ink-bright:     #FFFFFF;   /* bílá - displejové nadpisy */
  --ink-muted:      #A8A296;   /* 7,6:1 */
  --ink-faint:      #857F74;   /* 4,8:1 - drobná metadata, WCAG AA */
  --rule:           #2E2B26;
  --rule-strong:    #45413A;
  --accent:         #8FA2AD;   /* jediný studený akcent - digitální anomálie */
  --stamp:          #C9776C;   /* tlumená úřední červená, nikdy ne CTA */

  /* --- typografie --- */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.18vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.36vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.78vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.52rem + 1.45vw, 2.95rem);
  --step-4:  clamp(2.30rem, 1.70rem + 2.60vw, 4.10rem);

  /* --- layout --- */
  --maxw: 1240px;
  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --header-h: 4.25rem;

  /* --- detail --- */
  --hairline: 1px solid var(--rule);
  --r-sm: 2px;
  --r-md: 6px;
  --r-pill: 999px;

  /* --- motion --- */
  --ghost-dur: 11s;
  --ghost-shift: 14px;
  --reveal-dur: 420ms;
  --accordion-dur: 220ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   Reset & základ
   ========================================================================= */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink-bright);
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0 0 1.05em; }
p:last-child{ margin-bottom: 0; }

a{ color: inherit; }

ul, ol{ margin: 0; padding: 0; }

img, svg{ max-width: 100%; height: auto; }

hr{
  border: 0;
  border-top: var(--hairline);
  margin: 0;
}

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

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-family: var(--sans);
  font-size: var(--step--1);
}
.skip-link:focus{ left: 0; }

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

/* =========================================================================
   Layout
   ========================================================================= */

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

.measure{ max-width: var(--measure); }

section{
  padding-block: clamp(4.5rem, 10vw, 9rem);
  position: relative;
}

.section-rule{
  border: 0;
  border-top: var(--hairline);
  max-width: var(--maxw);
  margin-inline: auto;
  width: calc(100% - 2 * var(--gutter));
}

[id]{ scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* =========================================================================
   Mikrotypografie - labely, metadata, docket
   ========================================================================= */

.label{
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: baseline;
  gap: .85rem;
}

.label-num{
  font-family: var(--mono);
  font-size: .78em;
  letter-spacing: .06em;
  color: var(--ink-faint);
  padding-right: .85rem;
  border-right: var(--hairline);
}

.mini-label{
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: .5rem;
}

.meta-mono{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink-muted);
}

.section-head{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.section-title{
  font-size: var(--step-3);
  max-width: 22ch;
}

.lede{
  font-size: var(--step-1);
  line-height: 1.62;
  max-width: var(--measure);
}

.body-copy{ max-width: var(--measure); }

.pullquote{
  font-family: var(--serif);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  max-width: 24ch;
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--ink);
  text-wrap: balance;
}

.statement{
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-muted);
  max-width: 40ch;
}

/* =========================================================================
   Tlačítka a CTA
   ========================================================================= */

.btn{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 44px;
  padding: .78rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.btn-primary{
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
}
.btn-primary:hover{ --btn-bg: var(--ink-bright); --btn-bd: var(--ink-bright); }

.btn-secondary:hover{ --btn-bg: var(--paper-deep); }

.btn-sm{ min-height: 40px; padding: .55rem 1.05rem; letter-spacing: .045em; }

.btn[disabled], .btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}

.cta-cluster{
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1rem;
  align-items: center;
}

.link-quiet{
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color 180ms var(--ease);
}
.link-quiet:hover{ border-color: var(--ink); }

/* =========================================================================
   Header / navigace
   ========================================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease);
}
.site-header.is-stuck{
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

.header-inner{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
  transition: min-height 240ms var(--ease);
}
.site-header.is-stuck .header-inner{ min-height: 3.5rem; }

.wordmark{
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}

.nav{ display: none; }

@media (min-width: 1000px){
  .nav{
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-right: .5rem;
  }
}

.nav-link{
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .05em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
  white-space: nowrap;
}
.nav-link:hover{ color: var(--ink); }
.nav-link[aria-current="true"]{
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

.nav-locked{
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .05em;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: default;
  border-left: var(--hairline);
  padding-left: 1.6rem;
}
.nav-locked::after{
  content: "";
  width: 9px; height: 11px;
  border: 1px solid currentColor;
  border-radius: 1px 1px 2px 2px;
  border-top-width: 4px;
  border-top-style: solid;
  box-sizing: border-box;
  opacity: .8;
}

.header-cta{ display: none; }
@media (min-width: 600px){ .header-cta{ display: inline-flex; } }

.nav-toggle{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .4rem .3rem;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 1000px){ .nav-toggle{ display: none; } }

.nav-toggle-bars{
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.nav-toggle-bars span{
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobile-nav{
  border-top: var(--hairline);
  background: var(--paper-elevated);
}
.mobile-nav[hidden]{ display: none; }
@media (min-width: 1000px){ .mobile-nav{ display: none !important; } }

.mobile-nav ul{ list-style: none; padding-block: .5rem 1.25rem; }
.mobile-nav li{ border-bottom: var(--hairline); }
.mobile-nav li:last-child{ border-bottom: 0; }
.mobile-nav a,
.mobile-nav .nav-locked{
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  border: 0;
  padding-left: 0;
}
.mobile-nav .btn{ width: 100%; margin-top: 1rem; }

/* mobilní perzistentní CTA */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: var(--hairline);
  transform: translateY(110%);
  transition: transform 300ms var(--ease);
}
.sticky-cta .btn{ width: 100%; }
.sticky-cta.is-visible{ transform: translateY(0); }
@media (min-width: 600px){ .sticky-cta{ display: none; } }

/* =========================================================================
   Hero
   ========================================================================= */

.hero{
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  overflow-x: clip;
}

.hero-kicker{
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 1rem;
  border-bottom: var(--hairline);
  max-width: 46rem;
}

.hero-title{
  position: relative;
  display: block;
  font-size: var(--step-4);
  letter-spacing: .06em;
  line-height: 1;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.hero-title .title-real{
  position: relative;
  z-index: 2;
  display: inline-block;
}

.hero-title .title-ghost{
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: inline-block;
  color: var(--accent);   /* jediný studený akcent - jen jako odchylka kopie */
  opacity: .3;
  filter: blur(0.5px);
  letter-spacing: .062em;
  pointer-events: none;
  user-select: none;
  animation: echo-drift var(--ghost-dur) cubic-bezier(.37,.16,.31,.92) infinite;
  will-change: transform;
}

@media (min-width: 900px){
  :root{ --ghost-shift: 26px; }
}

@keyframes echo-drift{
  0%   { transform: translateX(0); }
  26%  { transform: translateX(calc(var(--ghost-shift) * .7)); }
  44%  { transform: translateX(var(--ghost-shift)); }
  71%  { transform: translateX(calc(var(--ghost-shift) * .28)); }
  100% { transform: translateX(0); }
}

.hero-hook{
  font-size: var(--step-2);
  line-height: 1.32;
  max-width: 20ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.hero-sub{
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 42ch;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
}

.hero-facts{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.1rem;
  border-top: var(--hairline);
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-facts li{ display: flex; align-items: center; gap: 1.4rem; }
.hero-facts li:not(:last-child)::after{
  content: "·";
  color: var(--rule-strong);
}

.scroll-cue{
  display: none;
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
@media (min-width: 900px){ .scroll-cue{ display: inline-flex; align-items: center; gap: .7rem; } }
.scroll-cue::after{
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(var(--rule-strong), transparent);
}

/* =========================================================================
   Premise
   ========================================================================= */

.premise-grid{
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px){
  .premise-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

.premise-body p:first-child::first-letter{
  font-size: 1.02em;
}

.transition-line{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: var(--hairline);
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* =========================================================================
   Rozhodovací karty - UZNAT / VYMAZAT
   ========================================================================= */

.decision{
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: var(--hairline);
  margin-top: clamp(1rem, 3vw, 2rem);
}
/* Obě varianty vedle sebe už na tabletu - rozhodnutí se má číst jako
   dva rovnocenné výroky, ne jako seznam pod sebou. */
@media (min-width: 720px){
  .decision{ grid-template-columns: 1fr 1fr; }
}

.decision-card{
  background: var(--paper-elevated);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.decision-stamp{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 1rem;
  border-bottom: var(--hairline);
}

.decision-title{
  font-family: var(--sans);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  margin: 0;
}

.decision-text{ margin: 0; }
.decision-text strong{ font-weight: 600; }

.decision-note{
  margin-top: 1.75rem;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
}
@media (min-width: 800px){ .decision-note{ text-align: left; } }

/* =========================================================================
   Svět 2033 - dokumentární výřez
   ========================================================================= */

.world-doc{
  border: var(--hairline);
  background: var(--paper-elevated);
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}

.world-doc-head{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: var(--hairline);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.world-grid{
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px){
  .world-grid{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* jemná digitální anomálie - jedna na viewport */
.ghost-echo{
  position: relative;
  display: inline-block;
}
.ghost-echo::after{
  content: attr(data-echo);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  color: var(--accent);
  opacity: .32;
  filter: blur(0.4px);
  transform: translateX(6px);
  pointer-events: none;
}

/* =========================================================================
   Zážitek u stolu
   ========================================================================= */

.beats{
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: var(--hairline);
}
@media (min-width: 700px){ .beats{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px){ .beats{ grid-template-columns: repeat(4, 1fr); } }

.beat{
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.beat-num{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 1.1rem;
}
.beat-title{
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
}
.beat p{
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

.fit-grid{
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.75rem, 5vw, 4rem);
}
@media (min-width: 800px){ .fit-grid{ grid-template-columns: 1fr 1fr; } }

.fit h3{
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
  padding-bottom: .85rem;
  border-bottom: var(--hairline);
}
.fit ul{ list-style: none; display: grid; gap: .9rem; }
.fit li{
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: baseline;
  line-height: 1.6;
}
.fit li::before{
  content: "-";
  color: var(--ink-faint);
}

/* =========================================================================
   Postavy
   ========================================================================= */

.characters{
  border-top: var(--hairline);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.character{ border-bottom: var(--hairline); }

.character-heading{ margin: 0; font-weight: inherit; }

.char-head{
  display: grid;
  width: 100%;
  gap: .5rem 1.5rem;
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  align-items: baseline;
  grid-template-columns: 1fr auto;
  transition: background-color 200ms var(--ease);
}
@media (min-width: 800px){
  .char-head{
    grid-template-columns: 4.5rem minmax(11rem, 1fr) minmax(0, 1.35fr) auto;
    align-items: baseline;
  }
}
.char-head:hover{ background: color-mix(in srgb, var(--paper-deep) 55%, transparent); }
.char-head:hover .char-index::after{ transform: translateX(3px); }

.char-index{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  position: relative;
  display: inline-block;
  grid-column: 1 / -1;
}
@media (min-width: 800px){ .char-index{ grid-column: auto; } }
.char-index::after{
  content: attr(data-echo);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  transition: transform 500ms var(--ease), opacity 500ms var(--ease);
}
.char-head:hover .char-index::after{ opacity: .55; color: var(--accent); }

.char-id{ display: block; }
.char-name{
  display: block;
  font-family: var(--serif);
  font-size: var(--step-1);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.char-meta{
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin-top: .3rem;
}
.char-teaser{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--ink);
  grid-column: 1 / -1;
}
@media (min-width: 800px){ .char-teaser{ grid-column: auto; } }

.char-open{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  display: none;
}
@media (min-width: 800px){ .char-open{ display: inline; } }

.char-toggle-icon{
  position: relative;
  width: 14px; height: 14px;
  justify-self: end;
  align-self: center;
  flex: none;
}
@media (min-width: 800px){ .char-toggle-icon{ display: none; } }
.char-toggle-icon::before,
.char-toggle-icon::after{
  content: "";
  position: absolute;
  background: var(--ink-muted);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.char-toggle-icon::before{ inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.char-toggle-icon::after{ inset: 0 50% 0 auto; width: 1px; transform: translateX(50%); }
[aria-expanded="true"] .char-toggle-icon::after{ opacity: 0; transform: translateX(50%) rotate(90deg); }

/* rozbalený panel - mobilní accordion */
.char-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--accordion-dur) var(--ease);
}
.char-panel > div{
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s var(--accordion-dur);
}
.character.is-open .char-panel{ grid-template-rows: 1fr; }
.character.is-open .char-panel > div{ visibility: visible; transition-delay: 0s; }
@media (min-width: 800px){
  .char-panel{ display: none; }
}

.char-detail{ padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.char-detail > * + *{ margin-top: 1.5rem; }
.char-detail p{ max-width: var(--measure); }

.char-hint{
  border-left: 2px solid var(--rule-strong);
  padding-left: 1.1rem;
  font-style: italic;
  color: var(--ink-muted);
}
.char-hint .mini-label{ font-style: normal; }

.char-casting{
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-muted);
  padding-top: 1.25rem;
  border-top: var(--hairline);
}

/* trigger pills */
.pills{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
}
.pill{
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--ink-muted);
  border: var(--hairline);
  border-radius: var(--r-pill);
  padding: .3rem .85rem;
  background: var(--paper-elevated);
  white-space: nowrap;
}

/* case-file dialog (desktop) */
.case-file{
  width: min(46rem, calc(100vw - 2.5rem));
  max-height: min(84vh, 52rem);
  padding: 0;
  border: var(--hairline);
  border-radius: var(--r-sm);
  background: var(--paper-elevated);
  color: var(--ink);
  overflow: auto;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.case-file::backdrop{
  background: rgba(6, 6, 5, .72);
  backdrop-filter: blur(3px);
}
.case-file-inner{ padding: clamp(1.75rem, 3.5vw, 3rem); }

.case-file-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: var(--hairline);
}
.case-file-index{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: .85rem;
}
.case-file-name{
  font-size: var(--step-2);
  margin: 0;
}
.case-file-meta{
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: .45rem 0 0;
}
.case-file-close{
  flex: none;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: none;
  border: var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  cursor: pointer;
}
.case-file-close:hover{ background: var(--paper-deep); color: var(--ink); }

/* =========================================================================
   Bezpečnost
   ========================================================================= */

.safety-grid{
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 950px){
  .safety-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.safety-tools{ list-style: none; display: grid; gap: 0; border-top: var(--hairline); }
.safety-tools li{
  padding: 1.35rem 0;
  border-bottom: var(--hairline);
}
.safety-tools h3{
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0 0 .45rem;
}
.safety-tools p{
  margin: 0;
  font-size: .97rem;
  line-height: 1.62;
  color: var(--ink-muted);
}

.data-notice{
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-elevated);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.data-notice h3{
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 1.1rem;
}
.data-notice p{ font-size: .98rem; }

/* =========================================================================
   Praktické informace - docket
   ========================================================================= */

.docket{
  border-top: var(--hairline);
  margin: 0;
}
.docket-row{
  display: grid;
  gap: .2rem 2rem;
  padding: 1rem 0;
  border-bottom: var(--hairline);
}
@media (min-width: 700px){
  .docket-row{ grid-template-columns: minmax(11rem, 18rem) 1fr; align-items: baseline; gap: 2rem; }
}
.docket-row dt{
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.docket-row dd{
  margin: 0;
  font-family: var(--serif);
  font-size: var(--step-0);
}

.practical-note{
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* =========================================================================
   Přihlášení
   ========================================================================= */

.signup-grid{
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px){
  .signup-grid{ grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.signup-card{
  border: var(--hairline);
  background: var(--paper-elevated);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
.signup-card.is-primary{
  border-color: var(--ink);
  background: var(--paper-elevated);
  box-shadow: 0 1px 0 0 var(--ink);
}

.signup-card h3{
  font-size: var(--step-2);
  margin: 0;
}
.signup-sub{
  color: var(--ink-muted);
  margin: -.75rem 0 0;
}

.steps{
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.1rem;
  margin: 0;
}
.steps li{
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .5rem;
  align-items: baseline;
  font-size: .98rem;
  line-height: 1.6;
}
.steps li::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.steps strong{ font-weight: 600; }

.signup-cta{ margin-top: auto; display: grid; gap: .85rem; }
.signup-cta .btn{ width: 100%; }
.microcopy{
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq{ border-top: var(--hairline); max-width: 56rem; }
.faq-item{ border-bottom: var(--hairline); }

.faq-q{ margin: 0; font-weight: inherit; }
.faq-btn{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.35;
}
.faq-btn:hover{ color: var(--ink-muted); }

.faq-icon{
  position: relative;
  flex: none;
  width: 14px; height: 14px;
  align-self: center;
}
.faq-icon::before,
.faq-icon::after{
  content: "";
  position: absolute;
  background: var(--ink-muted);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.faq-icon::before{ inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.faq-icon::after{ inset: 0 50% 0 auto; width: 1px; transform: translateX(50%); }
[aria-expanded="true"] .faq-icon::after{ opacity: 0; }

.faq-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--accordion-dur) var(--ease);
}
.faq-panel > div{
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s var(--accordion-dur);
}
.faq-item.is-open .faq-panel{ grid-template-rows: 1fr; }
.faq-item.is-open .faq-panel > div{ visibility: visible; transition-delay: 0s; }

.faq-answer{
  padding-bottom: 1.6rem;
  max-width: var(--measure);
  color: var(--ink-muted);
}

/* =========================================================================
   Final CTA
   ========================================================================= */

.final{
  text-align: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  overflow-x: clip;
}
.final-line{
  position: relative;
  display: inline-block;
  font-size: var(--step-3);
  line-height: 1.2;
  max-width: 18ch;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
  text-wrap: balance;
}
.final-line::after{
  content: attr(data-echo);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  color: var(--accent);
  opacity: .2;
  filter: blur(0.5px);
  transform: translateX(10px);
  pointer-events: none;
  user-select: none;
}
.final .cta-cluster{ justify-content: center; }

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer{
  border-top: var(--hairline);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.footer-grid{
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 800px){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
}
.footer-wordmark{
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: .18em;
  color: var(--ink);
  display: block;
  margin-bottom: 1rem;
}
.site-footer h2{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.site-footer ul{ list-style: none; display: grid; gap: .65rem; }
.site-footer a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-footer a:hover{ border-color: var(--ink); }
.footer-locked{ color: var(--ink-faint); }
.footer-bottom{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* =========================================================================
   Formuláře
   ========================================================================= */

.form-page{ padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }

.form-shell{
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 950px){
  .form-shell{ grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

.form-aside{
  border: var(--hairline);
  background: var(--paper-elevated);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
@media (max-width: 949px){ .form-aside{ position: static; } }
.form-aside h2{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.fieldset{
  border: 0;
  border-top: var(--hairline);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
}
.fieldset legend{
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 1rem 0 0;
}

.field{ margin-bottom: 1.5rem; max-width: 34rem; }
.field:last-child{ margin-bottom: 0; }

.field label,
.field .field-label{
  display: block;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.field .optional{
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
  margin-left: .5rem;
}
.field-help{
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: .45rem 0 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--paper-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
textarea{ min-height: 7rem; line-height: 1.6; resize: vertical; }
::placeholder{ color: var(--ink-faint); opacity: 1; }

input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
  background: var(--paper-elevated);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{ border-color: var(--stamp); border-width: 1.5px; }

input[disabled], textarea[disabled], select[disabled]{ opacity: .55; }

.choice{
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .85rem;
  align-items: start;
  padding: .65rem 0;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  cursor: pointer;
}
.choice input{
  width: 1.15rem; height: 1.15rem;
  margin: .25rem 0 0;
  accent-color: var(--ink);
  min-height: 0;
}
.choice-group{ display: grid; gap: .1rem; }
.choice-group .choice{ border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.choice-group .choice:last-child{ border-bottom: 0; }
.choice small{ display: block; color: var(--ink-muted); font-size: .82rem; margin-top: .2rem; }

.field-error{
  display: block;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--stamp);
  margin-top: .5rem;
}
.field-error:empty{ display: none; }

.form-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: var(--hairline);
}

.form-status{
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink-muted);
}
.form-status.is-error{ color: var(--stamp); }

.form-success{
  border: 1px solid var(--ink);
  background: var(--paper-elevated);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 40rem;
}
.form-success h2{ font-size: var(--step-2); margin: 0 0 1rem; }

.conditional{ margin-top: 1rem; }
.conditional[hidden]{ display: none; }

/* =========================================================================
   TBD markery + předspouštěcí lišta
   (autorská vrstva - před spuštěním webu odstranit / doplnit)
   ========================================================================= */

.tbd{
  font-family: var(--mono);
  font-size: .78em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 1px dashed color-mix(in srgb, var(--stamp) 45%, transparent);
  border-radius: var(--r-sm);
  padding: .1em .5em;
  white-space: nowrap;
  cursor: help;
}

.prelaunch{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.5;
}
.prelaunch .wrap{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  align-items: baseline;
  padding-block: .6rem;
}
.prelaunch strong{ letter-spacing: .14em; text-transform: uppercase; }
.prelaunch a{ color: var(--paper); }

/* =========================================================================
   Scroll reveal
   ========================================================================= */

.js-reveal .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
}
.js-reveal .reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

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

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero-title .title-ghost{
    animation: none;
    transform: translateX(6px);
  }

  .js-reveal .reveal{ opacity: 1; transform: none; }
}

/* =========================================================================
   Print - spis na papíře
   ========================================================================= */

@media print{
  /* na papír se web vrací do světlé polohy */
  :root{
    --paper: #fff; --paper-elevated: #fff; --paper-deep: #fff;
    --ink: #000; --ink-bright: #000; --ink-muted: #333; --ink-faint: #555;
    --rule: #bbb; --rule-strong: #888;
  }
  .site-header, .mobile-nav, .sticky-cta, .prelaunch, .scroll-cue, .case-file{ display: none !important; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  section{ padding-block: 1.5rem; break-inside: avoid; }
  .char-panel{ display: block !important; grid-template-rows: 1fr; }
  .char-panel > div{ visibility: visible !important; }
  .title-ghost{ display: none; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}