:root {
    --bg-dark:#060606; --bg-mid:#dedede;
    --tl:#ffffff; --td:#060606;
    --font-h1:'Syne',sans-serif; --font-b:'Plus Jakarta Sans',sans-serif;
    --h1:57px; --h2:28px; --h3:16px; --h4:10px;
    --gap:80px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg-mid);color:var(--td);font-family:var(--font-b);
       -webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  button{font-family:var(--font-b);cursor:pointer}

  /* ANIM */
  .anim{opacity:0;transform:translateY(28px);
        transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .anim.on{opacity:1;transform:translateY(0)}
  .anim.d1{transition-delay:.10s}.anim.d2{transition-delay:.20s}
  .anim.d3{transition-delay:.30s}.anim.d4{transition-delay:.40s}

  /* PLACEHOLDER */
  .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
      font-size:10px;letter-spacing:.1em;text-transform:uppercase;
      background:#c8c8c8;color:rgba(20,20,20,.22)}

  /* TAGS */
  .tags{display:flex;flex-wrap:wrap;gap:8px}
  .tag{font-family:var(--font-b);font-size:var(--h4);font-weight:400;
       letter-spacing:.10em;text-transform:uppercase;opacity:1;
       border:1px solid rgba(20,20,20,1);padding:5px 12px;color:var(--td)}
  /* BUTTONS */
  .btn{display:inline-flex;align-items:center;font-family:var(--font-b);font-size:var(--h3);
       font-weight:400;letter-spacing:.08em;padding:13px 32px;border:1px solid;
       background:transparent;transition:background .12s,color .12s,border-color .12s;cursor:pointer}
  .bd{color:var(--td);border-color:rgba(20,20,20,1)}
  .bd:hover{background:var(--td);color:var(--bg-mid)}
  .bdk{background:var(--td);color:var(--bg-mid);border-color:var(--td)}
  .bdk:hover{background:transparent;color:var(--td);border-color:rgba(20,20,20,1)}
  .s-cta .btn{font-size:var(--h3)}

  /* ── NAV ── */
  .nav{position:fixed;top:0;left:0;right:0;z-index:100;
       display:flex;align-items:center;justify-content:space-between;
       padding:24px 60px;transition:transform .4s ease,background .3s ease}
  .nav.hidden{transform:translateY(-100%)}
  .nav.solid{background:var(--bg-dark)}
  .nav-toggle{display:none}
  .nav-logo{font-family:var(--font-h1);font-size:32px;font-weight:400;
            color:var(--tl);letter-spacing:.02em}
  .nav-links{display:flex;align-items:center;gap:32px}
  .nav-lnk{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
            color:var(--tl);opacity:.50;transition:opacity .2s;cursor:pointer}
  .nav-lnk:hover{opacity:1}
  .nav-btn{font-family:var(--font-b);font-size:var(--h3);font-weight:400;letter-spacing:.08em;color:var(--bg-dark);border:1px solid var(--tl);padding:8px 20px;background:var(--tl);transition:background .12s,color .12s,border-color .12s}
  .nav-btn:hover{background:transparent;color:var(--tl);border-color:rgba(255,255,255,1)}

  /* ════════════════════════════
     S1, HERO (100vh, 50/50)
     ════════════════════════════ */
  .s-hero{display:flex;height:100vh}

  .s-hero-img{
    flex:0 0 50%;
    position:relative;
    overflow:hidden;
    background:var(--bg-dark);
  }
  .s-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  .s-hero-content{
    flex:0 0 50%;
    background:var(--bg-mid);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 60px;
  }
  .s-hero-tags{margin-top:24px}
  .s-hero-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
              line-height:1.05;letter-spacing:-.01em;color:var(--td);margin-bottom:20px}
  .s-hero-h3{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
              color:var(--td);opacity:.65;line-height:1.7;max-width:440px}

  /* H4-style section labels + divided info rows inside hero */
  .s-hero-info{display:flex;flex-direction:column;max-width:440px;margin-bottom:24px}
  .s-hero-info .s-hero-h3{padding:14px 0;max-width:none}
  .s-hero-info .div{background:rgba(20,20,20,.15)}

  /* ════════════════════════════
     TEXT SPLITS (natural height)
     ════════════════════════════ */
  .s-split{display:flex;padding:100px 0}
  .s-split-l,.s-split-r{flex:0 0 50%;padding:0 60px;display:flex;flex-direction:column;justify-content:center}

  .s-sec-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
             line-height:1.05;letter-spacing:-.01em;color:var(--td);margin-bottom:28px}
  .s-sec-p{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
            color:var(--td);opacity:.65;line-height:1.8}
  .s-sec-p+.s-sec-p{margin-top:1em}

  /* ════════════════════════════
     S3, CAROUSEL
     ════════════════════════════ */
  .s-carousel{padding:0;overflow:hidden}
  .s-cr-wrap{
    height:65vh;
    min-height:480px;
    overflow:hidden;
    cursor:grab;
    position:relative;
    touch-action:pan-y;
  }
  .s-cr-wrap:active{cursor:grabbing}
  .s-cr-track{
    display:flex;
    gap:12px;
    height:100%;
    will-change:transform;
    align-items:stretch;
    padding:0 60px;
  }
  .s-cr-card{
    flex-shrink:0;
    height:100%;
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative;
  }
  /* Placeholder cards (no image yet), fixed ratio box */
  .s-cr-card.ls{aspect-ratio:3/2}
  .s-cr-card.pt{aspect-ratio:2/3}

  .s-cr-card .ph{
    width:100%;height:100%;
    object-fit:cover;display:block;
  }
  /* Cards with a real image, size by height, keep natural ratio, no crop */
  .s-cr-card img{
    height:100%;width:auto;
    object-fit:contain;display:block;
    margin:0 6px;
  }

  /* ════════════════════════════
     S5, FULLBLEED (100vh)
     ════════════════════════════ */
  .s-fullbleed{
    height:100vh;
    position:relative;
    overflow:hidden;
    background:var(--bg-mid);
    padding:0 60px;
  }
  .s-fullbleed img,
  .s-fullbleed video{
    position:absolute;inset:0 60px;
    width:calc(100% - 120px);height:100%;
    object-fit:cover;
  }

  /* ════════════════════════════
     S7, IMAGE + CTA (50/50)
     ════════════════════════════ */
  .s-cta{display:flex;height:100vh;margin-top:var(--gap)}
  .s-cta-img{
    flex:0 0 50%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:var(--bg-mid);
    padding-left:60px;
  }
  .s-cta-img img,
  .s-cta-img .ph{
    aspect-ratio:1/1;
    width:min(70vh, calc(100% - 60px));
    height:auto;
    object-fit:cover;
  }
  .s-cta-content{
    flex:0 0 50%;
    padding:80px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:28px;
  }

  /* ── CONTACT ── */
  .sec{height:100vh;display:flex;flex-direction:column;padding:48px 60px 60px;overflow:hidden}
  .mid{background:var(--bg-mid);color:var(--td)}
  .shdr{flex-shrink:0;margin-bottom:32px}
  .slbl{display:block;font-family:var(--font-b);font-size:var(--h4);font-weight:400;
        letter-spacing:.12em;text-transform:uppercase;opacity:.50;
        margin-bottom:10px;color:var(--td)}
  .div{width:100%;height:0.5px;flex-shrink:0}
  .mid .div{background:rgba(20,20,20,.50)}
  .contact-wrap{display:flex;flex-direction:row;gap:var(--gap);margin:auto 0}
  .contact-l{flex:0 0 calc(50% - 40px);display:flex;flex-direction:column;gap:28px}
  .contact-r{flex:0 0 calc(50% - 40px);display:flex;flex-direction:column;gap:14px}
  .contact-r .c-submit{align-self:flex-start;margin-top:8px}
  .c-form{display:flex;flex-direction:column;gap:14px;flex:1}
  .c-lbl{font-family:var(--font-b);font-size:var(--h4);font-weight:400;
         letter-spacing:.12em;text-transform:uppercase;color:var(--td);opacity:.50}
  .c-val{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
         color:var(--td);line-height:1.65}
  .c-btns{display:flex;gap:12px;margin-top:6px}
  .fi,.ft{background:transparent;border:none;border-bottom:1px solid rgba(20,20,20,.30);
          padding:12px 0;width:100%;font-family:var(--font-b);font-size:var(--h3);
          font-weight:400;color:var(--td);outline:none;transition:border-color .2s}
  .fi::placeholder,.ft::placeholder{color:var(--td);opacity:.35}
  .fi:focus,.ft:focus{border-color:var(--td)}
  .ft{resize:none;height:88px}

  /* ── FOOTER ── */
  .footer{min-height:100vh;background:var(--bg-dark);color:var(--tl);
          display:flex;flex-direction:column;padding:100px 60px 40px}
  .f-main{flex:1;display:flex;flex-direction:row;align-items:stretch;gap:40px;padding-top:16px}
  .f-col{flex:1;display:flex;flex-direction:column}
  .f-col-logo,.f-col-other{justify-content:flex-start;padding-top:48px}
  .f-logo{font-family:var(--font-b);font-size:var(--h2);font-weight:400;color:var(--tl);line-height:1.2}
  .f-tagline{font-family:var(--font-b);font-size:var(--h3);font-weight:400;color:var(--tl);opacity:.50;line-height:1.9;margin-top:8px}
  .f-h2{font-family:var(--font-b);font-size:var(--h2);font-weight:400;
        color:var(--tl);line-height:1.2;margin-bottom:10px}
  .f-lnk{display:block;font-family:var(--font-b);font-size:var(--h3);font-weight:400;
         color:var(--tl);opacity:.50;line-height:1.9;transition:opacity .2s}
  .f-lnk:hover{opacity:1}
  .f-bot{flex-shrink:0;padding-top:24px}
  .f-div{width:100%;height:0.5px;background:rgba(255,255,255,.50);margin-bottom:20px}
  .f-legal{display:flex;align-items:center;justify-content:space-between}
  .f-legal-r{display:flex;gap:24px}
  .f-li{font-family:var(--font-b);font-size:var(--h3);font-weight:400;color:var(--tl);opacity:.50;cursor:pointer;transition:opacity .2s}
  .f-li:hover{opacity:1}

  /* ── Chybějící třídy pro komponenty ── */
  .bfd{color:var(--bg-mid);border-color:var(--td);background:var(--td)}
  .bfd:hover{background:transparent;color:var(--td);border-color:rgba(20,20,20,1)}
  .c-link{display:block;opacity:.50;transition:opacity .2s}
  .c-link:hover{opacity:1}
  .c-btns-block{display:flex;flex-direction:column;gap:6px}
  .mid .slbl{color:rgba(20,20,20,.50)}
  .slbl.anim.on{opacity:.50}

  /* ════════════════════════════════════════════
     MOBILNÍ VERZE — projektové stránky
     ════════════════════════════════════════════ */
  @media (max-width:768px){
    :root{--h1:36px; --h2:24px; --gap:32px}

    /* NAV mobilní */
    .nav{padding:16px 24px}
    .nav-logo{font-size:24px}
    .nav-toggle{display:flex;align-items:center;justify-content:center;
      background:none;border:none;color:var(--tl);width:40px;height:40px;
      font-size:24px;line-height:1;padding:0;cursor:pointer;position:relative;z-index:100}
    .nav-links{position:fixed;top:0;left:0;right:0;
      flex-direction:column;gap:0;align-items:stretch;
      background:var(--bg-dark);padding:80px 24px 24px;
      transform:translateY(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:99}
    .nav.nav-open .nav-links{transform:translateY(0)}
    .nav-lnk{padding:14px 0;border-top:0.5px solid rgba(255,255,255,.15);font-size:16px;opacity:.7}
    .nav-btn{margin-top:16px;padding:13px;text-align:center;justify-content:center;width:100%}

    /* HERO — stack: obrázek nahoře, obsah dole */
    .s-hero{flex-direction:column;height:auto;min-height:100svh}
    .s-hero-img{flex:0 0 auto;height:45vh;min-height:280px}
    .s-hero-content{flex:0 0 auto;padding:40px 24px}
    .s-hero-h1{font-size:36px}
    .s-hero-info,.s-hero-h3{max-width:none}

    /* TEXT SPLITY — stack */
    .s-split{flex-direction:column;padding:56px 0;gap:24px}
    .s-split-l,.s-split-r{flex:0 0 auto;padding:0 24px}
    .s-sec-h1{font-size:32px;margin-bottom:18px}

    /* CAROUSEL */
    .s-cr-wrap{height:50vh;min-height:340px}
    .s-cr-track{padding:0 24px;gap:10px}

    /* FULLBLEED */
    /* PROMO (fullbleed) — celý obrázek na šířku, bez ořezu */
    .s-fullbleed{padding:0 24px;height:auto;min-height:0;overflow:visible}
    .s-fullbleed img,.s-fullbleed video{position:static;inset:auto;width:100%;height:auto;object-fit:contain}

    /* CTA — stack, obrázek celý na šířku */
    .s-cta{flex-direction:column;height:auto;min-height:100svh;margin-top:32px}
    .s-cta-img{flex:0 0 auto;padding:40px 24px 0;justify-content:center}
    .s-cta-img img,.s-cta-img .ph{width:calc(100% - 48px);height:auto;aspect-ratio:auto;object-fit:contain}
    .s-cta-content{flex:0 0 auto;padding:32px 24px 56px}
    .s-cta-content .btn,.s-cta-content > div{flex-wrap:wrap}

    /* CONTACT — stack */
    .sec{height:auto;min-height:100svh;padding:80px 24px 40px}
    .contact-wrap{flex-direction:column;gap:32px;margin:0}
    .contact-l,.contact-r{flex:0 0 auto}

    /* FOOTER — 2 sloupce */
    .footer{padding:80px 24px 32px;min-height:auto}
    .f-main{flex-wrap:wrap;gap:32px 24px;padding-top:0}
    .f-col{flex:0 0 calc(50% - 12px)}
    .f-col-logo{flex:0 0 100%;padding-top:0}
    .f-col-other{padding-top:0}
    .f-legal{flex-direction:column;align-items:flex-start;gap:16px}
    .f-legal-r{flex-direction:column;gap:8px}
  }

  @media (max-width:480px){
    :root{--h1:30px}
    .nav{padding:14px 20px}
    .s-hero-h1{font-size:30px}
    .s-sec-h1{font-size:28px}
    .s-split-l,.s-split-r,.s-hero-content,.s-cta-content,.sec{padding-left:20px;padding-right:20px}
    .f-col{flex:0 0 100%}
  }