/* ====== ZÁKLAD / PROMĚNNÉ ====== */
:root{
  --brand:#2FA7A2;        /* primary */
  --brand-2:#7DCFCB;      /* light bg */
  --ink:#0E2F38;          /* tmavý text */
  --paper:#fffdf6;        /* světle krémové pozadí */
  --muted:#6c8890;
  --accent:#F28B66;       /* drobný akcent (cta hover/odznak) */
  --radius:18px;
  --shadow:0 8px 20px rgba(14,47,56,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}

/* ====== KONTEJNER ====== */
.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

/* ====== HLAVIČKA (sticky) ====== */
header{
  position: sticky; top:0; z-index:1000;
  background:linear-gradient(0deg, rgba(125,207,203,.0), rgba(125,207,203,.0)) , #fff;
  border-bottom:4px solid #2FA7A2;
  padding:.4rem 0;           /* víc místa na výšku */
}


.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0;
}

/* LOGO */
.logo{
  height: 92px;              /* větší logo na desktopu */
  margin: .25rem 0;
}
@media (max-width: 820px){
  .logo{ height: 72px; padding: 6px 8px; }
}

/* ====== NAVIGACE + HAMBURGER ====== */
nav a{
  text-decoration:none; font-weight:700;
  color:var(--ink); padding:.6rem .8rem; border-radius:12px;
}
nav a:hover{ background:var(--brand-2); }

.nav{
  display:flex; gap:.25rem;
}

/* hamburger (CSS only) */
#menu-toggle{ display:none; }
.menu-btn{
  display:none; cursor:pointer; border:2px solid var(--ink);
  padding:.45rem .6rem; border-radius:12px; font-weight:800;
}
@media (max-width: 820px){
  .menu-btn{ display:inline-block; }
  .nav{
    position:fixed; inset:auto 0 0 0; top:64px;
    background:#fff; border-top:3px solid var(--brand-2);
    display:grid; gap:.25rem; padding:1rem; transform:translateY(110%);
    transition:transform .25s ease; box-shadow:var(--shadow);
  }
  #menu-toggle:checked ~ .nav{ transform:none; }
}

/* ====== HERO ====== */
.hero{
  background: linear-gradient(180deg, rgba(125,207,203,.25), rgba(125,207,203,0)) ;
  padding: clamp(2rem, 6vw, 4rem) 0 2rem;
  text-align:center;

}
.hero h1{
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height:1.15; margin:.5rem 0 1rem;
}
.lead{
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color:var(--ink); opacity:.9; max-width:780px; margin:0 auto 1.2rem;
}


.hero-img {
  display: block;
  margin: 2rem auto;
  height: auto;
  max-width: 90%; 
}

/* pro větší obrazovky */
@media (min-width: 768px) {
  .hero-img {
    max-width: 60%;
  }
}

@media (min-width: 1200px) {
  .hero-img {
    max-width: 50%;
  }
}

/* CTA tlačítka */
.btn{
  display:inline-block; font-weight:800; text-decoration:none;
  padding:.9rem 1.3rem; border-radius:999px;
  background:var(--brand); color:#fff; box-shadow:var(--shadow);
  transition: transform .08s ease, background .2s ease;
}
.btn.secondary{ background:#fff; color:var(--ink); border:2px solid var(--brand); }
.btn:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--brand) 88%, black 12%); }
.btn.secondary:hover{ background:var(--brand-2); }

/* ====== SEKCE VÝHOD / KARTY ====== */
.features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin: 1.5rem auto 0;
}
.card{
  background:#fff; border:1px solid #eaf2f3; border-radius:var(--radius);
  padding:1rem 1.1rem; text-align:left; box-shadow:var(--shadow);
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.card p{ margin:.2rem 0; color:var(--muted); }

/* ====== PATIČKA ====== */
footer{
  margin-top:3rem; background:#fff; border-top:3px solid var(--brand-2);
}
.footer-inner{
  padding:1.2rem 0; text-align:center; color:var(--muted);
}
.social a{
  text-decoration:none; font-weight:800; color:var(--ink); margin:0 .4rem;
}
.social a:hover{ color:var(--brand); }

/* ====== OBECNÉ ====== */
section{ padding: 1rem 0; }
main{ padding-bottom: 1rem; }

@media (max-width: 980px){
  .features{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .features{ grid-template-columns:1fr; }
  .logo{ height:50px; }
}

/* Formulář */
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="tel"],
form textarea{
  width: 100%;
  max-width: 520px;
  padding: .7rem .9rem;
  border: 1.5px solid #e1eceb;
  border-radius: 12px;
  font: inherit;
  margin-top: .35rem;
}
form textarea{ resize: vertical; }

form button{
  margin-top: .6rem;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color:#fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}
form button:hover{ background: color-mix(in srgb, var(--brand) 88%, black 12%); }