/* 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){
    /* Cely obal tlacitka, ne jen tlacitko - jinak po nem v hlavicce zbyde .btn-shadow flek. */
    #rk-nav,#rk-cta,#rk-lang,header .btn-wrap{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}
  /* Silnejsi kremovy podklad nez holy .glass - badge lezi i na tmavych fotkach
     (NUVEM, Shigeofit) a tmavy text se v cistem skle ztracel (Martin 25.7.). */
  .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;
    background:rgba(236,232,221,.82);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      inset 0 -1px 0 rgba(40,34,26,.12),
      inset 0 0 0 1px rgba(255,255,255,.4),
      0 6px 18px rgba(0,0,0,.18)}

  #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}
  }

/* ====================================================================
   Nasazeno z preview-hero-sphere.html 25.07.2026 (Martin OK).
   ==================================================================== */

/* === Sklenena tlacitka podle finbyd.cz ======================
   Hodnoty vytazene meranim ze zive stranky (getComputedStyle + cssRules 25.7.),
   ne odhadem. Prevzata cela struktura: wrapper > tlacitko > span, conic-gradient
   obrys pres mask-xor a lesk na spanu v rezimu screen. Barvy prepsany na nase
   (inkoustova #141414 misto finbyd navy). */
@property --rk-angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --rk-angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}
.btn-wrap{--anim-t:400ms;--anim-e:cubic-bezier(.25,1,.5,1);--shadow-cut:0px;
  position:relative;z-index:2;display:inline-block;border-radius:999vw;background:transparent;
  pointer-events:none;-webkit-font-smoothing:antialiased;transition:all var(--anim-t) var(--anim-e)}
.btn-glass{--border-width:clamp(1px,.0625em,4px);
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0;
  appearance:none;cursor:pointer;position:relative;pointer-events:auto;z-index:3;
  background:linear-gradient(-75deg,rgba(255,255,255,.3),rgba(255,255,255,.55),rgba(255,255,255,.3));
  border:1px solid rgba(20,20,20,.5);border-radius:999vw;color:#141414;text-decoration:none;
  box-shadow:rgba(0,0,0,.05) 0 .125em .125em inset, rgba(255,255,255,.5) 0 -.125em .125em inset,
    rgba(0,0,0,.2) 0 .25em .125em -.125em, rgba(255,255,255,.2) 0 0 .1em .25em inset;
  transition:all var(--anim-t) var(--anim-e)}
.btn-glass span{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding-inline:1.5em;padding-block:.95em;user-select:none;
  font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:rgba(0,0,0,.08) 0 1px 1px;transition:all var(--anim-t) var(--anim-e)}
/* Lesk, ktery pri najeti prejede pres tlacitko. */
.btn-glass span::after{content:"";display:block;position:absolute;z-index:3;
  width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));
  top:calc(var(--border-width) / 2);left:calc(var(--border-width) / 2);box-sizing:border-box;
  border-radius:999vw;overflow:clip;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(var(--rk-angle-2),rgba(255,255,255,0) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 60%);
  background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;
  transition:background-position calc(var(--anim-t) * 1.25) var(--anim-e), --rk-angle-2 calc(var(--anim-t) * 1.25) var(--anim-e)}
/* Obrys: conic-gradient orezany maskou na 1px ramecek - proto vypada jako broušená hrana. */
.btn-glass::after{content:"";position:absolute;z-index:1;border-radius:999vw;box-sizing:border-box;
  width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));
  top:calc(var(--border-width) / -2);left:calc(var(--border-width) / -2);padding:var(--border-width);
  background:conic-gradient(from var(--rk-angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  /* Longhand, ne shorthand: `mask: ... content-box xor, ...` Chrome neparsoval a cely
     conic-gradient pak vyplnil plochu tlacitka (zmereno: mask=none) - vypadalo to jako kov. */
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-clip:content-box,border-box;
  mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  box-shadow:inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,.5);
  transition:all var(--anim-t) var(--anim-e), --rk-angle-1 500ms ease}
.btn-glass:hover{transform:scale(.975) translateY(-1px);
  box-shadow:rgba(0,0,0,.05) 0 .125em .125em inset, rgba(255,255,255,.5) 0 -.125em .125em inset,
    rgba(0,0,0,.25) 0 .15em .05em -.1em, rgba(255,255,255,.5) 0 0 .05em .1em inset}
.btn-glass:hover::after{--rk-angle-1:-125deg}
.btn-glass:hover span::after{background-position:25% 50%}
.btn-glass:active span::after{background-position:50% 15%;--rk-angle-2:-15deg}
.btn-glass:focus-visible{outline:#141414 solid 3px;outline-offset:4px}
/* Vrzeny stin pod tlacitkem - lezi POD nim, proto vlastni prvek, ne box-shadow. */
/* Puvodni implementace z uiverse (FColombati/odd-ladybug-31) - stejny zdroj, ze ktereho
   vychazi finbyd. Klic je --shadow-cuttoff-fix: obal je o 2em vetsi a posunuty o -1em,
   aby blur nemel co orezavat. Bez te promenne mi stin lezl doleva nahoru. */
.btn-shadow{--shadow-cuttoff-fix:2em;position:absolute;z-index:0;pointer-events:none;overflow:visible;
  width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));
  top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter:blur(clamp(2px,.125em,12px))}
.btn-shadow::after{content:"";position:absolute;z-index:0;inset:0;border-radius:999vw;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.1));
  width:calc(100% - var(--shadow-cuttoff-fix) - .25em);
  height:calc(100% - var(--shadow-cuttoff-fix) - .25em);
  top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);
  padding:.125em;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:all var(--anim-t) var(--anim-e)}
/* Prepinac jazyka je stejne tlacitko, jen kulate a uzsi. */
.btn-glass.is-lang span{padding-inline:1.05em}

/* Polozky menu: v klidu holy text, pri najeti se pod nimi zhmotni sklenena pilulka.
   Pilulka je pseudo-element, takze se rozmery menu pri najeti nemeni a text neposkakuje. */
header nav .nl{position:relative;z-index:1;padding:9px 14px;margin:0 -6px;border-radius:999vw;
  transition:color .3s cubic-bezier(.25,1,.5,1)}
header nav .nl:hover{opacity:1}
header nav .nl::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999vw;
  opacity:0;transform:scale(.9);pointer-events:none;
  background:linear-gradient(-75deg,rgba(255,255,255,.3),rgba(255,255,255,.55),rgba(255,255,255,.3));
  border:1px solid rgba(20,20,20,.28);
  box-shadow:rgba(0,0,0,.05) 0 .1em .1em inset, rgba(255,255,255,.5) 0 -.1em .1em inset,
    rgba(0,0,0,.16) 0 .18em .1em -.12em, rgba(255,255,255,.2) 0 0 .08em .2em inset;
  transition:opacity .3s cubic-bezier(.25,1,.5,1), transform .3s cubic-bezier(.25,1,.5,1)}
header nav .nl:hover::before,
header nav .nl:focus-visible::before{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  header nav .nl::before{transition:none}
}

/* === Ziva sklenena koule (Three.js) =========================
   Martinuv bundle z claude.ai/design 25.7. Stage je full-bleed pres cely hero,
   koule se centruje na #hmOrb (data-sphere-target). Duvod full-bleed: stopa musi
   jit spojite zvenku -> lomem -> ven, a papir se stopou zije UVNITR sceny, aby
   sklo melo co lamat. Ctvercovy canvas uvnitr O tohle neumi. */
.hero-sphere-stage{position:absolute;inset:0;z-index:0;color:var(--persimon);
  contain:layout paint;isolation:isolate;pointer-events:none}
.hero-sphere-stage canvas{display:block;width:100%;height:100%}
/* Misto pro kouli ve slove: prazdna dira, zadne CSS sklo, zadny stin, zadny highlight. */
.sphere-live .hero-mark .hm-orb{box-shadow:none;overflow:visible;background:none}
.sphere-live .hero-mark .hm-orb::after{display:none}
.sphere-live .hero-mark .orb-skin{display:none}
/* Aura i inkoustova stopa ustupuji - papir ted kresli scena a musi sedet na barvu stranky. */
.sphere-live .hero-aura{display:none}
.sphere-live #ink{display:none}