/* ============================================================
   Jiří Ďoubek — osobní web
   Čistý minimalismus. Žádné externí závislosti (fonty ze systému).
   Barvy se snadno mění přes proměnné níže.
   ============================================================ */

:root {
  --bg:          #ffffff;
  --bg-alt:      #f5f6f8;
  --ink:         #14171f;   /* hlavní text */
  --ink-soft:    #5b6472;   /* sekundární text */
  --ink-faint:   #667080;   /* ztmaveno z #8a93a2 kvůli kontrastu WCAG AA (4,5:1 i na --bg-alt) */
  --line:        #e6e8ec;   /* jemné linky */
  --line-strong: #8a93a2;   /* ohraničení formulářových polí (non-text kontrast ≥ 3:1) */
  --accent:      #2347d9;   /* akcent — chceš-li jinou barvu, stačí změnit tady */
  --accent-strong:#1a36ab;
  --accent-tint: #eef1fd;
  --dark:        #11141b;   /* tmavé sekce (patička) */
  --dark-soft:   #aab2c0;

  --maxw: 1080px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20,23,31,.04), 0 12px 32px rgba(20,23,31,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  color-scheme: light dark;   /* formulářové prvky a scrollbary se přizpůsobí režimu */
}

/* ---------- Reset / základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .82rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; font-size: .98rem; line-height: 1;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 8px 22px rgba(35,71,217,.28); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn-outline { background: transparent; color: var(--accent); border-color: rgba(35,71,217,.35); }
.btn-outline:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.04rem; }

/* ---------- Hlavička / navigace ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: var(--ink); color: #fff; border-radius: 9px;
  font-size: .82rem; font-weight: 700; letter-spacing: 0;
}
.brand-foto { object-fit: cover; background: none; }
.brand-name { font-size: 1.02rem; }

.nav-menu { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.nav-links { display: flex; gap: 1.1rem; }
.nav-links a { color: var(--ink-soft); font-weight: 500; font-size: .97rem; padding: .25rem 0; position: relative; }
/* Položky hlavičky se nelámou do dvou řádků; když se nevejdou, menu se složí do tlačítka (viz Responzivita). */
.brand-name, .nav-links a, .nav-cta { white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-cta { padding: .6rem 1.1rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle-bar { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Přepínač jazyka (CZ | EN | DE | PL). Na počítači stojí za menu, na mobilu vedle tlačítka menu.
   Na stránkách bez menu (zásady cookies) je spolu s tlačítkem zpět v .nav-side.
   Každá položka je vlaječka (vložené SVG, aria-hidden) a za ní kód jazyka jako text. */
.lang-switch { display: inline-flex; align-items: center; margin-left: 1rem; font-size: .84rem; font-weight: 650; letter-spacing: .05em; line-height: 1; }
.lang-switch > * { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem; color: var(--ink-faint); }
.lang-switch > * + * { border-left: 1px solid var(--line-strong); }
.lang-switch .lang-current { color: var(--ink); }
.lang-switch .lang-link:hover { color: var(--accent); }
/* Kód je vidět jen u aktuálního jazyka. Čtyři vlaječky s kódy se vedle menu do hlavičky nevejdou
   (obsah je nejvýš 1032 px široký, česká hlavička by potřebovala 1051 px). U ostatních jazyků je kód
   skrytý jen vizuálně, pro čtečky obrazovky a stroje v kódu stránky zůstává. */
.lang-switch .lang-link .lang-code { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Vlaječka 18 × 12 px. Tenký obrys ji oddělí od bílého i tmavého pozadí (bílý pruh české a polské, černý německé vlajky). */
.lang-flag { flex: none; display: block; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(102, 112, 128, .45); }
.lang-link .lang-flag { opacity: .78; transition: opacity .15s ease; }
.lang-link:hover .lang-flag, .lang-link:focus-visible .lang-flag { opacity: 1; }
.nav-side { display: flex; align-items: center; gap: 1rem; }
.nav-side .lang-switch { margin-left: 0; }

/* ---------- Sekce obecně ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.alt-bg { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: var(--accent); margin: 0 0 .8rem; }
.section-head h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin-bottom: 1rem; }
.section-intro { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -30%; right: -10%; width: 540px; height: 540px;
  background: radial-gradient(circle, var(--accent-tint) 0%, rgba(238,241,253,0) 70%);
  z-index: -1; pointer-events: none;
}
.hero-inner { max-width: 760px; }
.hero-title { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.2rem); margin: .4rem 0 1.2rem; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ink-soft); line-height: 1.6; max-width: 640px; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.hero-meta { color: var(--ink-faint); font-size: .95rem; margin: 0; }
/* Poznámka o jazyce spolupráce (jen německá verze): stránka je německy, pracuje se anglicky. */
.lang-note { margin: 1.2rem 0 0; padding: .75rem 1rem; max-width: 640px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.lang-note strong { color: var(--ink); font-weight: 650; }

/* ---------- Stats ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(2rem,4vw,2.8rem) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { display: flex; flex-direction: column; gap: .35rem; padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.stat-num { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; letter-spacing: -0.02em; }
.stat-label { font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }

/* ---------- O mně ---------- */
.about-grid { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; margin-bottom: 3.5rem; }
.about-media { position: sticky; top: 100px; }
.avatar {
  width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(150deg, var(--accent) 0%, #4a6bff 60%, #6f8bff 100%);
  color: #fff; display: grid; place-items: center;
  font-size: 3.4rem; font-weight: 700; letter-spacing: -0.02em;
  box-shadow: var(--shadow);
}
.about-body p { font-size: 1.08rem; color: #2c313c; }
.about-body p:last-child { margin-bottom: 0; }

.expertise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3.5rem; }
.exp-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; }
.exp-card h3 { font-size: 1.02rem; margin-bottom: 1rem; }
.exp-card ul { display: flex; flex-direction: column; gap: .55rem; }
.exp-card li { position: relative; padding-left: 1.25rem; color: var(--ink-soft); font-size: .96rem; line-height: 1.4; }
.exp-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.timeline { margin-bottom: 3rem; }
.timeline-title { font-size: 1.05rem; margin-bottom: 1.4rem; }
.timeline ol { display: flex; flex-direction: column; }
.timeline li {
  display: grid; grid-template-columns: 160px 1fr; gap: .2rem 1.5rem;
  padding: 1.1rem 0 1.1rem 1.5rem; border-left: 2px solid var(--line); position: relative;
}
.timeline li::before { content: ""; position: absolute; left: -7px; top: 1.5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent); }
.timeline li:first-child::before { background: var(--accent); }
.tl-period { grid-row: span 2; color: var(--ink-faint); font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.tl-role { font-weight: 650; }
.tl-org { color: var(--ink-soft); font-size: .96rem; }
.tl-lead { color: var(--ink); font-weight: 650; }

.credentials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.cred-item { font-size: .98rem; color: #2c313c; }
.cred-label { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--ink-faint); margin-bottom: .4rem; }

.certs { margin-top: 3rem; }
.certs-title { font-size: 1.05rem; margin-bottom: 1.4rem; }
.certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.cert-card { display: flex; align-items: center; gap: 1.1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d4d8df; }
.cert-badge { width: 88px; height: 88px; flex-shrink: 0; object-fit: contain; }
.cert-info { display: flex; flex-direction: column; gap: .3rem; }
.cert-issuer { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--ink-faint); }
.cert-info h4 { font-size: 1.05rem; margin: 0; letter-spacing: -0.01em; }
.cert-meta { font-size: .85rem; color: var(--ink-soft); }
.cert-verify { font-size: .92rem; font-weight: 600; color: var(--accent); align-self: flex-start; padding: .25rem 0; }
.cert-verify:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------- Služby ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.steps-grid { grid-template-columns: repeat(3, 1fr); }
.steps-cta { margin-top: 1.8rem; text-align: center; }
@media (max-width: 760px) { .steps-grid { grid-template-columns: 1fr; } }
/* Blok „čím je český trh jiný“ (jen anglická verze) má delší texty, tři sloupce drží až od 900 px. */
@media (max-width: 900px) { .why-local .steps-grid { grid-template-columns: 1fr; } }
.service-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d4d8df; }
.service-card h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.service-card p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.service-card.featured { border-color: var(--accent); box-shadow: 0 10px 30px rgba(35,71,217,.10); }
.tag { display: inline-block; background: var(--accent-tint); color: var(--accent-strong); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; margin-bottom: 1rem; }

/* ---------- Ceník ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.price-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.8rem; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 12px 34px rgba(35,71,217,.12); }
.price-card h3 { font-size: 1.18rem; margin-bottom: .8rem; }
.price { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.3rem; }
.price span { font-size: .95rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
/* Přibližná cena v eurech pod cenou v korunách (jen anglická verze). */
.price-eur { margin: -1.15rem 0 1.3rem; font-size: .95rem; font-weight: 500; color: var(--ink-faint); }
.price-card ul { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.8rem; }
.price-card li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: .97rem; }
.price-card li::before { content: "✓"; position: absolute; left: 0; top: -.05em; color: var(--accent); font-weight: 700; }
.price-fit { margin: -0.7rem 0 1.3rem; font-size: .88rem; color: var(--ink-soft); }
.price-fit strong { font-weight: 650; color: var(--ink); }
.price-card .btn { margin-top: auto; width: 100%; }
.pricing-note { text-align: center; color: var(--ink-soft); margin: 2.4rem auto 0; max-width: 560px; }
.eur-note { text-align: center; color: var(--ink-faint); font-size: .9rem; margin: .7rem auto 0; max-width: 560px; }
.free-intro { max-width: 720px; margin: 1.6rem auto 0; padding: 1.5rem 1.6rem; background: var(--accent-tint); border: 1px solid rgba(35,71,217,.18); border-radius: var(--radius-lg); }
.free-intro-lead { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.free-intro-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 .45rem; }
.free-intro-title em { font-style: normal; color: var(--accent); }
.free-intro-head { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; }
.free-intro-foto { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 1.2rem 0 .9rem; }
.slots[hidden] { display: none; } /* když nejsou budoucí termíny, blok zmizí (hidden by jinak prohrálo s display:grid) */
/* Termín: datum vlevo, výzva vpravo. Když se vedle sebe nevejdou (úzký mobil, delší německá výzva), výzva přejde
   pod datum, místo aby přetekla z karty. Datum se neláme a má pevný základ šířky (stačí i na „Pondělí 31. 12.“),
   takže se všechny karty v bloku zalomí stejně, ať je v nich jakýkoli den a čas. */
.slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: .85rem 1.1rem; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.slot:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.slot-when { display: flex; flex-direction: column; flex: 1 1 6.8rem; white-space: nowrap; }
.slot-day { font-weight: 650; color: var(--ink); font-size: .98rem; }
.slot-time { color: var(--ink-soft); font-size: .9rem; }
.slot-cta { color: var(--accent); font-weight: 600; font-size: .9rem; flex-shrink: 0; white-space: nowrap; }
.slots-note { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Reference / výsledky ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 3.5rem; }
.proof-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; }
.proof-item p { margin: 0; color: #2c313c; font-size: 1.02rem; line-height: 1.5; }
.platforms-title { font-size: 1.05rem; margin-bottom: 1.2rem; }
.platforms { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3.5rem; }
.platforms li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.05rem; font-size: .92rem; font-weight: 500; color: #2c313c; }
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.testimonial { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }
.testimonial p { font-size: 1.08rem; line-height: 1.5; margin-bottom: 1rem; }
.testimonial cite { font-style: normal; font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.testimonial.placeholder { border-style: dashed; background: transparent; }
.testimonial.placeholder p { color: var(--ink-faint); }

/* ---------- Kontakt ---------- */
.contact .section-head { max-width: 760px; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-row { display: flex; flex-direction: column; gap: .45rem; }
.contact-form label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.contact-form input, .contact-form textarea, .contact-form select {
  font: inherit; color: var(--ink); background: #fff; width: 100%;
  padding: .75rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--ink-faint); margin: 0; }
.form-status { margin: 0; padding: .8rem 1rem; border-radius: 10px; font-size: .96rem; }
.form-status:empty { padding: 0; } /* prázdný stavový řádek nezabírá místo, ale žije v DOM (aria-live) */
.form-status.pending { background: var(--bg-alt); color: var(--ink-soft); }
.form-status.ok  { background: #e7f6ec; color: #176b3a; }
.form-status.err { background: #fdecec; color: #b3261e; }

.contact-aside { padding-top: .4rem; }
.aside-foto { margin: 2rem 0 0; }
.aside-foto img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.aside-lead { font-weight: 600; margin-bottom: 1.2rem; }
.contact-meta { display: flex; flex-direction: column; gap: 1.3rem; }
.contact-meta li { display: flex; flex-direction: column; gap: .25rem; font-size: 1.02rem; color: #2c313c; }
.contact-meta .meta-label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--ink-faint); }

/* ---------- Patička ---------- */
.site-footer { background: var(--dark); color: #e9ecf1; padding: 3rem 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: .8rem; }
.footer-brand .brand-mark { background: #fff; color: var(--dark); }
.footer-brand strong { display: block; font-size: 1.02rem; }
.footer-tag { color: var(--dark-soft); font-size: .88rem; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; font-size: .92rem; }
.footer-meta a { color: #e9ecf1; display: inline-block; padding: .3rem 0; }
.footer-meta a:hover { color: #fff; text-decoration: underline; }
.footer-meta span { color: var(--dark-soft); }
.footer-copy { width: 100%; margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); color: var(--dark-soft); font-size: .88rem; }
.footer-legal { width: 100%; margin: -0.8rem 0 0; color: var(--dark-soft); font-size: .82rem; }

/* ---------- Právní stránka (cookies / GDPR) ---------- */
.legal { padding: clamp(3rem, 7vw, 5rem) 0; }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .4rem; }
.legal-date { color: var(--ink-faint); font-size: .9rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.2rem; margin: 2.2rem 0 .7rem; }
.legal p { color: #2c313c; }
.legal ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .45rem; }
.legal li { color: #2c313c; }
/* :not(.btn): jinak by pravidlo přebilo barvu textu tlačítek (na stránce 404 byl modrý text na modrém tlačítku) */
.legal a:not(.btn) { color: var(--accent); }
.legal .eyebrow { color: var(--accent); }
.legal .note { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .92rem; color: var(--ink-soft); }
.back-link { display: inline-block; margin-top: 2.5rem; font-weight: 600; }

/* ---------- FAQ (rozbalovací) ---------- */
.faq-list { display: flex; flex-direction: column; gap: .75rem; max-width: 800px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.faq-item summary { cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; font-size: 1.02rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after { content: "+"; content: "+" / ""; color: var(--accent); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-a { padding: 1rem 1.3rem 1.2rem; }
.faq-a p { margin: 0; color: var(--ink-soft); }
.faq-a a, .slots-note a, .form-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Reveal animace ----------
   Skryté jen pod html.js (třídu nastavuje inline skript v <head>).
   Bez JavaScriptu tedy zůstane celý obsah viditelný. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .service-card:hover { transform: none; }
}

/* ---------- Responzivita ---------- */
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-media { position: static; }
  .avatar { width: 140px; height: 140px; font-size: 2.5rem; }
  .expertise, .credentials, .proof-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .aside-foto img { max-width: 320px; }
}
@media (max-width: 640px) {
  /* Zásady cookies na mobilu: vedle loga se vejde jen přepínač jazyka (čtyři vlaječky
     a nejdelší, německé tlačítko zpět potřebují skoro 600 px). Zpět na web vede logo a odkaz na konci stránky. */
  .nav-side .btn { display: none; }
}
@media (max-width: 480px) {
  .free-intro-head { gap: .8rem; }
  .free-intro-foto { width: 80px; height: 80px; }
}

/* Menu: s přepínačem čtyř jazyků (čtyři vlaječky, kód jen u aktuálního jazyka) potřebuje hlavička na šířku
   obsahu zhruba 990 px (měřeno 10. 10. 2026 v systémovém písmu macOS, nejširší je čeština). Obsah je nejvýš
   1032 px široký, proto má menu jedny mezery pro všechny šířky a do 1079 px se složí do tlačítka.
   Zbytek rozvržení se láme až na 720 px (blok níže). */
@media (max-width: 1079px) {
  .nav-toggle { display: flex; order: 2; }
  .lang-switch { order: 1; margin-left: auto; margin-right: .2rem; }
  .lang-switch > * { padding: .6rem .55rem; }
  .nav-side .lang-switch { order: 0; margin-right: 0; }
  .nav-menu {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem 24px 1.6rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    visibility: hidden; /* zavřené menu nesmí být fokusovatelné klávesnicí */
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-menu.open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-cta { margin-top: 1rem; width: 100%; }
}

/* Přepínač jazyka na úzkém mobilu: vedle jména se čtyři vlaječky a kód aktuálního jazyka vejdou od 400 px.
   Do 399 px jsou vidět jen vlaječky a aktuální jazyk značí podtržení. Do 359 px se navíc skryje jméno
   vedle fotky v logu (čtečkám zůstává, odkaz má aria-label). Vše se skrývá jen vizuálně. */
@media (max-width: 439px) {
  .lang-switch > * { padding: .6rem .5rem; }
}
@media (max-width: 399px) {
  .lang-switch > * { padding: .6rem .45rem; }
  .lang-switch .lang-current .lang-code { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lang-switch .lang-current::after { content: ""; position: absolute; left: .45rem; right: .45rem; bottom: .2rem; height: 2px; background: var(--accent); border-radius: 2px; }
}
@media (max-width: 359px) {
  .lang-switch > * { padding: .6rem .42rem; }
  .lang-switch .lang-current::after { left: .42rem; right: .42rem; }
  .site-header .brand-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .cards-grid, .testimonials { grid-template-columns: 1fr; }
  .expertise, .credentials, .proof-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: .15rem; }
  .tl-period { grid-row: auto; }
  .form-two { grid-template-columns: 1fr; }
  .contact-form .btn { width: 100%; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
}

/* ============================================================
   Dark mode — respektuje systémové nastavení uživatele
   (@media prefers-color-scheme: dark). Přebarvuje hlavně přes
   proměnné; níže jen pár míst s napevno zadanými světlými barvami.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #12171f;   /* základ + karty */
    --bg-alt:      #0d1117;   /* tmavší pruhy sekcí, aby karty „vystoupily" */
    --ink:         #eceef2;
    --ink-soft:    #b3bcc9;
    --ink-faint:   #8b95a4;
    --line:        #2b3340;
    --line-strong: #636e7b;
    --accent:      #7d9bff;   /* světlejší modrá pro čitelnost odkazů na tmavém pozadí */
    --accent-strong:#a7bbff;
    --accent-tint: #1b2338;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.55);
  }

  /* Průsvitná hlavička tmavá místo bílé */
  .site-header { background: rgba(18,23,31,.82); }

  /* Karty mírně vyzdvižené nad pozadí (jinak by v ne-alt sekcích splynuly se stránkou) */
  .exp-card, .cert-card, .service-card, .price-card,
  .proof-item, .faq-item, .slot, .testimonial { background: #1a212d; }

  /* Logo-značka: světlý čtvereček s tmavým písmenem (v patičce zůstává bílá – vyšší specificita) */
  .brand-mark { color: var(--bg); }

  /* Tělo textu (ve světlém režimu napevno #2c313c) */
  .about-body p, .cred-item, .proof-item p, .platforms li,
  .contact-meta li, .legal p, .legal li { color: #ccd3dd; }

  /* Formulářová pole tmavá */
  .contact-form input, .contact-form textarea, .contact-form select { background: #0e131a; }

  /* Tlačítka: sytá modrá s bílým textem (světlý akcent má na výplni nízký kontrast) */
  .btn-primary { background: #3a5bd9; color: #fff; }
  .btn-primary:hover { background: #2f4bc0; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
  .btn-outline { border-color: rgba(125,155,255,.4); }
  .btn-outline:hover { background: #3a5bd9; border-color: #3a5bd9; color: #fff; }

  /* Skip-link čitelný i v dark */
  .skip-link { background: var(--accent); color: #0f141c; }

  /* Jemnější hover ohraničení karet */
  .service-card:hover, .cert-card:hover { border-color: var(--line-strong); }

  /* Stavové hlášky formuláře — tlumené tmavé varianty */
  .form-status.ok  { background: #113524; color: #7ee0a6; }
  .form-status.err { background: #3a1615; color: #ff9b93; }
}

/* ==========================================================================
   Souhlasová lišta Cookiebot: pod 1280 px ji přilepíme ke spodní hraně.
   Od 1280 px ji Cookiebot sám dělá jako plný spodní pruh, pod touto hranicí
   ji centruje doprostřed okna (karta 900 px, na mobilu 359 px) a překryje tím
   hlavičku i headline. Výšku to nemění, jen pozici. Vyšší specifičnost
   (html body #id.trida) je nutná, protože Cookiebot vkládá vlastní styly
   s !important až za náš soubor. Při změně vzhledu lišty zkontrolovat,
   jestli třída CybotEdge a hranice 1280 px pořád platí.
   ========================================================================== */
@media (max-width: 1279px) {
  html body #CybotCookiebotDialog.CybotEdge {
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    max-height: 78vh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}