:root{
    --green:#8cc63f;
    --green-dark:#7ab52f;
    --ink:#3a3a3a;
    --muted:#6b6b6b;
    --line:#e4e4e4;
    --head:'Oswald',sans-serif;
    --body:'PT Sans',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--body);color:var(--ink);line-height:1.65;background:#fff}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

  /* ---------- Demo ribbon ---------- */
  .ribbon{background:#2b2b2b;color:#fff;text-align:center;font-family:var(--head);
    font-weight:300;letter-spacing:1px;font-size:13px;padding:7px 12px;text-transform:uppercase}
  .ribbon b{color:var(--green)}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
  .nav{display:flex;align-items:center;gap:22px;height:70px}
  .logo{height:44px}
  .menu{display:flex;gap:20px;margin:0 auto;list-style:none}
  .menu a{font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:15px;
    letter-spacing:.5px;color:#333;padding-bottom:4px;border-bottom:3px solid transparent;transition:.2s}
  .menu a:hover{color:var(--green-dark)}
  .menu a.active{border-color:var(--green)}
  .btn{display:inline-block;background:var(--green);color:#fff;font-family:var(--head);
    text-transform:uppercase;font-weight:500;letter-spacing:.5px;font-size:15px;
    padding:12px 26px;border-radius:30px;transition:.2s;border:none;cursor:pointer}
  .btn:hover{background:var(--green-dark)}
  .flag{height:22px;border-radius:3px}
  .burger{display:none;font-size:26px;background:none;border:none;cursor:pointer}

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:560px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;color:#fff;
    background:linear-gradient(rgba(80,150,200,.25),rgba(80,150,200,.25)),
      url('https://kiddum.cz/img/header2.jpg') center/cover no-repeat}
  .hero h1{font-family:var(--head);font-weight:700;text-transform:uppercase;
    font-size:58px;letter-spacing:1px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
  .hero h2{font-family:var(--head);font-weight:400;text-transform:uppercase;
    font-size:24px;letter-spacing:3px;margin-top:6px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
  .hero .divider{width:120px;height:3px;background:var(--green);margin:22px auto 34px}
  .pills{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1000px;padding:0 20px}
  .pill{background:var(--green);color:#fff;font-family:var(--head);text-transform:uppercase;
    font-weight:500;letter-spacing:.5px;font-size:15px;padding:12px 26px;border-radius:30px;
    box-shadow:0 4px 14px rgba(0,0,0,.15);transition:.2s}
  .pill:hover{background:var(--green-dark);transform:translateY(-2px)}

  /* ---------- Section heading ---------- */
  section{padding:64px 0}
  .sec-title{display:flex;align-items:center;gap:24px;justify-content:center;margin-bottom:44px}
  .sec-title::before,.sec-title::after{content:"";flex:1;height:1px;background:var(--line);max-width:380px}
  .sec-title h3{font-family:var(--head);font-weight:600;text-transform:uppercase;
    font-size:30px;letter-spacing:2px;color:#2b2b2b}

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start}
  .about p{margin-bottom:16px;color:#444}
  .about .fineprint{font-style:italic;color:#888;font-size:14px}
  .video{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .partners{margin-top:20px}
  .partners img{width:200px;border-radius:6px;margin-top:8px}

  /* ---------- Offer cards ---------- */
  .offer{background:#fafafa}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
  .card{text-align:left}
  .card .icon{font-size:34px;text-align:center;margin-bottom:10px}
  .card h4{font-family:var(--head);font-weight:500;text-transform:none;font-size:22px;
    text-align:center;margin-bottom:14px}
  .card h4 a{border-bottom:2px solid var(--green);padding-bottom:2px}
  .card p{color:#555;font-size:15px}

  /* ---------- Team ---------- */
  .team{display:flex;flex-direction:column;gap:44px;margin-top:10px}
  .member{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:center}
  .member.rev{grid-template-columns:1fr 200px}
  .member.rev .txt{text-align:right;order:1}
  .member.rev .photo{order:2}
  .photo img{width:200px;height:200px;border-radius:50%;object-fit:cover}
  .member h4{font-family:var(--head);font-weight:400;font-size:26px;margin-bottom:8px}
  .member p{color:#555}
  .team-more{text-align:center;margin-top:44px}
  .team-more p{max-width:640px;margin:14px auto 0;color:#666}

  /* ---------- Map ---------- */
  .map iframe{width:100%;height:360px;border:0;display:block}

  /* ---------- Footer ---------- */
  footer{background:#f4f4f4;padding:52px 0 26px;color:#555;font-size:15px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
  .foot-grid img{height:52px;margin-bottom:14px}
  footer h5{font-family:var(--head);text-transform:uppercase;font-weight:600;
    letter-spacing:1px;margin-bottom:12px;color:#333;font-size:17px}
  footer ul{list-style:none}
  footer li{margin-bottom:6px}
  footer a:hover{color:var(--green-dark)}
  .social{display:flex;gap:14px;margin-top:16px}
  .social span{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--head)}
  .copy{text-align:center;border-top:1px solid #e0e0e0;margin-top:36px;padding-top:20px;
    color:#999;font-size:13px}

  @media(max-width:900px){
    .menu,.header-flag{display:none}
    .burger{display:block;margin-left:auto}
    .about-grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    .member,.member.rev{grid-template-columns:1fr;text-align:center;justify-items:center}
    .member.rev .txt{text-align:center}
    .foot-grid{grid-template-columns:1fr}
    .hero h1{font-size:40px}
  }


/* =========================================================================
   OBSAHOVÉ STRÁNKY — doplněno k původnímu vzhledu z kiddum-nahled.html
   ========================================================================= */
.hero.hero-sm{ min-height:340px; }
.hero.hero-sm h1{ font-size:46px; }
.hero .podnadpis{ font-family:var(--head); font-weight:300; text-transform:uppercase;
  letter-spacing:3px; font-size:16px; margin-top:8px; text-shadow:0 2px 10px rgba(0,0,0,.3); }

.article{ max-width:860px; margin:0 auto; }
.article h2{ font-family:var(--head); font-weight:600; text-transform:uppercase; font-size:28px;
  letter-spacing:1.5px; color:#2b2b2b; margin:48px 0 10px; padding-bottom:10px;
  border-bottom:3px solid var(--green); }
.article h2:first-child{ margin-top:0; }
.article h3{ font-family:var(--head); font-weight:600; font-size:21px; color:var(--green-dark);
  margin:30px 0 8px; }
.article p{ margin:0 0 14px; }
.article ul{ margin:0 0 18px; padding-left:0; list-style:none; }
.article ul li{ position:relative; padding:5px 0 5px 28px; border-bottom:1px solid #f0f0f0; }
.article ul li:last-child{ border-bottom:none; }
.article ul li::before{ content:""; position:absolute; left:6px; top:14px; width:9px; height:9px;
  border-radius:50%; background:var(--green); }
.article .lead{ font-size:19px; color:#4a4a4a; }

.obrazky{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:22px 0 32px; }
.obrazky img{ width:100%; height:170px; object-fit:cover; border-radius:10px; box-shadow:0 3px 12px rgba(0,0,0,.10); }
.obrazky.velke img{ height:260px; }

.karty{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:24px 0 34px; }
.karta{ border:1px solid var(--line); border-radius:12px; padding:22px 24px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04); }
.karta h3{ margin-top:0; }
.karta p:last-child{ margin-bottom:0; }

.kontakt-mriz{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin:22px 0; }
.kontakt-blok{ border-left:4px solid var(--green); padding:4px 0 4px 18px; }
.kontakt-blok h3{ margin:0 0 6px; }
.kontakt-blok p{ margin:0 0 3px; }

.upozorneni{ background:#f2f9e8; border:1px solid #cfe6a8; border-left:5px solid var(--green);
  border-radius:10px; padding:16px 20px; margin:24px 0; }
.upozorneni p:last-child{ margin-bottom:0; }

.ribbon.nahled{ background:#8a5a00; }
.ribbon.nahled b{ color:#ffd873; }

.pata-pozn{ font-size:13px; color:#8a8a8a; text-align:center; padding:22px 0 40px; }

@media(max-width:820px){
  .hero h1{ font-size:38px !important; }
  .article h2{ font-size:23px; }
  .obrazky img{ height:140px; }
}

/* zástupné dlaždice galerie (než se stáhnou fotky) */
.foto-zastupka{ aspect-ratio:4/3; border-radius:10px; background:repeating-linear-gradient(45deg,#eef3e6,#eef3e6 12px,#e4ecd8 12px,#e4ecd8 24px); border:1px dashed #b9cf97; }
/* odkazy na právní stránky v patičce */
.pravni-odkazy a{ color:inherit; opacity:.75; text-decoration:underline; }
.pravni-odkazy a:hover{ opacity:1; }

/* ---- rozbalovací menu ---- */
.menu > li{ position:relative; }
.menu .mtrig{ background:none; border:none; cursor:pointer; font:inherit; color:inherit;
  text-transform:inherit; letter-spacing:inherit; padding:0; display:inline-flex; align-items:center; gap:4px; }
.menu .sipka{ font-size:.7em; opacity:.6; }
.menu li.active > a, .menu li.ma-sub.active > .mtrig{ color:#8cc63f; }
.menu .sub{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid #e4e8de; border-radius:10px; box-shadow:0 10px 30px rgba(20,40,20,.14);
  padding:8px 0; margin:10px 0 0; list-style:none; min-width:210px; z-index:60; }
/* neviditelný most přes mezeru mezi položkou a podmenu — bez něj se podmenu
   zavřelo dřív, než na něj myš stihla sjet */
.menu .sub::before{ content:''; position:absolute; left:-14px; right:-14px; top:-26px; height:26px; }
/* a hover drží i samotná položka o kus níž */
.menu li.ma-sub{ padding-bottom:10px; margin-bottom:-10px; }
.menu .sub li{ display:block; }
.menu .sub a{ display:block; padding:9px 18px; white-space:nowrap; text-transform:none;
  letter-spacing:0; font-weight:600; }
.menu .sub a:hover{ background:#f2f7ea; color:#6ea52c; }
.menu li.ma-sub:hover > .sub, .menu li.ma-sub:focus-within > .sub{ display:block; }
/* na úzkých displejích se menu láme pod sebe a podmenu se ukazuje v toku stránky */
@media (max-width: 900px){
  .menu .sub{ position:static; transform:none; box-shadow:none; border:none; padding:2px 0 4px 14px; }
}

/* ---- oživení / animace ---- */
@media (prefers-reduced-motion: no-preference){
  /* nájezd titulku v hlavičce */
  .hero h1{ animation: najezd .7s ease-out both; }
  .hero .podnadpis{ animation: najezd .7s .15s ease-out both; }
  .hero .divider{ animation: roztazeni .6s .35s ease-out both; }
  @keyframes najezd{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
  @keyframes roztazeni{ from{ opacity:0; transform:scaleX(0);} to{ opacity:1; transform:scaleX(1);} }

  /* postupné objevování obsahu při rolování (třídy přidává skript) */
  .rv{ opacity:0; transform:translateY(18px); transition: opacity .55s ease-out, transform .55s ease-out; }
  .rv.in{ opacity:1; transform:none; }

  /* rozbalení podmenu */
  .menu li.ma-sub:hover > .sub, .menu li.ma-sub:focus-within > .sub{ animation: submenu .18s ease-out; }
  @keyframes submenu{ from{ opacity:0; transform:translateX(-50%) translateY(-6px);} to{ opacity:1; transform:translateX(-50%);} }
  @media (max-width:900px){ @keyframes submenu{ from{opacity:0} to{opacity:1} } }
}

/* podtržení položek menu, které se vysune */
.menu > li > a, .menu .mtrig{ position:relative; padding-bottom:4px; }
.menu > li > a::after, .menu .mtrig::after{ content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:#8cc63f; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.menu > li > a:hover::after, .menu > li > a.active::after, .menu .mtrig:hover::after,
.menu li.ma-sub.active > .mtrig::after{ transform:scaleX(1); }

/* fotky a karty lehce reagují na myš */
.obrazky img, .article img{ transition: transform .3s ease, box-shadow .3s ease; }
.obrazky img:hover, .article img:hover{ transform: translateY(-4px) scale(1.02); box-shadow:0 12px 28px rgba(20,40,20,.18); }
.foto-zastupka{ transition: transform .3s ease; }
.foto-zastupka:hover{ transform: translateY(-3px); }

/* tlačítka */
.btn{ transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(110,165,44,.35); filter:brightness(1.05); }

/* ---- mobilní menu (ikona ☰ dřív nic nedělala) ---- */
@media (max-width:900px){
  .nav{ flex-wrap:wrap; }
  .burger{ display:block; margin-left:auto; }
  .menu{ display:none; }
  .menu.otevrene{ display:block; width:100%; margin:0; padding:6px 0 14px; border-top:1px solid var(--line); }
  .menu.otevrene > li{ display:block; padding:7px 4px; }
  .menu.otevrene .sub{ display:block; }  /* podmenu na mobilu rovnou rozbalené */
  .menu.otevrene .sub a{ padding:6px 0 6px 14px; }
}