/* RUKOPYS - sdileny design system.
   Vytazeno z index.html 25.07.2026, aby se stejna sada nemusela kopirovat do
   sedmi stranek. Hero (wordmark, koule, inkoustova stopa, aura, uvodni loader)
   zustava inline v index.html - jinde se nepouziva. */
html{scroll-behavior:smooth}
  body{margin:0;background:#ECE8DD;color:#141414;font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
  *{box-sizing:border-box}
  a{text-decoration:none;color:inherit}
  .disp{font-family:'Archivo Black','Arial Black',sans-serif}
  .mono{font-family:'Space Mono',ui-monospace,monospace}
  .sec{scroll-margin-top:62px}
  .nl{transition:opacity .15s}
  .nl:hover{opacity:.55}
  .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-family:'Space Mono',monospace;font-size:12px;font-weight:700}
  :root{--persimon:#F0432A;--cobalt:#0E1A2B;--lime:#C6D43A;--pink:#EC1C8E;--yellow:#F4D90C;--teal:#2BC4B4;--tick:24s;--tilt-a:-4deg;--tilt-b:3deg}
  .sec img{transition:filter .45s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
  .sec img:hover{filter:saturate(1.16) contrast(1.05)}
  .btn-solid{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#141414;color:#ECE8DD;padding:17px 26px;transition:background .25s ease,color .25s ease}
  .btn-solid:hover{background:var(--persimon);color:#ECE8DD}
  .btn-line{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid #141414;padding-bottom:5px}
  .btn-line .btn-arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .btn-line:hover .btn-arr{transform:translateY(4px)}
  @keyframes hhPulse{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

  /* ---------- TICHA SEKCE ----------
     Jazyk hera prenoseny do obsahu: kremova plocha, velky nadpis, prazdno kolem.
     Zamerne tu NENI: barevne pozadi, ramecky, karty, ikony, stiny. Jedina barva je
     kratka linka u cisla sekce. Vsechno ostatni nese typografie a odstup. */
  .sec-quiet{background:#ECE8DD;color:#141414;padding:clamp(96px,14vh,190px) 0 clamp(76px,10vh,140px)}
  .q-wrap{max-width:1180px;margin:0 auto;padding:0 34px}

  .q-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,4vh,52px)}
  .q-num{font-size:12px;font-weight:700;letter-spacing:.16em;color:#141414}
  .q-rule{display:block;width:56px;height:2px;background:var(--persimon)}
  .q-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#5A554B}

  .q-title{font-family:'Archivo Black',sans-serif;font-size:clamp(52px,10.5vw,168px);line-height:.84;letter-spacing:-.04em;margin:0 0 clamp(34px,5vh,70px)}

  /* Text drzi u leveho okraje a nechava pravou polovinu prazdnou - dech je zamer,
     ne nedodelany layout. Na uzkem okne se sloupce slozi pod sebe. */
  .q-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,5vw,88px);align-items:start;max-width:940px}
  .q-lead{margin:0;font-size:clamp(18px,2vw,25px);line-height:1.45;letter-spacing:-.01em;max-width:30ch}
  .q-list{list-style:none;margin:0;padding:0}
  .q-list li{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:14px 0;border-top:1px solid rgba(20,20,20,.16)}
  .q-list li:last-child{border-bottom:1px solid rgba(20,20,20,.16)}

  /* Ukazka prace jde pres celou sirku okna - jediny moment, kdy sekce zvysi hlas. */
  .q-shot{margin:clamp(64px,9vh,130px) 0 0;padding:0}
  .q-shot img{display:block;width:100%;height:clamp(300px,46vh,560px);object-fit:cover}
  .q-shot figcaption{max-width:1180px;margin:14px auto 0;padding:0 34px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8377}

  /* Jedna tmava sekce uprostred trojice - rytmus svetla/tmava/svetla. Bez ni by stranka
     byla monotonni, s vice tmavymi by se vratil puvodni "kazda sekce jiny svet". */
  .sec-quiet.is-dark{background:#141414;color:#F6F2EA}
  .is-dark .q-num{color:#F6F2EA}
  .is-dark .q-label{color:rgba(246,242,234,.62)}
  .is-dark .q-list li{border-top-color:rgba(246,242,234,.2)}
  .is-dark .q-list li:last-child{border-bottom-color:rgba(246,242,234,.2)}
  .is-dark .q-shot figcaption{color:rgba(246,242,234,.5)}

  /* Zrcadlena varianta: nadpis a text vpravo, prazdno vlevo. Strida se s vychozi,
     aby stranka nebyla sloupec stejnych bloku pod sebou. */
  .sec-quiet.is-mirrored .q-head,
  .sec-quiet.is-mirrored .q-title{text-align:right}
  .sec-quiet.is-mirrored .q-head{justify-content:flex-end}
  .sec-quiet.is-mirrored .q-body{margin-left:auto;grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
  .sec-quiet.is-mirrored .q-lead{margin-left:auto;text-align:right}

  @media (max-width:719px){
    .q-wrap,.q-shot figcaption{padding-left:22px;padding-right:22px}
    .q-body{grid-template-columns:1fr;gap:34px}
    .sec-quiet.is-mirrored .q-head,
    .sec-quiet.is-mirrored .q-title,
    .sec-quiet.is-mirrored .q-lead{text-align:left}
    .sec-quiet.is-mirrored .q-head{justify-content:flex-start}
    .sec-quiet.is-mirrored .q-body{grid-template-columns:1fr}
  }


  /* ---------- REFERENCE ----------
     Tri zive weby jako dukaz, ne jako galerie. Nahledy jsou skutecne screenshoty
     produkce porizene 24.07.2026, ne mockupy. Karta je jen obrazek a dva radky pod nim -
     zadny ramecek, stin ani tlacitko; cely blok je odkaz. */
  .refs{background:#ECE8DD;color:#141414;padding:clamp(96px,14vh,190px) 0 clamp(86px,12vh,160px)}
  .refs-grid{max-width:1180px;margin:clamp(34px,5vh,64px) auto 0;padding:0 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,3.4vw,52px)}
  .ref{display:block}
  .ref-shot{position:relative;overflow:hidden;background:#DDD9D0;aspect-ratio:16/10}
  .ref-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .ref:hover .ref-shot img{transform:scale(1.035)}
  .ref-name{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:16px}
  .ref-name b{font-family:'Archivo Black',sans-serif;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em;font-weight:400}
  .ref-name span{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8377;transition:color .25s ease}
  .ref:hover .ref-name span{color:var(--persimon)}
  .ref-what{margin:6px 0 0;font-size:14px;line-height:1.5;color:#5A554B}


  /* ---------- MEZIDECH (citat) ----------
     Zadny obrazek, zadny ramecek. Jen veta a hodne mista kolem ni - stranka se tu
     nadechne mezi dvema servisnimi bloky. */
  .breath{background:#ECE8DD;color:#141414;padding:clamp(120px,20vh,250px) 34px}
  .breath-in{max-width:1000px;margin:0 auto}
  .breath q{quotes:none}
  .breath blockquote{margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(28px,4.4vw,62px);line-height:1.08;letter-spacing:-.03em}
  .breath blockquote em{font-style:normal;color:var(--persimon)}
  .breath-who{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,4vh,52px);font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A554B}
  .breath-who i{display:block;width:40px;height:1px;background:rgba(20,20,20,.3);font-style:normal}

  /* ---------- MANIFEST (paradox) ----------
     Nejvetsi typografie na strance. Tady stranka mluvi nejhlasiteji, proto vedle ni
     nesmi stat nic dalsiho nez tri kratke radky. */
  .manifest{background:#141414;color:#F6F2EA;padding:clamp(110px,17vh,220px) 34px}
  .manifest-in{max-width:1180px;margin:0 auto}
  .manifest h2{margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(46px,9.6vw,152px);line-height:.86;letter-spacing:-.04em}
  .manifest h2 span{color:var(--persimon)}
  .manifest p{margin:clamp(30px,4.6vh,58px) 0 0;font-size:clamp(17px,1.8vw,22px);line-height:1.5;color:rgba(246,242,234,.8);max-width:44ch}
  .manifest-rules{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,54px);margin-top:clamp(38px,5.4vh,74px);font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,242,234,.62)}
  .manifest-rules b{font-weight:400;color:#F6F2EA}

  /* ---------- NABIDKA (full) ---------- */
  .offer{background:#ECE8DD;color:#141414;padding:clamp(96px,14vh,190px) 34px}
  .offer-in{max-width:1180px;margin:0 auto}
  .offer h2{margin:0 0 clamp(30px,4.4vh,58px);font-family:'Archivo Black',sans-serif;font-size:clamp(46px,8.6vw,132px);line-height:.86;letter-spacing:-.04em}
  .offer-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,84px);align-items:start}
  .offer-lead{margin:0;font-size:clamp(17px,1.8vw,22px);line-height:1.5;max-width:32ch}
  .offer-steps{list-style:none;margin:0;padding:0;counter-reset:st}
  .offer-steps li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(20,20,20,.16);font-size:15.5px;line-height:1.45}
  .offer-steps li:last-child{border-bottom:1px solid rgba(20,20,20,.16)}
  .offer-steps b{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#8A8377;flex-shrink:0}
  .offer-cta{display:inline-block;margin-top:clamp(34px,5vh,64px);font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#141414;color:#ECE8DD;padding:17px 28px;transition:background .25s ease}
  .offer-cta:hover{background:var(--persimon)}

  /* ---------- KONTAKT ----------
     E-mail je nejvetsi prvek sekce - je to jedina vec, kterou tu ma navstevnik udelat. */
  .contact{background:#ECE8DD;color:#141414;padding:clamp(96px,14vh,190px) 34px clamp(110px,16vh,200px)}
  .contact-in{max-width:1180px;margin:0 auto}
  .contact h2{margin:0 0 clamp(34px,5vh,66px);font-family:'Archivo Black',sans-serif;font-size:clamp(44px,8vw,124px);line-height:.88;letter-spacing:-.04em}
  .contact h2 span{color:var(--persimon)}
  .contact p{margin:0 0 clamp(26px,3.6vh,44px);font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:#5A554B;max-width:40ch}
  .contact-mail{display:inline-block;font-family:'Archivo Black',sans-serif;font-size:clamp(22px,4.2vw,58px);letter-spacing:-.03em;line-height:1.05;border-bottom:3px solid rgba(20,20,20,.2);padding-bottom:6px;transition:border-color .3s ease,color .3s ease}
  .contact-mail:hover{color:var(--persimon);border-bottom-color:var(--persimon)}

  @media (max-width:719px){
    .offer-body{grid-template-columns:1fr;gap:34px}
  }


  /* ---------- O NAS ----------
     Dva sloupce: text vlevo, rovnice vpravo. Rovnice (jeden kontakt x sit specialistu
     = vas rukopys) je jediny grafickejsi prvek sekce, proto kolem ni nic dalsiho nestoji. */
  .about{background:#141414;color:#F6F2EA;padding:clamp(96px,14vh,190px) 34px clamp(86px,12vh,160px)}
  .about-in{max-width:1180px;margin:0 auto}
  .about h2{margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(44px,8vw,124px);line-height:.86;letter-spacing:-.04em}
  .about h2 em{font-style:normal;color:var(--persimon)}
  .about-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(34px,5.4vw,92px);align-items:start;margin-top:clamp(34px,5vh,68px)}
  .about-body p{margin:0 0 18px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:rgba(246,242,234,.82);max-width:44ch}
  .about-body p:last-child{margin-bottom:0}
  .about-note{margin-top:26px;padding-top:20px;border-top:1px solid rgba(246,242,234,.18);font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:rgba(246,242,234,.55);max-width:52ch}
  .about-eq{display:flex;flex-direction:column;gap:14px;font-family:'Archivo Black',sans-serif;font-size:clamp(20px,2.4vw,32px);line-height:1.05;letter-spacing:-.02em}
  .about-eq span{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:1px solid rgba(246,242,234,.18)}
  .about-eq span:last-child{border-bottom:0;color:var(--persimon)}
  .about-eq i{font-style:normal;color:rgba(246,242,234,.4);font-size:.7em}

  @media (max-width:719px){
    .about-body{grid-template-columns:1fr;gap:34px}
  }

  /* --- mobile hamburger nav --- */
  #rk-burger{display:none;background:none;border:1px solid #141414;cursor:pointer;padding:9px 14px;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#141414;line-height:1;margin-left:auto;flex-shrink:0}
  #rk-menu{display:none;position:fixed;inset:0;z-index:300;background:var(--cobalt)}
  #rk-menu.open{display:flex;flex-direction:column}
  .rk-mh{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid rgba(246,242,234,.12)}
  .rk-mb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:36px 28px}
  #rk-menu a.rk-nl{display:block;font-family:'Archivo Black','Arial Black',sans-serif;font-size:clamp(28px,7.5vw,50px);line-height:1.1;letter-spacing:-0.01em;color:#F6F2EA;padding:12px 0;border-top:1px solid rgba(246,242,234,.12)}
  #rk-menu a.rk-nl:first-child{border-top:none}
  #rk-menu a.rk-nl:hover{color:var(--persimon)}
  .rk-cta-m{display:inline-block;margin-top:28px;font-family:'Space Mono',ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:var(--persimon);color:#141414;padding:15px 22px}
  #rk-close{background:none;border:none;cursor:pointer;font-family:'Space Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(246,242,234,.7);padding:0}
  @media(max-width:767px){
    #rk-nav,#rk-cta,#rk-lang{display:none!important}
    #rk-burger{display:block}
    footer nav{flex-wrap:wrap!important;gap:10px 14px!important}
  }

  /* ---------- SKLENENY SYSTEM ----------
     Jedna sada pravidel pro vsechny sklenene prvky, aby nevzniklo sest ruznych skel.
     Zasada: sklo se dava JEN tam, kde neco prekryva - lepici hlavicka nad obsahem,
     popisek lezici na fotografii, tlacitko nad plochou. Sklo na prazdne kremove plose
     neni sklo, ale sedy flek.
     Vrstvy: backdrop-filter dela lom, gradient objem, vnitrni stiny hranu (svetlo shora,
     tmavsi spodek). */
  .glass{
    -webkit-backdrop-filter:blur(14px) saturate(1.6) brightness(1.04);
    backdrop-filter:blur(14px) saturate(1.6) brightness(1.04);
    background:linear-gradient(155deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 42%, rgba(120,114,104,.08) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      inset 0 -1px 0 rgba(40,34,26,.10),
      inset 0 0 0 1px rgba(255,255,255,.34),
      0 6px 18px rgba(40,34,26,.10);
  }
  /* Na tmavem podkladu se obraci smer svetla, jinak sklo vypada jako mlecna nalepka. */
  .glass.on-dark{
    background:linear-gradient(155deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 46%, rgba(0,0,0,.06) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.16),
      0 8px 22px rgba(0,0,0,.24);
  }
  .glass-pill{border-radius:999px}

  /* Hlavicka je kremova, dokud je stranka nahore - tam by sklo nemelo co lamat. */
  header{transition:background .35s ease, box-shadow .35s ease}
  header.is-glass{
    background:rgba(236,232,221,.62);
    -webkit-backdrop-filter:blur(16px) saturate(1.7);
    backdrop-filter:blur(16px) saturate(1.7);
    border-bottom-color:rgba(20,20,20,.08);
    box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(40,34,26,.07);
  }

  /* Popisek lezici NA fotografii - tady ma sklo nejvic co delat. position:absolute
     musi stat AZ ZA .glass, jinak by ho prepsalo. */
  .q-shot{position:relative}
  .q-shot figcaption{position:absolute;left:34px;bottom:22px;max-width:none;margin:0;padding:11px 18px;
    color:#141414;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
  .ref-badge{position:absolute;right:12px;bottom:12px;z-index:2;padding:8px 14px;
    font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#141414}

  #rk-cta,.offer-cta{border-radius:999px}
  #rk-lang{border-color:transparent}

  @media (max-width:719px){
    .q-shot figcaption{left:22px;bottom:16px;padding:9px 14px}
  }