/*
Theme Name:  Spictral
Theme URI:   https://spictral.com
Author:      Spictral
Description: Jednostránkové firemní téma pro cyber-security & privacy poradenství. Bootstrap 5 + Font Awesome 6. Odvozeno ze šablony Efektivní Údržba.
Version:     1.1.0
License:     GNU General Public License v2 or later
Text Domain: spictral
*/

/* ============================================================
   Custom styles – Spictral (světlý design)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  --topbar-h: 38px;
  --nav-h: 130px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));
  --blue:  #0ea5e9;
  --blue3: #38bdf8;
  --green: #22c55e;
  --green2: #16a34a;
  --green3: #4ade80;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  /* Světlý design: bg-dark/bg-dark2/text/muted/border si ponechávají stejné
     názvy jako v původním tmavém tématu (aby nebylo nutné přepisovat každý
     selektor), jen mají nyní světlé hodnoty. */
  --bg-dark:  #ffffff;
  --bg-dark2: #f2f6fb;
  --text:  #0d1b2e;
  --muted: #55697e;
  --border: rgba(13,27,46,0.10);
  --shadow: 0 10px 30px rgba(13,27,46,0.08);
}

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

section[id] { scroll-margin-top: var(--header-h); }

/* ── Topbar ───────────────────────────────────────────────── */
.site-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  height: var(--topbar-h);
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 4%;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.topbar-link i { color: var(--blue); font-size: 0.72rem; }
.topbar-link:hover { color: var(--text); }

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.lang-btn .fi { width: 1.4em; height: 1em; border-radius: 2px; }
.lang-btn .lang-label { display: none; white-space: nowrap; }
.lang-btn:hover .lang-label { display: inline; }
.lang-btn:hover { color: var(--text); background: rgba(14,165,233,0.08); }
.lang-btn.active { color: var(--text); }

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 1030;
  height: var(--nav-h);
  overflow: hidden;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-logo,
.nav-logo .custom-logo-link,
a.nav-logo {
  display: flex !important;
  align-items: center !important;
  height: 110px !important;
  overflow: hidden;
  line-height: 0;
}

.nav-logo img,
.nav-logo .custom-logo-link img,
.nav-logo .custom-logo,
img.custom-logo {
  height: 110px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 110px !important;
  mix-blend-mode: normal;
}

.nav-link {
  color: var(--muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4rem 0.6rem !important;
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link.active { color: var(--blue) !important; }

.nav-cta.nav-link {
  background: var(--green) !important;
  color: #fff !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 3px;
  font-weight: 700 !important;
}
.nav-cta.nav-link:hover { background: var(--green2) !important; }

/* WordPress menu compatibility */
#navLinks { list-style: none; margin: 0; padding: 0; }
#navLinks > li { display: inline-block; }
#navLinks > li > a { color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; padding: 0.4rem 0.6rem; text-decoration: none; transition: color 0.2s; }
#navLinks > li > a:hover,
#navLinks > li.current-menu-item > a { color: var(--blue); }
#navLinks > li.menu-cta > a { background: var(--green); color: #fff !important; padding: 0.5rem 1.2rem; border-radius: 3px; font-weight: 700; }
#navLinks > li.menu-cta > a:hover { background: var(--green2); }

.navbar-toggler { border: none; padding: 4px; }
.navbar-toggler span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; }
.navbar-toggler:focus { box-shadow: none; }

/* ── Section base ─────────────────────────────────────────── */
section { padding: 100px 5%; }

.section-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgba(14,165,233,0.35);
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--text);
}

.section-subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 620px;
  line-height: 1.72;
  margin-bottom: 3rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary-custom {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary-custom:hover { background: var(--green2); transform: translateY(-2px); color: #fff; }

.btn-secondary-custom {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid rgba(56,189,248,0.5);
  color: var(--blue3);
  transition: background 0.2s, transform 0.15s;
}
.btn-secondary-custom:hover { background: rgba(56,189,248,0.1); transform: translateY(-2px); color: var(--blue3); }

/* ── Hero (zůstává tmavá fotografická sekce se scrimem, i v rámci
   celkově světlého webu – kvůli čitelnosti bílého textu na fotce) ─── */
#uvod {
  min-height: 100vh;
  padding-top: var(--header-h);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Jednotlivé snímky slideru – prolínají se přes sebe (crossfade). */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: saturate(0.9) brightness(0.85);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg.is-active { opacity: 1; }
/* Bez JS / jen jeden snímek: první (jediný) .hero-bg musí být vidět rovnou. */
.hero-bg:first-child { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,15,26,0.82) 35%, rgba(10,15,26,0.35) 68%, rgba(10,15,26,0.0) 100%);
}

.hero-content { position: relative; z-index: 1; max-width: 660px; padding: 5rem 5%; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green3);
  margin-bottom: 1.8rem;
}
.hero-badge::before { content: ''; display: inline-block; width: 2.2rem; height: 2px; background: var(--green); border-radius: 2px; }

.hero-headline { font-family: var(--font-head); font-size: clamp(2.6rem,5.5vw,4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 1.3rem; color: #fff; }
.hero-headline em { font-style: normal; color: var(--blue3); }

/* ── Hero – rotující nadpisy ─────────────────────────────── */
/* Bez JS: zobrazí se jen první varianta, ostatní skryté (žádné mezery). */
.hero-rotator .hero-rot-item { display: none; }
.hero-rotator .hero-rot-item.is-active { display: block; }
/* S JS (třída is-stacked): varianty se skládají přes sebe a plynule přechází. */
.hero-rotator.is-stacked { position: relative; }
.hero-rotator.is-stacked .hero-rot-item {
  display: block;
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.hero-rotator.is-stacked .hero-rot-item.is-active {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator.is-stacked .hero-rot-item { transition: none; }
  .hero-bg { transition: none; }
}

/* ── WYSIWYG (TinyMCE) obsah – zruš krajní <p> mezery, ať sedí spacing ── */
.section-subtitle > p:first-child,
.prinos-text > p:first-child,
.sluzba-desc > p:first-child,
.step-text > p:first-child { margin-top: 0; }
.section-subtitle > p:last-child,
.prinos-text > p:last-child,
.sluzba-desc > p:last-child,
.step-text > p:last-child { margin-bottom: 0; }

.hero-sub { color: #b0c4d8; font-size: 1.1rem; line-height: 1.72; margin-bottom: 2.5rem; max-width: 560px; }

.hero-kpi-bar { display: flex; gap: 2.5rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.hero-kpi strong { display: block; font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: var(--green3); line-height: 1; }
.hero-kpi span { font-size: 0.78rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Prinosy ──────────────────────────────────────────────── */
#prinosy { background: var(--bg-dark2); }

.prinos-item { background: var(--bg-dark); border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 6px; padding: 2.2rem 2rem; box-shadow: var(--shadow); transition: transform 0.2s,box-shadow 0.2s; height: 100%; }
.prinos-item:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14,165,233,0.16); }
.prinos-icon { font-size: 2rem; margin-bottom: 1rem; display: block; color: var(--blue); }
.prinos-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--text); }
.prinos-text { font-size: 0.9rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* ── Sluzby ───────────────────────────────────────────────── */
#sluzby { background: var(--bg-dark); }

.sluzba-card { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; box-shadow: var(--shadow); transition: border-color 0.2s,transform 0.2s; position: relative; overflow: hidden; height: 100%; }
.sluzba-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--blue),var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.sluzba-card:hover { border-color: rgba(14,165,233,0.4); transform: translateY(-3px); }
.sluzba-card:hover::before { transform: scaleX(1); }
.sluzba-num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: rgba(14,165,233,0.20); line-height: 1; margin-bottom: 0.4rem; }
.sluzba-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.sluzba-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Spoluprace ───────────────────────────────────────────── */
#spoluprace { background: var(--bg-dark2); }

.proces-step { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; box-shadow: var(--shadow); height: 100%; }
.step-num { width: 3rem; height: 3rem; background: linear-gradient(135deg,var(--blue),var(--green)); color: #fff; font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 3px; margin-bottom: 1.2rem; flex-shrink: 0; }
.step-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.step-text { font-size: 0.88rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* ── Vysledky ─────────────────────────────────────────────── */
#vysledky { background: var(--bg-dark); }

.kpi-card { background: var(--bg-dark2); border: 1px solid var(--border); border-radius: 6px; padding: 1.8rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.kpi-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--blue),var(--green)); }
.kpi-value { font-family: var(--font-head); font-size: 3rem; font-weight: 800; color: var(--green2); line-height: 1; margin-bottom: 0.4rem; }
.kpi-label { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }

.duvody-list { list-style: none; padding: 0; margin: 0; }
.duvody-list li { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.duvody-list li .arrow-icon { color: var(--green2); flex-shrink: 0; margin-top: 2px; }
.duvody-list strong { color: var(--text); display: block; margin-bottom: 0.2rem; font-weight: 600; }
.duvody-list span { color: var(--muted); font-size: 0.87rem; }

/* ── Reference ────────────────────────────────────────────── */
#reference { background: var(--bg-dark2); }

.obor-tag { border: 1px solid var(--border); padding: 0.6rem 1.4rem; font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-radius: 4px; background: var(--bg-dark); transition: all 0.2s; display: inline-block; }
.obor-tag:hover { border-color: var(--green); color: var(--green2); }

/* ── O nas ────────────────────────────────────────────────── */
#o-nas { background: var(--bg-dark); }

.stat-box { border-left: 4px solid var(--green); padding: 1rem 1.2rem; border-radius: 0 6px 6px 0; }
.stat-num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }

/* ── Kontakt ──────────────────────────────────────────────── */
#kontakt { background: var(--bg-dark2); text-align: center; position: relative; overflow: hidden; }
#kontakt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%,rgba(34,197,94,0.06) 0%,rgba(14,165,233,0.05) 50%,transparent 70%); }
#kontakt .section-tag { color: var(--green2); border-color: rgba(74,222,128,0.4); }
#kontakt .section-title { color: var(--text); font-size: clamp(2rem,5vw,3.5rem); }
#kontakt .section-subtitle { color: var(--muted); margin: 0 auto 2.5rem; }

/* ── Kontakt foto ─────────────────────────────────────────── */
.kontakt-inner {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: nowrap;
  text-align: left;
}
.kontakt-text { flex: 1; min-width: 280px; }
.kontakt-text .section-title,
.kontakt-text .section-tag { text-align: left; }

.kontakt-photo { flex: 0 0 150px; width: 150px; max-width: 150px; text-align: center; overflow: hidden; }
.kontakt-photo img {
  width: 150px !important;
  height: 180px !important;
  max-width: 150px !important;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 2px solid rgba(14,165,233,0.25);
  background: #fff;
  display: block;
  margin: 0 auto 0.7rem;
}
.kontakt-photo-caption { line-height: 1.4; }
.kontakt-photo-caption strong { display: block; color: var(--text); font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; }
.kontakt-photo-caption span { font-size: 0.76rem; color: var(--muted); }

@media (max-width: 768px) {
  .kontakt-inner { flex-direction: column; gap: 2rem; align-items: center; }
  .kontakt-text .section-title,
  .kontakt-text .section-tag,
  .kontakt-text .section-subtitle { text-align: center; }
  .kontakt-text .d-flex { justify-content: center; }
}

/* ── Clanky ───────────────────────────────────────────────── */
#clanky { background: var(--bg-dark2); }

.clanek-card { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s,box-shadow 0.2s; height: 100%; }
.clanek-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(14,165,233,0.16); }
.clanek-img { height: 140px; background: linear-gradient(135deg,#eaf2fb,#eef7f1); display: flex; align-items: center; justify-content: center; font-size: 3rem; border-bottom: 1px solid var(--border); color: var(--blue); overflow: hidden; }
.clanek-img img { width: 100%; height: 100%; object-fit: cover; }
.clanek-body { padding: 1.5rem; }
.clanek-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green2); margin-bottom: 0.6rem; display: block; }
.clanek-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.6rem; color: var(--text); }
.clanek-perex { font-size: 0.87rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.clanek-link { font-size: 0.82rem; font-weight: 700; color: var(--blue); text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; }
.clanek-link:hover { color: var(--green2); }

.clanky-all-wrap { margin-top: 2.5rem; text-align: center; }

.clanky-note { margin-top: 3rem; padding: 1.5rem 2rem; border: 1px dashed rgba(14,165,233,0.3); border-radius: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.65; display: flex; align-items: flex-start; gap: 1rem; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); border-top: 1px solid var(--border); padding: 3rem 5%; }
.footer-logo {
  display: block;
  line-height: 0;
  margin-bottom: 1rem;
  height: 90px;
  overflow: hidden;
}

.footer-logo .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 90px !important;
  line-height: 0;
}

.footer-logo img,
.footer-logo .custom-logo-link img,
.footer-logo .custom-logo {
  height: 90px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 90px !important;
  mix-blend-mode: normal;
}
.footer-tagline { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.site-footer h4 { font-family: var(--font-head); font-size: 0.83rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.5rem; }
.site-footer ul li a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.site-footer ul li a:hover { color: var(--green2); }

.footer-bottom { background: var(--bg-dark2); padding: 1rem 5%; text-align: center; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); }

/* ── Single article ──────────────────────────────────────── */
.single-article {
  background: var(--bg-dark);
  min-height: 100vh;
  padding: calc(var(--topbar-h) + var(--nav-h) + 3rem) 5% 5rem;
}
.single-article-inner { max-width: 820px; margin: 0 auto; }

.single-breadcrumb { margin-bottom: 2rem; }
.single-breadcrumb a { color: var(--blue); text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.single-breadcrumb a:hover { color: var(--green2); }

.single-title { font-family: var(--font-head); font-size: clamp(1.8rem,4vw,3rem); font-weight: 800; line-height: 1.12; color: var(--text); margin-bottom: 1rem; }

.single-meta { display: flex; gap: 1.5rem; color: var(--muted); font-size: 0.85rem; margin-bottom: 2rem; flex-wrap: wrap; }
.single-meta i { color: var(--blue); }

.single-thumbnail { border-radius: 6px; overflow: hidden; margin-bottom: 2.5rem; border: 1px solid var(--border); }
.single-thumbnail img { width: 100%; height: auto; display: block; }

.single-content { color: var(--text); font-size: 1.05rem; line-height: 1.8; }
.single-content h2,.single-content h3,.single-content h4 { font-family: var(--font-head); color: var(--text); margin: 2rem 0 0.8rem; }
.single-content p { margin-bottom: 1.2rem; }
.single-content a { color: var(--blue); }
.single-content a:hover { color: var(--green2); }
.single-content ul,.single-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.single-content li { margin-bottom: 0.4rem; }
.single-content img { max-width: 100%; border-radius: 4px; }
.single-content blockquote { border-left: 3px solid var(--blue); padding-left: 1.2rem; color: var(--muted); margin: 1.5rem 0; font-style: italic; }

/* ── Fade-in animation ────────────────────────────────────── */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1.1s ease,transform 1.1s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Utility ──────────────────────────────────────────────── */
.text-blue { color: var(--blue); }

/* ── Popup modal – Konzultace ─────────────────────────────── */
.eu-modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(13,27,46,0.25);
  position: relative;
  color: var(--text);
}
.eu-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(14,165,233,0.08);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.eu-modal-close:hover { background: rgba(14,165,233,0.18); }
.eu-modal-body { padding: 2rem 2rem 1.5rem; }
.eu-modal-header-block { text-align: center; margin-bottom: 1.5rem; }
.eu-modal-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg,var(--blue),#0369a1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.4rem; color: #fff;
}
.eu-modal-title { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.eu-modal-subtitle { color: var(--muted); font-size: 0.95rem; margin: 0; }
.eu-modal-form { margin-bottom: 1rem; }
/* Formulářová pole */
.eu-modal-form label { display: block; font-size: 0.83rem; color: var(--muted); margin-bottom: 0.3rem; }
.eu-input {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}
.eu-input:focus { outline: none; border-color: var(--blue); }
.eu-input::placeholder { color: var(--muted); }
select.eu-input option { background: #fff; color: var(--text); }
textarea.eu-input { resize: vertical; min-height: 80px; }
.eu-form-submit {
  width: 100%;
  background: linear-gradient(135deg,var(--blue),#0369a1);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 0.5rem;
}
.eu-form-submit:hover { opacity: 0.85; }
.eu-form-ok  { color: var(--green2); text-align: center; padding: 1rem 0; font-size: 1rem; }
.eu-form-err { color: #dc2626;       text-align: center; padding: 0.5rem 0; font-size: 0.9rem; }
.eu-modal-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.eu-modal-trust span { font-size: 0.82rem; color: var(--muted); }
.eu-modal-trust span i { color: var(--green2); margin-right: 0.35rem; }
@media (max-width: 576px) {
  .eu-modal-body { padding: 1.5rem 1rem 1rem; }
  .eu-modal-title { font-size: 1.3rem; }
  .eu-modal-trust { gap: 0.6rem; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) { .nav-link { font-size: 0.73rem; } }

@media (max-width: 900px) {
  .hero-kpi-bar { gap: 1.5rem; }
  .topbar-contact { display: none; }
  .topbar-inner { justify-content: flex-end; }
}

@media (max-width: 600px) { .hero-kpi-bar { gap: 1.2rem; } }