/* auditeshopu.eu – barvy podle aasi.institute, dvě verze (noc/den).
   Kontrast textu hlídá test/contrast.test.mjs (WCAG AA). */

/* ---------- Barvy ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #1a1a2e;            /* deep black */
  --bg-2: #2d2d44;          /* dark slate */
  --line: #4a4a5e;          /* cool gray – jen linky, ne text */
  --text: #f5f5f5;          /* off-white */
  --muted: #b8b8c8;
  --accent: #00f5ff;        /* electric cyan – na tmavé smí i text */
  --accent-text: #00f5ff;
  --magenta: #ff006e;       /* hot magenta – plochy a dekor */
  --magenta-text: #ff5c9a;  /* magenta pro text, AA na tmavé */
  --btn-bg: #00f5ff;
  --btn-text: #1a1a2e;
  --ok: #2fd57a;
  --warn: #ffb020;
  --fail: #ff5c9a;
  --unknown: #b8b8c8;
  --shot-bg: #23233a;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
  --glow: rgba(0, 245, 255, .14);
  --glow-2: rgba(255, 0, 110, .14);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f5f5f5;
  --line: #d9d9e2;
  --text: #1a1a2e;
  --muted: #4a4a5e;
  --accent: #00f5ff;        /* jen plochy a linky */
  --accent-text: #00757a;   /* tmavší cyan pro text */
  --magenta: #ff006e;
  --magenta-text: #c8005a;
  --btn-bg: #1a1a2e;
  --btn-text: #ffffff;
  --ok: #0a7d3c;
  --warn: #9a5b00;
  --fail: #c8005a;
  --unknown: #4a4a5e;
  --shot-bg: #ffffff;
  --shadow: 0 30px 80px -40px rgba(26, 26, 46, .35);
  --glow: rgba(0, 245, 255, .18);
  --glow-2: rgba(255, 0, 110, .08);
  color-scheme: light;
}

/* ---------- Základ ---------- */
/* Atribut hidden musí vyhrát i nad display z tříd (např. .inq { display: grid }).
   Bez toho zůstal na stagingu po odeslání vidět vyplněný formulář. */
[hidden] { display: none !important; }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--accent-text); }
code { font: .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--magenta-text); }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--btn-bg); color: var(--btn-text); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.eyebrow {
  color: var(--magenta-text);
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: .02em;
  margin-bottom: .75rem;
}
.sub { color: var(--muted); font-size: clamp(1.1rem, 1.9vw, 1.35rem); max-width: 40em; }
.center .sub { margin-inline: auto; }

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.25em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background-color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-lg { padding: .9em 1.6em; font-size: 1.05rem; }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: 0 10px 30px -10px var(--glow); }
.btn-primary:hover { box-shadow: 0 12px 36px -8px var(--accent); }
.btn-ghost { color: var(--text); border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-arrow { font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Hlavička ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.top-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.logo-check { stroke: var(--accent); }
.logo-tld { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.nav a:hover { color: var(--text); }
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
}
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
@media (max-width: 720px) {
  .nav { display: none; }
  .theme-toggle { margin-left: auto; }
}

/* ---------- Hlavní plocha ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 11vw, 148px) 0 clamp(64px, 9vw, 112px);
  text-align: center;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob {
  position: absolute; width: min(70vw, 860px); aspect-ratio: 1; border-radius: 50%;
  will-change: transform;
}
.blob-a { top: -38%; left: -14%; background: radial-gradient(closest-side, var(--glow), transparent); }
.blob-b { top: -10%; right: -18%; background: radial-gradient(closest-side, var(--glow-2), transparent); }
.hero-in { position: relative; max-width: 1000px; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  margin: 0 auto;
  max-width: 13.5em;
}
.grad {
  position: relative; display: inline-block;
  background: linear-gradient(90deg, var(--accent-text), var(--magenta-text));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--magenta-text), var(--accent-text));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0;
}
.lead {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 30em;
  margin: 28px auto 0;
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 40px; }

.hero-stage { position: relative; margin-top: clamp(56px, 8vw, 96px); }
.device {
  margin: 0 auto; max-width: 1040px;
  border-radius: 22px; overflow: hidden; text-align: left;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.device-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.device-dots { display: flex; gap: 7px; }
.device-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.device-url {
  font-size: .8rem; color: var(--muted);
  padding: 4px 18px; border-radius: 8px; background: var(--bg);
}
.device-body { display: grid; grid-template-columns: 1fr minmax(340px, 420px); min-height: 400px; }
.site { padding: 32px 40px; background: var(--shot-bg); }
.site-nav { display: flex; gap: 22px; align-items: baseline; font-size: .85rem; color: var(--muted); }
.site-nav b { color: var(--text); margin-right: auto; font-size: .95rem; }
.site-hero { margin: 44px 0 28px; }
.site-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 6px; }
.site-text { color: var(--muted); margin: 0; }
.site-form { display: grid; gap: 6px; max-width: 320px; }
.sf-label { font-size: .75rem; color: var(--muted); font-weight: 600; margin-top: 6px; }
.sf-input { padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--bg); font-size: .85rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sf-btn { justify-self: start; margin-top: 12px; padding: 9px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font-weight: 600; font-size: .85rem; }

.alerts {
  list-style: none; margin: 0; padding: 28px 24px;
  display: grid; gap: 12px; align-content: center;
  border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.alert {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .45);
}
.alert-x {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--magenta);
}
.alert-x::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--magenta); opacity: 0;
}
.alert-t { font-size: .88rem; line-height: 1.35; color: var(--muted); }
.alert-t b { display: block; color: var(--text); font-size: .95rem; margin-bottom: 2px; }
.hero-caption { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: .95rem; }

@media (max-width: 820px) {
  .device-body { grid-template-columns: 1fr; min-height: 0; }
  .site { padding: 22px 20px 8px; }
  .site-nav span, .site-form { display: none; }
  .site-hero { margin: 20px 0 8px; }
  .site-title { font-size: 1.35rem; }
  .alerts { border-left: 0; padding: 16px; background: var(--shot-bg); }
  .device-bar { grid-template-columns: auto 1fr; gap: 12px; }
  .device-url { justify-self: start; }
}

/* ---------- Sekce ---------- */
.section { padding: clamp(72px, 11vw, 140px) 0; border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent); }
.section > .wrap > h2,
.section > .wrap > .eyebrow,
.section > .wrap > .sub { text-align: center; margin-inline: auto; }
.section > .wrap > .sub { margin-bottom: clamp(36px, 6vw, 64px); }

/* ---------- Rychlá kontrola ---------- */
.check-section { background: var(--bg-2); }
.check-section h2, .check-section .eyebrow, .check-section .sub { text-align: center; margin-inline: auto; }
.check-form { margin-top: 36px; }
.check-row {
  display: flex; gap: 8px; padding: 8px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
}
.check-row:focus-within { border-color: var(--accent); }
.check-row input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1.2rem; padding: 0 18px; outline: none;
}
.check-row input::placeholder { color: var(--muted); }
@media (max-width: 600px) {
  .check-row { flex-direction: column; border-radius: 22px; }
  .check-row input { padding: 14px 12px; }
  .check-row .btn { width: 100%; }
}
.check-what { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 20px 0 0; }
.check-what li { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; transition: border-color .3s, color .3s; }
.check-what li i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.check-what li.is-active { color: var(--text); border-color: var(--accent-text); }
.check-what li.is-active i { background: var(--accent-text); }
:is(.mo-full, .mo-lite) .check-what li.is-active i { animation: chipPulse .8s ease-in-out infinite; }
.check-what li.is-done i { background: var(--accent-text); }
.check-what li[data-s] { color: var(--text); }
.check-what li[data-s] i { transform: scale(1.35); }
.check-what li[data-s="ok"] i { background: var(--ok); }
.check-what li[data-s="warn"] i { background: var(--warn); }
.check-what li[data-s="fail"] i { background: var(--fail); }
.check-what li[data-s="unknown"] i { background: var(--unknown); }
@keyframes chipPulse { 50% { transform: scale(1.7); opacity: .55; } }

.check-email { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.check-email summary { cursor: pointer; font-weight: 600; }
.check-email-in { display: grid; gap: 10px; margin-top: 14px; }
.check-email-in input[type="email"] {
  font: inherit; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text);
}
.check-email-in input[type="email"]:focus { border-color: var(--accent); outline: none; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: .92rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-text); }
.typo-hint { margin: 0; font-size: .95rem; color: var(--warn); }
.typo-hint button { font: inherit; font-weight: 600; color: var(--accent-text); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.turnstile { margin-top: 18px; display: flex; justify-content: center; min-height: 0; }
.form-error { margin: 16px 0 0; text-align: center; color: var(--fail); font-weight: 600; }

/* Výsledek */
.result { margin-top: 40px; }
.result-head { display: flex; align-items: center; gap: 22px; padding: 26px; border-radius: 24px; background: var(--bg); border: 1px solid var(--line); }
.light-big { flex: none; display: grid; gap: 8px; padding: 10px; background: #111122; border-radius: 18px; }
.light-big i { display: block; width: 26px; height: 26px; border-radius: 50%; background: #2a2a3e; }
.light-big[data-s="fail"] i:nth-child(1) { background: #ff006e; box-shadow: 0 0 18px #ff006e; }
.light-big[data-s="warn"] i:nth-child(2) { background: #ffb020; box-shadow: 0 0 18px #ffb020; }
.light-big[data-s="ok"] i:nth-child(3) { background: #2fd57a; box-shadow: 0 0 18px #2fd57a; }
.result-head h3 { font-size: 1.5rem; margin: 0 0 .25em; }
.result-head p { margin: 0; color: var(--muted); }
.result-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.result-item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.result-item .dot { width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--unknown); }
.result-item[data-s="ok"] .dot { background: var(--ok); }
.result-item[data-s="warn"] .dot { background: var(--warn); }
.result-item[data-s="fail"] .dot { background: var(--fail); }
.result-item b { display: block; }
.result-item .st { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-left: 8px; }
.result-item[data-s="ok"] .st { color: var(--ok); }
.result-item[data-s="warn"] .st { color: var(--warn); }
.result-item[data-s="fail"] .st { color: var(--fail); }
.result-item[data-s="unknown"] .st { color: var(--unknown); }
.result-item p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.result-item .why { color: var(--text); }
.result-group { margin: 26px 0 0; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.result-cta { margin-top: 28px; padding: 26px; border-radius: 24px; text-align: center; background: linear-gradient(135deg, var(--glow), var(--glow-2)); border: 1px solid var(--line); }
.result-cta p { margin-bottom: 16px; }
.result-report { margin-top: 14px; text-align: center; font-size: .95rem; color: var(--muted); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; }
:is(.mo-full, .mo-lite) .spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Problémy ---------- */
.issues { display: grid; gap: clamp(28px, 4vw, 44px); }
.issue {
  display: grid; grid-template-columns: minmax(260px, .8fr) 1.6fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--bg-2);
  border-radius: 32px;
}
.issue-n { display: block; font-weight: 700; color: var(--magenta-text); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.issue h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.issue-text p { color: var(--muted); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.tags li { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); }
@media (max-width: 900px) { .issue { grid-template-columns: 1fr; } }

.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.ba-side { margin: 0; }
.ba-side figcaption { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.ba-before figcaption { color: var(--magenta-text); }
.ba-after figcaption { color: var(--accent-text); }
.ba-arrow { font-size: 1.6rem; color: var(--muted); }
@media (max-width: 640px) {
  .ba { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
}

/* Makety obrazovek */
.shot {
  background: var(--shot-bg);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
}
.ba-before .shot { border-color: color-mix(in srgb, var(--magenta) 45%, transparent); }
.ba-after .shot { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.shot-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.shot-body { display: grid; gap: 8px; padding: 16px; font-size: .88rem; min-height: 210px; align-content: start; }
.shot-center { place-items: center; align-content: center; text-align: center; }
.f-label { font-size: .75rem; color: var(--muted); font-weight: 600; }
.f-input { padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; display: flex; justify-content: space-between; gap: 8px; }
.f-err { border-color: var(--fail); }
.f-warn { border-color: var(--warn); }
.f-okb { border-color: var(--ok); }
.f-okb b { color: var(--ok); }
.f-errtext { color: var(--fail); font-size: .78rem; margin-top: -4px; }
.f-hint { font-size: .8rem; color: var(--warn); }
.f-hint b { color: var(--text); }
.f-hint u { color: var(--accent-text); font-weight: 600; }
.f-btn { justify-self: start; padding: 7px 12px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font-weight: 600; font-size: .78rem; }
.f-btn-alt { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.f-note { font-size: .8rem; font-weight: 600; }
.f-bad { color: var(--fail); }
.f-good { color: var(--ok); }
.f-ok-fake { color: var(--muted); }
.row-bot { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 8px; background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; }
.row-bot em { color: var(--muted); font-style: normal; }
.captcha { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--bg); font-size: .8rem; }
.captcha-box { position: relative; width: 22px; height: 22px; flex: none; }
.captcha-ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--bg); font-weight: 700; font-size: .75rem; }
.captcha-spin { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--ok); border-right-color: transparent; opacity: 0; }
.err-code { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; color: var(--fail); line-height: 1; }
.err-text { color: var(--muted); }
.loadbar { width: 80%; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.loadbar span { display: block; width: 30%; height: 100%; background: var(--warn); }
.mo-full .loadbar span { animation: load 2.4s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.uptime { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.uptime i { height: 28px; border-radius: 3px; background: var(--ok); transform-origin: bottom; }
.bots { display: grid; gap: 6px; }
.cart-items { display: grid; gap: 8px; }
.caret { display: none; }
.cart-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg); }
.qty { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; padding: 3px 8px; border-radius: 7px; border: 1.5px solid var(--line); }
.qty-bad { border-color: var(--fail); color: var(--fail); }
.cart-total { display: flex; justify-content: space-between; font-weight: 600; padding: 6px 10px; }
.cart-total b { color: var(--fail); }
.keypad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.keypad i { font-style: normal; text-align: center; font-size: .72rem; padding: 4px 0; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); }
.trk { font-size: .8rem; color: var(--muted); }
.trk-on { color: var(--fail); font-weight: 600; }
.cookiebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin-top: 6px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: .8rem; }
.notice { padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 18%, transparent); font-size: .8rem; }
.notice-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); }
.footer-mock { padding: 8px 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .78rem; }

/* SVG schéma pošty */
.mailflow { width: 100%; height: auto; display: block; background: var(--shot-bg); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--shadow); }
.ba-before .mailflow { border-color: color-mix(in srgb, var(--magenta) 45%, transparent); }
.ba-after .mailflow { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mf-box { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.mf-spam { stroke: var(--fail); stroke-width: 2; }
.mf-inbox { stroke: var(--ok); stroke-width: 2; }
.mf-t { fill: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; }
.mf-muted { fill: var(--muted); font-weight: 400; }
.mf-bad-t { fill: var(--fail); }
.mf-good-t { fill: var(--ok); }
.mf-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 6; }
.mf-bad { stroke: var(--fail); }
.mf-good { stroke: var(--ok); stroke-dasharray: none; }
.mf-env { fill: var(--bg-2); stroke: var(--text); stroke-width: 1.5; }
.mf-envl { fill: none; stroke: var(--text); stroke-width: 1.5; }
.mf-q { fill: var(--fail); font-size: 18px; font-weight: 800; }
.mf-badges rect { fill: color-mix(in srgb, var(--ok) 16%, transparent); stroke: var(--ok); }
.mf-badges text { fill: var(--ok); font-size: 11px; font-weight: 700; }

/* ---------- Srovnání ---------- */
.compare-wrap { max-width: 1000px; margin: 0 auto; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare th, .compare td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.compare thead th { font-size: 1.15rem; padding-bottom: 22px; }
.compare tbody th { color: var(--muted); font-weight: 600; width: 16%; }
.compare td { color: var(--muted); }
.compare .col-audit { background: var(--bg-2); }
.compare tbody td:last-child { background: var(--bg-2); color: var(--text); }
.compare thead .col-audit { border-radius: 20px 20px 0 0; }
.compare tfoot td.col-audit { border-radius: 0 0 20px 20px; }
.compare tfoot th, .compare tfoot td { border-bottom: 0; padding-top: 24px; }
.price { display: inline-block; margin-left: 6px; color: var(--magenta-text); }
@media (max-width: 720px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tfoot, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { border: 0; padding: 6px 0; }
  .compare tbody th { font-size: 1.1rem; color: var(--text); width: auto; }
  .compare td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .compare tbody td:last-child { padding: 10px 14px; border-radius: 12px; margin-top: 6px; }
  .compare tbody td:last-child::before { color: var(--magenta-text); }
  .compare tfoot tr { display: flex; flex-direction: column; gap: 10px; border: 0; }
  .compare tfoot td.col-audit { background: none; }
  .compare tfoot .btn { width: 100%; }
}

/* ---------- Postup ---------- */
.steps { list-style: none; padding: 0; margin: 56px 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { padding: 28px; border-radius: 24px; background: var(--bg-2); }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px; background: var(--btn-bg); color: var(--btn-text); font-weight: 700; font-size: 1.1rem; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Co následuje ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.card { padding: 32px; border-radius: 24px; background: var(--bg-2); }
.card > svg { color: var(--accent-text); margin-bottom: 16px; }
.card p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }

/* ---------- Případ ---------- */
.case { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.case-col { padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--bg-2); }
.case-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.case-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; color: var(--text); }
.case-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.case-list li.sev-fail::before { background: var(--fail); }
.case-col p { color: var(--muted); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* ---------- Kontakt a patička ---------- */
.contact { background: radial-gradient(60% 80% at 50% 0%, var(--glow), transparent), var(--bg); }
.price-big { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin: 28px 0; }
.contact .btn { white-space: normal; }
.foot { padding: 40px 0 56px; border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent); color: var(--muted); font-size: .9rem; }
.foot a { color: var(--muted); }
.foot-in p { margin: 0 0 6px; }

/* ---------- Podstránky (zásady) ---------- */
.doc { padding: clamp(48px, 8vw, 96px) 0; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); }
.doc h2 { font-size: 1.4rem; margin-top: 2em; text-align: left; }
.doc p, .doc li { color: var(--muted); }
.doc .todo { color: var(--warn); font-weight: 600; }

/* Kotvy a výsledek nesmí zajet pod lepící hlavičku */
section[id], .result, .inq, .inq-done { scroll-margin-top: 72px; }
@media (max-width: 720px) {
  .compare tfoot th { display: none; }
  .compare tfoot td, .compare tfoot th { padding-top: 0; }
}

/* =====================================================================
   EFEKTY – princip podle vzor/motion.js (frankie-research-site).
   Úroveň nastaví hlavička před prvním vykreslením (theme-init.js):
     html.mo-full  plné efekty (smyčky, odhalování, náklon karet)
     html.mo-lite  jen jednorázové efekty, žádné smyčky ani odhalování
     html.mo-off   nic se nehýbe (i při prefers-reduced-motion)
   Skryté výchozí stavy platí jen s .fx, kterou přidá až motion.js –
   bez JS (nebo když se nenačte) je všechno hned vidět.
   Animuje se jen transform a opacity.
   ===================================================================== */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.9) translate3d(0, 8px, 0); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(12vw, 8vh, 0) scale(1.18); } }
@keyframes drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 100% { transform: translate3d(-10vw, 14vh, 0) scale(.9); } }
@keyframes gradFlow { 0%, 20% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes alertIn { 0% { opacity: 0; transform: translate3d(36px, 0, 0) scale(.96); } 70% { opacity: 1; transform: translate3d(-3px, 0, 0) scale(1); } 100% { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes blink502 { 0%, 42%, 58%, 100% { opacity: 1; } 47%, 53% { opacity: .15; } }
@keyframes softBlink { 50% { opacity: .35; } }
@keyframes emptyOut { to { opacity: .12; transform: translate3d(-12px, 0, 0) scale(.97); } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translate3d(-5px, 0, 0); } 40%, 80% { transform: translate3d(5px, 0, 0); } }
@keyframes barUp { from { opacity: .2; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes spinOut { 0% { opacity: 1; transform: rotate(0); } 85% { opacity: 1; transform: rotate(540deg); } 100% { opacity: 0; transform: rotate(600deg); } }
@keyframes toSpam {
  0% { opacity: 0; transform: none; } 10% { opacity: 1; transform: none; } 38% { transform: translate(40px, 0); }
  72% { opacity: 1; transform: translate(100px, 38px) scale(.55); } 86%, 100% { opacity: 0; transform: translate(100px, 38px) scale(.55); }
}
@keyframes toInbox {
  0% { opacity: 0; transform: none; } 10% { opacity: 1; transform: none; } 38% { transform: translate(40px, 0); }
  72% { opacity: 1; transform: translate(100px, -36px) scale(.55); } 86%, 100% { opacity: 0; transform: translate(100px, -36px) scale(.55); }
}
@keyframes bot1 { 0% { opacity: 0; transform: translate3d(0, -10px, 0); } 5%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes bot2 { 0%, 22% { opacity: 0; transform: translate3d(0, -10px, 0); } 27%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes bot3 { 0%, 44% { opacity: 0; transform: translate3d(0, -10px, 0); } 49%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes bot4 { 0%, 66% { opacity: 0; transform: translate3d(0, -10px, 0); } 71%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* Vypnuto: nic neběží */
.mo-off *, .mo-off *::before, .mo-off *::after { animation: none !important; transition: none !important; }
html.mo-off { scroll-behavior: auto; }
/* Skrytá záložka a bloky mimo záběr stojí */
/* (mimo záběr stojí jen smyčky, jednorázové efekty doběhnou, aby nic nezůstalo skryté) */
.mo-pause *, .mo-pause *::before, .mo-pause *::after,
.pz :is(.blob, .alert-x, .row-bot, .mf-mover, .err-code, .trk-on, .loadbar span, .caret),
.pz :is(.grad, .alert-x)::after { animation-play-state: paused !important; }

/* Hlavička dostane stín po odrolování */
.top { transition: box-shadow .3s; }
.top.sc { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); }

/* ---- Hlavní plocha ---- */
:is(.mo-full, .mo-lite) .hero-in > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
:is(.mo-full, .mo-lite) .hero-in > :nth-child(2) { animation-delay: .08s; }
:is(.mo-full, .mo-lite) .hero-in > :nth-child(3) { animation-delay: .18s; }
:is(.mo-full, .mo-lite) .hero-in > :nth-child(4) { animation-delay: .28s; }
:is(.mo-full, .mo-lite) .hero-stage .device { animation: rise 1s .35s cubic-bezier(.2, .8, .2, 1) both; }
:is(.mo-full, .mo-lite) .alert { animation: alertIn .75s cubic-bezier(.2, .8, .2, 1) both; }
:is(.mo-full, .mo-lite) .alert:nth-child(1) { animation-delay: .9s; }
:is(.mo-full, .mo-lite) .alert:nth-child(2) { animation-delay: 1.6s; }
:is(.mo-full, .mo-lite) .alert:nth-child(3) { animation-delay: 2.3s; }
:is(.mo-full, .mo-lite) .alert:nth-child(4) { animation-delay: 3s; }
:is(.mo-full, .mo-lite) .hero-caption { animation: fadeIn 1s 3.8s both; }
.mo-full .blob-a { animation: drift-a 22s ease-in-out infinite alternate; }
.mo-full .blob-b { animation: drift-b 26s ease-in-out infinite alternate; }
.mo-full .grad::after { animation: gradFlow 6s ease-in-out infinite alternate; }
.mo-full .alert-x { animation: beat 2.4s ease-in-out 3.8s infinite; }
.mo-full .alert-x::after { animation: ring 2.4s ease-out 3.8s infinite; }

/* ---- Odhalení při rolování (jen plné; třídy .rv/.in přidává motion.js) ---- */
.mo-full .rv {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.mo-full .rv.in { opacity: 1; transform: none; }

/* ---- Světlo pod kurzorem a náklon karet (myš / trackpad) ---- */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
:is(.mo-full, .mo-lite) .spot:hover::after { opacity: 1; }
.mo-full .tilt.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity .9s, transform .25s ease-out; }

/* ---- Rychlá kontrola: výsledek naskočí ---- */
:is(.mo-full, .mo-lite) .result.pop .result-head { animation: popIn .6s cubic-bezier(.2, .8, .2, 1) both; }
:is(.mo-full, .mo-lite) .result.pop :is(.result-item, .result-group, .result-cta) { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- Chyby 01–08 (skryté stavy jen s .fx) ---- */
.fx.mo-full .issue:not(.seen) :is(.shot-body > *, .ba-side.art),
.fx.mo-lite .issue:not(.seen) :is(.shot-body > *, .ba-side.art) { opacity: 0; }
:is(.mo-full, .mo-lite) .issue.seen :is(.shot-body > *, .ba-side.art) { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }

/* psaní do pole + navazující hlášky */
.fx:is(.mo-full, .mo-lite) .caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: caretBlink .9s steps(1) infinite; }
.fx:is(.mo-full, .mo-lite) .f-input { justify-content: flex-start; }
.fx .shot.typed .caret { display: none; }
.fx:is(.mo-full, .mo-lite) .issue .shot:not(.typed) .seq-t { opacity: 0; animation: none; }
:is(.mo-full, .mo-lite) .issue.seen .shot.typed .seq-t { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
:is(.mo-full, .mo-lite) .issue.seen .shot.typed .seq-t.pop { animation-name: popIn; }
:is(.mo-full, .mo-lite) .issue.seen .shot.typed .d1 { animation-delay: .25s; }
:is(.mo-full, .mo-lite) .issue.seen .shot.typed .d2 { animation-delay: .9s; }

/* 02 roboti přibývají (plné), ochrana se ověří */
.mo-full .issue.seen .row-bot:nth-child(1) { animation: bot1 6s 1s infinite both; }
.mo-full .issue.seen .row-bot:nth-child(2) { animation: bot2 6s 1s infinite both; }
.mo-full .issue.seen .row-bot:nth-child(3) { animation: bot3 6s 1s infinite both; }
.mo-full .issue.seen .row-bot:nth-child(4) { animation: bot4 6s 1s infinite both; }
:is(.mo-full, .mo-lite) .issue.seen .captcha-spin { animation: spinOut 1.4s 1.2s linear both; }
:is(.mo-full, .mo-lite) .issue.seen .captcha-ok { animation: popIn .45s 2.5s both; }

/* 03 obálka letí do spamu / do doručené pošty (plné) */
.mf-mover { transform-box: fill-box; transform-origin: center; }
.mo-full .issue.seen .mf-to-spam { animation: toSpam 3.8s .8s ease-in-out infinite both; }
.mo-full .issue.seen .mf-to-inbox { animation: toInbox 3.8s 1.4s ease-in-out infinite both; }

/* 04 502 bliká (plné), lišta dostupnosti se zazelená */
.mo-full .issue.seen .err-code { animation: blink502 2.2s 1s infinite; }
:is(.mo-full, .mo-lite) .issue.seen .uptime i { animation: barUp .45s cubic-bezier(.3, 1.4, .5, 1) both; }

/* 05 záporný počet vyprázdní košík */
:is(.mo-full, .mo-lite) .issue.seen .shot.typed .cart-items { animation: emptyOut .6s .1s forwards; }

/* 06 chyba se zatřese, opravené pole potvrdí */
:is(.mo-full, .mo-lite) .issue.seen .f-err { animation: shake .5s 1.2s both; }
:is(.mo-full, .mo-lite) .issue.seen .f-okb b { display: inline-block; animation: popIn .45s 1.3s both; }

/* 07 měření bliká ještě před souhlasem (plné) */
.mo-full .issue.seen .trk-on { animation: softBlink 1.4s 1s infinite; }

/* ---- Přepínač efektů v patičce ---- */
.motionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: .85rem; }
.motionbar:empty { display: none; }
.motionsw { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.motionsw button { font: inherit; font-size: .8rem; color: var(--muted); background: none; border: 0; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.motionsw button[aria-pressed="true"] { background: var(--bg-2); color: var(--text); }

/* ---------- Ukázka auditu a prohlížeč ---------- */
.sample { display: grid; justify-items: center; gap: 18px; text-align: center; }
.sample-text { color: var(--muted); max-width: 34em; margin: 0; font-size: 1.1rem; }
.sample-text b { color: var(--text); }
.sample-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html.viewer-open { overflow: hidden; }
.viewer {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); color: var(--text);
}
.viewer::backdrop { background: rgba(10, 10, 20, .6); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px max(16px, calc((100vw - 900px) / 2));
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.viewer-title { margin: 0 auto 0 0; font-weight: 700; }
.viewer-title span { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.viewer-dl { padding: .5em 1em; }
.viewer-close { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; }
.viewer-pages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px 48px; display: grid; justify-items: center; gap: 20px; align-content: start; }
.viewer-pages img { width: 100%; max-width: 820px; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .6); }
.viewer-empty { color: var(--muted); }
:is(.mo-full, .mo-lite) .viewer[open] .viewer-pages { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.viewer-dl .dl-short { display: none; }
@media (max-width: 600px) {
  .viewer-pages { padding: 12px 8px 32px; gap: 12px; }
  /* na mobilu zůstane vidět: ikona se štítkem „Stáhnout“ vedle křížku */
  .viewer-dl { padding: .45em .8em; font-size: .9rem; gap: .35em; }
  .viewer-dl .dl-long { display: none; }
  .viewer-dl .dl-short { display: inline; }
  .viewer-title span { display: none; }
}

/* ---------- Poptávkový formulář ---------- */
.inq { display: grid; gap: 20px; margin-top: 40px; padding: clamp(20px, 4vw, 36px); border-radius: 28px; background: var(--bg-2); text-align: left; }
.inq-typ { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inq-typ legend { font-weight: 600; margin-bottom: 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent-text); }
.choice input { margin-top: 4px; accent-color: var(--accent-text); width: 18px; height: 18px; }
.choice b { display: block; }
.choice small { color: var(--muted); }
.inq-typ .field-error { grid-column: 1 / -1; }
.inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-text); }
.field [aria-invalid="true"], .consent input[aria-invalid="true"] { border-color: var(--fail); outline-color: var(--fail); }
.field-error { margin: 0; color: var(--fail); font-size: .9rem; font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inq-submit { justify-self: start; }
.inq .form-error { text-align: left; margin: 0; }
.inq .turnstile { justify-content: flex-start; margin: 0; }
.inq-done { margin-top: 40px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--bg-2); border: 1px solid var(--accent-text); }
.inq-done h3 { font-size: 1.5rem; }
.inq-recap { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 16px 0 0; }
.inq-recap dt { color: var(--muted); }
.inq-recap dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
:is(.mo-full, .mo-lite) .inq-done:not([hidden]) { animation: popIn .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 640px) {
  .inq-typ, .inq-grid { grid-template-columns: 1fr; }
  .inq-submit { width: 100%; }
}

/* Postup objednávky u ceny */
.pay-steps { list-style: none; padding: 0; margin: -8px auto 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; color: var(--muted); font-size: .95rem; }
.pay-steps li { display: inline-flex; align-items: center; gap: 8px; }
.pay-steps li + li::before { content: "→"; margin-right: 10px; color: var(--muted); }
.pay-steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-text); font-weight: 700; font-size: .8rem; }
@media (max-width: 600px) { .pay-steps { flex-direction: column; align-items: center; } .pay-steps li + li::before { display: none; } }

/* =====================================================================
   INTERAKTIVITA JAKO FRANKIERESEARCH.SPACE (vzor/live_effects.css, live_pro.css)
   Mechanika a úrovně převzaté, barvy z palety auditeshopu. Názvy animací
   odpovídají vzoru (moSkyA…). Kde vzor animuje jiné vlastnosti než transform
   a opacity (moShine: background-position, moOutline: stroke/filter), je to
   přepsané na transform/opacity se stejným výsledkem.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --acc: #00757a; --acc2: #c8005a; --grid: rgba(26, 26, 46, .05);
  --st1: rgba(26, 26, 46, .22); --st2: rgba(200, 0, 90, .22); --st3: rgba(0, 117, 122, .22); --st4: rgba(0, 117, 122, .18);
  --fall: rgba(200, 0, 90, .22); --term-bg: #15151f; --term-fg: #e9e9f2;
}
:root[data-theme="dark"] {
  --acc: #00f5ff; --acc2: #ff5c9a; --grid: rgba(255, 255, 255, .035);
  --st1: rgba(245, 245, 245, .9); --st2: rgba(255, 0, 110, .7); --st3: rgba(0, 245, 255, .6); --st4: rgba(0, 245, 255, .45);
  --fall: rgba(255, 0, 110, .35); --term-bg: #12121f; --term-fg: #e9e9f2;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --acc: #00f5ff; } }

body { position: relative; isolation: isolate; overflow-x: clip; }

/* 1) Hvězdné nebe: tři vrstvy v různé hloubce, souhvězdí a padající čára (vloží motion.js) */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; left: 0; right: 0; top: 0; display: block; }
.sky i:nth-child(1) {
  height: calc(100% + 260px); background-size: 260px 260px; opacity: .8;
}
.sky i:nth-child(2) {
  height: calc(100% + 340px); background-size: 340px 340px; opacity: .9;
}
.sky i:nth-child(3) {
  height: calc(100% + 460px); background-size: 460px 460px;
}
.sky::before {
  content: ""; position: absolute; inset: 0; background-size: 720px 540px; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='540'%3E%3Cg fill='none' stroke='%23888' stroke-width='.7'%3E%3Cpath d='M64 92 132 60 208 118 262 84M560 70 610 132 688 118 652 198M120 410 186 372 230 440 318 418M480 330 540 300 598 352 572 430 498 412Z'/%3E%3C/g%3E%3Cg fill='%23888'%3E%3Ccircle cx='64' cy='92' r='1.6'/%3E%3Ccircle cx='132' cy='60' r='1.6'/%3E%3Ccircle cx='208' cy='118' r='2'/%3E%3Ccircle cx='262' cy='84' r='1.4'/%3E%3Ccircle cx='560' cy='70' r='1.6'/%3E%3Ccircle cx='610' cy='132' r='2'/%3E%3Ccircle cx='688' cy='118' r='1.4'/%3E%3Ccircle cx='652' cy='198' r='1.6'/%3E%3Ccircle cx='120' cy='410' r='1.4'/%3E%3Ccircle cx='186' cy='372' r='2'/%3E%3Ccircle cx='230' cy='440' r='1.6'/%3E%3Ccircle cx='318' cy='418' r='1.4'/%3E%3Ccircle cx='480' cy='330' r='1.6'/%3E%3Ccircle cx='540' cy='300' r='2'/%3E%3Ccircle cx='598' cy='352' r='1.4'/%3E%3Ccircle cx='572' cy='430' r='1.6'/%3E%3Ccircle cx='498' cy='412' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="light"] .sky::before { opacity: .08; }
.sky b {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; display: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--fall) 25%, color-mix(in srgb, var(--acc2) 70%, transparent) 60%, transparent);
  box-shadow: 0 0 12px var(--fall);
}

/* 2) Pozadí: mřížka s pomalým driftem, dýchající záře, poletující prach */
body::before {
  content: ""; position: fixed; inset: -48px; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0, #000 0, rgba(0, 0, 0, .5) 50%, transparent 85%);
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0, #000 0, rgba(0, 0, 0, .5) 50%, transparent 85%);
}
body::after {
  content: ""; position: fixed; left: -20vw; top: -20vh; width: 140vw; height: 140vh; z-index: -1; pointer-events: none;
  background: radial-gradient(40vw 32vh at 25% 30%, var(--glow), transparent 70%), radial-gradient(34vw 28vh at 80% 70%, var(--glow-2), transparent 70%);
}
.dust { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); opacity: .7; pointer-events: none; }
.dust:nth-of-type(1) { left: 8%; top: 22%; }
.dust:nth-of-type(2) { left: 38%; top: 12%; opacity: .4; }
.dust:nth-of-type(3) { left: 30%; top: 78%; opacity: .5; }
.dust:nth-of-type(4) { left: 82%; top: 64%; opacity: .3; }
.mo-lite .dust, .mo-off .dust { display: none; }

/* 3) Hlavička: laserová linka a putující světlo po spodní hraně */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--acc), var(--acc2) 50%, var(--acc)); opacity: .85; transform-origin: 0 50%;
}
.top::before {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 140px; height: 8px; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, #fff, transparent); filter: blur(2px); opacity: .8; transform: translateX(calc(62vw - 70px));
}
:root[data-theme="light"] .top::before { opacity: .45; background: radial-gradient(closest-side, var(--acc), transparent); }
.mo-lite .top::before, .mo-off .top::before { display: none; }

/* 4) Lesk přes „Najdeme proč.“: okno se světlem jede přes slovo (jen transform) */
.grad .shine { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; overflow: hidden; pointer-events: none; transform: translateX(-110%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.grad .shine > span { position: absolute; top: 0; left: 0; width: max-content; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .55); white-space: nowrap; }
:root[data-theme="light"] .grad .shine > span { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .9); opacity: .85; }
.mo-off .grad .shine { display: none; }

/* 5) Podtržení nadpisů sekcí při odhalení */
.section .wrap > .eyebrow { position: relative; }
.section .wrap > .eyebrow::after {
  content: ""; position: absolute; left: calc(50% - 60px); width: 120px; top: -16px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 35%, transparent);
  transform-origin: 50% 50%; transform: scaleX(0); opacity: 0;
}

/* 6) Karty: přejezd světla při najetí a rohové značky */
.fxcard { position: relative; overflow: hidden; }
.fxcard .frame {
  position: absolute; inset: 7px; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--acc) 80%, transparent); border-radius: 10px; opacity: .35;
  transition: opacity .25s, transform .25s;
  -webkit-mask: linear-gradient(#000 0 0) 0 0/14px 14px no-repeat, linear-gradient(#000 0 0) 100% 0/14px 14px no-repeat, linear-gradient(#000 0 0) 0 100%/14px 14px no-repeat, linear-gradient(#000 0 0) 100% 100%/14px 14px no-repeat;
  mask: linear-gradient(#000 0 0) 0 0/14px 14px no-repeat, linear-gradient(#000 0 0) 100% 0/14px 14px no-repeat, linear-gradient(#000 0 0) 0 100%/14px 14px no-repeat, linear-gradient(#000 0 0) 100% 100%/14px 14px no-repeat;
}
.fxcard:hover .frame { opacity: 1; transform: scale(.985); }
.fxcard .sweep {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 90%, transparent) 25%, #fff 50%, color-mix(in srgb, var(--acc) 90%, transparent) 75%, transparent) 0 100%/100% 2px no-repeat,
    linear-gradient(0deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent) 0 100%/100% 40px no-repeat;
}
.mo-off .fxcard .frame { transition: none; }

/* 7) Hlavní tlačítko: obíhající záře, přejezd lesku, rotující okraj a halo */
.push { position: relative; isolation: isolate; overflow: visible; }
.push .fx-clip { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.push .edge-spin {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, var(--acc), color-mix(in srgb, var(--acc2) 70%, transparent) 14%, transparent 32%, transparent 62%, color-mix(in srgb, var(--acc) 50%, transparent) 80%, var(--acc));
}
.push .edge-fill { position: absolute; inset: 2px; border-radius: inherit; background: var(--btn-bg); }
.push .push-glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(120% 140% at 50% 120%, rgba(255, 255, 255, .35), transparent 60%); }
.push .push-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-150%); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); }
/* halo: prstenec tvaru tlačítka stojí, uvnitř se otáčí světlo (u protáhlého tlačítka
   by otáčení celého prstence vyčnívalo; ve vzoru je halo kolem kulatých ikon) */
.push .halo {
  position: absolute; inset: -6px; border-radius: 999px; padding: 1.5px; pointer-events: none; opacity: .9; z-index: -2; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.push .halo > i {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; margin-left: -60%; margin-top: -60%;
  background: conic-gradient(var(--acc), color-mix(in srgb, var(--acc) 40%, transparent) 22%, transparent 48%, transparent 74%, color-mix(in srgb, var(--acc2) 60%, transparent) 90%, var(--acc));
}
.mo-off .push .halo, .mo-off .push .edge-spin { display: none; }

/* 8) Terminál s ukázkou kontroly: skenovací linka, řádky, kurzor, dýchající hodnota */
.term { position: relative; margin: 28px 0 0; border-radius: 16px; overflow: hidden; background: var(--term-bg); color: var(--term-fg); font: 13px/1.75 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); text-align: left; }
.term .tb { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #2a2a3e; color: #9a9ab0; font-size: 12px; }
.term .tb i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.term .tb i:nth-child(1) { background: #ff006e; } .term .tb i:nth-child(2) { background: #ffb020; } .term .tb i:nth-child(3) { background: #00f5ff; }
.term pre { margin: 0; padding: 14px 18px; white-space: pre-wrap; overflow-x: auto; font: inherit; }
.term .ln { display: inline; }
.term .p { color: #ff5c9a; } .term .m { color: #9a9ab0; } .term .ok { color: #2fd57a; } .term .k { color: #ffb020; } .term .no { color: #ff5c9a; }
.term .v { position: relative; color: #00f5ff; }
.term .v::after { content: ""; position: absolute; inset: -2px -5px; border-radius: 4px; background: rgba(0, 245, 255, .18); opacity: 0; pointer-events: none; }
.term .cur { display: inline-block; width: 9px; height: 16px; background: #00f5ff; vertical-align: -3px; }
.term::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.term::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(0, 245, 255, .07), transparent); }
.term-note { margin: 8px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }

/* 9) Ilustrace (SVG pošty): dýchání, obrys, vlny, pulzující uzly a záře */
.art svg { transform-origin: 50% 50%; }
.art .o2 { fill: none; stroke: var(--acc); stroke-width: 2.4; opacity: 0; }
.art .wave { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.ba-before .art .wave, .ba-before.art .wave { stroke: var(--fail); }
.art .d { fill: var(--acc); }
.art .glow { fill: var(--acc); opacity: .25; }
.mo-off .art .glow { opacity: .5; }

/* 10) Indikátor „živě“ s pingem */
.eye { display: inline-flex; align-items: center; gap: 10px; }
.live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ok); opacity: 0; }

/* ---- Animace (názvy podle vzoru) ---- */
@keyframes moSkyA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -260px, 0); } }
@keyframes moSkyB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -340px, 0); } }
@keyframes moSkyC { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -460px, 0); } }
@keyframes moTwinkle { 0%, 100% { opacity: .06; } 50% { opacity: .16; } }
@keyframes moFall { from { transform: translate3d(0, -6px, 0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { transform: translate3d(0, 100vh, 0); opacity: 0; } }
@keyframes moDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(48px, 48px, 0); } }
@keyframes moGlow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes moDust { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate3d(10px, -60px, 0); opacity: 0; } }
@keyframes moLaserIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes moTravel { from { transform: translateX(-160px); } to { transform: translateX(100vw); } }
@keyframes moShineOnce { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes moShineOnceIn { from { transform: translateX(37.4%); } to { transform: translateX(-105.4%); } }
@keyframes moShine { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes moShineIn { from { transform: translateX(37.4%); } to { transform: translateX(-105.4%); } }
@keyframes moLine { 0% { opacity: 1; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes moDown { 0% { opacity: 0; transform: translateY(-100%); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
@keyframes moSweep { 0% { transform: translateX(-150%); } 30%, 100% { transform: translateX(300%); } }
@keyframes moTurn { to { transform: rotate(1turn); } }
@keyframes moTurnC { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes moScan { from { transform: translateY(-100%); opacity: 1; } to { transform: translateY(250%); opacity: 1; } }
@keyframes moRow { from { opacity: 0; } to { opacity: 1; } }
@keyframes moBlink { 50% { opacity: 0; } }
@keyframes moBreath { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes moBreatheArt { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes moOutline { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@keyframes moWave { 0% { opacity: 0; } 9% { opacity: .95; } 32%, 100% { opacity: 0; } }
@keyframes moNode { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes moNodeGlow { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes moPing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }

/* plné. Velké vrstvy pozadí (hvězdy, mřížka, záře) se hýbou jen o pár px za sekundu:
   po krocích (steps) se překreslují jen při posunu, ne každý snímek – bez GPU je to
   rozdíl ~60 → ~20 ms na snímek a pohyb vypadá stejně. */
.mo-full .sky i:nth-child(1) { animation: moSkyA 120s steps(260) infinite; }
.mo-full .sky i:nth-child(2) { animation: moSkyB 75s steps(340) infinite; }
.mo-full .sky i:nth-child(3) { animation: moSkyC 44s steps(230) infinite; }
.mo-full .sky::before { animation: moTwinkle 9s steps(18) infinite; }
.mo-full body::before { animation: moDrift 18s steps(48) infinite; }
.mo-full body::after { animation: moGlow 16s steps(24) infinite alternate; }
.mo-full .dust { animation: moDust 6s ease-in infinite; }
.mo-full .dust:nth-of-type(2) { animation-delay: -2s; animation-duration: 7s; }
.mo-full .dust:nth-of-type(3) { animation-delay: -4s; animation-duration: 8s; }
.mo-full .dust:nth-of-type(4) { animation-delay: -1s; animation-duration: 9s; }
.mo-full .top::after { animation: moLaserIn 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.mo-full .top::before { animation: moTravel 7s linear infinite; }
.mo-full .hero h1 .shine { animation: moShineOnce 1.8s ease-out .5s both; }
.mo-full .hero h1 .shine > span { animation: moShineOnceIn 1.8s ease-out .5s both; }
.mo-full .hero h1.shine-again .shine { animation: moShine 1.8s ease-in-out both; }
.mo-full .hero h1.shine-again .shine > span { animation: moShineIn 1.8s ease-in-out both; }
.mo-full .section .wrap > .eyebrow.rv.in::after { animation: moLine .9s ease-out .15s both; }
.mo-full .push .edge-spin { animation: moTurnC 7s linear infinite; }
.mo-full .push .push-sweep { animation: moSweep 3.6s ease-in-out 1s infinite; }
.mo-full .push .push-glow { animation: moGlow 2.8s ease-in-out infinite; }
.mo-full .term::before { animation: moScan 5s linear infinite; }
.fx.mo-full .term.rv .ln { opacity: 0; }
.mo-full .term.rv.in .ln { animation: moRow .3s ease-out both; animation-delay: calc(var(--k, 0) * 110ms + .25s); }
.mo-full .term .v::after { animation: moBreath 3.6s ease-in-out 1.2s infinite; }
.mo-full .art .d { animation: moNode 3.2s ease-in-out infinite; }
.mo-full .art .d:nth-of-type(3n) { animation-delay: -1.1s; }
.mo-full .art .d:nth-of-type(3n+1) { animation-delay: -2.2s; }
.mo-full .live::after { animation: moPing 2s ease-out infinite; }

/* plné i lehké (jako ve vzoru) */
:is(.mo-full, .mo-lite) .push .halo > i { animation: moTurn 7s linear infinite; }
:is(.mo-full, .mo-lite) .push:hover .halo > i { animation-duration: 1.6s; }
:is(.mo-full, .mo-lite) .term .cur { animation: moBlink 1s steps(1) infinite; }
:is(.mo-full, .mo-lite) .art svg { animation: moBreatheArt 4.4s ease-in-out infinite; }
:is(.mo-full, .mo-lite) .art .o2 { animation: moOutline 4.4s ease-in-out infinite; }
:is(.mo-full, .mo-lite) .art .wave { animation: moWave 6s ease-in-out infinite; }
.art .w1 { animation-delay: .18s !important; } .art .w2 { animation-delay: .36s !important; }
:is(.mo-full, .mo-lite) .art .glow { animation: moNodeGlow 4.5s ease-in-out infinite; }
.art .glow.g1 { animation-delay: 1.5s !important; } .art .glow.g2 { animation-delay: 3s !important; }
:root[data-theme="dark"]:is(.mo-full, .mo-lite) .sky b { display: block; animation: moFall 10s linear infinite; }
.mo-lite .sky i:nth-child(3) { display: none; }
@media (max-width: 760px) { .mo-full .sky i:nth-child(3) { display: none; } }
@media (hover: hover) {
  :is(.mo-full, .mo-lite) .fxcard:hover .sweep { animation: moDown .7s ease-out 1; }
}

/* mimo záběr stojí jen dekorace (obsah nikdy), ve skryté záložce vše */
.pz :is(.dust, .d, .live, .halo > i, .edge-spin, .push-glow, .push-sweep, .wave, .glow, .o2, .art svg),
.pz .live::after, .pz.term::before, .pz .term::before { animation-play-state: paused !important; }
.mo-pause body::before, .mo-pause body::after, .mo-pause .top::before { animation-play-state: paused !important; }
.art .glow-bad { fill: var(--fail); }
.art .o2-bad { stroke: var(--fail); }
.btn-label { display: inline-flex; align-items: center; gap: .5em; }
.term-wrap { margin: 0; }
@media (max-width: 600px) { .term { font-size: 11.5px; } .term pre { padding: 12px 12px; } }
.inq-done .inq-again { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--accent-text); background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* =====================================================================
   PŘESTAVBA PODLE VZORU (28. 10.): samostatné stránky, hlavička s čipy,
   hero jako rámovaný panel s konzolí, laboratorní vzhled. Struktura podle
   cryptospecting.com (jen principy), kód a efekty z vzor/ (frankieresearch.space).
   ===================================================================== */
:root { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mono { font-family: var(--mono); }
:root, :root[data-theme="light"] { --grid: rgba(26, 26, 46, .08); --surf: #ffffff; }
:root[data-theme="dark"] { --grid: rgba(255, 255, 255, .06); --surf: #23233a; }

/* ---- Hlavička: logo, čipy (každý vede na stránku), nástroje ---- */
.top-in { gap: 18px; height: 64px; }
.chips { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; padding: 9px 11px; border: 1px solid transparent; border-radius: 999px; transition: color .2s, border-color .2s, background-color .2s;
}
.chip:hover { color: var(--text); border-color: var(--line); }
.chip[aria-current="page"] { color: var(--text); border-color: var(--line); background: var(--bg-2); }
.chip-start { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chip-start::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; box-shadow: 0 0 8px var(--accent); }
.tools { display: flex; gap: 10px; align-items: center; flex: none; }
.cta-top { padding: .55em 1em; font-size: .9rem; }
@media (max-width: 1100px) {
  .top-in { flex-wrap: wrap; height: auto; padding: 10px 0 0; row-gap: 6px; }
  .logo { flex: 1; }
  .chips { order: 3; flex-basis: 100%; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  .cta-top { display: none; }
  .theme-toggle { margin-left: 0; }
}

/* ---- Spodní lišta na mobilu (Domů, Kontrola, Chyby, Audit, Objednat) ---- */
.bottombar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .bottombar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .bottombar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--muted); text-decoration: none; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; border-radius: 12px; }
  .bottombar a[aria-current="page"] { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
}

/* ---- Stránky ---- */
.page > .section:first-child { border-top: 0; padding-top: clamp(40px, 6vw, 72px); }
.section > .wrap > .page-h { text-align: center; margin-inline: auto; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.blk { padding: clamp(40px, 6vw, 64px) 0 0; }
.blk h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 22px; }
.kick { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 10px; position: relative; }

/* ---- Hero: rámovaný tmavý panel (tmavý i ve světlém vzhledu, jako okno aplikace) ---- */
.hero { text-align: left; padding: 28px 0 0; overflow: visible; }
.hero .hero-bg, .hero::before { display: none; }
.panel {
  --text: #f5f5f5; --muted: #b8b8c8; --line: #3a3a52; --accent-text: #00f5ff; --magenta-text: #ff5c9a; --btn-bg: #00f5ff; --btn-text: #1a1a2e; --bg: #12121f; --bg-2: #23233a; --acc: #00f5ff; --acc2: #ff5c9a;
  position: relative; overflow: hidden; isolation: isolate; color: var(--text);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: 24px; border: 1px solid #34344c;
  background:
    radial-gradient(600px 380px at 18% 30%, rgba(0, 245, 255, .14), transparent 70%),
    radial-gradient(520px 320px at 92% 0%, rgba(255, 0, 110, .14), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    #14142a;
  box-shadow: 0 40px 120px -50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 245, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .panel { box-shadow: 0 40px 100px -40px rgba(26, 26, 46, .45), 0 0 0 1px rgba(0, 117, 122, .18); }
/* grain a scanline uvnitř panelu */
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.panel .scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(0, 245, 255, .07), transparent); }
.panel > * { position: relative; z-index: 1; min-width: 0; }
.eye { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .hero-title { font-size: clamp(2.1rem, 3.7vw, 3.15rem); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 20px; max-width: none; text-align: left; text-wrap: balance; }
.hero .hero-title .grad { display: inline-block; }
/* Okno lesku čeká mimo slovo; bez ořezu z něj prosvítal kus textu („ghost“ vlevo od
   „Najdeme proč.“). overflow: clip nemění účaří řádku (na rozdíl od hidden), clip-path
   je pojistka pro starší Safari. */
.grad { overflow: clip; clip-path: inset(0); }
.hl { font-style: normal; text-shadow: -1px 0 rgba(255, 0, 110, .45), 1px 0 rgba(0, 245, 255, .45); }
.hl-a { color: #00f5ff; }
.hl-b { color: #ff5c9a; }
.panel .grad { background: linear-gradient(90deg, #00f5ff, #ff5c9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel .grad::after { background: linear-gradient(90deg, #ff5c9a, #00f5ff); -webkit-background-clip: text; background-clip: text; }
.panel .lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 0 0 26px; max-width: 34em; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acts-more { margin: 18px 0 0; }
.acts-more .link-arrow { font-size: 1rem; }
.panel .btn-ghost { color: var(--text); border-color: var(--line); }
.panel-console { margin: 0; }
.panel .term { margin: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
.tb-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: #2fd57a; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.term .st { font-weight: 700; }
.term .st-ok { color: #2fd57a; } .term .st-k { color: #ffb020; } .term .st-no { color: #ff5c9a; }
.panel .term-note { text-align: left; color: var(--muted); font-size: 11.5px; letter-spacing: .04em; margin-top: 10px; }
.panel .term-note a { color: var(--accent-text); }
@media (max-width: 960px) { .panel { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .panel { padding: 22px 18px; border-radius: 18px; } .acts .btn { width: 100%; } }

/* ---- Stavový pás ---- */
.strip { padding: 18px 0 0; }
.strip-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf); color: var(--text); text-decoration: none;
  transition: border-color .3s, transform .3s;
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.tile-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tile-num { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--text); }
.tile-txt { grid-column: 2; color: var(--muted); font-size: .92rem; line-height: 1.35; }
.tile-go { grid-row: 1 / 3; grid-column: 3; color: var(--accent-text); font-family: var(--mono); transition: transform .2s; }
.tile:hover .tile-go { transform: translateX(3px); }
@media (max-width: 860px) { .strip-in { grid-template-columns: 1fr; } }

/* ---- Karty rozcestníku, nálezů a „proč my“ ---- */
.hub, .tops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hubcard, .topcard {
  display: block; position: relative; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surf);
  color: var(--text); text-decoration: none; transition: border-color .3s, box-shadow .3s;
}
.hubcard::before, .topcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--acc), transparent 70%); }
.topcard::before { background: linear-gradient(90deg, var(--acc2), transparent 70%); }
.hubcard:hover, .topcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45), 0 0 16px 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.hud { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.topcard .hud { color: var(--magenta-text); }
.glyph { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .3s; }
.glyph svg { width: 20px; height: 20px; }
.hubcard:hover .glyph { transform: scale(1.08); }
.hubcard b, .topcard b { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.hubcard p, .topcard p { margin: 0; color: var(--muted); font-size: .93rem; }
.nw { position: absolute; top: 16px; right: 18px; font: 16px/1 var(--mono); color: var(--accent-text); opacity: .5; transition: opacity .2s, transform .2s; }
.hubcard:hover .nw, .topcard:hover .nw { opacity: 1; transform: translate(2px, -2px); }
.why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.why li { padding: 18px 20px; border-left: 2px solid var(--acc); background: color-mix(in srgb, var(--surf) 70%, transparent); border-radius: 0 14px 14px 0; color: var(--muted); }
.why b { display: block; color: var(--text); margin-bottom: 4px; }
.cta-panel {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(22px, 3vw, 32px);
  border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(500px 200px at 10% 0%, var(--glow), transparent 70%), var(--surf);
}
.cta-panel h2 { margin: 0 0 6px; }
.cta-panel p { margin: 0; }
.steps3 { grid-template-columns: repeat(3, 1fr); }
.steps3 .link-arrow { display: inline-block; margin-top: 12px; font-size: 1rem; }
@media (max-width: 960px) { .hub, .tops, .why, .steps3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hub, .tops, .why, .steps3 { grid-template-columns: 1fr; } }

/* ---- Patička: 4 sloupce ---- */
.foot { margin-top: clamp(56px, 8vw, 96px); background: color-mix(in srgb, var(--bg-2) 60%, var(--bg)); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.foot-h { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); margin: 0 0 10px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.foot-col a { color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--accent-text); }
.foot-bottom { padding-top: 18px; display: grid; gap: 6px; }
.foot-bottom p { margin: 0; }
.foot-bottom .mono { font-size: 12px; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Efekty na úroveň vzoru (tabulka dozora) ---- */
/* mřížka a prach o krok výraznější, ve světlém vlastní barvy */
:root[data-theme="light"] .dust { background: #c8005a; box-shadow: 0 0 8px #c8005a; }
.hero .dust { z-index: 3; }
/* laser v hlavičce výraznější */
.top::after { height: 3px; box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 60%, transparent); }
:root[data-theme="light"] .top::after { opacity: 1; }
/* karty: kónický okraj při najetí */
.fxcard .card-edge {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fxcard .card-edge > i { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin-left: -75%; margin-top: -75%; background: conic-gradient(var(--acc), color-mix(in srgb, var(--acc2) 70%, transparent) 18%, transparent 36%, transparent 64%, color-mix(in srgb, var(--acc) 50%, transparent) 82%, var(--acc)); }
:is(.mo-full, .mo-lite) .fxcard:hover .card-edge { opacity: 1; }
.mo-full .fxcard:hover .card-edge > i { animation: moTurn 3.2s linear infinite; }
/* hlavní tlačítko: puls */
.pulse .pulse-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--acc); opacity: 0; pointer-events: none; z-index: -3; }
@keyframes moPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.22, 1.6); opacity: 0; } }
@keyframes moBoot { 0% { opacity: 0; transform: scale(.985); } 18% { opacity: 1; } 26% { opacity: .55; } 40%, 100% { opacity: 1; transform: none; } }
@keyframes moScanline { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
@keyframes moScanIn { from { opacity: 0; } to { opacity: 1; } }
:is(.mo-full, .mo-lite) .panel { animation: moBoot .9s ease-out both; }
.mo-full .panel .scan { animation: moScanline 6s linear 1s infinite, moScanIn .4s 1s both; }
.mo-full .pulse .pulse-ring { animation: moPulse 2.4s ease-out 1.5s infinite; }
.pz .pulse-ring, .pz.panel .scan, .pz .panel .scan { animation-play-state: paused !important; }
/* odhalování kratší a svižnější */
.mo-full .rv { transform: translate3d(0, 18px, 0); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
/* dekódování nadpisu: písmena dočasně v monospace, ať text neskáče */
.hl.decoding { font-family: var(--mono); letter-spacing: -0.04em; }

/* ---- Přechody mezi stránkami (View Transitions), hlavička a lišta stojí ---- */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
.bottombar { view-transition-name: bottombar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.mo-off::view-transition-group(*), .mo-off::view-transition-old(*), .mo-off::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* podtržení i u štítků bloků (.kick), zarovnané vlevo */
.blk .wrap > .kick::after {
  content: ""; position: absolute; left: 0; width: 120px; top: -14px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 35%, transparent);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.mo-full .blk .wrap > .kick.rv.in::after { animation: moLine .9s ease-out .15s both; }

/* Hvězdy jako dlaždice SVG: vykreslí se jednou a jen se opakují (radial-gradient se
   překresloval při každé změně nad nebem, bez GPU to stálo ~13 ms na snímek). */
:root .sky i:nth-child(1),:root[data-theme="light"] .sky i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='18.2' cy='33.8' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='80.6' cy='184.6' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='135.2' cy='70.2' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='202.8' cy='150.8' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='236.6' cy='23.4' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='49.4' cy='228.8' r='0.85' fill='rgba(0,117,122,.18)'/%3E%3Ccircle cx='171.6' cy='241.8' r='0.85' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='111.8' cy='127.4' r='0.85' fill='rgba(0,117,122,.22)'/%3E%3C/svg%3E"); }
:root .sky i:nth-child(2),:root[data-theme="light"] .sky i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Ccircle cx='47.6' cy='122.4' r='1.10' fill='rgba(200,0,90,.22)'/%3E%3Ccircle cx='197.2' cy='40.8' r='1.10' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='282.2' cy='251.6' r='1.10' fill='rgba(0,117,122,.22)'/%3E%3Ccircle cx='122.4' cy='278.8' r='1.10' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='241.4' cy='153.0' r='1.10' fill='rgba(0,117,122,.18)'/%3E%3C/svg%3E"); }
:root .sky i:nth-child(3),:root[data-theme="light"] .sky i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Ccircle cx='101.2' cy='110.4' r='1.45' fill='rgba(200,0,90,.22)'/%3E%3Ccircle cx='308.2' cy='294.4' r='1.45' fill='rgba(26,26,46,.22)'/%3E%3Ccircle cx='404.8' cy='142.6' r='1.45' fill='rgba(0,117,122,.22)'/%3E%3Ccircle cx='188.6' cy='418.6' r='1.45' fill='rgba(0,117,122,.18)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sky i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='18.2' cy='33.8' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='80.6' cy='184.6' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='135.2' cy='70.2' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='202.8' cy='150.8' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='236.6' cy='23.4' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='49.4' cy='228.8' r='0.85' fill='rgba(0,245,255,.45)'/%3E%3Ccircle cx='171.6' cy='241.8' r='0.85' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='111.8' cy='127.4' r='0.85' fill='rgba(0,245,255,.6)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sky i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Ccircle cx='47.6' cy='122.4' r='1.10' fill='rgba(255,0,110,.7)'/%3E%3Ccircle cx='197.2' cy='40.8' r='1.10' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='282.2' cy='251.6' r='1.10' fill='rgba(0,245,255,.6)'/%3E%3Ccircle cx='122.4' cy='278.8' r='1.10' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='241.4' cy='153.0' r='1.10' fill='rgba(0,245,255,.45)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sky i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Ccircle cx='101.2' cy='110.4' r='1.45' fill='rgba(255,0,110,.7)'/%3E%3Ccircle cx='308.2' cy='294.4' r='1.45' fill='rgba(245,245,245,.9)'/%3E%3Ccircle cx='404.8' cy='142.6' r='1.45' fill='rgba(0,245,255,.6)'/%3E%3Ccircle cx='188.6' cy='418.6' r='1.45' fill='rgba(0,245,255,.45)'/%3E%3C/svg%3E"); }

/* konzole v hero: řádky naskakují postupně už po načtení (nečeká na odhalení) */
:is(.mo-full, .mo-lite) .panel .term .ln { animation: moRow .3s ease-out both; animation-delay: calc(var(--k, 0) * 110ms + .7s); }

/* ---- Vady po přestavbě (28. 10.) ---- */
/* 2) ikona v čtverečku karty vystředěná vodorovně i svisle */
.glyph { display: grid; place-items: center; }
.glyph svg { display: block; margin: 0; }
/* 3) hlavička: pod ní nesmí prosvítat text stránky */
.top {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: var(--bg); } }
.bottombar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
/* 4) aktivní úvod: logo (desktop) */
.logo[aria-current="page"] { position: relative; }
.logo[aria-current="page"]::after {
  content: ""; position: absolute; left: 38px; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 50%, transparent);
}