/* ══════════════════════════════════════════════════════════════════════════
   Sdílený formulář „Rezervovat konzultaci"

   Jeden formulář pro celý web. Do 2026-09-09 měla titulka svůj a každá
   podstránka vlastní kopii — lišily se vzhledem, ovládáním i tím, kam
   posílaly data. Tohle je ta verze z titulky, vytažená do sdíleného souboru.

   Rozměry jsou v pixelech, ne v `rem`: podstránky mají `html { font-size: 62.5% }`,
   takže by tam 1rem znamenal 10px a formulář by byl o třetinu menší než na titulce.

   Vlastní jmenný prostor `nbm-` a hodnoty napevno (ne přes proměnné), protože
   podstránky nenačítají `sc/nebyra.css` — bez toho by tu nebylo z čeho brát
   barvy a vlastní `.form-row`/`.field` podstránek by se pralo s tímhle.
   ══════════════════════════════════════════════════════════════════════════ */

.nbm {
  /* paleta A — shodná s :root v sc/nebyra.css */
  --nbm-ink:        #F2F3F5;
  --nbm-ink-soft:   #9BA1AC;
  --nbm-surface:    #14161C;
  --nbm-accent:     #2F5BFF;
  --nbm-grad:       linear-gradient(135deg, #1e3af5 0%, #7b2ff7 50%, #c026d3 100%);
  --nbm-hairline:        color-mix(in oklab, #F2F3F5 12%, transparent);
  --nbm-hairline-strong: color-mix(in oklab, #F2F3F5 22%, transparent);
  --nbm-fast: 160ms; --nbm-base: 240ms; --nbm-slow: 420ms;
  --nbm-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --nbm-t-xs: clamp(12px, 11.52px + 0.15vw, 13.12px);
  --nbm-t-sm: clamp(14px, 13.44px + 0.18vw, 15.2px);
  --nbm-t-2xl: clamp(33.6px, 25.6px + 2.4vw, 54.4px);
  --nbm-display: "Space Grotesk", system-ui, sans-serif;
  --nbm-text: "Inter", system-ui, sans-serif;

  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in oklab, #0F041C 82%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--nbm-base) var(--nbm-ease);
  font-family: var(--nbm-text);
  font-size: 16px;   /* podstránky mají html { font-size: 62.5% }, tady to nesmí platit */
  line-height: 1.6;
}
.nbm.is-open { opacity: 1; pointer-events: auto; }

.nbm__box {
  width: 100%; max-width: 608px; max-height: 92vh; overflow-y: auto; scrollbar-width: none;
  background: var(--nbm-surface); border-radius: 20px; padding: 48px 32px 32px;
  position: relative; text-align: left;
  box-shadow:
    0 4px 8px hsl(225 20% 4% / 0.22),
    0 18px 40px -8px hsl(225 20% 4% / 0.38),
    0 48px 90px -24px hsl(225 20% 4% / 0.30),
    inset 0 1px 0 color-mix(in oklab, #F2F3F5 10%, transparent);
  transform: translate3d(0, 12px, 0) scale(0.985);
  transition: transform var(--nbm-slow) var(--nbm-ease);
}
.nbm__box::-webkit-scrollbar { display: none; }
.nbm.is-open .nbm__box { transform: none; }

.nbm__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--nbm-hairline-strong); background: transparent; color: var(--nbm-ink-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 17.6px; line-height: 1; font-family: inherit;
  transition: color var(--nbm-fast) var(--nbm-ease), background-color var(--nbm-fast) var(--nbm-ease);
}
.nbm__close:hover { color: var(--nbm-ink); background: color-mix(in oklab, #F2F3F5 8%, transparent); }
.nbm__close:focus-visible { outline: 2px solid var(--nbm-accent); outline-offset: 2px; }
.nbm__close:active { transform: scale(0.94); }

.nbm__label {
  display: block; font-family: var(--nbm-display); font-size: var(--nbm-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nbm-ink-soft); margin: 0;
}
.nbm__title {
  font-family: var(--nbm-display); font-weight: 500; font-size: var(--nbm-t-2xl);
  line-height: 0.94; letter-spacing: -0.02em; color: var(--nbm-ink); margin: 12px 0 0;
}
.nbm__lede { color: var(--nbm-ink-soft); margin: 12px 0 0; }

.nbm__form { display: grid; gap: 16px; margin-top: 32px; }
.nbm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nbm__row label, .nbm__form > label { display: block; font-size: var(--nbm-t-xs); color: var(--nbm-ink-soft); }
.nbm__row label > .nbm__field, .nbm__form > label > .nbm__field { display: block; margin-top: 6.4px; }
.nbm__row label b, .nbm__form label b { color: var(--nbm-accent); font-weight: 600; }

.nbm__field {
  width: 100%; padding: 15.2px 17.6px; border-radius: 12px;
  background: color-mix(in oklab, #F2F3F5 5%, transparent); color: var(--nbm-ink);
  border: 1px solid var(--nbm-hairline-strong); outline: none;
  font: inherit; font-size: var(--nbm-t-sm);
  transition: border-color var(--nbm-fast) var(--nbm-ease), background-color var(--nbm-fast) var(--nbm-ease);
}
.nbm__field::placeholder { color: color-mix(in oklab, #9BA1AC 70%, transparent); }
.nbm__field:hover { border-color: color-mix(in oklab, #F2F3F5 34%, transparent); }
.nbm__field:focus { border-color: var(--nbm-accent); background: color-mix(in oklab, #2F5BFF 7%, transparent); }
textarea.nbm__field { resize: vertical; min-height: 88px; }

.nbm__pick { display: grid; gap: 6.4px; border: 0; padding: 0; margin: 0; }
.nbm__pick legend { margin-bottom: 8px; }
.nbm__pickrow {
  display: flex; align-items: center; gap: 12.8px; padding: 12.8px 15.2px; border-radius: 12px;
  border: 1px solid var(--nbm-hairline); cursor: pointer; color: var(--nbm-ink);
  font-family: var(--nbm-display); font-weight: 600; font-size: var(--nbm-t-sm);
  transition: border-color var(--nbm-fast) var(--nbm-ease), background-color var(--nbm-fast) var(--nbm-ease);
}
.nbm__pickrow:hover { border-color: var(--nbm-hairline-strong); }
.nbm__pickrow:has(:checked) { border-color: var(--nbm-accent); background: color-mix(in oklab, #2F5BFF 9%, transparent); }
.nbm__pickrow input {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--nbm-ink-soft); margin: 0; flex: none; display: grid; place-content: center;
}
.nbm__pickrow input::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nbm-accent);
  transform: scale(0); transition: transform var(--nbm-fast) var(--nbm-ease);
}
.nbm__pickrow input:checked { border-color: var(--nbm-accent); }
.nbm__pickrow input:checked::before { transform: scale(1); }
.nbm__pickrow input:focus-visible { outline: 2px solid var(--nbm-accent); outline-offset: 2px; }

.nbm__legal { font-size: var(--nbm-t-xs); color: var(--nbm-ink-soft); margin: 0; }
.nbm__legal a { color: var(--nbm-ink); }

.nbm__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; width: 100%;
  padding: 14.4px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--nbm-grad); color: #fff;
  font-family: var(--nbm-display); font-weight: 600; font-size: var(--nbm-t-sm);
  letter-spacing: -0.005em; line-height: 1;
  transition: transform var(--nbm-fast) var(--nbm-ease), filter var(--nbm-fast) var(--nbm-ease);
}
.nbm__submit:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nbm__submit:active { transform: translateY(1px) scale(0.98); }
.nbm__submit:focus-visible { outline: 2px solid var(--nbm-ink); outline-offset: 3px; }
.nbm__submit:disabled { opacity: 0.55; cursor: default; transform: none; }

.nbm__ok { display: none; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 24px; }
.nbm__ok.is-shown { display: flex; }
.nbm__ok .nbm__tick {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center;
  background: color-mix(in oklab, #2F5BFF 18%, transparent); color: var(--nbm-accent);
}
.nbm__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .nbm { padding: 16px; }
  .nbm__box { padding: 40px 20px 24px; }
  .nbm__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nbm, .nbm__box, .nbm__submit, .nbm__field, .nbm__pickrow { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Závěrečná sekce — společná pro celý web (2026-09-09)

   Nahradila kontaktní formulář, který měla každá podstránka vlastní. Ten
   posílal na třetí Formspree endpoint a hlásil „děkujeme" i když odeslání
   selhalo. Teď vede všechno jedinou cestou: tlačítko otevře sdílený formulář.
   Rozměry v px ze stejného důvodu jako výš — podstránky mají html { 62.5% }.
   ══════════════════════════════════════════════════════════════════════════ */
.nbz {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 16px;
  font-family: "Inter", system-ui, sans-serif;
}
.nbz__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 128px 40px 112px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px;
}
.nbz__title {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500; letter-spacing: -0.03em; line-height: 0.98;
  font-size: clamp(40px, 5vw, 76px);
  color: #F2F3F5; text-wrap: balance;
}
.nbz__lede { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: #9BA1AC; max-width: 46ch; }
.nbz__cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #1e3af5 0%, #7b2ff7 50%, #c026d3 100%); color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 15px;
  line-height: 1; letter-spacing: -0.005em;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nbz__cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nbz__cta:active { transform: translateY(1px) scale(0.98); }
.nbz__cta:focus-visible { outline: 2px solid #F2F3F5; outline-offset: 3px; }

@media (max-width: 700px) { .nbz__inner { padding: 88px 20px 72px; } }
@media (prefers-reduced-motion: reduce) { .nbz__cta { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Dotykové cíle (2026-09-09)

   Apple i Google doporučují minimálně 44 px. Tečky carouselu měly 8 px,
   šipky 32 px, odkazy v patičce 27 px na výšku. Plochu zvětšuje neviditelný
   přesah přes ::after — vzhled ani rozložení se nemění, jen se do prvku
   dá trefit palcem.
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .stack-dot { position: relative; }
  .stack-dot::after { content: ""; position: absolute; inset: -18px; }

  /* .peak__mute sem NEPATŘÍ — je `absolute` a `relative` mu vezme ukotvení. */
  .stack-arrow, .gen-tab { position: relative; }
  .stack-arrow::after { content: ""; position: absolute; inset: -6px; }
  .gen-tab::after     { content: ""; position: absolute; inset: -4px; }

  footer a, .foot a { position: relative; }
  footer a::after, .foot a::after { content: ""; position: absolute; inset: -9px -4px; }
}

/* ── Obrys po zaostření: stejný jako na titulce ───────────────────────────
   Podstránky spoléhaly na výchozí obrys prohlížeče (1px modrý, nalepený),
   titulka má vlastní (2px, odsazený). Tlačítko tak vypadalo jinak podle
   toho, kde stálo. Zjištěno 2026-09-09 měřením, ne od oka. */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-submit:focus-visible,
.nbz__cta:focus-visible {
  outline: 2px solid #F2F3F5;
  outline-offset: 3px;
}


/* ── Tlačítko: jedna definice pro celý web ────────────────────────────────
   Vzorem je tlačítko ze stránky Automatizace. Žádný prstenec, žádný stín —
   jen ztlumení a nadzvednutí o pixel. */
.btn-primary, .btn-submit, .nbz__cta, .nbm__submit {
  border: 0;
  line-height: 1;
  min-height: 40px;
  box-shadow: none;
  font-size: 14px;
  letter-spacing: -0.01em;
  padding: 10px 22px;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover, .btn-submit:hover, .nbz__cta:hover, .nbm__submit:hover {
  opacity: 0.9; transform: translateY(-1px); box-shadow: none; filter: none;
}
.btn-primary:active, .btn-submit:active, .nbz__cta:active, .nbm__submit:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   Světelný okraj při najetí (2026-09-09)

   Převzato doslova ze stránky Automatizace, kde efekt fungoval. Do 2026-09-09
   ho měly jen tři stránky — na AI generaci a na titulce chyběl úplně, proto
   tam tlačítko na najetí nereagovalo stejně.
   ══════════════════════════════════════════════════════════════════════════ */
.card-glow{pointer-events:none;position:absolute;inset:0;border-radius:inherit}
.card-glow::after{content:"";border-radius:inherit;position:absolute;inset:-2px;border:2px solid transparent;background:radial-gradient(circle,#dd7bbb 10%,transparent 20%),radial-gradient(circle at 40% 40%,#d79f1e 5%,transparent 15%),radial-gradient(circle at 60% 60%,#7b2ff7 10%,transparent 20%),radial-gradient(circle at 40% 60%,#c026d3 10%,transparent 20%),repeating-conic-gradient(from 236.84deg at 50% 50%,#dd7bbb 0%,#d79f1e 5%,#7b2ff7 10%,#c026d3 15%,#dd7bbb 20%);background-attachment:fixed;opacity:var(--glow-active,0);transition:opacity .35s ease;mask-clip:padding-box,border-box;mask-composite:intersect;-webkit-mask-clip:padding-box,border-box;-webkit-mask-composite:destination-in;mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--glow-start,0) - 25)*1deg),transparent 0deg,#fff,transparent 50deg);-webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--glow-start,0) - 25)*1deg),transparent 0deg,#fff,transparent 50deg)}
/* prvek musí mít vlastní souřadnou soustavu, jinak se okraj rozlije po stránce */
.btn-primary,.btn-outline,.btn-ghost,.btn-submit,.btn,.nbz__cta,.nbm__submit{position:relative}