/* ============================================================
   ApeStay · apestay.com
   ------------------------------------------------------------
   Dve rozhodnutia, z ktorých vychádza celá stránka.

   1. Sýta farba sa objaví JEDINE tam, kde znamená obsadenosť.
      Všetko ostatné je čierna na papieri. Farba tu nie je
      ozdoba, ale údaj, presne ako v samotnej aplikácii.

   2. Panely sú presklené a plávajú nad ambientnou vrstvou.
      Sklo potrebuje mať čo lomiť, preto je pod ním rozostrené
      pole v tom istom odtieni, aký nesie obsadenosť. Palety sa
      tým nerozšíri, len sa tá jediná farba objaví aj ako
      atmosféra, nie iba ako plný pás v kalendári.
   ============================================================ */

:root {
  --ink:        #12141a;
  --ink-70:     #474b56;
  --muted:      #6c6f77;
  --paper:      #eeedea;
  --rule:       rgba(18, 20, 26, 0.10);
  /* Jediná sýta farba na stránke. Znamená obsadený termín. */
  --obsadene:   #2740d6;
  --obsadene-8: rgba(39, 64, 214, 0.09);

  /* Sklo. Vrstvy sa líšia hustotou, nie farbou. */
  --sklo:        rgba(255, 255, 255, 0.46);
  --sklo-husto:  rgba(255, 255, 255, 0.66);
  --sklo-riedko: rgba(255, 255, 255, 0.32);
  --sklo-okraj:  rgba(255, 255, 255, 0.75);
  --rozostrenie: blur(28px) saturate(175%);

  /* Odlesk na hornej hrane a mäkký tieň pod panelom. Spolu robia
     dojem, že panel leží nad plochou, nie je do nej vlepený. */
  --odlesk: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.30);
  --tien-1: 0 1px 2px rgba(18,20,26,.05), 0 8px 24px rgba(18,20,26,.06);
  --tien-2: 0 2px 4px rgba(18,20,26,.05), 0 20px 48px rgba(18,20,26,.10);

  --r-panel: 24px;
  --r-karta: 20px;
  --r-drobne: 12px;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter Tight', system-ui, sans-serif;
  --data:    'IBM Plex Mono', ui-monospace, monospace;

  --sirka: 1180px;
  --medzera: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--paper); }

body {
  position: relative;
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ambientná vrstva. Mäkké polia v odtieni obsadenosti, veľmi riedke.
   Je pripevnená, takže panely nad ňou pri posúvaní naozaj plávajú
   a lom skla sa mení podľa toho, nad čím panel práve je. */
.pozadie {
  /* Ambientná vrstva, cez ktorú má sklo čo lomiť.
     Zámerne NIE position: fixed. Chromium nevie spoľahlivo vziať
     pripevnenú vrstvu ako podklad pre backdrop-filter a nad hlavičkou
     potom zostával svetlý pás cez celú šírku. Vrstva preto pokrýva celý
     dokument a polia sú rozložené po jeho výške, takže ten istý panel
     aj tak vyzerá inak podľa toho, kde na stránke leží. */
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 800px at 88% 1%,   rgba(39,64,214,.34), transparent 62%),
    radial-gradient(900px 700px  at 2% 12%,   rgba(39,64,214,.20), transparent 60%),
    radial-gradient(1000px 800px at 96% 30%,  rgba(39,64,214,.18), transparent 62%),
    radial-gradient(1200px 900px at 10% 48%,  rgba(39,64,214,.24), transparent 64%),
    radial-gradient(1000px 800px at 92% 66%,  rgba(39,64,214,.20), transparent 62%),
    radial-gradient(1200px 900px at 24% 86%,  rgba(39,64,214,.26), transparent 64%),
    radial-gradient(900px 700px  at 80% 99%,  rgba(39,64,214,.22), transparent 62%);
}

/* Obsah leží nad ambientnou vrstvou. Hlavička tu zámerne nie je,
   má vlastné position: sticky a vyšší z-index. */
main, footer { position: relative; z-index: 1; }

a { color: inherit; }

.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 24px; }

/* ---------- Typografia ---------- */
.oko {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 560px) { .oko { letter-spacing: 0.11em; } }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(36px, 5.1vw, 62px); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0; text-wrap: pretty; }
.vedie { font-size: clamp(17px, 1.7vw, 20px); color: var(--ink-70); max-width: 54ch; }

/* ---------- Sklo ako spoločný základ ---------- */
.sklo {
  background: var(--sklo);
  -webkit-backdrop-filter: var(--rozostrenie);
  backdrop-filter: var(--rozostrenie);
  border-radius: var(--r-panel);
  box-shadow: var(--odlesk), var(--tien-1);
}

/* ---------- Hlavička ako plávajúca lišta ---------- */
/* Pripnutá je samotná lišta, nie jej obal. Keď bolo position: sticky
   na obale, jeho box sa pri rozostrení pozadia správal ako nepriehľadná
   plocha a nad hlavičkou zostával svetlý pás cez celú šírku. */
.hlavicka {
  position: sticky; top: 14px; z-index: 40;
  padding: 0 24px;
  margin-bottom: -74px;   /* lišta pláva nad obsahom, nezaberá miesto */
}
.hlavicka-vnutro {
  width: 100%; max-width: var(--sirka); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 60px; padding: 0 12px 0 20px;
  background: var(--sklo-riedko);
  -webkit-backdrop-filter: var(--rozostrenie);
  backdrop-filter: var(--rozostrenie);
  border-radius: 999px;
  box-shadow: var(--odlesk);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.hlavicka.pri-scrolle .hlavicka-vnutro {
  background: var(--sklo-husto);
  box-shadow: var(--odlesk), var(--tien-1);
}
.znacka { width: 124px; height: auto; display: block; color: var(--ink); }
.hlavicka-odkazy { display: flex; align-items: center; gap: 6px; }
.hlavicka-odkazy a {
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-70);
  padding: 8px 14px; border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease;
}
.hlavicka-odkazy a:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.hlavicka-odkazy .prihlasenie {
  color: var(--ink); background: rgba(255,255,255,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
@media (max-width: 760px) { .hlavicka-odkazy .schovat-mobil { display: none; } }

/* ---------- Tlačidlá: kapsule ---------- */
.tlacidlo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: 15px; font-weight: 500;
  padding: 14px 26px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--tien-1);
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s ease;
}
.tlacidlo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--tien-2); }
.tlacidlo-sklo {
  background: var(--sklo-husto); color: var(--ink);
  -webkit-backdrop-filter: var(--rozostrenie);
  backdrop-filter: var(--rozostrenie);
  box-shadow: var(--odlesk), var(--tien-1);
}
.tlacidlo:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--obsadene); outline-offset: 3px;
}


/* ---------- Právne stránky ---------- */
.pravne { padding: clamp(112px, 13vw, 150px) 0 var(--medzera); }

.pravne-obal {
  max-width: 800px; margin: 0 auto;
  background: var(--sklo);
  -webkit-backdrop-filter: var(--rozostrenie);
  backdrop-filter: var(--rozostrenie);
  border-radius: var(--r-panel);
  box-shadow: var(--odlesk), var(--tien-1);
  padding: clamp(28px, 5vw, 56px);
}

.pravne h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.pravne-datum {
  font-family: var(--data); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.pravne h2 {
  font-size: 20px; margin: 34px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--rule);
}
.pravne h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.pravne h3 { font-size: 16px; margin: 20px 0 8px; }
.pravne p { font-size: 15px; line-height: 1.7; color: var(--ink-70); margin-bottom: 12px; }
.pravne ul, .pravne ol { font-size: 15px; line-height: 1.7; color: var(--ink-70); padding-left: 22px; margin-bottom: 12px; }
.pravne li { margin-bottom: 6px; }
.pravne strong { color: var(--ink); }
.pravne a { color: var(--obsadene); }

.pravne-tabulka { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0 18px; }
.pravne-tabulka th, .pravne-tabulka td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top;
}
.pravne-tabulka th { font-family: var(--data); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.pravne-ramik {
  background: rgba(39, 64, 214, 0.06);
  border-radius: var(--r-drobne);
  padding: 16px 18px; margin: 18px 0;
  font-size: 14px; line-height: 1.65;
}
.pravne-ramik strong { display: block; margin-bottom: 6px; }

.pravne-udaje {
  font-family: var(--data); font-size: 13px; line-height: 1.9; color: var(--ink-70);
}

/* Pätička s firemnými údajmi */
.paticka-firma {
  border-top: 1px solid var(--rule);
  margin-top: 30px; padding-top: 24px;
  display: grid; gap: 18px;
  grid-template-columns: 1fr auto;
  font-size: 12px; line-height: 1.7; color: var(--muted);
}
@media (max-width: 720px) { .paticka-firma { grid-template-columns: 1fr; } }
.paticka-firma-nazov { font-weight: 600; color: var(--ink-70); }
.paticka-odkazy { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.paticka-odkazy a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.paticka-odkazy a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Zložená značka, rovnaká ako na hlavnej stránke. */
.znacka-lockup {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none;
}
.znacka-lockup .symbol { height: 22px; width: auto; display: block; }
.znacka-lockup .znacka { width: 112px; }
@media (max-width: 560px) {
  .znacka-lockup .znacka { display: none; }
  .znacka-lockup .symbol { height: 26px; }
}