/* ==========================================================================
   site.css — Matěj Mandelík. Layout and components; every literal lives in tokens.css.
   Order: base → layout → buttons/controls → header → hero → drawer → compass → tools →
          about/reviews → contact → office → career → FAQ → second opinion → footer → sticky →
          motion → hover → responsive → print
   ========================================================================== */

/* ---------- base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 84px; scroll-padding-bottom: 110px; overflow-x: clip; background: var(--c-bg); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--c-link); text-decoration: none; border-bottom: 1px solid var(--c-link-line); }
::selection { background: var(--c-mint-100); color: var(--c-ink); }
*:focus-visible { outline: 2px solid var(--c-brand-700); outline-offset: 2px; }
.section-dark *:focus-visible, .site-footer *:focus-visible, .stickybar *:focus-visible { outline-color: var(--c-mint); }
button { font-family: inherit; }
button, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-weight: var(--fw-regular); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-skip);
  padding: 12px 18px; border: 0; background: var(--c-brand-900); color: var(--c-white);
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- layout ---------- */
.wrap { box-sizing: border-box; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.section-pad { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-pad-sm { padding: var(--space-section-sm) var(--gutter); }
.section-dark { background: var(--c-brand-900); color: var(--c-bg); padding-left: var(--gutter); padding-right: var(--gutter); }
.section-dark.section-pad { padding-left: var(--gutter); padding-right: var(--gutter); }
.section-tint { background: var(--c-bg-2); padding: var(--space-section) var(--gutter); }
.mesh { position: relative; isolation: isolate; }
.mesh::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  background: var(--g-mesh); filter: blur(28px);
}
.mesh--dark::before { background: var(--g-mesh-dark); }
.glass {
  background: var(--c-white-a62);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-white-a70);
  box-shadow: var(--shadow-glass);
}
.glass-dark {
  background: var(--c-white-a07);
  -webkit-backdrop-filter: var(--blur-glass-dark); backdrop-filter: var(--blur-glass-dark);
  border: 1px solid var(--c-white-a14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--c-white-a92); }
  .glass-dark { background: var(--c-brand-900); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- type ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono-4); text-transform: uppercase; color: var(--c-brand-700);
}
.eyebrow--dark { color: var(--c-on-dark-muted); }
.h-display { margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: -0.034em; line-height: var(--lh-heading); }
.h-display--dark { color: var(--c-white); }
.h-section { margin: 0; max-width: 26ch; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2c); letter-spacing: var(--ls-tight-1); line-height: var(--lh-heading); }
.h-section--narrow { max-width: 22ch; }
.h-bold { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2b); letter-spacing: var(--ls-tight-3); line-height: var(--lh-heading); }
.h-bold--dark { color: var(--c-white); }
.lead-dark { margin: 0; max-width: 58ch; font-size: var(--fs-xl); line-height: var(--lh-body); color: var(--c-on-dark); }
.lead-dark--sm { max-width: 56ch; font-size: var(--fs-lg); }
.note { margin: 0; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-muted); }
.note-dark { margin: 6px 0 0; max-width: 44ch; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-on-dark-muted); }
.note-dark--wide { margin: 0; max-width: 78ch; }
.grad-text { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-dark { margin: 0; max-width: 52ch; padding-left: 18px; border-left: 2px solid var(--c-on-dark-muted); font-size: var(--fs-lg); color: var(--c-white); }

/* ---------- buttons ---------- */
.btn-grad, .btn-glass, .btn-frost, .btn-light, .btn-line-dark, .btn-glass-dark, .btn-dark, .btn-outline, .btn-next {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); border-bottom-width: 1px; font-family: inherit; font-size: var(--fs-md);
  line-height: var(--lh-body); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-mid) ease, transform var(--dur-fast) ease;
}
.btn-grad {
  padding: 16px 26px; border: 1px solid var(--c-white-a18); border-radius: var(--r-pill);
  background: var(--g-btn); box-shadow: var(--shadow-btn); color: var(--c-white); font-weight: var(--fw-medium);
}
.btn-glass {
  padding: 16px 24px; border-radius: var(--r-pill); color: var(--c-ink);
  background: var(--c-white-a62); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-white-a70); box-shadow: var(--shadow-glass);
}
.btn-frost {
  padding: 15px 24px; border-radius: var(--r-pill); color: var(--c-ink);
  background: var(--c-white-a60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--c-ink-a12);
}
.btn-lg { padding: 18px 30px; font-size: var(--fs-base); }
.btn-glass.btn-lg { padding: 18px 26px; }
.btn-light {
  padding: 16px 26px; border: 1px solid var(--c-bg); border-radius: var(--r-pill);
  background: var(--c-bg); color: var(--c-ink); font-weight: var(--fw-medium);
}
.btn-sm { padding: 14px 20px; font-size: var(--fs-md); white-space: nowrap; }
.btn-line-dark {
  padding: 16px 22px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-md);
  background: transparent; color: var(--c-white);
}
.btn-line-dark--muted { color: var(--c-on-dark); }
.btn-sq { border-radius: var(--r-md); }
.btn-glass-dark {
  padding: 16px 24px; border-radius: var(--r-pill); color: var(--c-white);
  background: var(--c-white-a07); -webkit-backdrop-filter: var(--blur-glass-dark); backdrop-filter: var(--blur-glass-dark);
  border: 1px solid var(--c-white-a14);
}
.btn-text-dark {
  min-height: var(--tap); padding: 15px 18px; border: 0; background: transparent; cursor: pointer;
  color: var(--c-on-dark-muted); font-size: var(--fs-md); text-decoration: underline;
}
.btn-dark { width: 100%; padding: 15px; border: 1px solid var(--c-brand-900); border-radius: var(--r-md); background: var(--c-brand-900); color: var(--c-white); font-weight: var(--fw-medium); }
.btn-outline { width: 100%; padding: 15px; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); background: transparent; color: var(--c-ink); }
.btn-next { padding: 15px 24px; border: 1px solid var(--c-bg); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-ink); font-weight: var(--fw-medium); }
.btn-next:disabled { background: transparent; border-color: var(--c-on-dark-a20); color: var(--c-on-dark-dim); cursor: not-allowed; }

.chip {
  padding: 12px 18px; border: 1px solid var(--c-line-soft); border-radius: var(--r-pill);
  background: transparent; color: var(--c-ink-2); font-size: var(--fs-sm); cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-mid) ease;
}

/* sliders with − / + */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper__btn {
  flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 1px solid var(--c-line-soft); border-radius: var(--r-md);
  background: transparent; color: var(--c-ink-2); font-size: var(--fs-base); cursor: pointer;
}
.stepper__btn--dark { border-color: var(--c-on-dark-a35); color: var(--c-white); font-size: var(--fs-xl); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); margin: 0; background: transparent; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 2px; background: var(--c-control-line); }
.range::-moz-range-track { height: 2px; background: var(--c-control-line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 2px solid var(--c-white); border-radius: 50%; background: var(--c-brand-900); box-shadow: 0 0 0 1px var(--c-brand-900); }
.range::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--c-white); border-radius: 50%; background: var(--c-brand-900); }
.range--dark::-webkit-slider-runnable-track { background: var(--c-on-dark-a40); }
.range--dark::-moz-range-track { background: var(--c-on-dark-a40); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); border-width: 0 0 1px; }
.site-header__inner { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--container); margin: 0 auto; padding: 10px 16px; }
.logo { display: flex; flex: none; align-items: center; gap: 10px; border: 0; }
.logo__mark { position: relative; flex: none; width: 26px; height: 26px; }
.logo__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--g-logo); }
.logo__hole { position: absolute; inset: 5px; border-radius: 50%; background: var(--c-bg); }
.logo__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight-0); color: var(--c-ink); white-space: nowrap; }
.site-nav {
  display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 2px; min-width: 0; margin-left: auto;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  display: flex; flex: none; align-items: center; min-height: var(--tap); padding: 0 9px; border: 0;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-1); text-transform: uppercase;
  color: var(--c-muted); white-space: nowrap;
}
.site-nav .site-nav__accent { color: var(--c-brand-700); }
.site-header__cta { flex: none; padding: 0 16px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: var(--ls-mono-1); text-transform: uppercase; white-space: nowrap; }
/* menu button: shown only by nav.js below the desktop breakpoint (02-sections.css) */
.menu-btn {
  display: none; flex: none; align-items: center; gap: 8px; min-height: var(--tap); margin-left: auto; padding: 0 14px;
  border: 1px solid var(--c-line-soft); border-radius: var(--r-pill); background: var(--c-white-a55); color: var(--c-ink);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-1); text-transform: uppercase; cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.menu-btn__icon { position: relative; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: background-color var(--dur-fast) ease; }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}
.menu-btn__icon::before { transform: translateY(-5px); }
.menu-btn__icon::after { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] { border-color: var(--c-ink); background: var(--c-white); }
.menu-btn[aria-expanded="true"] .menu-btn__icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: rotate(-45deg); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- hero ---------- */
.hero { box-sizing: border-box; max-width: var(--container); margin: 0 auto; padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(24px, 3vw, 40px); }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: center; }
.hero__copy { display: grid; gap: 20px; align-content: center; min-width: 0; max-width: 30rem; }
.hero__h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight-4); line-height: var(--lh-heading); text-wrap: balance; }
.hero__lead { margin: 0; max-width: 38ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; max-width: 360px; margin: 0; padding-top: 6px; }
.hero__stats > div { display: flex; flex-direction: column-reverse; }
.stat__value { margin: 0; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight-2); line-height: var(--lh-tight); }
.stat__value--wide { font-size: var(--fs-stat-wide); white-space: nowrap; }
.stat__label { margin-top: 5px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-muted); }
.hero__media { position: relative; min-width: 0; }
.hero__photo { position: relative; width: min(720px, calc(100% + 16px)); margin-left: auto; margin-right: -16px; }
.hero__glow { position: absolute; inset: -5% -5% -5% -7%; border-radius: var(--r-hero-glow); background: var(--g-photo-glow); filter: blur(26px); }
.hero__frame { position: relative; overflow: hidden; border-radius: var(--r-hero-photo); background: var(--c-photo-bg); box-shadow: var(--shadow-photo); }
.hero__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.14; object-fit: cover; object-position: 46% 0%; }
.hero__quote { position: absolute; right: 16px; bottom: -14px; z-index: 2; max-width: min(320px, 100%); padding: 14px 16px; border-radius: var(--r-xl); }
.hero__quote p, .about__quote p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.events { margin-top: clamp(28px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--c-line); }
.events__h { margin: 0 0 14px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.events__list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- drawer (native dialog) ---------- */
.drawer {
  box-sizing: border-box; position: fixed; inset: 0 0 0 auto; width: min(520px, 100%); height: 100%; max-width: 100%; max-height: 100%;
  margin: 0 0 0 auto; padding: 0; overflow: auto; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-ink);
  box-shadow: var(--shadow-dialog);
  overscroll-behavior: contain;
}
.drawer::backdrop { background: var(--c-ink-a55); }
.drawer__body { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 3vw, 32px); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-3); text-transform: uppercase; color: var(--c-brand-700); }
.drawer__close { width: var(--tap); height: var(--tap); border: 1px solid var(--c-line); border-radius: var(--r-md); background: transparent; color: var(--c-muted); font-size: var(--fs-base); cursor: pointer; }
.drawer__item { display: grid; gap: 16px; }
.drawer__h { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3v); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); }
.drawer__rows { display: grid; gap: 14px; margin: 0; }
.drawer__rows > div { display: grid; gap: 4px; }
.drawer__rows dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-muted); }
.drawer__rows dd { margin: 0; font-size: var(--fs-md2); color: var(--c-ink-2); }
.drawer__actions { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c-line); }

/* ---------- compass ---------- */
.kompas { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); }
.kompas__intro { display: grid; gap: 22px; }
.kompas__h { max-width: 30ch; font-size: var(--fs-h2); }
.kompas__bullets { display: grid; gap: 8px; max-width: 62ch; margin: 0; padding-left: 20px; font-size: var(--fs-base); color: var(--c-on-dark); }
.kompas__intro .btn-row { gap: 12px; padding-top: 4px; }
.kompas__q { display: grid; gap: 26px; align-content: start; min-height: clamp(420px, 52vh, 540px); }
.kompas__progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-muted); }
.progress { height: 2px; margin-top: 10px; background: var(--c-on-dark-a25); }
.progress--short { max-width: 320px; margin-top: 0; }
.progress__fill { width: var(--pct, 0%); height: 2px; background: var(--c-white); transition: width var(--dur-mid) ease; }
.kompas__qhead { display: grid; gap: 10px; }
.kompas__qtext { margin: 0; max-width: 32ch; font-family: var(--font-display); font-size: var(--fs-h3q); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); color: var(--c-white); }
.kompas__qtext:focus, .kompas__headline:focus, .so__vh:focus, .ask-done:focus, .kompas__analysis-line:focus { outline: none; }
.kompas__qnote { margin: 0; max-width: 56ch; font-size: var(--fs-md2); color: var(--c-on-dark-muted); }
.kompas__slider { display: grid; gap: 14px; max-width: 520px; }
.kompas__slider-top { display: flex; align-items: baseline; justify-content: space-between; }
.kompas__slider-label { font-size: var(--fs-md); color: var(--c-on-dark); }
.kompas__slider-value { font-family: var(--font-mono); font-size: var(--fs-num-lg); color: var(--c-white); font-variant-numeric: tabular-nums; }
.kompas__minmax { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-dark-muted); }
.kompas__text { display: grid; gap: 10px; max-width: 560px; }
.kompas__text-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-muted); }
.kompas__text-help { margin: 0; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-on-dark-muted); }
.kompas__options { display: grid; gap: 8px; max-width: 620px; }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-lg); background: transparent;
  color: var(--c-on-dark); font-size: var(--fs-base); text-align: left; cursor: pointer;
}
.opt[aria-pressed="true"] { border-color: var(--c-bg); background: var(--c-on-dark-a14); color: var(--c-white); }
.opt__key { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-dark-muted); }
.kompas__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--c-on-dark-a20); }
.kompas__analysis { display: grid; gap: 16px; align-content: center; min-height: clamp(300px, 40vh, 420px); }
.kompas__analysis-line { margin: 0; max-width: 30ch; font-family: var(--font-display); font-size: var(--fs-h3t); letter-spacing: var(--ls-tight); color: var(--c-white); }
.kompas__result { display: grid; gap: 28px; }
.kompas__result-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.tag-dark { padding: 5px 10px; border: 1px solid var(--c-on-dark-muted); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-white); }
.kompas__headline { max-width: 30ch; font-size: var(--fs-h2d); }
.kompas__sub { margin: 0; max-width: 60ch; font-size: var(--fs-lg2); color: var(--c-on-dark); }
.kompas__overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: center; padding-top: 26px; border-top: 1px solid var(--c-on-dark-a20); }
.ring-wrap { display: grid; place-items: center; }
.ring {
  --seg1: var(--c-on-dark-a18); --seg2: var(--c-on-dark-a18); --seg3: var(--c-on-dark-a18); --seg4: var(--c-on-dark-a18); --seg5: var(--c-on-dark-a18);
  position: relative; width: min(240px, 64vw); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--seg1) 0deg 68deg, transparent 68deg 72deg, var(--seg2) 72deg 140deg, transparent 140deg 144deg, var(--seg3) 144deg 212deg, transparent 212deg 216deg, var(--seg4) 216deg 284deg, transparent 284deg 288deg, var(--seg5) 288deg 356deg, transparent 356deg 360deg);
  animation: mm-seg 500ms ease both;
}
.ring[data-s1="weak"] { --seg1: var(--c-bg); } .ring[data-s1="watch"] { --seg1: var(--c-mint); } .ring[data-s1="ok"] { --seg1: var(--c-brand-700); }
.ring[data-s2="weak"] { --seg2: var(--c-bg); } .ring[data-s2="watch"] { --seg2: var(--c-mint); } .ring[data-s2="ok"] { --seg2: var(--c-brand-700); }
.ring[data-s3="weak"] { --seg3: var(--c-bg); } .ring[data-s3="watch"] { --seg3: var(--c-mint); } .ring[data-s3="ok"] { --seg3: var(--c-brand-700); }
.ring[data-s4="weak"] { --seg4: var(--c-bg); } .ring[data-s4="watch"] { --seg4: var(--c-mint); } .ring[data-s4="ok"] { --seg4: var(--c-brand-700); }
.ring[data-s5="weak"] { --seg5: var(--c-bg); } .ring[data-s5="watch"] { --seg5: var(--c-mint); } .ring[data-s5="ok"] { --seg5: var(--c-brand-700); }
.ring__inner { position: absolute; inset: 12%; display: grid; place-items: center; border-radius: 50%; background: var(--c-brand-900); text-align: center; }
.ring__inner::after { content: ""; position: absolute; inset: 6.6%; border: 1px solid var(--c-on-dark-a20); border-radius: 50%; pointer-events: none; }
.ring__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-on-dark-muted); }
.ring__value { max-width: 9ch; margin-top: 8px; font-family: var(--font-display); font-size: var(--fs-ring); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); color: var(--c-white); }
.kompas__areas { display: grid; gap: 10px; }
.areas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.area { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.area__swatch { width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--c-on-dark-a40); background: transparent; }
.area[data-state="weak"] .area__swatch { border-color: var(--c-bg); background: var(--c-bg); }
.area[data-state="watch"] .area__swatch { border-color: var(--c-mint); background: var(--c-mint); }
.area[data-state="ok"] .area__swatch { border-color: var(--c-brand-400); background: var(--c-brand-700); }
.area__label { font-size: var(--fs-md); color: var(--c-on-dark-muted); }
.area[data-state="weak"] .area__label, .area[data-state="watch"] .area__label { color: var(--c-white); }
.area[data-state="ok"] .area__label { color: var(--c-on-dark); }
.area__state { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-dark-muted); }
.kompas__priorities { display: grid; gap: 14px; padding-top: 26px; border-top: 1px solid var(--c-on-dark-a20); }
.priorities { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.priority { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid var(--c-on-dark-muted); }
.priority__head { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-white); }
.priority__why { margin: 0; max-width: 70ch; font-size: var(--fs-base); color: var(--c-on-dark); }
.leave-it { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--c-on-dark-a30); }
.leave-it p { margin: 0; max-width: 70ch; font-size: var(--fs-base); color: var(--c-white); }
.kompas__method { padding-top: 20px; border-top: 1px solid var(--c-on-dark-a20); }
.summary-dark { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-white); }
.method { display: grid; gap: 16px; margin-top: 18px; }
.method__item { display: grid; gap: 6px; }
.method__label { font-size: var(--fs-md); color: var(--c-white); }
.method__list { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--c-on-dark-muted); }
.kompas__actions { padding-top: 22px; border-top: 1px solid var(--c-on-dark-a20); }
summary { cursor: pointer; border-radius: var(--r-sm); padding: 6px 8px; margin-left: -8px; }

/* ---------- tools ---------- */
.tools__wrap { display: grid; gap: clamp(22px, 3vw, 32px); padding: 0; }
.tools__intro { display: grid; gap: 14px; max-width: 58ch; }
.tools__lead, .tool__lead { margin: 0; font-size: var(--fs-lg); color: var(--c-ink-2); }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.tab {
  display: grid; gap: 5px; align-content: center; min-height: 92px; padding: 18px 20px;
  border: 1px solid var(--c-ink-a12); border-radius: var(--r-2xl); background: var(--c-white-a70);
  color: var(--c-ink); text-align: left; cursor: pointer;
}
.tab[aria-selected="true"] { border-color: var(--c-brand-900); background: var(--c-brand-900); color: var(--c-white); }
.tab__no { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-brand-700); }
.tab__label { font-size: var(--fs-lg); line-height: 1.25; }
.tab__note { font-size: var(--fs-xs); line-height: 1.35; color: var(--c-muted); }
.tab[aria-selected="true"] .tab__no { color: var(--c-on-dark-muted); }
.tab[aria-selected="true"] .tab__note { color: var(--c-on-dark); }
.tool { scroll-margin-top: 80px; }
.tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.tool__grid--inv { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tool__controls { display: grid; gap: 18px; align-content: start; min-width: 0; }
.h-tool { margin: 0; max-width: 24ch; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-tight-1); line-height: var(--lh-heading); }
.h-tool--wide { max-width: 26ch; }
.tool__lead { max-width: 50ch; }
.tool__lead--gap { max-width: 58ch; margin-top: 16px; }
.ctrl { display: grid; gap: 10px; }
.ctrl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ctrl__top label { font-size: var(--fs-md); color: var(--c-ink-2); }
.ctrl__val { font-family: var(--font-mono); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.ctrl__val--lg { font-size: var(--fs-num); }
.panel { display: grid; gap: 18px; min-width: 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-panel); }
.panel--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: 14px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-media); }
.panel--wide .tool__controls { gap: 20px; }
.panel__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-muted); }
.panel__label--brand { color: var(--c-brand-700); }
.panel__payment { margin-top: 8px; font-family: var(--font-display); font-size: var(--fs-payment); font-weight: var(--fw-light); letter-spacing: var(--ls-tight-2); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kv th, .kv td { padding: 9px 0; border-bottom: 1px solid var(--c-bg-2); }
.kv th { font-weight: var(--fw-regular); text-align: left; color: var(--c-ink-2); }
.kv td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.kv--sm { font-size: var(--fs-xs); }
.kv--sm th, .kv--sm td { padding: 7px 0; }
.kv thead th { padding: 6px 0; border-bottom-color: var(--c-line); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono-0); text-transform: uppercase; color: var(--c-muted); }
.kv thead th:last-child { text-align: right; }
.insights { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.insight { display: grid; gap: 4px; }
.insight__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-brand-700); }
.insight__v { margin: 0; max-width: 52ch; font-size: var(--fs-md); color: var(--c-ink-2); }
.assume summary { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-brand-700); }
.assume ul { display: grid; gap: 6px; margin: 14px 0 0; padding-left: 20px; font-size: var(--fs-sm); color: var(--c-ink-2); }
.cta-block { display: grid; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.cta-block__line { margin: 0; max-width: 58ch; font-size: var(--fs-lg); color: var(--c-ink); }
.cta-block--dark { border-top-color: var(--c-on-dark-a20); }
.cta-block--dark .cta-block__line { color: var(--c-white); }
.react { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.react__h { font-size: var(--fs-md); color: var(--c-ink-2); }
.react__list { display: grid; gap: 8px; }
.react__opt { display: grid; gap: 3px; padding: 15px 18px; border: 1px solid var(--c-ink-a14); border-radius: var(--r-lg); background: var(--c-white-a55); color: var(--c-ink); text-align: left; cursor: pointer; }
.react__opt[aria-pressed="true"] { border-color: var(--c-brand-700); background: var(--c-brand-a10); }
.react__label { font-size: var(--fs-base); }
.react__note { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-muted); }
.path { display: grid; gap: 8px; }
.path__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.path__label { font-size: var(--fs-base); color: var(--c-ink); }
.path__val { font-family: var(--font-mono); font-size: var(--fs-path); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.bar { height: 14px; overflow: hidden; border-radius: var(--r-pill); background: var(--c-bg-3); }
.bar__fill { width: var(--pct, 0%); height: 100%; border-radius: var(--r-pill); transition: width var(--dur-mid) ease; }
.bar__fill--dark { background: var(--c-brand-900); }
.bar__fill--brand { background: var(--c-brand-700); }
.path__sub { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-muted); }
.reading { margin: 0; max-width: 52ch; font-size: var(--fs-base2); color: var(--c-ink); text-wrap: pretty; }
.evidence { display: grid; gap: 12px; margin-top: 14px; }
.evidence__item { display: grid; gap: 4px; }
.evidence__item p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.evidence__item a { justify-self: start; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-brand-700); }
.tool__reading { padding-top: 18px; border-top: 1px solid var(--c-line); }
.tool__reading p { margin: 0; max-width: 42ch; font-size: var(--fs-lg); color: var(--c-ink); }
.chart-col { display: grid; gap: 14px; min-width: 0; }
.chart-col__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chart-col__val { font-family: var(--font-mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: clamp(180px, 26vw, 240px); padding: 0 2px; border-bottom: 1px solid var(--c-control-line); border-left: 1px solid var(--c-line); }
.chart__bar { flex: 1; min-width: 4px; height: var(--pct, 0%); background: var(--c-brand-900); transition: height var(--dur-mid) ease; }
.chart__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-muted); }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.about__media { position: relative; min-width: 0; }
.about__frame { overflow: hidden; border-radius: var(--r-media); box-shadow: var(--shadow-media); }
.about__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.about__quote { position: absolute; left: 0; bottom: -26px; max-width: min(300px, 88%); padding: 14px 16px; border-radius: var(--r-xl); }
.about__copy { display: grid; gap: 18px; align-content: start; min-width: 0; }
.about__p { margin: 0; max-width: 60ch; font-size: var(--fs-base2); color: var(--c-ink-2); }
.about__not { margin: 0; max-width: 54ch; padding-left: 18px; border-left: 2px solid var(--c-brand-900); font-size: var(--fs-lg); color: var(--c-ink); }

/* ---------- reviews (section kept for later, see src/optional/recenze-sekce.html) ---------- */
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.reviews__h { max-width: 24ch; margin-top: 14px; }
.reviews__badge { display: grid; gap: 6px; min-width: 190px; padding: 16px 20px; border-radius: var(--r-2xl); }
.reviews__brand, .reviews__score { display: flex; align-items: center; gap: 10px; }
.reviews__brand-name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.reviews__num { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.reviews__note { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-0); text-transform: uppercase; color: var(--c-muted); }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 32px; }
.review { display: grid; gap: 14px; align-content: start; margin: 0; padding: 22px; border-radius: var(--r-card); }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__text { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--c-ink-2); }
.review__text p { margin: 0; }
.review__by { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--c-ink-a08); }
.review__name { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.review__meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; color: var(--c-muted); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g-avatar); color: var(--c-white); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.stars { color: var(--c-star); letter-spacing: 2px; }
.g-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--g-google); }
.g-dot span { width: 11px; height: 11px; border-radius: 50%; background: var(--c-white); }
.g-dot--sm { width: 20px; height: 20px; }
.g-dot--sm span { width: 8px; height: 8px; }

/* ---------- contact form ---------- */
.ask__wrap { display: grid; gap: 26px; }
.ask__h { font-size: var(--fs-h2b); }
.ask-form { display: grid; gap: 18px; max-width: 620px; }
.field { position: relative; display: grid; gap: 8px; }
.field__label { font-size: var(--fs-md); color: var(--c-on-dark); }
.field__optional { color: var(--c-on-dark-faint); }
.input-dark {
  box-sizing: border-box; width: 100%; padding: 15px 14px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-md);
  background: var(--c-brand-850); color: var(--c-white); font-family: inherit; font-size: var(--fs-base);
}
textarea.input-dark { resize: vertical; }
.input-dark::placeholder { color: var(--c-on-dark-faint); opacity: 1; }
.input-dark[aria-invalid="true"] { border-color: var(--c-error-line); }
.select-dark {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-on-dark-muted) 50%), linear-gradient(135deg, var(--c-on-dark-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.select-dark option { background: var(--c-brand-850); color: var(--c-white); }
.field__hint { margin: 0; font-family: var(--font-mono); font-size: var(--fs-note); line-height: 1.45; color: var(--c-on-dark-muted); }
.field__error { margin: 0; font-size: var(--fs-xs); color: var(--c-error-on-dark); }
.ask-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.share { display: grid; gap: 4px; padding: 15px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-lg); background: transparent; color: var(--c-on-dark); text-align: left; cursor: pointer; }
.share[aria-pressed="true"] { border-color: var(--c-bg); background: var(--c-on-dark-a10); }
.share__label { font-size: var(--fs-md); color: var(--c-white); }
.share__note { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-dark-muted); }
.hp-field { position: absolute; left: -10000px; width: 24px; height: 24px; overflow: hidden; }
.form-note { margin: 0; font-size: var(--fs-sm); color: var(--c-on-dark); }
.form-note a, .form-status a { color: var(--c-white); border-bottom-color: var(--c-on-dark-a40); }
.ask-form__submit { justify-self: start; gap: 10px; }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid var(--c-ink-a14); border-top-color: var(--c-ink); border-radius: 50%; animation: mm-spin 0.8s linear infinite; }
.ask-form[aria-busy="true"] .spinner { display: inline-block; }
.ask-form__submit:disabled { cursor: progress; }
.form-status { font-size: var(--fs-md); color: var(--c-on-dark); }
.form-status:empty { display: none; }
.form-status[data-state="error"] { padding: 14px 16px; border: 1px solid var(--c-error-line); border-radius: var(--r-md); color: var(--c-error-on-dark); }
.ask-done { display: grid; gap: 16px; max-width: 680px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--c-on-dark-a30); border-radius: var(--r-2xl); }
.ask-done__h { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3t); letter-spacing: var(--ls-tight); color: var(--c-white); }
.ask-done__p { margin: 0; max-width: 60ch; font-size: var(--fs-lg); color: var(--c-on-dark); }
.ask-done .btn-text-dark { justify-self: start; padding-left: 0; }
.steps-block { display: grid; gap: 14px; padding-top: 26px; border-top: 1px solid var(--c-on-dark-a20); }
.steps-block__h { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3u); letter-spacing: var(--ls-tight); color: var(--c-white); }
.steps-block__p { margin: 0; max-width: 62ch; font-size: var(--fs-md2); color: var(--c-on-dark); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-on-dark-a20); background: var(--c-on-dark-a20); }
.step { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--c-brand-900); }
.step__no { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); color: var(--c-on-dark-muted); }
.step__t { font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--c-white); }
.step__p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-on-dark); }

/* ---------- office ---------- */
.office__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: center; padding: 0; }
.office__copy { display: grid; gap: 16px; min-width: 0; }
.office__h { max-width: 22ch; font-size: var(--fs-h2c); }
.office__p { margin: 0; max-width: 44ch; font-size: var(--fs-lg); color: var(--c-ink-2); }
.contact-list { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--c-ink-a10); }
.contact-list__row { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: var(--tap); border: 0; color: var(--c-ink); }
.contact-list__k { flex: none; width: 64px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-muted); }
.contact-list__v { font-size: var(--fs-xl); }
.contact-list__v--num { font-variant-numeric: tabular-nums; }
.contact-list__v--wrap { overflow-wrap: anywhere; }
.office__map { min-width: 0; overflow: hidden; border: 1px solid var(--c-white-a70); border-radius: var(--r-media); box-shadow: var(--shadow-map); background: var(--c-bg-2); }
.office__map iframe { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 420px; border: 0; }

/* ---------- career ---------- */
.career__wrap { display: grid; gap: 28px; padding: 0; }
.career__intro { display: grid; gap: 16px; max-width: 60ch; }
.career__lead { margin: 0; font-size: var(--fs-xl); color: var(--c-on-dark); }
.career__fixed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--c-mint); border-radius: var(--r-card); background: var(--c-mint-a08); }
.career__fixed-head { display: grid; gap: 10px; align-content: start; min-width: 0; }
.career__fixed-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-mint); }
.career__fixed-h { font-family: var(--font-display); font-size: var(--fs-h3t); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); color: var(--c-white); }
.career__fixed-p { margin: 0; min-width: 0; font-size: var(--fs-base2); line-height: 1.5; color: var(--c-on-dark); }
.career__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.career__card { display: grid; gap: 10px; align-content: start; padding: 24px 22px; border-radius: var(--r-card); }
.career__no { font-family: var(--font-display); font-size: var(--fs-num-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight-2); color: var(--c-mint); }
.career__t { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--c-white); }
.career__p { margin: 0; font-size: var(--fs-md); color: var(--c-on-dark); }
.career__cta { display: grid; gap: 16px; padding: 26px 24px; border-radius: var(--r-card); }
.career__cta-p { margin: 0; max-width: 54ch; font-size: var(--fs-lg); color: var(--c-white); }

/* ---------- FAQ ---------- */
.faq__h { margin-top: 16px; max-width: 26ch; font-size: var(--fs-h2); }
.faq__list { max-width: 900px; margin-top: 32px; }
.faq__item { border-top: 1px solid var(--c-line); }
.faq__item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 0 -10px; padding: 20px 10px; border-radius: var(--r-md); list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--c-brand-700); }
.faq__item[open] summary::after { content: "−"; }
.faq__q { margin: 0; font-size: var(--fs-lg2); font-weight: var(--fw-regular); color: var(--c-ink); }
.faq__a { margin: 0 0 22px; max-width: 74ch; font-size: var(--fs-base); color: var(--c-ink-2); }

/* ---------- second opinion ---------- */
.so__wrap { display: grid; gap: 26px; }
.so__h { max-width: 28ch; font-size: var(--fs-h2b); }
.so__nope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.so__nope-k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-0); text-transform: uppercase; color: var(--c-on-dark-muted); }
.so__box { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--c-on-dark-a25); }
.so__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; }
.so__steps li { padding-bottom: 4px; border-bottom: 1px solid transparent; color: var(--c-on-dark-faint); }
.so__steps li[aria-current="step"] { border-bottom-color: var(--c-white); color: var(--c-white); }
.so__view { display: grid; gap: 20px; }
.so__view[data-so-view="0"] { gap: 14px; }
.so__view[data-so-view="2"] { gap: 24px; }
.so__vh { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3s); letter-spacing: -0.028em; color: var(--c-white); }
.so__cats { display: grid; gap: 8px; max-width: 560px; }
.so__cat { padding: 16px 18px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-md); background: transparent; color: var(--c-on-dark); font-size: var(--fs-base); text-align: left; cursor: pointer; }
.so__field { display: grid; gap: 8px; }
.so__fk { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-muted); }
.so__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-dark { min-height: var(--tap); padding: 13px 16px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-md); background: transparent; color: var(--c-on-dark); font-size: var(--fs-md); cursor: pointer; }
.pill-dark[aria-pressed="true"] { border-color: var(--c-bg); background: var(--c-on-dark-a14); color: var(--c-white); }
.so__upload { display: grid; gap: 8px; padding: 18px; border: 1px dashed var(--c-on-dark-a30); }
.so__upload p { margin: 0; max-width: 58ch; font-size: var(--fs-md); color: var(--c-on-dark); }
.so__result { display: grid; gap: 12px; }
.so__intro { margin: 0; max-width: 66ch; font-size: var(--fs-base); color: var(--c-on-dark); }
.so__contains { display: grid; gap: 8px; max-width: 70ch; margin: 0; padding-left: 20px; font-size: var(--fs-md2); color: var(--c-on-dark); }
.so__qs { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--c-on-dark-a20); }
.so__questions { display: grid; gap: 10px; max-width: 70ch; margin: 0; padding-left: 22px; font-size: var(--fs-base); color: var(--c-white); }
.so__p { margin: 0; max-width: 66ch; font-size: var(--fs-md); color: var(--c-on-dark); }
.so__actions { padding-top: 20px; border-top: 1px solid var(--c-on-dark-a20); }

/* ---------- footer ---------- */
.site-footer { padding: clamp(40px, 6vw, 72px) var(--gutter) calc(clamp(40px, 6vw, 72px) + 80px); background: var(--c-black); color: var(--c-on-dark); }
.site-footer__wrap { display: grid; gap: 26px; padding: 0; }
.site-footer__name { font-family: var(--font-display); font-size: var(--fs-h3t); letter-spacing: var(--ls-tight); color: var(--c-white); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; font-size: var(--fs-sm); }
.site-footer__col { display: grid; gap: 8px; align-content: start; }
.site-footer__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-mono-2); text-transform: uppercase; color: var(--c-on-dark-dim); }
.site-footer a { justify-self: start; color: var(--c-on-dark); border-bottom-color: var(--c-footer-link-line); }
.site-footer__dim { color: var(--c-on-dark-dim); }
.site-footer__legal { display: grid; gap: 8px; margin-top: 4px; }
.site-footer .consent-open { justify-self: start; min-height: var(--tap); color: var(--c-on-dark-muted); font-size: var(--fs-sm); }
.site-footer__disc { margin: 0; max-width: 90ch; padding-top: 20px; border-top: 1px solid var(--c-footer-line); font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-on-dark-dim); }

/* ---------- sticky bar ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--g-sticky); -webkit-backdrop-filter: var(--blur-sticky); backdrop-filter: var(--blur-sticky);
  border-top: 1px solid var(--c-white-a18); box-shadow: var(--shadow-sticky);
}
.stickybar__text { min-width: 0; }
.stickybar__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.25; color: var(--c-white); text-wrap: pretty; }
.stickybar__sub { margin-top: 3px; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: 0.02em; line-height: var(--lh-snug); color: var(--c-on-sticky); }

/* ---------- legal pages (generated by gdpr-consent) ---------- */
.legal-doc th, .legal-doc td { border-bottom-color: var(--c-line); }
.legal-doc a { color: var(--c-link); }

/* cookie banner: keep the reject/accept buttons equal; text sizes from tokens */
.consent { -webkit-backdrop-filter: var(--blur-sticky); backdrop-filter: var(--blur-sticky); }
.consent__btn { font-weight: var(--fw-medium); }

/* ---------- motion ---------- */
@keyframes mm-seg { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mm-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.float { animation: mm-float 7s ease-in-out infinite; }
.float-slow { animation: mm-float 11s ease-in-out infinite reverse; }
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- hover (pointer devices only) ---------- */
@media (hover: hover) {
  .btn-grad:hover { background: var(--g-btn-hover); box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }
  .btn-grad:active { transform: translateY(0); box-shadow: var(--shadow-btn-active); }
  .btn-light:hover { background: var(--c-white); box-shadow: var(--shadow-light-hover); transform: translateY(-1px); }
  .btn-glass:hover, .btn-frost:hover { box-shadow: var(--shadow-glass-hover); }
  .btn-line-dark:hover, .btn-glass-dark:hover { border-color: var(--c-white); background: var(--c-white-a10); color: var(--c-white); }
  .btn-text-dark:hover { color: var(--c-white); }
  .btn-outline:hover { border-color: var(--c-ink); }
  .btn-next:not(:disabled):hover { background: var(--c-white); }
  .chip:hover { border-color: var(--c-brand-400); background: var(--c-brand-a09); color: var(--c-ink); box-shadow: var(--shadow-chip); }
  .stepper__btn:hover { border-color: var(--c-brand-400); background: var(--c-brand-a10); color: var(--c-ink); }
  .stepper__btn--dark:hover { border-color: var(--c-on-dark-muted); background: transparent; color: var(--c-white); }
  .site-nav a:hover { color: var(--c-ink); }
  .tab:hover { border-color: var(--c-brand-400); box-shadow: var(--shadow-soft); }
  .opt:hover, .so__cat:hover, .pill-dark:hover { border-color: var(--c-mint); background: var(--c-white-a10); color: var(--c-white); }
  .react__opt:hover { border-color: var(--c-brand-400); background: var(--c-brand-a07); }
  .faq__item summary:hover, .assume summary:hover { background: var(--c-brand-a06); color: var(--c-ink); }
  .summary-dark:hover { background: var(--c-white-a10); }
  .drawer__close:hover { border-color: var(--c-ink); color: var(--c-ink); }
  .share:hover { border-color: var(--c-mint); }
  .contact-list__row:hover .contact-list__v { color: var(--c-brand-700); }
  .site-footer a:hover, .site-footer .consent-open:hover { color: var(--c-white); }
  a:hover { color: var(--c-ink); }
  .section-dark a:not([class]):hover, .form-note a:hover, .form-status a:hover { color: var(--c-white); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- collapsible menu (phones + tablets; the links do not fit below ~1000 px) ---------- */
@media (max-width: 1023px) {
  .site-header--menu .menu-btn { display: inline-flex; }
  .site-header--menu .site-header__cta { margin-left: 0; }
  .site-header--menu .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 16px 14px;
    max-height: calc(100svh - 70px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--c-bg); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-glass);
    -webkit-mask-image: none; mask-image: none; scroll-snap-type: none;
  }
  .site-header--menu[data-menu-open] .site-nav { display: flex; animation: menu-in var(--dur-mid) var(--ease-out); }
  .site-header--menu .site-nav a {
    min-height: 50px; padding: 0 4px; border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-sm); color: var(--c-ink-2); scroll-snap-align: none;
  }
  .site-header--menu .site-nav a:last-child { border-bottom: 0; }
  .site-header--menu .site-nav .site-nav__accent { color: var(--c-brand-700); }
}
@media (max-width: 1023px) and (hover: hover) {
  .site-header--menu .menu-btn:hover { border-color: var(--c-ink); }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  .site-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-black) 14px, var(--c-black) calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--c-black) 14px, var(--c-black) calc(100% - 14px), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .site-nav a { scroll-snap-align: center; }
  .drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88svh; margin: auto 0 0; border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .stickybar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 14px; padding-right: 14px; }
  .stickybar .btn-light { width: 100%; }
  .stickybar__sub { display: none; }
  .hero__grid { display: flex; flex-direction: column; gap: 20px; }
  .hero__copy { display: contents; }
  .hero__h1 { order: 1; }
  .hero__lead { order: 2; }
  .hero__media { order: 3; }
  .hero__photo { width: 100%; margin-right: 0; }
  .hero__quote { position: static; max-width: none; margin-top: 14px; }
  .hero__cta { order: 4; margin-top: 2px; }
  .hero__stats { order: 5; }
  .kv { font-size: var(--fs-sm); }
  .kv th, .kv td { word-break: break-word; }
  .site-footer { padding-bottom: 128px; }
  .site-footer a { padding: 10px 0; }
  summary { display: flex; align-items: center; min-height: var(--tap); }
}
@media (max-width: 420px) {
  .logo__name { display: none; }
  .logo { justify-content: center; min-width: var(--tap); min-height: var(--tap); margin-left: -9px; }
  .hero__cta > a { flex: 1 1 100%; }
  .hero, .section-pad-sm, .section-dark, .section-tint, .wrap { padding-left: 15px; padding-right: 15px; }
  .section-dark .wrap, .section-tint .wrap, .section-pad-sm .wrap, .site-footer .wrap { padding-left: 0; padding-right: 0; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .stickybar, .consent, .drawer, .hero__glow, .mesh::before { display: none !important; }
  .reveal { opacity: 1; transform: none; }
  .glass, .glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- legal pages layout ---------- */
.legal-page main { padding: clamp(24px, 4vw, 48px) var(--gutter) var(--space-section); }
.legal-doc { color: var(--c-ink-2); font-size: var(--fs-base); }
.legal-doc h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-h2c); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight-1); line-height: var(--lh-heading); color: var(--c-ink); }
.legal-doc h2 { font-family: var(--font-display); font-size: var(--fs-h3s); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); color: var(--c-ink); }
.legal-doc h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--c-ink); }
.legal-doc__meta { font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-muted); }
.legal-doc__back { padding-top: 0; padding-bottom: 0; }
.legal-page .site-footer { padding-bottom: clamp(40px, 6vw, 72px); }
.hp-field input { width: 24px; height: 24px; }

/* mobile: keep the primary CTA in the first screen (UX gate UX-CTA-FOLD); photo follows the buttons */
@media (max-width: 760px) {
  .hero__cta { order: 3; margin-top: 2px; }
  .hero__media { order: 4; }
}
.noscript-note { margin: 0; padding: 12px 16px; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); font-size: var(--fs-md); color: var(--c-ink-2); }
.noscript-note--dark { border-color: var(--c-on-dark-a35); color: var(--c-on-dark); }
.noscript-note--dark a { color: var(--c-white); }

/* reviews: client-supplied (not Google) */
.q-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-brand-900); color: var(--c-white); font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); padding-top: 6px; box-sizing: border-box; }
.q-dot--sm { width: 22px; height: 22px; font-size: var(--fs-md); padding-top: 5px; }
.stars__off { color: var(--c-star-off); }
.reviews__source { margin: 20px 0 0; max-width: 80ch; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-muted); }
.reviews__more { margin-top: 14px; }
.review:focus { outline: none; }
@media (min-width: 761px) { .reviews__more { display: none; } }
@media (max-width: 760px) {
  .reviews__grid:not([data-expanded]) > .review:nth-child(n + 5) { display: none; }
}

/* Druhý názor: sending the offer with documents */
.so-send { display: grid; gap: 14px; }
.so-send__h { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3s); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); line-height: var(--lh-heading); color: var(--c-white); }
.so-send__h:focus { outline: none; }
.so-send__p { margin: 0; max-width: 62ch; font-size: var(--fs-md2); color: var(--c-on-dark); }
.so-form { display: grid; gap: 18px; max-width: 620px; }
.so-form[aria-busy="true"] .spinner { display: inline-block; }
.so-form__file { padding: 12px 14px; cursor: pointer; }
.so-form__file::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 1px solid var(--c-bg); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink); font: inherit; font-weight: var(--fw-medium); cursor: pointer; }
.so-form__files { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-on-dark-muted); }
.so-form__files:empty { display: none; }

.so-form__cats { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.so-form__cats legend { padding: 0; margin-bottom: 10px; }
.pill-radio { position: relative; display: inline-flex; }
.pill-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-radio span { display: inline-flex; align-items: center; min-height: var(--tap); box-sizing: border-box; padding: 11px 16px; border: 1px solid var(--c-on-dark-a35); border-radius: var(--r-md); color: var(--c-on-dark); font-size: var(--fs-md); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.pill-radio input:checked + span { border-color: var(--c-bg); background: var(--c-on-dark-a14); color: var(--c-white); }
.pill-radio input:checked + span::before { content: "✓"; margin-right: 8px; color: var(--c-mint); }
.pill-radio input:focus-visible + span { outline: 2px solid var(--c-mint); outline-offset: 2px; }
@media (hover: hover) { .pill-radio:hover span { border-color: var(--c-mint); color: var(--c-white); } }
.so-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.so-guide { padding-top: 20px; border-top: 1px solid var(--c-on-dark-a20); }
.so-guide summary { line-height: 1.5; }
.so-guide__body { display: grid; gap: 14px; margin-top: 18px; }
.so-guide__pick { margin: 0; font-family: var(--font-mono); font-size: var(--fs-note); color: var(--c-on-dark-muted); }

.dropzone__input { position: absolute; width: 24px; height: 24px; opacity: 0; overflow: hidden; pointer-events: none; }
.dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px; border: 1.5px dashed var(--c-on-dark-a40); border-radius: var(--r-lg); background: var(--c-brand-850); cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.dropzone__btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-ink); font-weight: var(--fw-medium); white-space: nowrap; }
.dropzone__text { flex: 1 1 14rem; font-size: var(--fs-sm); color: var(--c-on-dark); }
.dropzone[data-drag], .dropzone__input:focus-visible + .dropzone { border-color: var(--c-mint); background: var(--c-brand-800); }
.dropzone__input:focus-visible + .dropzone { outline: 2px solid var(--c-mint); outline-offset: 2px; }
.dropzone__input[aria-invalid="true"] + .dropzone { border-color: var(--c-error-line); }
@media (hover: hover) { .dropzone:hover { border-color: var(--c-mint); } }
.so-form__actions .btn-text-dark { padding-left: 0; padding-right: 0; }