/* =========================================================================
   CashAuto — Design System v3 (GREEN brand · niche B2B: dílna / pole / depo)
   Brand green #007A52 + condensed display type. Vertikály: CashAuto (auto),
   AgroCash (--accent sklizňová zlatá), TechCash (--accent signální oranžová)
   přes body[data-vertical]. Legacy variable names (--blue/--navy/--mint) are
   repointed to the green family so every page recolors from this one file.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand green */
  --green: #007A52;
  --green-600: #006A47;
  --green-700: #03543A;
  --green-bright: #16A06A;
  --green-050: #EAF6F0;
  --green-100: #D6EBE0;
  --green-tint: #F1F8F4;

  /* Ink / text */
  --ink: #16212C;
  --text: #1E2A35;
  --muted: #5B6976;
  --muted-2: #8896A2;
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3F6F4;
  --line: #E6ECEF;
  --line-2: #D7DFE4;

  /* Status */
  --success: #007A52;
  --success-bg: #E7F4EE;
  --danger: #B5372E;          /* 5,9:1 na bílé, 5,4:1 na --surface-2 (chybové texty formuláře, WCAG 1.4.3) */
  --danger-bg: #FBECEA;
  --warning: #E0A33A;
  --warning-bg: #FBF1DE;

  /* ---- Legacy aliases (repointed to green so old pages recolor) ---- */
  --navy: var(--ink);
  --blue: var(--green);
  --blue-600: var(--green-600);
  --blue-700: var(--green-700);
  --soft-blue: var(--green-050);
  --mint: var(--green-bright);
  --mint-700: var(--green);
  --bg: #FFFFFF;
  --info-bg: var(--green-050);

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-base: 1rem;   --fs-md: 1.125rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem;  --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 3.6rem;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* Radii */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 33, 28, 0.06), 0 1px 3px rgba(16, 33, 28, 0.04);
  --shadow-md: 0 6px 20px rgba(16, 33, 28, 0.08);
  --shadow-lg: 0 22px 55px rgba(16, 33, 28, 0.16);
  --shadow-blue: 0 14px 30px rgba(0, 122, 82, 0.26);   /* green primary glow (legacy name) */

  --container: 1180px;
  --container-narrow: 880px;
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 76px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: clip; }
.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; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
/* Atribut hidden musí vyhrát i nad autorským display (img/svg výše, .btn, .photo-frame img…) — UA pravidlo by prohrálo */
[hidden] { display: none !important; }
a { color: var(--green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-700); }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
/* Indikátor fokusu ≥ 3:1 vůči pozadí (WCAG 1.4.11): plná zelená na světlé, světlejší zelená / bílá na tmavých plochách */
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.section.dark :focus-visible, .hero-vertical :focus-visible, .cta-band :focus-visible, .stat-band :focus-visible, .trust-strip.dark :focus-visible { outline-color: var(--green-bright); }
.calc-large .calc-out :focus-visible, .cta-box :focus-visible, .sidebar :focus-visible, .card.navy :focus-visible { outline-color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.lead { font-size: var(--fs-md); color: var(--muted); line-height: 1.65; }
.muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-center { text-align: center; }
.balance { text-wrap: balance; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--sp-8); }
.section.tight { padding-block: var(--sp-7); }
.section.alt { background: var(--surface-2); }
.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--sp-3); }
/* Hlavička sekce s odkazem vpravo (např. Rádce → „Všechny články“) */
.section-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }
.section-row .section-head { margin-bottom: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; }
.stack.gap-2 { gap: var(--sp-2); } .stack.gap-3 { gap: var(--sp-3); }
.stack.gap-4 { gap: var(--sp-4); } .stack.gap-5 { gap: var(--sp-5); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.fill { flex: 1; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px;
  border-radius: var(--r-pill); border: 1.5px solid transparent; font-size: var(--fs-base); font-weight: 700;
  line-height: 1; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--green-600); color: #fff; }
.btn-mint { background: var(--green-bright); color: #06281f; box-shadow: 0 12px 26px rgba(22, 160, 106, 0.3); }
.btn-mint:hover { background: var(--green); color: #fff; }
.btn-navy { background: var(--ink); color: #fff; }
.btn-navy:hover { background: #243341; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--green-050); color: var(--green-700); border-color: var(--green); }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: #fff; color: var(--green); }
.btn-lg { padding: 16px 30px; font-size: var(--fs-md); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; white-space: normal; text-align: center; }   /* plná šířka → text se smí zalomit (360 px) */

/* ---------- Cards / surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.card.pad { padding: var(--sp-5); }
.card.pad-lg { padding: var(--sp-6); }
.card.hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--green-100); }
.card.tint { background: var(--green-050); border-color: var(--green-100); }
.card.navy { background: var(--green-700); border-color: var(--green-700); color: #D7EBE2; }
.card.navy h2, .card.navy h3, .card.navy h4 { color: #fff; }

/* ---------- Pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; background: var(--green-050); color: var(--green-700); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warning { background: var(--warning-bg); color: #B5751B; }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-muted { background: #EEF2F4; color: var(--muted); }
.pill-mint { background: var(--green-050); color: var(--green); }
.pill-navy { background: var(--ink); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-md); color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.brand .logo-mark { width: 34px; height: 34px; flex: none; }
/* CashAuto wordmark — Cash zeleně, Auto tmavě; bílá varianta pro sidebar */
.brand-word { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.brand-word .bw-cash { color: var(--green); }
.brand-word .bw-auto { color: var(--ink); }
.sidebar .brand-word .bw-cash, .sidebar .brand-word .bw-auto { color: #fff; }
.site-footer .brand-word .bw-auto { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--sp-5); list-style: none; }
.nav-links a { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.nav-links a:hover { color: var(--green); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; color: var(--ink); }
.mobile-menu { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: center; }

/* Calculator card */
.calc-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-6); border: 1px solid var(--line); }
.calc-amount { font-size: clamp(2rem, 4.6vw, 2.7rem); font-weight: 800; color: var(--green); letter-spacing: -0.03em; }
.calc-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }

/* Range slider */
input[type="range"].range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--line-2); outline: none; margin: var(--sp-3) 0; }
input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 4px solid #fff; box-shadow: var(--shadow-md); cursor: pointer; }
input[type="range"].range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--green); border: 4px solid #fff; box-shadow: var(--shadow-md); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }

/* Big calculator (section 05) */
.calc-large { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; overflow: hidden; }
.calc-large .calc-inputs { padding: var(--sp-6); }
.calc-large .calc-out { padding: var(--sp-6); background: var(--green-700); color: #CFE9DD; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); }
.calc-large .calc-out h3, .calc-large .calc-out .ro-val { color: #fff; }
.result-stat .ro-label { font-size: var(--fs-sm); color: #A9D3C2; }
.result-stat .ro-val { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Stat blocks */
.stat .num { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.stat .num .accent { color: var(--green); }
.stat .cap { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); margin-top: 4px; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-weight: 500; }
.checklist .ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.checklist .ico svg { width: 14px; height: 14px; }

/* ---------- Feature / benefit / audience cards ---------- */
.feature .ico-box, .feature .ico-img { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--green-050); color: var(--green); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.feature .ico-box.mint { background: var(--green-100); color: var(--green-700); }
.feature .ico-box svg { width: 28px; height: 28px; }
.feature .ico-img img { width: 34px; height: 34px; }
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { color: var(--muted); margin-bottom: 0; }
.feature .more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-weight: 700; font-size: var(--fs-sm); color: var(--green); }
.feature .more svg { width: 16px; height: 16px; }

/* ---------- Steps / process timeline ---------- */
.steps { display: grid; gap: var(--sp-5); }
.steps.horizontal { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; }
.step .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: var(--sp-3); }
.step h4 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0; }
.steps.horizontal .step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -12px; height: 2px; background: var(--green-100); }
@media (min-width: 1025px) { .steps.horizontal .step:nth-child(4n)::after { display: none; } } /* konec řádku ve 4sloupcové mřížce */

/* Zvýrazněný krok (např. „nabídka" a „pojištění") */
.step.hl { background: var(--green-050); border-radius: var(--r-md); padding: var(--sp-4); margin: calc(-1 * var(--sp-4)) 0; }
@media (max-width: 520px) {
  .steps.horizontal .step.hl { background: transparent; padding: 0 0 0 60px; margin: 0; }
}

/* Vertical process tracker (portal/admin) */
.tracker { list-style: none; display: flex; flex-direction: column; }
.tracker li { position: relative; padding: 0 0 var(--sp-5) 34px; }
.tracker li::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--line-2); }
.tracker li:last-child::before { display: none; }
.tracker .node { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); }
.tracker li.done .node { background: var(--green); border-color: var(--green); }
.tracker li.done::before { background: var(--green); }
.tracker li.active .node { border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,122,82,0.18); }
.tracker .t-title { font-weight: 700; color: var(--ink); }
.tracker li:not(.done):not(.active) .t-title { color: var(--muted-2); }
.tracker .t-meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 700; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table.rowhover tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select, textarea.input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: #fff; color: var(--text); font-size: var(--fs-base); font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,122,82,0.13); outline: none; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6976' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 11px 16px; font-weight: 600; font-size: var(--fs-sm); background: #fff; color: var(--ink); transition: all var(--transition); }
.choice:hover { border-color: var(--green); }
.choice.active { background: var(--green-050); border-color: var(--green); color: var(--green-700); }

/* Wizard */
.wizard-progress { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.wizard-progress .wp { flex: 1; }
.wizard-progress .wp .bar { height: 6px; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--transition); }
.wizard-progress .wp.done .bar, .wizard-progress .wp.active .bar { background: var(--green); }
.wizard-progress .wp .lbl { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; font-weight: 600; }
.wizard-progress .wp.active .lbl, .wizard-progress .wp.done .lbl { color: var(--ink); }
.wizard-step { display: none; } .wizard-step.active { display: block; animation: fadeIn .3s ease; }
.dropzone { border: 2px dashed var(--line-2); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; background: var(--surface-2); transition: all var(--transition); }
.dropzone:hover { border-color: var(--green); background: var(--green-050); }
.dropzone .ico-box { margin-inline: auto; }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.faq-item.open { border-color: var(--green-100); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 18px 20px; background: none; border: none; text-align: left; font-weight: 700; font-size: var(--fs-base); color: var(--ink); }
.faq-q:focus-visible { outline-offset: -4px; }   /* rodič .faq-item má overflow:hidden → kroužek kreslíme uvnitř tlačítka */
.faq-q .chev { flex: none; width: 22px; height: 22px; color: var(--green); transition: transform var(--transition); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--transition), visibility 0s linear var(--transition); }
.faq-item.open .faq-a { max-height: 320px; visibility: visible; transition: max-height var(--transition), visibility 0s; }
.faq-a .faq-a-inner { padding: 0 20px 18px; color: var(--muted); }

/* ---------- Tabs ---------- */
/* reserved: .tabs/.tab obsluhuje AK.initTabs (app.js), žádná stránka je aktuálně nepoužívá; .tab-panel přepínají side-linky portálů */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-6); overflow-x: auto; }
.tab { padding: 12px 18px; border: none; background: none; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color var(--transition), border-color var(--transition); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--green); border-bottom-color: var(--green); }
.tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeIn .3s ease; }

/* ---------- App shell (portal / admin) — green sidebar ---------- */
.app-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 100%); color: #CFE9DD; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { color: #fff; margin-bottom: var(--sp-5); padding-inline: 8px; }
.sidebar .nav-group-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); font-weight: 700; padding: var(--sp-4) 12px 6px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); color: #DCEDE6; font-weight: 600; font-size: var(--fs-sm); transition: background var(--transition), color var(--transition); border: none; background: none; width: 100%; text-align: left; }
.side-link svg { width: 19px; height: 19px; flex: none; opacity: 0.9; }
.side-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.side-link.active { background: rgba(255,255,255,0.16); color: #fff; }
.side-link.active svg { opacity: 1; }
.side-link .badge-count { margin-left: auto; background: #fff; color: var(--green-700); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; padding: 1px 8px; }
.app-main { background: var(--bg); min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: var(--fs-xl); }
.app-content { padding: var(--sp-6); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); }
.sidebar-toggle { display: none; }

/* Vehicle / asset card */
.vehicle-card { display: grid; grid-template-columns: 132px 1fr; gap: var(--sp-4); align-items: center; }
.vehicle-card .thumb { background: var(--green-050); border-radius: var(--r-md); padding: 10px; display: grid; place-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: var(--fs-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }

.doc-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: all var(--transition); }
.doc-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.doc-card .doc-ico { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--green-050); color: var(--green); display: grid; place-items: center; flex: none; }

/* Kanban */
.kanban { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); }
.kanban-col { flex: none; width: 280px; background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-3); }
.kanban-col .col-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px var(--sp-3); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.kanban-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-2); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.progress { height: 8px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--green); }
.progress.mint > span { background: var(--green-bright); }
.progress.warn > span { background: var(--warning); }
.meter-row { display: flex; align-items: center; gap: var(--sp-3); }
.meter-row .meter-val { font-weight: 800; color: var(--ink); min-width: 48px; text-align: right; }

/* Phone mockup */
.phone { width: 290px; border-radius: 40px; background: var(--ink); padding: 12px; box-shadow: var(--shadow-lg); }
.phone .screen { background: var(--bg); border-radius: 30px; overflow: hidden; height: 580px; position: relative; }
.phone .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 120px; height: 24px; background: var(--ink); border-radius: var(--r-pill); z-index: 2; }

/* ---------- Footer (LIGHT) ---------- */
.site-footer { background: var(--surface-2); color: var(--muted); padding-block: var(--sp-8) var(--sp-5); margin-top: var(--sp-9); border-top: 1px solid var(--line); }
.site-footer a { color: var(--muted); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--green); }
.site-footer h4 { color: var(--ink); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* Povinné informace + varování o ceně: 14 px a --muted (5,2:1 na --surface-2), ne --muted-2 (2,8:1) */
.footer-bottom { border-top: 1px solid var(--line); margin-top: var(--sp-7); padding-top: var(--sp-5); font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); }

/* Disclaimer / notice */
.disclaimer { background: var(--warning-bg); border: 1px solid #F4D9A8; border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-sm); color: #6B4E1E; display: flex; gap: 12px; }
.disclaimer .ico { color: #B5751B; flex: none; }
.notice { background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-sm); color: var(--green-700); display: flex; align-items: flex-start; gap: 12px; }
.notice .ico { color: var(--green); flex: none; }

/* ---------- Ad-style display (dle Mockup kreativ) — velikost/proklad viz v3 blok ---------- */
.display-headline .line-green { color: var(--green); display: block; }
.display-headline .line-dark { display: block; }

/* Trust strip (4 ikony, světlá i tmavá varianta) */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.trust-strip .ts-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-inline: var(--sp-2); }
.trust-strip .ts-item:not(:last-child) { border-right: 1px solid var(--line); }
.trust-strip .ts-ico { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; }
.trust-strip .ts-ico svg, .trust-strip .ts-ico img { width: 22px; height: 22px; }
.trust-strip .ts-label { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.trust-strip .ts-label strong { display: block; color: var(--ink); }
.trust-strip.dark { background: rgba(22, 33, 44, 0.92); border-color: rgba(255,255,255,0.08); }
.trust-strip.dark .ts-item:not(:last-child) { border-right-color: rgba(255,255,255,0.12); }
.trust-strip.dark .ts-ico { border-color: var(--green-bright); color: var(--green-bright); }
.trust-strip.dark .ts-label { color: #9FB2C2; }
.trust-strip.dark .ts-label strong { color: #fff; }
@media (max-width: 860px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip .ts-item:nth-child(2) { border-right: none; }
}
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr 1fr; } }

/* Hero with photo background */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: 0; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.18) 72%, rgba(255,255,255,0) 88%); }
.hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 80%); pointer-events: none; }
.hero-photo .container { position: relative; z-index: 2; }
@media (min-width: 1025px) { .hero-photo .hero-grid { min-height: 560px; align-items: center; } }

/* UI mockup frame (portal preview) — pevný poměr 16:9 (screenshot zóny) */
.ui-frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff; }
.ui-frame img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }

/* Utilities */
.hide { display: none !important; }
.divider { height: 1px; background: var(--line); border: none; margin-block: var(--sp-5); }
.full-bleed-bg { background: linear-gradient(180deg, var(--green-050) 0%, #fff 60%); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Animace & micro-interactions (redesign) ---------- */
/* Scroll reveal — aktivní jen s JS (html.js), jinak vše viditelné */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
html.js [data-reveal].revealed { opacity: 1; transform: none; }
html.js [data-reveal="left"] { transform: translateX(-26px); }
html.js [data-reveal="right"] { transform: translateX(26px); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal].revealed { transform: none; }

/* Hero vstupní animace */
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html.js .anim-hero > * { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
html.js .anim-hero > *:nth-child(2) { animation-delay: .1s; }
html.js .anim-hero > *:nth-child(3) { animation-delay: .18s; }
html.js .anim-hero > *:nth-child(4) { animation-delay: .26s; }
html.js .anim-hero > *:nth-child(5) { animation-delay: .34s; }
/* Interaktivní karta: pouze vstupní animace (trvalé vznášení rušilo při ovládání slideru) */
html.js .anim-float { animation: heroRise .8s .2s cubic-bezier(.22,.61,.36,1) both; }

/* Fallback: kdyby se app.js nenačetl, obsah s data-reveal se po 2,6 s zviditelní (inline head script přidává .reveal-fallback; app.js přidává .reveal-ready) */
html.js.reveal-fallback:not(.reveal-ready) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* CTA shine (jemný, jednorázový na hover) */
.btn-primary, .btn-mint { position: relative; overflow: hidden; }
.btn-primary::after, .btn-mint::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.btn-primary:hover::after, .btn-mint:hover::after { left: 130%; }
.btn:active { transform: translateY(1px) scale(.98); }

/* Živé číslo (count-up cíl) */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Animované kroky (Jak to funguje) ---------- */
@keyframes stepPop { 0% { transform: scale(.25); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes stepPing { 0% { box-shadow: 0 0 0 0 rgba(0,122,82,.45); } 100% { box-shadow: 0 0 0 16px rgba(0,122,82,0); } }
.step .step-num { position: relative; }
html.js .step .step-num { transition: transform .3s ease, background .3s ease; }
html.js .step:hover .step-num { transform: scale(1.12); background: var(--green-600); }
/* číslo naskočí pružinou, jakmile se krok odkryje (stagger delay z data-reveal) */
html.js [data-reveal-stagger] .step .step-num { opacity: 0; }
html.js [data-reveal-stagger] .step.revealed .step-num { animation: stepPop .55s cubic-bezier(.34,1.56,.64,1) var(--reveal-delay, 0ms) both, stepPing 1s ease-out calc(var(--reveal-delay, 0ms) + .45s) 1; }
/* spojnice se kreslí zleva doprava */
html.js .steps.horizontal .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.22,.61,.36,1) calc(var(--reveal-delay, 0ms) + .25s); }
html.js .steps.horizontal .step.revealed:not(:last-child)::after { transform: scaleX(1); }
/* nadpis a text kroku dojedou s mírným zpožděním za číslem */
html.js [data-reveal-stagger] .step h4,
html.js [data-reveal-stagger] .step p,
html.js [data-reveal-stagger] .step .pill { opacity: 0; transform: translateY(10px); transition: opacity .5s ease calc(var(--reveal-delay, 0ms) + .2s), transform .5s ease calc(var(--reveal-delay, 0ms) + .2s); }
html.js [data-reveal-stagger] .step.revealed h4,
html.js [data-reveal-stagger] .step.revealed p,
html.js [data-reveal-stagger] .step.revealed .pill { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal-stagger] .step .step-num,
  html.js [data-reveal-stagger] .step h4,
  html.js [data-reveal-stagger] .step p,
  html.js [data-reveal-stagger] .step .pill { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.js .steps.horizontal .step::after { transform: none !important; transition: none !important; }
}

/* Progress bar animace (šířka se nastaví inline, přechod tady) */
html.js .progress > span { transition: width 1.1s cubic-bezier(.22,.61,.36,1); }

/* Sticky mobilní CTA lišta */
.mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(16,33,28,0.12); transform: translateY(110%); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.mobile-cta-bar.visible { transform: translateY(0); }
.mobile-cta-bar .btn { flex: 1; }
.mobile-cta-bar .mc-price { font-size: var(--fs-xs); color: var(--muted); line-height: 1.25; padding-right: 10px; }
.mobile-cta-bar .mc-price strong { display: block; color: var(--green); font-size: var(--fs-sm); }
@media (max-width: 860px) { .mobile-cta-bar { display: flex; align-items: center; gap: 8px; } body.has-mobile-cta { padding-bottom: 84px; } }

/* Sekční fotky — jednotný ořez 4:3 + jemný zoom-on-hover */
.photo-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.photo-frame img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.photo-frame:hover img { transform: scale(1.04); }

/* Obrázek ve final CTA — jednotný ořez a zaoblení */
.cta-photo { border-radius: var(--r-md); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }

/* Social proof pás */
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.proof-strip .proof { text-align: center; }
.proof-strip .proof .num { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 800; color: var(--green); letter-spacing: -0.02em; }
.proof-strip .proof .cap { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 640px) { .proof-strip { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* Recenze karta */
.review-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.review-card .stars { color: #E9A93D; letter-spacing: 2px; font-size: var(--fs-md); }
.review-card .quote { color: var(--text); font-weight: 500; line-height: 1.55; }
.review-card .who { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

/* Mobilní doladění formulářů a dotykových cílů */
@media (max-width: 860px) {
  .btn-lg { padding: 16px 24px; }
  .btn-sm { min-height: 44px; }               /* dotykový cíl i pro malá tlačítka (header CTA) */
  .choice { padding: 13px 18px; min-height: 48px; }
  .faq-q { padding: 16px 16px; }
  .v-switch a { min-height: 44px; }           /* přepínač vertikál — dotykový cíl 44 px */
  input[type="range"].range::-webkit-slider-thumb { width: 44px; height: 44px; border-width: 6px; }
  input[type="range"].range::-moz-range-thumb { width: 44px; height: 44px; border-width: 6px; }
}

/* Sticky souhrn trojice čísel v žádosti */
.offer-summary-bar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 30; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center; padding: 10px 16px; background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--r-pill); font-size: var(--fs-sm); box-shadow: var(--shadow-sm); }
.offer-summary-bar .os-item { white-space: nowrap; color: var(--muted); }
.offer-summary-bar .os-item strong { color: var(--green-700); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .offer-summary-bar { font-size: var(--fs-xs); gap: 4px 12px; } }

/* Inline chyba validace formuláře */
.field-error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; margin-top: 4px; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid .input { border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js .anim-hero > *, html.js .anim-float { animation: none !important; }
  .mobile-cta-bar { transition: none; }
}

/* Toast */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 10px; animation: fadeIn .25s ease; }
.toast .ico { color: var(--green-bright); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps.horizontal { grid-template-columns: repeat(2, 1fr); }
  .steps.horizontal .step::after { display: none; }
  .calc-large { grid-template-columns: 1fr; }
  /* Hamburger už od 1024 px: 6 položek + Přihlásit + CTA se do 861–1060 px nevejdou (odkazy se lámaly na dva řádky) */
  .nav-links, .nav-actions .desktop-only { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu.open { display: block; position: fixed; inset: var(--header-h) 0 0; background: var(--bg); z-index: 49; padding: var(--sp-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mobile-menu .nav-links { display: flex; flex-direction: column; gap: var(--sp-4); }
  .mobile-menu .nav-links a { font-size: var(--fs-md); }
}
@media (max-width: 860px) {
  :root { --fs-2xl: 1.9rem; --fs-3xl: 2.3rem; --fs-4xl: 2.55rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .section { padding-block: var(--sp-7); }
  .hero-photo::before { background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.86) 50%, rgba(255,255,255,0.55) 100%); }
  .hero-photo .hero-photo-img { object-position: center 75%; opacity: 0.55; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; height: 100vh; transform: translateX(-100%); transition: transform var(--transition); z-index: 60; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  /* Mobil: vertikální timeline — spojnice se kreslí dolů pod číslem */
  .steps.horizontal { grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps.horizontal .step { padding-left: 60px; }
  .steps.horizontal .step .step-num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .steps.horizontal .step:not(:last-child)::after { display: block; left: 21px; right: auto; top: 50px; bottom: calc(-1 * var(--sp-6) + 6px); width: 2px; height: auto; transform-origin: top center; }
  html.js .steps.horizontal .step:not(:last-child)::after { transform: scaleY(0); }
  html.js .steps.horizontal .step.revealed:not(:last-child)::after { transform: scaleY(1); }
  .vehicle-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--sp-4); }
  /* 360 px: karta kalkulačky a CTA pás mají užší padding, ať se plné tlačítko vejde i s dvouřádkovým textem */
  .calc-card { padding: var(--sp-5); }
  .cta-band { padding: var(--sp-5); }
  .cta-band .cta-actions, .cta-band .cta-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   v3 — NICHE B2B REDESIGN (dílna · pole · depo)
   ========================================================================= */

/* ---------- Tokens v3 ---------- */
:root {
  --font-display: "Barlow Condensed", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* výchozí vertikála = auto (zelená) */
  --accent: #16A06A;
  --accent-050: #EAF6F0;
  --accent-100: #D6EBE0;
  --accent-700: #03543A;
  --accent-ink: #06281f;
  --ink-2: #1F2D3A;
  --ink-3: #2B3A48;
}
body[data-vertical="agro"] { --accent: #C8901A; --accent-050: #FBF3E0; --accent-100: #F3E2B6; --accent-700: #8A5F0C; --accent-ink: #2B1F05; }
body[data-vertical="tech"] { --accent: #E8641B; --accent-050: #FDEFE6; --accent-100: #F8D3BC; --accent-700: #9C3E0B; --accent-ink: #2B1206; }

/* ---------- Display typografie (jen marketing; portály zůstávají v Interu) ----------
   :where() drží specificitu obalu na (0,0,1), aby komponentová pravidla (.article h2, .related h2,
   .display-headline, .article-hero h1) mohla velikost/proklad přebít. */
:where(body[data-shell="marketing"]) h1,
:where(body[data-shell="marketing"]) h2,
.display-headline, .calc-amount, .stat .num, .proof-strip .proof .num,
.result-stat .ro-val, .offer-cell .val, .big-num, .brand-word.xl {
  font-family: var(--font-display); letter-spacing: -0.01em;
}
:where(body[data-shell="marketing"]) h1 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.02; }
:where(body[data-shell="marketing"]) h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
:where(body[data-shell="marketing"]) h3 { letter-spacing: -0.015em; }
.display-headline { font-weight: 800; text-transform: uppercase; color: var(--ink); font-size: clamp(3rem, 8vw, 6.2rem); line-height: 0.92; letter-spacing: -0.005em; }
/* ≤420 px: 3rem minimum by „PENÍZE ZE STROJE.“ / „KAMIONY JEDOU DÁL.“ lámalo na 3–4 řádky */
@media (max-width: 420px) { .display-headline { font-size: clamp(2.3rem, 12.5vw, 3rem); } }
.calc-amount { font-size: clamp(2.4rem, 5vw, 3.2rem); }
.stat .num, .proof-strip .proof .num { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.calc-amount, .stat .num { font-variant-numeric: tabular-nums; }

/* ---------- Tlačítka / pilulky v3 ---------- */
.btn { border-radius: var(--r-md); }
.btn-primary { box-shadow: 0 10px 24px rgba(0, 122, 82, 0.22); }
/* reserved: akcentové varianty pro vertikály (zatím nepoužité v HTML) */
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-700); color: #fff; }
.pill { border-radius: var(--r-sm); }
.pill-accent { background: var(--accent-050); color: var(--accent-700); }
.pill-dark { background: var(--ink); color: #fff; }
.text-accent { color: var(--accent); }

/* ---------- Header v3 ---------- */
.site-header { background: rgba(255,255,255,0.94); }
.nav-links { gap: var(--sp-4); }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-links a.active { color: var(--green); border-bottom-color: var(--green); }
.nav-links .nav-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--green); flex: none; }
.nav-links .nav-dot.agro { background: #C8901A; }
.nav-links .nav-dot.tech { background: #E8641B; }
.nav-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }
.nav-phone svg { width: 16px; height: 16px; color: var(--green); }
.mobile-menu .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; font-weight: 700; }
.mobile-menu .nav-links a.active { border-bottom-color: var(--green); }
.mobile-menu .mm-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Šířkové pásmo hlavičky: telefon jen ≥ 1200 px (s ním je hlavička ≈ 1180 px), 1025–1100 px těsnější mezery */
@media (max-width: 1200px) { .nav-phone { display: none; } }
@media (max-width: 1100px) { .nav-links { gap: var(--sp-3); } .site-header .nav-inner { gap: var(--sp-4); } }

/* ---------- Tmavá „dílenská“ sekce ---------- */
.section.dark { position: relative; background: var(--ink); color: #C9D6E0; overflow: hidden; }
.section.dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045;
  background: repeating-linear-gradient(112deg, #fff 0 2px, transparent 2px 60px); }
.section.dark > .container { position: relative; z-index: 1; }
.section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section.dark .eyebrow { color: var(--green-bright); }
.section.dark .lead, .section.dark .muted { color: #9FB2C2; }
.section.dark .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #C9D6E0; box-shadow: none; }
.section.dark .card p { color: #AEBDCB; }
.section.dark a:not(.btn) { color: var(--green-bright); }
.section.dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.section.dark .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: #fff; }
/* Bílé karty uvnitř tmavé sekce si drží tmavé nadpisy (jinak bílá na bílé) a pás statistik dostane vlastní plochu */
.section.dark .big-step h3, .section.dark .uc-card h3, .section.dark .uc-card h4, .section.dark .doc-list li { color: var(--ink); }
.section.dark .stat-band { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }

/* ---------- Výběr vertikály ---------- */
.vertical-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.v-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.v-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--vc, var(--green)); }
.v-card[data-v="agro"] { --vc: #C8901A; --vc-050: #FBF3E0; --vc-700: #8A5F0C; }
.v-card[data-v="tech"] { --vc: #E8641B; --vc-050: #FDEFE6; --vc-700: #9C3E0B; }
.v-card[data-v="auto"] { --vc: var(--green); --vc-050: var(--green-050); --vc-700: var(--green-700); }
.v-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--vc); color: var(--text); }
.v-card .vc-ico { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--vc-050); color: var(--vc-700); display: grid; place-items: center; }
.v-card .vc-ico svg { width: 30px; height: 30px; }
.v-card .brand-word { font-size: 1.6rem; }
.v-card .vc-for { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.v-card .vc-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.v-card .vc-list li { font-size: var(--fs-xs); font-weight: 700; padding: 4px 9px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); }
.v-card .vc-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--vc-700); }
.v-card .vc-more svg { width: 18px; height: 18px; transition: transform var(--transition); }
.v-card:hover .vc-more svg { transform: translateX(4px); }
.section.dark .v-card { background: #fff; color: var(--text); }
@media (max-width: 1024px) { .vertical-picker { grid-template-columns: 1fr; } }

.v-switch { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.v-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.v-switch a .nav-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--green); }
.v-switch a .nav-dot.agro { background: #C8901A; } .v-switch a .nav-dot.tech { background: #E8641B; }
.v-switch a:hover { border-color: var(--green); color: var(--green-700); }
.v-switch a.current { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- Hero vertikální stránky ---------- */
.hero-vertical { position: relative; overflow: hidden; color: #fff; padding-top: var(--sp-7); padding-bottom: var(--sp-8); background: var(--ink); }
.hero-vertical .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0; }
.hero-vertical::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(22,33,44,0.96) 0%, rgba(22,33,44,0.9) 34%, rgba(22,33,44,0.55) 58%, rgba(22,33,44,0.12) 100%); }
.hero-vertical::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; background: linear-gradient(180deg, rgba(22,33,44,0) 0%, rgba(22,33,44,0.9) 100%); pointer-events: none; }
.hero-vertical .container { position: relative; z-index: 2; }
.hero-vertical .display-headline { color: #fff; }
.hero-vertical .display-headline .line-green { color: var(--green-bright); }
.hero-vertical .display-headline .line-accent { color: var(--accent); display: block; }
.hero-vertical .lead { color: #C9D6E0; }
.hero-vertical .muted { color: #9FB2C2; }
.hero-vertical .muted a { color: #fff; }
.hero-vertical .calc-card { border-top: 5px solid var(--accent); }
/* Bílá kalkulačka uvnitř hero: popisky (label „Doba rezervace“, tři čísla nabídky) zpět v --muted (5,6:1), ne #9FB2C2 (2,2:1) */
.hero-vertical .calc-card .muted { color: var(--muted); }
.hero-vertical .calc-card .muted a { color: var(--green); }
.hero-vertical .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.32); }
.hero-vertical .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.hero-vertical .trust-strip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); box-shadow: none; }
.hero-vertical .trust-strip .ts-item:not(:last-child) { border-right-color: rgba(255,255,255,0.12); }
.hero-vertical .trust-strip .ts-ico { border-color: var(--accent); color: var(--accent); }
.hero-vertical .trust-strip .ts-label { color: #9FB2C2; }
.hero-vertical .trust-strip .ts-label strong { color: #fff; }
@media (min-width: 1025px) { .hero-vertical .hero-grid { min-height: 600px; } }
@media (max-width: 860px) {
  .hero-vertical::before { background: linear-gradient(180deg, rgba(22,33,44,0.97) 0%, rgba(22,33,44,0.88) 55%, rgba(22,33,44,0.7) 100%); }
  .hero-vertical .hero-photo-img { object-position: center 70%; opacity: .7; }
}

.brand-word.xl { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.02em; }
.brand-word .bw-ink { color: var(--ink); }
.hero-vertical .brand-word .bw-ink, .section.dark .brand-word .bw-ink { color: #fff; }
.brand-word .bw-accent { color: var(--accent); }
.brand-lockup { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; max-width: 100%; }   /* na 360 px se „produktová řada“ zalomí pod wordmark */
.brand-lockup .lk-of { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #9FB2C2; }

/* ---------- Velké 3 kroky ---------- */
.big-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.big-step { position: relative; padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.big-step .big-num { font-size: 4.2rem; line-height: .9; font-weight: 800; color: var(--green-100); letter-spacing: -0.02em; }
.big-step h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.big-step p { color: var(--muted); margin-bottom: 0; }
.big-step .bs-time { position: absolute; top: var(--sp-4); right: var(--sp-4); }
@media (max-width: 860px) { .big-steps { grid-template-columns: 1fr; } }

/* ---------- Use-case karty ---------- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.uc-card { display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); align-items: flex-start; }
.uc-card .uc-ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-050); color: var(--accent-700); display: grid; place-items: center; }
.uc-card .uc-ico svg { width: 24px; height: 24px; }
.uc-card h4 { margin-bottom: 4px; }
.uc-card p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0; }
.uc-card .uc-amt { display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); color: var(--ink); }
@media (max-width: 1024px) { .usecase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .usecase-grid { grid-template-columns: 1fr; } }

/* ---------- Typy strojů / vozidel ---------- */
.machine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
/* .machine je neinteraktivní karta (div) — bez hover posunu, ať nevypadá jako odkaz */
.machine { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.machine .m-ico { width: 40px; height: 40px; color: var(--accent-700); }
.machine .m-ico svg { width: 40px; height: 40px; }
.machine strong { color: var(--ink); font-size: var(--fs-base); }
.machine span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 1024px) { .machine-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sezónní / provozní osa ---------- */
.season { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.season .s-item { position: relative; padding: var(--sp-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--line-2); }
.season .s-item.peak { border-top-color: var(--accent); background: var(--accent-050); }
.season .s-item .s-q { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--ink); line-height: 1; }
.season .s-item .s-t { font-weight: 700; color: var(--ink); margin-top: 6px; }
.season .s-item p { font-size: var(--fs-sm); color: var(--muted); margin: 6px 0 0; }
@media (max-width: 860px) { .season { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .season { grid-template-columns: 1fr; } }

/* ---------- Srovnávací tabulka ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--surface-2); color: var(--ink); font-weight: 800; font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: 0; }
.compare tbody th { color: var(--muted); font-weight: 600; width: 26%; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: none; }
.compare .is-us { background: var(--green-050); color: var(--green-700); font-weight: 700; box-shadow: inset 3px 0 0 var(--green); }
.compare thead .is-us { background: var(--green); color: #fff; box-shadow: none; }
.compare .yes { color: var(--green); font-weight: 800; }
.compare .no { color: var(--danger); font-weight: 800; }
.compare .meh { color: #8A5F0C; font-weight: 800; }   /* tmavá zlatá (= agro --accent-700), 5,6:1 na bílé; --warning měla 2,2:1 */

/* ---------- Námitky ---------- */
.objections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.obj { padding: var(--sp-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.obj .obj-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; color: var(--ink); font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.obj .obj-q .q-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; margin-top: 2px; }
.obj .obj-a { display: flex; gap: 10px; color: var(--muted); }
.obj .obj-a .a-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-050); color: var(--green); display: grid; place-items: center; margin-top: 2px; }
.obj .obj-a .a-ico svg { width: 14px; height: 14px; }
@media (max-width: 860px) { .objections { grid-template-columns: 1fr; } }

/* ---------- Stat band ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--ink); color: #C9D6E0; }
.stat-band .sb { border-left: 3px solid var(--accent); padding-left: var(--sp-4); }
.stat-band .sb .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: #fff; line-height: 1; }
.stat-band .sb .cap { font-size: var(--fs-sm); color: #9FB2C2; margin-top: 6px; }
@media (max-width: 860px) { .stat-band { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stat-band { grid-template-columns: 1fr; } }

/* ---------- Checklist dokladů ---------- */
.doc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.doc-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.doc-list li svg { flex: none; width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
.doc-list li small { display: block; color: var(--muted); font-weight: 500; }
.doc-list.single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .doc-list { grid-template-columns: 1fr; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-2); }
.breadcrumbs a { color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--green); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- Blog: seznam ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: var(--text); }
.post-card .pc-cover-wrap { overflow: hidden; }
.post-card .pc-cover { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; display: block; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.post-card:hover .pc-cover { transform: scale(1.03); }
.post-card .pc-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post-card .pc-tag { align-self: flex-start; }
.post-card h3 { font-size: var(--fs-md); line-height: 1.25; }
.post-card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.post-card .pc-meta { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; display: flex; gap: 10px; }   /* --muted-2 má na bílé jen 3:1 → ne pro text < 18 px */
.post-card.featured { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; }
.post-card.featured .pc-cover { aspect-ratio: 16 / 10; height: 100%; }
.post-card.featured .pc-body { padding: var(--sp-6); justify-content: center; }
.post-card.featured h3 { font-size: var(--fs-xl); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; }
@media (max-width: 1024px) { .post-grid { grid-template-columns: 1fr 1fr; } .post-card.featured { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } .post-card.featured { grid-column: span 1; } }

/* ---------- Blog: článek ---------- */
.article-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%); }
.article-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 860px; }
.article-hero .lead { max-width: 760px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.article-cover { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.article-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); align-items: start; }
.article-side { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: var(--sp-4); }
.article { font-size: 1.0625rem; line-height: 1.75; color: var(--text); max-width: 760px; }
.article > * + * { margin-top: 1.1em; }
.article h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-top: 2em; margin-bottom: .4em; scroll-margin-top: calc(var(--header-h) + 20px); }
.article h3 { font-size: var(--fs-lg); margin-top: 1.6em; margin-bottom: .3em; }
.article p { margin: 0; }
.article ul, .article ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: .45em; }
.article li::marker { color: var(--green); font-weight: 700; }
.article strong { color: var(--ink); }
.article blockquote { margin: 0; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--green); background: var(--green-050); border-radius: 0 var(--r-md) var(--r-md) 0; font-weight: 600; color: var(--green-700); }
.article .callout { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.article .callout strong:first-child { display: block; color: var(--ink); margin-bottom: 6px; font-family: var(--font-display); font-size: var(--fs-lg); }
.article .warn { font-weight: 800; color: var(--ink); padding: var(--sp-4); border: 2px solid var(--ink); border-radius: var(--r-md); }
.article table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.article th, .article td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.article th { background: var(--surface-2); color: var(--ink); }
.article .example { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.article .example .ex { padding: var(--sp-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.article .example .ex .val { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--green); line-height: 1; }
.article .example .ex .cap { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-top: 4px; }
.article figure { margin: 0; }
.article figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.toc { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.toc strong { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.toc ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.toc a { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.toc a:hover { color: var(--green); }
.cta-box { padding: var(--sp-5); border-radius: var(--r-lg); background: linear-gradient(140deg, var(--green-700), var(--green)); color: #fff; }
.cta-box h3, .cta-box h4 { color: #fff; }
.cta-box p { color: #CFE9DD; font-size: var(--fs-sm); }
.cta-box .btn-white { width: 100%; }
.author-box { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.author-box .avatar { width: 48px; height: 48px; }
.author-box strong { display: block; color: var(--ink); }
.author-box span { font-size: var(--fs-sm); color: var(--muted); }
.related h2 { font-size: var(--fs-xl); }
/* Jednosloupcově se aside vykreslí až ZA článkem — obsah (TOC) tam nemá smysl, CTA a autor ano */
@media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; } .article-side { position: static; } .article-side .toc { display: none; } .article .example { grid-template-columns: 1fr; } }

/* ---------- CTA pás ---------- */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.cta-band h3 { color: #fff; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; }
.cta-band p { color: #9FB2C2; margin: 4px 0 0; font-size: var(--fs-sm); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cta-band .cta-actions .btn { white-space: normal; text-align: center; }
.cta-band .cta-phone { color: #fff; font-weight: 800; font-size: var(--fs-md); }

/* ---------- Varování o ceně ---------- */
.cost-warning { font-weight: 800; color: var(--ink); text-align: center; padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.section.dark .cost-warning, .hero-vertical .cost-warning { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }

/* ---------- Drobné v3 úpravy stávajících komponent ---------- */
.calc-card { border-top: 5px solid var(--green); }
.feature .ico-img, .feature .ico-box { border-radius: var(--r-md); }
.section-head .lead { font-size: var(--fs-md); }
.eyebrow::before { content: ""; width: 18px; height: 3px; background: currentColor; border-radius: 2px; }

/* Skip link (a11y) */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 8px; color: #fff; }

/* =========================================================================
   v4 — APPLE-LIKE, MOBILE-FIRST LAYER
   Jedno písmo (Inter ≈ SF), sentence case, velké titulky s těsným prokladem,
   šedé dlaždice #f5f5f7 bez rámečků, pill tlačítka, tenký blur header,
   segmentové ovladače, iOS slider, horizontální carousely karet na mobilu,
   klidný pohyb. Tento blok je poslední v souboru → přebíjí v1–v3.
   ========================================================================= */
:root {
  --font-display: var(--font);
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f7;
  --ink: #1d1d1f; --text: #1d1d1f; --muted: #6e6e73; --muted-2: #86868b;
  --line: #e8e8ed; --line-2: #d2d2d7;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px; --r-pill: 980px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.12);
  --shadow-blue: none;
  --header-h: 52px;
  --sp-8: 5.5rem; --sp-9: 8rem;
  --ease: cubic-bezier(.25,.1,.25,1);
  --transition: 220ms var(--ease);
  --tile-dark: #1d1d1f;
}
html { scroll-padding-top: calc(var(--header-h) + 12px); }
body { letter-spacing: -0.01em; color: var(--text); }

/* ---------- Typografie ----------
   :where() drží specificitu obalu na (0,0,1) (stejně jako v3), aby komponentová pravidla (.article h2,
   .article-hero h1, .related h2, .cta-band h3, .post-card h3, .display-headline) mohla velikost přebít.
   Základní h1–h4 (v1) mají stejnou specificitu, ale jsou dřív → marketingové výchozí hodnoty platí. */
:where(body[data-shell="marketing"]) h1, :where(body[data-shell="marketing"]) h2, :where(body[data-shell="marketing"]) h3,
.display-headline, .calc-amount, .stat .num, .proof-strip .proof .num, .result-stat .ro-val,
.offer-cell .val, .big-num, .brand-word.xl, .compare thead th, .season .s-item .s-q, .uc-card .uc-amt,
.stat-band .sb .num, .cta-band h3, .article .example .ex .val, .post-card.featured h3, .article .callout strong:first-child {
  font-family: var(--font); letter-spacing: -0.03em;
}
:where(body[data-shell="marketing"]) h1 { font-size: clamp(2.5rem, 7vw, 4.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
:where(body[data-shell="marketing"]) h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
:where(body[data-shell="marketing"]) h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
:where(body[data-shell="marketing"]) h4 { font-weight: 600; letter-spacing: -0.015em; }
.display-headline { text-transform: none; font-size: clamp(2.6rem, 7.6vw, 4.9rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; }
.display-headline .line-dark, .display-headline .line-green, .display-headline .line-accent { display: block; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--muted); font-weight: 500; line-height: 1.45; letter-spacing: -0.012em; }
.eyebrow { font-size: 0.95rem; letter-spacing: -0.005em; text-transform: none; font-weight: 600; color: var(--green); }
.eyebrow::before { display: none; }
/* Centrování jen s .center — řádky .between s tlačítkem vpravo (Rádce) a hlavička žádosti zůstávají vlevo */
.section-head { max-width: 780px; margin-bottom: var(--sp-6); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head .lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.section { padding-block: var(--sp-8); }
.section.tight { padding-block: var(--sp-7); }
.muted { color: var(--muted); }
.calc-amount { font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.04em; }
.stat .num, .proof-strip .proof .num { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.04em; }

/* ---------- Tlačítka & odkazy ---------- */
.btn { border-radius: var(--r-pill); padding: 12px 22px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; border-width: 1px; box-shadow: none; transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition); }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--green); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--green-600); }
.btn-primary::after, .btn-mint::after { display: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(0,0,0,.04); border-color: var(--ink); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); box-shadow: none; }
.btn-white:hover { background: #f5f5f7; color: var(--ink); }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.link-arrow::after { content: "›"; font-size: 1.15em; line-height: 1; transition: transform var(--transition); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover::after { transform: translateX(2px); }
.pill { border-radius: var(--r-pill); font-weight: 600; padding: 6px 12px; letter-spacing: -0.005em; }
.pill-dark { background: var(--ink); color: #fff; }

/* ---------- Header (tenký, translucentní) ---------- */
.site-header { background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06); }
.site-header .nav-inner { height: var(--header-h); gap: var(--sp-4); }
.brand .brand-word { font-size: 1.15rem; letter-spacing: -0.03em; }
.brand .logo-mark, .brand svg { width: 22px; height: 18px; }
.nav-links { gap: var(--sp-4); }
.nav-links a { font-size: 13px; font-weight: 500; color: rgba(29,29,31,.82); padding: 4px 0; border-bottom: none; letter-spacing: -0.005em; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 600; border-bottom: none; }
.nav-links .nav-dot { width: 6px; height: 6px; border-radius: 50%; }
.nav-phone { font-size: 13px; font-weight: 500; }
.nav-actions { gap: 10px; }
.nav-actions .btn-sm { padding: 7px 14px; font-size: 12px; }
.nav-toggle { border: none; width: 40px; height: 40px; background: transparent; }
.mobile-menu.open { background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mobile-menu .nav-links a { font-size: 1.35rem; font-weight: 600; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .nav-links a.active { color: var(--green); }
.mobile-menu .mm-actions .btn { width: 100%; }

/* ---------- Dlaždice (karty bez rámečků) ---------- */
.card, .big-step, .uc-card, .machine, .obj, .v-card, .season .s-item, .post-card, .doc-list li, .toc, .author-box, .trust-chip {
  border: none; box-shadow: none; background: var(--surface-2); border-radius: var(--r-lg);
}
.section.alt .card, .section.alt .big-step, .section.alt .uc-card, .section.alt .machine, .section.alt .obj,
.section.alt .v-card, .section.alt .season .s-item, .section.alt .post-card, .section.alt .doc-list li, .article-hero + .section .card { background: #fff; }
/* Hover-lift jen na interaktivních prvcích (odkazové karty); div.card.hover (feature) a .machine se nehýbou */
a.card.hover:hover, .post-card:hover, .v-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.card.tint { background: var(--green-050); }
.feature .ico-img, .feature .ico-box { background: #fff; border-radius: 14px; }
.section.alt .feature .ico-img, .section.alt .feature .ico-box { background: var(--surface-2); }
.season .s-item { border-top: none; }
.season .s-item.peak { background: var(--accent-050); }
.section.alt .season .s-item.peak { background: var(--accent-050); }
.v-card::before { display: none; }
.v-card .vc-list li { background: #fff; }
.section.alt .v-card .vc-list li, .section.dark .v-card .vc-list li { background: var(--surface-2); }
.machine .m-ico { color: var(--accent-700); }
.uc-card .uc-ico { background: #fff; }
.section.alt .uc-card .uc-ico { background: var(--accent-050); }
.trust-strip { border: none; box-shadow: none; background: var(--surface-2); border-radius: var(--r-xl); padding: var(--sp-5); gap: var(--sp-3); }
.trust-strip .ts-item:not(:last-child) { border-right: none; }
.trust-strip .ts-ico { border: none; background: #fff; width: 48px; height: 48px; color: var(--green); box-shadow: var(--shadow-sm); }
.trust-strip .ts-label strong { font-weight: 600; letter-spacing: -0.01em; }
.hero-vertical .trust-strip { background: var(--tile-dark); }
.hero-vertical .trust-strip .ts-ico { background: #2c2c2e; box-shadow: none; }
.big-step .big-num { color: var(--line-2); font-size: 3.6rem; letter-spacing: -0.05em; }
.section.dark .big-step .big-num { color: #3a3a3c; }
.obj .obj-q .q-ico { background: #fff; color: var(--muted); }
.obj .obj-a .a-ico { background: #fff; color: var(--green); }
.section.alt .obj .obj-q .q-ico, .section.alt .obj .obj-a .a-ico { background: var(--surface-2); }
.notice { background: var(--surface-2); border: none; color: var(--text); border-radius: var(--r-lg); }
.notice .ico { color: var(--green); }
.disclaimer { border: none; background: var(--warning-bg); border-radius: var(--r-lg); }
.cost-warning { border: none; background: var(--surface-2); color: var(--ink); font-weight: 600; border-radius: var(--r-md); padding: 14px 18px; letter-spacing: -0.01em; }
.section.alt .cost-warning { background: #fff; }
.section.dark .cost-warning, .hero-vertical .cost-warning { background: var(--tile-dark); color: #fff; border: none; }
.calc-card .cost-warning { background: var(--surface-2); color: var(--ink); }

/* ---------- Tmavé sekce (Apple black) ---------- */
.section.dark { background: #000; color: #a1a1a6; }
.section.dark::before { display: none; }
.section.dark h2, .section.dark h3, .section.dark h4 { color: #f5f5f7; }
.section.dark .lead, .section.dark .muted { color: #a1a1a6; }
.section.dark .card, .section.dark .big-step, .section.dark .doc-list li, .section.dark .uc-card, .section.dark .machine { background: var(--tile-dark); color: #d2d2d7; }
.section.dark .card p, .section.dark .big-step p { color: #a1a1a6; }
.section.dark .doc-list li { color: #f5f5f7; }
.section.dark .doc-list li small { color: #a1a1a6; }
.section.dark .v-card { background: var(--tile-dark); color: #f5f5f7; }
.section.dark .v-card .vc-for { color: #a1a1a6; }
.section.dark .v-card .brand-word .bw-ink { color: #fff; }
.section.dark .v-card .vc-list li { background: #2c2c2e; color: #f5f5f7; }
.section.dark .v-card .vc-more { color: #fff; }
.section.dark .v-card .vc-ico { background: #2c2c2e; color: #fff; }
.section.dark .v-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.section.dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section.dark .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.stat-band { background: var(--tile-dark); border-radius: var(--r-xl); }
.stat-band .sb { border-left: none; padding-left: 0; }
.stat-band .sb .num { letter-spacing: -0.04em; }
.stat-band .sb .cap { color: #a1a1a6; }
.cta-band { background: #000; border-radius: var(--r-xl); padding: var(--sp-6); }
.cta-band p { color: #a1a1a6; }
.cta-box { background: var(--tile-dark); }
.cta-box p { color: #a1a1a6; }
.calc-large .calc-out { background: #000; color: #a1a1a6; }
.result-stat .ro-label { color: #a1a1a6; }

/* ---------- Hero v4 (copy nahoře, dlaždice foto + kalkulačka pod tím) ---------- */
.hero-v4 { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: var(--sp-7); background: #fff; }
.hero-v4 .hero-copy { text-align: center; max-width: 860px; margin-inline: auto; }
.hero-v4 .hero-copy .cluster { justify-content: center; }
.hero-v4 .hero-copy .lead { max-width: 640px; margin-inline: auto; }
.hero-v4 .hero-copy .v-switch { justify-content: center; }
.hero-v4 .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4) var(--sp-5); }
.hero-tiles { display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--sp-4); align-items: stretch; }
.tile-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); min-height: 460px; }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
.tile-photo .tile-caption { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tile-photo .tile-caption .pill { background: rgba(255,255,255,.86); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-tiles .calc-card { margin: 0; }
.hero-v4.dark { background: #000; color: #a1a1a6; }
.hero-v4.dark h1 { color: #f5f5f7; }
.hero-v4.dark .lead { color: #a1a1a6; }
.hero-v4.dark .muted { color: #86868b; }
.hero-v4.dark .muted a { color: #fff; }
.hero-v4.dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.hero-v4.dark .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hero-v4.dark .link-arrow { color: #2997ff; }
.hero-v4.dark .brand-word .bw-ink { color: #fff; }
.hero-v4.dark .breadcrumbs a { color: #86868b; }
.hero-v4.dark .breadcrumbs [aria-current] { color: #f5f5f7; }
.hero-v4.dark .breadcrumbs li + li::before { color: #3a3a3c; }
.hero-v4.dark .tile-photo { background: var(--tile-dark); }
.hero-v4.dark .trust-strip { background: var(--tile-dark); }
.hero-v4.dark .trust-strip .ts-ico { background: #2c2c2e; box-shadow: none; color: var(--accent); }
.hero-v4.dark .trust-strip .ts-label { color: #a1a1a6; }
.hero-v4.dark .trust-strip .ts-label strong { color: #f5f5f7; }
.hero-v4.dark .display-headline .line-dark { color: #f5f5f7; }
.hero-v4.dark .display-headline .line-accent { color: var(--accent); }
.hero-v4.dark .display-headline .line-green { color: var(--green-bright); }
.hero-v4 .breadcrumbs { justify-content: center; margin-bottom: var(--sp-3); }
.brand-lockup { justify-content: center; }
.brand-word.xl { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.035em; }

/* ---------- Kalkulačka (Apple konfigurátor) ---------- */
.calc-card { background: #fff; border: none; border-top: none; box-shadow: var(--shadow-lg); border-radius: var(--r-xl); padding: var(--sp-5); }
.hero-v4.dark .calc-card { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.calc-label { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: -0.005em; }
.calc-card .divider { margin-block: var(--sp-4); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.segmented button { border: none; background: transparent; border-radius: 10px; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; transition: background var(--transition), color var(--transition), box-shadow var(--transition); min-height: 44px; }   /* dotykový cíl 44 px (HIG / WCAG 2.5.8) */
.segmented button.active, .segmented button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.segmented button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
/* Hit-box 44 px, vizuálně stále 4px dráha (kreslená jako pozadí inputu uprostřed); palec se v Chrome/Safari/Firefox centruje sám */
input[type="range"].range { height: 44px; margin: 2px 0 0; background: linear-gradient(90deg, var(--green) var(--pct, 25%), var(--line-2) var(--pct, 25%)) center / 100% 4px no-repeat; }
input[type="range"].range::-moz-range-track { height: 4px; background: transparent; border: none; }
input[type="range"].range::-webkit-slider-thumb { width: 28px; height: 28px; background: #fff; border: none; box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.06); }
input[type="range"].range::-moz-range-thumb { width: 28px; height: 28px; background: #fff; border: none; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.range-ends { font-size: 12px; color: var(--muted); }   /* --muted-2 měla na bílé kartě 3,6:1; --muted 5,07:1 (WCAG 1.4.3) */
.calc-large { border-radius: var(--r-xl); overflow: hidden; }
.calc-large .calc-inputs { padding: var(--sp-6); }
.input, .select, textarea.input { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 14px; font-size: 17px; }
.input:focus, .select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,122,82,.12); }
.field label { font-weight: 600; font-size: 13px; color: var(--muted); }

/* ---------- Srovnání / FAQ / kroky ---------- */
.compare { border: none; border-radius: var(--r-xl); background: #fff; }
.compare th, .compare td { border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 15px; }
.compare thead th { background: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.compare thead .is-us { background: var(--green); color: #fff; }
.compare .is-us { background: var(--green-050); box-shadow: none; }
.compare tbody th { font-weight: 500; }
.faq { gap: 0; }
.faq-item { border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none !important; }
.faq-item.open { border-color: var(--line); }
.faq-q { padding: 20px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.faq-q .chev { color: var(--muted); }
.faq-a .faq-a-inner { padding: 0 0 20px; font-size: 15px; color: var(--muted); }
.steps.horizontal .step:not(:last-child)::after { background: var(--line-2); }
.step .step-num { background: var(--ink); width: 40px; height: 40px; font-weight: 600; }
html.js .step:hover .step-num { background: var(--green); }
.step.hl { background: var(--surface-2); border-radius: var(--r-md); }
.step.hl .pill { background: #fff; }
.proof-strip .proof .num { color: var(--ink); }
.review-card .stars { color: var(--ink); font-size: 14px; letter-spacing: 1px; }
.review-card .quote { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.usecase-grid, .machine-grid { gap: var(--sp-3); }
.doc-list li { border-radius: var(--r-md); }

/* ---------- Blog ---------- */
.article-hero { background: #fff; padding-top: var(--sp-6); }
.article-hero h1 { letter-spacing: -0.035em; }
.article { font-size: 1.0625rem; letter-spacing: -0.012em; }
.article blockquote { background: var(--surface-2); border-left: none; border-radius: var(--r-lg); padding: var(--sp-5); font-size: 1.15rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.article .callout { border: none; }
.article .warn { border: none; background: var(--surface-2); font-weight: 600; }
.article .example .ex { border: none; background: var(--surface-2); }
.article-cover { border-radius: var(--r-xl); box-shadow: none; }
.post-card .pc-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.post-card h3 { font-size: 1.1rem; }
.post-card .pc-tag { border-radius: var(--r-pill); }
.related h2 { font-size: 1.6rem; }

/* ---------- Footer (kompaktní, Apple) ---------- */
.site-footer { background: var(--surface-2); color: var(--muted); padding-block: var(--sp-6) var(--sp-5); margin-top: var(--sp-8); border-top: none; font-size: 12px; }
.site-footer a { font-size: 12px; color: var(--muted); }
.site-footer h4 { font-size: 12px; text-transform: none; letter-spacing: -0.005em; color: var(--ink); margin-bottom: var(--sp-3); }
.site-footer p { font-size: 12px; line-height: 1.5; }
.site-footer .pill { font-size: 11px; }
.footer-grid.cols-5 { grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr; gap: var(--sp-5); }
.footer-links { gap: 8px; }
.footer-bottom { border-top: 1px solid var(--line-2); margin-top: var(--sp-6); padding-top: var(--sp-4); font-size: 11px; color: var(--muted-2); line-height: 1.5; }
@media (max-width: 1024px) { .footer-grid.cols-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid.cols-5 { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---------- Pohyb (klidný) ---------- */
html.js [data-reveal] { transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
html.js [data-reveal="scale"] { transform: scale(.98); }
html.js [data-reveal="left"], html.js [data-reveal="right"] { transform: translateY(14px); }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js .anim-hero > * { animation-duration: .8s; animation-timing-function: var(--ease); }
html.js .anim-float { animation: heroRise .9s .15s var(--ease) both; }
html.js [data-reveal-stagger] .step.revealed .step-num { animation: stepPop .45s var(--ease) var(--reveal-delay, 0ms) both; }
@keyframes stepPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Mobilní carousely (snap) & mobile-first doladění ---------- */
.mobile-cta-bar { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0,0,0,.08); box-shadow: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.mobile-cta-bar .btn { padding: 13px 18px; font-size: 15px; }
.mobile-cta-bar .mc-price strong { color: var(--ink); }
.offer-summary-bar { border: none; background: rgba(245,245,247,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--r-pill); }
.v-switch a { border-radius: var(--r-pill); border: 1px solid var(--line-2); font-weight: 500; padding: 9px 14px; min-height: 40px; }
.v-switch a.current { background: var(--ink); border-color: var(--ink); }
.hero-v4.dark .v-switch a { background: var(--tile-dark); border-color: #3a3a3c; color: #f5f5f7; }
.hero-v4.dark .v-switch a.current { background: #f5f5f7; color: var(--ink); border-color: #f5f5f7; }
.breadcrumbs li + li::before { content: "›"; color: var(--muted-2); }
.skip-link { border-radius: var(--r-pill); }
@media (max-width: 1024px) {
  .hero-tiles { grid-template-columns: 1fr; }
  .hero-tiles .calc-card { order: -1; }
  .tile-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .tile-photo img { position: static; height: 100%; aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  :root { --fs-2xl: 1.9rem; --header-h: 50px; }
  :where(body[data-shell="marketing"]) h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  /* 36/39/43 px na 360/390/430 px → „Kamiony jedou dál.“ / „Peníze ze stroje.“ / „Sezóna jede dál.“ na jeden řádek */
  .display-headline { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  :where(body[data-shell="marketing"]) h2 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .lead { font-size: 1.05rem; }
  .section { padding-block: var(--sp-7); }
  .section-head { margin-bottom: var(--sp-5); }
  .btn-lg { padding: 15px 22px; font-size: 16px; }
  .hero-v4 .hero-actions .btn { width: 100%; }
  .hero-v4 .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-v4 .hero-actions .link-arrow { justify-content: center; }
  .calc-card { padding: var(--sp-4); border-radius: var(--r-lg); }
  .trust-strip { grid-template-columns: 1fr 1fr; padding: var(--sp-4); gap: var(--sp-3); }
  .trust-strip .ts-item { align-items: flex-start; text-align: left; flex-direction: row; gap: 12px; }
  .trust-strip .ts-ico { width: 40px; height: 40px; flex: none; }
  .trust-strip .ts-label { font-size: 13px; }
  /* Carousel: gridy karet se na mobilu mění v horizontální snap pás */
  /* margin/padding = padding .container (24 px, ≤520 px 20 px); scroll-padding drží levý gutter i po snapu */
  .mobile-carousel { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px var(--sp-5) 14px; margin-inline: calc(-1 * var(--sp-5)); scroll-padding-inline: var(--sp-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; min-width: 0; margin: 0 !important; }
  .mobile-carousel .card, .mobile-carousel .post-card { height: auto; }
  .stat-band { grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-5); }
  .cta-band { padding: var(--sp-5); }
  .cta-band .cta-actions .btn { width: 100%; }
  .cta-band .cta-actions { width: 100%; }
  .compare th, .compare td { padding: 12px 14px; font-size: 13px; }
  .faq-q { font-size: 16px; padding: 16px 0; }
  .objections { gap: var(--sp-3); }
  .obj { padding: var(--sp-4); }
  .obj .obj-q { font-size: 16px; }
  .big-step { padding: var(--sp-4); }
  .big-step .big-num { font-size: 2.8rem; }
  .season { grid-template-columns: 1fr 1fr; }
  .card.pad-lg { padding: var(--sp-5); }
  .grid { gap: var(--sp-3); }
}
@media (max-width: 520px) {
  .container { padding-inline: 20px; }
  .season { grid-template-columns: 1fr 1fr; gap: 10px; }
  .season .s-item { padding: 14px; }
  .season .s-item .s-q { font-size: 1.2rem; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat-band .sb .num { font-size: 1.8rem; }
  .trust-strip { grid-template-columns: 1fr; }
  .machine-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .machine { padding: 14px; }
  .machine .m-ico, .machine .m-ico svg { width: 32px; height: 32px; }
  .doc-list { grid-template-columns: 1fr; }
  .segmented button { font-size: 13px; padding: 8px 4px; }
  .calc-card .between { flex-wrap: wrap; gap: 8px; }
  .mobile-carousel { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .mobile-carousel > * { flex-basis: 82%; }   /* peek další karty ≈ 33 px na 360 px */
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { transition: none; }
}

/* ---------- v4 · přístupnost & nálezy auditu (WCAG 2.1 AA) ---------- */
[hidden] { display: none !important; }                       /* img/svg mají display:block — hidden musí vyhrát */
:root { --danger: #B5372E; }                                 /* 5,9:1 na bílé pro chybové texty */
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.section.dark :focus-visible, .hero-v4.dark :focus-visible, .cta-band :focus-visible, .stat-band :focus-visible, .calc-large .calc-out :focus-visible { outline-color: #fff; }
.faq-q:focus-visible { outline-offset: -4px; }
.footer-bottom { color: var(--muted); font-size: 12px; }
.compare .meh { color: #8A5F0C; }
.post-card .pc-meta { color: var(--muted); }
.brand-lockup { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; max-width: 100%; }
.mobile-menu.open { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.btn-block, .cta-band .btn, .hero-actions .btn { white-space: normal; text-align: center; }
.notice { align-items: flex-start; }
.nav-links a { white-space: nowrap; }
.nav-toggle { width: 44px; height: 44px; }
.v-switch a { min-height: 44px; }
.section.dark .big-step h3, .section.dark .uc-card h4, .section.dark .machine strong { color: #f5f5f7; }
.section.dark .stat-band { background: var(--tile-dark); }
.hero-v4.dark .calc-card .muted, .hero-v4.dark .calc-card .calc-label { color: var(--muted); }
.hero-v4.dark .calc-card .cost-warning { color: var(--ink); background: var(--surface-2); }
@media (max-width: 1200px) { .nav-phone { display: none; } }
@media (max-width: 1100px) { .nav-links { gap: var(--sp-3); } .nav-actions .btn-ghost.desktop-only { display: none; } }
@media (max-width: 1024px) { .article-side .toc { display: none; } }
@media (max-width: 960px) {
  .nav-links, .nav-actions .desktop-only { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu.open { display: block; position: fixed; inset: var(--header-h) 0 0; background: rgba(255,255,255,.96); z-index: 49; padding: var(--sp-5); }
  .mobile-menu .nav-links { display: flex; flex-direction: column; gap: 0; }
}

/* ---------- v4 · úzké displeje: hlavička ---------- */
@media (max-width: 420px) {
  .hide-xs { display: none; }
  .site-header .nav-inner { gap: 8px; padding-inline: 16px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 7px 12px; }
}

/* Absolutně pozicované děti (.sr-only apod.) se musí klipovat uvnitř scroll kontejnerů */
.mobile-carousel, .table-wrap, .card, .post-card, .v-card, .obj { position: relative; }

/* =========================================================================
   v4 · audit (Apple HIG · mobile-first · WCAG 2.1 AA) — poslední blok, přebíjí vše výše
   ========================================================================= */

/* ---------- Barva jen v jediném prvku: eyebrow, odrážky, avatar ---------- */
.eyebrow { color: var(--muted); }                              /* 15 px / 600 · 5,07:1 na bílé, 4,7:1 na #f5f5f7 */
.section.dark .eyebrow { color: #86868b; }                     /* 5,8:1 na #000 */
.article li::marker { color: var(--ink); }
.author-box .avatar { background: var(--surface-2); color: var(--ink); }

/* ---------- Sekundární tlačítko = šedá výplň, bez obrysu (Apple nemá outline tlačítka) ----------
   Translucentní černá místo #f5f5f7: funguje i na .section.alt (#f5f5f7) a v zeleném CTA (index.html, inline color:#fff). */
.btn-ghost { background: rgba(0,0,0,.05); color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: rgba(0,0,0,.09); color: var(--ink); border-color: transparent; }
.section.dark .btn-ghost, .hero-v4.dark .btn-ghost, .cta-band .btn-ghost { background: rgba(255,255,255,.12); color: #f5f5f7; border-color: transparent; }
.section.dark .btn-ghost:hover, .hero-v4.dark .btn-ghost:hover, .cta-band .btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }

/* ---------- Trust strip: tenká ikona v ink, bez kroužku a stínu ---------- */
.trust-strip .ts-ico { border: none; background: transparent; box-shadow: none; width: 28px; height: 28px; color: var(--ink); }
.trust-strip .ts-ico svg { width: 26px; height: 26px; }
.hero-v4.dark .trust-strip .ts-ico { background: transparent; box-shadow: none; color: #f5f5f7; }

/* ---------- Pilulky: jediný neutrální tón (bez zelené/zlaté/oranžové) ---------- */
.pill-mint, .pill-accent, .pill-agro, .pill-tech { background: var(--surface-2); color: var(--muted); }
.section.alt .pill-mint, .section.alt .pill-accent, .section.alt .pill-muted { background: #fff; }
/* na šedé dlaždici bílá pilulka, na bílé dlaždici (.section.alt) šedá, na tmavé dlaždici #2c2c2e */
.card .pill-mint, .card .pill-accent, .card .pill-muted, .big-step .pill-mint, .big-step .pill-accent, .big-step .pill-muted,
.obj .pill-mint, .obj .pill-accent, .obj .pill-muted, .uc-card .pill-mint, .uc-card .pill-accent, .uc-card .pill-muted { background: #fff; }
.section.alt .card .pill-mint, .section.alt .card .pill-accent, .section.alt .card .pill-muted,
.section.alt .big-step .pill-mint, .section.alt .big-step .pill-accent, .section.alt .big-step .pill-muted { background: var(--surface-2); }
.section.dark .card .pill-mint, .section.dark .card .pill-accent, .section.dark .card .pill-muted,
.section.dark .big-step .pill-mint, .section.dark .big-step .pill-accent, .section.dark .big-step .pill-muted { background: #2c2c2e; color: #d2d2d7; }

/* ---------- Srovnávací tabulka: monochromní, rozdíl nese text a váha ---------- */
.compare thead .is-us { background: transparent; color: var(--ink); }
.compare .is-us { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.compare .yes, .compare .no, .compare .meh { color: var(--ink); font-weight: 600; }

/* ---------- Plochy vertikál: dlaždice šedé/bílé, akcent jen v textu ---------- */
.season .s-item.peak { background: var(--surface-2); }
.section.alt .season .s-item.peak { background: #fff; }
.season .s-item.peak .s-q { color: var(--accent-700); }
.section.alt .uc-card .uc-ico { background: var(--surface-2); color: var(--ink); }
.machine .m-ico { color: var(--ink); }
.hero-v4.dark .link-arrow { color: var(--green-bright); }     /* žádná třetí (modrá) akcentová barva; 6,3:1 na #000 */

/* ---------- Klidný pohyb: hover jen na interaktivních prvcích ---------- */
.card.hover:hover { transform: none; box-shadow: none; border-color: transparent; }   /* div.card.hover (feature) */
a.card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
html.js .step:hover .step-num { background: var(--ink); transform: none; }
.photo-frame:hover img { transform: none; }

/* ---------- Stíny jen u kalkulačky ---------- */
.ui-frame, .photo-frame, .cta-photo, .offer-summary-bar { box-shadow: none; }
.ui-frame { border: none; border-radius: var(--r-xl); }
.photo-frame { border-radius: var(--r-xl); }

/* ---------- Chipy wizardu (.choice) = pill, active = ink (jako .segmented / .v-switch) ---------- */
.choice { border: 1px solid var(--muted-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-weight: 500; }
.choice:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.choice.active, .choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Váhy: max 700 (Apple), 800 nikde → stránky mohou stahovat jen Inter 400;500;600;700 ---------- */
:where(body:not([data-shell="marketing"])) :is(h1, h2, h3, h4) { font-weight: 700; }   /* portály; marketing má 700/600 výše */
.brand, .brand-word, .brand-word.xl, .display-headline, .calc-amount, .result-stat .ro-val, .stat .num, .proof-strip .proof .num,
.obj .obj-q, .obj .obj-q .q-ico, .big-step .big-num, .uc-card .uc-amt, .season .s-item .s-q, .stat-band .sb .num,
.article .example .ex .val, .post-card.featured h3, .cta-band h3, .cta-band .cta-phone, .meter-row .meter-val,
.side-link .badge-count, .avatar { font-weight: 700; }
.v-card .vc-more { font-weight: 500; }

/* ---------- Mobilní CTA lišta: tlačítko se nezmenšuje, popisek ano; ≤420 px jen tlačítko ---------- */
.mobile-cta-bar .btn { flex: 0 0 auto; }
.mobile-cta-bar .mc-price { flex: 1 1 0; min-width: 0; color: #424245; }   /* 6,5:1 i na rozostřeném tmavém podkladu (≈#d1d1d1) */
@media (max-width: 420px) {
  .mobile-cta-bar .mc-price { display: none; }
  .mobile-cta-bar .btn { flex: 1; }
}

/* ---------- Srovnávací tabulka na mobilu: vodorovný scroll + přilepený první sloupec ---------- */
@media (max-width: 860px) {
  .table-wrap { margin-inline: calc(-1 * var(--sp-5)); padding-inline: var(--sp-5); }
  .compare { min-width: 640px; overflow: clip; }              /* clip (ne hidden) → sticky funguje uvnitř .table-wrap */
  .compare tbody th { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 120px; width: 120px; box-shadow: 1px 0 0 var(--line); }
  .compare thead th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; }
}
@media (max-width: 520px) {
  .table-wrap { margin-inline: -20px; padding-inline: 20px; }
}

/* ---------- Přístupnost: fokus, kontrast, rozpoznatelnost odkazů a polí ---------- */
/* WCAG 2.4.7: v1 mělo outline:none (0,2,1) a přebíjelo globální :focus-visible → slider bez indikátoru */
input[type="range"].range:focus-visible { outline: 3px solid var(--green); outline-offset: 0; border-radius: var(--r-md); }
input[type="range"].range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--green), 0 1px 6px rgba(0,0,0,.25); }
input[type="range"].range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--green), 0 1px 6px rgba(0,0,0,.25); }
/* WCAG 1.4.11: bílá kalkulačka v tmavém heru — bílý kroužek by byl na bílé kartě neviditelný */
.hero-v4.dark .calc-card :focus-visible { outline-color: var(--green); }
.mobile-carousel:focus-visible { outline-offset: -3px; }      /* padding 4 px by 2px offset ořízl (AK.initCarousels) */
/* WCAG 1.4.11: hranice polí a chipů ≥ 3:1 (#86868b = 3,6:1 na bílé, 3,3:1 na #f5f5f7); fokus zesílen */
.input, .select, textarea.input, .choice, .v-switch a { border-color: var(--muted-2); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,122,82,.35); }
.field.invalid .input { border-color: var(--danger); }
/* WCAG 1.4.1 (G183): odkazy v běžném textu nejen barvou — podtržení; ostatní textové odkazy podtržení na hover */
.muted a:not(.btn):not(.link-arrow), .lead a, .faq-a-inner a, .notice a, .disclaimer a, .cost-warning a,
.article p a, .article li a, .article td a, .section-head p a, .field .hint a, .check a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:not(.btn):not(.link-arrow):hover, li a:not(.btn):not(.link-arrow):not(.nav-links a):not(.side-link):hover, td a:hover,
.breadcrumbs a:hover, .toc a:hover, .site-footer a:not(.btn):hover, .article a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- v4 · doplňky po finální kontrole ---------- */
.nav-plain { font-size: 13px; font-weight: 500; color: rgba(29,29,31,.82); white-space: nowrap; }
.nav-plain:hover { color: var(--ink); }
@media (max-width: 860px) {
  .grid.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid.compact .feature { padding: 16px; }
  .grid.compact .feature .ico-img, .grid.compact .feature .ico-box { width: 40px; height: 40px; margin-bottom: 10px; }
  .grid.compact .feature .ico-img img { width: 24px; height: 24px; }
  .grid.compact .feature h3 { font-size: 1rem; }
  .grid.compact .feature p { font-size: 13px; }
}
@media (max-width: 400px) { .grid.compact { grid-template-columns: 1fr; } }
.feature .ico-img, .feature .ico-box { color: var(--ink); }
/* fokus na slideru (v1 mělo outline:none) a uvnitř bílé kalkulačky v tmavém hero */
input[type="range"].range:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 6px; }
.hero-v4.dark .calc-card :focus-visible, .section.dark .calc-card :focus-visible { outline-color: var(--green); }

/* =========================================================================
   v5 — NICHE THEMES per řada (dílna · pole · depo): barvy, ikony, pozadí, animace
   ========================================================================= */
body[data-vertical="agro"] { --surface-2: #f6f4ee; --tile-dark: #17211a; --niche-dark: #0f1712; --niche-glow: rgba(200,144,26,.38); --accent-050: #f7efdc; }
body[data-vertical="tech"] { --surface-2: #f2f4f7; --tile-dark: #161b22; --niche-dark: #0b0f14; --niche-glow: rgba(232,100,27,.30); --accent-050: #fdeee4; }
body[data-vertical] .section.dark { background: var(--niche-dark); }
.hero-v4 { position: relative; overflow: hidden; }
/* AgroCash: východ slunce nad polem + brázdy */
body[data-vertical="agro"] .hero-v4.dark { background: radial-gradient(70% 55% at 72% -5%, var(--niche-glow), transparent 70%), var(--niche-dark); }
body[data-vertical="agro"] .hero-v4.dark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(-6deg, rgba(200,144,26,.09) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000); mask-image: linear-gradient(180deg, transparent, #000); }
body[data-vertical="agro"] .hero-v4 .container { position: relative; z-index: 1; }
@keyframes sunGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
html.js body[data-vertical="agro"] .hero-v4.dark { animation: sunGlow 9s ease-in-out infinite; }
/* TechCash: asfalt + běžící dálniční pruh */
body[data-vertical="tech"] .hero-v4.dark { background: linear-gradient(180deg, #0b0f14 0%, #121820 100%); }
body[data-vertical="tech"] .hero-v4.dark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 4px; z-index: 0; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--accent) 0 44px, transparent 44px 88px); background-size: 88px 4px; }
html.js body[data-vertical="tech"] .hero-v4.dark::after { animation: roadDash 1.4s linear infinite; }
@keyframes roadDash { from { background-position: 0 0; } to { background-position: -88px 0; } }
body[data-vertical="tech"] .hero-v4 .container { position: relative; z-index: 1; }
/* Ikony a eyebrow v barvě řady */
body[data-vertical="agro"] .eyebrow, body[data-vertical="tech"] .eyebrow { color: var(--accent-700); }
body[data-vertical] .trust-strip .ts-ico, body[data-vertical] .hero-v4.dark .trust-strip .ts-ico { color: var(--accent); }
body[data-vertical] .uc-card .uc-ico { color: var(--accent-700); background: var(--accent-050); }
body[data-vertical] .machine .m-ico { color: var(--accent-700); }
body[data-vertical] .obj .obj-a .a-ico { color: var(--accent-700); background: var(--accent-050); }
body[data-vertical] .doc-list li svg { color: var(--accent); }
body[data-vertical] .step .step-num { background: var(--accent-700); }
body[data-vertical] .big-step .big-num { color: var(--accent-100); }
body[data-vertical] .section.dark .big-step .big-num { color: var(--accent-700); }
body[data-vertical] .calc-amount { color: var(--green); }
body[data-vertical] .tile-photo .tile-caption .pill { background: rgba(255,255,255,.9); color: var(--accent-700); }
body[data-vertical] .link-arrow { color: var(--accent-700); }
body[data-vertical] .hero-v4.dark .link-arrow { color: var(--accent); }
body[data-vertical] .v-card .vc-more { color: var(--accent-700); }
/* Sezónní osa (agro) „roste“, provozní osa (tech) je trasa s milníky */
.season .s-item { position: relative; overflow: hidden; }
.season .s-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line-2); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease) calc(var(--reveal-delay, 0ms) + 150ms); }
.season .s-item.peak::after { background: var(--accent); }
html.js .season .s-item.revealed::after { transform: scaleX(1); }
body[data-vertical="tech"] .season { position: relative; }
body[data-vertical="tech"] .season::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 3px; z-index: 0; opacity: .35; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px); }
body[data-vertical="tech"] .season .s-item { z-index: 1; }
body[data-vertical="tech"] .season .s-item .s-q { color: var(--accent-700); }
body[data-vertical="agro"] .season .s-item.peak { background: linear-gradient(180deg, #fbf3e0 0%, #f7efdc 100%); }
body[data-vertical="agro"] .season .s-item .s-q { color: var(--accent-700); }
/* Story pás (3 svislé fotky) s niche popisky */
.story-strip .photo-frame.tall { position: relative; }
.story-strip .story-tag { position: absolute; left: 14px; top: 14px; z-index: 1; }
.story-strip .story-tag .pill { background: rgba(255,255,255,.9); color: var(--accent-700); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.story-strip h3 { margin-top: var(--sp-4); }
.story-strip p { color: var(--muted); }
/* Niche ovladač v kalkulačce (Kdy čekáte tržby? / Splatnost faktur) */
.niche-ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-050); font-size: var(--fs-sm); color: var(--accent-700); font-weight: 600; }
.niche-ctl .select { width: auto; padding: 8px 34px 8px 12px; font-size: 14px; background-color: #fff; border-color: transparent; }
.niche-ctl .hint-line { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); margin-top: 6px; }
/* Tech: „tachometrová“ čísla — tabular + monospace-like tracking */
body[data-vertical="tech"] .calc-amount, body[data-vertical="tech"] .stat-band .sb .num { font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.02em; }
/* Agro: měkčí rohy a teplejší dlaždice; tech: ostřejší rohy */
body[data-vertical="agro"] { --r-lg: 24px; --r-xl: 30px; }
body[data-vertical="tech"] { --r-lg: 16px; --r-xl: 20px; }
body[data-vertical="tech"] .btn { border-radius: 12px; }
body[data-vertical="tech"] .pill { border-radius: 6px; }
body[data-vertical="tech"] .segmented, body[data-vertical="tech"] .segmented button { border-radius: 8px; }
/* Reveal směr: agro roste zdola, tech přijíždí zleva */
html.js body[data-vertical="agro"] [data-reveal] { transform: translateY(18px); }
html.js body[data-vertical="tech"] [data-reveal] { transform: translateX(-16px); }
html.js body[data-vertical] [data-reveal].revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body[data-vertical="tech"] .hero-v4.dark::after, html.js body[data-vertical="agro"] .hero-v4.dark { animation: none !important; }
  .season .s-item::after { transform: none !important; transition: none !important; }
}
@media (max-width: 520px) { .niche-ctl { flex-direction: column; align-items: stretch; } .niche-ctl .select { width: 100%; } }