/* ============================================================================
   veruno.site — redesign 2026-09-21
   ----------------------------------------------------------------------------
   Návrh z Claude Designu měl všechno inline a rozvětvené přes React
   (`sc-if isDesktop` / `isMobile`) a hover stavy v nestandardním atributu
   `style-hover`, který prohlížeč ignoruje. Tady je obojí převedené na
   normální CSS: větvení dělá media query, hover dělá :hover.

   Paleta je vytažená do proměnných, ať se dá ladit na jednom místě.
   ========================================================================== */

:root {
  --vs-bg:        #0F0E0D;  /* hlavní podklad */
  --vs-bg-2:      #121110;  /* sekce ob jednu */
  --vs-bg-3:      #14110F;
  --vs-panel:     #161412;  /* karty, vstupy */
  --vs-panel-2:   #1B1917;  /* sekundární tlačítko */
  --vs-panel-3:   #242120;  /* jeho hover */
  --vs-ink:       #F3EFEA;  /* text */
  --vs-ink-soft:  #C9C3BC;
  --vs-ink-mute:  #A8A29B;
  --vs-ink-dim:   #6F6A64;
  --vs-accent:    #E0577F;  /* akcent .site */
  --vs-accent-2:  #EC6F93;  /* hover akcentu */
  --vs-accent-ink:#14110F;  /* text na akcentu */
  --vs-light:     #F7F4F0;  /* světlé plochy: papír, displej */
  --vs-light-ink: #1C1917;
  --vs-line:      rgba(255, 255, 255, .09);
  --vs-line-2:    rgba(255, 255, 255, .14);
  --vs-line-3:    rgba(255, 255, 255, .2);
  --vs-max:       1440px;
  --vs-gutter:    clamp(20px, 5vw, 72px);
  --vs-mono:      'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── základ (přeneseno z <helmet> exportu) ─────────────────────────────── */

html, body {
  margin: 0;
  padding: 0;
  background: var(--vs-bg);
  color: var(--vs-ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--vs-accent); text-decoration: none; }
a:hover { color: var(--vs-accent-2); }
button { font-family: inherit; }
input::placeholder { color: var(--vs-ink-dim); }
::selection { background: rgba(224, 87, 127, .35); }

@keyframes vpulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 87, 127, .6); }
  100% { box-shadow: 0 0 0 8px rgba(224, 87, 127, 0); }
}
@keyframes vfade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Kdo má v systému vypnuté animace, ať je nedostane. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ── sdílené prvky ─────────────────────────────────────────────────────── */

.vs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vs-accent); flex: none;
  animation: vpulse 1.8s infinite;
}
.vs-mono-xs {
  font-family: var(--vs-mono);
  font-size: 10px; letter-spacing: .14em; color: var(--vs-ink-dim);
}

.vs-btn-accent {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 0; border-radius: 10px;
  background: var(--vs-accent); color: var(--vs-accent-ink);
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .2s;
}
.vs-btn-accent:hover { background: var(--vs-accent-2); color: var(--vs-accent-ink); }

.vs-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--vs-panel-2); color: var(--vs-ink);
  border: 1px solid var(--vs-line-2);
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .2s;
}
.vs-btn-ghost:hover { background: var(--vs-panel-3); color: var(--vs-ink); }

.vs-btn-lg { padding: 16px 26px; font-size: 17px; }

.vs-link-arrow {
  font-size: 16px; font-weight: 600; padding: 16px 6px;
  color: var(--vs-accent);
}

/* přepínání desktop / mobil — nahrazuje sc-if isDesktop / isMobile */
.vs-mob { display: none; }
@media (max-width: 900px) {
  .vs-desk { display: none !important; }
  .vs-mob  { display: flex; }
}

/* ── navigace ──────────────────────────────────────────────────────────── */

.vs-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 14, 13, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vs-line);
}
.vs-nav-bar {
  max-width: var(--vs-max); margin: 0 auto;
  padding: 0 var(--vs-gutter); height: 80px;
  display: flex; align-items: center; gap: 20px;
}
.vs-nav-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.vs-nav-logo img { height: 30px; width: auto; display: block; }

.vs-badge-site {
  font-family: var(--vs-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--vs-accent); border: 1px solid rgba(224, 87, 127, .45);
  padding: 3px 7px; border-radius: 6px; line-height: 1;
}

.vs-nav-links {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto; font-size: 15px; white-space: nowrap;
}
.vs-nav-links a { color: var(--vs-ink-soft); }
.vs-nav-links a:hover { color: var(--vs-ink); }
.vs-nav-gen {
  color: var(--vs-ink) !important; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}

.vs-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }

.vs-eco {
  display: flex; font-family: var(--vs-mono); font-size: 12px;
  border: 1px solid var(--vs-line-2); border-radius: 8px; overflow: hidden;
}
.vs-eco a, .vs-eco span { padding: 7px 9px; }
.vs-eco a { color: var(--vs-ink-mute); }
.vs-eco a:hover { color: var(--vs-ink); }
.vs-eco span { color: var(--vs-accent-ink); background: var(--vs-accent); font-weight: 700; }
.vs-eco-lang span { color: var(--vs-ink); background: rgba(255, 255, 255, .08); }

.vs-lang {
  font-family: var(--vs-mono); font-size: 12px; padding: 7px 10px;
  border: 1px solid var(--vs-line-2); border-radius: 8px;
  color: var(--vs-ink-soft); font-weight: 700;
}
.vs-lang:hover { color: var(--vs-ink); }

.vs-nav-mobactions { margin-left: auto; align-items: center; gap: 8px; }

/* 44px je minimum pro pohodlný dotyk na telefonu */
.vs-burger {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--vs-line-2); background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.vs-burger span {
  display: block; width: 18px; height: 2px; background: var(--vs-ink);
  box-shadow: 0 -6px 0 var(--vs-ink), 0 6px 0 var(--vs-ink);
}

.vs-nav-panel {
  border-top: 1px solid var(--vs-line);
  padding: 12px var(--vs-gutter) 20px;
  display: grid; gap: 4px; background: var(--vs-bg);
  animation: vfade .2s ease;
}
.vs-nav-panel[hidden] { display: none; }
.vs-nav-panel a {
  padding: 13px 8px; color: var(--vs-ink-soft);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vs-nav-panel a:hover { color: var(--vs-ink); }
.vs-nav-panel a:last-of-type { border-bottom: 0; }
.vs-nav-panel-foot {
  display: flex; gap: 10px; align-items: center;
  margin-top: 10px; flex-wrap: wrap;
}
.vs-nav-panel-foot .vs-btn-accent { flex: 1; min-width: 200px; justify-content: center; padding: 13px 18px; font-size: 15px; }

/* ── hero ──────────────────────────────────────────────────────────────── */

.vs-hero {
  position: relative;
  background-color: var(--vs-bg);
  background-image:
    radial-gradient(1100px 600px at 80% 10%, rgba(224, 87, 127, .10), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.vs-hero-grid {
  max-width: var(--vs-max); margin: 0 auto;
  padding: clamp(72px, 10vw, 150px) var(--vs-gutter) clamp(80px, 10vw, 150px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}

.vs-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--vs-line-2); border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-family: var(--vs-mono); font-size: 12px; letter-spacing: .16em;
  color: var(--vs-ink-soft); text-transform: uppercase;
}
.vs-h1 {
  font-weight: 800; font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.0; letter-spacing: -.03em; margin: 28px 0 0;
  text-wrap: balance; max-width: 14ch;
}
.vs-lead {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--vs-ink-mute); margin: 26px 0 0; max-width: 600px;
  text-wrap: pretty;
}
.vs-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; align-items: center; }

.vs-checks {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 15px; color: var(--vs-ink-soft);
}
.vs-checks li { display: flex; gap: 8px; align-items: center; }
.vs-check { color: var(--vs-accent); font-weight: 700; }

.vs-hero-side { display: flex; flex-direction: column; justify-content: center; gap: 28px; align-self: center; }

.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vs-chip {
  font-family: var(--vs-mono); font-size: 12px; letter-spacing: .12em;
  padding: 8px 13px; border-radius: 8px;
  border: 1px solid var(--vs-line-2); color: var(--vs-ink-soft); background: var(--vs-panel);
}
.vs-chip.is-on {
  border-color: rgba(224, 87, 127, .5); color: var(--vs-ink);
  background: rgba(224, 87, 127, .12);
}

/* Tohle je to místo, kde návrh na telefonu přetékal: stojánek 250 px a telefon
   270 px byly v nezalomitelném flexu. Wrap + zmenšení to řeší. */
.vs-hero-visual {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(10px, 2.5vw, 32px);
  /* NEZALAMOVAT na desktopu. Stojánek (250) + spojnice + telefon (270) se do
     sloupce vejdou jen těsně, takže `wrap` je tu rozházel pod sebe a doprava.
     Zalomení patří výhradně do mobilní media query níž. */
  flex-wrap: nowrap;
}

.vs-stand { position: relative; flex: none; transform: perspective(1000px) rotateY(14deg); transform-origin: right center; }
.vs-stand-card {
  width: 250px; max-width: 100%;
  background: var(--vs-light); border-radius: 14px 14px 4px 4px;
  padding: 22px 22px 18px; color: var(--vs-light-ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 2px 0 #D9D3CC inset;
}
.vs-stand-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vs-stand-qr { background: #fff; border-radius: 8px; padding: 8px; display: grid; place-items: center; }
.vs-stand-qr canvas { width: 190px; height: 190px; max-width: 100%; display: block; image-rendering: pixelated; }
.vs-stand-title { margin-top: 14px; font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.vs-stand-url {
  margin-top: 6px; font-family: var(--vs-mono); font-size: 10px; color: var(--vs-ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-stand-base {
  height: 16px; width: 284px; max-width: 100%; margin: 0 0 0 -17px;
  background: linear-gradient(#2E2926, #1B1816); border-radius: 4px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .6);
}

.vs-connector {
  width: clamp(28px, 5vw, 64px); flex: none; align-self: center;
  border-top: 2px dashed rgba(224, 87, 127, .6); position: relative;
}
.vs-connector span {
  position: absolute; right: -6px; top: -6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--vs-accent);
}

.vs-phone {
  flex: none; width: 270px; max-width: 100%;
  border-radius: 40px; border: 1px solid var(--vs-line-3);
  background: #0B0A0A; padding: 11px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6) inset;
}
.vs-phone-screen {
  border-radius: 30px; background: var(--vs-light); color: var(--vs-light-ink);
  padding: 22px 16px 16px; position: relative; overflow: hidden;
}
.vs-phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px; border-radius: 12px; background: #0B0A0A;
}
.vs-phone-place { margin-top: 22px; }
.vs-phone-greeting { font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.vs-phone-items { display: grid; gap: 8px; margin-top: 16px; }
.vs-phone-item {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid #E3DED8; border-radius: 10px;
  padding: 13px 14px; font-weight: 600; font-size: 14px;
}
.vs-phone-item span { color: var(--vs-ink-dim); }
.vs-phone-item.is-primary { background: var(--vs-light-ink); color: var(--vs-light); border-color: var(--vs-light-ink); font-weight: 700; }
.vs-phone-item.is-primary span { color: var(--vs-light); }
.vs-phone-today { margin-top: 14px; background: #FCEBF0; border: 1px solid #F5C6D4; border-radius: 10px; padding: 12px 14px; }
.vs-phone-today .vs-mono-xs { font-size: 9px; color: #B93C61; }
.vs-phone-today-text { font-weight: 700; font-size: 13px; margin-top: 3px; }
.vs-phone-foot {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 14px;
  font-size: 12px; color: #4F4A45; border-top: 1px solid #E3DED8;
  padding-top: 12px; white-space: nowrap;
}
.vs-phone-powered {
  margin-top: 22px; text-align: center; font-family: var(--vs-mono);
  font-size: 9px; letter-spacing: .14em; color: var(--vs-ink-mute);
}

.vs-axis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  border-top: 1px solid var(--vs-line-2); padding-top: 18px;
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--vs-ink-mute); text-transform: uppercase;
}
.vs-axis-num { color: var(--vs-accent); }

/* ── obecná sekce + karty (01 Dva způsoby) ─────────────────────────────── */

.vs-sec {
  border-top: 1px solid var(--vs-line);
  padding: clamp(88px, 11vw, 168px) var(--vs-gutter);
}
.vs-sec.is-alt { background: var(--vs-bg-2); }
.vs-wrap { max-width: var(--vs-max); margin: 0 auto; }

.vs-kicker {
  font-family: var(--vs-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vs-ink-mute);
}

.vs-cards-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px; margin-top: 48px;
}

.vs-card {
  background: var(--vs-panel);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
}
/* Karta s účtem je hlavní konverzní cesta, proto akcentní rámeček a přeliv. */
.vs-card-accent {
  background: linear-gradient(160deg, rgba(224, 87, 127, .16), rgba(224, 87, 127, .04)), var(--vs-panel);
  border-color: rgba(224, 87, 127, .4);
}
.vs-card h3 {
  margin: 0; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.02em; line-height: 1.1; text-wrap: balance;
}
.vs-card p { margin: 0; color: var(--vs-ink-mute); font-size: 17px; line-height: 1.55; }
.vs-card-strong { color: var(--vs-ink-soft) !important; }
/* flex:1 drží tlačítka obou karet na stejné lince, i když se texty liší délkou */
.vs-card-grow { flex: 1; }

.vs-card-tag {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-ink-mute);
}
.vs-card-tag.is-accent { color: var(--vs-accent); }

.vs-btn-md { padding: 14px 22px; font-size: 16px; }

/* ── hlavička sekce (nadpis vlevo, lead vpravo) ────────────────────────── */

.vs-sec-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px 64px; align-items: end;
}
.vs-h2 {
  font-weight: 800; font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02; letter-spacing: -.025em; margin: 18px 0 0;
  text-wrap: balance;
}
.vs-h3 {
  margin: 12px 0 0; font-weight: 800; font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.02em; line-height: 1.05;
}
.vs-sec-lead {
  font-size: 18px; line-height: 1.55; color: var(--vs-ink-mute);
  margin: 0; max-width: 520px;
}

/* ── 03 dlaždice situace → výsledek ────────────────────────────────────── */

.vs-needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px; margin-top: 64px;
}
.vs-need {
  background: var(--vs-panel);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 30px;
  display: grid; gap: 16px;
  /* Bez tohohle mřížka rozdělí přebytek výšky mezi oba řádky a kolem šipky vznikne
     mezera nahoře i dole. Obsah patří nahoru. Pevná min-height (dřív 170 px) je
     pak už jen prázdno pod textem, výšku určuje obsah; karty v řadě si ji stejně
     srovnají na nejvyšší z nich. */
  align-content: start;
  transition: border-color .2s;
}
.vs-need:hover { border-color: rgba(224, 87, 127, .5); }
.vs-need-q { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.vs-need-a {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--vs-ink-soft); font-size: 16px; line-height: 1.45;
}
.vs-need-arrow { color: var(--vs-accent); font-family: var(--vs-mono); flex: none; }

/* ── 03 druhý krok (upsell po skenu) ───────────────────────────────────── */

.vs-upsell {
  margin-top: 80px;
  border: 1px solid var(--vs-line-2); border-radius: 20px;
  padding: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px; align-items: center;
  background: var(--vs-bg-2);
}
.vs-upsell-lead { margin: 14px 0 0; color: var(--vs-ink-mute); font-size: 17px; line-height: 1.55; }
.vs-upsell-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0; border-top: 1px solid var(--vs-line-2);
}
.vs-upsell-list li {
  display: flex; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--vs-line-2); font-size: 17px;
}
.vs-upsell-num { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-ink-dim); width: 24px; flex: none; }

/* ── 04 jedna adresa ───────────────────────────────────────────────────── */

.vs-h2-wide { max-width: 820px; }

.vs-addr {
  margin-top: 40px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-line-2); border-radius: 18px;
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: space-between;
}
.vs-addr-line {
  font-family: var(--vs-mono);
  font-size: clamp(20px, 3.2vw, 40px);
  letter-spacing: -.01em;
  /* Adresa se nesmí přelít mimo rámeček na úzkém displeji. */
  word-break: break-all;
}
.vs-addr-prefix { color: var(--vs-ink-dim); }
.vs-addr-slug { color: var(--vs-ink); }
/* Kurzor za adresou: naznačuje, že slug si tenant zvolí sám. */
.vs-caret {
  display: inline-block; width: 3px; height: .9em;
  background: var(--vs-accent); vertical-align: -.1em; margin-left: 4px;
}
.vs-addr-open { font-weight: 600; font-size: 16px; white-space: nowrap; }

.vs-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vs-channel {
  font-family: var(--vs-mono); font-size: 13px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--vs-line-2);
  color: var(--vs-ink-soft); background: var(--vs-panel);
}

.vs-sec-lead-wide { margin-top: 28px; max-width: 620px; }

/* ── 05 stránka, která má úkol ─────────────────────────────────────────── */

.vs-sec-eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vs-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-accent); border: 1px solid rgba(224, 87, 127, .5);
  border-radius: 999px; padding: 4px 10px;
}
.vs-live .vs-dot { width: 6px; height: 6px; }

.vs-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(48px, 7vw, 120px); margin-top: 18px; align-items: center;
}

.vs-case-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 0; border-top: 1px solid var(--vs-line-2);
}
.vs-case-list li {
  padding: 14px 0; border-bottom: 1px solid var(--vs-line-2);
  font-size: 17px; line-height: 1.45; color: var(--vs-ink-soft);
}
.vs-case-list b { color: var(--vs-ink); font-weight: 700; }
.vs-case-lead { font-size: 17px; line-height: 1.55; color: var(--vs-ink-mute); margin: 22px 0 0; }

.vs-case-pick { margin-top: 28px; }
.vs-case-pick-label {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-ink-mute); margin-bottom: 12px;
}
.vs-case-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
/* min-height 44px = pohodlný dotyk na telefonu, vyžaduje to i zadání */
.vs-case-tab {
  padding: 11px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px;
  border: 1px solid var(--vs-line-2); background: var(--vs-panel);
  color: var(--vs-ink-soft); transition: all .2s;
}
.vs-case-tab:hover { border-color: rgba(224, 87, 127, .5); color: var(--vs-ink); }
.vs-case-tab.is-on {
  background: var(--vs-accent); border-color: var(--vs-accent);
  color: var(--vs-accent-ink);
}
.vs-case-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }

.vs-case-phone-wrap { display: flex; justify-content: center; position: relative; }
.vs-case-glow {
  position: absolute; inset: auto 10% -20px 10%; height: 120px;
  background: radial-gradient(closest-side, rgba(224, 87, 127, .22), transparent);
}
.vs-case-phone {
  width: 300px; max-width: 100%;
  border-radius: 42px; border: 1px solid var(--vs-line-3);
  background: #0B0A0A; padding: 12px; position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.vs-case-screen {
  border-radius: 32px; background: var(--vs-light); color: var(--vs-light-ink);
  min-height: 560px; padding: 44px 20px 20px; position: relative; overflow: hidden;
}
.vs-case-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 14px; background: #0B0A0A;
  z-index: 2; /* zůstane nad snímkem stránky, který vyplňuje celý displej */
}
.vs-case-view { animation: vfade .4s ease; }
.vs-case-view[hidden] { display: none; }
.vs-case-h { font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; text-wrap: balance; }
.vs-case-img {
  height: 110px; border-radius: 12px; margin-top: 16px;
  background: repeating-linear-gradient(135deg, #E9E4DF 0 8px, #F1EDE8 8px 16px);
  display: grid; place-items: center;
  font-family: var(--vs-mono); font-size: 9px; letter-spacing: .12em; color: var(--vs-ink-dim);
}
.vs-case-big {
  margin-top: 16px; background: #fff; border: 1px dashed #C9C3BC;
  border-radius: 12px; padding: 16px; text-align: center;
  font-family: var(--vs-mono); font-size: 18px; letter-spacing: .04em;
}
.vs-case-stars { margin-top: 16px; text-align: center; }
.vs-case-stars-row { color: var(--vs-accent); font-size: 26px; letter-spacing: 4px; }
.vs-case-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.vs-case-price-val { font-weight: 800; font-size: 34px; letter-spacing: -.03em; color: #B93C61; }
.vs-case-note { font-size: 13px; color: #4F4A45; line-height: 1.5; margin-top: 12px; }
.vs-case-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.vs-case-chip {
  font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px;
  border: 1px solid #E3DED8; background: #fff; color: var(--vs-light-ink);
}
.vs-case-rows { display: grid; gap: 8px; margin-top: 14px; }
.vs-case-row {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  font-size: 14px; padding: 11px 12px;
  background: #fff; border: 1px solid #E3DED8; border-radius: 10px;
}
.vs-case-row > span:first-child { display: flex; gap: 8px; align-items: center; }
.vs-case-row b { font-weight: 600; }
.vs-case-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--vs-accent); flex: none; }
.vs-case-action {
  margin-top: 16px; background: var(--vs-light-ink); color: var(--vs-light);
  border-radius: 12px; padding: 14px; text-align: center; font-weight: 700; font-size: 14px;
}
/* Obrazovka „akce" není sazba, ale snímek skutečné stránky. Vyplní displej
   celou plochou; dole zůstává pruh pro popisek VERUNO.SITE. */
.vs-case-shot {
  position: absolute; inset: 0 0 30px; display: block; overflow: hidden;
}
.vs-case-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.vs-case-brand {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: var(--vs-mono); font-size: 9px; letter-spacing: .14em; color: var(--vs-ink-mute);
}

/* ── 06 osa Veruno → Veruno.site → fyzický svět (svislá varianta) ───────── */

.vs-sec-head-tight { margin-top: 18px; }

.vs-axis-v {
  margin: 80px auto 0; max-width: 720px;
  display: grid; gap: 0; justify-items: center;
}

.vs-axis-card {
  width: 100%; background: var(--vs-bg);
  border: 1px solid var(--vs-line-2); border-radius: 18px;
  padding: 28px 30px;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
}
/* Terakota je barva veruno.cz, růžová je .site. Vazba mezi doménami
   je tím pádem čitelná i bez textu. */
.vs-axis-card.is-veruno { border-color: rgba(200, 88, 42, .55); }
.vs-axis-card.is-site {
  border-color: rgba(224, 87, 127, .6);
  box-shadow: 0 0 0 6px rgba(224, 87, 127, .06);
}
.vs-axis-card img { width: 44px; height: auto; }

.vs-axis-badge {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--vs-accent); color: var(--vs-accent-ink);
  display: grid; place-items: center;
  font-family: var(--vs-mono); font-weight: 700; font-size: 13px;
}
.vs-axis-tag { font-family: var(--vs-mono); font-size: 12px; letter-spacing: .16em; }
.vs-axis-tag.is-veruno { color: #C8582A; }
.vs-axis-tag.is-site { color: var(--vs-accent); }
.vs-axis-text {
  font-weight: 800; font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.02em; margin-top: 6px;
}

/* spojnice mezi kartami se šipkou dolů */
.vs-axis-link { height: 56px; width: 2px; position: relative; }
.vs-axis-link.is-veruno { background: linear-gradient(#C8582A, #E0577F); }
.vs-axis-link.is-world { background: linear-gradient(#E0577F, rgba(255, 255, 255, .4)); }
.vs-axis-link span {
  position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
}
.vs-axis-link.is-veruno span { border-right: 2px solid var(--vs-accent); border-bottom: 2px solid var(--vs-accent); }
.vs-axis-link.is-world span { border-right: 2px solid var(--vs-ink-soft); border-bottom: 2px solid var(--vs-ink-soft); }

.vs-axis-points { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vs-axis-point {
  font-family: var(--vs-mono); font-size: 13px; letter-spacing: .1em;
  padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: var(--vs-bg); color: var(--vs-ink);
}
.vs-axis-world {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-ink-dim); margin-top: 14px;
}

@media (max-width: 560px) {
  /* Na úzkém displeji by ikona a text vedle sebe text rozdrtily. */
  .vs-axis-card { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
}

/* ── 07 data ───────────────────────────────────────────────────────────── */

.vs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(48px, 7vw, 120px); align-items: center;
}
.vs-h2-stats { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.04; }
.vs-stats-lead { max-width: 560px; margin-top: 26px; }

.vs-stats-number { margin-top: 36px; display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
/* 432 je hlavní důkaz celé sekce, proto nese plnou váhu akcentu. */
.vs-stats-value {
  font-weight: 800; font-size: clamp(64px, 8vw, 112px);
  letter-spacing: -.05em; line-height: .9; color: var(--vs-accent);
}
.vs-stats-label { font-size: 18px; line-height: 1.3; max-width: 220px; color: var(--vs-ink); font-weight: 600; }
.vs-stats-note { font-size: 15px; line-height: 1.55; color: var(--vs-ink-mute); margin: 18px 0 0; max-width: 560px; }

.vs-stats-fig { margin: 0; }
.vs-stats-zoom {
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--vs-line-2); border-radius: 16px; overflow: hidden;
  background: var(--vs-panel); cursor: zoom-in; position: relative; text-align: left;
  transition: border-color .2s;
}
.vs-stats-zoom:hover { border-color: rgba(224, 87, 127, .5); }
.vs-stats-zoom img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.vs-stats-zoom-hint {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .12em;
  background: var(--vs-bg); border: 1px solid var(--vs-line-2);
  padding: 6px 10px; border-radius: 8px; color: var(--vs-ink-soft);
}
.vs-stats-fig figcaption {
  margin-top: 12px; font-size: 13px; color: var(--vs-ink-dim);
  font-family: var(--vs-mono); letter-spacing: .04em;
}

/* ── 08 fyzické nosiče ─────────────────────────────────────────────────── */

.vs-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px; margin-top: 64px;
}
.vs-product {
  background: var(--vs-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
}
.vs-product-media { position: relative; }
.vs-product-media img,
.vs-product-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--vs-panel); }
/* Placeholder pro nosič bez fotky: šrafování, ať je na první pohled jasné,
   že tu fotka teprve bude, a nevypadá to jako chyba načítání. */
.vs-product-ph {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--vs-panel-2) 0 10px, var(--vs-panel) 10px 20px);
  display: grid; place-items: center; text-align: center; padding: 16px;
  color: var(--vs-ink-dim);
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .12em;
}
.vs-product-soon {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--vs-mono); font-size: 10px; letter-spacing: .14em;
  padding: 5px 9px; border-radius: 6px;
  background: var(--vs-ink); color: var(--vs-bg); font-weight: 700;
}
.vs-product-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vs-product-body h3 { margin: 0; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.vs-product-body p { margin: 0; color: var(--vs-ink-mute); font-size: 15px; line-height: 1.5; flex: 1; }
.vs-product-cta { margin-top: 8px; align-self: flex-start; padding: 12px 18px; font-size: 15px; }

/* ── 09 pro koho ───────────────────────────────────────────────────────── */

.vs-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px; margin-top: 64px;
}
.vs-segment {
  background: var(--vs-panel);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; gap: 12px; min-height: 190px;
  transition: border-color .2s;
}
.vs-segment:hover { border-color: rgba(224, 87, 127, .5); }
.vs-segment-num { font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em; color: var(--vs-ink-dim); }
.vs-segment h3 { margin: 0; font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.vs-segment p { margin: 0; color: var(--vs-ink-mute); font-size: 16px; line-height: 1.5; flex: 1; }

.vs-segment-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.vs-segment-links a { font-weight: 600; font-size: 15px; font-family: var(--vs-mono); }
/* Segment bez dema nabídne registraci. Vypadá jako odkaz, ale je to tlačítko,
   protože otevírá modal — čtečka obrazovky to tak dostane správně. */
.vs-segment-try {
  font-weight: 600; font-size: 15px; font-family: var(--vs-mono);
  color: var(--vs-ink-soft); background: none; border: 0; padding: 0; cursor: pointer;
}
.vs-segment-try:hover { color: var(--vs-accent); }

/* ── 11 FAQ ────────────────────────────────────────────────────────────── */

.vs-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.vs-faq-lead { font-size: 17px; line-height: 1.55; color: var(--vs-ink-mute); margin: 22px 0 0; max-width: 420px; }

.vs-faq-list { border-top: 1px solid var(--vs-line-2); }
.vs-faq-item { border-bottom: 1px solid var(--vs-line-2); }
.vs-faq-item button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 0; min-height: 44px;
  background: none; border: 0; color: var(--vs-ink);
  font-size: 18px; font-weight: 600; text-align: left; cursor: pointer;
}
.vs-faq-item button:hover { color: var(--vs-accent); }
.vs-faq-sign {
  font-family: var(--vs-mono); font-size: 20px; color: var(--vs-accent);
  flex: none; width: 24px; text-align: center;
}
/* Znaménko řídí CSS podle stavu, ne JS — obsluha akordeonu (initFAQ v app.js)
   jen přepíná třídu .open, takže se o značku nemusí starat. */
.vs-faq-sign::before { content: '+'; }
.faq-item.open .vs-faq-sign::before { content: '\2212'; }

/* Bez JS zůstanou odpovědi skryté. Proto je e-mail v levém sloupci vždy vidět. */
.vs-faq-answer { display: none; padding: 0 40px 22px 0; color: var(--vs-ink-mute); font-size: 16px; line-height: 1.6; }
.faq-item.open .vs-faq-answer { display: block; animation: vfade .25s ease; }

/* ── 10 ceník ──────────────────────────────────────────────────────────── */

.vs-price-lead { font-size: 17px; line-height: 1.55; color: var(--vs-ink-mute); max-width: 520px; }
/* Tlačítko, které vypadá jako odkaz: otevírá modal, takže to musí být button
   (čtečka obrazovky pak ohlásí správnou roli), ale v textu působí jako odkaz. */
.vs-link-btn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--vs-accent); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.vs-link-btn:hover { color: var(--vs-accent-2); }

.vs-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px; margin-top: 64px;
}
.vs-plan {
  background: var(--vs-bg);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  padding: 34px; display: flex; flex-direction: column; gap: 14px;
}
/* Modul QR stránka je hlavní nabídka, proto akcentní rámeček. */
.vs-plan.is-highlight {
  border-color: rgba(224, 87, 127, .55);
  box-shadow: 0 0 0 6px rgba(224, 87, 127, .06);
}
.vs-plan-kicker { font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em; color: var(--vs-ink-mute); }
.vs-plan h3 { margin: 0; font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.vs-plan-price { display: flex; align-items: baseline; gap: 8px; }
.vs-plan-value { font-weight: 800; font-size: 44px; letter-spacing: -.04em; line-height: 1; }
.vs-plan-unit { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-ink-mute); }
.vs-plan p { margin: 0; color: var(--vs-ink-mute); font-size: 15px; line-height: 1.5; flex: 1; }
.vs-plan-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-plan-btn { padding: 12px 18px; font-size: 15px; }

.vs-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; background: transparent; color: var(--vs-ink);
  border: 1px solid var(--vs-line-2); font-weight: 600; cursor: pointer;
}
.vs-btn-outline:hover { background: var(--vs-panel-2); color: var(--vs-ink); }

.vs-price-foot {
  margin-top: 36px; display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--vs-line-2); padding-top: 28px;
}
.vs-price-foot p { margin: 0; color: var(--vs-ink-mute); font-size: 16px; }
.vs-price-foot a { font-weight: 600; }
.vs-price-foot-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── závěr ─────────────────────────────────────────────────────────────── */

.vs-final { padding: 0 var(--vs-gutter) clamp(88px, 11vw, 168px); }
.vs-final-box {
  max-width: var(--vs-max); margin: 0 auto;
  background: linear-gradient(135deg, rgba(224, 87, 127, .22), rgba(224, 87, 127, .06)), var(--vs-panel);
  border: 1px solid rgba(224, 87, 127, .45); border-radius: 24px;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px; align-items: center;
}
.vs-final-title {
  font-weight: 800; font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.0; letter-spacing: -.03em; margin: 0; text-wrap: balance;
}
.vs-final-lead { font-size: 18px; line-height: 1.55; color: var(--vs-ink-soft); margin: 20px 0 0; max-width: 540px; }
.vs-final-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-self: start; }
/* Na akcentním podkladu by sekundární tlačítko splývalo, proto tmavá varianta. */
.vs-btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; background: var(--vs-bg); color: var(--vs-ink);
  border: 1px solid var(--vs-line-3); font-weight: 700; cursor: pointer;
}
.vs-btn-dark:hover { background: var(--vs-panel-2); color: var(--vs-ink); }

/* ── modaly ────────────────────────────────────────────────────────────── */

/* Obsluhu dělá initPopups() v app.js, tohle je jen vzhled.
   Třída .mdl zůstává kvůli té obsluze, .vs-mdl přebarvuje do tmavé palety. */
.vs-mdl {
  border: 0; padding: 0; background: transparent;
  max-width: min(640px, calc(100vw - 32px)); width: 100%;
  max-height: calc(100vh - 48px);
  color: var(--vs-ink);
}
.vs-mdl::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.vs-mdl-wide { max-width: min(1040px, calc(100vw - 32px)); }

.vs-mdl-sheet {
  position: relative;
  background: var(--vs-panel);
  border: 1px solid var(--vs-line-2); border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.vs-mdl-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; border: 1px solid var(--vs-line-2);
  color: var(--vs-ink-soft); font-size: 22px; line-height: 1; cursor: pointer;
}
.vs-mdl-close:hover { color: var(--vs-ink); background: var(--vs-panel-2); }

.vs-mdl-kicker { font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em; color: var(--vs-accent); }
.vs-mdl-title {
  margin: 10px 40px 0 0; font-weight: 800;
  font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; line-height: 1.05;
}
.vs-mdl-lead { margin: 12px 0 0; color: var(--vs-ink-mute); font-size: 16px; line-height: 1.55; }

.vs-mdl-list {
  margin: 20px 0 0; padding: 0; list-style: none;
  display: grid; gap: 0; border-top: 1px solid var(--vs-line-2);
}
.vs-mdl-list li {
  padding: 14px 0; border-bottom: 1px solid var(--vs-line-2);
  font-size: 16px; line-height: 1.5; display: flex; gap: 14px;
}
.vs-mdl-num { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-accent); padding-top: 3px; flex: none; }

.vs-mdl-groups { display: grid; gap: 18px; margin-top: 22px; }
.vs-mdl-group-label { font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em; color: var(--vs-ink-mute); }
.vs-mdl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vs-mdl-chip {
  font-size: 14px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--vs-line-2); background: var(--vs-bg); color: var(--vs-ink);
}
.vs-mdl-note { margin: 18px 0 0; font-size: 13px; color: var(--vs-ink-dim); line-height: 1.5; }
.vs-mdl-idealfor {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vs-line-2);
  display: flex; gap: 12px; font-size: 15px; color: var(--vs-ink-soft); flex-wrap: wrap;
}
.vs-mdl-foot { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.vs-mdl-img { display: block; width: 100%; margin-top: 18px; border-radius: 12px; }

/* ── registrační modal ─────────────────────────────────────────────────── */

/* reg-modal.php se ZÁMĚRNĚ nepřepisuje: visí na něm obsluha formuláře v app.js
   (#regForm, #regEmail, #regSubmit, #regMsg, data-* atributy), Turnstile
   i honeypot. Jeho třídy ale pocházejí ze starého styles.css, který v2 nenačítá,
   takže tu jsou dopsané znovu v tmavé paletě. Selektory musí sedět na existující
   markup, ne naopak. */

.mdl-reg {
  border: 0; padding: 0; background: transparent;
  max-width: min(520px, calc(100vw - 32px)); width: 100%;
  color: var(--vs-ink);
}
.mdl-reg::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.mdl-reg .mdl-sheet {
  position: relative;
  background: var(--vs-panel);
  border: 1px solid var(--vs-line-2); border-radius: 20px;
  padding: clamp(24px, 4vw, 36px);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.mdl-reg .mdl-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 10px;
  background: transparent; border: 1px solid var(--vs-line-2);
  color: var(--vs-ink-soft); font-size: 22px; line-height: 1; cursor: pointer;
}
.mdl-reg .mdl-close:hover { color: var(--vs-ink); background: var(--vs-panel-2); }
/* Úchyt dává smysl jen u spodní šuplíkové varianty na mobilu. */
.mdl-reg .mdl-handle { display: none; }

.mdl-reg .mdl-kicker,
.mdl-reg .mdl-foot-label {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-accent);
}
.mdl-reg .mdl-foot-label { color: var(--vs-ink-mute); }
.mdl-reg .mdl-title {
  margin: 10px 40px 0 0; font-weight: 800;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; line-height: 1.05;
}
.mdl-reg .mdl-intro { margin: 12px 0 0; color: var(--vs-ink-mute); font-size: 16px; line-height: 1.55; }
.mdl-reg .mdl-intro-sub { color: var(--vs-ink-dim); font-size: 15px; }

.mdl-reg .reg-form { margin-top: 24px; display: grid; gap: 10px; }
.mdl-reg .reg-form-label {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-ink-mute); text-transform: uppercase;
}
/* 16px je záměr: menší písmo iOS při zaostření pole přiblíží celou stránku. */
.mdl-reg .reg-form-input {
  height: 50px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--vs-line-2); background: var(--vs-bg);
  color: var(--vs-ink); font-size: 16px; font-family: inherit; outline: none;
  width: 100%;
}
.mdl-reg .reg-form-input:focus { border-color: var(--vs-accent); }

.mdl-reg .reg-form-msg { font-size: 14px; line-height: 1.45; min-height: 0; }
.mdl-reg .reg-form-msg.is-error { color: #FF8FAE; }
.mdl-reg .reg-form-msg.is-success { color: #7BD8A0; }

.mdl-reg .reg-form-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--vs-accent); color: var(--vs-accent-ink);
  font-weight: 700; font-size: 16px; cursor: pointer; transition: background .2s;
}
.mdl-reg .reg-form-submit:hover { background: var(--vs-accent-2); }
.mdl-reg .reg-form-submit[disabled] { opacity: .6; cursor: default; }

.mdl-reg .reg-form-tos { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-dim); }

.mdl-reg .mdl-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--vs-line-2);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.mdl-reg .reg-form-alt-link { font-weight: 600; font-size: 15px; }

/* ── patička ───────────────────────────────────────────────────────────── */

.vs-footer {
  border-top: 1px solid var(--vs-line);
  padding: clamp(48px, 6vw, 72px) var(--vs-gutter) 32px;
  background: #0B0A0A;
}
.vs-footer-grid {
  max-width: var(--vs-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 48px 32px;
}
.vs-footer-brand { grid-column: span 2; min-width: 0; }
.vs-footer-tagline { color: var(--vs-ink-mute); font-size: 15px; line-height: 1.55; margin: 18px 0 0; max-width: 340px; }

.vs-footer-eco { margin-top: 22px; }
.vs-footer-eco-label {
  font-family: var(--vs-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--vs-ink-dim); margin-bottom: 10px;
}
.vs-footer-eco-list { display: grid; gap: 6px; max-width: 360px; }
.vs-eco-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--vs-ink-soft); font-size: 14px;
}
.vs-eco-row b { font-family: var(--vs-mono); }
.vs-eco-row.is-cz b { color: #C8582A; }
.vs-eco-row.is-space b { color: var(--vs-ink); }
.vs-eco-row.is-cz:hover { border-color: rgba(200, 88, 42, .6); color: var(--vs-ink); }
.vs-eco-row.is-space:hover { border-color: rgba(255, 255, 255, .3); color: var(--vs-ink); }
/* Aktuální doména není odkaz — na sebe sama se neodkazuje. */
.vs-eco-row.is-current {
  border-color: rgba(224, 87, 127, .5);
  background: rgba(224, 87, 127, .08);
  color: var(--vs-ink);
}
.vs-eco-row.is-current b { color: var(--vs-accent); }

.vs-footer-grid h4 {
  margin: 0 0 14px; font-family: var(--vs-mono); font-size: 11px;
  letter-spacing: .16em; color: var(--vs-ink-dim); font-weight: 400;
}
.vs-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.vs-footer-links a { color: var(--vs-ink-soft); }
.vs-footer-links a:hover { color: var(--vs-ink); }

.vs-footer-bottom {
  max-width: var(--vs-max); margin: 64px auto 0;
  border-top: 1px solid var(--vs-line); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--vs-ink-dim); font-family: var(--vs-mono);
}
.vs-footer-bottom a { color: var(--vs-ink-mute); }

@media (max-width: 720px) {
  .vs-footer-brand { grid-column: span 1; }
}

/* ── mobil ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Stojánek a telefon pod sebe, spojnici schovat — vodorovná čára mezi prvky,
     které už nejsou vedle sebe, by byla matoucí. */
  .vs-connector { display: none; }
  .vs-hero-visual { gap: 28px; flex-wrap: wrap; }
  .vs-stand { transform: none; }
  .vs-stand-base { margin-left: 0; width: 100%; }
  .vs-axis { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 420px) {
  /* Na úzkých displejích se i 250/270 px vejde jen těsně, tak je stáhneme. */
  .vs-stand-card { width: 100%; }
  .vs-phone { width: 100%; }
  .vs-hero-cta .vs-btn-lg { flex: 1 1 100%; justify-content: center; }
}

/* ── kontakt ───────────────────────────────────────────────────────────── */
/* Stránka /kontakt. Původní sekce byla psaná pro světlý vzhled a po přechodu
   na tmavý web by zůstala bez stylů, protože styles.css se už nenačítá. */

.vs-contact {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
}
@media (max-width: 900px) { .vs-contact { grid-template-columns: 1fr; } }

.vs-contact-main .vs-h1 { max-width: 18ch; }

.vs-contact-block { margin-top: clamp(36px, 4vw, 56px); }

.vs-contact-h {
  font-family: var(--vs-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vs-ink-mute);
  margin: 0 0 10px; font-weight: 400;
}

.vs-contact-hours { margin: 0 0 16px; font-size: 15px; color: var(--vs-ink-mute); }

.vs-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-contact-list li {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--vs-line); padding-bottom: 10px;
}
.vs-contact-label { font-size: 14px; color: var(--vs-ink-dim); min-width: 84px; }
.vs-contact-value {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; color: var(--vs-ink);
  text-decoration: none;
}
a.vs-contact-value:hover { color: var(--vs-accent); }
.vs-contact-value.mono, .mono { font-family: var(--vs-mono); }

.vs-contact-cols {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.vs-contact-address {
  font-style: normal; line-height: 1.7; color: var(--vs-ink-soft); font-size: 16px;
}
.vs-contact-address strong { color: var(--vs-ink); }

.vs-contact-card {
  background: var(--vs-panel); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px; padding: clamp(24px, 3vw, 36px);
  display: grid; gap: 18px; justify-items: center; text-align: center;
  position: sticky; top: 100px;
}
@media (max-width: 900px) { .vs-contact-card { position: static; } }

.vs-contact-qr { width: min(260px, 60vw); line-height: 0; }
.vs-contact-qr svg, .vs-contact-qr canvas { width: 100%; height: auto; display: block; }

.vs-contact-note { margin: 0; font-size: 13px; color: var(--vs-ink-dim); line-height: 1.5; }

/* ── 02 — Proč chytrý QR: vizuál QR → linka → telefon ─────────────────────────
   Layout je schválně ve třídách, ne inline: inline styl přebije media query,
   takže by se to na mobilu nedalo překlopit. Zbytek bloku inline zůstává. */
.vs-sol-viz{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.vs-sol-link{width:60px;border-top:2px dashed rgba(224,87,127,.6);position:relative;flex:none}
.vs-sol-link-dot{position:absolute;right:-5px;top:-5px;width:8px;height:8px;border-radius:50%;background:#E0577F}

/* Pod ~590px se QR (200) + linka (60) + telefon (230) na řádek nevejdou. Flex-wrap
   je pak rozlomil na „QR + linka" a pod to odsazený telefon, takže linka mířila
   doprava do prázdna. Ve sloupci míří linka dolů a obojí je vycentrované. */
@media (max-width: 620px){
  .vs-sol-viz{flex-direction:column;flex-wrap:nowrap}
  .vs-sol-link{width:0;height:44px;border-top:0;border-left:2px dashed rgba(224,87,127,.6)}
  .vs-sol-link-dot{right:auto;left:-5px;top:auto;bottom:-5px}
}

/* Slot na fotku v telefonu (sekce 05) — když je k dispozici skutečná fotka,
   šrafovaný placeholder ustoupí a obrázek vyplní rámeček bez deformace. */
/* Pevných 110 px je výška šrafovaného placeholderu. Fotka jich potřebuje víc: při
   šířce obsahu 236 px vychází celá na ~197 px, takže na 110 px se ořezávala skoro
   o polovinu. Poměr stran místo pevné výšky ji ukáže celou. Místo v telefonu na to je
   (obrazovka má min-height 560 px a obsah karty je pod ním). */
.vs-case-img.has-photo{background:none;padding:0;overflow:hidden;height:auto;aspect-ratio:600/502}
.vs-case-img.has-photo img{width:100%;height:100%;object-fit:cover;display:block}