:root{

  --bg:#ffffff;

  --text:#0f172a;

  --muted:#64748b;

  --border:#e2e8f0;

  --card:#ffffff;

  --alt:#f8fafc;



  --primary:#274a49;         /* tmavě zelená */

  --primary-700:#1e3a39;

  --accent:#ecdcc3;          /* světlá béžová */

  --shadow:0 10px 25px rgba(2,6,23,.06);

  --header-h:72px;



  /* Služby (sekce) */

  --beige:#fff0d4;           /* béžová hero/header */

  --brown:#6b4f3b;           /* hnědá pro ikony/rám */

  --brown-700:#5a3f2f;

}



/* ===== Reset / base ===== */

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;

  color:var(--text); background:var(--bg); line-height:1.6;

}

img{max-width:100%;display:block}

.hidden{display:none!important}



.container{max-width:1120px;margin:0 auto;padding:0 20px}

.h1{font-size:clamp(28px,4vw,44px);line-height:1.25;font-weight:700}

.h2{font-size:clamp(22px,3vw,32px);line-height:1.2;font-weight:700}

.h3{font-size:18px;font-weight:700}

.small{font-size:12px}

.text-primary{color:var(--primary)}

.muted{color:var(--muted)}

.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.center{text-align:center}



.grid-2{display:grid;grid-template-columns:1fr;gap:28px}

.grid-1-2{display:grid;grid-template-columns:1fr;gap:24px}

@media (min-width:880px){

  .grid-2{grid-template-columns:1.1fr .9fr}

  .grid-1-2{grid-template-columns:1fr 1fr}

}




/* ===== Header / navbar ===== */

.header{

  position:sticky;top:0;z-index:50;

  backdrop-filter:saturate(1.1) blur(6px);

  background:var(--beige); border:none; box-shadow:none;

}

.header__inner{

  display:flex;align-items:center;justify-content:space-between;

  padding:12px 0; position:relative;

}

.brand{display:flex;align-items:center;gap:12px}

.logo{display:none}

.brand__name{font-weight:800;font-size:clamp(20px,2.6vw,28px)}

.brand__tag{font-size:13px;color:var(--muted)}



/* Desktop nav uprostřed */

.nav{

  position:absolute;left:50%;transform:translateX(-50%);

  display:flex;gap:40px;align-items:center;

}

.nav__link{

  font-size:20px;font-weight:600;text-decoration:none;color:var(--text);

  transition:color .25s ease;

}

.nav__link:hover{color:var(--primary)}



/* Sociální ikony vpravo */

.socials{display:flex;align-items:center;gap:16px;margin-left:auto}

.social__link{color:var(--primary);transition:transform .2s ease,color .2s ease}

.social__link:hover{transform:translateY(-1px);color:var(--primary-700)}

.icon{width:32px;height:32px}



/* Hamburger + mobilní menu (base) */

.hamburger{

  border:none;background:transparent;padding:8px;display:inline-flex;cursor:pointer;

}

.hamburger .icon{width:32px;height:32px;color:var(--primary)}

.hamburger:hover .icon{color:var(--primary-700)}



.mobile{display:none}

.mobile.open{display:block}



/* Desktop: nav viditelné, burger pryč, mobilní menu skryté */

@media (min-width:880px){

  .nav{display:flex}

  .hamburger{display:none}

  .mobile{display:none!important}

}



/* Mobile overlay + odsazení + burger doprostřed + schovej desktop nav */

@media (max-width:879px){

  .header .container{padding-left:18px;padding-right:18px}

  .nav{display:none}

  .socials{display:none} /* volitelné: schovej pro čistotu layoutu */



  .hamburger{

    position:absolute; left:50%; transform:translateX(-50%);

    z-index:201;

  }

  .mobile{

    position:fixed; inset:var(--header-h) 0 0 0;

    background:var(--beige); padding:24px 20px; z-index:200;

    overflow-y:auto; text-align:center; border-top:1px solid rgba(0,0,0,.06);

  }

  .mobile__link{

    display:block; font-size:20px; font-weight:600;

    padding:16px 8px; border-bottom:1px solid rgba(0,0,0,.06);

    color:inherit; text-decoration:none;

  }

  body.nav-open{overflow:hidden}

}



/* ===== Hero ===== */

.hero{

  background:var(--beige);

  padding-top:80px;padding-bottom:100px;

}

.hero__grid{align-items:center}

.h1>span{display:block}

.hero__title>span+span{margin-top:.15em}

.hero__lead{

  color:var(--text); background:rgba(236,220,195,.45);

  border-left:4px solid var(--primary); padding:.8rem 1rem; border-radius:12px;

}

.kpi__t{font-size:1.15rem;font-weight:700}

.hero__media{display:flex;justify-content:center;align-items:center;margin:0;background:none}

.hero__img{

  width:100%;max-width:520px;display:block;border-radius:10px;

  border:4px solid var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fffdf8;

}

@media (max-width:880px){.hero__img{max-width:320px}}.hero{padding-top: 20px}



/* ===== Sekce ===== */

.section{padding:64px 0}

.section--alt{padding:64px 0;background:#365359;color:#fff}

.section--alt h2,.section--alt p,.section--alt .muted{color:#fff}



/* ===== Služby ===== */

#sluzby {
  background:#365359;
  color:#fff0d4;
  text-align:center;
}

/* GRID LAYOUT */
.cards {
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  justify-items:center;
}

@media (min-width:880px){
  .cards{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* menší mezery */
  }

  /* první řada */
  .cards .card:nth-child(1){ grid-column:1; }
  .cards .card:nth-child(2){ grid-column:3; }
  .cards .card:nth-child(3){ grid-column:5; }

  /* druhá řada zapadne pod mezery */
  .cards .card:nth-child(4){ grid-column:2; }
  .cards .card:nth-child(5){ grid-column:4; }
}


/* vizuální styl karet */
#sluzby .card{
  background:transparent;
  border:none;
  box-shadow:none;
  text-align:center;
  color:#fff0d4;
}

#sluzby h3,
#sluzby p{
  color:#fff0d4;
}

/* bílé kolečko pouze za ikonou */
#sluzby .badge{
  background:#fff;
  color:var(--brown);
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

#sluzby .badge__img{
  width:36px;
  height:36px;
  filter:brightness(0) saturate(100%) invert(19%) sepia(18%) saturate(903%) hue-rotate(338deg) brightness(90%) contrast(89%);
}




/* schovat tlačítka v kartách a mít 1 CTA uprostřed */

#sluzby .card .btn-ask{display:none!important}

#sluzby .section-cta{text-align:center;margin-top:40px}

#sluzby .section-cta .btn-ask{

  display:inline-flex;padding:14px 26px;border-radius:16px;

  background:#fff0d4;color:#365359;border:1px solid #fff0d4;font-weight:700;

  transition:all .25s ease;

}

#sluzby .section-cta .btn-ask:hover{background:#365359;color:#fff0d4}



/* ===== Tlačítka (globálně) ===== */

.btn{

  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;

  border:1px solid #365359;background:#365359;color:#fff;font-weight:600;cursor:pointer;

  transition:all .25s ease;

}

.btn:hover{background:#fff;color:#365359;border-color:#365359}

.btn--outline,.btn--ghost{background:#365359;color:#fff;border-color:#365359}

.btn--outline:hover,.btn--ghost:hover{background:#fff;color:#365359}

.btn-ask{background:#365359;color:#fff;border:1px solid #365359}

.btn-ask:hover{background:#fff;color:#365359;border-color:#365359}

.icon{width:18px;height:18px}



/* ===== Proč spolupracovat se mnou ===== */

#proc-ja{color:#273b40}

#proc-ja .h2{color:#273b40}



#proc-ja .list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr; /* mobilní výchozí */
  gap: 20px 40px;
}

#proc-ja .list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 10px;
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin: 0;
  color: #273b40;
  line-height: 1.7;
}

#proc-ja .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  margin-top: 4px;
}

#proc-ja .list li strong {
  display: block;
  font-size: 1.28rem;
  font-weight: 800;
  margin-bottom: 2px;
  color: #273b40;
}

/* --- Desktop layout --- */
@media (min-width: 992px) {
  #proc-ja .list {
    grid-template-columns: repeat(3, 1fr);
  }
}




.kpiGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}

.kpiCard{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center;box-shadow:0 2px 12px rgba(2,6,23,.03)}

.kpiNum{font-size:22px;font-weight:700}

.kpiTxt{font-size:12px}

@media (min-width:880px){#proc-ja .grid-1-2{grid-template-columns:1fr}}



/* ===== Recenze / Karusel ===== */

#recenze{color:#273b40;overflow:hidden}

.carousel{position:relative;align-items:center;justify-content:center;gap:1rem}

.carousel__track--3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

@media (max-width:879px){.carousel__track--3{grid-template-columns:1fr}}



#recenze .carousel__item{

  font-size:1.1rem;line-height:1.8;padding:1.4rem;background:none;border:none;box-shadow:none;min-height:160px;

}

#recenze .review__name{font-size:1.2rem;font-weight:700;margin-top:.8rem;color:#fff0d4}



/* šipky – desktop mimo text, v mobilech vypnout; tlačítko přidává JS */

#recenze .carousel__ctl{

  position:absolute;top:50%;transform:translateY(-50%);

  width:44px;height:44px;border-radius:50%;

  border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);

  cursor:pointer;transition:none;

}

#recenze .carousel__ctl[data-dir="-1"]{left:-60px}

#recenze .carousel__ctl[data-dir="1"]{right:-60px}

#recenze .carousel__ctl:hover{background:#fff;transform:translateY(-50%)}



@media (max-width:879px){

  #recenze .carousel__ctl{display:none!important}

  #recenze .carousel__track{margin-bottom:14px}

  #recenze .carousel__next{

    display:inline-flex; align-items:center; justify-content:center;

    padding:12px 18px; border-radius:999px;

    border:1px solid #e2e8f0; background:#fff; color:#273b40; font-weight:600;

  }

}



/* ===== Formulář (béžový box) ===== */

.form{

  background:#fff0d4!important; border:1px solid #e2cfa7!important;

  box-shadow:0 8px 24px rgba(0,0,0,.06); color:#273b40;

  border-radius:24px; padding:20px; display:block;

}

.form .label,.form .muted{color:#273b40}

.form__row{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px}

.form__row--2{grid-template-columns:1fr}

@media (min-width:720px){.form__row--2{grid-template-columns:1fr 1fr}}

.label{display:flex; flex-direction:column; gap:6px; width:100%; min-width:0}

.input, .form textarea{

  background:#fff;color:var(--text);border:1px solid var(--border);border-radius:12px;

  padding:10px 12px;font:inherit;margin-top:6px; width:100%; min-width:0;

}

.input:focus, .form textarea:focus{

  outline:2px solid rgba(107,79,59,.25); border-color:#e2cfa7;

}



/* ===== Footer / ScrollTop ===== */

.footer{border-top:1px solid var(--border)}

.footer__inner{

  display:flex;justify-content:space-between;align-items:center;gap:12px;

  padding:16px 0;color:var(--muted);font-size:14px

}

.scrollTop{

  position:fixed;right:16px;bottom:16px;border:1px solid var(--border);

  background:#fff;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;

  box-shadow:var(--shadow)

}



/* ===== Mobilní drobnosti ===== */

@media (max-width:879px){

  .hero__text{align-items:center;text-align:center}

  .hero .row{justify-content:center}



  .footer__inner{

    padding-left:18px; padding-right:18px; gap:6px;

    text-align:center; flex-direction:column;

  }

}

/* 1) Na mobilech schovej desktopové menu a nech burger uprostřed */

@media (max-width:879px){

  .nav{ display:none; }

  .hamburger{

    position:absolute; left:50%; transform:translateX(-50%);

    z-index:201; cursor:pointer;

  }

}



/* 2) Mobilní overlay – zobrazení při .open */

.mobile{ display:none; }

.mobile.open{ display:block; }



/* 3) Zámek scrollu při otevřeném menu */

body.nav-open{ overflow:hidden; }



/* === Mobilní overlay – jistota viditelnosti === */

.mobile{

  display: none;

  background: var(--beige);

  /* top/left/right/bottom a z-index nastavuje JS podle reálné výšky headeru */

}

.mobile.open{ display:block; }



/* Zámek scrollu při otevřeném menu */

body.nav-open{ overflow: hidden; }



/* Na mobilech schovej středové desktop menu (ať nepřekrývá overlay) */

@media (max-width:879px){

  .nav{ display: none !important; }

  .hamburger{

    position: absolute; left: 50%; transform: translateX(-50%);

    z-index: 1001; /* nad obsahem, ale pod overlayem, který je 1000 + vlastní obsah */

    cursor: pointer;

  }

  .mobile__link{

    display:block; font-size:20px; font-weight:600;

    padding:16px 8px; border-bottom:1px solid rgba(0,0,0,.06);

    color: var(--text); text-decoration: none;

  }

}



/* Socials: na desktopu viditelné a nad nav (který je absolutně centrovaný) */

.socials{

  position: relative;

  z-index: 2;           /* vytáhneme nad středový .nav */

  margin-left: auto;    /* držet vpravo */

}

@media (max-width:879px){

  .socials{ display: none; } /* na mobilech vypneme, necháme čistý overlay */

}



/* Pro jistotu: středový nav má nižší vrstvu než socials */

.nav{ position: absolute; left:50%; transform: translateX(-50%); z-index:1; }



/* ==== Mobilní overlay – jistota viditelnosti a vrstvy ==== */

.mobile{

  /* JS nastaví top/rozměry i display, tady jen fallback */

  display: none;

  background: var(--beige);

}

.mobile.open{ display:block; }



/* Zámek scrollu při otevřeném menu */

body.nav-open{ overflow: hidden; }



/* Desktop: socials viditelné a nad centrovaným .nav */

.socials{

  position: relative;

  z-index: 3;               /* nad .nav */

  display: flex;            /* jistota */

  align-items: center;

  gap: 16px;

  margin-left: auto;

}



/* Centrované menu má nižší vrstvu, aby nepřekrývalo socials */

.nav{

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

}



/* Mobile: skrýt desktopovou navigaci, nechat burger + overlay */

@media (max-width: 879px){

  .nav{ display: none !important; }



  .hamburger{

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1001; /* nad contentem */

    cursor: pointer;

  }



  /* odkazy uvnitř overlaye */

  #mobileMenu .mobile__link{

    display:block;

    font-size:20px;

    font-weight:600;

    padding:16px 8px;

    border-bottom:1px solid rgba(0,0,0,.06);

    color: var(--text);

    text-decoration: none;

  }



  /* na mobilech socials schováme, ať overlay čistě překryje */

  .socials{ display: none !important; }

}

/* === HOTFIX: mobilní menu push-down === */

@media (max-width: 879px){

  .mobile{

    position: static !important;   /* žádný overlay; je v normálním toku */

    display: none;                 /* výchozí skryté */

    width: 100%;

    background: var(--beige);

    padding: 20px;

    border-top: 1px solid rgba(0,0,0,.06);

  }

  .mobile.open{ display: block !important; }



  /* zachovej sociální ikony v headeru */

  .socials{ display:flex !important; }

}
/* Kontakt: dva sloupce na desktopu, stejné výšky */
#kontakt .grid-2 { align-items: stretch; } /* sloupce se srovnají na stejnou výšku řádku */

@media (min-width: 880px) {
  #kontakt .grid-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* levý trochu širší kvůli mapě */
    gap: 40px;
  }

  /* vnitřní sloupce jako flexy, aby uměly "100% height" a pěkné rozložení */
  #kontakt .col-left,
  #kontakt .col-right {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* formulář vycentrovat a nepřesahovat (90% mobil / 70% desktop) */
  #contactForm {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;           /* vytáhne se na výšku sloupce */
    display: flex;
    flex-direction: column; /* aby šly prvky pod sebe */
    gap: 12px;
  }
}

/* mobil/tablet – formulář 90% šířky */
@media (max-width: 879px) {
  #contactForm {
    width: 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ikony a odstavce v kontaktu */
#kontakt .contact p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px 0;
}
#kontakt .contact .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}

/* Responzivní mapa */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;         /* drží poměr */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Cookie lišta */
.cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
  padding-block: 16px;
}

.cookie__inner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie__ title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.cookie__desc {
  max-width: 560px;
}

.cookie__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cookie__inner {
    align-items: flex-start;
  }

  .cookie__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Posun cílových sekcí jen v responzivním zobrazení */
@media (max-width: 879px) {
  #sluzby,
  #proc-ja,
  #recenze,
  #kontakt,
  #kontakt,
  #hero {
    scroll-margin-top: calc(var(--header-h) + 50px);
  }
}

html {
  scroll-behavior: smooth;
}


/* Honeypot pole pro boty – schovat pro uživatele */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}