/* ---------------------------------------------------------------
   VINAUTO — základní styl. Bez frameworku, bez build stepu.
   --------------------------------------------------------------- */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f5f7fc;
  --bg-tint:   #eef3ff;
  --ink:       #0b1220;
  --ink-2:     #3a465c;
  --ink-3:     #6b7791;
  --line:      #e3e8f2;
  --line-2:    #eef1f7;

  --brand:     #2450e6;
  --brand-dk:  #1637a8;
  --brand-lt:  #e9eeff;
  --brand-2:   #00b9a6;
  --accent:    #ff7a18;

  --night:     #070d1e;
  --night-2:   #101f42;
  --night-3:   #17346e;

  --ok:        #0f7a4d;
  --ok-bg:     #e4f5ec;
  --warn:      #8a5a00;
  --warn-bg:   #fdf3e0;
  --bad:       #a01818;
  --bad-bg:    #fdeaea;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --pill:      999px;
  --shadow:    0 1px 2px rgba(11,18,32,.04), 0 6px 20px rgba(11,18,32,.07);
  --shadow-lg: 0 6px 16px rgba(11,18,32,.07), 0 26px 60px rgba(11,18,32,.13);
  --shadow-xl: 0 10px 24px rgba(11,18,32,.10), 0 40px 90px rgba(11,18,32,.18);
  --ring:      0 0 0 4px rgba(36,80,230,.16);
  --maxw:      1160px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dk); }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); margin-top: 2.2em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; }
h4 { font-size: 1.02rem; margin-top: 1.5em; }
p  { margin: 0 0 1.1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* ---------------------------------------------------------- skiplink */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------- header */
.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 62px; }

.logo {
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap; flex: none;
}
.logo span { color: var(--brand); }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: 7px 11px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-lt); color: var(--brand-dk); font-weight: 600; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 7px 11px; font-size: .9rem; cursor: pointer;
  color: var(--ink-2); font-family: inherit;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; margin: 0; order: 3; }
  .nav.open { display: block; padding-bottom: 12px; }
  .nav ul { flex-direction: column; }
  .site-head .wrap { flex-wrap: wrap; gap: 10px; }
}

/* ---------------------------------------------------------- hero */
.hero {
  background: linear-gradient(180deg, var(--bg-tint) 0%, #fff 100%);
  border-bottom: 1px solid var(--line-2);
  padding: 56px 0 44px;
}
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.13rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 0; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-lt);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}

/* ---------------------------------------------------------- VIN form */
.vin-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 22px; margin-top: 28px;
}
.vin-form { display: flex; gap: 10px; flex-wrap: wrap; }
.vin-form label { flex: 1 1 320px; display: block; }
.vin-form .lab { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.vin-input {
  width: 100%; font-family: var(--mono); font-size: 1.12rem; letter-spacing: .09em;
  text-transform: uppercase; padding: 13px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.vin-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt); }
.vin-input::placeholder { letter-spacing: .05em; color: #a8b0bd; text-transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  padding: 13px 24px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  background: var(--brand); color: #fff; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--brand-dk); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--brand-dk); }
.btn-sm { padding: 9px 16px; font-size: .92rem; }
.btn-block { width: 100%; }

.form-note { font-size: .85rem; color: var(--ink-3); margin: 12px 0 0; }
.field-err { color: var(--bad); font-size: .9rem; margin: 10px 0 0; font-weight: 500; }

/* ---------------------------------------------------------- result card */
.result { margin-top: 26px; }
.result[hidden] { display: none; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line-2); background: var(--bg-soft);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 1.3rem; }
.card-head .vin-echo { font-family: var(--mono); font-size: .86rem; color: var(--ink-3); letter-spacing: .06em; }
.card-body { padding: 22px; }

.headline-fee {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--radius); margin-bottom: 22px;
  border: 1px solid;
}
.headline-fee .amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.headline-fee .what { font-size: .95rem; }
.fee-zero { background: var(--ok-bg); border-color: #bfe3ce; color: var(--ok); }
.fee-some { background: var(--warn-bg); border-color: #f0dcae; color: var(--warn); }
.fee-high { background: var(--bad-bg); border-color: #f2c4c4; color: var(--bad); }
.fee-unknown { background: var(--bg-soft); border-color: var(--line); color: var(--ink-2); }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.stat {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: #fff;
}
.stat .k { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.stat .v { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.stat .sub { font-size: .85rem; color: var(--ink-3); margin-top: 2px; }
.stat.hi { border-color: #cfe0f2; background: var(--brand-lt); }
.stat.warn { border-color: #f0dcae; background: var(--warn-bg); }
.stat.bad  { border-color: #f2c4c4; background: var(--bad-bg); }
.stat.good { border-color: #bfe3ce; background: var(--ok-bg); }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec-table th { color: var(--ink-3); font-weight: 600; width: 44%; }

details.raw { margin-top: 20px; border-top: 1px solid var(--line-2); padding-top: 14px; }
details.raw summary { cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--brand); }

/* ---------------------------------------------------------- table */
table.data { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .96rem; }
table.data th, table.data td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; }
table.data thead th { background: var(--bg-soft); font-weight: 700; }
table.data tbody tr:nth-child(even) { background: #fbfcfe; }
.table-scroll { overflow-x: auto; }

/* ---------------------------------------------------------- callouts */
.note, .warning, .legal, .tip {
  border-left: 4px solid; border-radius: var(--radius-sm);
  padding: 15px 18px; margin: 1.5em 0; font-size: .96rem;
}
.note    { background: var(--brand-lt); border-color: var(--brand); }
.warning { background: var(--warn-bg);  border-color: #c99a2e; }
.tip     { background: var(--ok-bg);    border-color: var(--ok); }
.legal   { background: var(--bg-soft);  border-color: var(--ink-3); font-size: .9rem; color: var(--ink-2); }
.note > :last-child, .warning > :last-child, .legal > :last-child, .tip > :last-child { margin-bottom: 0; }
.note strong, .warning strong, .tip strong { display: block; margin-bottom: 3px; }

.para {
  display: inline-block; font-size: .82rem; color: var(--ink-3);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 7px; font-weight: 500; white-space: nowrap;
}

/* ---------------------------------------------------------- calculators */
.calc {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin: 1.8em 0;
}
.calc h3 { margin-top: 0; }
.calc-row { margin-bottom: 15px; }
.calc-row > .lab { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.calc select, .calc input[type=text], .calc input[type=number], .calc input[type=date], .calc input[type=email] {
  width: 100%; padding: 11px 12px; font-family: inherit; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.calc select:focus, .calc input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; font-size: .96rem; }
.check input { margin-top: 5px; flex: none; width: 17px; height: 17px; accent-color: var(--brand); }
.calc-out {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-top: 16px;
}
.calc-out .total { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.calc-out ul { list-style: none; padding: 0; margin: 12px 0 0; font-size: .94rem; }
.calc-out li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.calc-out li:last-child { border-bottom: 0; }
.calc-out li span:last-child { font-weight: 600; white-space: nowrap; }
.calc-cols { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------------------------------------------------------- compare tool */
.compare-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.verdict { padding: 13px 16px; border-radius: var(--radius-sm); margin-top: 12px; font-weight: 500; }
.verdict.match { background: var(--ok-bg); color: var(--ok); }
.verdict.diff  { background: var(--warn-bg); color: var(--warn); }

/* ---------------------------------------------------------- cards / links */
.link-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1.6em 0; list-style: none; padding: 0; }
.link-cards li { margin: 0; }
.link-card {
  display: block; height: 100%; padding: 18px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
.link-card:hover { border-color: var(--brand); color: inherit; box-shadow: var(--shadow-lg); }
.link-card .t { font-weight: 700; color: var(--brand-dk); display: block; margin-bottom: 4px; }
.link-card .d { font-size: .91rem; color: var(--ink-2); }

/* ---------------------------------------------------------- affiliate */
.aff {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  margin: 1.8em 0;
}
.aff h4 { margin: 0 0 6px; font-size: 1.05rem; }
.aff p { font-size: .94rem; margin-bottom: 12px; color: var(--ink-2); }
.aff-disclosure {
  font-size: .78rem; color: var(--ink-3); margin: 10px 0 0; line-height: 1.5;
}

/* ---------------------------------------------------------- TOC / FAQ */
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 1.6em 0; }
.toc strong { display: block; margin-bottom: 8px; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 4px; }

.faq { margin: 1.6em 0; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; margin-bottom: 10px; background: #fff; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 18px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--brand); font-weight: 800; }
.faq details[open] summary::before { content: "− "; }
.faq .a { padding: 0 18px 14px; color: var(--ink-2); font-size: .96rem; }
.faq .a > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- breadcrumb */
.crumbs { font-size: .86rem; color: var(--ink-3); padding: 14px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: 6px; color: var(--line); }
.crumbs li:last-child::after { content: ""; }

/* ---------------------------------------------------------- content */
main { padding-bottom: 60px; }
.content { padding-top: 26px; }
.content ul, .content ol { margin: 0 0 1.2em; padding-left: 24px; }
.content li { margin-bottom: .45em; }
.updated { font-size: .86rem; color: var(--ink-3); margin: -0.4em 0 1.8em; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0; }
.pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .88rem;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
}
.pill:hover { border-color: var(--brand); color: var(--brand-dk); background: var(--brand-lt); }

/* ---------------------------------------------------------- footer */
.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 42px 0 32px; font-size: .92rem; color: var(--ink-2); margin-top: 40px;
}
.foot-cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot-cols h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 6px; }
.foot-cols a { color: var(--ink-2); text-decoration: none; }
.foot-cols a:hover { color: var(--brand); text-decoration: underline; }
.foot-legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }
.foot-legal p { margin-bottom: .6em; }

/* ---------------------------------------------------------- misc */
.spinner {
  width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.demo-banner {
  background: var(--warn-bg); border: 1px solid #f0dcae; color: var(--warn);
  border-radius: var(--radius-sm); padding: 11px 15px; font-size: .92rem; margin-bottom: 16px; font-weight: 500;
}
.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;
}

@media print {
  .site-head, .site-foot, .nav, .aff, .btn { display: none !important; }
  body { font-size: 12pt; }
  .card { box-shadow: none; border: 1px solid #999; }
}

/* ═══════════════════════════════════════════════════════════════
   v2 — ilustrace, článková šablona, magazín
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- ilustrace */
.art { display: block; width: 100%; height: auto; }

.art-hero {
  max-width: 520px; margin-left: auto;
  filter: drop-shadow(0 12px 32px rgba(16,24,40,.10));
}
.art-badge { width: 96px; height: 96px; flex: none; }

figure.fig {
  margin: 2em 0; padding: 0;
}
figure.fig .art-diagram {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfcfe; box-shadow: var(--shadow);
}
figure.fig figcaption {
  margin-top: 10px; font-size: .87rem; color: var(--ink-3); line-height: 1.55;
  padding-left: 2px; border-left: 3px solid var(--line-2); padding-left: 12px;
}

/* hero se dvěma sloupci */
.hero-split .wrap {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 40px; align-items: center;
}
.hero-split .hero-art { min-width: 0; }
@media (max-width: 880px) {
  .hero-split .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero-split .hero-art { order: -1; max-width: 400px; }
  .art-hero { margin: 0 auto; }
}

/* hlavička podstránky s odznakem */
.hero-badged .wrap { display: flex; gap: 28px; align-items: center; }
.hero-badged .hero-txt { min-width: 0; }
@media (max-width: 700px) {
  .hero-badged .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .art-badge { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------- vylepšený hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 380px at 78% -8%, #dbe9f8 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-tint) 0%, #fff 88%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.trust-row {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px;
  font-size: .87rem; color: var(--ink-2);
}
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row span::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--ok-bg);
  box-shadow: inset 0 0 0 1.5px var(--ok);
}

/* ---------------------------------------------------------- statistiky */
.stat-strip {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 2em 0;
}
.stat-strip > div { background: #fff; padding: 20px 22px; }
.stat-strip .n {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand);
  line-height: 1.1;
}
.stat-strip .l { font-size: .88rem; color: var(--ink-2); margin-top: 5px; }
.stat-strip .src { font-size: .76rem; color: var(--ink-3); margin-top: 7px; }

/* ---------------------------------------------------------- článek */
.article-head { padding: 44px 0 30px; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: .86rem; color: var(--ink-3); margin-top: 16px;
}
.article-meta .cat {
  background: var(--brand-lt); color: var(--brand-dk); font-weight: 700;
  padding: 3px 10px; border-radius: 999px; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
}
.article-meta .cat:hover { background: var(--brand); color: #fff; }

.article-body { font-size: 17.5px; }
.article-body > h2 {
  scroll-margin-top: 80px;
  padding-top: .35em; border-top: 1px solid var(--line-2);
}
.article-body > h2:first-of-type { border-top: 0; padding-top: 0; }
.article-body h3 { scroll-margin-top: 80px; }
.article-body > p:first-of-type {
  font-size: 1.12rem; color: var(--ink-2); line-height: 1.6;
}
.article-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--brand);
  font-size: 1.06rem; color: var(--ink-2);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.key-takeaway {
  background: linear-gradient(135deg, var(--brand-lt) 0%, #f4f9ff 100%);
  border: 1px solid #cfe0f2; border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 2em;
}
.key-takeaway strong {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand); margin-bottom: 8px;
}
.key-takeaway ul { margin: 0; padding-left: 20px; }
.key-takeaway li { margin-bottom: .35em; }
.key-takeaway > :last-child { margin-bottom: 0; }

/* vložený CTA na nástroj uprostřed textu */
.tool-cta {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 22px 26px; margin: 2em 0;
}
.tool-cta .t { flex: 1 1 260px; min-width: 0; }
.tool-cta strong { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.tool-cta p { margin: 0; font-size: .93rem; color: #c3ccd9; }
.tool-cta .btn { background: #fff; color: var(--ink); border-color: #fff; }
.tool-cta .btn:hover { background: var(--brand-lt); color: var(--brand-dk); }

/* ---------------------------------------------------------- magazín */
.mag-grid {
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none; padding: 0; margin: 1.6em 0;
}
.mag-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.mag-card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-lg); color: inherit;
  transform: translateY(-2px);
}
.mag-card .thumb {
  background: linear-gradient(135deg, var(--brand-lt), #f4f9ff);
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0 14px;
}
.mag-card .thumb .art-badge { width: 74px; height: 74px; }
.mag-card .body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mag-card .cat {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand); margin-bottom: 6px;
}
.mag-card .t { font-weight: 700; font-size: 1.02rem; line-height: 1.35; margin-bottom: 6px; }
.mag-card .d { font-size: .9rem; color: var(--ink-2); line-height: 1.5; flex: 1; }
.mag-card .more {
  margin-top: 12px; font-size: .87rem; font-weight: 600; color: var(--brand);
}

.mag-section { margin-top: 2.6em; }
.mag-section > h2 {
  display: flex; align-items: center; gap: 12px; margin-bottom: .3em;
}
.mag-section > h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.mag-section > p.sub { color: var(--ink-2); margin-bottom: 1.2em; }

/* related */
.related {
  background: var(--bg-soft); border-top: 1px solid var(--line);
  margin-top: 3em; padding: 34px 0 10px;
}
.related h2 { margin-top: 0; font-size: 1.3rem; }

/* ---------------------------------------------------------- obsah stránky */
.toc { position: relative; }
.toc ol { counter-reset: toc; list-style: none; padding-left: 0; }
.toc ol li { counter-increment: toc; padding-left: 28px; position: relative; }
.toc ol li::before {
  content: counter(toc); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-lt); color: var(--brand-dk);
  font-size: .72rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- doplňky */
.hero .eyebrow { box-shadow: inset 0 0 0 1px #cfe0f2; }

.pill.pill-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.answer-box {
  border: 2px solid var(--brand); border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 2em; background: #fff;
  box-shadow: var(--shadow);
}
.answer-box .q {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand); margin-bottom: 6px;
}
.answer-box .a { font-size: 1.1rem; line-height: 1.55; }
.answer-box .a strong { color: var(--ink); }
.answer-box > :last-child { margin-bottom: 0; }

.compare-cols {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.6em 0;
}
.compare-cols > div {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.compare-cols .good { background: var(--ok-bg); border-color: #bfe3ce; }
.compare-cols .bad  { background: var(--bad-bg); border-color: #f2c4c4; }
.compare-cols h4 { margin: 0 0 8px; }
.compare-cols ul { margin: 0; padding-left: 18px; font-size: .93rem; }

.site-foot .foot-cols { gap: 30px; }

/* ═══════════════════════════════════════════════════════════════
   v3 — kontrolní skóre, garáž, widget
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- skóre */
.score {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 26px;
  align-items: start; margin: 0 0 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.score-dial svg { width: 100%; height: auto; display: block; }
.score-body h3 { margin: 0 0 6px; font-size: 1.15rem; }
.score-note { font-size: .88rem; color: var(--ink-3); margin: 0 0 14px; line-height: 1.55; }

.score-list { list-style: none; margin: 0; padding: 0; }
.score-list li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid var(--line-2); font-size: .95rem;
}
.score-list li:first-child { border-top: 0; padding-top: 0; }
.score-list .d { color: var(--ink-2); font-size: .9rem; }

.ck {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  position: relative;
}
.ck.ok  { background: var(--ok); }
.ck.bad { background: var(--warn); }
.ck.na  { background: var(--line); }
.ck::after {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 800;
}
.ck.ok::after  { content: "✓"; }
.ck.bad::after { content: "!"; }
.ck.na::after  { content: "?"; color: var(--ink-3); }

@media (max-width: 640px) {
  .score { grid-template-columns: 1fr; gap: 16px; }
  .score-dial { max-width: 140px; margin: 0 auto; }
}

/* ---------------------------------------------------------- lišta akcí */
.result-actions {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2);
}
.act-msg { font-size: .89rem; color: var(--ok); font-weight: 500; }

/* ---------------------------------------------------------- garáž */
.gar-grid {
  list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.gar-card {
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; background: #fff;
  box-shadow: var(--shadow);
}
.gar-card.ok   { border-left-color: var(--ok); }
.gar-card.warn { border-left-color: #c99a2e; }
.gar-card.bad  { border-left-color: var(--bad); }
.gar-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.gar-head strong { font-size: 1rem; line-height: 1.3; }
.gar-del {
  background: none; border: 0; color: var(--ink-3); font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 0 2px; flex: none;
}
.gar-del:hover { color: var(--bad); }
.gar-vin { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); letter-spacing: .06em; margin: 4px 0 9px; }
.gar-stk { font-size: .93rem; font-weight: 600; margin-bottom: 3px; }
.gar-card.ok   .gar-stk { color: var(--ok); }
.gar-card.warn .gar-stk { color: var(--warn); }
.gar-card.bad  .gar-stk { color: var(--bad); }
.gar-fee { font-size: .89rem; color: var(--ink-2); margin-bottom: 11px; }

/* ---------------------------------------------------------- embed widget */
.embed-preview {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-soft); margin: 1.6em 0;
}
.embed-preview iframe { display: block; width: 100%; border: 0; }
.embed-bar {
  padding: 9px 14px; font-size: .8rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line); background: #fff;
}
pre.code {
  background: var(--ink); color: #e6edf7; padding: 16px 18px; border-radius: var(--radius-sm);
  overflow-x: auto; font-family: var(--mono); font-size: .84rem; line-height: 1.6;
  margin: 1.2em 0;
}
pre.code code { white-space: pre; }
.copy-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: -.6em; }

/* ---------------------------------------------------------- slovník */
.slovnik-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 1.4em 0 2em;
  padding: 14px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.slovnik-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 7px;
  background: #fff; border: 1px solid var(--line); text-decoration: none;
  font-weight: 700; font-size: .92rem; color: var(--brand);
}
.slovnik-nav a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.term-list { list-style: none; margin: 0 0 2.4em; padding: 0; }
.term-list li {
  border-bottom: 1px solid var(--line-2); padding: 13px 0;
}
.term-list a { font-weight: 700; text-decoration: none; }
.term-list a:hover { text-decoration: underline; }
.term-list .d { display: block; color: var(--ink-2); font-size: .93rem; margin-top: 3px; }

.term-def {
  border-left: 4px solid var(--brand); background: var(--brand-lt);
  border-radius: var(--radius-sm); padding: 18px 22px; margin: 0 0 1.8em;
  font-size: 1.08rem; line-height: 1.6;
}
.term-def > :last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   v4 — servisy, mapa, recenze, technická karta
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- mapa */
.mapa {
  position: relative; width: 100%; margin: 1.8em 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft);
}
.mapa-plocha {
  position: absolute; inset: 0; cursor: grab; overflow: hidden;
  touch-action: pan-y;
}
.mapa-plocha.tahne { cursor: grabbing; }
.mapa-plocha:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.mapa-dlazdice, .mapa-markery { position: absolute; inset: 0; }
.mapa-dlazdice img {
  position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none;
}
.mapa-markery { pointer-events: none; }

.mrk {
  position: absolute; transform: translate(-50%, -100%);
  pointer-events: auto; text-decoration: none; display: block;
  filter: drop-shadow(0 2px 4px rgba(16,24,40,.3));
}
.mrk-bod {
  display: block; width: 16px; height: 16px; margin: 0 auto;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--brand); border: 2.5px solid #fff;
}
.mrk-popis {
  display: block; margin-top: 6px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
  font-size: .78rem; line-height: 1.3; white-space: nowrap;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .12s;
}
.mrk:hover .mrk-popis, .mrk:focus .mrk-popis { opacity: 1; }
.mrk:hover .mrk-bod { background: var(--bad); }
.mrk-typ { color: var(--ink-3); }

.mapa-ovladani { position: absolute; right: 12px; top: 12px; display: grid; gap: 5px; }
.mapa-ovladani button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1.15rem; font-weight: 700;
  cursor: pointer; line-height: 1; box-shadow: var(--shadow);
}
.mapa-ovladani button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.mapa-atribuce {
  position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.9);
  font-size: .72rem; color: var(--ink-3); padding: 3px 8px; border-radius: 7px 0 0 0;
}
.mapa-atribuce a { color: var(--ink-2); }
.mapa-off { padding: 26px; text-align: center; }
.mapa-off p { margin-bottom: 10px; }

/* ---------------------------------------------------------- seznam servisů */
.servis-list { list-style: none; margin: 1.2em 0; padding: 0; }
.servis-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.li-typ {
  flex: none; width: 38px; height: 24px; border-radius: 5px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--ink-3); border: 1px solid var(--line);
  margin-top: 2px;
}
.typ-stk { background: var(--brand-lt); color: var(--brand-dk); border-color: #cfe0f2; }
.typ-sme { background: var(--ok-bg); color: var(--ok); border-color: #bfe3ce; }
.li-main { min-width: 0; }
.li-main strong { font-weight: 600; }
.li-adr { display: block; font-size: .88rem; color: var(--ink-3); margin-top: 2px; }
.li-rating { font-size: .85rem; color: var(--warn); font-weight: 600; margin-left: 8px; white-space: nowrap; }
.li-rating span { color: var(--ink-3); font-weight: 400; }

/* ---------------------------------------------------------- hodnocení */
.rating {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid #f0dcae; margin: 0 0 1.6em;
}
.rating-big { padding: 18px 22px; }
.rating strong { font-size: 1.5rem; color: var(--warn); letter-spacing: -.02em; }
.rating .cnt { font-size: .88rem; color: var(--ink-2); }
.stars { color: #d99b16; letter-spacing: 1px; font-size: 1.1rem; }
.stars .off { color: #dfd0ad; }
.rating-empty {
  padding: 14px 18px; border-radius: var(--radius); background: var(--bg-soft);
  border: 1px dashed var(--line); color: var(--ink-2); font-size: .95rem; margin: 0 0 1.6em;
}

.rec-list { list-style: none; margin: 1.4em 0; padding: 0; }
.rec-list li {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 12px; background: #fff;
}
.rec-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.rec-head strong { font-size: .95rem; }
.rec-date { font-size: .82rem; color: var(--ink-3); margin-left: auto; }
.rec-list p { margin: 0; font-size: .96rem; color: var(--ink-2); }

.rec-form textarea {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); resize: vertical;
}
.rec-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt); }
.rec-stars { display: flex; gap: 7px; flex-wrap: wrap; }
.rec-stars label { cursor: pointer; }
.rec-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rec-stars span {
  display: inline-block; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: .95rem;
}
.rec-stars input:checked + span { background: var(--warn-bg); border-color: #d99b16; color: var(--warn); }
.rec-stars input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-lt); }

/* ---------------------------------------------------------- technická karta */
.tech-karta { margin-top: 22px; }
.tech-karta h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin: 22px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
}
.tech-karta h3:first-child { margin-top: 0; }
.tech-grid {
  display: grid; gap: 0 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tech-grid > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: .94rem;
}
.tech-grid .k { color: var(--ink-3); }
.tech-grid .v { font-weight: 600; text-align: right; }

/* ---------------------------------------------------------- cena vozidla */
.cena-blok {
  border: 1px solid #cfe0f2; background: linear-gradient(135deg, var(--brand-lt) 0%, #f4f9ff 100%);
  border-radius: var(--radius); padding: 20px 24px; margin: 1.8em 0;
}
.cena-blok h3 { margin: 0 0 6px; font-size: 1.02rem; }
.cena-hodnota {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--brand-dk); margin-bottom: 8px;
}
.cena-blok p { font-size: .94rem; margin-bottom: 6px; }
.cena-blok > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- TCO kalkulačka */
.tco-form h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.tco-form h3:first-child { margin-top: 0; }

.tco-cards {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 1.8em 0;
}
.tco-card {
  border-radius: var(--radius); padding: 20px 24px; border: 1px solid;
}
.tco-card.naklad { background: var(--brand-lt); border-color: #cfe0f2; }
.tco-card.cash   { background: var(--ok-bg);   border-color: #bfe3ce; }
.tco-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 4px;
}
.tco-card.naklad .tco-label { color: var(--brand); }
.tco-card.cash   .tco-label { color: var(--ok); }
.tco-num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tco-num span { font-size: .9rem; font-weight: 500; color: var(--ink-3); margin-left: 5px; }
.tco-card.naklad .tco-num { color: var(--brand-dk); }
.tco-card.cash   .tco-num { color: var(--ok); }
.tco-range { font-size: .84rem; color: var(--ink-3); margin: 5px 0 10px; }
.tco-card p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.tco-km { text-align: center; color: var(--ink-2); margin: -.6em 0 1.6em; }

.tco-list { list-style: none; margin: .8em 0 1.6em; padding: 0; }
.tco-list li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: .96rem;
}
.tco-list li span:last-child { font-weight: 600; white-space: nowrap; }
.tco-list li.zvyrazneno { background: var(--warn-bg); padding-left: 10px; padding-right: 10px;
  border-radius: 6px; border-bottom-color: transparent; }
.tco-list li.prijem span:last-child { color: var(--ok); }
.tco-list li.soucet {
  border-top: 2px solid var(--line); border-bottom: 0; margin-top: 4px;
  padding-top: 12px; font-size: 1.05rem; font-weight: 700;
}

.tco-srovnani {
  border: 2px solid; border-radius: var(--radius); padding: 22px 26px; margin: 2em 0;
}
.tco-srovnani.ok   { border-color: var(--ok);   background: var(--ok-bg); }
.tco-srovnani.warn { border-color: #c99a2e;     background: var(--warn-bg); }
.tco-srovnani h3 { margin: 0 0 14px; }
.tco-vs {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
}
.tco-vs > div:not(.vs) {
  background: #fff; border-radius: var(--radius-sm); padding: 14px 16px; text-align: center;
}
.tco-vs .l { display: block; font-size: .82rem; color: var(--ink-3); margin-bottom: 4px; }
.tco-vs .v { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.tco-vs .r { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 3px; }
.tco-vs .vs { font-weight: 700; color: var(--ink-3); }
.tco-srovnani .zaver { margin: 14px 0 0; font-size: 1.02rem; }
@media (max-width: 620px) {
  .tco-vs { grid-template-columns: 1fr; }
  .tco-vs .vs { text-align: center; }
}

.tco-tabulka { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tco-tabulka table { margin: 0; font-size: .88rem; }
.tco-tabulka thead th { position: sticky; top: 0; z-index: 1; }
.tco-tabulka td:not(:first-child):not(:last-child) { text-align: right; white-space: nowrap; }
.tco-tabulka tr.udalost { background: var(--warn-bg); }
.tco-tabulka tr.start, .tco-tabulka tr.konec { background: var(--brand-lt); font-weight: 600; }

.odhad { color: var(--ink-3); font-weight: 400; font-size: .88em; }

/* ═══════════════════════════════════════════════════════════════
   v5 — homepage, katalog, siluety
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- homepage hero */
.hero-home { padding: 46px 0 38px; }
.hero-home h1 {
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 2.9rem);
  max-width: 18ch; margin-bottom: .3em;
}
.hero-home .lede { font-size: 1.18rem; max-width: 46ch; margin-bottom: 26px; }

.cesty {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: stretch; margin-top: 8px;
}
.cesta {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.cesta-vin { border-color: var(--brand); border-width: 2px; }
.cesta-hlava { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.cesta-hlava strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.cesta-hlava span { font-size: .88rem; color: var(--ink-3); display: block; margin-top: 2px; }
.cesta-cislo {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cesta-katalog .cesta-cislo { background: var(--ink-3); }
.cesta .vin-input { margin-bottom: 10px; }
.cesta-pozn { font-size: .82rem; color: var(--ink-3); margin: 10px 0 0; line-height: 1.5; }
.cesta-nebo {
  align-self: center; font-size: .82rem; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em; padding: 0 2px;
}
@media (max-width: 900px) {
  .cesty { grid-template-columns: 1fr; gap: 12px; }
  .cesta-nebo { text-align: center; padding: 2px 0; }
}

/* výběr auta v kompaktní podobě */
.vyber-kompakt .vyber-radek,
.vyber .vyber-radek {
  display: grid; gap: 9px; grid-template-columns: 1fr 1fr;
}
.vyber .vyber-radek { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.vyber-radek label { display: block; }
.vyber-radek .lab { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; }
.vyber-radek select, .vyber-radek input {
  width: 100%; padding: 11px 12px; font: inherit; font-size: .97rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.vyber-radek select:focus, .vyber-radek input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt);
}
.vyber {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin: 1.6em 0;
}
.vyber-out { margin-top: 14px; }
.vyber-vyzva { font-size: .9rem; color: var(--ink-3); margin: 0; }

.vo-cena {
  background: var(--brand-lt); border: 1px solid #cfe0f2; border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 12px;
}
.vo-hlavni {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-dk);
  line-height: 1.15;
}
.vo-popis { font-size: .85rem; color: var(--ink-2); margin-top: 3px; }
.vo-fakta { list-style: none; margin: 0 0 10px; padding: 0; }
.vo-fakta li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: .92rem;
}
.vo-fakta li:last-child { border-bottom: 0; }
.vo-fakta strong.zvyraz { color: var(--warn); }
.vo-fakta strong.ok { color: var(--ok); }
.vo-pozn { font-size: .86rem; color: var(--ink-2); margin: 0 0 10px; }
.vo-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* ---------------------------------------------------------- dlaždice */
.dlazdice-nadpis {
  margin: 44px 0 16px; font-size: 1.35rem; text-align: center;
}
.dlazdice-grid {
  list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.dlazdice {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center;
  height: 100%; padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dlazdice:hover {
  border-color: var(--brand); box-shadow: var(--shadow-lg);
  color: inherit; transform: translateY(-2px);
}
.dlazdice .art-badge { width: 46px; height: 46px; }
.dl-nazev { display: block; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.dl-popis { display: block; font-size: .86rem; color: var(--ink-2); margin-top: 3px; }
.dl-sipka { color: var(--brand); font-size: 1.2rem; font-weight: 700; }
.dlazdice:hover .dl-sipka { transform: translateX(2px); }

/* ---------------------------------------------------------- siluety a karty modelů */
.art-silueta { width: 100%; max-width: 118px; height: auto; color: var(--brand); display: block; }
.art-silueta.velka { max-width: 168px; }

.model-grid {
  list-style: none; margin: 1.4em 0 2em; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}
.model-karta {
  display: block; height: 100%; padding: 18px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.model-karta:hover {
  border-color: var(--brand); box-shadow: var(--shadow-lg);
  color: inherit; transform: translateY(-2px);
}
.model-karta .art-silueta { margin: 0 auto 12px; color: var(--brand); opacity: .8; }
.model-karta:hover .art-silueta { opacity: 1; }
.mk-nazev { display: block; font-weight: 700; font-size: 1.02rem; }
.mk-seg { display: block; font-size: .82rem; color: var(--ink-3); margin: 2px 0 8px; }
.mk-cena { display: block; font-weight: 700; color: var(--brand-dk); font-size: .98rem; }
.mk-pozn { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 2px; }

.model-hlavicka {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--brand-lt) 0%, #f4f9ff 100%);
  border: 1px solid #cfe0f2; border-radius: var(--radius);
  padding: 22px 26px; margin: 0 0 1.8em;
}
.model-hlavicka .art-silueta { flex: none; color: var(--brand-dk); }
.mh-seg { font-size: .84rem; color: var(--ink-2); text-transform: lowercase; }
.mh-cena {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--brand-dk); line-height: 1.15; margin: 3px 0;
}
.mh-pozn { font-size: .84rem; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════
   v6 — hodnocení nabídky, porovnání, výhled hodnoty
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- hodnocení nabídky */
.nabidka {
  display: block; border-radius: var(--radius); padding: 15px 18px;
  margin-bottom: 14px; border: 2px solid;
}
.nabidka .nab-znacka {
  display: block; font-weight: 800; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 5px;
}
.nabidka .nab-text { display: block; font-size: .93rem; line-height: 1.55; }
.nabidka.dobre   { background: var(--ok-bg);   border-color: var(--ok); }
.nabidka.dobre   .nab-znacka { color: var(--ok); }
.nabidka.neutral { background: var(--bg-soft); border-color: var(--line); }
.nabidka.neutral .nab-znacka { color: var(--ink-3); }
.nabidka.draho   { background: var(--warn-bg); border-color: #c99a2e; }
.nabidka.draho   .nab-znacka { color: var(--warn); }
.nabidka.pozor   { background: var(--bad-bg);  border-color: var(--bad); }
.nabidka.pozor   .nab-znacka { color: var(--bad); }

/* ---------------------------------------------------------- náklad na rok držení */
.drz-nadpis { margin: 20px 0 4px; font-size: 1rem; }
.drz-list { list-style: none; margin: 0; padding: 0; }
.drz-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: .93rem;
}
.drz-list li:last-child { border-bottom: 0; }
.drz-list strong { color: var(--warn); white-space: nowrap; }

/* ---------------------------------------------------------- porovnání */
.por-vyber {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start;
}
.por-strana { display: grid; gap: 10px; }
.por-strana h3 {
  margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3);
}
.por-strana label { display: block; }
.por-strana .lab { display: block; font-weight: 600; font-size: .84rem; margin-bottom: 4px; }
.por-strana select, .por-strana input {
  width: 100%; padding: 10px 11px; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.por-strana select:focus, .por-strana input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lt);
}
.por-vs {
  align-self: center; font-weight: 700; color: var(--ink-3); padding-top: 26px;
}
@media (max-width: 700px) {
  .por-vyber { grid-template-columns: 1fr; }
  .por-vs { padding-top: 0; text-align: center; }
}
.por-out { margin-top: 20px; }
.por-hlavicky {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; margin-bottom: 12px; text-align: center;
}
.por-hlavicky > div:not(.vs) {
  background: var(--brand-lt); border-radius: var(--radius-sm); padding: 10px 12px;
}
.por-hlavicky strong { display: block; font-size: 1rem; }
.por-hlavicky span { font-size: .82rem; color: var(--ink-2); }
.por-hlavicky .vs { font-weight: 700; color: var(--ink-3); }
.por-tab th { width: 34%; }
.por-tab td { text-align: center; }
.por-tab td.lepsi {
  background: var(--ok-bg); font-weight: 700; color: var(--ok);
}
.por-zaver {
  background: var(--bg-soft); border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 14px 0;
}

/* ---------------------------------------------------------- výhled hodnoty v garáži */
.gar-vyhled {
  display: block; margin: 10px 0; padding: 10px 12px;
  background: var(--bg-soft); border-radius: var(--radius-sm); font-size: .86rem;
}
.gv-nadpis {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin-bottom: 5px;
}
.gv-radek {
  display: flex; justify-content: space-between; gap: 10px; padding: 3px 0;
}
.gv-radek strong { white-space: nowrap; }
.gv-radek em { color: var(--bad); font-style: normal; font-size: .82rem; }

/* ---------------------------------------------------------- tisk */
@media print {
  .result-actions, .score-note a, .tool-cta, .related, .crumbs { display: none !important; }
  .score { break-inside: avoid; border: 1px solid #999; background: none; }
  .headline-fee { break-inside: avoid; }
  .mapa, .rec-form { display: none !important; }
  .tech-karta { break-inside: avoid; }
}

/* ===============================================================
   VINAUTO — vizuální vrstva v4
   Přepisuje vzhled nad základním stylem. Nic nemaže, jen přebíjí.
   Zdrojový soubor: interni/build/style_v4.css
   =============================================================== */

/* ---------------------------------------------------------- základ */

body { font-size: 17px; letter-spacing: -0.003em; }

h1 { font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem); letter-spacing: -.033em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); letter-spacing: -.026em; font-weight: 800; }
h3 { font-size: clamp(1.16rem, 1.05rem + .5vw, 1.36rem); letter-spacing: -.018em; }

.wrap { padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 18px; } }

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

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* ---------------------------------------------------------- hlavička */

.site-head {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(11,18,32,.07);
}
.site-head .wrap { min-height: 74px; gap: 18px; }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.035em;
}
.logo .mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #2f5cff 0%, #1637a8 55%, #0e2a86 100%);
  box-shadow: 0 4px 12px rgba(36,80,230,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.logo .mark svg { width: 21px; height: 21px; display: block; }
.logo .txt { color: var(--ink); }
.logo .txt span { color: var(--brand); }

.nav ul { gap: 2px; align-items: center; }
.nav a {
  padding: 9px 13px; border-radius: var(--pill); font-size: .935rem; font-weight: 550;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: var(--bg-tint); color: var(--brand-dk); }
.nav a[aria-current="page"] { background: var(--brand); color: #fff; }
.nav a[aria-current="page"]:hover { background: var(--brand-dk); color: #fff; }

.nav-toggle {
  border-radius: var(--pill); padding: 9px 15px; font-weight: 600;
  border-color: var(--line); background: #fff; box-shadow: var(--shadow);
}

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; margin: 0; order: 3; }
  .nav.open { display: block; padding: 6px 0 16px; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 12px 14px; border-radius: var(--radius-sm); }
  .site-head .wrap { flex-wrap: wrap; gap: 10px; }
}

/* ---------------------------------------------------------- tlačítka */

.btn {
  padding: 14px 26px; border-radius: var(--pill); font-weight: 650; font-size: 1rem;
  background: linear-gradient(160deg, #3563ff 0%, var(--brand) 45%, var(--brand-dk) 100%);
  box-shadow: 0 2px 6px rgba(22,55,168,.25), 0 10px 26px rgba(22,55,168,.22);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover {
  background: linear-gradient(160deg, #2a56f2 0%, var(--brand-dk) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(22,55,168,.28), 0 16px 34px rgba(22,55,168,.28);
}
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: #fff; color: var(--brand-dk); border-color: var(--line);
  box-shadow: var(--shadow);
}
.btn-ghost:hover { background: #fff; color: var(--brand-dk); border-color: #c6d1f5; }
.btn-sm { padding: 10px 18px; font-size: .92rem; }

/* ---------------------------------------------------------- formulářová pole */

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  border-radius: var(--radius-sm);
}
.vin-input {
  padding: 16px 18px; font-size: 1.2rem; border-width: 2px; border-radius: 14px;
}
.vin-input:focus { box-shadow: var(--ring); }

/* ---------------------------------------------------------- hero obecně */

.hero {
  background: linear-gradient(180deg, #f2f6ff 0%, #fff 100%);
  padding: 64px 0 52px; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -40% 55% 40% -10%;
  background: radial-gradient(closest-side, rgba(36,80,230,.10), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .lede { font-size: 1.2rem; line-height: 1.55; }
.eyebrow {
  background: #fff; border: 1px solid var(--line); color: var(--brand-dk);
  box-shadow: var(--shadow); padding: 6px 14px; font-size: .74rem;
}

.hero-split .wrap {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.hero-split .hero-art svg { width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .hero-split .wrap { grid-template-columns: 1fr; gap: 30px; }
  .hero-split .hero-art { order: -1; }
}

.hero-badged .wrap { display: flex; gap: 26px; align-items: center; }
.hero-badged .art-badge { width: 108px; height: 108px; flex: none; }
@media (max-width: 640px) { .hero-badged .art-badge { width: 74px; height: 74px; } }

/* ---------------------------------------------------------- tmavý hero */

.hero-night {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(0,185,166,.22), transparent 60%),
    radial-gradient(900px 620px at 8% 8%, rgba(53,99,255,.36), transparent 62%),
    linear-gradient(165deg, #081128 0%, #0e1f45 48%, #14315f 100%);
  color: #eaf0ff; border: 0; padding: 72px 0 84px;
}
.hero-night::before { display: none; }
.hero-night::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  background: linear-gradient(180deg, transparent, #fff);
  pointer-events: none;
}
.hero-night h1 { color: #fff; }
.hero-night h1 .hl {
  background: linear-gradient(100deg, #7ee8dc 0%, #8fb2ff 55%, #c7d6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-night .lede { color: #b9c8ea; max-width: 46ch; }
.hero-night .eyebrow {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18);
  color: #cfe0ff; box-shadow: none; backdrop-filter: blur(6px);
}

.hero-home .wrap {
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: 54px; align-items: center;
}
.hero-home .hero-art { position: relative; }
.hero-home .hero-art svg {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(4,10,26,.5);
}
@media (max-width: 980px) {
  .hero-home .wrap { grid-template-columns: 1fr; gap: 34px; }
  .hero-home .hero-art { order: 0; }
  .hero-night { padding: 44px 0 64px; }
}
@media (max-width: 560px) {
  .hero-home .hero-art svg { border-radius: var(--radius); }
}

/* ---------------------------------------------------------- vstupní karta */

.entry {
  margin-top: 26px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg);
  padding: 22px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(3,8,22,.36);
}
.entry .tabs { display: flex; gap: 6px; background: rgba(6,12,28,.42);
  padding: 5px; border-radius: var(--pill); margin-bottom: 18px; }
.entry .tabs button {
  flex: 1; border: 0; background: none; color: #b9c8ea; cursor: pointer;
  font: inherit; font-weight: 650; font-size: .95rem; padding: 11px 12px;
  border-radius: var(--pill); transition: background .18s ease, color .18s ease;
}
.entry .tabs button[aria-selected="true"] {
  background: #fff; color: var(--brand-dk);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.entry .panel[hidden] { display: none; }
.entry .panel p.hint { color: #9fb2d8; font-size: .88rem; margin: 12px 0 0; }
.entry .panel p.hint a { color: #bcd0ff; }

.entry .vin-input {
  background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.35);
  color: var(--ink); font-size: 1.28rem; letter-spacing: .12em;
}
.entry .vin-input::placeholder { color: #9aa6bd; }
.entry .vin-input:focus { border-color: #7ee8dc; box-shadow: 0 0 0 4px rgba(126,232,220,.28); }
.entry .btn { width: 100%; margin-top: 12px; padding: 16px 26px; font-size: 1.06rem; }
.entry .field-err { color: #ffc2c2; }

.entry .vyber-radek { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entry .vyber-radek label { display: block; }
.entry select, .entry input[type="number"] {
  width: 100%; padding: 13px 14px; border-radius: 12px; font: inherit;
  border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.96);
  color: var(--ink);
}
.entry select:focus, .entry input[type="number"]:focus {
  outline: none; border-color: #7ee8dc; box-shadow: 0 0 0 4px rgba(126,232,220,.25);
}
.entry .vyber-out:empty { display: none; }
.entry .vyber-out {
  margin-top: 14px; background: rgba(255,255,255,.96); border-radius: 14px;
  padding: 16px 18px; color: var(--ink);
}
@media (max-width: 480px) { .entry .vyber-radek { grid-template-columns: 1fr; } }

/* důvěryhodnostní řádek */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px;
  list-style: none; padding: 0;
}
.trust-row span, .trust-row li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 600; color: #c3d3f2;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  padding: 7px 13px; border-radius: var(--pill);
}
.trust-row span::before, .trust-row li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #7ee8dc; box-shadow: 0 0 0 3px rgba(126,232,220,.22);
}
.hero:not(.hero-night) .trust-row span {
  color: var(--ink-2); background: #fff; border-color: var(--line);
}

/* ---------------------------------------------------------- sekce a pásy */

.band { padding: 68px 0; }
.band-soft { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 34%, var(--bg-soft) 66%, #fff 100%); }
.band-tint { background: var(--bg-tint); }

.section-head { max-width: 720px; margin: 0 0 34px; }
.section-head .kicker {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 12px;
}
.section-head h2 { margin: 0 0 .35em; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------- dlaždice s obrázkem */

.dlazdice-nadpis { margin-top: 0; }

.dlazdice-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  list-style: none; padding: 0; margin: 0;
}
@media (max-width: 900px) { .dlazdice-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .dlazdice-grid { grid-template-columns: 1fr; } }

.dlazdice {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.dlazdice:hover {
  transform: translateY(-4px); border-color: #c9d5f8;
  box-shadow: var(--shadow-lg); color: inherit;
}
.dlazdice .cover { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.dlazdice .cover svg { width: 100%; height: 100%; display: block; }
.dlazdice .dl-telo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.dlazdice .dl-nazev {
  display: block; font-weight: 750; font-size: 1.13rem; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 7px;
}
.dlazdice .dl-popis { display: block; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.dlazdice .dl-sipka {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  color: var(--brand); font-weight: 650; font-size: .92rem;
}
.dlazdice:hover .dl-sipka { color: var(--brand-dk); }
.dlazdice .art-badge { width: 48px; height: 48px; margin-bottom: 12px; }

/* ---------------------------------------------------------- karty odkazů */

.link-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.link-card {
  display: block; height: 100%; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #c9d5f8; }
.link-card .t {
  display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px;
  letter-spacing: -.015em; font-size: 1.04rem;
}
.link-card .d { display: block; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }

/* ---------------------------------------------------------- statistiky */

.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.14); border-radius: var(--radius-lg); overflow: hidden;
  margin: 34px 0; border: 0;
  box-shadow: var(--shadow-lg);
}
.stat-strip > div {
  background: linear-gradient(170deg, #0e1f45 0%, #14315f 100%);
  padding: 26px 22px; border: 0; text-align: left;
}
.stat-strip .n {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 800; letter-spacing: -.03em;
  color: #fff; margin-bottom: 6px;
}
.stat-strip .l { color: #b9c8ea; font-size: .93rem; line-height: 1.45; }
.stat-strip .src { color: #7f95c4; font-size: .8rem; margin-top: 8px; }
@media (max-width: 860px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stat-strip { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- pás značek */

.znacky-pas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.znacky-pas a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .93rem;
  box-shadow: var(--shadow); transition: transform .14s ease, border-color .14s ease;
}
.znacky-pas a:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand-dk); }
.znacky-pas a .pocet { color: var(--ink-3); font-weight: 500; font-size: .84rem; }

/* ---------------------------------------------------------- postup 1-2-3 */

.kroky-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.kroky-3 li { position: relative; padding-left: 60px; }
.kroky-3 .c {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(150deg, #3563ff, var(--brand-dk));
  box-shadow: 0 6px 16px rgba(36,80,230,.3);
}
.kroky-3 strong { display: block; font-size: 1.08rem; margin-bottom: 5px; letter-spacing: -.02em; }
.kroky-3 p { color: var(--ink-2); font-size: .96rem; margin: 0; }
@media (max-width: 800px) { .kroky-3 { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------- výzva k akci */

.cta-strip {
  position: relative; overflow: hidden; color: #eaf0ff; border-radius: var(--radius-lg);
  padding: 44px 46px; margin: 46px 0;
  background:
    radial-gradient(700px 320px at 88% 12%, rgba(0,185,166,.28), transparent 62%),
    linear-gradient(150deg, #0e1f45 0%, #17346e 100%);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
.cta-strip h2, .cta-strip h3 { color: #fff; margin: 0 0 8px; }
.cta-strip p { color: #b9c8ea; margin: 0; max-width: 58ch; }
.cta-strip .btn { background: #fff; color: var(--brand-dk); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.cta-strip .btn:hover { background: #eef2ff; color: var(--brand-dk); }
@media (max-width: 760px) { .cta-strip { grid-template-columns: 1fr; padding: 30px 24px; } }

/* ---------------------------------------------------------- magazín */

.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .mag-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .mag-grid { grid-template-columns: 1fr; } }

.mag-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.mag-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #c9d5f8; }
.mag-card .thumb {
  display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-tint); padding: 0; border: 0;
}
.mag-card .thumb svg { width: 100%; height: 100%; display: block; }
.mag-card .body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.mag-card .cat {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 9px;
}
.mag-card .t { font-weight: 750; font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink); margin-bottom: 7px; line-height: 1.35; }
.mag-card .d { color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.mag-card .more { margin-top: auto; padding-top: 14px; color: var(--brand); font-weight: 650; font-size: .9rem; }

.mag-section { margin-top: 56px; }
.mag-section h2 { margin-bottom: .2em; }
.mag-section .sub { color: var(--ink-2); margin-bottom: 24px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  padding: 9px 17px; border-radius: var(--pill); background: #fff;
  border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
  font-weight: 600; font-size: .92rem; box-shadow: var(--shadow);
  transition: border-color .14s ease, color .14s ease, transform .14s ease;
}
.pill:hover { border-color: var(--brand); color: var(--brand-dk); transform: translateY(-2px); }

/* ---------------------------------------------------------- článek */

.article-head {
  background: linear-gradient(180deg, #eef3ff 0%, #fff 100%);
  padding: 46px 0 40px;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 18px; font-size: .88rem; color: var(--ink-3);
}
.article-meta .cat {
  background: var(--brand); color: #fff; padding: 5px 13px; border-radius: var(--pill);
  font-weight: 700; font-size: .78rem; text-decoration: none; letter-spacing: .02em;
}
.article-meta .cat:hover { background: var(--brand-dk); color: #fff; }

.article-body { font-size: 1.075rem; line-height: 1.72; }
.article-body h2 { margin-top: 2em; }
.article-body h2::after {
  content: ""; display: block; width: 52px; height: 4px; border-radius: 2px; margin-top: 14px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* ---------------------------------------------------------- odpovědní box */

.answer-box {
  border: 0; border-radius: var(--radius); padding: 24px 26px; margin: 0 0 28px;
  background: linear-gradient(150deg, #eef3ff 0%, #e6fbf8 100%);
  box-shadow: inset 0 0 0 1px rgba(36,80,230,.12);
}
.answer-box .q { font-weight: 800; color: var(--brand-dk); margin-bottom: 8px; font-size: 1.02rem; }
.answer-box .a { color: var(--ink); }
.answer-box .a p:last-child { margin-bottom: 0; }

.key-takeaway {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--brand);
  border-radius: var(--radius); padding: 20px 24px; margin: 28px 0; box-shadow: var(--shadow);
}
.key-takeaway strong { display: block; margin-bottom: 10px; letter-spacing: -.01em; }
.key-takeaway ul { margin: 0; padding-left: 20px; }
.key-takeaway li { margin-bottom: 7px; color: var(--ink-2); }

/* ---------------------------------------------------------- FAQ */

.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 650; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--brand); line-height: 1;
  transition: transform .2s ease; flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line-2); }
.faq .a { padding: 16px 22px 20px; color: var(--ink-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- nástrojová výzva */

.tool-cta {
  display: flex; gap: 22px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; border-radius: var(--radius); padding: 24px 26px; margin: 30px 0;
  background: linear-gradient(150deg, #0e1f45 0%, #17346e 100%);
  color: #eaf0ff; box-shadow: var(--shadow-lg);
}
.tool-cta strong { color: #fff; font-size: 1.1rem; letter-spacing: -.02em; }
.tool-cta p { color: #b9c8ea; margin: 6px 0 0; font-size: .95rem; }
.tool-cta .btn { background: #fff; color: var(--brand-dk); }
.tool-cta .btn:hover { background: #eef2ff; color: var(--brand-dk); }

/* ---------------------------------------------------------- poznámky */

.note, .callout {
  border-radius: var(--radius); padding: 20px 24px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--brand-2);
}
.note strong:first-child { display: block; margin-bottom: 8px; }

/* ---------------------------------------------------------- tabulky */

table.data {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; width: 100%;
}
table.data thead th {
  background: linear-gradient(180deg, #f4f7ff, #eef3ff); color: var(--ink);
  font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 800;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #f8faff; }

/* ---------------------------------------------------------- drobečky */

.crumbs { background: transparent; border: 0; padding: 14px 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
  font-size: .86rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------- ilustrace */

.fig { margin: 32px 0; }
.fig svg { width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: #fff; }
.fig figcaption { font-size: .87rem; color: var(--ink-3); margin-top: 10px; text-align: center; }

.art-hero { border-radius: var(--radius-lg); }

.fig-cover { margin: 0 0 32px; }
.fig-cover svg { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------------------------------------------------------- výsledek kontroly */

.result .card, .card {
  border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--line);
}
.result .card { box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------- patička */

.site-foot {
  background: linear-gradient(170deg, #0a1330 0%, #0e1f45 100%);
  color: #b9c8ea; border-top: 0; margin-top: 80px; padding: 62px 0 34px;
}
.site-foot h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 14px; }
.site-foot a { color: #c3d3f2; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 9px; font-size: .93rem; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
@media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 480px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-legal {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .84rem; color: #8ea3cc; line-height: 1.6;
}
.foot-legal a { color: #a8bde6; text-decoration: underline; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.foot-brand .mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(145deg, #3563ff, #1637a8);
}
.foot-brand .mark svg { width: 23px; height: 23px; }
.foot-brand .n { color: #fff; font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em; }
.foot-brand .s { color: #8ea3cc; font-size: .82rem; }

/* ---------------------------------------------------------- katalog / siluety */

.model-karta, .karta-modelu {
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .2s ease;
}
.model-karta:hover, .karta-modelu:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.silueta { color: var(--brand); }

/* ---------------------------------------------------------- skóre */

.skore-kruh { filter: drop-shadow(0 8px 20px rgba(36,80,230,.22)); }

/* ---------------------------------------------------------- utility
   Nahrazují inline `style=` atributy. Content-Security-Policy v `.htaccess`
   má `style-src 'self'` — inline styly by prohlížeč zahodil a stránka
   by se rozsypala. Proto tu nic inline nezůstává.                          */

.u-flush     { padding: 0; }
.u-hl        { background: var(--brand-lt); font-weight: 700; }
.u-hl td     { color: var(--brand-dk); }
.u-chip      { display: inline-block; margin-top: 8px; }
.u-tight     { margin-top: -.7em; }
.u-mt0       { margin-top: 0; }
.u-mt10      { margin-top: 10px; }
.u-mt22      { margin-top: 22px; }
.u-ml8       { margin-left: 8px; }
.u-m0        { margin: 0; }
.u-lead      { font-size: 1.15rem; }
.u-muted     { font-weight: 500; color: var(--ink-3); }
.u-note      { color: var(--ink-3); font-size: .9rem; }
.u-row       { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.u-list-tight{ margin: 6px 0 0; padding-left: 20px; }
.u-embed     { border: 1px solid var(--line); border-radius: var(--radius); max-width: 520px; }

/* ---------------------------------------------------------- pohyb */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important;
      scroll-behavior: auto !important; }
  .dlazdice:hover, .mag-card:hover, .link-card:hover, .btn:hover { transform: none; }
}

/* ---------------------------------------------------------- tisk */

@media print {
  .site-head, .site-foot, .nav, .cta-strip, .tool-cta, .trust-row, .crumbs { display: none !important; }
  .hero-night { background: #fff !important; color: #000 !important; }
  .hero-night h1, .hero-night .lede { color: #000 !important; }
}