/* =====================================================================
   Filsns — firemní web. Identita z vizitek: noční modrošedá #1F1F29,
   papír #FEFFFC, cerulean #0081C0 / #41A1CF, Fraunces + Geist.

   Dvě rozložení z jednoho HTML:
   • počítač (od 760 px): pracovní plocha s tečkovanou mřížkou jako
     výkresový papír, informace v oknech s lištou, obrovské nadpisy
     a okna přes celou šířku obrazovky;
   • telefon (do 759 px): okna mizí, obsah teče pod sebou, tmavý úvod
     na celou obrazovku, projekty jako snímky z telefonu.
   ===================================================================== */
:root{
  --noc:#1F1F29; --noc2:#262632; --noc-linka:rgba(254,255,252,.12);
  --papir:#FEFFFC; --len:#F3F5F2; --plocha:#E7EBE8; --linka:#DCE1DD; --okraj-okna:#C9D0CB; --lista:#F4F6F4;
  --grafit:#2C2C2C; --popel:#646464; --mlha:#A9AEB8; --svetla:#C9CDD4;
  --cerulean:#0071A9; --blankyt:#41A1CF;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mezera:16px; --nav:56px;
  --fokus:var(--cerulean);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papir);color:var(--grafit);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,dl,dd,ul,figure{margin:0}
p{text-wrap:pretty}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;color:var(--noc);text-wrap:balance}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:4px}
.nav,.okno--tmave,.pata{--fokus:var(--blankyt)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- tlačítka a odkazy ---- */
.tlacitko{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:6px;font-size:16px;font-weight:600;line-height:1;border:1px solid transparent;white-space:nowrap;
  transition:background-color .2s,border-color .2s,color .2s}
.tlacitko--svetle{background:var(--papir);color:var(--noc)}
.tlacitko--svetle:hover{background:#E4ECF1}
.tlacitko--obrys{border-color:rgba(254,255,252,.32);color:var(--papir)}
.tlacitko--obrys:hover{border-color:var(--papir)}
.odkaz{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--cerulean);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(0,113,169,.35);transition:text-decoration-color .2s}
.odkaz:hover{text-decoration-color:currentColor}
.ven{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- horní lišta (vždy tmavá, jako lišta systému) ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--noc);color:var(--papir);border-bottom:1px solid var(--noc-linka)}
.nav-obal{height:var(--nav);padding:0 calc(var(--mezera) + 6px);display:flex;align-items:center;gap:32px}
.znacka{display:inline-flex;align-items:center;gap:10px;flex:none}
.znacka svg{width:17px;height:25px;fill:currentColor}
.znacka span{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1}
.nav .odkazy{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:15px;font-weight:500}
.nav .odkazy > a:not(.nav-kontakt){opacity:.82;transition:opacity .2s}
.nav .odkazy > a:not(.nav-kontakt):hover{opacity:1}
.jazyky{display:inline-flex;gap:2px;font-size:13px;font-weight:500;letter-spacing:.02em}
.jazyky a{padding:4px 6px;border-radius:4px;opacity:.6;transition:opacity .2s}
.jazyky a:hover{opacity:1}
.jazyky a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav-kontakt{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:6px;
  background:var(--papir);color:var(--noc);font-weight:600;transition:background-color .2s}
.nav-kontakt:hover{background:#E4ECF1}
.menu{display:none;margin-left:auto;width:44px;height:44px;border-radius:6px;position:relative}
.menu span,.menu span::before,.menu span::after{position:absolute;left:12px;width:20px;height:1.5px;
  background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.menu span{top:21px}
.menu span::before,.menu span::after{content:"";left:0}
.menu span::before{top:-6px}
.menu span::after{top:6px}
.nav.otevrena .menu span{background:transparent}
.nav.otevrena .menu span::before{transform:translateY(6px) rotate(45deg)}
.nav.otevrena .menu span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- logo v úvodu (samotná značka, bez výkresu) ---- */
.logo-velke{display:block;height:auto;fill:var(--papir)}
/* na telefonu je okno s logem skryté a logo se ukáže přímo v úvodu pod názvem */
.logo-mobil{display:none;fill:var(--papir)}

/* ---- obsah (společné) ---- */
/* v úvodu jen název firmy, roztažený přes celou šířku okna (cqi = % šířky okna) */
.okno--uvod .okno-telo{container-type:inline-size}
.hero h1{color:var(--papir);font-size:34cqi;font-weight:400;line-height:.86;letter-spacing:-.035em;margin-left:-.04em;white-space:nowrap}
.hero-akce{display:flex;flex-wrap:wrap;gap:12px}
.popis h3{line-height:1.05;letter-spacing:-.015em}
.popis > p{margin-top:14px}
.udaje{margin-top:24px;border-top:1px solid var(--linka)}
.udaje div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--linka);font-size:15px;line-height:1.45}
.udaje dt{color:var(--popel)}
.udaje dd{color:var(--noc);font-weight:500}
.popis .odkaz{margin-top:24px}
/* dva odkazy pod sebou nebo vedle sebe (karta kalkulačky: otevřít a poptat) */
.odkazy-karty{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.odkazy-karty .odkaz{margin-top:0}
.zasada h3{line-height:1.14;letter-spacing:-.012em}
.zasada p{margin-top:14px;color:var(--popel)}
.onas-velky{font-family:var(--serif);line-height:1.25;color:var(--noc)}
.onas-text p:not(.onas-velky){color:var(--popel)}
.lide{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lide li{padding-top:14px;border-top:1px solid var(--noc)}
.lide strong{display:block;font-weight:600;color:var(--noc)}
.lide span{display:block;font-size:15px;color:var(--popel)}
.kontakt h2{color:var(--papir);letter-spacing:-.022em}
.kontakt-veta{color:var(--svetla)}
.adresy a{display:block;transition:color .2s}
.adresy .k{display:block;color:var(--mlha);font-size:14px}
.adresy .m{display:block;color:var(--papir);font-weight:500;overflow-wrap:anywhere;transition:color .2s}
.adresy a:hover .m{color:var(--blankyt)}

.pata{background:var(--noc);color:var(--mlha);font-size:14px}
.pata-horni{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.pata .znacka{color:var(--papir)}
.pata nav ul{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.pata nav a{color:#D5D8DE;transition:color .2s}
.pata nav a:hover{color:var(--papir)}
.tiraz{margin-top:28px;max-width:62em;line-height:1.6}
.pata-dolni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:18px;padding-top:18px;border-top:1px solid var(--noc-linka);font-size:13px}
.pata-dolni .soukromi{flex:1 1 24em}
.pata .jazyky{color:#D5D8DE}

/* =====================================================================
   POČÍTAČ — pracovní plocha s okny
   ===================================================================== */
@media (min-width:760px){
  body{background-color:var(--plocha);
    background-image:radial-gradient(rgba(31,31,41,.13) 1px,transparent 1.3px);background-size:24px 24px}
  .stul{padding:var(--mezera);display:grid;gap:var(--mezera)}
  .okna{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mezera)}
  .okna > *{grid-column:1 / -1}

  /* okno: lišta s názvem (bez falešných tlačítek — nic by nedělala) */
  .okno{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--papir);
    border:1px solid var(--okraj-okna);border-radius:10px;overflow:hidden;
    box-shadow:0 1px 0 rgba(31,31,41,.04),0 22px 44px -30px rgba(31,31,41,.4)}
  .okno-lista{position:relative;flex:none;display:flex;align-items:center;height:38px;padding:0 14px;
    background:var(--lista);border-bottom:1px solid var(--linka);font-size:13px;color:var(--popel)}
  .okno-titul{color:var(--grafit);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .okno-adresa{margin:0 auto;padding:1px 14px;background:#fff;border:1px solid var(--linka);border-radius:5px;line-height:1.5;font-size:12.5px}
  .okno-telo{flex:1;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,48px)}
  .okno--tmave{background:var(--noc);border-color:#30303E;box-shadow:0 22px 44px -28px rgba(31,31,41,.6)}
  .okno--tmave .okno-lista{background:var(--noc2);border-color:var(--noc-linka);color:var(--mlha)}
  .okno--tmave .okno-titul{color:#D5D8DE}

  /* velké nadpisy přímo na ploše, přes celou šířku */
  .hlava{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;
    padding:clamp(56px,7vw,128px) 6px 0}
  /* spodní odsazení v em: ocásky j, y, p nesmí sáhnout do okna pod nadpisem */
  .hlava h2{font-size:clamp(3.75rem,9.6vw,13rem);line-height:.9;letter-spacing:-.035em;padding-bottom:.17em}

  /* úvod: dvě tmavá okna, dohromady celá obrazovka */
  .okno--uvod .okno-telo{justify-content:space-between;gap:48px;padding:clamp(28px,3.4vw,64px)}
  .uvod-spodek{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px}
  .okno--logo .okno-telo{align-items:center;justify-content:center;background:var(--noc2);padding:clamp(40px,4vw,72px)}
  .logo-velke{width:min(64%,392px)}

  .projekt .nahled{display:block;border-bottom:1px solid var(--linka)}
  .projekt .nahled img{width:100%;aspect-ratio:1440 / 900;object-fit:cover;object-position:top}
  .popis{padding:clamp(24px,2.6vw,44px)}
  .popis h3{font-size:clamp(2.2rem,2.8vw,3.6rem)}
  .popis > p{max-width:38em;font-size:clamp(17px,1.05vw,19px)}

  .zasada h3{font-size:clamp(1.7rem,2.2vw,2.9rem)}
  .zasada p{font-size:clamp(17px,1.05vw,19px)}

  .onas-text .okno-telo{gap:22px}
  .onas-velky{font-size:clamp(1.7rem,2.7vw,3.5rem)}
  .onas-text p:not(.onas-velky){max-width:36em;font-size:clamp(17px,1.15vw,21px)}
  .lide{margin-top:auto;padding-top:28px}

  .okno--kontakt .okno-telo{padding:clamp(32px,4.4vw,88px)}
  .kontakt h2{font-size:clamp(3rem,7.2vw,11rem);line-height:.95;max-width:13em}
  .kontakt-veta{margin-top:clamp(20px,2vw,36px);font-size:clamp(17px,1.3vw,24px);max-width:30em}
  .adresy{display:grid;grid-template-columns:1fr;margin-top:clamp(40px,4.5vw,88px);border-top:1px solid var(--noc-linka)}
  .adresy a{padding:20px 0;border-bottom:1px solid var(--noc-linka)}
  .adresy .m{margin-top:4px;font-size:clamp(19px,1.8vw,32px)}

  .pata-obal{padding:36px calc(var(--mezera) + 6px) 28px}
}

/* široká obrazovka: okna vedle sebe */
@media (min-width:1100px){
  :root{--mezera:18px}
  .hero{min-height:calc(100svh - var(--nav) - 2 * var(--mezera))}
  .okno--uvod{grid-column:1 / span 8}
  .okno--logo{grid-column:9 / span 4}
  .projekt{grid-column:span 6}
  /* ukázky a nástroje: tři okna vedle sebe pod dvěma vlastními produkty */
  .projekt--tretina{grid-column:span 4}
  .zasada{grid-column:span 4}

  /* PRAVIDLO: okna v jedné řadě mají stejné části na stejné výšce (lišta, náhled,
     nadpis, text, každý řádek tabulky, odkazy), i když je text v jednom okně delší.
     Každé okno je subgrid přes společné řádky sekce; mezery mezi řadami oken
     dělá margin, protože mezera mřížky by se vložila i mezi části uvnitř okna. */
  .okna.projekty,.okna.zasady{row-gap:0}
  .projekty .hlava,.zasady .hlava{margin-bottom:var(--mezera)}
  /* projekt: lišta, náhled, nadpis, text, 3 řádky údajů, odkazy = 8 řádků */
  .projekt{display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:0;margin-bottom:var(--mezera)}
  .projekt > .okno-lista{grid-row:1}
  .projekt > .nahled{grid-row:2}
  .projekt > .popis{grid-row:3 / span 6;display:grid;grid-template-rows:subgrid;row-gap:0}
  .popis > .udaje{grid-row:3 / span 3;display:grid;grid-template-rows:subgrid;row-gap:0}
  .popis > .odkaz,.popis > .odkazy-karty{grid-row:6;align-self:start}
  /* zásada: lišta, nadpis, text = 3 řádky */
  .zasada{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;margin-bottom:var(--mezera)}
  .zasada > .okno-lista{grid-row:1}
  .zasada > .okno-telo{grid-row:2 / span 2;display:grid;grid-template-rows:subgrid;row-gap:0}

  /* „O nás" je jedno okno přes celou šířku: text vlevo, zakladatelé vpravo dole */
  .onas-text .okno-telo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,112px)}
  .onas-velky{grid-column:1;max-width:22em}
  .onas-text p:not(.onas-velky){grid-column:1}
  .lide{grid-column:2;grid-row:1 / span 2;align-self:end;grid-template-columns:1fr;gap:22px;margin:0;padding:0}
  .adresy{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--mezera);border-top:0}
  .adresy a{border-top:1px solid var(--noc-linka);border-bottom:0;padding:22px 0 0}
}
/* mezi tabletem a širokou obrazovkou má výkres vlastní řádek, ať není přes půl metru */
@media (min-width:760px) and (max-width:1099.98px){
  .logo-velke{width:196px}
}

/* =====================================================================
   TELEFON — bez oken, obsah pod sebou, ovládání palcem
   ===================================================================== */
@media (max-width:759.98px){
  :root{--nav:60px}
  body{font-size:17px}
  .nav-obal{padding:0 20px}
  .menu{display:block}
  .nav .odkazy{display:none;position:absolute;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));height:calc(100dvh - var(--nav));margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 32px;background:var(--noc);overflow-y:auto}
  .nav.otevrena .odkazy{display:flex}
  .nav .odkazy > a:not(.nav-kontakt){opacity:1;padding:18px 0;border-bottom:1px solid var(--noc-linka);
    font-family:var(--serif);font-size:28px;line-height:1.1}
  .nav .odkazy .jazyky{padding:20px 0 4px;margin-left:-6px;font-size:16px}
  .nav .odkazy .nav-kontakt{margin-top:auto;justify-content:center;min-height:54px;font-size:17px;border-radius:8px}

  .okno-lista{display:none}
  .okno--tmave{background:var(--noc);color:var(--papir)}

  /* úvod na celou výšku telefonu, tlačítka dole pod palcem */
  .okno--uvod .okno-telo{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:36px 20px 28px}
  .uvod-spodek{display:flex;flex-direction:column;gap:28px}
  .hero-akce{flex-direction:column;gap:10px}
  .hero-akce .tlacitko{min-height:54px;border-radius:8px;font-size:17px}
  .okno--logo{display:none}   /* na telefonu logo místo toho v úvodu (.logo-mobil) */
  .logo-mobil{display:block;align-self:center;height:min(34svh,300px);width:auto;aspect-ratio:377.2 / 561.5}

  .okna:not(.hero):not(.kontakt){padding:64px 20px}
  .hlava h2{font-size:clamp(2.4rem,10.5vw,3rem);line-height:1.02;letter-spacing:-.02em}

  /* projekty: snímek webu tak, jak vypadá na telefonu */
  .projekt{margin-top:48px}
  .projekt + .projekt{padding-top:48px;border-top:1px solid var(--linka)}
  .projekt .nahled{display:block;width:min(62%,250px);margin:0 auto;border:7px solid var(--noc);border-radius:36px;overflow:hidden;
    box-shadow:0 30px 50px -30px rgba(31,31,41,.55)}
  .projekt .nahled img{width:100%;aspect-ratio:520 / 1125;object-fit:cover;object-position:top}
  .popis{margin-top:32px}
  .popis h3{font-size:2.25rem}
  .udaje div{grid-template-columns:6.5em 1fr}
  .popis .odkaz{display:flex;justify-content:center;min-height:54px;margin-top:24px;border-radius:8px;
    background:var(--noc);color:var(--papir);text-decoration:none;font-size:17px}
  .odkazy-karty{flex-direction:column;gap:10px}
  .odkazy-karty .odkaz{margin-top:0}
  .popis .odkaz--poptat{background:transparent;color:var(--noc);border:1px solid var(--okraj-okna)}

  .okna.zasady{background:var(--len)}
  .zasada{padding:28px 0;border-top:1px solid var(--linka)}
  .zasada:nth-child(2){margin-top:28px;border-top:0;padding-top:0}
  .zasada h3{font-size:1.75rem}

  /* o nás: fotka od kraje ke kraji */
  .onas-text{margin-top:20px}
  .onas-velky{font-size:1.5rem}
  .onas-text p:not(.onas-velky){margin-top:16px}
  .lide{grid-template-columns:1fr;gap:14px;margin-top:32px}

  .okno--kontakt .okno-telo{padding:64px 20px 40px}
  .kontakt h2{font-size:clamp(2.4rem,10.5vw,3rem);line-height:1.04}
  .kontakt-veta{margin-top:18px}
  .adresy{margin-top:36px}
  .adresy a{display:flex;flex-direction:column;justify-content:center;min-height:72px;padding:12px 0;border-top:1px solid var(--noc-linka)}
  .adresy li:last-child a{border-bottom:1px solid var(--noc-linka)}
  .adresy .m{font-size:19px}

  .pata-obal{padding:36px 20px 28px;border-top:1px solid var(--noc-linka)}
  .pata-horni{flex-direction:column;align-items:flex-start}
  .pata nav ul{gap:0 24px}
  .pata nav a{display:inline-flex;align-items:center;min-height:44px}
  .jazyky a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}