: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;
    --pad:48px 60px 60px; --gap:80px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg-dark);color:var(--tl);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(32px);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}.anim.d5{transition-delay:.50s}
  .anim.d6{transition-delay:.60s}.anim.d7{transition-delay:.70s}

  /* SECTION SHELL */
  .sec{height:100vh;display:flex;flex-direction:column;padding:var(--pad);overflow:hidden}
  .dark{background:var(--bg-dark);color:var(--tl)}
  .mid {background:var(--bg-mid); color:var(--td)}

  /* HEADER ROW */
  .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}
  .dark .slbl{color:var(--tl)} .mid .slbl{color:var(--td)}
  .div{width:100%;height:0.5px;flex-shrink:0}
  .dark .div{background:rgba(255,255,255,.50)} .mid .div{background:rgba(20,20,20,.50)}

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

  /* BUTTONS */
  .btn{display:inline-flex;align-items:center;font-family:var(--font-b);font-size:var(--h3);
       font-weight:400;letter-spacing:.08em;padding:12px 28px;border:1px solid;
       background:transparent;transition:background .12s,color .12s,border-color .12s;cursor:pointer}
  .bl{color:var(--tl);border-color:rgba(255,255,255,1)}
  .bl:hover{background:var(--tl);color:var(--bg-dark)}
  .bd{color:var(--td);border-color:rgba(20,20,20,.40)}
  .bd:hover{background:var(--td);color:var(--bg-mid)}
  .bfl{background:var(--tl);color:var(--bg-dark);border-color:var(--tl)}
  .bfl:hover{background:transparent;color:var(--tl)}
  .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)}

  /* ── 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)}

  /* ── S00 HERO ── */
  .hero{height:100vh;position:relative;overflow:hidden;
        display:flex;align-items:center;justify-content:center;background:var(--bg-dark)}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
  .hero-ov{position:absolute;inset:0;background:rgba(0,0,0,.50)}
  .hero-body{position:relative;z-index:2;display:flex;flex-direction:column;
             align-items:center;text-align:center;gap:40px}
  .hero-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
           color:var(--tl);line-height:1.1;letter-spacing:-.01em}
  .hero-btns{display:flex;gap:16px}

  /* ── S01 ABOUT ── */
  .about-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}
  .about-top{flex:35 1 0;display:flex;flex-direction:row;align-items:flex-start;padding-top:20px;gap:var(--gap)}
  .about-tl,.about-tr{flex:0 0 calc(50% - 40px)}
  .about-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
            line-height:1.1;letter-spacing:-.01em;color:var(--tl)}
  .about-desc{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
              line-height:1.7;color:var(--tl);opacity:.80}
  .about-desc p+p{margin-top:1em}
  .about-bot{flex:65 1 0;display:flex;align-items:center}
  .stats-row{display:grid;grid-template-columns:repeat(4,1fr);column-gap:40px;width:100%}
  .rnum{font-family:var(--font-h1);font-size:128px;font-weight:400;line-height:1;
        letter-spacing:-.02em;color:var(--tl);display:flex;align-items:flex-end;
        margin-bottom:8px;gap:0;font-variant-numeric:tabular-nums}
  .drum{display:inline-block;height:1em;overflow:hidden;letter-spacing:0}
  .strip{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .dcell{display:block;height:1em;line-height:1}
  .dstat{display:inline-block;line-height:1;letter-spacing:0;font-size:var(--h2);font-weight:700;vertical-align:bottom}
  .stat-lbl{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
            color:var(--tl);line-height:1.7;opacity:1}

  /* ── CAROUSEL (shared) ── */
  .cr-wrap{overflow:hidden;cursor:grab;flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;touch-action:pan-y}
  .cr-wrap:active{cursor:grabbing}
  .cr-track{display:flex;gap:24px;will-change:transform;align-items:flex-start}

  /* ── S02 CASES ── */
  .case-card{flex-shrink:0;width:calc((100vw - 120px - 72px)/3.5);
             display:flex;flex-direction:column;gap:14px;cursor:pointer;text-decoration:none;color:inherit}
  .case-img{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;flex-shrink:0;max-height:calc(100vh - 320px)}
  .case-img img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .case-card:hover .case-img img{transform:scale(1.04)}
  .case-h2{font-family:var(--font-b);font-size:var(--h2);font-weight:400;
           color:var(--tl);line-height:1.2}
  .case-p{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
          color:var(--tl);opacity:1;line-height:1.65}
  .tags{display:none}
  .tag{font-family:var(--font-b);font-size:var(--h4);font-weight:400;
       letter-spacing:.10em;text-transform:uppercase;opacity:.50;
       border:1px solid;padding:5px 12px}
  .dark .tag{color:var(--tl);border-color:rgba(255,255,255,.35)}
  .mid  .tag{color:var(--td);border-color:rgba(20,20,20,.35)}

  /* ── S03 CLIENTS ── */
  .clients-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}
  .clients-top{flex:0 0 30%;display:flex;flex-direction:row;align-items:flex-start;padding-top:20px;gap:var(--gap)}
  .clients-tl,.clients-tr{flex:0 0 calc(50% - 40px)}
  .clients-bot{flex:1;display:flex;align-items:stretch}
  .logo-grid{display:grid;grid-template-columns:repeat(5,1fr);
             grid-template-rows:repeat(3,1fr);gap:2px;width:100%;height:100%}
  .logo-box{background:transparent;display:flex;align-items:center;
            justify-content:center;color:rgba(255,255,255,.22);
            font-size:11px;letter-spacing:.10em;text-transform:uppercase}
  .logo-img{height:36px;width:auto;mix-blend-mode:screen;display:block;}

  /* ── SPLIT (Services + Proces) ── */
  .split-wrap{display:flex;flex-direction:row;flex:1;gap:var(--gap);overflow:hidden}
  .split-h{flex:0 0 calc(50% - 40px);overflow:hidden}
  .split-content{display:flex;flex-direction:column;justify-content:center;gap:24px}
  .sec-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
          line-height:1.1;letter-spacing:-.01em}
  .dark .sec-h1{color:var(--tl)} .mid .sec-h1{color:var(--td)}

  /* ACCORDION */
  .accordion{display:flex;flex-direction:column}
  .acc-item{border-top:1px solid}
  .acc-item:last-child{border-bottom:1px solid}
  .dark .acc-item{border-color:rgba(255,255,255,.25)}
  .mid  .acc-item{border-color:rgba(20,20,20,.25)}
  .acc-hdr{display:flex;align-items:center;justify-content:space-between;
           padding:13px 0;cursor:pointer;background:transparent;border:none;
           width:100%;text-align:left}
  .acc-title{font-family:var(--font-b);font-size:var(--h2);font-weight:400;line-height:1.2}
  .dark .acc-title{color:var(--tl)} .mid .acc-title{color:var(--td)}
  .acc-icon{font-size:18px;opacity:1;transition:transform .35s;flex-shrink:0;line-height:1}
  .dark .acc-icon{color:var(--tl)} .mid .acc-icon{color:var(--td)}
  .acc-item.open .acc-icon{transform:rotate(45deg)}
  .acc-body{max-height:0;overflow:hidden;transition:max-height .7s cubic-bezier(.16,1,.3,1)}
  .acc-item.open .acc-body{max-height:260px}
  .acc-inner{padding:0 0 13px;font-family:var(--font-b);font-size:var(--h3);
             font-weight:400;line-height:1.65;opacity:1}
  .dark .acc-inner{color:var(--tl)} .mid .acc-inner{color:var(--td)}

  /* ── S05 VIDEO ── */
  .vid-sec{height:100vh;position:relative;overflow:hidden;
           display:flex;align-items:center;justify-content:center;background:var(--bg-dark)}
  .vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vid-ov{position:absolute;inset:0;background:rgba(0,0,0,.50)}
  .vid-body{position:relative;z-index:2;display:flex;flex-direction:column;
            align-items:center;text-align:center;gap:36px;width:100%}
  .vid-h1{font-family:var(--font-h1);font-size:var(--h1);font-weight:400;
          color:var(--tl);line-height:1.1;letter-spacing:-.01em;
          width:100%;padding:0 60px;box-sizing:border-box}

  .cr-track{display:flex;gap:48px;will-change:transform;align-items:flex-start}
  #cr-rev .cr-track{align-items:stretch}
  #cr-art .cr-track{align-items:stretch}
  /* ── S07 REVIEWS ── */
  .rev-card{flex-shrink:0;width:calc((100vw - 120px - 96px)/3.5);
            display:flex;flex-direction:column;padding:0}
  .rev-quote-icon{color:var(--td);opacity:1;margin-bottom:32px;flex-shrink:0}
  .rev-quote{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
             line-height:1.75;color:var(--td)}
  .rev-footer{margin-top:auto;padding-top:128px;display:flex;flex-direction:column;gap:0}
  .rev-avatar{width:88px;height:88px;border-radius:0;
              background:#a8a8a8;display:flex;align-items:center;
              justify-content:center;font-size:14px;color:rgba(6,6,6,.45);
              letter-spacing:.05em;flex-shrink:0;margin-bottom:14px}
  .rev-name{font-family:var(--font-b);font-size:var(--h3);font-weight:400;
            color:var(--td);line-height:1.4}
  .rev-pos{font-family:var(--font-b);font-size:var(--h4);font-weight:400;
           letter-spacing:.10em;text-transform:uppercase;color:var(--td);opacity:.65;margin-top:4px}

  /* ── S08 ARTICLES ── */
  .art-card{flex-shrink:0;width:calc((100vw - 120px - 72px)/3.5);cursor:pointer;display:flex;flex-direction:column}
  .art-img{width:100%;aspect-ratio:4/5;position:relative;overflow:hidden}
  .art-img img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .art-card:hover .art-img img{transform:scale(1.04)}
  .art-ov{position:absolute;inset:0;background:rgba(255,255,255,.20);pointer-events:none}
  .art-body{padding:20px 0 32px;display:flex;flex-direction:column;gap:12px;flex:1}
  .art-h2{font-family:var(--font-b);font-size:var(--h2);font-weight:400;
          color:var(--td);line-height:1.2}
  .art-tag{display:inline-flex;align-items:center;font-family:var(--font-b);font-size:var(--h3);font-weight:400;color:var(--tl);border:1px solid var(--td);padding:8px 20px;background:var(--td);cursor:pointer;align-self:flex-start;margin-top:auto;transition:background .12s,color .12s,border-color .12s}
  .art-tag:hover{background:transparent;color:var(--td);border-color:var(--td)}

  /* ── S09 CONTACT ── */
  .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:24px}
  .contact-r{flex:0 0 calc(50% - 40px);display:flex;flex-direction:column;gap:14px}
  .contact-l .c-btns-block{margin-top:0}
  .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-link{display:block;opacity:.50;transition:opacity .2s}
  .c-link:hover{opacity:1}
  .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{justify-content:flex-start;padding-top:48px}
  .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,.30);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}
  /* IMG UTILITY */
  .img-cover{width:100%;height:100%;object-fit:cover;display:block}
  .case-overlay{position:absolute;inset:0;background:rgba(20,20,20,.10)}

  /* ════════════════════════════════════════════
     MOBILNÍ VERZE
     768px = tablet/velký mobil · 480px = telefon
     ════════════════════════════════════════════ */
  @media (max-width:768px){
    :root{
      --h1:38px; --h2:24px; --pad:80px 24px 40px; --gap:32px;
    }
    /* Sekce: hybrid výšky */
    .sec{height:auto;min-height:100svh}
    .hero{height:100svh;min-height:560px}
    .vid-sec{height:100svh;min-height:560px}

    /* NAV — mobilní (hamburger se aktivuje JS třídou .nav-open) */
    .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 */
    .hero-h1{font-size:34px}
    .hero-btns{flex-direction:column;gap:12px;width:100%;max-width:320px}
    .hero-btns .btn{justify-content:center;width:100%}

    /* ABOUT — stack + statistiky 2×2 */
    .about-wrap{overflow:visible}
    .about-top{flex-direction:column;gap:18px}
    .about-tl,.about-tr{flex:0 0 auto}
    .about-bot{align-items:flex-start}
    .stats-row{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:24px}
    .rnum{font-size:48px}
    .dstat{font-size:18px}

    /* CASES / ARTICLES carousel — 1 karta + náhled další */
    .case-card,.art-card{width:78vw}
    .case-img{max-height:none}
    /* jen název + první věta */
    .case-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

    /* CLIENTS — stack + loga 3 sloupce */
    .clients-wrap{overflow:visible}
    .clients-top{flex-direction:column;flex:0 0 auto;gap:16px}
    .clients-tl,.clients-tr{flex:0 0 auto}
    .clients-bot{margin-top:24px}
    .logo-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);column-gap:8px;row-gap:32px}
    .logo-img{height:28px}

    /* SPLITY (services + proces) — obrázek nahoře/dole dle pořadí, obsah přirozeně */
    .split-wrap{flex-direction:column;gap:24px;overflow:visible}
    .split-h{flex:0 0 auto;overflow:visible}
    .split-h:not(.split-content){height:38vw;min-height:200px}
    .split-content{height:auto}
    .acc-item.open .acc-body{max-height:400px}

    /* VIDEO */
    .vid-h1{font-size:30px;padding:0 24px}

    /* REVIEWS carousel */
    .rev-card{width:80vw}
    .rev-footer{padding-top:40px}

    /* CONTACT — stack */
    .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:32px; --pad:72px 20px 36px}
    .nav{padding:14px 20px}
    .hero-h1{font-size:30px}
    .case-card,.art-card{width:84vw}
    .rev-card{width:88vw}
    .logo-img{height:24px}
    .f-col{flex:0 0 100%}
    .vid-h1{font-size:26px;padding:0 20px}
    .about-h1{font-size:28px}
  }