/* =========================================================
   Pastier AI — design tokens
   Aesthetic: editorial brand-building studio.
   Warm ink, paper cream, and the signature "Yellow Book" yellow.

   Sekce 1 je převzatá 1:1 z `src/styles.css` původního projektu.
   Sekce 2 níže jsou komponenty této stránky, postavené na stejných
   konvencích (mono verzálková tlačítka, rounded-2xl karty,
   max-w-6xl kontejner, py-20/py-28 sekce).
   ========================================================= */

/* =========================================================
   1. PŘEVZATO Z ORIGINÁLU
   ========================================================= */

:root {
  --ink: #141210;          /* charcoal background */
  --ink-soft: #1c1916;     /* off-black card surfaces */
  --ink-line: #2c2823;     /* hairlines on ink */
  --paper: #f2ede4;        /* cream text */
  --paper-dim: #ded7ca;    /* dimmed paper */
  --sand: #a29c92;         /* muted stone secondary text — 6.8:1 on ink */
  --sand-deep: #8a857c;    /* quiet tier: footer, meta, legal — 4.8:1 on ink-soft */
  --yellow: #fce903;       /* Robot Yellow, hlavní barva Darwin (DARWIN_colours.pdf) */
  --yellow-deep: #c8ba0d;  /* Robot Yellow, Odtieň Dark 1 */
  --yellow-light: #ffee51; /* Robot Yellow, Odtieň Light 1 — hover tlačítek */
  --clay: #c8502d;         /* rare hot accent — grafika a linky, ne text */
  --clay-text: #e08a63;    /* clay ve variantě, která projde na textu */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Rozměry odvozené z Tailwind tříd originálu */
  --wrap: 72rem;           /* max-w-6xl */
  --gutter: 1.25rem;       /* px-5 */
  --gutter-lg: 2rem;       /* sm:px-8 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* `height: auto` doplňuje to, co v originále dělal Tailwind preflight —
   bez něj by atribut height="1200" na portrétu natáhl hero do výšky. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

/* Atribut `hidden` musí přebít i třídy, které nastavují display
   (např. .consent { display: flex }) — jinak se skrytá pole zobrazí. */
[hidden] { display: none !important; }

code {
  font-family: var(--font-mono);
}

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

/* Povrchy, které kreslí prohlížeč, a přesto patří do designu. */
:root { color-scheme: dark; scrollbar-color: var(--ink-line) var(--ink); }
input, textarea { caret-color: var(--yellow); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border: 3px solid var(--ink);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sand-deep); }

/* Jeden fokusový prstenec pro celou stránku, ne jen pro .btn. */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Textové odkazy uvnitř odstavců — vlastní podtržení, ne výchozí. */
p a:not(.btn), li a:not(.btn), .credit__name a {
  text-decoration-color: color-mix(in srgb, var(--yellow) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color .25s ease;
}
p a:not(.btn):hover, li a:not(.btn):hover, .credit__name a:hover { text-decoration-color: var(--yellow); }

/* Display type — Fraunces at high optical size, tight and expressive */
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  letter-spacing: -0.02em;
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* Podpis stránky: druhá půlka nadpisu ve žluté kurzivě.
   Zavedeno v heru, odtud platí pro každý nadpis na stránce — místo
   mono verzálkových nadtitulků, které nadpisu ubíraly váhu. */
h1 em, h2 em, h3 em { font-style: italic; color: var(--yellow); }

/* Jediný mono verzálkový řádek, který na stránce zbyl: živý stav
   zkušebního provozu u agenta. Nese informaci, ne dekoraci. */
.agent-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin: 0;
}
.agent-status:empty { display: none; }

/* Paper texture / grain overlay — fixed, non-interactive */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Entrance choreography */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Sekce se neopakují stejným velkým nástupem jako hero — jen se usadí. */
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* The one orchestrated moment — the portrait's dots resolve on load */
@keyframes resolve {
  from { opacity: 0; filter: blur(16px) contrast(1.5); transform: scale(1.05); }
  to { opacity: 1; filter: blur(0) contrast(1); transform: scale(1); }
}
@keyframes dotsclear {
  from { opacity: 0.55; }
  to { opacity: 0; }
}

.rise {
  opacity: 0;
  animation: rise 0.9s var(--ease) forwards;
}
.caret::after {
  content: "▍";
  color: var(--yellow);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}

/* ─────────────────────────────────────────────────────────────
   Halftone motif — "a person made of data points".
   The hero portrait is the loud instance; everything below whispers.
   ───────────────────────────────────────────────────────────── */

/* Hero portrait: dots resolve from scattered to formed on load. */
.portrait-resolve {
  animation: resolve 1.5s var(--ease) 0.15s both;
}
/* Vlevo se portrét rozpadá do bodů sám, ostatní tři hrany ale končily
   ostrým obdélníkem nalepeným na pozadí. Měkký okraj je dorovná. */
.portrait-resolve {
  -webkit-mask-image:
    linear-gradient(to top, transparent, #000 9%),
    linear-gradient(to left, transparent, #000 8%),
    linear-gradient(to bottom, transparent, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, transparent, #000 9%),
    linear-gradient(to left, transparent, #000 8%),
    linear-gradient(to bottom, transparent, #000 7%);
  mask-composite: intersect;
}
/* An overlay of charcoal dots sitting over the portrait, clearing on load. */
.portrait-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(circle, var(--ink) 1.6px, transparent 2.1px);
  background-size: 7px 7px;
  animation: dotsclear 1.5s ease-out 0.15s both;
}

/* Section dividers rendered as a single sparse row of dots. */
.dot-divider {
  height: 3px;
  background-image: radial-gradient(circle, var(--ink-line) 1.4px, transparent 1.8px);
  background-size: 18px 100%;
  background-position: center;
  background-repeat: repeat-x;
}

/* Cards reveal a faint halftone texture in one corner on hover. */
.halftone-card { position: relative; overflow: hidden; }
.halftone-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--yellow) 55%, transparent) 1px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black, transparent 62%);
  mask-image: radial-gradient(circle at 100% 0%, black, transparent 62%);
}
.halftone-card:hover::after { opacity: 0.22; }


/* =========================================================
   2. KOMPONENTY TÉTO STRÁNKY
   ========================================================= */

/* ---------- Kontejner a sekce ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) { .wrap { padding-inline: var(--gutter-lg); } }

.section { padding-block: 5rem; position: relative; }
@media (min-width: 640px) { .section { padding-block: 7rem; } }

/* Dvě sekce na stejném podkladu za sebou nepotřebují dvojitý odstup —
   pás (.section--band) se odděluje sám vlastním pozadím a linkou. */
.section + .section:not(.section--band) { padding-top: 2.5rem; }

/* Střídavé pásy — bg ink-soft + hairline nahoře i dole */
.section--band {
  background: var(--ink-soft);
  border-block: 1px solid var(--ink-line);
}

.section__head { max-width: 42rem; }
.section__head h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.0;
}
/* Vlasová linka pod nadpisem drží sekci pohromadě i bez nadtitulku. */
.section__head h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1.5rem;
  background: var(--yellow);
}
.section__head p {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: var(--sand);
  line-height: 1.7;
}

/* ---------- Tlačítka ---------- */
/* Mono, verzálky, široký tracking — přesně jako v originále. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 1rem; height: 1rem; flex: none; }

.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--yellow-light); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--ink-line); }
.btn--ghost:hover { border-color: var(--sand); transform: translateY(-2px); }

.btn--sm { padding: 0.5625rem 1rem; font-size: 0.72rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Hlavička ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--ink-line);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(12px);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
}

.logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.logo__mark {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.375rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
}
.logo__text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.logo__text span { color: var(--yellow); }

/* Plná navigace až od 1100 px. Pod tím se vedle vlajek a přihlášeného
   účtu nevejde a odkazy se lámaly na dva řádky. */
.header__nav { display: none; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
@media (min-width: 1100px) { .header__nav { display: flex; } }
.header__nav a, .menu__panel a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.header__nav a:hover, .menu__panel a:hover { color: var(--paper); }

/* Mobilní menu — <details>, takže funguje i bez JS a jde ovládat klávesnicí. */
.menu { position: static; }
@media (min-width: 1100px) { .menu { display: none; } }

.menu__btn {
  display: grid;
  place-items: center;
  width: 2.375rem; height: 2.375rem;
  border: 1px solid var(--ink-line);
  border-radius: 0.625rem;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { border-color: var(--sand-deep); }
.menu[open] .menu__btn { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.menu__btn svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 2; }
.menu__btn .menu__ico--close,
.menu[open] .menu__btn .menu__ico--open { display: none; }
.menu[open] .menu__btn .menu__ico--close { display: block; }

.menu__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  gap: 0.25rem;
  padding: 0.625rem;
  border: 1px solid var(--ink-line);
  border-radius: 0.875rem;
  background: var(--ink-soft);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .95);
  animation: settle 0.28s var(--ease) both;
}
.menu__panel a {
  padding: 0.6875rem 0.75rem;
  border-radius: 0.5rem;
  transition: color .2s ease, background-color .2s ease;
}
.menu__panel a:hover { background: color-mix(in srgb, var(--paper) 5%, transparent); }

.header__auth { display: flex; align-items: center; gap: 0.75rem; }

.user-chip {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
}
.user-chip__avatar {
  display: grid; place-items: center;
  width: 1.625rem; height: 1.625rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 600 0.75rem/1 var(--font-body);
  flex: none;
}
.user-chip__mail {
  max-width: 10rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip button {
  background: none; border: 0; cursor: pointer;
  padding: 0.375rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sand);
  transition: color .2s;
}
.user-chip button:hover { color: var(--paper); }
/* E-mail jen tam, kde se vedle navigace opravdu vejde. Jinde zůstane
   písmeno a celá adresa v popisku (title nastavuje app.js). */
@media (max-width: 1279px) { .user-chip__mail { display: none; } }
@media (min-width: 640px) and (max-width: 1099px) { .user-chip__mail { display: block; } }
@media (max-width: 1279px) { .user-chip { padding-left: 0.375rem; } }
@media (min-width: 640px) and (max-width: 1099px) { .user-chip { padding-left: 0.875rem; } }

/* ---------- Oznámení (oznam.js) ---------- */

.oznam {
  position: fixed;
  top: 4.75rem;
  left: 50%;
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.625rem 0.5rem 0.625rem 0.75rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 2px 6px -2px rgba(0, 0, 0, .6);
  color: var(--paper);
  opacity: 0;
  transform: translate(-50%, -0.75rem) scale(.98);
  transition: opacity .22s ease, transform .45s var(--ease);
}
.oznam.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.oznam[hidden] { display: none; }

.oznam__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
}
.oznam[data-druh="info"] .oznam__ico {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  color: var(--paper);
}
.oznam__ico svg, .oznam__close svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.oznam__ico svg { display: none; }
.oznam[data-druh="ok"] .oznam__ico--ok,
.oznam[data-druh="info"] .oznam__ico--info { display: block; }

.oznam__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.oznam__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem; height: 2rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sand);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.oznam__close:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 7%, transparent); }

@media (max-width: 520px) {
  .oznam { border-radius: 1rem; width: calc(100vw - 2 * var(--gutter)); }
}
@media (prefers-reduced-motion: reduce) {
  .oznam, .oznam.is-in { transform: translate(-50%, 0); transition: opacity .2s ease; }
}

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero__glow {
  position: absolute;
  top: -10rem; right: -10rem;
  width: 520px; height: 520px;
  border-radius: 50%;
  opacity: .14;
  filter: blur(48px);
  background: radial-gradient(circle, var(--yellow) 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: 2.5rem;
  padding-block: 4rem;
}
@media (min-width: 640px) { .hero__inner { padding-block: 6rem 4rem; } }
@media (min-width: 1024px) {
  .hero__inner {
    /* Stejný poměr jako originál: lg:grid-cols-[1.05fr_0.95fr] */
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 6rem;
  }
}

.hero h1 {
  margin-top: 1.25rem;
  /* O 30 % menší než původní clamp(2.6rem, 6.4vw, 4.8rem) — nadpis
     zabíral přes hlasové CTA příliš mnoho výšky na prvním výdechu. */
  font-size: clamp(1.82rem, 4.48vw, 3.36rem);
  line-height: 0.98;
}
.hero h1 em { font-style: italic; color: var(--yellow); display: block; }

.hero__lede {
  margin-top: 1.75rem;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.625;
  color: var(--sand);
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.hero__note {
  margin-top: 1.25rem;
  max-width: 30rem;
  line-height: 1.7;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--yellow-deep);
}
.hero__note .dot {
  display: inline-block;
  width: 0.375rem; height: 0.375rem;
  margin-right: 0.5rem;
  vertical-align: 0.15em;
  border-radius: 999px;
  background: var(--yellow);
}

/* Jméno produktu nad nadpisem. Nadpis sám o sobě neříká, čí hlas to je,
   a logo v hlavičce je na to moc daleko. */
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--yellow);
}
.hero__kicker span { color: var(--yellow-deep); }

/* Tři nároky proti třem námitkám. Vlasovka vlevo je drží jako celek,
   aby se nečetly jako odrážky funkcí. */
.hero__claims {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0 0 0 1.125rem;
  max-width: 34rem;
  border-left: 2px solid color-mix(in srgb, var(--yellow) 45%, transparent);
  display: grid;
  gap: 0.625rem;
}
.hero__claims li {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--sand);
}
.hero__claims strong { color: var(--paper); font-weight: 600; }

/* Portrét — hlasitá instance halftone motivu.
   Velikost i přesah doprava jako v originále (tam `lg:right-[-8%]`). */
.hero__portrait {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero__portrait {
    max-width: none;
    margin-inline: 0;
    margin-right: -8%;
  }
}

/* Světlo za portrétem, ať nesedí na pozadí jako nalepený obdélník */
.hero__portrait::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 64%);
  filter: blur(34px);
}

/* ---------- Pás s témami pod herom ---------- */
/* Používá `marquee` z originálu, které se doteď nikde neuplatnilo. */

.topics {
  border-block: 1px solid var(--ink-line);
  background: var(--ink-soft);
  overflow: hidden;
  padding-block: 1.125rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.topics__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 42s) linear infinite;
}
.topics:hover .topics__track { animation-play-state: paused; }

.topics__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--sand-deep);
  white-space: nowrap;
}
.topics__group b { font-weight: 400; color: var(--paper-dim); }
.topics__group i {
  width: 0.3125rem; height: 0.3125rem;
  border-radius: 999px;
  background: var(--yellow);
  opacity: .55;
  flex: none;
}

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

/* ---------- Tři způsoby: redakční výpis, ne tři stejné boxy ---------- */
/* Řádky oddělené vlasovkou, ne krabice. Nadpis nese váhu, popis stojí
   vedle něj, akce je vpravo. Hover rozsvítí linku nad řádkem. */

.ways {
  margin-top: 4rem;
  border-top: 1px solid var(--ink-line);
}

.way {
  position: relative;
  display: grid;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ink-line);
  text-decoration: none;
  color: inherit;
  transition: background-color .35s ease;
}
@media (min-width: 900px) {
  .way {
    grid-template-columns: 2.5rem minmax(0, 17rem) minmax(0, 1fr) auto;
    gap: 0 2.5rem;
    align-items: center;
    padding: 2.25rem 0;
  }
}

/* Žlutá linka, která na hoveru přejede přes spodní vlasovku řádku. */
.way::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.way:hover::after,
.way:focus-visible::after { transform: scaleX(1); }

.way:hover { background: color-mix(in srgb, var(--paper) 2.5%, transparent); }
.way:focus-visible { outline-offset: -2px; }

.way__icon {
  color: var(--yellow);
  transition: transform .45s var(--ease);
}
.way__icon svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.way:hover .way__icon { transform: translateY(-3px) rotate(-6deg); }

.way__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
  transition: color .3s ease;
}
.way:hover .way__title { color: var(--yellow); }

.way__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sand);
  max-width: 34rem;
}

.way__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow-deep);
  transition: color .3s ease;
}
.way:hover .way__go { color: var(--yellow); }
.way__go svg { width: 0.875rem; height: 0.875rem; transition: transform .35s var(--ease); }
.way:hover .way__go svg { transform: translate(3px, -3px); }

/* Na mobilu jde ikona vedle nadpisu a akce na vlastní řádek. */
@media (max-width: 899px) {
  .way__icon { display: none; }
  .way__go { margin-top: 0.875rem; }
}

/* ---------- Vstupní okno ---------- */
/* První věc, kterou má člověk udělat, musí být vidět bez hledání.
   Témata nabízí stránka, ne agent — v pilotu odcházeli lidé právě
   z rozhovoru otevřeného nabídkou témat. Klikne si je proto sám. */

.starter {
  margin-top: 3rem;
  border: 1px solid var(--ink-line);
  border-radius: 1.25rem;
  background: var(--ink-soft);
  padding: 1.5rem;
}
@media (min-width: 640px) { .starter { padding: 2rem; } }

.starter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 720px) { .starter__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.starter__list a {
  display: block;
  height: 100%;
  border: 1px solid var(--ink-line);
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--paper-dim);
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease, transform .25s ease, background-color .25s ease;
}
.starter__list a:hover,
.starter__list a:focus-visible {
  border-color: color-mix(in srgb, var(--yellow) 55%, transparent);
  background: color-mix(in srgb, var(--yellow) 5%, transparent);
  color: var(--paper);
  transform: translateY(-2px);
}

/* Řádek „napiš to vlastními slovy". Vypadá jako vstupní pole schválně:
   psaní má být vidět jako rovnocenná volba, ne jako schovaná ikonka. */
.starter__own {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.starter__field {
  flex: 1 1 16rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink);
  padding: 0.875rem 1.25rem;
  font-size: 0.95rem;
  color: var(--sand);
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.starter__field:hover, .starter__field:focus-visible { border-color: var(--sand); color: var(--paper-dim); }
.starter__field svg { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--yellow-deep); }

.starter__alt {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--sand-deep);
}
.starter__alt strong { color: var(--sand); font-weight: 600; }

/* ---------- Kroky rozhovoru ---------- */
/* Číslo v mono, text vedle. Řádky oddělené vlasovkou, stejná logika
   jako tři způsoby — hodnota je v celém rozhovoru, ne v jedné odpovědi,
   takže se to čte jako průběh, ne jako výčet funkcí. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--ink-line);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-dim);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--yellow-deep);
}

/* Podnadpis uvnitř sekce — nese stejnou váhu jako hlava sekce,
   jen o stupeň tišší, aby v jedné sekci mohly stát dva bloky. */
.section__head--sub { margin-top: 4.5rem; }
.section__head--sub h3 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.05;
}
.section__head--sub h3::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 1.125rem;
  background: var(--yellow);
}
.section__head--sub p { margin-top: 1.125rem; max-width: 34rem; color: var(--sand); line-height: 1.7; }

/* ---------- Citáty zakladatelů ---------- */

.quotes {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote {
  margin: 0;
  border: 1px solid var(--ink-line);
  border-radius: 1rem;
  background: var(--ink);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.45;
  color: var(--paper);
}
.quote__who {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.quote__name { color: var(--yellow-deep); }
.quote__note { color: var(--sand-deep); }

/* ---------- Pre koho to nie je ---------- */
/* Odstavce, ne odrážky s fajfkami: každý řádek je celá námitka,
   a fajfka by u vylučovacího seznamu mluvila proti obsahu. */

.nots {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
}
.nots li {
  position: relative;
  padding: 1.375rem 0 1.375rem 1.75rem;
  border-bottom: 1px solid var(--ink-line);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--paper-dim);
  max-width: 52rem;
}
.nots li:first-child { border-top: 1px solid var(--ink-line); }
.nots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.95rem;
  width: 0.75rem;
  height: 2px;
  background: var(--clay);
}

/* ---------- Upload / killer sekce ---------- */

.upload__layout {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}
@media (min-width: 1024px) {
  .upload__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 3.5rem; }
}

.upload__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.upload__list li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.92rem;
  line-height: 1.625;
  color: var(--sand);
}
.upload__list strong { color: var(--paper); font-weight: 600; }
.upload__list li::before {
  content: "";
  flex: none;
  width: 0.375rem; height: 0.375rem;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: var(--yellow);
}

.hint {
  margin-top: 1.75rem;
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem;
  border: 1px dashed var(--ink-line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--yellow) 5%, transparent);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--sand);
}
.hint strong { color: var(--paper-dim); font-weight: 600; }
.hint svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; stroke: var(--yellow); fill: none; stroke-width: 1.8; }

/* Desktopové okno */

.browser {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: 1rem;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .95);
}

/* Světlo za mockupem, ať sekce nepůsobí plochá */
.upload__layout > .browser::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 60%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 100%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 68%);
  filter: blur(40px);
}

.browser__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.875rem;
  border-bottom: 1px solid var(--ink-line);
}
.browser__dots { display: flex; gap: 0.375rem; }
.browser__dots i { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--ink-line); display: block; }
.browser__url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.3rem 0.625rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sand-deep);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.browser__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }

.file-chip {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 28%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--yellow) 7%, transparent);
}
.file-chip svg { width: 1.25rem; height: 1.25rem; stroke: var(--yellow); fill: none; stroke-width: 1.8; flex: none; }
.file-chip__name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--paper); }
.file-chip__meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--sand); margin-top: 0.2rem; }
.file-chip__state {
  margin-left: auto; flex: none;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.bubble { border-radius: 0.75rem; padding: 1rem 1.125rem; font-size: 0.92rem; line-height: 1.625; }
.bubble__who {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand);
}
.bubble--you { border: 1px solid var(--ink-line); background: color-mix(in srgb, var(--paper) 4%, transparent); }
.bubble--ai  { border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent); background: color-mix(in srgb, var(--yellow) 6%, transparent); }
.bubble--ai .bubble__who { color: var(--yellow-deep); }
.bubble p + p { margin-top: 0.7rem; }

/* ---------- Agent / hovor ---------- */

.agent-panel {
  border: 1px solid var(--ink-line);
  border-radius: 1.5rem;
  background: var(--ink-soft);
  padding: 2rem;
  text-align: center;
}
@media (min-width: 640px) { .agent-panel { padding: 3rem; } }

.agent-panel h3 { margin-top: 1rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.06; }

/* Odstavec je uvnitř .agent-locked / .agent-live, ne přímo v panelu.
   S `> p` se omezení šířky neuplatnilo a řádek se táhl přes celý panel. */
.agent-panel p:not(.eyebrow) {
  margin-top: 1rem;
  max-width: 34rem;
  margin-inline: auto;
  color: var(--sand);
  line-height: 1.625;
}
.agent-panel .btn { margin-top: 1.75rem; }

/* Mikrofon nad nadpisem, ať panel není jen text v prázdné ploše */
.agent-panel__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  position: relative;
}
.agent-panel__icon::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}
.agent-panel__icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--yellow); fill: none; stroke-width: 1.8; }

.agent-live { display: none; }
.is-unlocked .agent-live { display: block; }
.is-unlocked .agent-locked { display: none; }

.notice {
  margin: 1.75rem auto 0;
  max-width: 40rem;
  display: flex; gap: 0.75rem; align-items: flex-start;
  text-align: left;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--clay) 28%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--clay) 8%, transparent);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--sand);
}
.notice strong { color: var(--clay-text); font-weight: 600; }
.notice svg { width: 1.0625rem; height: 1.0625rem; flex: none; margin-top: 0.125rem; stroke: var(--clay); fill: none; stroke-width: 1.8; }

/* ---------- Zkušební provoz ---------- */

.free {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 1.5rem;
  background: var(--ink-soft);
  padding: 2rem;
}
@media (min-width: 640px) { .free { padding: 3rem; } }

.free__glow {
  position: absolute;
  bottom: -8rem; left: -6rem;
  width: 20rem; height: 20rem;
  border-radius: 50%;
  opacity: .2;
  filter: blur(48px);
  background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  pointer-events: none;
}

.free__layout { position: relative; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .free__layout { grid-template-columns: 1fr 1fr; align-items: center; } }

.free h2 { margin-top: 1rem; font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.02; }
.free p { margin-top: 1rem; color: var(--sand); line-height: 1.625; }

.free__facts { list-style: none; margin: 0; padding: 0; display: grid; }
.free__facts li {
  display: flex; gap: 0.875rem; align-items: center;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
.free__facts li:first-child { border-top: 1px solid var(--ink-line); }
.free__facts svg { width: 1.0625rem; height: 1.0625rem; flex: none; stroke: var(--yellow); fill: none; stroke-width: 2.2; }

/* ---------- Credits ---------- */
/* Hairline mřížka: gap 1px na ink-line pozadí, jako Capabilities v originále. */

.credits__grid {
  display: grid;
  gap: 1px;
  margin-top: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 1rem;
  background: var(--ink-line);
}
@media (min-width: 640px) { .credits__grid { grid-template-columns: repeat(2, 1fr); } }

.credit { background: var(--ink); padding: 1.75rem; }
.credit__role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--yellow-deep);
}
.credit__name { font-family: var(--font-display); font-size: 1.25rem; margin-top: 0.625rem; color: var(--paper); }
.credit__note { margin-top: 0.375rem; font-size: 0.85rem; line-height: 1.6; color: var(--sand); }

/* ---------- Výměna textů při přepnutí jazyka ---------- */
/* Slovenská a anglická věta mají jinou délku, takže při okamžité
   výměně obsah poskočí. Texty se proto na okamžik prolnou do
   průhledna, vymění se ve chvíli, kdy je nikdo nevidí, a naběhnou
   zpět. Řídí to třída `lang-swap` na <html> z i18n.js.

   Vázané na `.js`, aby bez JavaScriptu nezůstal obsah neviditelný. */

/* Prolíná se celá stránka, ne jen věty. Když se hýbou samotné texty
   a obrázky, ikony i okno agenta zůstanou stát, působí to roztříštěně.
   Takhle je to jeden pohyb.

   Během výměny stránka nereaguje na klik, aby se nedalo trefit do
   něčeho, co není vidět. */

.js body { transition: opacity 0.2s var(--ease); }

.js.lang-swap body {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .js body { transition: none; }
  .js.lang-swap body { opacity: 1; }
}

/* ---------- Přepínač jazyka ---------- */
/* Dvě vlajky vedle sebe. Nevybraná je odbarvená a ztlumená, takže
   v hlavičce nekřičí; vybraná má plné barvy a žlutý prstenec.
   Barva sama o sobě stav nenese — drží ho `aria-pressed`. */

.lang { display: inline-flex; align-items: center; gap: 0.4375rem; }

.lang__btn {
  display: block;
  width: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  background: none;
  line-height: 0;
  cursor: pointer;
  opacity: 0.45;
  filter: grayscale(1) contrast(0.9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent);
  transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease, transform .25s ease;
}
.lang__btn:hover { opacity: 0.9; filter: none; transform: translateY(-1px); }
.lang__btn.is-on {
  opacity: 1;
  filter: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--yellow) 80%, transparent);
}

/* Vlajka nesmí být cílem kliknutí, jinak by `closest` musel řešit
   ještě <use> uvnitř SVG. */
.lang__flag { display: block; width: 100%; height: auto; pointer-events: none; }

/* Sprite se symboly. Musí být v layoutu (ne display:none), aby
   na něj <use> spolehlivě dosáhl. */
.flag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Dokud je vidět mobilní menu, přepínač sedí v něm — v hlavičce už
   na něj vedle tlačítka Prihlásiť sa není místo. */
.lang--menu {
  margin-top: 0.25rem;
  padding: 0.6875rem 0.75rem;
  border-top: 1px solid var(--ink-line);
}
@media (max-width: 1099px) {
  /* Na hlavní stránce se přepínač schová do menu. Právní podstránky
     ale žádné menu nemají, takže ten jejich musí zůstat vidět. */
  .header__auth .lang:not(.lang--legal) { display: none; }
}
@media (min-width: 1100px) {
  .lang--menu { display: none; }
}

/* Přepínač na právních podstránkách. Nepřepisuje texty — každý jazyk
   má vlastní soubor, takže je to dvojice odkazů a aktuální jazyk je
   jen nekliknutelný <span>. Bez JS by vlajky neměly odkud vzít symbol,
   tak se celý přepínač schová. */
.lang--legal span.lang__btn { cursor: default; }
html:not(.js) .lang--legal { display: none; }

/* Na úzkém displeji se vedle vlajek nevejde celé „Späť na stránku",
   tak z něj zbyde jen „Späť". */
@media (max-width: 559px) { .btn__wide { display: none; } }

/* ---------- Přihlášení nad stránkou ---------- */
/* Stejná karta jako na samostatné stránce, jen posazená nad obsah.
   Musí být i nad widgetem agenta, který se sám kreslí na 1000. */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auth-modal__veil {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(8px);
  animation: fadein .25s ease both;
}
.auth-modal .auth-card {
  position: relative;
  animation: rise .45s var(--ease) both;
}
.auth-modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink);
  color: var(--sand);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.auth-modal__close:hover { color: var(--paper); border-color: var(--sand-deep); }
.auth-modal__close svg { width: 0.875rem; height: 0.875rem; stroke-width: 2; }

/* Karta v modálu nemá odkaz zpět, tak jí chybí jeho odsazení. */
.auth-modal .auth-card > .logo { margin-top: 0.25rem; }

/* Pozadí se pod otevřenou kartou neposouvá. */
body.is-modal { overflow: hidden; }

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Patička ---------- */

.footer { border-top: 1px solid var(--ink-line); }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2.5rem;
}
@media (min-width: 900px) { .footer__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; } }

.footer__disclaimer { max-width: 34rem; font-size: 0.8rem; line-height: 1.625; color: var(--sand-deep); }
.footer__disclaimer strong { color: var(--sand); font-weight: 600; }
.footer__disclaimer p + p { margin-top: 0.75rem; }

.footer__links { display: flex; flex-direction: column; gap: 0.625rem; }
.footer__links a {
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand-deep);
  text-decoration: none;
  transition: color .25s ease;
}
.footer__links a:hover { color: var(--paper); }

.footer__copy {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-deep);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid var(--ink-line);
  padding-block: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sand-deep);
  text-decoration: none;
  transition: color .25s ease;
}
.footer__bottom:hover { color: var(--paper); }
.footer__bottom svg { width: 0.875rem; height: 0.875rem; transition: transform .3s var(--ease); }
.footer__bottom:hover svg { transform: translateY(-2px); }

/* ---------- Přihlašovací stránka ---------- */

.auth-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.auth-page__glow {
  position: absolute;
  top: -12rem; left: 50%;
  transform: translateX(-50%);
  width: 40rem; height: 40rem;
  border-radius: 50%;
  opacity: .12;
  filter: blur(48px);
  background: radial-gradient(circle, var(--yellow) 0%, transparent 68%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--ink-line);
  border-radius: 1.5rem;
  background: var(--ink-soft);
}

.auth-card h1, .auth-card h2 { font-size: 2rem; line-height: 1.06; margin-top: 0.875rem; }
.auth-card__sub { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.6; color: var(--sand); }

.auth-back {
  display: flex; align-items: center; gap: 0.5rem;
  width: fit-content;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand-deep);
  text-decoration: none;
  transition: color .25s ease;
}
.auth-back:hover { color: var(--paper); }
.auth-back svg { width: 0.875rem; height: 0.875rem; }

.auth-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sand-deep);
}

/* ---------- Zámek na widgetu agenta ---------- */

/* Zamčený agent zůstane vidět, jen se přes něj položí mlhavá vrstva
   s výzvou k přihlášení. Rozměry vrstvy dopočítává app.js podle toho,
   jak je widget zrovna velký (umí se zvětšit i zmenšit). */

/* Zamčeno = widget vůbec není v DOM (ID agenta vydá až server po ověření).
   V jeho rohu proto stojí naše karta. Za ní je rozostřený obrys bubliny,
   aby bylo poznat, že tam agent patří, a roh nepůsobil prázdně. */

.agent-lock {
  position: fixed;
  /* Widget se sám vykresluje na z-index 1000, musíme být nad ním. */
  z-index: 1001;
  display: none;
  flex-direction: row;
  align-items: center;
  /* Obsah zarovnaný doleva. Na střed ikona plavala uprostřed karty
     a vpravo zůstávala díra. Ikona teď drží levou hranu, šipka pravou. */
  justify-content: flex-start;
  gap: 0.8125rem;
  padding: 0.8125rem 1rem;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  background:
    radial-gradient(130% 160% at 0% 50%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 55%),
    color-mix(in srgb, var(--ink) 88%, transparent);
  /* Karta leží nad obsahem stránky, tak ať je za ní znát rozostření
     a nespléhá se jen na tmavé pozadí. */
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .95),
              inset 0 1px 0 0 color-mix(in srgb, var(--paper) 9%, transparent);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .35s var(--ease),
              transform .35s var(--ease), background-color .3s ease;

  /* Náhradní pozice, než ji app.js dopočítá podle widgetu */
  right: 2rem;
  bottom: 2rem;
  width: 20.25rem;
  height: 4.25rem;
}
.agent-lock.is-visible { display: flex; }

/* Stejné zvednutí, jaké na téhle stránce dělají tlačítka. */
.agent-lock:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--yellow) 70%, transparent);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .95),
              0 0 0 4px color-mix(in srgb, var(--yellow) 12%, transparent);
}
.agent-lock:active { transform: translateY(0); transition-duration: .1s; }

/* Teplé světlo pod kartou. Dřív to byl rozostřený obrys bubliny, ale
   pod kartou z něj byla jen šmouha vedle ikony. Teď je to čistá záře,
   která kartu podloží a roh nenechá prázdný. */
.agent-lock__ghost {
  position: fixed;
  z-index: 1000;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 21.75rem;
  height: 5.75rem;
  display: none;
  border-radius: 2rem;
  background: radial-gradient(60% 70% at 20% 50%,
              color-mix(in srgb, var(--yellow) 28%, transparent), transparent 70%);
  filter: blur(22px);
  opacity: .75;
  pointer-events: none;
}
.agent-lock.is-visible ~ .agent-lock__ghost,
.agent-lock__ghost.is-visible { display: block; }

@media (max-width: 520px) {
  .agent-lock__ghost { right: 0.75rem; bottom: 0.75rem; width: calc(100vw - 1.5rem); max-width: 20.75rem; }
}

/* Světlo, které jednou za čas přejede po kartě, ať to na sebe upozorní */
.agent-lock::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -55%;
  width: 45%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--yellow) 14%, transparent), transparent);
  transform: skewX(-18deg);
  /* Delší prodleva než dřív. Karta má upozornit, ne blikat. */
  animation: prejezd 7s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes prejezd {
  0%, 70% { left: -55%; }
  92%, 100% { left: 125%; }
}

.agent-lock__icon {
  position: relative;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.agent-lock:hover .agent-lock__icon { transform: scale(1.06); }
.agent-lock__icon svg { width: 1rem; height: 1rem; stroke: var(--ink); fill: none; stroke-width: 2.2; }

/* Tepající kroužek kolem ikony */
.agent-lock__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow) 55%, transparent);
  animation: pulse 2.8s infinite;
}

.agent-lock__text { display: grid; gap: 0.25rem; text-align: left; min-width: 0; }
.agent-lock__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
/* Podtitul musí ustoupit. Dřív měl stejnou velikost i skoro stejnou
   barvu jako titulek, takže se o pozornost prali dva řádky. */
.agent-lock__sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--sand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Šipka drží pravou hranu a při najetí popojede — jediné, co kartě
   chybělo, aby bylo na první pohled znát, že je to odkaz. */
.agent-lock__arrow {
  flex: none;
  margin-left: auto;
  width: 1.0625rem;
  height: 1.0625rem;
  color: color-mix(in srgb, var(--yellow) 70%, transparent);
  transition: transform .35s var(--ease), color .3s ease;
}
.agent-lock:hover .agent-lock__arrow { transform: translateX(3px); color: var(--yellow); }

/* Nízká vrstva: druhý řádek se nevejde */
.agent-lock--nizka { padding: 0.5rem 0.875rem; gap: 0.625rem; }
.agent-lock--nizka .agent-lock__icon { width: 1.875rem; height: 1.875rem; }
.agent-lock--nizka .agent-lock__sub { display: none; }

@media (max-width: 520px) {
  .agent-lock__title { font-size: 0.72rem; letter-spacing: 0.08em; }
  .agent-lock__sub { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-lock::after, .agent-lock__icon::before { animation: none; }
  .agent-lock::after { display: none; }
  .agent-lock:hover { transform: none; }
  .agent-lock:hover .agent-lock__arrow { transform: none; }
}

/* ---------- Formulářové prvky ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  max-height: 92svh;
  overflow-y: auto;
  padding: 2rem 1.875rem 1.75rem;
  border: 1px solid var(--ink-line);
  border-radius: 1.5rem;
  background: var(--ink-soft);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.modal.is-open .modal__card { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: 1.125rem; right: 1.125rem;
  background: none; border: 0;
  padding: 0.375rem;
  font-size: 1.375rem; line-height: 1;
  color: var(--sand);
  cursor: pointer;
  transition: color .2s;
}
.modal__close:hover { color: var(--paper); }

.modal__card h3 { font-size: 1.75rem; line-height: 1.1; }
.modal__card > p { margin-top: 0.625rem; font-size: 0.9rem; line-height: 1.6; color: var(--sand); }

.divider {
  display: flex; align-items: center; gap: 0.875rem;
  margin: 1.375rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sand-deep);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--ink-line); }

.field { margin-top: 0.875rem; }
.field label {
  display: block;
  margin-bottom: 0.4375rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand);
}
.field input {
  width: 100%;
  padding: 0.8rem 0.9375rem;
  border: 1px solid var(--ink-line);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  color: var(--paper);
  font: 400 0.95rem/1.3 var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 14%, transparent);
}

/* Pole, které si člověk vyplnil špatně. Červený rám je jen doprovod,
   co je špatně říká věta pod polem. */
.field input.is-bad {
  border-color: color-mix(in srgb, var(--clay) 55%, transparent);
}
.field input.is-bad:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent);
}

/* Věta pod polem. Dokud je prázdná, nezabírá místo. */
.field__hint {
  margin-top: 0.4375rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--sand);
}
.field__hint:empty { display: none; }
.field__hint.is-bad { color: var(--clay-text); }
.field__hint button {
  background: none; border: 0; padding: 0;
  color: var(--yellow-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Heslo: oko a ukazatel síly ---------- */

.field__wrap { position: relative; }
.field__wrap input { padding-right: 2.875rem; }

.field__eye {
  position: absolute;
  top: 50%; right: 0.4375rem;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.4375rem;
  background: none;
  color: var(--sand-deep);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.field__eye:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 7%, transparent); }
.field__eye svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 1.8; }
.field__eye .field__eye-off,
.field__eye[aria-pressed="true"] .field__eye-on { display: none; }
.field__eye[aria-pressed="true"] .field__eye-off { display: block; }

/* Čtyři dílky. Kolik jich svítí a jakou barvou, řídí data-score
   na .pwd — od hliněné po plnou žlutou. */
.pwd { margin-top: 0.6875rem; }

.pwd__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.pwd__bars i {
  height: 0.1875rem;
  border-radius: 999px;
  background: var(--ink-line);
  transition: background-color .3s ease;
}

.pwd[data-score="1"] .pwd__bars i:nth-child(-n+1),
.pwd[data-score="2"] .pwd__bars i:nth-child(-n+2),
.pwd[data-score="3"] .pwd__bars i:nth-child(-n+3),
.pwd[data-score="4"] .pwd__bars i { background: var(--pwd-tone); }

.pwd[data-score="0"] { --pwd-tone: var(--clay); }
.pwd[data-score="1"] { --pwd-tone: var(--clay); }
.pwd[data-score="2"] { --pwd-tone: #d98324; }
.pwd[data-score="3"] { --pwd-tone: var(--yellow-deep); }
.pwd[data-score="4"] { --pwd-tone: var(--yellow); }

/* Skóre 0 nemá co rozsvítit, tak aspoň první dílek zčervená. */
.pwd[data-score="0"] .pwd__bars i:first-child { background: var(--clay); }

.pwd__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-top: 0.4375rem;
  font-size: 0.76rem;
  line-height: 1.45;
}
.pwd__score {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pwd-tone, var(--sand-deep));
}
.pwd__hint { color: var(--sand); }

/* Věta pod tlačítkem Google. */
.google-note {
  margin-top: 0.6875rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--sand-deep);
  text-align: center;
}

/* Upozornenie a súhlas nad tlačítkem. Zaškrtávátko tu bylo dřív;
   souhlas dává samo odeslání formuláře, takže text musí být vidět
   u tlačítka, ne schovaný za odkazem. */
.consent {
  margin-top: 1.25rem;
  padding: 0.8125rem 0.9375rem;
  border: 1px solid color-mix(in srgb, var(--sand) 22%, transparent);
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--sand) 7%, transparent);
  font-size: 0.775rem;
  line-height: 1.6;
  color: var(--sand);
}
.consent strong { color: var(--paper-dim); font-weight: 600; }
.consent a { color: var(--paper-dim); }

.btn--google { background: var(--paper); color: #1a1a1a; width: 100%; }
.btn--google:hover { background: #fff; transform: translateY(-2px); }
.btn--google svg { width: 1.125rem; height: 1.125rem; }

.auth-msg {
  display: none;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5625rem;
  font-size: 0.82rem;
  line-height: 1.5;
}
.auth-msg.is-error {
  display: block;
  border: 1px solid color-mix(in srgb, var(--clay) 35%, transparent);
  background: color-mix(in srgb, var(--clay) 12%, transparent);
  color: #f0b3a0;
}
.auth-msg.is-ok {
  display: block;
  border: 1px solid color-mix(in srgb, var(--yellow) 32%, transparent);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: #fff37a; /* Robot Yellow Light 2 */
}

.switch-mode { margin-top: 1.25rem; text-align: center; font-size: 0.82rem; color: var(--sand); }
.switch-mode button {
  background: none; border: 0; padding: 0;
  color: var(--yellow-deep);
  cursor: pointer;
  font: 600 0.82rem/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Právní podstránky ---------- */

.legal { padding-block: 4rem 5rem; }
.legal__body { max-width: 45rem; }
.legal__body h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.02; }
.legal__body h2 { font-size: 1.375rem; margin-top: 2.625rem; }
.legal__body p, .legal__body li { margin-top: 0.875rem; font-size: 0.95rem; line-height: 1.7; color: var(--sand); }
.legal__body strong { color: var(--paper-dim); }
.legal__body ul { padding-left: 1.25rem; }
.legal__updated {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand-deep);
}
.legal__flag {
  margin-top: 1.875rem;
  padding: 1rem 1.125rem;
  border: 1px dashed color-mix(in srgb, var(--clay) 45%, transparent);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--clay) 7%, transparent);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #eab4a2;
}
.legal__flag p { color: inherit; }
.legal__flag strong { color: #f6d3c6; }

/* Podnadpisy uvnitř článků. */
.legal__body h3 {
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--paper-dim);
}

/* Obsah nahoře. Právní text je dlouhý a nikdo ho nečte odshora dolů —
   většina lidí jde rovnou pro jednu věc. */
.legal__toc {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink-line);
  border-radius: 0.875rem;
  background: var(--ink-soft);
}
.legal__toc h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--yellow-deep);
}
.legal__toc ol {
  margin: 0.875rem 0 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 2rem;
}
.legal__toc li {
  margin-top: 0.375rem;
  break-inside: avoid;
  font-size: 0.875rem;
  line-height: 1.5;
}
.legal__toc a { color: var(--sand); text-decoration: none; }
.legal__toc a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) { .legal__toc ol { columns: 1; } }

/* Tabulky. Přehled sprostředkovatelů a lhůt se v odstavcích číst nedá. */
.legal__table {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--ink-line);
  border-radius: 0.75rem;
}
.legal__table table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.legal__table th, .legal__table td {
  padding: 0.8125rem 1rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.85rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--ink-line);
}
.legal__table tr:last-child th, .legal__table tr:last-child td { border-bottom: 0; }
.legal__table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--yellow-deep);
  background: var(--ink-soft);
}
.legal__table tbody th {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-dim);
  background: none;
}
.legal__table td { color: var(--sand); }

/* Identifikace provozovatele — dvojice pojem/hodnota. */
.legal__ident {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink-line);
  border-radius: 0.875rem;
  background: var(--ink-soft);
  display: grid;
  gap: 0.5rem 1.5rem;
}
@media (min-width: 640px) { .legal__ident { grid-template-columns: auto 1fr; } }
.legal__ident dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sand-deep);
  padding-top: 0.1875rem;
}
.legal__ident dd { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--paper-dim); }

/* Místo, kde se musí doplnit údaj, který zná jen klient. */
.legal__fill {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px dashed color-mix(in srgb, var(--yellow) 45%, transparent);
  background: color-mix(in srgb, var(--yellow) 9%, transparent);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-style: normal;
  color: #f0cf7a;
}

/* ---------- Scroll reveal ---------- */
/* Stejná choreografie jako komponenta Reveal v originále:
   IntersectionObserver, threshold 0.15, pak animace `rise`.
   Platí jen pod .js — bez JavaScriptu je obsah rovnou vidět. */

.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in {
  animation: settle 0.55s var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}
/* Pojistka: kdyby IntersectionObserver nikdy nedoběhl, obsah se ukáže tak jako tak. */
.js.reveal-fallback [data-reveal] { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  html { scroll-behavior: auto; }
  .rise, .fade-in { opacity: 1; }
  .js [data-reveal] { opacity: 1 !important; }
  .portrait-dots { opacity: 0 !important; }
}


/* =========================================================
   Odpočet zkušebního provozu
   ---------------------------------------------------------
   Levý dolní roh. Pravý patří widgetu agenta a zámku, ten se
   nesmí překrýt. Na mobilu jde odznak výš, protože zamčená karta
   agenta tam zabírá skoro celou šířku.
   ========================================================= */

.trial-badge {
  position: fixed;
  left: 1.25rem;
  bottom: 1.5rem;
  /* Pod widgetem agenta (1000) i pod zámkem (1001). Odpočet je
     doplňková informace, nikdy nesmí překrýt cestu k hovoru. */
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: calc(100vw - 2.5rem);
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: color-mix(in srgb, var(--ink-soft) 92%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .9);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: .02em;
  color: var(--paper-dim);
  animation: trialBadgeIn .5s var(--ease) both;
}

.trial-badge[hidden] { display: none; }

@keyframes trialBadgeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trial-badge__dot {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--sand);
}

/* Poslední týden. Ne červená — konec zkušebního provozu není porucha,
   jen se na něj má dát pozor. */
.trial-badge.is-ending {
  border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
  color: var(--paper);
}
.trial-badge.is-ending .trial-badge__dot { background: var(--yellow); }

.trial-badge.is-over { opacity: .75; }

.trial-badge__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trial-badge__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sand);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.trial-badge__close svg { width: 0.75rem; height: 0.75rem; }
.trial-badge__close:hover {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}

@media (max-width: 720px) {
  /* Nad kartou agenta, ne vedle ní. Vedle by se na úzkém displeji
     obě dotkly a odznak by překryl cestu k hovoru. */
  .trial-badge {
    left: 0.75rem;
    /* Zamčená karta agenta je vysoká 68 px a sedí 2 rem nad spodkem.
       Odsud je nad ní ještě mezera, ne dotyk. */
    bottom: 7.75rem;
    max-width: calc(100vw - 1.5rem);
    font-size: 0.6875rem;
  }
}

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