:root{
      --accent:#4dbfd9;         /* hlavní akcentní barva */
      --accent-2:#3aaac2;       /* hover/active odstín */
      --bg:#ffffff;             /* základní pozadí */
      --bg-soft:#f9fafb;        /* oddělené sekce */
      --line:#e5e7eb;           /* jemné oddělení */
      --text:#374151;           /* běžný text */
      --heading:#111827;        /* nadpisy */
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Comfortaa,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
    img{max-width:100%;display:block;height:auto}

    /* Layout */
    .container{width:min(1200px, 92%);margin-inline:auto}
    .section{padding: clamp(48px, 8vw, 96px) 0}

    /* Header */
    .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);}    
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--heading)}
    .brand__name{font-family:Comfortaa, sans-serif;font-weight:700;letter-spacing:.2px}
    .brand__logo{display:grid;place-items:center;width:160px;height:auto}
    nav{display:flex;align-items:center;gap:10px}
    .nav{display:flex;gap:4px}
    .nav a{display:inline-block;padding:10px 14px;/*border-radius:12px;*/text-decoration:none;color:var(--heading);font-weight:500}
    .nav a:hover{/*background:var(--bg-soft);*/border-bottom: 1px solid var(--accent);}
    .nav a.is-active{/*outline:1px solid var(--accent);*/border-bottom: 1px solid var(--accent); }    
    .cta{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:0px;padding:10px 16px;font-weight:400;text-decoration:none}
    .cta:hover{background:var(--accent);color:#fff}

    /* Mobile nav */
    .burger{display:none;inline-size:44px;block-size:44px;border:2px solid var(--line);border-radius:10px;background:#fff}
    .burger span{display:block;width:22px;height:2px;background:var(--heading);margin:5px auto}
    @media (max-width: 900px){
      .burger{display:block}
      .nav{display:none;position:absolute;inset-inline:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:12px}
      .nav.open{display:grid;gap:6px}
      .header-inner{padding:10px 0}
    }

    /* Hero + slider */
    .hero{position:relative;min-height:72vh;display:grid;place-items:center;color:#fff;overflow:hidden}
    .hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
    .hero__slide.is-active{opacity:1}
    .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35))}
    .hero__content{position:relative;text-align:center;padding:0 16px}
    .hero h1{font-family:Comfortaa, sans-serif;color:#fff;font-size:clamp(32px, 5.2vw, 64px);line-height:1.1;margin:0 0 16px}
    .hero p{font-size:clamp(16px, 2.2vw, 22px);opacity:.95;margin:0 0 28px}
    .btn{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--accent);color:#fff;background:var(--accent);/*border-radius:18px;*/padding:12px 20px;font-weight:400;text-decoration:none}
    .btn:hover{background:var(--accent-2);border-color:var(--accent-2)}

    /* Features */
    .cisla{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .cislo{border-top:1px solid var(--accent);/*border-radius:16px;*/padding:22px;background:#fff;box-shadow:0 6px 18px rgba(17,24,39,.06)}
    .cislo__icon{inline-size:40px;block-size:40px;border-radius:10px;border:2px solid var(--accent);display:grid;place-items:center;margin-bottom:12px;color:var(--accent);font-weight:700}
    .cislo h3{font-family:Comfortaa, sans-serif;color:var(--accent);font-size:40px;margin:8px 0;text-align:center;}
    .cislo p{margin:0;color:var(--text);text-align:center;}
    @media (max-width: 1000px){.cisla{grid-template-columns:repeat(1,1fr)}}
    @media (max-width: 560px){.cisla{grid-template-columns:1fr}}

    /* Features */
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .feature{border-top:1px solid var(--accent);/*border-radius:16px;*/padding:22px;background:#fff;box-shadow:0 6px 18px rgba(17,24,39,.06)}
    .feature__icon{inline-size:40px;block-size:40px;border-radius:10px;border:2px solid var(--accent);display:grid;place-items:center;margin-bottom:12px;color:var(--accent);font-weight:700}
    .feature h3{font-family:Comfortaa, sans-serif;color:var(--heading);font-size:20px;margin:8px 0}
    .feature p{margin:0;color:var(--text)}
    @media (max-width: 1000px){.features{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 700px){.features{grid-template-columns:1fr}}

    /* Sluzby */
    .three-articles {
      display: block;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
    }
    .three-articles article {
      width: 45%;
      float: left;
      display: block;
      margin: 40px 0px 0px 0px;
    }
    .three-articles article.reverse {
      float: right;
    }
    .three-articles article.center {
      float: none;
      margin: 50px auto 0px auto !important;
    }
    .three-articles article.reverse .content { order: 2; }
    .three-articles article.reverse .image   { order: 1; }
    .three-articles .image img {
      width: 100%;
      max-width: 600px;
      height: auto;
      /*border-radius: 12px;*/
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .skewed {
      width: min(700px, 100%);
      margin: 2rem auto;
      overflow: hidden; /* odstřihne přečnívající rohy */
      transform: skewX(-10deg); /* zleva→doprava; opačný směr dej +10deg */
    }
    .skewed img {
      display: block;
      width: 100%;
      /* nech deformovaný obrázek – to je účel; pokud chceš rám šikmý a obrázek rovný,
         zanoř ještě jednu vrstvu a obrázek „odzkos“ opačným úhlem */
    }
    .tilt {
      margin: 2rem auto;
      perspective: 800px; /* definuje hloubku pohledu */
    }
    .tilt img {
      width: 100%;
      display: block;
      transform: rotateX(15deg); /* nakloní obrazek v ose X */
      transform-origin: left center; /* levá strana zůstane nahoře */
    }
    .tilt-x {
      margin: 2rem auto;
      perspective: 800px; /* hloubka perspektivy */
    }
    .tilt-x img {
      width: 100%;
      display: block;
      transform: rotateY(-10deg); /* záporné = vlevo vyšší, vpravo nižší */
      transform-origin: center left;
    }
    .tilt-y {
      margin: 2rem auto;
      perspective: 800px; /* hloubka perspektivy */
    }
    .tilt-y img {
      width: 100%;
      display: block;
      transform: rotateY(10deg); /* záporné = vlevo vyšší, vpravo nižší */
      transform-origin: center right;
    }
    .three-articles .content {
      text-align: center;
    }
    .three-articles p {
      margin-bottom: 1rem;
      color: #555;
      line-height: 1.6;
    }
    .three-articles a.vice {
      display: inline-block;
      background-color: var(--accent);
      color: #fff;
      text-decoration: none;
      padding: 0.6rem 1.2rem;
      /*border-radius: 6px;*/
      transition: background-color 0.3s ease;
    }
    .three-articles a:hover {
      background-color: #000;
      color: #fff;
    }

    /* Mapa */
    .map-section { background: #fff; padding: 2rem 1rem; }
    .map-article { max-width: 900px; margin: 0 auto; }

    .cz-map {
      position: relative;
      width: 100%;
      height: auto;
      /* přepočet proporcí SVG – výška podle šířky a poměru */
      aspect-ratio: 5338 / 3056;
      background: #fff;
    }
    .cz-map svg { display: block; width: 100%; height: 100%; }

    /* marker + popisek */
    .marker {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translate(-50%, -100%);
      pointer-events: auto;
      gap: 0.35rem;
    }
    .marker img {
      width: 36px;
      height: 36px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
      transition: transform 0.18s ease, filter 0.18s ease;
    }
    .marker .label {
      font: 500 0.9rem/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      background: rgba(255,255,255,0.9);
      padding: 0.2rem 0.45rem;
      border-radius: 0.4rem;
      border: 1px solid #e6e6e6;
      white-space: nowrap;
      transform: translateY(0);
      transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
    }

    /* hover efekt */
    .marker:hover img {
      transform: translateY(-2px) scale(1.12);
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.22));
    }
    .marker:hover .label {
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
      color: #111;
    }

    /* pozice měst – musím doladit vůči tomuto novému obrysu */
    .cz-map .sokolov { left: 10%; top: 43%; }
    .cz-map .plzen   { left: 20%; top: 61%; }
    .cz-map .vochov  { left: 18%; top: 57%; }

    /* mobilní úpravy */
    @media (max-width: 600px) {
      .marker img { width: 30px; height: 30px; }
      .marker .label { font-size: 0.8rem; }

    }



    /* Responsivita */
    @media (max-width: 768px) {
      .three-articles article {
        width: 90%;
        float: left;
        display: block;
        margin: 40px auto 0px auto !important;
      }
      .three-articles .image img {
        max-width: 90%;
        margin: 0px auto !important;
      }
      .three-articles article .content, .three-articles article.reverse .content {
        order: 2;
      }
      .three-articles article .image, .three-articles article.reverse .image {
        order: 1;
      }
      .three-articles .content, .three-articles .reverse .content {
        flex: none;
        padding: 20px !important;
      }
    }


    /* Services */
    .section--services .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .card{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(17,24,39,.08)}
    .card img{aspect-ratio:16/9;object-fit:cover;border-bottom:4px solid var(--accent)}
    .card__body{padding:18px}
    .card__title{font-family:Comfortaa, sans-serif;font-size:20px;color:var(--heading);margin:2px 0 8px}
    .card__text{margin:0 0 14px}
    .link{display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:8px 14px;border-radius:14px;text-decoration:none;font-weight:400}
    .link:hover{background:var(--accent);color:#fff}
    @media (max-width: 1000px){.section--services .grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 560px){.section--services .grid{grid-template-columns:1fr}}

    /* References */
    .masonry{columns:3 280px;column-gap:18px}
    .masonry figure{break-inside:avoid;/*border-radius:18px;*/overflow:hidden;box-shadow:0 8px 24px rgba(17,24,39,.08);margin:0 0 18px;border:1px solid var(--accent)}
    .masonry figcaption{padding:10px 14px;background:#fff;color:var(--heading);font-weight:400}

    /* Partners */
    .partners{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center}
    .partner{filter:grayscale(100%);opacity:.9;transition:.2s}
    .partner:hover{filter:none;opacity:1}
    @media (max-width: 1000px){.partners{grid-template-columns:repeat(3,1fr)}}
    @media (max-width: 560px){.partners{grid-template-columns:repeat(2,1fr)}}

    /* FAQ */
    .faq{max-width:900px;margin-inline:auto}
    .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
    .faq summary{font-weight:700;color:var(--heading);cursor:pointer}
    .faq p{margin:8px 0 0}

    /* CTA */
    .cta-band{position:relative;color:#fff;border-block:6px solid var(--accent);background-image:url('../images/footer-drops.jpg');background-size:cover;background-position:center}
    .cta-band::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.65)}
    .cta-band h2{font-family:Comfortaa, sans-serif;color:#fff;margin:0 0 8px;font-size:clamp(24px,3.6vw,40px)}
    .cta-band p{margin:0 0 18px;opacity:.9}
    .cta-band>.container{position:relative;z-index:1}

    /* Footer */
    .footer{position:relative;color:#cbd5e1;background-image:url('../images/hero-drops.jpg');background-size:cover;background-position:center}
    .footer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.9)}
    .footer a{color:#cbd5e1;text-decoration:none}
    .footer a:hover{color:#fff}
    .footer-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
    .footer h4{font-family:Comfortaa, sans-serif;color:#fff;margin:0 0 10px}
    .social{display:flex;gap:14px;justify-content:center}
    .icon{width:28px;height:28px;display:inline-block}
    .icon svg{width:120%;height:120%;fill:#cbd5e1}
    .icon:hover svg{fill:#fff}
    .footer .container{position:relative;z-index:1}
    @media (max-width: 560px){.sloupec{display: none;}}


    /* Section heads */
    .section__head{margin-bottom: clamp(18px, 3vw, 28px);text-align:center}
    .eyebrow{display:inline-block;padding:6px 10px;/*border-radius:999px;*/background:rgba(77,191,217,.12);color:var(--accent);font-weight:700;letter-spacing:.3px}
    .h2{font-family:Comfortaa, sans-serif;font-size:clamp(22px,3.8vw,36px);color:var(--heading);margin:8px 0}
    .lead{max-width:680px;margin:6px auto 0;opacity:.9}