:root {

  --primary: #4DA07A;

  --dark: #0b0f14;

  --white: #ffffff;

  --container: 1200px;

}



/* reset */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {

  font-family: system-ui, sans-serif;

  background: #f5f6fa;

}



/* layout */

.container {

  max-width: var(--container);

  margin: 0 auto;

  padding: 0 20px;

}



/* header over hero */

.site-header {

  position: absolute;

  height: 72px;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 100;

  background: linear-gradient(

    rgba(0,0,0,0.35),

    rgba(0,0,0,0)

  );

  transition: background 250ms ease, box-shadow 250ms ease;

}



.site-header.is-scrolled {

  position: fixed;

  background: #ffffff;

  box-shadow: 0 8px 24px rgba(0,0,0,0.12);

}



.site-header.is-scrolled .nav-menu a,

.site-header.is-scrolled .brand {

  color: #0b0f14;

}



.header-inner {

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 32px;

}





/* BRAND WRAPPER */

.brand{

  position: relative;

  display: flex;

  align-items: center; /* tohle zabrání “nalepení” */

}



/* OBA LOGA */

.brand .logo{

  height: 68px;       /* teď už může být normální */

  width: auto;

  display: block;

  transition: opacity 200ms ease;

}



/* MOBILE - menší logo */

@media (max-width: 900px) {

  .brand .logo {

    height: 48px;

  }

  

  .header-inner {

    padding: 8px 16px;  /* menší padding na mobilu */

  }

  

  .site-header.is-scrolled .brand {

    padding-top: 12px;  /* menší padding po scrollu */

  }

}



/* VÝCHOZÍ STAV = HERO (světlé logo) */

.logo--hero{ opacity: 1; }



.logo--default{

  opacity: 0;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}



/* PO SCROLLU */

.site-header.is-scrolled .logo--hero {

  opacity: 0;

}



.site-header.is-scrolled .logo--default {

  opacity: 1;

}



.site-header.is-scrolled .brand {

    padding-top: 18px;

}







.nav {

  display: flex;

  align-items: center;

  gap: 32px;

}





.nav-menu {

  display: flex;

  justify-content: center;

  list-style: none;

  gap: 32px;

  padding-top: 0px;

}



.nav-menu a {

  color: white;

  font-weight: 600;

  font-size: 18px;

  text-decoration: none;

}



.header-cta {

  display: inline-flex;          /* KLÍČ */

  align-items: center;           /* vertikálně */

  justify-content: center;       /* horizontálně */



  height: 44px;                  /* pevná výška = perfektní centrování */

  padding: 0 24px;               /* jen horizontální padding */

  background: var(--primary);

  color: #ffffff;

  border-radius: 999px;

  font-weight: 700;

  text-decoration: none;

}





.header-cta:hover {

  filter: brightness(1.05);

}







/* hero */

.hero {

  position: relative;

  min-height: 80vh;

  display: flex;

  align-items: center;

  color: white;

  text-align: center;

  overflow: hidden;

}



.hero-slides,

.hero-slide,

.hero-overlay {

  position: absolute;

  inset: 0;

}



.hero-content h1{

  font-size: clamp(32px, 6vw, 72px);  /* menší minimum pro mobil */

  font-weight: 800;

  line-height: 1.2;

}



.hero-content p{

  font-size: clamp(16px, 2vw, 24px);  /* menší minimum pro mobil */

  font-weight: 600;

  margin-top: 16px;

}









.hero-slide {

  background-size: cover;

  background-position: center;

  opacity: 0;

  transition: opacity 1.4s ease-in-out; /* delší = plynulejší */

  will-change: opacity;

}



.hero-slide.is-active { opacity: 1; }



.hero-overlay {

  background: rgba(0,0,0,0.55);

}



.hero-content {

  position: relative;

  z-index: 2;

  padding-top: 100px;

}



/* MOBILE HERO */

@media (max-width: 900px) {

  .hero {

    min-height: 70vh;  /* o trochu nižší na mobilu */

  }

  

  .hero-content {

    padding-top: 80px;

    padding-left: 20px;

    padding-right: 20px;

  }

  

  .hero-content h1 {

    font-size: 36px;  /* fixní velikost na mobilu */

  }

  

  .hero-content p {

    font-size: 16px;  /* fixní velikost na mobilu */

  }

}



.btn {

  display: inline-block;

  margin-top: 20px;

  background: var(--primary);

  color: #ffffff;

  padding: 12px 18px;

  border-radius: 12px;

  font-weight: 700;

}



.section {

  padding: 80px 0;

}



.section--alt {

  background: #ffffff;

}



.section h2 {

  font-size: 34px;

  margin-bottom: 12px;

}



.section p {

  color: rgba(0,0,0,0.65);

}



/* jen pro scroll test – “prázdná” výška */

.spacer {

  height: 260px;

}





/* SLUŽBY */

.services {

  padding: 100px 0;

  background: #f5f6fa;

}



.section-title {

  text-align: center;

  font-size: 42px;

  font-weight: 700;

  margin-bottom: 64px;

  color: #0b0f14;

}



/* GRID KARET */

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

}



/* MOBILE SERVICES */

@media (max-width: 900px) {

  .services-grid {

    grid-template-columns: 1fr;  /* 1 sloupec na mobilu */

    gap: 24px;

  }

  

  .services {

    padding: 60px 0;  /* menší padding */

  }

  

  .section-title {

    font-size: 32px;  /* menší nadpis */

    margin-bottom: 40px;

  }

}



/* KARTA SLUŽBY */

.service-card{

  background:#fff;

  border-radius:16px;

  box-shadow: 0 12px 32px rgba(0,0,0,0.08);

  transition: transform 200ms ease, box-shadow 200ms ease;



  padding:12px;          /* MALÝ OKRAJ */

  display:flex;

  flex-direction:column;

}





.service-card h3 {

  margin-bottom: 14px;

}



.service-content{

  padding:20px 10px 10px;

  text-align:center;

}



a.service-card,

a.service-card *,

a.service-card h3,

a.service-card p {

  text-decoration: none !important;

  color: inherit !important;

  -webkit-text-decoration: none !important;

}



a.service-card {

  display: block;

  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.2s;

}



a.service-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 32px rgba(0,0,0,0.12);

}



a.service-card:hover h3 {

  color: #4DA07A !important;

}



/* OBRAZEK V SERVICE CARD */

.service-image{

  width:100%;

  height:180px;

  overflow:hidden;

  border-radius:12px;

}



.service-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}







.service-card h3 {

  margin-bottom: 12px;

  font-size: 22px;

  font-weight: 700;

}



.service-card p {

  color: rgba(0,0,0,0.65);

  line-height: 1.6;

}



/* HOVER EFEKT */

.service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 48px rgba(0,0,0,0.12);

}



/* ABOUT US */

/* O NÁS */



.about {

  text-align: center;

}



.about-title {

  font-size: 36px;

  margin-bottom: 32px;

}



.about-text {

  max-width: 720px;     /* KLÍČ – užší text */

  margin: 0 auto;      /* vystředění */

}



.about-text p {

  font-size: 20px;

  line-height: 1.6;

  color: rgba(0,0,0,0.7);

}



/* O NÁS – BODY / PILÍŘE */

.about-points {

  margin-top: 58px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.about-point {

  background: #ffffff;

  padding: 20px 18px;

  border-radius: 12px;



  border: 2px solid #2A7D68; 

  

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  text-align: center;

  transition: border-color 200ms ease, transform 200ms ease;

}



.about-point:hover {

  border-color: #2A7D68;

  transform: translateY(-4px);

}





.about-point strong {

  display: block;

  margin-bottom: 6px;

  font-size: 16px;

  font-weight: 700;

  color: #0b0f14;

}



.about-point span {

  font-size: 15px;          /* o chlup větší */

  font-weight: 400;         /* KLÍČ – víc bold */

  color: rgba(0,0,0,0.85);  /* tmavší */

  line-height: 1.4;

}



/* MAPA – wrapper */

.about-map{ margin-top:56px; }



.cz-map{

  width:100%;

  max-width:600px;

  margin: 24px auto 0;

  overflow: visible;

}



.cz-map-svg{

  width:100%;

  height:auto;

  display:block;

  overflow: visible;

}



/* DEFAULT kraje (nepůsobíme) = bílé */

.cz-map-svg path{

  fill: #ffffff;

  stroke: #000000 !important;

  stroke-width: 2;

  transition: 200ms ease;

  cursor: default;           /* ❗ žádná ruka */

}

.cz-map-svg .str0,

.cz-map-svg .str1{

  stroke: #000000 !important;        /* ✅ */

  stroke-opacity: 1 !important;

}



/* hover jen pro NEaktivní kraje */

.cz-map-svg path:not(.cz-active):hover{

  fill: rgba(77,160,122,0.22);

  stroke: #000000;      /* ✅ pořád černá */

  filter: drop-shadow(0 0 8px rgba(77,160,122,0.35));

}



/* aktivní kraje = šrafování (jede podle SVG) */

.cz-map-svg .cz-active{

  fill: url(#rubikkonHatch) !important;

  stroke: #000000 !important;

  cursor: pointer;           /* ❗ ruka jen kde působíte */

}



/* hover pro aktivní kraje (jemně) */

.cz-map-svg .cz-active:hover{

  filter: drop-shadow(0 0 14px rgba(42,125,104,0.65));

}



/* VŠECHNY HRANICE – sjednotit natvrdo */

.cz-map-svg path,

.cz-map-svg .str0,

.cz-map-svg .str1{

  stroke: #000000 !important;

  stroke-opacity: 1 !important;

}



/* VNĚJŠÍ HRANICE STÁTU – ztenčit */

.cz-map-svg > path{

  stroke-width: 2 !important;   /* bylo ~10 */

}





/* MOBIL – mapa užší + hezky uprostřed */

@media (max-width: 600px){

  .cz-map{

    max-width: 360px;     /* zmenší mapu */

    width: 100%;

    padding: 0 14px;      /* boční odsazení, aby se nedotýkala okrajů */

    margin: 18px auto 0;

  }



  /* na mobilu jemnější čáry */

  .cz-map-svg path{

    stroke-width: 1.5 !important;

  }

}



/* extra malé telefony */

@media (max-width: 380px){

  .cz-map{ max-width: 320px; padding: 0 12px; }

}









/* REFERENCE */

/* REFERENCE */



.references { text-align: center; }



.ref-carousel{

  margin: 48px auto 0;

  overflow: hidden;          /* schová to, co “odjíždí” */

  max-width: 1100px;         /* můžeš nechat jen container */

}



.ref-track{

  display: flex;

  gap: 24px;

  will-change: transform;

}



/* 3 karty vedle sebe */

/* Desktop: vždy přesně 3 karty (a nikdy víc) */



.ref-card{

  flex: 0 0 calc((100% - 48px) / 3);  /* 3 karty + 2 mezery (2*24px) */

  max-width: calc((100% - 48px) / 3);



  background: #ffffff;

  padding: 28px;

  border-radius: 16px;

  border: 2px solid #2A7D68;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;

}





.ref-card:hover {

  transform: translateY(-4px);

  border-color: #2A7D68;

  box-shadow: 0 12px 32px rgba(0,0,0,0.08);

}



.ref-text{

  font-size: 16px;

  line-height: 1.6;

  color: rgba(0,0,0,0.80);

  margin-bottom: 18px;

}



.ref-author strong{

  display:block;

  color:#0b0f14;

  font-weight: 800;

}

.ref-author span{

  display:block;

  color: rgba(0,0,0,0.60);

  font-size: 14px;

}



@media (max-width: 900px){

  .ref-card{

    flex: 0 0 100%;

    max-width: 100%;

  }

}





/* =========================

   CONTACT

   ========================= */



.contact {

  background: #ffffff;

  padding: 80px 0 40px;

  text-align: center;

}



.contact-intro {

  max-width: 720px;

  margin: 0 auto 48px;

  font-size: 18px;

  color: rgba(0,0,0,0.7);

  line-height: 1.6;

}



/* FORM (zpátky uprostřed) */

.contact-form {

  max-width: 720px;

  margin: 0 auto 64px; /* prostor před pruhem */

}



/* Řádky ve formu */

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}



.contact-form input,

.contact-form textarea {

  width: 100%;

  padding: 14px 16px;

  font-size: 15px;

  border-radius: 10px;

  border: 2px solid rgba(0,0,0,0.15);

  font-family: inherit;

  transition: border-color 200ms ease, box-shadow 200ms ease;

  background: #fff;

}



.contact-form textarea {

  resize: vertical;

  margin-bottom: 24px;

}



.contact-form input:focus,

.contact-form textarea:focus {

  outline: none;

  border-color: #2A7D68;

  box-shadow: 0 0 0 3px rgba(42,125,104,0.15);

}



.hp { display: none !important; }



.contact-form .btn {

  padding: 14px 32px;

  font-size: 16px;

}



.form-status {

  margin-top: 16px;

  font-weight: 700;

}



.form-status.success { color: #2ecc71; }

.form-status.error { color: #e74c3c; }



/* KONTAKTNÍ PRUH POD FORMULÁŘEM */

.contact-strip{

  margin-top: 0;

  background: #0b0f14;

  color: #fff;

  padding: 22px 0;

}



.contact-strip-inner{

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr;

  gap: 18px;

  align-items: center;

}



.contact-pill{

  padding: 14px 16px;

  border-radius: 14px;

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.10);

  text-align: left;

}



.contact-label{

  display: block;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: rgba(255,255,255,0.65);

  margin-bottom: 6px;

  font-weight: 800;

}



.contact-value{

  display: block;

  font-size: 15px;

  font-weight: 700;

  color: #fff;

  text-decoration: none;

}



.contact-pill a.contact-value{

  color: #ffffff;

}



.contact-pill a.contact-value:hover{

  text-decoration: underline;

}



/* KONTAKTNÍ INFORMACE - SAMOSTATNÁ SEKCE POD FORMULÁŘEM */

.contact-info {

  background: #f5f6fa;

  padding: 60px 0 80px;

}



.contact-info-grid{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

  max-width: 1100px;

  margin: 0 auto;

  align-items: stretch;

}



.contact-info-box{

  background: #ffffff;

  padding: 26px 28px;

  border-radius: 12px;

  border: 2px solid #2A7D68;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);



  display: flex;

  flex-direction: column;   /* nadpis nahoře */

}



.contact-title{

  display: block;

  text-align: center;

  margin-bottom: 18px;

  font-size: 18px;

  font-weight: 700;

  color: #0b0f14;

}









.contact-info-box:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(0,0,0,0.10);

}



.contact-info-box strong {

  display: block;

  margin-bottom: 8px;

  font-size: 18px;

  font-weight: 700;

  color: #0b0f14;

}



.contact-info-box span {

  display: block;

  font-size: 15px;

  font-weight: 400;

  color: rgba(0,0,0,0.85);

  line-height: 1.6;

}



.contact-info-box a {

  color: var(--primary);

  font-weight: 700;

  text-decoration: none;

}



.contact-info-box a:hover {

  text-decoration: underline;

}



/* IKONY V KONTAKT BOXECH */



.contact-box-inner{

  display: flex;

  align-items: center;

  gap: 20px;

  width: 100%;



  flex: 1; /* vyplní zbytek boxu => obsah se chová stabilně */

}



.contact-icon{

  width: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



/* Text */

.contact-text{

  flex: 1;

  text-align: center;

}





.contact-text strong{

  display: block;

  text-align: center;

  margin-bottom: 16px;

  font-size: 18px;

  font-weight: 700;

}



.contact-text span{

  display: block;

  line-height: 1.6;

}





@media (max-width: 900px) {

  .contact-info-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }

  

  .contact-box-inner {

    flex-direction: column;  /* stack vertically na mobilu */

    text-align: center;

    gap: 12px;

  }

  

  .contact-text {

    text-align: center;

  }

  

  .contact-info {

    padding: 40px 0 60px;

  }

}





/* RESPONSIVE */

@media (max-width: 900px){

  .form-row { grid-template-columns: 1fr; }



  .contact-strip-inner{

    grid-template-columns: 1fr;

  }

}



















/* footer */

/* FOOTER */



.footer {

  background: #111;

  color: #fff;

  padding-top: 60px;

}



.footer-inner {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

  padding-bottom: 40px;

  align-items: start;

}







.footer-col--info { 

  justify-self: start; 

  text-align: left;

}



.footer-col--nav { 

  justify-self: center;   /* KLÍČ: sloupec do středu */

  text-align: center;

}



.footer-col--social { 

  justify-self: end; 

  text-align: right;

}







.footer-col--nav {

  text-align: center;

}





.footer-col h4 {

  margin-bottom: 16px;

  font-size: 18px;

}



.footer-col p {

  color: #ccc;

  line-height: 1.6;

}



.footer-col ul {

  list-style: none;

  padding: 0;

}



.footer-col li {

  margin-bottom: 8px;

}



.footer-col a {

  color: #ccc;

  text-decoration: none;

  transition: color 0.2s ease;

}



.footer-col a:hover {

  color: #38b48b; /* můžeš změnit na svou brand zelenou */

}



/* bottom copyright bar */



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.1);

  padding: 20px 0;

  text-align: center;

  background: #0d0d0d;

}



.footer-bottom small {

  color: #888;

}



/* responsive */



@media (max-width: 900px) {

  .footer-inner {

    grid-template-columns: 1fr;

    text-align: center;

  }

}







/* mobile */

.nav-toggle { 

  display: none;

  background: none;

  border: 2px solid white;

  color: white;

  font-size: 24px;

  width: 44px;

  height: 44px;

  border-radius: 8px;

  cursor: pointer;

  transition: all 200ms ease;

}



.site-header.is-scrolled .nav-toggle {

  border-color: #0b0f14;

  color: #0b0f14;

}



@media (max-width: 900px) {

  .nav-menu { 

    display: none;

    position: absolute;

    top: 72px;

    left: 0;

    right: 0;

    background: white;

    flex-direction: column;

    padding: 20px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    gap: 16px;

  }

  

  .nav-menu.is-open {

    display: flex !important;

  }

  

  .nav-menu a {

    color: #0b0f14 !important;

    padding: 12px;

    border-radius: 8px;

    transition: background 200ms ease;

  }

  

  .nav-menu a:hover {

    background: #f5f6fa;

  }

  

  .nav-toggle { display: block; }

  .header-cta { display: none; }

}



@media (max-width: 900px) {

  .about-points {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 520px) {

  .about-points {

    grid-template-columns: 1fr;

  }

}



/* ===== FOOTER MOBILE FIX (DEJ ÚPLNĚ NA KONEC SOUBORU) ===== */

@media (max-width: 900px) {

  .footer-inner{

    grid-template-columns: 1fr !important;

    justify-items: center !important;

    text-align: center !important;

  }



  .footer-col--info,

  .footer-col--nav,

  .footer-col--social{

    justify-self: center !important;

    text-align: center !important;

    width: 100%;

  }

}