<!-- start Simple Custom CSS and JS -->
<style type="text/css">
html {
  scroll-behavior: smooth;
}

@font-face{
  font-family:'Inter';
  src:url('/wp-content/uploads/fonts/inter/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --et-body-font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Segoe UI Symbol';
  --et-header-font:var(--et-body-font);
}


/* ====== ZÁKLADNÍ TEXT ====== */
body {
  font-family: var(--et-body-font) !important;
  font-size: 16px;         /* základní velikost textu */
  line-height: 1.6;        /* řádkování */
  color: #111827;          /* tmavě šedý text, ne čistě černý */
  background-color: #fff;  /* čisté pozadí */
}

/* ====== NADPISY ====== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--et-header-font) !important;
  font-weight: 700;       /* tučné */
  line-height: 1.25;      /* kompaktnější než u běžného textu */
  color: #11295a;         /* tmavě modrá */
  margin-top: 0;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 55px;
  font-weight: 800;   /* ExtraBold pro hlavní claim */
  line-height: 1.15;
  letter-spacing: -2; 
}

h2 {
  font-size: 32px;
  font-weight: 700;   /* Bold – druhá úroveň */
  line-height: 1.3;
}

h3 {
  font-size: 24px;
  font-weight: 600;   /* SemiBold – opticky slabší než H2 */
  line-height: 1.35;
}

h4 {
  font-size: 20px;
  font-weight: 600;   /* SemiBold, menší podnadpis */
}

h5 {
  font-size: 18px;
  font-weight: 500;   /* Medium */
}

h6 {
  font-size: 16px;
  font-weight: 500;   /* Medium, skoro jako body text */
}

/* ====== Zvýraznění slov v nadpisech ====== */
h1 span.highlight,
h2 span.highlight, 
h3 span.highlight {
  color: #ffcc00;
  font-weight: 800;   /* žlutá */
}

h1 


/* Zarovnání nadpisů */
/* 1) řádky v H1–H3 jako bloky */
h1 span, h2 span, h3 span {
  display: inline-block;
  width: 100%;
}

/* 2) zarovnání podle třídy */
h1 .left,  h2 .left,  h3 .left  { text-align: left; }
h1 .center,h2 .center,h3 .center{ text-align: center; }
h1 .right, h2 .right, h3 .right { text-align: right; }

/* 3) žluté zvýraznění jen když je třída .highlight */
h1 span.highlight, h2 span.highlight, h3 span.highlight {
  color: #ffcc00;
  font-weight: 800;
}

/* ====== ODSTAVCE ====== */
p {
  margin-bottom: 1.2em;
  color: #374151;   /* světlejší šedá pro lepší čitelnost */
}

/* ====== TLAČÍTKA ====== */
.et_pb_button, .btn, button, input[type="submit"] {
  font-family: inherit;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 18px;
  background: #1d4ed8;  /* základní modrá (varianta 1 z ukázky) */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.et_pb_button:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
  background: #153ea8;   /* tmavší modrá na hover */
}

/* Outline varianta tlačítka */
.btn.outline {
  background: transparent;
  color: #1d4ed8;
  border: 2px solid #1d4ed8;
}

.btn.outline:hover {
  background: #1d4ed8;
  color: #fff;
}

/* ====== DOPLŇKOVÉ TEXTY ====== */
.muted {
  color: #6b7280;  /* šedá pro doplňkový text */
  font-size: 14px;
}


/* ====== IKONKY ========= */

.et-pb-icon {
  font-family: 'ETmodules' !important;
  margin-right: 6px;
  color: #ffcc00;
  font-size: 24px;
}


/* obecné nastavení pro ikony */
.et-pb-icon {
  font-family: 'ETmodules' !important;
  font-size: 24px;        /* cca o 20 % větší než text */
  line-height: 1;
  margin-right: 8px;
  color: #ffcc00;
  vertical-align: middle;  /* aby se pěkně srovnala s textem */
}

/* obal pro kontakt */
.contact {
  font-family: var(--et-body-font);
  font-size: 24px;
  font-weight: 600;   /* SemiBold – opticky slabší než H2 */
  line-height: 1.35
  color: #11295a;
  margin: 0.3em 0;
  display: flex;           /* ikona + text v jedné řádce */
  align-items: center;     /* vertikální zarovnání */
}

.contact a {
  color: inherit;          /* tel číslo má stejnou barvu jako text */
  text-decoration: none;   /* bez podtržení */
}

.contact a:hover {
  text-decoration: underline;
}

/* SUBTITLE pod H1 */

.subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: #374151;
  font-weight: 400;

}
.subtitle span {
  /* color: #ffcc00; */
  font-weight: 700;
}

.subtitle .white {
  color: #eee;	
}

.target-audience {
  display: block;
  font-size: inherit;      /* 16px (z body) */
  line-height: 1.6;        /* jako body */
  color: #374151;          /* jako p */
  font-weight: 500;
  margin: 0 0 0.8em 0;     /* jemné odsazení nad .subtitle */
  padding-left: 12px;      /* místo pro border highlight */
  border-left: 2px solid #ffcc00; /* vizuální orientační akcent */
}

/* Volitelně – varianta na tmavém/kontrastním pozadí (hero overlay apod.) */
.on-dark .target-audience {
  color: #eee;
  border-left-color: #ffcc00;
}


.service-list {
  list-style: disc;    /* nebo circle, nebo none pokud chceš vlastní ikonky */
  margin-left: 1.2em;  /* odsazení od textu */
  padding: 0;
  color: #334155;
}

.service-list li {
  margin-bottom: 0.6em;
}


/* Krokové označení pro target-audience s číslem vlevo od pruhu */
.target-audience[class*="step-"] {
  position: relative;
 /* padding-left: 8px;           /* posun textu za pruh */ 
  border-left: 2px solid #ffcc00;  /* zůstává tvůj pruh */
}

.target-audience[class*="step-"]::before {
  content: "";                  /* číslo dodáme níže */
  position: absolute;
  left: -22px;                  /* číslo vlevo od pruhu */
  top: -5px;
  font-weight: 500;
  color: #ffcc00;
  font-size: 24px;
  line-height: 1.6;
  filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0.5));
}

/* Individuální číslování */
.target-audience.step-1::before { content: "1"; }
.target-audience.step-2::before { content: "2"; }
.target-audience.step-3::before { content: "3"; }
.target-audience.step-4::before { content: "4"; }


/* Základní styl pro všechny ikony */
.icon {
  position: absolute;
  margin: 20px 0px 0px 0px;
  width: 42px;
  height: 42px;
  display: inline-block;
  stroke: currentColor;   /* barvu zdědí z textu/parenta */
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Varianty velikostí (volitelně) */
.icon-sm { width: 20px; height: 20px; }
.icon-lg { width: 36px; height: 36px; }
.icon-xl { width: 48px; height: 48px; }

/* Doporučené barevné použití */
.text-primary { color: #11295a; }   /* tvoje tmavá modrá */

.text-accent  {
 color: #ffcc00;
 stroke: currentColor;              /* vykreslení kontury */
 filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1.0))
		 drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}
 }   /* žlutý akcent */

.text-slate   { color: #334155; }


/* ===========================
   HERO VIDEO – GLOBAL STYL
   =========================== */

.hero-video{
  position:relative;
  min-height:64vh;           /* výška hero sekce */
  display:flex;
  align-items:center;        /* vertikální střed textů */
  justify-content:center;    /* horizontální střed */
  text-align:center;
  padding-top:8vh;           /* odsazení od horního menu */
  padding-bottom:8vh;
  overflow:hidden;
}

/* --- VIDEO BACKGROUND OVLÁDÁNÍ --- */
/* Divi background video kontejnery */
.hero-video .et_pb_section_video_bg,
.hero-video .et_pb_section_video_bg video,
.hero-video video{
  position:absolute;
  inset:0;                   /* nahoře, vlevo, vpravo, dole 0 */
  width:100%;
  height:100%;
}

/* Video: vždy přesně na střed, ořez rovnoměrně zeshora & zespoda */
.hero-video .et_pb_section_video_bg video,
.hero-video video{
  object-fit:cover !important;      /* žádné pruhy, vždy vyplní */
  object-position:50% 50% !important;/* přesný střed, žádné posuny */
  transform:scale(1.08);            /* jemný overscale – luxusní efekt */
  transform-origin:50% 50%;
  z-index:0;
}

/* --- TMAVÝ OVERLAY PRO ČITELNOST TEXTU --- */
.hero-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.55) 100%
    );
  pointer-events:none;
  z-index:1;
}

/* Textový obsah (moduly) nad overlayem/videem */
.hero-video .et_pb_text{
  position:relative;
  z-index:2;
}

/* ===========================
   HERO TEXTY – H1 + MOTTO
   =========================== */

.hero-title{
  font-weight:800;
  font-size:clamp(32px,4vw,56px);
  line-height:1.15;
  margin:0 0 0.45em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 4px 12px rgba(0,0,0,0.45);
  display:inline-block;   /* celý H1 lze zarovnat na střed */
  text-align:left;        /* základ je vlevo */
  line-height:1.2;
}

.hero-title .accent{
  color:#FFC400;  /* firemní žlutá */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.35);
}



/* Prvky s .center zarovnáme opticky doprava */
.hero-title .right{
  display:inline-block;
  text-align:right;
  width:100%;             /* roztáhne text přes šířku H1 */
}

.motto{
  font-size:clamp(18px,2vw,22px);
  font-weight:600;
  color:#fff;
  /*margin:-.2em 0 0;*/
  margin: 2em 0 0;	
  opacity:.95;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
  text-align: center;
}

.motto .accent{
  color:#FFC400;
}

/* ===========================
   MOBILNÍ ÚPRAVY
   =========================== */
@media (max-width:980px){
  .hero-video{
    min-height:60vh;
    padding-top:12vh;
  }
  .hero-title{ font-size:clamp(26px,6vw,36px); }
  .motto{ font-size:clamp(15px,4vw,18px); }
}

/* Boxík */
.boxik {
  background: #ffffff;
  border-radius: 10px;
  border-width: 1px;
  border-color: rgba(0,0,0,0.08);
  border-style: solid;
  overflow: hidden;
  /* padding: 24px;*/
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.08);  /* deep stín */
  transition: box-shadow 0.35s ease-out, transform 0.35s ease-out !important;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.boxik:hover {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.12);
  transform: scale(1.02);
}

/* H3 v boxíku */
.boxik h3 {
  margin: 20px;        /* rozestup pod nadpisem */
}

/* p v boxiku */
.boxik p {
  margin: 0 20px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;     /* počet viditelných řádků */
  overflow: hidden;
  flex: 0 0 auto;              /* vypne růst uvnitř flex/grid rodiče */
  min-height: calc(1.6em * 4);               /* umožní se smrsknout */  
  max-height: calc(1.6em * 4); /* „hard cap“ i kdyby clamp selhal */
  word-break: break-word;      /* kdyby byla dlouhá URL/slova */
}

/* Tlačítko (CTA) v boxíku */
.cta {
  display: inline-block;
  margin: 20px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid #1a3f6f;   /* hlavní barva */
  color: #1a3f6f;
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cta:hover {
  background-color: #1a3f6f;
  color: #ffffff;
}

/* CTA button – white variant for dark hero */
.cta.white {
  background: #ffffff;
  color: #1a3f6f;              /* stejné modré jako u outline */
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.cta.white:hover {
  background: #f1f5f9;         /* jemně šedé na hoveru, ne syrově šedé */
  color: #1a3f6f;              /* barva textu zůstává nebo mírně ztmavit (#0f254e) */
}

.compatibility-tags {
    display: flex; /* Použijeme Flexbox */
    flex-wrap: wrap; /* Zakáže zalamování řádků */
    align-items: center; /* Zarovná obsah vertikálně na střed */
	line-height: 2; /* Zvětší řádkování */
	row-gap: 10px;
}

.compatibility-tag {
    display: inline-flex; /* Inline-blokový prvek pro tagy */
    align-items: center; /* Ikony a text zarovná na střed */
    background-color: #11295a; /* Barva pozadí */
    color: #fff; /* Barva textu */
    padding: 5px 10px; /* Vnitřní odsazení */
    margin-right: 10px; /* Mezera mezi tagy */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Velikost textu */
    font-weight: bold;
    text-transform: uppercase; /* Velká písmena */
    white-space: nowrap; /* Zabrání zalamování uvnitř tagu */
	
}

.compatibility-tag i {
    margin-right: 5px; /* Mezera mezi ikonou a textem */
}

.compatibility-tag:hover {
    background-color: #005bb5; /* Tmavší pozadí při hover efektu */
    color: #e5e5e5; /* Světlejší text při hover efektu */
}

.ecosystem-headline {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 1280px;
  color: #111111;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
</style>
<!-- end Simple Custom CSS and JS -->
