/*
  STC Production — prezentačný web.

  Tichý, tmavý, pomalý. Jedna myšlienka na obrazovku, veľa priestoru okolo.
  Nadpisy nesie pätkové písmo, všetko ostatné bezpätkové v jemných rezoch —
  kontrast medzi nimi robí ten pokojný, drahý dojem.

  Panely majú pripravené miesto na fotografiu (--snimka). Kým fotografie nie
  sú, panel drží tmavý odtieň a stránka nevyzerá rozrobene — len prísnejšie.
*/

:root {
  --cierna: #0a0a0a;
  --cierna-mekka: #121212;
  --uhol: #1a1a19;
  --biela: #f4f2ee;
  --seda: #97948d;
  --seda-tmava: #57554f;
  --bronz: #b08d57;
  --linka: rgba(244, 242, 238, 0.14);

  --patkove: "Playfair Display", Georgia, "Times New Roman", serif;
  --bezpatkove: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cierna);
  color: var(--biela);
  font: 300 17px/1.75 var(--bezpatkove);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--patkove);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

/* Drobný nadpisok nad nadpisom — nesie rytmus celej stránky. */
.nadpisok {
  font-family: var(--bezpatkove);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronz);
  margin-bottom: 22px;
}
.nadpisok.stred { text-align: center; }

.veta { color: var(--seda); max-width: 46ch; font-size: 17px; }

/* ── Hlavička ─────────────────────────────────────────────────────────── */

.hlavicka {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.hlavicka.pri-posune {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linka);
  padding: 16px 40px;
}

.znacka {
  font-family: var(--patkove);
  font-size: 21px;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.ponuka { display: flex; gap: 34px; }
.ponuka a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--seda);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.ponuka a:hover { color: var(--biela); border-bottom-color: var(--bronz); }

@media (max-width: 860px) {
  .hlavicka { padding: 18px 22px; }
  .ponuka a:not(:last-child) { display: none; }
}

/* ── Úvod ─────────────────────────────────────────────────────────────── */

.uvod {
  position: relative;
  background-image: var(--snimka, none);
  background-size: cover;
  background-position: center;
  min-height: 100svh;
  display: flex;
  /* „safe“ zabráni tomu, aby sa vycentrovaný text na nízkom okne vysunul
     hore pod hlavičku — vtedy sa radšej zarovná od vrchu. */
  align-items: safe center;
  padding: 150px 40px 110px;
  background-color: var(--cierna);
}

/* Bez fotografie nesie úvod aspoň jemný svetelný spád, nech nie je plochý. */
.uvod:not([style*="--snimka"]) {
  background-image: radial-gradient(120% 90% at 78% 18%, #1c1b19 0%, var(--cierna) 62%);
}

.uvod[style*="--snimka"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.3) 70%);
}

.uvod > * { position: relative; }

.uvod-obsah { max-width: 1360px; margin: 0 auto; width: 100%; }

.uvod h1 {
  font-size: clamp(44px, 8.2vw, 116px);
  margin-bottom: 30px;
  max-width: 14ch;
}

.uvod .veta { margin-bottom: 40px; font-size: clamp(16px, 1.6vw, 19px); }

/* Šípka nadol: tenká linka, ktorá sa pomaly plní. Nie ikona, len pohyb. */
.nadol {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 1px;
  height: 58px;
  background: var(--linka);
  overflow: hidden;
}
.nadol span {
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--bronz);
  animation: stekanie 2.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes stekanie {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ── Odkaz so šípkou ──────────────────────────────────────────────────── */

.odkaz-sipka {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linka);
  transition: border-color 0.35s;
}
.odkaz-sipka::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--bronz);
  transition: width 0.35s ease;
}
.odkaz-sipka:hover { border-bottom-color: var(--bronz); }
.odkaz-sipka:hover::after { width: 44px; }

/* ── Panely ───────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: safe center;
  padding: 110px 40px;
  border-top: 1px solid var(--linka);
  background-color: var(--cierna-mekka);
  /* Fotografia sa pridá jediným atribútom priamo v stránke:
     <section class="panel" style="--snimka: url('obrazky/skoly.jpg')">
     Kým tam nie je, panel drží tmavý odtieň a nevyzerá rozrobene. */
  background-image: var(--snimka, none);
  background-size: cover;
  background-position: center;
}
.panel:nth-of-type(even) { background-color: var(--uhol); }

/* Keď pribudne fotografia, prekryje sa jemným závojom, aby text držal. */
.panel[style*="--snimka"]::before {
  /* Závoj drží text čitateľný aj nad svetlou fotografiou. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.35) 68%);
}

/* Pri obrátenom paneli stojí text vpravo — závoj musí tmavnúť z druhej strany. */
.panel.obratene[style*="--snimka"]::before {
  background: linear-gradient(270deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.35) 68%);
}

/* Na úzkom displeji je text cez celú šírku, takže závoj musí kryť celú plochu. */
@media (max-width: 860px) {
  .panel[style*="--snimka"]::before,
  .panel.obratene[style*="--snimka"]::before,
  .uvod[style*="--snimka"]::before {
    background: rgba(10, 10, 10, 0.82);
  }
}

.panel-text {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}
.panel.obratene .panel-text { text-align: right; margin-left: auto; }
.panel.obratene .panel-text > * { margin-left: auto; }

.panel h2 {
  font-size: clamp(32px, 4.6vw, 62px);
  max-width: 15ch;
  margin-bottom: 24px;
}
.panel p { color: var(--seda); max-width: 48ch; }

@media (max-width: 860px) {
  .panel { min-height: auto; padding: 84px 22px; }
  .panel.obratene .panel-text { text-align: left; }
  .panel.obratene .panel-text > * { margin-left: 0; }
}

/* ── Postup ───────────────────────────────────────────────────────────── */

.postup {
  padding: 140px 40px;
  border-top: 1px solid var(--linka);
  background: var(--cierna);
}
.postup > h2 {
  font-size: clamp(30px, 4vw, 52px);
  text-align: center;
  margin-bottom: 80px;
}

.kroky {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1360px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.kroky li { padding: 0 34px; border-left: 1px solid var(--linka); }
.kroky li:first-child { border-left: 0; padding-left: 0; }

.cislo {
  display: block;
  font-family: var(--patkove);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--bronz);
  margin-bottom: 26px;
}
.kroky h3 { font-size: 25px; margin-bottom: 12px; }
.kroky p { color: var(--seda); font-size: 15.5px; }

@media (max-width: 860px) {
  .postup { padding: 90px 22px; }
  .kroky li { border-left: 0; padding: 0 0 40px; }
}

/* ── Výrok pre rodičov ────────────────────────────────────────────────── */

.vyrok {
  padding: 150px 40px;
  border-top: 1px solid var(--linka);
  background: var(--cierna-mekka);
}
.vyrok > div { max-width: 1000px; margin: 0 auto; }

.velka-veta {
  font-family: var(--patkove);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.25;
  margin-bottom: 36px;
  max-width: 24ch;
}

.otazky {
  margin-top: 90px;
  padding-top: 44px;
  border-top: 1px solid var(--linka);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.otazky h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.otazky p { color: var(--seda); font-size: 15px; }

/* ── Dopyt ────────────────────────────────────────────────────────────── */

.dopyt {
  padding: 140px 40px 150px;
  border-top: 1px solid var(--linka);
  background: var(--cierna);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
.dopyt-uvod { position: sticky; top: 130px; }
.dopyt-uvod h2 { font-size: clamp(32px, 4.2vw, 58px); margin-bottom: 22px; }

@media (max-width: 900px) {
  .dopyt { grid-template-columns: 1fr; gap: 48px; padding: 90px 22px 110px; }
  .dopyt-uvod { position: static; }
}

.formular { display: grid; gap: 26px; }
.dvojica { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }

.formular label { display: grid; gap: 9px; }
.formular label > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seda);
}
.formular label > span b { color: var(--bronz); font-weight: 500; }

/* Polia bez rámčekov — len linka pod textom. Tichšie a drahšie. */
.formular input,
.formular select,
.formular textarea {
  font: 300 16px/1.6 var(--bezpatkove);
  color: var(--biela);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linka);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  transition: border-color 0.3s;
}
.formular select { appearance: none; padding-right: 24px; }
.formular select option { background: var(--cierna-mekka); color: var(--biela); }
.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-bottom-color: var(--bronz);
}
.formular textarea { resize: vertical; }

.tlacidlo {
  justify-self: start;
  margin-top: 8px;
  background: transparent;
  color: var(--biela);
  border: 1px solid var(--linka);
  border-radius: 0;
  padding: 17px 42px;
  font: 500 12px/1 var(--bezpatkove);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.tlacidlo:hover { background: var(--biela); color: var(--cierna); border-color: var(--biela); }
.tlacidlo:disabled { opacity: 0.4; cursor: default; }
.tlacidlo:disabled:hover { background: transparent; color: var(--biela); }

.pastica { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.drobne { font-size: 12px; color: var(--seda-tmava); letter-spacing: 0.04em; }

.odozva { font-size: 14px; min-height: 1.6em; letter-spacing: 0.02em; }
.odozva.ok { color: var(--bronz); }
.odozva.chyba { color: #d98b6a; }

/* ── Pätička ──────────────────────────────────────────────────────────
   Nesie zákonom vyžadované údaje, a tých je veľa. Preto drobné písmo,
   štyri stĺpce a tichá šedá — informácia musí byť dostupná, nie nápadná. */

.paticka {
  border-top: 1px solid var(--linka);
  padding: 56px 40px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.paticka-vrch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
}

.znacka-paticka {
  font-family: var(--patkove);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.paticka-odkazy { display: flex; gap: 30px; flex-wrap: wrap; }
.paticka-odkazy a {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--seda);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.paticka-odkazy a:hover { color: var(--biela); border-bottom-color: var(--bronz); }

.paticka-udaje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--linka);
  border-bottom: 1px solid var(--linka);
}
.paticka-udaje h5 {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronz);
}
.paticka-udaje p { font-size: 13.5px; line-height: 1.8; color: var(--seda); }
.paticka-udaje strong { color: var(--biela); font-weight: 400; }
.paticka-udaje a { color: var(--seda); text-decoration: none; border-bottom: 1px solid var(--linka); }
.paticka-udaje a:hover { color: var(--biela); }

.paticka-spodok { padding-top: 32px; display: grid; gap: 14px; max-width: 92ch; }
.paticka-spodok a { color: var(--seda); }
.paticka-spodok a:hover { color: var(--biela); }

@media (max-width: 860px) {
  .paticka { padding: 44px 22px 40px; }
}

/* ── Odhaľovanie pri posune ───────────────────────────────────────────── */

.odhal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s cubic-bezier(0.2, 0.6, 0.2, 1), transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.odhal.vidno { opacity: 1; transform: none; }

/* Kto si pohyb vypol, dostane stránku rovno — nie prázdnu obrazovku. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .odhal { opacity: 1; transform: none; transition: none; }
  .nadol span { animation: none; }
}

/* ── Právne dokumenty ─────────────────────────────────────────────────
   Text na čítanie, nie na obdivovanie: užší stĺpec, väčší riadkový
   preklad, nadpisy tichšie než na hlavnej stránke. */

.pravny { background: var(--cierna); }

.dokument {
  max-width: 78ch;
  margin: 0 auto;
  padding: 150px 40px 120px;
}
.dokument h1 {
  font-size: clamp(32px, 5vw, 56px);
  margin-bottom: 14px;
}
.dokument h2 {
  font-size: clamp(20px, 2.4vw, 27px);
  margin: 56px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--linka);
}
.dokument h3 {
  font-family: var(--bezpatkove);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronz);
  margin: 30px 0 10px;
}
.dokument p, .dokument li { color: var(--seda); font-size: 16px; margin-bottom: 14px; }
.dokument strong { color: var(--biela); font-weight: 400; }
.dokument a { color: var(--biela); text-decoration: none; border-bottom: 1px solid var(--linka); }
.dokument a:hover { border-bottom-color: var(--bronz); }
.dokument ul { padding-left: 20px; margin: 0 0 14px; }
.dokument li { margin-bottom: 8px; }

.platnost {
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seda-tmava) !important;
  margin-bottom: 10px !important;
}

/* Odsek, ktorý spotrebiteľ nesmie prehliadnuť. */
.doraz {
  border-left: 2px solid var(--bronz);
  padding: 4px 0 4px 20px;
  margin: 20px 0 !important;
}

@media (max-width: 860px) {
  .dokument { padding: 110px 22px 80px; }
}